/* ─────────────────────────────────────────────────────────────────
   sections.css — Homepage section styles
   §1 Hero  §2 Services  §3 Text-behind-image
   §4 Gallery  §5 Reviews  §6 CTA Zoom  §7 Image placeholders
   ───────────────────────────────────────────────────────────────── */

/* ── Section rhythm ──────────────────────────────────────────────── */
.sec-pad {
  padding-block: var(--s18);
}

.sec-header {
  margin-block-end: var(--s8);
}

.sec-header .label {
  display: block;
  margin-block-end: var(--s2);
}

.sec-header h2 {
  font-family: var(--ff-serif);
  font-size: var(--f-h2);
  line-height: var(--lh-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}


/* ═══════════════════════════════════════════════════════════════════
   §1 HERO
   Full-viewport cinematic opener. data-theme="dark" on the element
   forces light text over the dark gradient image.
   ═════════════════════════════════════════════════════════════════ */

.hero-sec {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #161210; /* fallback while image loads */
}

/* ── Hero image (full-bleed background) ─────────────────────────── */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-media .hero-img {
  position: absolute;
  inset: -15%; /* oversized for parallax travel */
  width: calc(100% + 30%);
  height: calc(100% + 30%);
}

/* Reading scrim: darkens the bottom so text is always legible */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(22, 18, 16, 0)     0%,
    rgba(22, 18, 16, 0.15)  45%,
    rgba(22, 18, 16, 0.65)  80%,
    rgba(22, 18, 16, 0.85) 100%
  );
  pointer-events: none;
}

/* ── Hero content ───────────────────────────────────────────────── */
.hero-content {
  position: relative;
  z-index: var(--z-above);
  width: 100%;
  padding-block-start: calc(var(--s18) + 72px); /* clear the header */
  padding-block-end: var(--s12);
}

.hero-inner {
  max-width: clamp(300px, 55%, 640px);
  /* Start-aligned in RTL = pushed to the right */
}

.hero-label {
  margin-block-end: var(--s3);
  color: var(--ink-soft);
}

.hero-title {
  margin-block-end: var(--s3);
}

/* Each line in the display title is a separate reveal target */
.hero-line {
  display: block;
}

.hero-services {
  font-family: var(--ff-sans);
  font-size: var(--f-small);
  color: var(--ink-soft);
  letter-spacing: 0.12em;
  margin-block-end: var(--s5);
}

.hero-cta {
  /* Override border color for dark background */
  border-color: rgba(239, 231, 219, 0.4);
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .hero-cta:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
}

/* ── Scroll hint ─────────────────────────────────────────────────── */
.scroll-hint {
  position: absolute;
  bottom: var(--s5);
  inset-inline-start: var(--gutter);
  z-index: var(--z-above);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
}

.scroll-hint-text {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.scroll-hint-bar {
  width: 1px;
  height: 40px;
  background: currentColor;
  transform-origin: top;
  transform: scaleY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-hint-bar {
    animation: scroll-drip 2.2s ease-in-out infinite;
  }
}

@keyframes scroll-drip {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
  50.1%{ transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   §2 SERVICES
   Editorial asymmetric grid: 1 featured (portrait) + 2 secondary
   ═════════════════════════════════════════════════════════════════ */

.services-sec {
  padding-block: var(--s18);
  background: var(--bg);
}

.services-grid {
  display: grid;
  /* RTL: start=right, end=left. Col 1 (right) = featured, Col 2 (left) = 2 secondary */
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--s3);
  align-items: start;
}

/* ── Service card ────────────────────────────────────────────────── */
.service-card {
  will-change: transform, opacity; /* GSAP reveals */
}

.service-card a {
  display: block;
}

/* Featured card: spans both rows */
.service-card--featured {
  grid-row: 1 / 3;
}

/* Secondary cards: one per row */
.service-card--secondary {
  grid-row: auto;
}

.service-card-media {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.service-card--featured .service-card-media {
  aspect-ratio: 3 / 4;
}

.service-card--secondary .service-card-media {
  aspect-ratio: 4 / 3;
}

/* Image zoom on hover */
@media (hover: hover) and (pointer: fine) {
  .service-card-media .img-placeholder {
    transition: transform 0.6s var(--ease);
  }
  .service-card:hover .service-card-media .img-placeholder {
    transform: scale(1.04);
  }
}

.service-card-body {
  padding-block: var(--s2) var(--s1);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  border-block-end: 1px solid var(--line);
}

.service-card-body h3 {
  font-family: var(--ff-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.service-card-desc {
  font-size: var(--f-small);
  color: var(--ink-soft);
  margin-block: var(--s1);
  max-width: 36ch;
  line-height: 1.6;
}

.service-arrow {
  font-size: var(--f-small);
  color: var(--mocha);
  flex-shrink: 0;
  transition: transform var(--dur-ui) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover .service-arrow {
    transform: translateX(-4px); /* RTL: move towards start (right) */
  }
}

@media (max-width: 680px) {
  .services-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .service-card--featured { grid-row: auto; }
  .service-card--featured .service-card-media { aspect-ratio: 3 / 2; }
}


/* ═══════════════════════════════════════════════════════════════════
   §3 TEXT-BEHIND-IMAGE
   Large display word behind a portrait-ratio image.
   GSAP: text scrolls at ~40% speed (emerges from behind image).
   ═════════════════════════════════════════════════════════════════ */

.tbi-sec {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding-block: var(--s18);
}

.tbi-bg-text {
  position: relative;
  z-index: 1;
  font-family: var(--ff-serif);
  font-size: clamp(5rem, 16vw, 13rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mocha);
  opacity: 0.13;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  will-change: transform;
}

[data-theme="dark"] .tbi-bg-text {
  color: var(--champagne);
  opacity: 0.17;
}

.tbi-img-wrap {
  position: absolute;
  inset-block: 0;
  /* Offset from center for editorial asymmetry */
  inset-inline-start: clamp(10%, 22%, 30%);
  width: clamp(200px, 35%, 420px);
  z-index: 2;
  overflow: hidden;
  border-radius: 4px;
}

.tbi-img-wrap .img-placeholder {
  height: 120%; /* taller for parallax travel */
  position: absolute;
  inset-block-start: -10%;
  inset-inline: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   §4 GALLERY TEASER
   Horizontal draggable strip. Full-bleed past .wrap bounds.
   ═════════════════════════════════════════════════════════════════ */

.gallery-sec {
  padding-block: var(--s18);
  background: var(--surface);
  overflow: hidden; /* clip the draggable track */
}

.gallery-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-block-end: var(--s5);
  gap: var(--s3);
}

.gallery-header h2 {
  font-family: var(--ff-serif);
  font-size: var(--f-h2);
  line-height: var(--lh-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.gallery-view-all {
  font-size: var(--f-small);
  color: var(--mocha);
  flex-shrink: 0;
  transition: opacity var(--dur-ui) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-view-all:hover { opacity: 0.65; }
}

/* Full-width overflow container */
.gallery-track-wrap {
  overflow: hidden;
  cursor: grab;
}

.gallery-track-wrap:active { cursor: grabbing; }

/* The draggable track: wider than viewport */
.gallery-track {
  display: flex;
  gap: var(--s2);
  padding-inline: var(--gutter);
  /* GSAP controls translateX — do not set margin-inline:auto */
  width: max-content;
  list-style: none;
  will-change: transform;
  touch-action: pan-y; /* allow vertical scroll, intercept horizontal drag */
}

.gallery-item {
  flex-shrink: 0;
  width: clamp(220px, 28vw, 380px);
  border-radius: 4px;
  overflow: hidden;
}

.gallery-item .img-placeholder {
  aspect-ratio: 3 / 4;
}

@media (prefers-reduced-motion: no-preference) {
  .gallery-track-wrap:focus-visible { outline: 2px solid var(--mocha); }
}


/* ═══════════════════════════════════════════════════════════════════
   §5 REVIEWS
   3-column grid, fetched from /api/get-reviews.php.
   Section hidden until JS populates it.
   ═════════════════════════════════════════════════════════════════ */

.reviews-sec {
  padding-block: var(--s18);
  background: var(--bg);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s3);
  margin-block-start: var(--s8);
}

.review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  will-change: transform, opacity; /* GSAP reveal */
}

.review-stars {
  font-size: 1rem;
  color: var(--champagne);
  letter-spacing: 0.1em;
}

.review-text {
  font-size: var(--f-small);
  line-height: 1.8;
  color: var(--ink);
  flex: 1;
  font-style: italic;
}

.review-text::before { content: '«'; }
.review-text::after  { content: '»'; }

.review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-block-start: var(--s2);
  border-block-start: 1px solid var(--line);
}

.review-name {
  font-size: var(--f-small);
  font-weight: 600;
  color: var(--ink);
}

.review-service {
  font-size: var(--f-label);
  color: var(--mocha);
  letter-spacing: 0.08em;
}


/* ═══════════════════════════════════════════════════════════════════
   §6 CTA ZOOM
   Pinned section: image expands from framed → full-bleed on scroll,
   then overlay fades in. GSAP ScrollTrigger handles the animation.
   ═════════════════════════════════════════════════════════════════ */

.cta-zoom-sec {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  /* data-theme="dark" on element for light text over dark image */
}

/* Higher specificity than .img-placeholder to override position: relative */
.cta-zoom-sec .cta-zoom-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Initial state: small centered frame. GSAP animates to full-bleed */
  clip-path: inset(28% 30% 28% 30% round 12px);
  will-change: clip-path;
}

.cta-zoom-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-above);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(22, 18, 16, 0.45);
  /* Initial: invisible. GSAP fades in. */
  opacity: 0;
  will-change: opacity;
  padding-inline: var(--gutter);
  gap: var(--s5);
}

.cta-zoom-title {
  color: #EFE7DB; /* always light — dark image behind */
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}

/* Larger CTA variant for the zoom section */
.cta-btn--dark {
  border-color: rgba(239, 231, 219, 0.5);
  color: #EFE7DB;
  padding: 0.75rem 2.5rem;
  font-size: 1rem;
}

@media (hover: hover) and (pointer: fine) {
  .cta-btn--dark:hover {
    background: #EFE7DB;
    color: #211C18;
    border-color: #EFE7DB;
  }
}

@media (max-width: 540px) {
  .cta-zoom-img {
    clip-path: inset(20% 15% 20% 15% round 8px);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   §7 IMAGE PLACEHOLDERS
   Warm duotone gradients simulating editorial photography.
   Replace background-gradient with real <img> later — no HTML change.
   ═════════════════════════════════════════════════════════════════ */

/* Base: size + fallback. Specific position set per context. */
.img-placeholder {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--surface); /* fallback */
}

/* Hero: drop /assets/images/hero-bg.jpg → gradient fallback */
.img-placeholder--hero {
  background:
    url('/assets/images/hero-bg.jpg') center / cover no-repeat,
    radial-gradient(ellipse 80% 70% at 58% 32%, #D2998A 0%, #5C3D2E 38%, #211C18 100%);
}

/* Microblading service card */
.img-placeholder--micro {
  background:
    url('/assets/images/service-microblading.jpg') center / cover no-repeat,
    linear-gradient(155deg, #211C18 0%, #5C3D2E 35%, #C68B7B 68%, #EFE7DB 100%);
}

/* Lash Lift service card */
.img-placeholder--lash {
  background:
    url('/assets/images/service-lash-lift.jpg') center / cover no-repeat,
    linear-gradient(145deg, #C68B7B 0%, #B9986A 45%, #FBF7F1 100%);
}

/* Brow Lift service card */
.img-placeholder--brow {
  background:
    url('/assets/images/service-brow-lift.jpg') center / cover no-repeat,
    linear-gradient(150deg, #B9986A 0%, #5C3D2E 50%, #211C18 100%);
}

/* Text-behind-image portrait */
.img-placeholder--tbi {
  background:
    url('/assets/images/tbi-portrait.jpg') center / cover no-repeat,
    radial-gradient(ellipse 75% 65% at 52% 38%, #C68B7B 0%, #5C3D2E 45%, #161210 100%);
}

/* Gallery items */
.img-placeholder--g1 {
  background:
    url('/assets/images/gallery-01.jpg') center / cover no-repeat,
    linear-gradient(160deg, #5C3D2E 0%, #C68B7B 55%, #EFE7DB 100%);
}
.img-placeholder--g2 {
  background:
    url('/assets/images/gallery-02.jpg') center / cover no-repeat,
    linear-gradient(145deg, #C68B7B 0%, #D2998A 40%, #6B5F54 100%);
}
.img-placeholder--g3 {
  background:
    url('/assets/images/gallery-03.jpg') center / cover no-repeat,
    linear-gradient(155deg, #211C18 0%, #B9986A 50%, #C68B7B 100%);
}
.img-placeholder--g4 {
  background:
    url('/assets/images/gallery-04.jpg') center / cover no-repeat,
    linear-gradient(140deg, #B9986A 0%, #5C3D2E 45%, #C68B7B 100%);
}
.img-placeholder--g5 {
  background:
    url('/assets/images/gallery-05.jpg') center / cover no-repeat,
    linear-gradient(150deg, #6B5F54 0%, #C68B7B 50%, #FBF7F1 100%);
}
.img-placeholder--g6 {
  background:
    url('/assets/images/gallery-06.jpg') center / cover no-repeat,
    linear-gradient(160deg, #5C3D2E 0%, #D2998A 55%, #211C18 100%);
}

/* CTA Zoom background */
.img-placeholder--cta {
  background:
    url('/assets/images/cta-bg.jpg') center / cover no-repeat,
    radial-gradient(ellipse 90% 80% at 40% 50%, #5C3D2E 0%, #211C18 55%, #161210 100%);
}