/* Hero: hover arrows + optional secondary (side) promo panel.
   Secondary OFF => markup uses .hero-single and looks exactly like before. */
.hero-single{display:block}
.hero-layout{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);gap:18px;align-items:stretch}
.hero-layout>.hero-content{min-width:0}

/* Slightly shorter hero and tighter side spacing on desktop/tablet (Admin → Image Sizes can override the height) */
@media(min-width:701px){.hero{padding-left:8px;padding-right:8px}.hero-content{height:440px}}

/* Arrows: vertically centred inside the image, left/right edge */
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:42px;height:42px;padding:0;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);color:#171715;
  box-shadow:0 4px 14px rgba(0,0,0,.18);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s ease,background .2s ease}
.hero-prev{left:14px}.hero-next{right:14px}
.hero-arrow:hover{background:#fff}
.hero-content:hover .hero-arrow,.hero-content:focus-within .hero-arrow{opacity:1;pointer-events:auto}
/* Touch devices have no hover: keep small, always-visible arrows */
@media (hover:none){.hero-arrow{opacity:.85;pointer-events:auto;width:40px;height:40px}.hero-prev{left:8px}.hero-next{right:8px}}

/* Secondary hero (side panel) */
.hero-side{display:grid;grid-auto-rows:minmax(0,1fr);gap:18px;height:440px;min-width:0}
.hero-promo{position:relative;min-height:0;border-radius:22px;overflow:hidden;background:#f3f1ec}
.hero-promo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-promo-cover{position:absolute;inset:0;z-index:2}
.hero-promo-text{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 18px 16px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0))}
.hero-promo-text h3{margin:0 0 4px;font-size:18px;line-height:1.25}
.hero-promo-text p{margin:0 0 10px;font-size:13px;line-height:1.4;opacity:.95}
.hero-promo-text .btn{padding:9px 16px;font-size:12px}

/* Tablet: stack, side promos in one row below the main hero */
@media (max-width:900px){
  .hero-layout{grid-template-columns:minmax(0,1fr);gap:12px}
  .hero-side{height:auto;grid-auto-rows:auto;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px}
  .hero-promo{aspect-ratio:16/9;border-radius:16px}
}
@media (max-width:700px){
  .hero-promo{aspect-ratio:4/3;border-radius:14px}
  .hero-promo>img{object-fit:contain;background:#f3f1ec}
  .hero-promo-text{padding:12px}.hero-promo-text h3{font-size:14px}.hero-promo-text p{font-size:12px;margin-bottom:8px}
}
@media (max-width:420px){.hero-side{grid-template-columns:minmax(0,1fr)}}
/* One slide = no dots */
.hero-dots:has(.hero-dot:only-child){display:none!important}

/* Mobile only: shorter main hero (full width), secondary hero hidden */
@media (max-width:700px){
  .hero-content{min-height:0;aspect-ratio:2/1}
  .hero-slide{object-fit:cover}
  .hero-side{display:none}
}

/* Mobile: hide the < > hero arrows (swipe, dots and auto-play still work). Desktop is unchanged. */
@media (max-width:768px),(hover:none) and (pointer:coarse){.hero-arrow{display:none!important}}