/* hp-modern.css — homepage block polish (2026-09-27, wt53).
   Loaded after theme-variants.css. Layout fixes first, then per-block refinements. */

/* ---- Page grid -------------------------------------------------------------------------
   The builder writes the row gap inline (style="column-gap:20px"). On a phone the grid is a
   single column, but that inline gap plus the sections' inline "grid-column:span 12" created
   11 empty implicit tracks, so the grid area shrank and every full-width section was pulled
   ~50px off the left edge. minmax(0,1fr) also stops a wide carousel from stretching a track. */
.hp-page-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); }
@media (max-width:900px){ .hp-page-grid{ column-gap:16px !important; } }
@media (max-width:600px){
  .hp-page-grid{ display:block !important; }
  .hp-page-grid > .hp-sec{ width:auto; }
  .hp-page-grid > .hp-sec-full.hp-col-12{ margin-left:0; margin-right:0; }
}
.hp-hero-pic{ display:block; width:100%; height:100%; }
.hp-hero-content .hp-hero-h{ font-size:clamp(2.2rem,5vw,3.8rem); font-weight:700; color:#fff; line-height:1.15; margin:0 0 16px; text-shadow:0 2px 20px rgba(0,0,0,.3); }
@media (max-width:768px){ .hp-hero-content .hp-hero-h{ margin-bottom:12px; } }

/* ---- Accessibility & motion ------------------------------------------------------------ */
.hp-sec a:focus-visible, .hp-sec button:focus-visible, .hp-sec input:focus-visible{
  outline:2px solid var(--color-primary,#8e2c6e); outline-offset:3px; border-radius:6px; }
.hp-sec a, .hp-sec button{ -webkit-tap-highlight-color:transparent; }
@media (prefers-reduced-motion:reduce){
  .hp-sec *, .hp-sec *::before, .hp-sec *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---- Typography: no orphans / ragged headings ------------------------------------------ */
/* Longhand only: the text-wrap shorthand would also reset white-space:nowrap on clamped titles. */
.hp-sec h2, .hp-sec .section-title, .hp-hero-content h1, .hp-hero-content .hp-hero-h{ text-wrap-style:balance; }
.hp-sec p{ text-wrap-style:pretty; }

/* ---- Images: reserve the box before the file arrives (no layout shift). --iar is written by
   includes/img-opt.php; :where() keeps this at zero specificity so block CSS always wins. */
:where(img[style*="--iar"]){ aspect-ratio:auto var(--iar); }
/* ---- Images: placeholder tint while loading, never overflow their box ------------------ */
.hp-sec img{ max-width:100%; }
.hp-sec img[loading="lazy"]{ background-color:rgba(0,0,0,.035); }

/* ---- Carousels ------------------------------------------------------------------------- */
/* A team row with fewer people than slots sat left-aligned with a gap on the right. */
.hp-tm.is-center .hp-gal-track.is-grid, .hp-gal-head.is-center + .hp-gal-car .hp-gal-track.is-grid{ justify-content:safe center; }
/* Horizontal tracks: smooth momentum + snap on touch, no visible scrollbar. */
.hp-gal-track{ -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.hp-gal-track::-webkit-scrollbar{ display:none; }
@media (max-width:600px){
  /* Smaller arrow buttons tucked inside the edge so they no longer cover faces/logos. */
  .hp-gal-nav, .hp-tst-nav{ width:34px !important; height:34px !important; font-size:12px; box-shadow:0 2px 10px rgba(0,0,0,.12); }
  .hp-gal-nav.is-prev, .hp-tst-nav.is-prev{ left:6px !important; }
  .hp-gal-nav.is-next, .hp-tst-nav.is-next{ right:6px !important; }
}

/* ---- Hero ------------------------------------------------------------------------------ */
@media (max-width:600px){
  .hp-hero-btns{ gap:10px; }
  .hp-hero-btn{ min-height:44px; }            /* comfortable tap target */
}