/* ─────────────────────────────────────────────────────────────────
   service-page.css — Shared layout for all three service pages
   §1 Hero split  §2 Intro  §3 Features  §4 Before/After swap
   §5 Process steps  §6 Care list  §7 CTA  §8 Before placeholders
   ───────────────────────────────────────────────────────────────── */

/* ── Breadcrumb ──────────────────────────────────────────────────── */
.breadcrumb {
  position: absolute;
  inset-block-start: calc(72px + var(--s3));
  inset-inline: var(--gutter);
  z-index: var(--z-above);
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--f-label);
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

.breadcrumb a {
  color: inherit;
  transition: color var(--dur-ui) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .breadcrumb a:hover { color: var(--ink); }
}

.breadcrumb-sep { opacity: 0.5; }


/* ═══════════════════════════════════════════════════════════════════
   §1 HERO — Magazine split (text | image)
   RTL: text on right (start), image on left (end)
   ═════════════════════════════════════════════════════════════════ */

.sp-hero {
  min-height: 92dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}

/* Text column (col 1 = right in RTL) */
.sp-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(72px + var(--s12)) var(--s12);
  padding-inline: var(--gutter);
  position: relative;
  z-index: var(--z-above);
}

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

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

.sp-hero-tagline {
  font-family: var(--ff-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  color: var(--mocha);
  margin-block-end: var(--s5);
  max-width: 34ch;
  line-height: 1.5;
}

.sp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-block-end: var(--s8);
}

.sp-hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-hero-meta-label {
  font-size: var(--f-label);
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sp-hero-meta-value {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
}

/* Image column (col 2 = left in RTL): sticky during scroll */
.sp-hero-image {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  align-self: start;
}

/* Scrim: fades image into background at the edge touching the text column.
   In RTL layout the image is on the left, text on the right, so gradient
   runs left→right (physical). Theme-aware via var(--bg). */
.sp-hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent      55%,
    rgba(0,0,0,0.08) 72%,
    var(--bg)        100%
  );
  pointer-events: none;
  z-index: 3;
}

.sp-hero-image .img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* GSAP target: image moves slightly on scroll (parallax) */
.sp-hero-img-inner {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
}

@media (max-width: 768px) {
  .sp-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .sp-hero-text  { order: 2; padding-block-start: var(--s5); }
  .sp-hero-image { order: 1; height: 55dvh; position: relative; top: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   §2 INTRO — Pull quote + body text
   ═════════════════════════════════════════════════════════════════ */

.sp-intro {
  padding-block: var(--s18);
  background: var(--surface);
}

.sp-intro-inner {
  max-width: 760px;
  margin-inline: auto;
}

.sp-pull-quote {
  font-family: var(--ff-serif);
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: var(--mocha);
  letter-spacing: -0.01em;
  margin-block-end: var(--s5);
  padding-inline-start: var(--s3);
  border-inline-start: 2px solid var(--champagne);
}

.sp-intro-body {
  color: var(--ink-soft);
  line-height: var(--lh-body);
  font-size: var(--f-body);
}

.sp-intro-body p + p {
  margin-block-start: var(--s3);
}


/* ═══════════════════════════════════════════════════════════════════
   §3 FEATURES — 3-col editorial benefit cards
   ═════════════════════════════════════════════════════════════════ */

.sp-features {
  padding-block: var(--s18);
  background: var(--bg);
}

.sp-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  margin-block-start: var(--s8);
  list-style: none;
}

.sp-feature {
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--line);
  will-change: transform, opacity;
}

.sp-feature-num {
  display: block;
  font-family: var(--ff-serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--champagne);
  line-height: 1;
  margin-block-end: var(--s2);
}

.sp-feature-title {
  font-family: var(--ff-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-block-end: var(--s1);
}

.sp-feature-desc {
  font-size: var(--f-small);
  color: var(--ink-soft);
  line-height: 1.7;
}

@media (max-width: 640px) {
  .sp-features-grid {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   §4 BEFORE / AFTER — Hover crossfade image swap
   ═════════════════════════════════════════════════════════════════ */

.sp-before-after {
  padding-block: var(--s18);
  background: var(--surface);
}

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

/* Swap container */
.img-swap {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}

.img-swap-base,
.img-swap-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.45s var(--ease);
}

.img-swap-hover {
  opacity: 0;
}

/* Desktop hover */
@media (hover: hover) and (pointer: fine) {
  .img-swap:hover .img-swap-hover {
    opacity: 1;
  }
}

/* Touch tap via JS-toggled class */
.img-swap.is-flipped .img-swap-hover {
  opacity: 1;
}

/* State labels */
.img-swap-tag {
  position: absolute;
  bottom: var(--s2);
  inset-inline-start: var(--s2);
  z-index: 2;
  background: rgba(22, 18, 16, 0.55);
  backdrop-filter: blur(6px);
  color: #EFE7DB;
  font-size: var(--f-label);
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 100px;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

/* Hide "بعد" tag when hover image is showing */
.img-swap-base .img-swap-tag {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .img-swap:hover .img-swap-base .img-swap-tag  { opacity: 0; }
}
.img-swap.is-flipped .img-swap-base .img-swap-tag { opacity: 0; }

/* "قبل" label on hover image — always visible when active */
.img-swap-hover .img-swap-tag {
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .img-swap:hover .img-swap-hover .img-swap-tag  { opacity: 1; }
}
.img-swap.is-flipped .img-swap-hover .img-swap-tag { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════
   §5 PROCESS — Numbered steps
   ═════════════════════════════════════════════════════════════════ */

.sp-process {
  padding-block: var(--s18);
  background: var(--bg);
}

.sp-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-block-start: var(--s8);
}

.sp-step {
  display: grid;
  grid-template-columns: var(--s8) 1fr;
  gap: var(--s3);
  padding-block: var(--s5);
  border-block-start: 1px solid var(--line);
  align-items: start;
  will-change: transform, opacity;
}

.sp-step:last-child {
  border-block-end: 1px solid var(--line);
}

.sp-step-num {
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--champagne);
  line-height: 1.2;
  padding-block-start: 2px;
}

.sp-step-title {
  font-family: var(--ff-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-block-end: var(--s1);
}

.sp-step-desc {
  font-size: var(--f-small);
  color: var(--ink-soft);
  line-height: 1.75;
}

@media (max-width: 480px) {
  .sp-step { grid-template-columns: var(--s5) 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   §6 CARE — Post-care instructions
   ═════════════════════════════════════════════════════════════════ */

.sp-care {
  padding-block: var(--s12);
  background: var(--surface);
}

.sp-care-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5) var(--s12);
  margin-block-start: var(--s8);
}

.sp-care-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding-block-start: var(--s2);
  border-block-start: 1px solid var(--line);
}

.sp-care-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mocha);
  flex-shrink: 0;
  margin-block-start: 7px;
}

.sp-care-text {
  font-size: var(--f-small);
  color: var(--ink-soft);
  line-height: 1.65;
}

@media (max-width: 540px) {
  .sp-care-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   §7 SERVICE CTA — Dark booking call-to-action
   ═════════════════════════════════════════════════════════════════ */

.sp-cta {
  padding-block: var(--s18);
  text-align: center;
  background: var(--bg);
}

.sp-cta-title {
  margin-block-end: var(--s5);
  color: var(--ink);
}

.sp-cta-sub {
  font-size: var(--f-body);
  color: var(--ink-soft);
  margin-block-end: var(--s8);
  max-width: 46ch;
  margin-inline: auto;
  line-height: var(--lh-body);
}


/* ═══════════════════════════════════════════════════════════════════
   §8 SERVICE IMAGE PLACEHOLDERS
   "Before" state: neutral gray-brown (unstyled)
   Service-specific detail shots
   ═════════════════════════════════════════════════════════════════ */

/* Universal "before" state: muted warm gray */
.img-placeholder--before {
  background:
    url('/assets/images/micro-before.jpg') center / cover no-repeat,
    linear-gradient(150deg, #E4DACE 0%, #B7AB9D 45%, #6B5F54 100%);
}

/* Service hero images */
.img-placeholder--sp-micro {
  background:
    url('/assets/images/sp-microblading.jpg') center / cover no-repeat,
    radial-gradient(ellipse 80% 90% at 55% 40%, #C68B7B 0%, #5C3D2E 40%, #161210 100%);
}

.img-placeholder--sp-lash {
  background:
    url('/assets/images/sp-lash-lift.jpg') center / cover no-repeat,
    radial-gradient(ellipse 70% 85% at 50% 35%, #D2998A 0%, #C68B7B 45%, #5C3D2E 100%);
}

.img-placeholder--sp-brow {
  background:
    url('/assets/images/sp-brow-lift.jpg') center / cover no-repeat,
    radial-gradient(ellipse 75% 80% at 55% 40%, #CBA86A 0%, #B9986A 35%, #5C3D2E 80%, #161210 100%);
}

/* Detail / secondary images per service */
.img-placeholder--sp-detail {
  background:
    url('/assets/images/sp-detail.jpg') center / cover no-repeat,
    linear-gradient(160deg, #5C3D2E 0%, #B7AB9D 50%, #E4DACE 100%);
}