/* ==========================================================================
   Homepage hero carousel
   --------------------------------------------------------------------------
   The only place these styles live. The rules that used to be spread across
   motion.css, layout-fixes.css, site-fixes.css and ui-enhancements.css were
   removed when this file was added: between them they set the hero's height
   three times with !important, and made the reduced-motion state show every
   slide at once because each one was forced to opacity 1.

   Structure per slide (from index.html, or built by api/hero-slides.php):
     .hero-slide[style="--hero-image:url(...)"]   photo, drawn by ::before
       .hero-slide-panel
         .hero-slide-copy       .eyebrow / h1 / .hero-text
         .hero-slide-aside      .hero-slide-details / .hero-actions

   Layer order inside a slide:
     ::before photo  <  ::after scrim  <  .hero-slide-panel

   Colour note: styles.css swaps --accent-text to white inside .hero-slider
   (it is a dark surface), so gold accents here use --gold, not --accent-text.
   ========================================================================== */

/* --- Stage ---------------------------------------------------------------- */

.hero-slider{
  position:relative;
  display:block;
  grid-template-columns:none;            /* neutralise the legacy .condo-hero grid */
  min-height:100svh;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  background:var(--ink);
  color:var(--card);
  /* A vertical swipe should scroll the page, not fight the slider. */
  touch-action:pan-y;
}

/* --- Slides and the image crossfade -------------------------------------- */

.hero-slider .hero-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:clamp(120px,15vh,180px) 0 clamp(112px,15vh,156px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:1;
  /* Leaving: hold full opacity until the incoming slide has finished covering
     this one, then drop it - unseen - and take it out of the stack.

     Both slides must never be half faded at the same time. Fading this one out
     while the next one fades in lets the dark stage show through the pair, and
     the whole hero visibly dips at the midpoint of every change. */
  transition:opacity 1ms linear 900ms,visibility 0s linear 900ms;
}

.hero-slider .hero-slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:2;
  /* Entering: crossfade immediately, on top of the slide that is still there. */
  transition:opacity 900ms var(--motion-ease-out,ease),visibility 0s linear 0s;
}

/* The photograph, slowed down into a drift so a static slide still feels
   alive while it is on screen. */
.hero-slider .hero-slide::before,
.hero-slider .hero-slide::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero-slider .hero-slide::before{
  background:var(--hero-image) center/cover no-repeat;
  transform:scale(1.07);
  transition:transform 7.5s cubic-bezier(.22,.61,.36,1);
}
.hero-slider .hero-slide.is-active::before{
  transform:scale(1);
}
/* Scrim: heavy on the copy side, lifting on the far side so the photograph
   still reads. Kept per slide so it crossfades with its own image. */
.hero-slider .hero-slide::after{
  background:linear-gradient(90deg,
    var(--overlay-strong) 0%,
    var(--overlay-strong) 44%,
    var(--overlay-medium) 74%,
    var(--overlay-subtle) 100%);
}

/* --- Content animation ---------------------------------------------------- */

.hero-slider .hero-slide :is(.eyebrow,h1,.hero-text,.hero-slide-aside,.hero-slide-details li,.hero-actions){
  opacity:0;
  transform:translateY(22px);
  transition:opacity 700ms var(--motion-ease-out,ease),transform 700ms cubic-bezier(.22,.61,.36,1);
}
.hero-slider .hero-slide.is-active :is(.eyebrow,h1,.hero-text,.hero-slide-aside,.hero-slide-details li,.hero-actions){
  opacity:1;
  transform:none;
}
.hero-slider .hero-slide.is-active .eyebrow{transition-delay:140ms,140ms}
.hero-slider .hero-slide.is-active h1{transition-delay:240ms,240ms}
.hero-slider .hero-slide.is-active .hero-text{transition-delay:340ms,340ms}
.hero-slider .hero-slide.is-active .hero-slide-aside{transition-delay:440ms,440ms}
.hero-slider .hero-slide.is-active .hero-slide-details li:nth-child(1){transition-delay:560ms,560ms}
.hero-slider .hero-slide.is-active .hero-slide-details li:nth-child(2){transition-delay:640ms,640ms}
.hero-slider .hero-slide.is-active .hero-slide-details li:nth-child(3){transition-delay:720ms,720ms}
.hero-slider .hero-slide.is-active .hero-actions{transition-delay:820ms,820ms}

/* --- Panel ---------------------------------------------------------------- */

.hero-slide-panel{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  align-items:center;
  justify-content:space-between;
  gap:clamp(32px,5vw,88px);
  width:min(100%,var(--content-max,1680px));
  margin-inline:auto;
  padding-inline:var(--page-gutter,5vw);
  box-sizing:border-box;
  color:var(--card);
}

/* --- Copy ----------------------------------------------------------------- */

.hero-slide-copy{max-width:760px}

/* Type only - the family comes from the site-wide `h1,h2{font-family:
   var(--font-heading)!important}` rule, so the hero keeps the same serif as
   every other heading on the site. */
.hero-slider .hero-slide h1{
  margin:16px 0 22px;
  font-size:clamp(44px,4.7vw,76px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.045em;
  color:var(--card);
}
.hero-slider .hero-slide h1 em{
  font-style:italic;
  color:var(--gold);
}
.hero-slider .hero-slide .eyebrow{
  margin:0;
  color:var(--gold);
  font:700 11px/1 var(--font-text);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hero-slider .hero-slide .hero-text{
  max-width:46ch;
  margin:0;
  color:var(--text-muted);
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.7;
}

/* --- Aside: the highlights card ------------------------------------------- */

.hero-slide-aside{
  display:grid;
  gap:clamp(18px,2vw,26px);
  align-content:center;
  justify-items:stretch;
  padding:clamp(20px,2vw,28px);
  border:1px solid var(--surface-glass-light,rgba(255,255,255,.18));
  border-radius:18px;
  background:color-mix(in srgb,var(--ink) 74%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 22px 54px color-mix(in srgb,var(--ink) 40%,transparent);
}

.hero-slide-details{
  display:grid;
  gap:13px;
  margin:0;
  padding:0;
  list-style:none;
}
.hero-slide-details li{
  position:relative;
  padding-left:17px;
  color:var(--card);
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.hero-slide-details li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
}

.hero-slider .hero-actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
  margin:0;
}
.hero-slider .hero-actions .button{
  justify-content:center;
  min-height:48px;
}
.hero-slider .hero-actions .text-link{
  align-self:flex-start;
  color:var(--card);
}
.hero-slider .hero-actions .text-link .fa-icon{color:var(--gold)}

/* --- Controls ------------------------------------------------------------- */

.hero-slider .hero-controls{
  position:absolute;
  z-index:3;
  right:max(var(--page-gutter,5vw),calc((100vw - var(--content-max,1680px)) / 2 + var(--page-gutter,5vw)));
  bottom:clamp(30px,5.5vh,56px);
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--card);
}
.hero-slider .hero-controls span{
  min-width:76px;
  text-align:center;
  color:var(--card);
  font:700 12px/1 var(--font-text);
  letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
}
.hero-slider .hero-controls span b{
  color:var(--gold);
  font-weight:700;
}
.hero-slider .hero-controls button{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:0 0 46px;
  border:1px solid var(--surface-glass-light,rgba(255,255,255,.18));
  border-radius:50%;
  background:color-mix(in srgb,var(--ink) 46%,transparent);
  color:var(--card);
  font-size:16px;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.hero-slider .hero-controls button:hover,
.hero-slider .hero-controls button:focus-visible{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  transform:translateY(-2px);
}
.hero-slider .hero-controls button:active{transform:none}
.hero-slider:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}

/* --- Responsive ----------------------------------------------------------- */

@media(max-width:1100px){
  .hero-slide-panel{
    grid-template-columns:minmax(0,1fr) minmax(230px,270px);
    gap:clamp(24px,4vw,48px);
  }
  .hero-slider .hero-slide h1{font-size:clamp(40px,4.6vw,58px)}
}

/* Below this the two columns stop fitting side by side: the copy takes the
   full width, the photographs stay behind it, and the highlights turn into a
   chip row so nothing is pushed off the bottom of the screen. */
@media(max-width:860px){
  .hero-slider .hero-slide{
    align-items:flex-end;
    padding:clamp(120px,24vh,200px) 0 clamp(104px,17vh,150px);
  }
  .hero-slider .hero-slide::after{
    background:linear-gradient(180deg,
      var(--overlay-subtle) 0%,
      var(--overlay-medium) 34%,
      var(--overlay-strong) 62%,
      var(--overlay-strong) 100%);
  }
  .hero-slide-panel{grid-template-columns:1fr;gap:24px;align-items:end}
  .hero-slider .hero-slide h1{margin:12px 0 16px;font-size:clamp(34px,8.4vw,52px)}
  .hero-slider .hero-slide .hero-text{max-width:60ch}
  .hero-slide-aside{
    gap:20px;
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .hero-slide-details{display:flex;flex-wrap:wrap;gap:8px;margin:0}
  .hero-slide-details li{
    padding:8px 13px 8px 26px;
    border:1px solid var(--surface-glass-light,rgba(255,255,255,.18));
    border-radius:999px;
    background:color-mix(in srgb,var(--ink) 42%,transparent);
    font-size:10px;
  }
  .hero-slide-details li::before{left:12px;top:1.05em}
  .hero-slider .hero-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px}
  .hero-slider .hero-actions .button{flex:1 1 auto}
  .hero-slider .hero-actions .text-link{align-self:center}
  .hero-slider .hero-controls{bottom:clamp(20px,3.5vh,32px);gap:10px}
  .hero-slider .hero-controls span{min-width:62px;font-size:11px}
  .hero-slider .hero-controls button{width:40px;height:40px;flex-basis:40px;font-size:15px}
}

@media(max-width:560px){
  .hero-slider .hero-slide{padding-bottom:clamp(96px,15vh,124px)}
  .hero-slider .hero-slide h1{font-size:clamp(32px,9.4vw,44px)}
  .hero-slider .hero-actions{flex-direction:column;align-items:stretch}
  .hero-slider .hero-actions .button,
  .hero-slider .hero-actions .text-link{width:100%;justify-content:center}
  .hero-slider .hero-actions .text-link{align-self:stretch}
  .hero-slide-details li{font-size:9px;padding:7px 11px 7px 24px}
}

/* --- Reduced motion ------------------------------------------------------- */

/* The content snaps into place and the photograph stops drifting, but only the
   active slide is still the one that is shown. */
@media(prefers-reduced-motion:reduce){
  .hero-slider .hero-slide,
  .hero-slider .hero-slide::before{transition:none}
  .hero-slider .hero-slide::before{transform:none}
  .hero-slider .hero-slide :is(.eyebrow,h1,.hero-text,.hero-slide-aside,.hero-slide-details li,.hero-actions){
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}