/* ==========================================================================
   Experience page (experience.php). Loaded after motherland.css and about.css,
   and reuses their tokens plus the .tag / .about-title / .about-text classes.
   ========================================================================== */

/* ── Hero: "Relive the memories" ────────────────────────── */
.exp-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 59.9vw; background:#1a1a1a;text-align:center; }
.exp-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.exp-hero::before { content: ""; position: absolute; z-index:1; inset: 0; background: linear-gradient(0deg, #100e0e 0%, rgba(16,14,14,.85) 14%, rgba(16,14,14,.35) 40%, rgba(16,14,14,.08) 72%); }
.exp-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-bottom: 3vw; }
.exp-hero .tag.only-m { display: none; }
@media (max-width: 720px) { .exp-hero .tag.only-m { display: inline-flex; } }
.exp-hero__title { font-size: 7.55vw; line-height: .87; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.exp-hero__lead { margin-top: 1.5vw; max-width: 41vw; font-size: clamp(13px, 1.05vw, 19px); line-height: 1.4; color: #dcdcdc; }

/* ── More than moments ──────────────────────────────────── */
.exp-why { background: var(--page); padding: 11.9vw 0 8.6vw; }
.exp-why__grid { display: grid; grid-template-columns: minmax(0, 1fr) 34.5vw; column-gap: 4vw; align-items: center; }
.exp-why .about-title { margin-top: 2.2vw; }
.exp-why__copy .about-text { margin-top: 2.2vw; max-width: 47vw; }
.exp-why__btn { margin-top: 2.6vw; }

.xcollage { position: relative; aspect-ratio: 377 / 413; }
.xcollage__ph { position: absolute; overflow: hidden; border-radius: max(6px, .8vw); background: #2a2a2c; }
.xcollage__ph img { width: 100%; height: 100%; object-fit: cover; }
.xcollage__ph--1 { left: 0; top: 0; width: 52%; height: 24%; z-index: 2; }
.xcollage__ph--2 { left: 32%; top: 15%; width: 67%; height: 83%; z-index: 1; border-radius: max(10px, 1.3vw); }
.xcollage__ph--3 { left: 24%; top: 21%; width: 32%; height: 39%; z-index: 3; }
.xcollage__ph--4 { left: 0; top: 52%; width: 48%; height: 47%; z-index: 2; }

@media (max-width: 720px) {
  .exp-hero { min-height: clamp(560px, 168vw, 820px); }
  .exp-hero .tag { margin-bottom: 3vw; }
  .exp-hero__title { font-size: 12.6vw; line-height: .88; }
  .exp-hero__lead { max-width: 82vw; margin-top: 4vw; font-size: 14px; }

  .exp-why { padding: 12vw 0 14vw; }
  .exp-why__grid { grid-template-columns: 1fr; row-gap: 8vw; }
  .exp-why .about-title { margin-top: 4vw; font-size: 10.8vw; }
  .exp-why__copy .about-text { max-width: none; margin-top: 4vw; font-size: 14px; }
  .exp-why__btn { margin-top: 6vw; width: 100%; }
}

/* The complete hero stays visible below the site header. */
.page-experience .exp-hero {
  height: var(--hero-viewport);
  min-height: 0;
}

@media (max-width: 720px) {
  .page-experience .exp-hero__inner { padding-bottom: clamp(34px, 8svh, 66px); }
  .page-experience .exp-hero__title { font-size: clamp(58px, 16vw, 78px); }
  .page-experience .exp-hero__lead { margin-top: 18px; font-size: 13px; line-height: 1.42; }
}

/* ── Inside the Motherland experience: photo wall ───────── */
.gallery { background: var(--page); padding: 8.6vw 0 7vw; }
.gallery__title { font-size: 7.06vw; line-height: .9; }
.gallery__title .coral { color: var(--coral); }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 10.9vw; grid-auto-flow: dense; gap: 1.1vw; margin-top: 3.6vw; }
.mosaic__item { overflow: hidden; border-radius: max(8px, .9vw); background: #2a2a2c; }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.mosaic__item:hover img { transform: scale(1.04); }
.mosaic__item--wide { grid-column: span 2; }
.mosaic__item--tall { grid-row: span 2; }
.gallery__foot { display: flex; justify-content: center; margin-top: 3.8vw; }
.gallery__foot .btn { border-color: rgba(255,255,255,.6); color: #fff; }
.gallery__foot .btn:hover { background: #fff; color: #0d0d0d; }

@media (max-width: 720px) {
  .gallery { padding: 13vw 0 13vw; }
  .gallery__title { font-size: 12.5vw; line-height: .92; }
  .mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 21vw; gap: 1.4vw; margin-top: 7vw; }
  .gallery__foot { margin-top: 8vw; }
  .gallery__foot .btn { width: 100%; min-height: 44px; }
}

/* ── 2025 Headliners ─────────────────────────────────────── */
.headliners { background: var(--page); padding: 7.5vw 0 8vw; }
.hl__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hl__title { font-size: 7.1vw; line-height: .87; }
.hl__title .wide { font-family: var(--font-wide); font-weight: 900; color: #fff; letter-spacing: 0; -webkit-text-stroke: 0; }
.hl__title .lime { display: block; margin-top: .05em; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: var(--lime-soft); }
.hl__nav { display: flex; gap: clamp(6px, .84vw, 14px); margin-bottom: .4vw; }
.hl__nav .arrow { width: clamp(36px, 3.4vw, 56px); height: clamp(36px, 3.4vw, 56px); }

.hl__track { display: flex; gap: 1.2vw; margin-top: 2.9vw; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hl__track::-webkit-scrollbar { display: none; }
.hlcard { position: relative; flex: 0 0 24.3vw; aspect-ratio: 278 / 400; scroll-snap-align: start; border-radius: clamp(10px, 1.4vw, 22px); overflow: hidden; background: #2a2a2c; }
.hlcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.hlcard__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.08) 48%); opacity: 1; }
.hlcard__name { position: absolute; left: 1.3vw; bottom: 1.1vw; z-index: 1; font-family: var(--font-bold); font-weight: 700; font-size: clamp(13px, 1.1vw, 19px); color: #fff; text-transform: uppercase; opacity: 1; text-shadow:0 2px 12px rgba(0,0,0,.65); }
.hlcard:hover .hlcard__shade, .hlcard:focus-within .hlcard__shade, .hlcard:hover .hlcard__name, .hlcard:focus-within .hlcard__name { opacity: 1; }

.hl__cta { display: flex; justify-content: center; margin-top: 3.2vw; }

.exp-video { padding:clamp(34px,4vw,70px) 0 clamp(68px,8vw,138px); background:var(--page); }
.exp-video__frame { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:clamp(14px,1.9vw,32px); background:#1c1c1c; }
.exp-video__frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

@media (max-width: 720px) {
  .headliners { padding: 12.7vw 0 13vw; }
  .hl__title { font-size: 13.25vw; line-height: .9; }
  .hl__nav { display: none; }
  .hl__track { gap: 3.4vw; margin-top: 6vw; }
  .hlcard { flex-basis: 44vw; }
  .hlcard__shade, .hlcard__name { opacity: 1; }
  .hlcard__name { left: 4vw; bottom: 3vw; font-size: max(13px, 3.6vw); }
  .hl__cta { margin-top: 7vw; }
  .hl__cta .btn { width: 100%; }
  .exp-video { padding:24px 0 72px; }
  .exp-video__frame { border-radius:4vw; }
}