/* ═══════════════════════════════════════════════════════════════════
   Golden Harmony Section – Complete Styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ─────────────────────────────────────────────── */
.golden-harmony-banner {
  padding: 80px 24px 60px;
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Photo on top ────────────────────────────────────────────────── */
.gh-photo-top {
  position: relative;
  z-index: 12;
  margin: 0 auto -50px auto;
  width: 90%;
  max-width: 700px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--gold-200);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: block;
  align-self: center;
}

.gh-photo-top:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(246, 203, 99, 0.3);
}

.gh-photo-top img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Content card ─────────────────────────────────────────────────── */
.gh-content {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 80px 40px 48px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: 100%;
}

/* ── Heading ─────────────────────────────────────────────────────── */
.gh-heading {
  font-family: var(--font-head);
  font-size: 2rem;
  color: var(--white);
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.2;
}

.gh-heading .gh-title-gold {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 2.8rem;
  font-weight: 700;
}

/* ── Text-only layout (no side video) ─────────────────────────────── */
.gh-layout-text-only {
  display: block;
}

.gh-layout-text-only .gh-text {
  max-width: 780px;
  margin: 0 auto;
}

/* ── Text styles ─────────────────────────────────────────────────── */
.gh-text p {
  color: var(--gold-100);
  line-height: 1.6;
  margin-bottom: 16px;
  font-size: 1.05rem;
}

.gh-text strong {
  color: var(--white);
}

.gh-text .gh-lead {
  font-size: 1.15rem;
  color: var(--white);
  font-weight: 500;
}

.gh-deadline {
  display: inline-block;
  background: rgba(246, 203, 99, 0.1);
  border: 1px solid var(--gold-300);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  color: var(--gold-200);
  margin-bottom: 24px;
}

.gh-links {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.gh-contact {
  margin-top: 16px;
  font-size: 1.1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   VIDEO CAROUSEL
   ═══════════════════════════════════════════════════════════════════ */

.gh-carousel {
  position: relative;
  width: 100%;
  margin-top: 40px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* golden glow border */
  box-shadow:
    0 0 0 2px rgba(246, 203, 99, 0.5),
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(246, 203, 99, 0.08);
  background: #000;
  /* needed so arrows are positioned relative to this */
  isolation: isolate;
  /* let the browser handle vertical page scroll while our own JS
     reads horizontal swipes on touchstart/touchend */
  touch-action: pan-y;
}

/* ── Track ──────────────────────────────────────────────────────── */
.gh-carousel-track {
  display: flex;
  width: 100%;
  /* transition set by JS */
}

/* ── Individual slide ────────────────────────────────────────────── */
.gh-carousel-slide {
  position: relative;
  min-width: 100%;
  background: #000;
  flex-shrink: 0;
  overflow: hidden;
  /* Classic padding-top aspect-ratio hack as a guaranteed-working
     fallback: some mobile browsers/webviews don't fully support (or
     delay resolving) `aspect-ratio`, which otherwise leaves this box
     with a collapsed height — and that's what makes the video and the
     play button appear stuck in a corner instead of centered. */
  padding-top: 56.25%; /* 9 / 16 */
}

@supports (aspect-ratio: 16 / 9) {
  .gh-carousel-slide {
    padding-top: 0;
    aspect-ratio: 16 / 9;
  }
}

.gh-carousel-video {
  /* Positioned to fill the slide directly, instead of relying on a
     height: 100% that depends on the parent having a definite height */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: #000;
}

/* ── Overlay (play button layer) ─────────────────────────────────── */
.gh-carousel-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* subtle dark vignette when paused */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
  transition: opacity 0.35s ease;
  z-index: 5;
  cursor: pointer;
}

.gh-carousel-slide.is-playing .gh-carousel-overlay {
  opacity: 0;
  pointer-events: none;
}

/* Re-show overlay on hover even while playing */
.gh-carousel-slide.is-playing:hover .gh-carousel-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ── Play button ─────────────────────────────────────────────────── */
.gh-carousel-play-btn {
  /* fluid size: scales smoothly between phones and desktop instead of
     jumping at fixed breakpoints */
  width: clamp(52px, 14vw, 80px);
  height: clamp(52px, 14vw, 80px);
  border-radius: 50%;
  border: 2.5px solid var(--gold-200);
  background: rgba(10, 16, 32, 0.65);
  color: var(--gold-200);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 24px rgba(246, 203, 99, 0.25);
  padding: 0;
  /* keep touch target comfortable even at the smallest clamp size */
  min-width: 44px;
  min-height: 44px;
}

.gh-carousel-play-btn svg {
  /* percentage sizing so the icon scales with the button instead of
     staying a fixed px size */
  width: 46%;
  height: 46%;
  margin-left: 4%; /* optical centering of play triangle */
}

.gh-carousel-play-btn:hover {
  transform: scale(1.12);
  background: var(--gold-gradient);
  color: #0b1422;
  box-shadow: 0 8px 40px rgba(246, 203, 99, 0.5);
  border-color: transparent;
}

/* ── Slide counter badge ─────────────────────────────────────────── */
.gh-carousel-num {
  position: absolute;
  bottom: clamp(8px, 2vw, 14px);
  right: clamp(8px, 2vw, 16px);
  z-index: 8;
  font-size: clamp(0.65rem, 1.8vw, 0.78rem);
  font-family: var(--font-body, sans-serif);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  padding: clamp(3px, 1vw, 4px) clamp(7px, 2vw, 10px);
  border-radius: 20px;
  border: 1px solid rgba(246, 203, 99, 0.25);
  pointer-events: none;
  white-space: nowrap;
}

/* ── Prev / Next arrows ──────────────────────────────────────────── */
.gh-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  /* fluid size instead of a single fixed 52px used at every width */
  width: clamp(38px, 9vw, 52px);
  height: clamp(38px, 9vw, 52px);
  border-radius: 50%;
  border: 2px solid rgba(246, 203, 99, 0.4);
  background: rgba(10, 16, 32, 0.7);
  color: var(--gold-200);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  padding: 0;
  /* comfortable tap target on touch devices */
  min-width: 36px;
  min-height: 36px;
}

.gh-carousel-arrow svg {
  width: 42%;
  height: 42%;
  flex-shrink: 0;
}

.gh-carousel-prev { left: clamp(6px, 2.5vw, 16px); }
.gh-carousel-next { right: clamp(6px, 2.5vw, 16px); }

.gh-carousel-arrow:hover {
  background: var(--gold-gradient);
  color: #0b1422;
  border-color: transparent;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 28px rgba(246, 203, 99, 0.4);
}

/* ── Dot indicators ──────────────────────────────────────────────── */
.gh-carousel-dots {
  position: absolute;
  bottom: clamp(10px, 2.5vw, 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: clamp(5px, 1.5vw, 8px);
  align-items: center;
  max-width: calc(100% - 90px); /* stay clear of the arrows on tiny screens */
  flex-wrap: wrap;
  justify-content: center;
}

.gh-carousel-dot {
  width: clamp(6px, 1.6vw, 8px);
  height: clamp(6px, 1.6vw, 8px);
  border-radius: 50%;
  border: 1.5px solid rgba(246, 203, 99, 0.5);
  background: rgba(246, 203, 99, 0.15);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  flex-shrink: 0;
  /* invisible padded tap area so the tiny dot stays easy to hit on touch */
  position: relative;
}

.gh-carousel-dot::after {
  content: '';
  position: absolute;
  inset: -10px;
}

.gh-carousel-dot.active {
  width: clamp(18px, 5vw, 26px);
  border-radius: 4px;
  background: var(--gold-200, #f6cb63);
  border-color: var(--gold-200, #f6cb63);
  box-shadow: 0 0 12px rgba(246, 203, 99, 0.6);
}

.gh-carousel-dot:hover:not(.active) {
  background: rgba(246, 203, 99, 0.4);
  border-color: var(--gold-200, #f6cb63);
}

/* ═══════════════════════════════════════════════════════════════════
   BILINGUAL SUPPORT
   ═══════════════════════════════════════════════════════════════════ */
html[lang="sq"] .en-text { display: none !important; }
html[lang="en"] .sq-text { display: none !important; }
html:not([lang="sq"]) .sq-text { display: none !important; }
html:not([lang="sq"]) .en-text { display: block; }
html[lang="sq"] .sq-text { display: block !important; }
html:not([lang="sq"]) span.en-text { display: inline !important; }
html[lang="sq"] span.sq-text { display: inline !important; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE – Tablet
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .golden-harmony-banner {
    padding: 60px 16px 40px;
  }
  .gh-heading {
    font-size: 1.5rem;
  }
  .gh-heading .gh-title-gold {
    font-size: 2rem;
  }
  .gh-photo-top {
    width: 100%;
    margin: 0 auto -30px auto;
  }
  .gh-content {
    padding: 50px 20px 32px;
  }
  /* arrow/play-button/dot/counter sizing is now fluid via clamp() on the
     base rules above, so no fixed-size overrides are needed here */
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE – Taller video on phones
   On a narrow phone the standard 16:9 box ends up quite short, so on
   phone-width screens we switch to a taller ratio. Still fully fluid —
   the box is still 100% of the container's width, it's just taller
   relative to that width. Mirrors the fallback/@supports pairing used
   in the base rules above so it works whether or not the browser
   supports the `aspect-ratio` property.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .gh-carousel-slide {
    padding-top: 100%; /* 1:1 fallback for browsers without aspect-ratio */
  }
}

@supports (aspect-ratio: 1 / 1) {
  @media (max-width: 600px) {
    .gh-carousel-slide {
      padding-top: 0;
      aspect-ratio: 1 / 1;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE – Mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .gh-links {
    flex-direction: column;
    gap: 12px;
  }
  .gh-links .button {
    width: 100%;
    text-align: center;
  }
  .gh-heading .gh-title-gold {
    font-size: 1.6rem;
  }
  .gh-photo-top {
    margin: 0 auto -20px auto;
  }
  .gh-content {
    padding: 40px 16px 20px;
  }
  /* arrow/play-button/dot sizing is fluid via clamp() above; only the
     counter badge still needs to hop above the dot row on narrow phones */
  .gh-carousel-num {
    bottom: 40px; /* above dots */
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE – Extra-small phones (e.g. iPhone SE, older Android)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .golden-harmony-banner {
    padding: 48px 12px 32px;
  }
  .gh-content {
    padding: 32px 12px 16px;
  }
  .gh-heading .gh-title-gold {
    font-size: 1.4rem;
  }
  .gh-carousel {
    border-radius: var(--radius-sm, 10px);
  }
  .gh-carousel-dots {
    max-width: calc(100% - 70px);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE – Short / landscape viewports (phones rotated sideways)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .golden-harmony-banner {
    padding: 32px 16px 24px;
  }
  .gh-photo-top {
    max-width: 420px;
  }
  .gh-content {
    padding: 32px 24px 20px;
  }
  /* a 16:9 slide can be taller than the whole viewport in landscape on a
     phone, so cap the height instead of relying purely on aspect-ratio */
  .gh-carousel-slide {
    padding-top: 0;
    aspect-ratio: auto;
    height: min(60vh, 340px);
  }
  .gh-carousel-play-btn {
    width: clamp(44px, 10vh, 64px);
    height: clamp(44px, 10vh, 64px);
  }
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gh-photo-top,
  .gh-carousel-arrow,
  .gh-carousel-play-btn,
  .gh-carousel-dot {
    transition: none;
  }
}