/* Overlay carousel — image-overlay version of the carousel.
   Separate device from the cream carousel (components/carousel.css).
   Notes: docs/mock-component-map.md (proposed section) */

/* .carousel--overlay — modifier only. The base component is built for the
   cream mid-body: solid #faf9f6, a black-to-cream gradient cap, and dark
   type. This strips the background and inverts the type so the same
   component can sit over a hero image. Candidate to append to
   assets/css/components/carousel.css if it locks. */
.carousel--overlay{background:none;margin-top:0;z-index:2;overflow:visible}
.carousel--overlay::before{display:none}
.carousel--overlay .carousel-inner{padding:0 3rem;max-width:1100px}
.carousel--overlay .carousel-label{
  color:#fff;
  font-size:clamp(.95rem,1.5vw,1.2rem);
  font-weight:700;letter-spacing:.24em;
  text-shadow:0 2px 18px rgba(0,0,0,.95),0 0 40px rgba(0,0,0,.7);
  margin-bottom:2.6rem;
}
.carousel--overlay .carousel-timeline{margin-bottom:3rem;max-width:850px}
.carousel--overlay .carousel-timeline::before{
  background:linear-gradient(90deg,
    transparent,
    rgba(254,192,39,.5) 15%,
    rgba(254,192,39,.75) 50%,
    rgba(254,192,39,.5) 85%,
    transparent
  );
}
.carousel--overlay .carousel-node-label{
  color:rgba(255,255,255,.88);
  font-size:clamp(.72rem,1.35vw,.95rem);
  font-weight:700;letter-spacing:.14em;
  text-shadow:0 2px 14px rgba(0,0,0,.95);
}
.carousel--overlay .carousel-node--active .carousel-node-label{color:var(--gold)}
.carousel--overlay .carousel-track{min-height:440px;overflow:visible}
.carousel--overlay .carousel-headline{
  color:#fff;
  font-size:clamp(2.4rem,5.6vw,4.4rem);
  font-weight:500;
  text-shadow:0 2px 22px rgba(0,0,0,.95),0 0 50px rgba(0,0,0,.75);
}
.carousel--overlay .carousel-headline .gold{color:var(--gold)}
.carousel--overlay .carousel-sub{
  color:rgba(255,255,255,.94);
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  max-width:600px;
  text-shadow:0 2px 16px rgba(0,0,0,.95);
}
.carousel-cta{
  display:inline-block;margin-top:2rem;
  font-family:var(--display);font-size:clamp(.8rem,1.2vw,.95rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);
  border-bottom:1px solid rgba(254,192,39,.55);
  padding-bottom:.4rem;
  text-shadow:0 2px 16px rgba(0,0,0,.95);
  transition:color .3s,border-color .3s;
}
.carousel-cta:hover{color:#fff;border-color:#fff}
/* Button inside a cream prose block. prose.css styles anchors inside
   .prose-block, which overrode .hero-cta's black label and left gold on
   gold. Colour is restated here at higher specificity. */
.prose-block a.prose-cta{margin-top:2.6rem;color:#000}
.prose-block a.prose-cta:hover{color:#000}
@media(max-width:768px){
  .carousel--overlay .carousel-inner{padding:0 1.5rem}
  .carousel--overlay .carousel-track{min-height:500px}
  .carousel--overlay .carousel-node-label{font-size:.6rem;letter-spacing:.08em}
}