/* ============================================================================
   HTG HERO SLIDER v2  —  Hadey Travels Global
   Self-contained, namespaced (.hh-*) so it never collides with legacy styles.
   Glassmorphism · light/dark · autoplay · swipe · tap-zones · 8K-ready bg.
   ========================================================================== */
:root{
  --hh-green:#4AAB48; --hh-green-deep:#1d5a2a; --hh-teal:#00C2CB;
  --hh-gold:#EF9623; --hh-sun:#FFD302; --hh-ink:#0b1f14;
  --hh-radius:22px;
  --hh-ease:cubic-bezier(.22,.61,.36,1);
}

.hh-hero{
  position:relative; width:100%;
  height:min(88vh,820px); min-height:560px;
  overflow:hidden; isolation:isolate;
  background:#06140d; color:#fff;
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-y;
}
/* Holding the slider should ONLY pause it — never start a text selection or the
   iOS long-press callout. Applied to the slider and everything inside it. */
.hh-hero, .hh-hero *{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}

/* ---- slides (crossfade + slow ken-burns) ------------------------------- */
.hh-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .9s var(--hh-ease), visibility 0s linear .9s;
  z-index:1;
}
.hh-slide.is-active{ opacity:1; visibility:visible; transition:opacity .9s var(--hh-ease); z-index:2; }

.hh-slide__bg{
  position:absolute; inset:0;
  background-size:cover;
  /* Default focal point; per-slide framing is set inline in the template. */
  background-position:center 30%;
  transform:scale(1.08);
}
.hh-slide.is-active .hh-slide__bg{
  animation:hh-kenburns 9s var(--hh-ease) forwards;
}
@keyframes hh-kenburns{ from{ transform:scale(1.12) } to{ transform:scale(1.0) } }

/* legibility scrim — strong on the content side, fading across */
.hh-slide__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(3,10,7,.92) 0%, rgba(3,10,7,.66) 24%, rgba(3,10,7,.32) 44%, rgba(3,10,7,.08) 62%, rgba(3,10,7,0) 78%),
    linear-gradient(90deg, rgba(3,10,7,.5) 0%, rgba(3,10,7,.1) 42%, rgba(3,10,7,0) 64%);
}
/* brand colour wash keyed to each slide theme */
.hh-slide__tint{ position:absolute; inset:0; z-index:1; mix-blend-mode:soft-light; opacity:.55; }
.hh-slide[data-theme="green"] .hh-slide__tint{ background:radial-gradient(120% 90% at 12% 88%, var(--hh-green) 0%, transparent 60%); }
.hh-slide[data-theme="teal"]  .hh-slide__tint{ background:radial-gradient(120% 90% at 12% 88%, var(--hh-teal) 0%, transparent 60%); }
.hh-slide[data-theme="gold"]  .hh-slide__tint{ background:radial-gradient(120% 90% at 12% 88%, var(--hh-gold) 0%, transparent 60%); }

/* ---- content ----------------------------------------------------------- */
.hh-wrap{
  position:relative; z-index:3; height:100%;
  max-width:1240px; margin:0 auto;
  display:flex; align-items:flex-start;
  padding:clamp(20px,5vw,72px);
  padding-top:clamp(34px,6vh,64px);
}
/* No card — content sits directly over the photo so the image stays fully
   visible; a bottom scrim + text-shadows keep the copy readable. */
.hh-card{
  max-width:640px;
  display:flex; flex-direction:column; gap:15px;
  padding:0; background:none; border:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
/* Content is always visible when its slide is active; the slide's own crossfade
   handles the transition (a card-level animation froze on hidden slides). */
.hh-card{ opacity:1; }

.hh-eyebrow{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; padding:8px 14px; border-radius:999px;
  background:linear-gradient(135deg, rgba(74,171,72,.9), rgba(0,194,203,.7));
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.hh-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--hh-sun); box-shadow:0 0 10px var(--hh-sun); }

.hh-title{
  margin:0; font-family:var(--ap-font-display, "Fraunces", Georgia, serif);
  font-weight:700; line-height:1.04; letter-spacing:-.01em;
  font-size:clamp(2rem,5.2vw,3.7rem);
  text-shadow:0 2px 4px rgba(0,0,0,.5), 0 4px 24px rgba(0,0,0,.6);
}
.hh-title em{ font-style:normal; background:linear-gradient(100deg,var(--hh-sun),var(--hh-gold) 60%,var(--hh-teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.hh-sub{
  margin:0; max-width:54ch;
  font-size:clamp(.98rem,1.5vw,1.18rem); line-height:1.6;
  color:rgba(255,255,255,.94); text-shadow:0 1px 3px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.55);
}

.hh-stats{ display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }
.hh-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:14px; font-size:.82rem; font-weight:600;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hh-chip b{ color:var(--hh-sun); font-weight:800; }

.hh-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.hh-btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:14px 26px; border-radius:14px; font-weight:700; font-size:.96rem;
  text-decoration:none; border:1px solid transparent; transition:transform .12s var(--hh-ease), filter .15s, box-shadow .15s;
}
.hh-btn svg{ width:18px; height:18px; }
.hh-btn:hover{ transform:translateY(-2px); }
.hh-btn--primary{ color:#08210f; background:linear-gradient(135deg,var(--hh-sun),var(--hh-gold)); box-shadow:0 14px 34px -10px rgba(239,150,35,.65); }
.hh-btn--primary:hover{ filter:brightness(1.05); box-shadow:0 18px 40px -10px rgba(239,150,35,.8); }
.hh-btn--ghost{ color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hh-btn--ghost:hover{ background:rgba(255,255,255,.2); }

/* ---- tap zones (mobile prev/next) -------------------------------------- */
.hh-tap{ position:absolute; top:0; bottom:96px; width:22%; z-index:4; cursor:pointer; background:transparent; border:0; }
.hh-tap--prev{ left:0; } .hh-tap--next{ right:0; }
@media(hover:hover){ .hh-tap{ display:none; } } /* desktop uses arrows */

/* ---- controls ---------------------------------------------------------- */
.hh-ctl{
  position:absolute; left:0; right:0; bottom:0; z-index:6;
  display:flex; align-items:center; gap:18px;
  max-width:1240px; margin:0 auto; padding:0 clamp(20px,5vw,72px) clamp(20px,3vw,34px);
}
.hh-dots{ display:flex; gap:10px; flex:1; }
.hh-dot{ position:relative; height:4px; flex:1; max-width:64px; border:0; padding:0; cursor:pointer;
  border-radius:999px; background:rgba(255,255,255,.28); overflow:hidden; }
.hh-dot__fill{ position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--hh-sun),var(--hh-teal)); border-radius:999px; }
.hh-dot.is-active .hh-dot__fill{ animation:hh-fill var(--hh-dur,6.5s) linear forwards; }
.hh-dot.is-done .hh-dot__fill{ width:100%; }
@keyframes hh-fill{ from{ width:0 } to{ width:100% } }

.hh-nav{ display:flex; align-items:center; gap:10px; }
.hh-counter{ font-size:.85rem; font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.85); min-width:62px; text-align:center; font-variant-numeric:tabular-nums; }
.hh-counter b{ color:#fff; } .hh-counter span{ opacity:.6; }
.hh-arrow{
  width:46px; height:46px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background .15s, transform .12s;
}
.hh-arrow:hover{ background:rgba(255,255,255,.24); transform:translateY(-1px); }
.hh-arrow svg{ width:20px; height:20px; }

/* light mode keeps the same bottom scrim (text is white over the photo) */

/* ── Per-slide split layouts ──────────────────────────────────────────────────
   Each slide gets: eyebrow + title near the top, sub-copy / chips / CTAs in
   the lower portion, with a controlled gap so text doesn't cover key subjects.

   Slide order: 0=Study(green) · 1=Work(teal) · 2=Flights(gold) · 3=Passport(green)
   ──────────────────────────────────────────────────────────────────────────── */

/* Shared split helper — stretch card to full slide height */
.hh-hero .hh-slide:nth-child(1) .hh-card,
.hh-slide[data-theme="teal"]   .hh-card,
.hh-slide[data-theme="gold"]   .hh-card {
  align-self:stretch;
  justify-content:flex-start;
}

/* ── Study Abroad (green, idx 0): graduates are right-side, text stays left ── */
.hh-hero .hh-slide:nth-child(1) .hh-wrap {
  padding-top:clamp(14px,2.5vh,28px);
}
.hh-hero .hh-slide:nth-child(1) .hh-title {
  margin-bottom:clamp(52px,10vh,110px);
}

/* ── Work Abroad (teal): eyebrow near top, sub pushed well down below the face */
.hh-slide[data-theme="teal"] .hh-wrap {
  padding-top:clamp(14px,2.5vh,28px);
}
.hh-slide[data-theme="teal"] .hh-title {
  margin-bottom:clamp(100px,18vh,200px);
}

/* ── Flights & Hotels (gold): content sits lower so it clears the plane/roof ── */
.hh-slide[data-theme="gold"] .hh-wrap {
  padding-top:clamp(52px,7vh,80px);
}
.hh-slide[data-theme="gold"] .hh-title {
  margin-bottom:clamp(44px,8vh,88px);
}

@media(max-width:768px){
  .hh-hero .hh-slide:nth-child(1) .hh-wrap,
  .hh-slide[data-theme="teal"]   .hh-wrap,
  .hh-slide[data-theme="gold"]   .hh-wrap { padding-top:52px; }

  .hh-hero .hh-slide:nth-child(1) .hh-title { margin-bottom:24px; }
  .hh-slide[data-theme="teal"]   .hh-title  { margin-bottom:28px; }
  .hh-slide[data-theme="gold"]   .hh-title  { margin-bottom:24px; }
}

/* ---- responsive (normal slider size on mobile) ------------------------- */
@media (max-width:768px){
  .hh-hero{ height:auto; min-height:0; }
  .hh-slide{ position:relative; }
  .hh-slide:not(.is-active){ display:none; }
  .hh-wrap{ padding:74px 18px 40px; min-height:78vh; align-items:flex-start; }
  .hh-card{ max-width:100%; }
  .hh-title{ font-size:clamp(1.8rem,8vw,2.5rem); }
  .hh-ctl{ padding-bottom:22px; }
  .hh-counter{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .hh-slide,.hh-slide__bg,.hh-card{ animation:none !important; transition:opacity .3s linear; }
  .hh-slide.is-active .hh-card{ opacity:1; transform:none; }
  .hh-dot.is-active .hh-dot__fill{ animation:none; width:40%; }
}