/* ==========================================================================
   Dom-Detal — home hero: banner carousel + promo tiles (components/home_banners.html).
   Linked from the component itself, so only pages that show the hero download it;
   builds on base.css tokens and .btn. Formerly base.css section 25.
   ========================================================================== */

/* Home banners & promo tiles =========================================== */
/* components/home_banners.html + js/banners.js. Carousel = CSS scroll-snap; JS adds autoplay, dots, arrows. */
.home-hero { padding-block: 12px 4px; }
@media (min-width: 768px) { .home-hero { padding-block: 20px 8px; } }
.home-hero__grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .home-hero__grid { grid-template-columns: minmax(0, 1fr) 296px; gap: 16px; } }

.hb { position: relative; container-type: inline-size; min-width: 0; }
.hb__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; border-radius: var(--r-xl); outline: none;
  box-shadow: var(--sh-md);
}
.hb__track::-webkit-scrollbar { display: none; }
.hb__slide {
  --hb-fg: #fff; --hb-muted: rgba(255, 255, 255, .9);
  position: relative; overflow: hidden; isolation: isolate;
  scroll-snap-align: start; scroll-snap-stop: always;
  aspect-ratio: 1 / 1; background: #1A4FF0; color: var(--hb-fg);
}
.hb__slide--ice { --hb-fg: var(--c-ink); --hb-muted: var(--c-ink-600); background: #E4EDFF; }
.hb__slide--warm { --hb-fg: var(--c-ink); --hb-muted: #4A3A22; background: #FFEFD6; }
.hb__slide--dark { background: #0E1A3A; }
@media (min-width: 768px) { .hb__slide { aspect-ratio: 8 / 3; min-height: 260px; } }
.hb__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
@media (min-width: 768px) { .hb__img { object-position: right center; } }
.hb__content {
  position: absolute; inset: 0 0 auto 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 20px 20px 0;
}
.hb__eyebrow {
  display: none; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .16); color: #fff;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
}
.hb__eyebrow .icon { --icon-size: 16px; }
.hb__slide--ice .hb__eyebrow, .hb__slide--warm .hb__eyebrow { background: #fff; color: var(--c-primary); box-shadow: var(--sh-xs); }
.hb__slide--warm .hb__eyebrow { color: var(--c-accent-ink); }
.hb__title {
  font-size: clamp(1.375rem, 6.6cqi, 1.875rem); font-weight: 800; line-height: 1.08; letter-spacing: -.032em;
  color: var(--hb-fg); max-width: 15ch; text-wrap: balance;
}
.hb__accent { display: block; color: #FFC266; }
.hb__slide--ice .hb__accent, .hb__slide--warm .hb__accent { color: var(--c-primary); }
.hb__text { font-size: var(--fs-sm); line-height: 1.45; color: var(--hb-muted); max-width: 36ch; }
.hb__cta { margin-top: 6px; --btn-h: 42px; --btn-px: 16px; font-size: var(--fs-sm); }
.hb__cta .icon { transition: transform var(--dur) var(--ease-out); }
.hb__cta:hover .icon { transform: translateX(3px); }
@container (min-width: 600px) {
  .hb__content { inset: 0 auto 0 0; width: 47%; justify-content: center; gap: 12px; padding: 24px 0 52px clamp(24px, 4.5cqi, 56px); }
  .hb__eyebrow { display: inline-flex; }
  .hb__title { font-size: clamp(1.5rem, 3.9cqi, 2.875rem); max-width: 14ch; }
  .hb__text { font-size: clamp(.875rem, 1.45cqi, 1.0625rem); }
  .hb__cta { --btn-h: 48px; --btn-px: 22px; font-size: var(--fs-base); }
}
@container (min-width: 600px) and (max-width: 819.98px) { .hb__eyebrow { display: none; } .hb__text { display: none; } }

/* Controls: under the slide on phones, overlaid bottom-left from 600px */
.hb__controls { display: none; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; color: var(--c-ink); }
.hb.is-ready .hb__controls { display: flex; }
@container (min-width: 600px) {
  .hb__controls { position: absolute; left: clamp(24px, 4.5cqi, 56px); bottom: 18px; margin: 0; justify-content: flex-start; color: #fff; }
  .hb[data-theme="light"] .hb__controls { color: var(--c-ink); }
}
.hb__btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: inherit;
  background: color-mix(in srgb, currentColor 10%, transparent);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.hb__btn:hover { background: color-mix(in srgb, currentColor 20%, transparent); }
.hb__btn:active { transform: scale(.92); }
.hb__btn:focus-visible, .hb__dot:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hb__btn .icon { --icon-size: 18px; }
.hb__btn .icon--play { display: none; }
.hb.is-paused .hb__btn .icon--pause { display: none; }
.hb.is-paused .hb__btn .icon--play { display: inline-block; }
.hb__dots { display: flex; align-items: center; gap: 2px; }
.hb__dot { position: relative; display: grid; place-items: center; width: 22px; height: 32px; }
.hb__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-full);
  background: currentColor; opacity: .35; transition: width var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.hb__dot[aria-current="true"] { width: 40px; }
.hb__dot[aria-current="true"]::before { width: 30px; opacity: .35; }
.hb__dot[aria-current="true"]::after {
  content: ""; position: absolute; left: 5px; top: 12px; width: 30px; height: 8px; border-radius: var(--r-full);
  background: currentColor; transform-origin: left center;
}
.hb.is-playing .hb__dot[aria-current="true"]::after { animation: hb-progress var(--hb-interval, 6s) linear both; }
@keyframes hb-progress { from { transform: scaleX(.12); } to { transform: scaleX(1); } }

/* Promo tiles (beside the carousel from 1200px, below it on smaller screens) */
.home-hero__tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .home-hero__tiles { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 16px; } }
.promo-tile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  min-height: 150px; padding: 16px; border-radius: var(--r-xl);
  background: var(--c-surface); color: var(--c-ink); box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.promo-tile:focus-visible { outline: none; box-shadow: var(--ring), var(--sh-sm); }
@media (hover: hover) { .promo-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); } }
.promo-tile__title { position: relative; z-index: 1; display: block; font-family: var(--font-head); font-size: var(--fs-base); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; max-width: 13ch; }
.promo-tile__text { position: relative; z-index: 1; display: block; margin-top: 6px; font-size: var(--fs-xs); line-height: 1.45; max-width: 24ch; opacity: .92; }
.promo-tile__more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; }
.promo-tile__more .icon { --icon-size: 18px; transition: transform var(--dur) var(--ease-out); }
.promo-tile:hover .promo-tile__more .icon { transform: translateX(3px); }
.promo-tile__art { position: absolute; z-index: 0; right: -10px; bottom: -8px; width: 96px; height: 96px; transition: transform var(--dur-slow) var(--ease-out); }
.promo-tile:hover .promo-tile__art { transform: scale(1.06) rotate(-3deg); }
.promo-tile--dark { background: radial-gradient(120% 120% at 100% 100%, #1D3B9A 0%, #12204A 45%, var(--c-black) 100%); color: #fff; }
.promo-tile--dark .promo-tile__more { color: #FFC266; }
.promo-tile--amber { background: linear-gradient(140deg, #FFF4E0 0%, #FFE2AE 60%, #FFCF7A 100%); }
@media (max-width: 559.98px) {
  .home-hero__tiles { grid-template-columns: minmax(0, 1fr); }
  .promo-tile { min-height: 0; padding: 16px 18px; }
  .promo-tile__title, .promo-tile__text { max-width: calc(100% - 108px); }
  .promo-tile__art { width: 84px; height: 84px; right: 10px; bottom: auto; top: 50%; margin-top: -42px; }
  .promo-tile:hover .promo-tile__art { transform: none; }
}
@media (min-width: 640px) {
  .promo-tile { padding: 20px 22px; }
  .promo-tile__title { font-size: var(--fs-lg); }
  .promo-tile__text { font-size: var(--fs-sm); max-width: min(30ch, calc(100% - 128px)); }
  .promo-tile__art { width: 118px; height: 118px; right: 8px; bottom: 6px; }
}
@media (min-width: 1200px) {
  .promo-tile { padding: 20px; }
  .promo-tile__text { max-width: 17ch; }
  .promo-tile__art { width: 92px; height: 92px; right: 8px; bottom: 10px; }
}

/* Focus on dark slides: white outer ring on a dark gap (the default blue ring would vanish). */
.hb__slide[data-theme="dark"] { --c-focus: #fff; --c-focus-gap: var(--c-primary-900); }

/* Touch targets (phones, touch screens): 44 px hit areas for the carousel controls. */
@media (max-width: 767.98px), (pointer: coarse) {
  .hb__btn { position: relative; width: 40px; height: 40px; }
  .hb__btn::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
  .hb__dot { width: 32px; height: 44px; }
  .hb__dot[aria-current="true"] { width: 40px; }
  .hb__dot[aria-current="true"]::after { top: 18px; }
}