/* =================================================================
   TURATHYA — HERO: SVG Framed Showcase  (v6)
   Background : assets/images/bg-2.png
   Frame      : assets/images/ornate-frame.svg  (SVG — scales perfectly)
   Slider     : hero-slider.js  (UNCHANGED)

   ── STRUCTURE ────────────────────────────────────────────────────
   .frame-container.frame-wrapper   position:relative  (JS targets .frame-container)
     ├─ .frame-inner                position:absolute  (JS targets .frame-inner)
     │    └─ .hero-slider           position:absolute inset:0
     │         └─ .hero-slide(s)
     └─ .frame-svg  #heroFrameImage position:relative z-index:3  (JS targets #heroFrameImage)

   ── POSITIONING LOGIC ────────────────────────────────────────────
   .frame-inner uses CSS inset percentages (top/left/right/bottom)
   matching the SVG frame's transparent opening.
   hero-slider.js positionSlider() overrides with exact px values.
   BORDER constants in hero-slider.js must match these CSS values.
   ================================================================= */


/* ════════════════════════════════════════════════════════════════
   1. HERO SHELL
   ════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  box-sizing: border-box;

  padding-top: 90px;
  padding-bottom: 40px;
  padding-left: 0;
  padding-right: 0;

  overflow: hidden;

  /* Reset any grid/flex from landing.css */
  display: block !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  place-items: unset !important;
  place-content: unset !important;
  text-align: unset;

  content-visibility: visible;
  contain: none;

  /* Always LTR — centered frame must not shift in RTL */
  direction: ltr;
}


/* ════════════════════════════════════════════════════════════════
   2. HERO BACKGROUND
   ════════════════════════════════════════════════════════════════ */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/images/bg-2.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.04);
}


/* ════════════════════════════════════════════════════════════════
   3. ATMOSPHERIC OVERLAY
   ════════════════════════════════════════════════════════════════ */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.12);
}


/* ════════════════════════════════════════════════════════════════
   4. EDGE VIGNETTE
   ════════════════════════════════════════════════════════════════ */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.40) 100%
  );
}


/* ════════════════════════════════════════════════════════════════
   5. FRAME WRAPPER  (the container for SVG frame + slider)
   ════════════════════════════════════════════════════════════════ */
.frame-container,
.frame-wrapper {
  /* ── Perfect centering in usable space (viewport minus header) ──────────
     Usable area: from --header-h to 100vh.
     Its midpoint is at:  header_h + (100vh - header_h) / 2
                        = 50vh + header_h / 2
     So:  top: calc(50% + var(--header-h, 90px) / 2)
          transform: translate(-50%, -50%)  ← centers the element on that point
     ─────────────────────────────────────────────────────────────────────── */
  position: absolute;
  top: calc(50% + var(--header-h, 90px) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;

  /* Desktop size */
  width: 90%;
  max-width: 900px;

  /* Allow drop-shadow to bleed outside without clipping */
  overflow: visible;

  /* Premium depth */
  filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.35));
}


/* ════════════════════════════════════════════════════════════════
   6. SVG FRAME IMAGE  (sits ON TOP of slider — z-index:3)
      SVG transparent center reveals slider below (z-index:1)
   ════════════════════════════════════════════════════════════════ */
.frame-svg,
.frame-image {
  display: block;
  width: 100%;     /* fills container — container controls the size */
  height: auto;    /* preserves SVG viewBox aspect ratio — never distort */
  position: relative;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.4s ease;
  /* NO transform, NO vw sizing — let the container clamp do the work */
}


/* ════════════════════════════════════════════════════════════════
   7. FRAME INNER — slider window (BEHIND svg, z-index:1)
   ──────────────────────────────────────────────────────────────
   Inset percentages calibrated to ornate-frame.svg transparent opening.
   Pushed inward slightly beyond the raw SVG measurement so the
   slider content never bleeds under the ornate decorative borders.

   SVG viewBox: 0 0 1532 1196
   Transparent opening (adjusted to sit inside border decoration):
     top    ≈ 17%  of frame height   (was 14% — +3% safety margin)
     bottom ≈ 17%  of frame height   → height 66%  (was 72%)
     left   ≈ 14%  of frame width    (was 12% — +2% safety margin)
     right  ≈ 14%  of frame width    → width  72%  (was 76%)
   ════════════════════════════════════════════════════════════════ */
.frame-inner {
  position: absolute;

  /* ── Slider window — sits fully inside the frame's visible opening ── */
  top:    17%;          /* push below top ornate border  */
  left:   14%;          /* push inside left ornate border */
  width:  72%;          /* 100 - 14 - 14                  */
  height: 66%;          /* 100 - 17 - 17                  */

  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 1;           /* BEHIND frame-svg (z-index:3)   */
  background: transparent;
  border-radius: 4px;
}


/* ════════════════════════════════════════════════════════════════
   8. FRAME SHADOW — inner edge depth on slider
   ════════════════════════════════════════════════════════════════ */
.frame-shadow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.14) 100%
  );
}


/* ════════════════════════════════════════════════════════════════
   9. HERO SLIDER
   ════════════════════════════════════════════════════════════════ */
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Individual slide */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.hero-slide.is-active {
  opacity: 1;
}

/* Slide image — Ken Burns subtle zoom */
.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  transition: transform 6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hero-slide.is-active .hero-slide-img {
  transform: scale(1);
}


/* ════════════════════════════════════════════════════════════════
   10. SLIDE OVERLAY — auction metadata
   ════════════════════════════════════════════════════════════════ */
.slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 2.2rem 1.6rem 1.4rem;
  background: linear-gradient(
    to top,
    rgba(8, 4, 2, 0.82) 0%,
    rgba(8, 4, 2, 0.50) 50%,
    transparent        100%
  );
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.slide-label {
  display: block;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(0.7rem, 1.1vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 210, 130, 0.92);
  margin-bottom: 0.5rem;
}

.slide-title {
  display: block;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 600;
  color: rgba(255, 248, 235, 0.97);
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin: 0;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
}

.slide-bid {
  display: inline-block;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(0.75rem, 1.1vw, 0.95rem);
  font-weight: 400;
  color: rgba(255, 210, 130, 0.75);
  letter-spacing: 0.06em;
}


/* ════════════════════════════════════════════════════════════════
   11. SLIDE DOTS
   ════════════════════════════════════════════════════════════════ */
.hero-dots {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.hero-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 220, 160, 0.28);
  transition: all 0.45s ease;
}

.hero-dot.is-active {
  background: rgba(255, 210, 130, 0.92);
  width: 24px;
  border-radius: 4px;
}

.hero-dot:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.35);
}


/* ════════════════════════════════════════════════════════════════
   12. RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════════ */

/* ── Mobile  ≤ 768px ───────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    position: relative;
    display: block !important;
    height: 100svh;
    min-height: 100svh;
    padding: 0;
    overflow: hidden;
  }

  /* Same absolute-centering formula as desktop:
     mid-point of usable space (below header) = 50svh + header-h/2
     translateY(-50%) centres the frame on that point exactly           */
  .frame-container,
  .frame-wrapper {
    position: absolute !important;
    top: calc(50% + var(--header-h, 72px) / 2) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    right: auto !important;
    bottom: auto !important;
    width: 92%;
    max-width: 420px;
    margin: 0;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,0.38));
  }

  /* Inner opening — mobile */
  .frame-inner {
    top:    18%;
    left:   12%;
    width:  76%;
    height: 64%;
  }

  .hero-dots { bottom: 0.5rem; }
  .slide-overlay { padding: 1.5rem 1rem 1rem; }
  .slide-label { font-size: 0.65rem; }
  .slide-title { font-size: clamp(1.1rem, 4.5vw, 1.6rem); }
}


/* ── Small mobile  ≤ 480px ────────────────────────────── */
@media (max-width: 480px) {
  .frame-container,
  .frame-wrapper {
    width: 95%;
    max-width: 360px;
  }

  .frame-inner {
    top:    18%;
    left:   12%;
    width:  76%;
    height: 64%;
  }
}


/* ── Tablet  541px – 1023px ──────────────────────────────────── */
@media (min-width: 541px) and (max-width: 1023px) {
  .hero {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--header-h, 85px) + 12px);
    padding-bottom: 35px;
    height: 100svh;
    min-height: 100svh;
  }
  .frame-container,
  .frame-wrapper {
    position: relative;
    top: unset;
    left: unset;
    transform: none;
    width: 88vw;
    max-width: 680px;
    margin: 0 auto;
  }
  .frame-inner {
    top:    17%;
    left:   14%;
    width:  72%;
    height: 66%;
  }
}

/* ── Standard desktop / laptop  1024px – 1439px ─────────────── */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hero {
    padding-top: 90px;
    padding-bottom: 40px;
  }

  /* Shrink frame 10% on laptop — height follows via SVG aspect ratio */
  .frame-container,
  .frame-wrapper {
    max-width: 810px; /* 900px × 0.90 */
  }
}

/* ── Large desktop  ≥ 1440px ─────────────────────────────────── */
@media (min-width: 1440px) {
  .hero {
    padding-top: 100px;
    padding-bottom: 50px;
  }
  .hero-dots {
    bottom: 2rem;
  }
}