/* =========================================================
   MAC·LA Hero Slider — isolated styles
   File: /wp-content/themes/mac-la/assets/css/hero-slider.css
   All selectors are scoped under the macla-hero-* prefix.
   No global tag selectors (h1/button/img/.elementor) are used.

   Visual language deliberately mirrors the original Home hero
   (.hero/.hslide/.hovl/.htxt/.hlabel/.hhed/.hsub/.hctas/.btn-white/
   .btn-ghost-hero/.hero-dots-bar/.hdot), audited live via DevTools:
     - fonts/colors reuse the site's own custom properties
       (--ff-disp, --ff-body, --amber, --tangerine, --red, --cream)
       so this component always stays in sync with the design system
       instead of duplicating hardcoded values that could drift.
     - height clamp, overlay gradient, spacing and button styles are
       the exact authored values read from the live stylesheet.
   ========================================================= */

.macla-hero-slider {
  position: relative;
  width: 100%;
  isolation: isolate;
}

.macla-hero-slider__viewport {
  position: relative;
  width: 100%;
  height: clamp(750px, 88vh, 860px);
  overflow: hidden;
  background: #1a1420; /* fallback while the first image paints */
}

.macla-hero-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.macla-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}

.macla-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.macla-hero-slide__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.macla-hero-slide__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.macla-hero-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Matches the original .hslide { background-position: center top }. */
  object-position: var(--macla-desktop-pos, center top);
  display: block;
}

/* Bottom-to-top gradient, matching the original .hovl exactly in shape.
   slide_overlay_strength (0-100) drives --macla-overlay-peak (0-1), the
   mid (55%) and top (100%) stops keep the original's proportions of the
   peak (~38.5% and ~12.8%) so the gradient's silhouette never changes,
   only its overall intensity. */
.macla-hero-slide__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    to top,
    rgba(20, 15, 40, var(--macla-overlay-peak, .3)) 0%,
    rgba(20, 15, 40, calc(var(--macla-overlay-peak, .3) * 0.385)) 55%,
    rgba(20, 15, 40, calc(var(--macla-overlay-peak, .3) * 0.128)) 100%
  );
}

.macla-hero-content {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 0 4rem;
  box-sizing: border-box;
}

/* Vertical Content Position (slide_vertical_position) — independent of the
   horizontal alignment rules below. Falls back to --bottom (the original
   hero's only real behavior) when the field is empty/invalid. */
.macla-hero-content--bottom {
  bottom: 0;
  padding-bottom: 4rem;
}

.macla-hero-content--top {
  top: 0;
  padding-top: clamp(6rem, 13vw, 8.75rem);
}

.macla-hero-content--center {
  top: 50%;
  transform: translateY(-50%);
}

.macla-hero-slide--align-left .macla-hero-content { text-align: left; }
.macla-hero-slide--align-center .macla-hero-content { text-align: center; }
.macla-hero-slide--align-right .macla-hero-content { text-align: right; }

.macla-hero-eyebrow {
  font-family: var(--ff-disp, 'Space Grotesk', sans-serif);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber, #E8920A);
  margin: 0 0 1rem;
  display: block;
}

.macla-hero-heading {
  font-family: var(--ff-disp, 'Space Grotesk', sans-serif);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
  color: #ffffff;
  margin: 0 0 1rem;
}

.macla-hero-heading-line {
  display: block;
}

.macla-hero-heading-highlight {
  display: block;
  color: var(--tangerine, #FFB347);
  font-style: normal;
}

.macla-hero-description {
  font-family: var(--ff-body, 'Inter', system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, .68);
  max-width: 460px;
  margin: 0 0 2rem;
}

.macla-hero-slide--align-center .macla-hero-description { margin-left: auto; margin-right: auto; }
.macla-hero-slide--align-right .macla-hero-description { margin-left: auto; margin-right: 0; }

.macla-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.macla-hero-slide--align-center .macla-hero-actions { justify-content: center; }
.macla-hero-slide--align-right .macla-hero-actions { justify-content: flex-end; }

.macla-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-disp, 'Space Grotesk', sans-serif);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  box-sizing: border-box;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.macla-hero-btn--primary {
  background: #ffffff;
  color: var(--red, #FF5A3C);
  padding: .75rem 2rem;
  border: none;
}
.macla-hero-btn--primary:hover,
.macla-hero-btn--primary:focus-visible {
  background: var(--cream, #FAF0E2);
}

.macla-hero-btn--secondary {
  background: transparent;
  color: #ffffff;
  padding: .8rem 2rem;
  border: 1px solid #ffffff;
}
.macla-hero-btn--secondary:hover,
.macla-hero-btn--secondary:focus-visible {
  background: rgba(255, 255, 255, .1);
}

/* Prev/Next controls — the original hero has no arrows (dots only).
   Kept here for keyboard/pointer accessibility already validated in the
   previous stage, but styled to stay out of the way: subtle, low-contrast
   by default, and only fully visible on hover/focus, so they don't
   introduce a visual element the original design doesn't have. */
.macla-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: none;
  background: rgba(20, 15, 40, .35);
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: .55;
  transition: opacity .2s ease, background-color .2s ease;
}
.macla-hero-nav:hover,
.macla-hero-nav:focus-visible {
  opacity: 1;
  background: rgba(20, 15, 40, .6);
}
.macla-hero-nav--prev { left: 1.25rem; }
.macla-hero-nav--next { right: 1.25rem; }

/* Dots bar — a separate, non-overlaid strip below the image, matching the
   original .hero-dots-bar (dots never float on top of the photo). */
.macla-hero-dots-bar {
  background: rgb(26, 20, 32);
  padding: .85rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.macla-hero-dots {
  display: flex;
  gap: .5rem;
}

.macla-hero-dot {
  width: 32px;
  height: 16px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  padding: 0;
  transition: background-color .2s ease;
}
.macla-hero-dot.is-active {
  background: #ffffff;
}

.macla-hero-dot:focus-visible,
.macla-hero-nav:focus-visible,
.macla-hero-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.macla-hero-sr-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Theme variants — minimal hooks for future non-default slides. The
   "default" theme (used by every slide today) intentionally carries no
   overrides here, since it IS the original hero's exact treatment. */
.macla-hero-slide--theme-dark .macla-hero-slide__overlay {
  background: linear-gradient(
    to top,
    rgba(20, 15, 40, calc(var(--macla-overlay-peak, .3) + .15)) 0%,
    rgba(20, 15, 40, calc((var(--macla-overlay-peak, .3) + .15) * 0.385)) 55%,
    rgba(20, 15, 40, calc((var(--macla-overlay-peak, .3) + .15) * 0.128)) 100%
  );
}
.macla-hero-slide--theme-custom { /* intentionally minimal — per-slide overrides arrive via slide_custom_class */ }

/* Solid Brand variant (slide_custom_class = macla-hero-slide--solid-brand) —
   reproduces the original's non-photo "coming soon" brand slide (hslide-solid):
   a diagonal indigo/violet gradient with a centered logo + centered brand
   copy, no photo, no photographic overlay. No __media/__overlay divs are
   rendered for this variant (see inc/hero-slider.php), so the gradient is
   applied directly to the slide itself, which already fills the viewport
   via the base .macla-hero-slide { position:absolute; inset:0 } rule. */
.macla-hero-slide--solid-brand {
  background: linear-gradient(135deg, #251E4A 0%, #3D2870 55%, #6A1B9A 100%);
}

.macla-hero-slide--solid-brand .macla-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.macla-hero-logo {
  display: block;
  width: clamp(180px, 32vw, 380px);
  height: auto;
  margin: 0 auto 1rem;
}

.macla-hero-slide--solid-brand .macla-hero-eyebrow {
  color: rgba(255, 255, 255, .75);
  letter-spacing: .28em;
}

.macla-hero-slide--solid-brand .macla-hero-heading {
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  margin-bottom: 1.25rem;
}

.macla-hero-slide--solid-brand .macla-hero-heading-highlight {
  /* Override the brand tangerine accent — the original's second date line
     is plain white, not an accent color, in this specific composition. */
  color: #ffffff;
}

.macla-hero-slide--solid-brand .macla-hero-actions {
  justify-content: center;
}

@media (max-width: 960px) {
  .macla-hero-content { padding-left: 1.5rem; padding-right: 1.5rem; }
  .macla-hero-content--bottom { padding-bottom: 2.5rem; }
  .macla-hero-content--top { padding-top: clamp(5.5rem, 16vw, 7.5rem); }
}

@media (max-width: 767px) {
  .macla-hero-slider__viewport {
    height: auto; /* real height is computed by JS from the 9:16 mobile artwork */
    min-height: 480px;
  }
  .macla-hero-slide__img { object-position: var(--macla-mobile-pos, center center); }
  .macla-hero-content { padding-left: 1.2rem; padding-right: 1.2rem; }
  .macla-hero-content--bottom { padding-bottom: 2.5rem; }
  .macla-hero-content--top { padding-top: clamp(5rem, 20vw, 6.5rem); }
  .macla-hero-logo { width: clamp(140px, 42vw, 260px); }
  .macla-hero-heading { font-size: clamp(2rem, 8vw, 2.8rem); }
  .macla-hero-description { font-size: .85rem; max-width: 100%; }
  .macla-hero-actions { flex-direction: column; gap: .6rem; }
  .macla-hero-btn { width: 100%; text-align: center; box-sizing: border-box; }
  .macla-hero-nav { width: 2rem; height: 2rem; font-size: 1.2rem; }
  .macla-hero-nav--prev { left: .6rem; }
  .macla-hero-nav--next { right: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .macla-hero-slide,
  .macla-hero-btn,
  .macla-hero-nav,
  .macla-hero-dot {
    transition: none !important;
  }
}