/* Backyard activities for kids (/backyard-activities-for-kids/). Loaded after guide.css.
   Pieces the magpie template doesn't have: a time-and-season line on each activity, the night
   band with a photo, the four seasons, the tips and the safety list. Page colour: tongue blue. */

/* Activities: a time-and-season line under each name */
.ba-meta { display: block; margin: -1px 0 4px; font-stretch: 75%; font-weight: 700; font-size: 14px; color: var(--c); font-variant-numeric: tabular-nums; }
.ba-acts li a:not(.src) { font-stretch: 75%; font-weight: 700; font-size: 15px; white-space: nowrap; }

/* Tips */
.ba-tips { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--hair2); max-width: 60em; }
.ba-tips li { position: relative; padding: 13px 0 14px 26px; border-bottom: 1px solid var(--hair2); font-size: 16.5px; line-height: 1.45; }
.ba-tips li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 10px; height: 10px; background: var(--c); border-radius: 50%; }
.ba-tips b { font-weight: 750; }

/* Night band */
.ba-night-grid { display: grid; gap: 28px; }
.ba-night-p { font-size: 17px; line-height: 1.5; max-width: 34em; color: var(--paper-n); }
.ba-night-fig { margin: 0 calc(-1 * var(--gut)); }
.ba-night-fig .ph { aspect-ratio: 3 / 2; background: #0B0D0E; }
.ba-night-fig figcaption { font-stretch: 75%; font-size: 13px; color: var(--ink2-n); padding: 9px var(--gut) 0; }
.ba-night-fig figcaption a { color: var(--ink2-n); }
@media (min-width: 1024px) {
  .ba-night-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; align-items: center; }
  .ba-night-fig { margin: 0; }
  .ba-night-fig figcaption { padding-left: 0; padding-right: 0; }
}

/* Four seasons */
.ba-seasons { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 26px; }
.ba-sea { border-top: 3px solid var(--ink); padding-top: 10px; min-width: 0; }
.ba-sea-m { margin: 0 0 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-stretch: 125%; font-weight: 860; font-size: 30px; line-height: 1; letter-spacing: -.025em; }
.ba-sea-m span { font-stretch: 75%; font-weight: 700; font-size: 14px; letter-spacing: 0; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ba-sea ul { list-style: none; margin: 0; padding: 0; }
.ba-sea li { padding: 11px 0 12px; border-bottom: 1px solid var(--hair2); font-size: 16px; line-height: 1.45; }
.ba-sea li b { font-weight: 750; }
.ba-sea li a:not(.src) { font-stretch: 75%; font-weight: 700; font-size: 15px; white-space: nowrap; }
@media (min-width: 760px) { .ba-seasons { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
@media (min-width: 1280px) { .ba-seasons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Safety list */
.ba-safe { list-style: none; margin: 28px 0 0; padding: 0; border-top: 3px solid var(--ink); max-width: 60em; }
.ba-safe li { position: relative; padding: 14px 0 15px 30px; border-bottom: 1px solid var(--hair2); font-size: 16.5px; line-height: 1.45; }
.ba-safe li::before { content: ""; position: absolute; left: 1px; top: 19px; width: 14px; height: 14px; border: 2.5px solid var(--red); border-radius: 50%; }
.ba-safe b { font-stretch: 112%; font-weight: 800; }
.ba-safe a.tel { font-weight: 700; white-space: nowrap; }
.ba-safe li a:not(.src):not(.tel) { font-weight: 650; }