/* Home page (October 2026): the daily strip, doors into Games and Learn, and
   the picture board of the eight sections. Card styles live in assets/hubs.css. */

.hm-daily{padding-top:40px;padding-bottom:24px}
.hm-daily .hb-strip-head h2{font-size:clamp(30px,3.4vw,42px)}

/* ---------- the eight sections, as pictures ---------- */
.hm-board .sec-head{margin-bottom:28px}
.hm-board .wrap{container-type:inline-size}
.hm-sec-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
/* Columns follow the width of the page's own column (the news rail takes the rest). */
@container (min-width:520px){.hm-sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:860px){.hm-sec-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:1120px){.hm-sec-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hm-sec{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.hm-sec-pic{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.hm-sec-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hm-sec-pic:hover img{transform:scale(1.04)}
.hm-sec-name{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 12px;color:#fff;font-family:var(--display);font-size:clamp(24px,2.2vw,30px);line-height:1.05;
  background:linear-gradient(180deg,rgba(15,25,29,0),rgba(15,25,29,.78))}
.hm-sec-lede{margin:14px 16px 6px;font-size:16px;line-height:1.45;color:var(--muted)}
.hm-sec-links{list-style:none;margin:0;padding:0 8px;display:flex;flex-direction:column}
.hm-sec-links a{display:flex;align-items:center;min-height:44px;padding:6px 8px;border-radius:10px;font-weight:600;font-size:16px;color:var(--ink)}
.hm-sec-links a:hover{background:var(--bg-2);color:var(--accent)}
.hm-sec-all{margin:auto 16px 16px;padding-top:6px}
.hm-tools{margin-top:44px}
.hm-tools h3{font-size:clamp(22px,2.2vw,28px);margin:0 0 16px}
.hm-credits{padding-bottom:20px}

@container (max-width:519px){.hm-sec-grid{gap:16px}.hm-sec-pic{aspect-ratio:16/9}}
@media (max-width:560px){.hm-daily{padding-top:28px}}
@media (prefers-reduced-motion:reduce){.hm-sec-pic img{transition:none}.hm-sec-pic:hover img{transform:none}}