/* School season guides (/jadual-cuti-sekolah-anak/, /persediaan-buka-sekolah/ and their /en/ twins).
   Loads after site.css, seasons.css, answers.css and printables.css and reuses their tiles (s-hero,
   s-weeks, s-tiles, s-split, p-cards, faq). Adds the hero art tile, the KPM dates table, a timed day
   list, the age tiles and the week-before checklist. Tokens only. */

/* hero: the page's generated clay scene in a grey tile beside the answer */
.cs-art { margin: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--tile); }
.cs-art img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; object-position: 70% 50%; }
@media (max-width: 39.99rem) { .cs-art img { aspect-ratio: 4 / 3; } }

/* KPM dates: group column reads as a label, the source sits under the table */
.cs-dates { max-width: none; }
.cs-dates th[scope="row"] { font-weight: var(--wt-strong); }
.cs-dates td b { font-weight: var(--wt-strong); }
.cs-src { margin: var(--s4) 0 0; font-size: var(--t-meta); color: var(--muted); line-height: 1.5; max-width: 72ch; }
@media (max-width: 39.99rem) { .cs-dates .cs-shed { display: none; } }

/* example day: time on the left, what happens on the right, hairline rows */
.cs-day { list-style: none; padding: 0; margin: 0; max-width: 46rem; }
.cs-day li { margin: 0; display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--border); }
.cs-day li:last-child { border-bottom: 1px solid var(--border); }
.cs-day time, .cs-day .cs-when { font-size: var(--t-small); font-weight: var(--wt-strong); color: var(--muted); padding-top: 2px; font-variant-numeric: tabular-nums; }
.cs-day b { display: block; font-weight: var(--wt-strong); }
.cs-day span { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--t-small); }

/* two day lists side by side from tablet (morning and evening) */
.cs-two { display: grid; gap: var(--s10) var(--s12); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .cs-two { grid-template-columns: repeat(2, 1fr); } }
.cs-two > div { min-width: 0; }
.cs-two h3 { margin: 0 0 var(--s4); }

/* chores by age band: four tiles, rows always full */
.cs-ages { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .cs-ages { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 72rem) { .cs-ages { grid-template-columns: repeat(4, 1fr); } }
.cs-ages > li { margin: 0; background: var(--tile); border-radius: var(--radius-card); padding: var(--s8) var(--pad-card); display: flex; flex-direction: column; min-width: 0; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.cs-ages > li:hover { transform: translateY(-4px); box-shadow: var(--s-lift); }
.cs-ages .s-clay { width: 88px; height: 88px; margin: 0 0 var(--s4) -6px; }
.cs-ages > li:hover .s-clay { transform: translateY(-6px) rotate(-6deg) scale(1.06); }
.cs-ages h3 { margin: 0 0 var(--s2); }
.cs-ages .cs-own { margin: 0 0 var(--s4); color: var(--muted); font-size: var(--t-small); }
.cs-ages .p-dots { margin-bottom: var(--s5); }
.cs-ages .cs-more { margin-top: auto; font-size: var(--t-small); font-weight: var(--wt-medium); }
.cs-ages .cs-more a { display: inline-block; padding-block: 11px; }

/* week-before checklist: day label, task, why; a ring marks each row as something to tick */
.cs-check { list-style: none; padding: 0; margin: 0; max-width: 52rem; }
.cs-check li { margin: 0; position: relative; padding: var(--s5) 0 var(--s5) calc(var(--s8) + var(--s2)); border-top: 1px solid var(--border); }
.cs-check li:last-child { border-bottom: 1px solid var(--border); }
.cs-check li::before { content: ""; position: absolute; left: 0; top: calc(var(--s5) + 2px); width: 22px; height: 22px; border: 1.5px solid var(--muted); border-radius: 50%; }
.cs-check .cs-when { display: block; font-size: var(--t-meta); font-weight: var(--wt-strong); color: var(--muted); margin-bottom: var(--s1); }
.cs-check b { display: block; font-weight: var(--wt-strong); }
.cs-check span:not(.cs-when) { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--t-small); }

/* a sub-heading that opens the second table or list inside a section */
.cs-sub { margin: var(--s12) 0 var(--s4); }

/* three download cards: a three-wide row on desktop instead of four */
@media (min-width: 72rem) { .p-cards.cs-three { grid-template-columns: repeat(3, 1fr); } }