/*
 * Golden Tabriz — compiled production stylesheet.
 * Hand-merged from src/scss/** (Vite/Sass build removed per maintenance request).
 * Source partials are preserved under src/scss for future edits; this file is the
 * single stylesheet actually enqueued by the theme.
 */
/* ==== src/scss/tokens/_color.scss ==== */
/* Black & Gold editorial palette — see Phase 1 §5.1. */
/* Gold is a punctuation color (rules, accents, active states), */
/* never a large fill area. */
:root {
  --color-ink-900: #0b0a08;
  --color-ink-800: #131210;
  --color-ink-700: #1c1a17;

  --color-gold-500: #c9a24a;
  --color-gold-300: #e2c98a;

  --color-neutral-100: #f5f2ea;
  --color-neutral-400: #a39c8d;

  --color-overlay-gradient-start: rgba(11, 10, 8, 0);
  --color-overlay-gradient-end: rgba(11, 10, 8, 0.85);
  --color-overlay-vignette: rgba(11, 10, 8, 0.35);
}

/* ==== src/scss/tokens/_typography.scss ==== */
/* Fluid Typography System — Phase 1 §5.2, refined per Hero review round. */
/* */
/* Every step uses the same clamp() formula shape: */
/*   clamp(min, min + (max-min)*(100vw-320px)/(1600-320) in vw units, max) */
/* simplified to a consistent `vw + rem` approximation below, so the whole */
/* scale grows on one predictable curve rather than ad-hoc per-step tuning. */
/* Steps share the same *count* across Persian/Latin (independent px values, */
/* matching hierarchy depth) per the original bilingual type-scale rule. */
:root {
  --font-latin-display: 'Georgia', 'Times New Roman', serif;
  --font-latin-body: -apple-system, 'Segoe UI', Roboto, sans-serif;

  --font-fa-display: 'Vazirmatn', Tahoma, sans-serif;
  --font-fa-body: 'Vazirmatn', Tahoma, sans-serif;

  /* Display tier — hero / full-bleed cinematic moments only. */
  --step-display-xl: clamp(3rem,   7vw + 1rem, 8rem);
  --step-display-l:  clamp(2.5rem, 5.5vw + 1rem, 6rem);
  --step-display-m:  clamp(2rem,   4vw + 1rem, 4.5rem);

  /* Heading tier — section/content headings. */
  --step-h1: clamp(2rem,    3.5vw + 1rem, 4rem);
  --step-h2: clamp(1.75rem, 2.5vw + 1rem, 3.25rem);
  --step-h3: clamp(1.375rem, 1.5vw + 1rem, 2rem);
  --step-h4: clamp(1.125rem, 1vw + 1rem, 1.5rem);
  --step-h5: clamp(1rem,    0.6vw + 0.9rem, 1.25rem);
  --step-h6: clamp(0.9rem,  0.4vw + 0.85rem, 1.05rem);

  /* Text tier. */
  --step-body-l: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  --step-body:   clamp(1rem,      0.3vw + 0.9rem,  1.125rem);
  --step-caption: clamp(0.8125rem, 0.15vw + 0.78rem, 0.875rem);

  --line-height-display: 1.05;
  --line-height-heading: 1.15;
  --line-height-body: 1.6;
}

/* Persian text needs a slightly larger base size and looser leading */
/* to reach equivalent visual weight to the Latin type (Phase 1 §5.2). */
:root[lang="fa"],
[dir="rtl"] {
  --line-height-display: 1.3;
  --line-height-heading: 1.4;
  --line-height-body: 1.85;
}

/* ==== src/scss/tokens/_spacing.scss ==== */
/* 8px base unit, direction-agnostic (Phase 1 §5.3). */
:root {
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;
  --space-10: 10rem;
  --space-11: 12rem;
  --space-12: 16rem;

  --section-gap: var(--space-9);
  --container-max: 90rem;
  --container-padding-inline: var(--space-4);
}

@media (max-width: 48rem) {
  :root {
    --section-gap: var(--space-7);
    --container-padding-inline: var(--space-3);
  }
}

/* ==== src/scss/tokens/_motion.scss ==== */
/* House easing + duration tiers (Phase 1 §5.5 / §10). Kept in sync with */
/* src/js/core/motion-config.js — update both together. */
:root {
  --ease-house: cubic-bezier(0.16, 1, 0.3, 1);

  --duration-micro: 200ms;
  --duration-reveal: 800ms;
  --duration-page: 1000ms;
}

/* ==== src/scss/utilities/_reset.scss ==== */
/* Minimal modern reset — logical properties throughout so it serves */
/* both RTL and LTR without duplication (Phase 1 §4 / Phase 2 §2). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-ink-900);
  color: var(--color-neutral-100);
  font-family: var(--font-latin-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

:root[lang="fa"] body,
[dir="rtl"] body {
  font-family: var(--font-fa-body);
}

img,
video {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, p {
  margin-block: 0;
}

.screen-reader-text {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 1000;
  padding: var(--space-2) var(--space-3);
  background: var(--color-gold-500);
  color: var(--color-ink-900);
  transform: translateY(-4rem);
  transition: transform var(--duration-micro) var(--ease-house);
}

.skip-link:focus {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==== src/scss/utilities/_container.scss ==== */
/* Shared container + section rhythm utilities (Phase 2 §2 asset organization). */
.l-container {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.l-container--narrow {
  max-inline-size: 48rem;
}

.l-section {
  padding-block: var(--section-gap);
}

.l-section--breath {
  padding-block: calc(var(--section-gap) * 1.4);
}

/* ==== src/scss/components/_card.scss ==== */
/* Shared card-destination component — base style reused across several */
/* sections; each section's own partial only controls the grid/layout */
/* around it (Visual Rhythm Principle: composition differs, component doesn't). */
.card-destination {
  display: block;
  will-change: transform, opacity;
}

.card-destination__media {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-ink-700);
}

.card-destination__media picture,
.card-destination__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--duration-reveal) var(--ease-house);
}

.card-destination:hover .card-destination__media img {
  transform: scale(1.04);
}

.card-destination__title {
  margin-block-start: var(--space-3);
  font-size: var(--step-h5);
  font-family: var(--font-latin-display);
}

:root[lang="fa"] .card-destination__title,
[dir="rtl"] .card-destination__title {
  font-family: var(--font-fa-display);
}

.card-destination__excerpt {
  margin-block-start: var(--space-1);
  font-size: var(--step-caption);
  color: var(--color-neutral-400);
}

/* ==== src/scss/components/_button.scss ==== */
/* Primary button element — used by the Hero (future), CTA, and hotel cards. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-gold-500);
  font-size: var(--step-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  will-change: transform;
}

.btn--primary {
  background: var(--color-gold-500);
  color: var(--color-ink-900);
}

.btn--secondary {
  background: transparent;
  color: var(--color-neutral-100);
}

.btn__label {
  display: inline-block;
}

/* ==== src/scss/components/_testimonial.scss ==== */
/* Testimonial card + single-quote carousel with dot navigation */
/* (Visual Rhythm Principle: centered/minimal, contrasts with Gallery before it). */
.card-testimonial {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-reveal) var(--ease-house);
}

.card-testimonial.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.card-testimonial__quote p {
  font-family: var(--font-latin-display);
  font-style: italic;
  font-size: var(--step-h2);
  line-height: var(--line-height-heading);
}

:root[lang="fa"] .card-testimonial__quote p,
[dir="rtl"] .card-testimonial__quote p {
  font-family: var(--font-fa-display);
  font-style: normal;
}

.card-testimonial__caption {
  margin-block-start: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.card-testimonial__name {
  font-size: var(--step-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card-testimonial__role {
  font-size: var(--step-caption);
  color: var(--color-neutral-400);
}

.section-testimonials__carousel {
  position: relative;
  min-block-size: 16rem;
}

.section-testimonials__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

.testimonial-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 999px;
  background: var(--color-neutral-400);
  opacity: 0.5;
  transition: opacity var(--duration-micro) var(--ease-house), transform var(--duration-micro) var(--ease-house);
}

.testimonial-dot.is-active {
  background: var(--color-gold-500);
  opacity: 1;
  transform: scale(1.3);
}

/* ==== src/scss/layouts/_header.scss ==== */
/* Site header, primary navigation, language switcher (Phase 3: Header/Nav). */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  padding-block: var(--space-3);
}

.nav-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.nav-primary__logo {
  font-family: var(--font-latin-display);
  font-size: var(--step-h3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-primary__toggle {
  display: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  position: relative;
}

@media (max-width: 60rem) {
  .has-js .nav-primary__toggle {
    display: block;
  }
}

.nav-primary__toggle-icon,
.nav-primary__toggle-icon::before,
.nav-primary__toggle-icon::after {
  position: absolute;
  inset-inline-start: 20%;
  inline-size: 60%;
  block-size: 2px;
  background: var(--color-neutral-100);
  transition: transform var(--duration-micro) var(--ease-house), opacity var(--duration-micro) var(--ease-house);
}

.nav-primary__toggle-icon {
  inset-block-start: 50%;
}

.nav-primary__toggle-icon::before {
  content: '';
  inset-block-start: -0.5rem;
}

.nav-primary__toggle-icon::after {
  content: '';
  inset-block-start: 0.5rem;
}

.nav-primary__toggle[aria-expanded="true"] .nav-primary__toggle-icon {
  background: transparent;
}

.nav-primary__toggle[aria-expanded="true"] .nav-primary__toggle-icon::before {
  transform: translateY(0.5rem) rotate(45deg);
}

.nav-primary__toggle[aria-expanded="true"] .nav-primary__toggle-icon::after {
  transform: translateY(-0.5rem) rotate(-45deg);
}

.nav-primary__menu-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

@media (max-width: 60rem) {
  .nav-primary__menu-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 60rem) {
  .has-js .nav-primary__menu-wrap {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    inline-size: min(20rem, 85vw);
    justify-content: center;
    padding-inline: var(--space-5);
    background: var(--color-ink-800);
    transform: translateX(100%);
    transition: transform var(--duration-reveal) var(--ease-house);
  }
}

@media (max-width: 60rem) {
  [dir="rtl"] .has-js .nav-primary__menu-wrap {
    inset-inline-end: auto;
    inset-inline-start: 0;
    transform: translateX(-100%);
  }
}

.nav-primary__menu-wrap.is-open {
  transform: translateX(0);
}

.nav-primary__menu {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 60rem) {
  .nav-primary__menu {
    flex-direction: column;
    gap: var(--space-3);
  }
}

.nav-primary__menu a {
  font-size: var(--step-caption);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nav-primary__menu a:hover,
.nav-primary__menu a:focus-visible {
  color: var(--color-gold-500);
}

.language-switcher {
  font-size: var(--step-caption);
}

/* ==== src/scss/sections/_hero.scss ==== */
/* Hero section — fullscreen cinematic video, layered overlays, editorial type. */
.section-hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block-end: var(--space-8);
  overflow: hidden;
}

.section-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section-hero__video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Layered overlays: a bottom-weighted gradient for text legibility, */
/* plus a subtle vignette for cinematic depth (Phase 1 §12). */
/* */
/* Strength is adaptive to the video's brightness so text contrast stays */
/* consistent either way — see gt_render_video()'s `brightness` argument */
/* and src/js/sections/hero.js's runtime luminance sampling for `auto`. */
/* --hero-overlay-strength is a 0–1 multiplier; JS sets it inline for */
/* `auto`, these data-attribute presets cover explicit dark/bright values. */
.section-hero__media {
  --hero-overlay-strength: 0.7; // sensible mid-point default before JS/data runs
}

.section-hero__media[data-video-brightness="dark"] {
  --hero-overlay-strength: 0.45;
}

.section-hero__media[data-video-brightness="bright"] {
  --hero-overlay-strength: 0.9;
}

.section-hero__overlay {
  position: absolute;
  inset: 0;
  opacity: var(--hero-overlay-strength);
}

.section-hero__overlay--gradient {
  background: linear-gradient(
    to bottom,
    var(--color-overlay-gradient-start) 40%,
    var(--color-overlay-gradient-end) 100%
  );
}

.section-hero__overlay--vignette {
  background: radial-gradient(
    ellipse at center,
    transparent 45%,
    var(--color-overlay-vignette) 100%
  );
}

.section-hero__content {
  position: relative;
  z-index: 1;
}

.section-hero__title {
  font-family: var(--font-latin-display);
  font-size: var(--step-display-xl);
  line-height: var(--line-height-display);
  max-inline-size: 20ch;
  overflow: hidden; // clip boundary for the mask-reveal animation
}

:root[lang="fa"] .section-hero__title,
[dir="rtl"] .section-hero__title {
  font-family: var(--font-fa-display);
}

.section-hero__title-inner {
  display: block;
  will-change: transform;
}

.section-hero__subtitle {
  margin-block-start: var(--space-4);
  font-size: var(--step-body);
  color: var(--color-neutral-400);
  max-inline-size: 40ch;
}

.section-hero__scroll-indicator {
  position: absolute;
  inset-block-end: var(--space-5);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.section-hero__scroll-line {
  display: block;
  inline-size: 1px;
  block-size: 2.5rem;
  background: var(--color-gold-500);
  transform-origin: top;
}

@media (max-width: 48rem) {
  .section-hero {
    align-items: center;
    text-align: center;
    padding-block-end: 0;
  }

  .section-hero__title,
  .section-hero__subtitle {
    max-inline-size: 100%;
    margin-inline: auto;
  }

  .section-hero__scroll-indicator {
    inset-block-end: var(--space-4);
  }
}

/* ==== src/scss/sections/_featured-destinations.scss ==== */
/* Featured Destinations — asymmetric grid, uneven card heights */
/* (Visual Rhythm Principle: distinct from Hero's single focal point). */
.section-featured-destinations__title {
  font-size: var(--step-h2);
  font-family: var(--font-latin-display);
  margin-block-end: var(--space-6);
}

.section-featured-destinations__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

/* Asymmetric rhythm: 2nd and 4th cards sit taller, breaking a uniform grid. */
.section-featured-destinations__grid .card-destination:nth-child(2),
.section-featured-destinations__grid .card-destination:nth-child(4) {
  grid-row: span 1;
}

.section-featured-destinations__grid .card-destination:nth-child(2) .card-destination__media,
.section-featured-destinations__grid .card-destination:nth-child(4) .card-destination__media {
  aspect-ratio: 4 / 6;
}

@media (max-width: 60rem) {
  .section-featured-destinations__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 32rem) {
  .section-featured-destinations__grid {
    grid-template-columns: 1fr;
  }
}

/* ==== src/scss/sections/_historical-places.scss ==== */
/* Historical Places — horizontal scroll-driven filmstrip with parallax */
/* (Visual Rhythm Principle: contrasts with the grid before it). */
.section-historical-places {
  overflow: hidden;
}

.section-historical-places__title {
  font-size: var(--step-h2);
  font-family: var(--font-latin-display);
}

.section-historical-places__intro {
  margin-block-start: var(--space-2);
  color: var(--color-neutral-400);
  max-inline-size: 40ch;
}

.section-historical-places__grid {
  margin-block-start: var(--space-6);
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: var(--space-2); // room for potential scrollbar
}

.section-historical-places__grid .card-destination {
  flex: 0 0 min(70vw, 26rem);
  scroll-snap-align: start;
}

.section-historical-places__grid .card-destination__media {
  aspect-ratio: 3 / 4;
}

/* Parallax target: JS applies a transform (translateY) to this inner layer */
/* only — never to the outer flex/scroll container, so scroll-snap layout */
/* is unaffected by the GPU-only motion. */
.section-historical-places .card-destination__media img {
  will-change: transform;
}

/* ==== src/scss/sections/_nature.scss ==== */
/* Nature — single full-bleed image, near-static (Visual Rhythm Principle: */
/* a deliberate "breath" — the quietest section on the page). */
.section-nature {
  position: relative;
  min-block-size: 70vh;
  display: flex;
  align-items: flex-end;
}

.section-nature__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section-nature__media picture,
.section-nature__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.section-nature__title {
  position: relative;
  z-index: 1;
  font-size: var(--step-h3);
  font-weight: 400;
  color: var(--color-neutral-100);
  padding-block-end: var(--space-6);
}

/* ==== src/scss/sections/_museums.scss ==== */
/* Museums — alternating two-column editorial rows (Visual Rhythm Principle: */
/* contrasts with Nature's single image before it). */
.section-museums__title {
  font-size: var(--step-h2);
  font-family: var(--font-latin-display);
  margin-block-end: var(--space-6);
}

.section-museums__grid {
  display: grid;
  gap: var(--space-6);
}

.section-museums__grid .card-destination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}

.section-museums__grid .card-destination__media,
.section-museums__grid .card-destination__title,
.section-museums__grid .card-destination__excerpt {
  flex: 1 1 18rem;
}

.section-museums__grid .card-destination__title,
.section-museums__grid .card-destination__excerpt {
  flex-basis: 100%;
}

/* Alternate media position per row for editorial rhythm — `order` is */
/* purely visual and safe in both RTL and LTR, unlike flipping `direction`. */
.section-museums__grid .card-destination:nth-child(even) .card-destination__media {
  order: 2;
}

.section-museums__grid .card-destination__media {
  aspect-ratio: 1 / 1;
  flex-basis: 22rem;
}

/* ==== src/scss/sections/_hotels.scss ==== */
/* Luxury Hotels — horizontal snap-scroll carousel with magnetic hover */
/* (Visual Rhythm Principle: contrasts with Museums' stacked rows before it). */
.section-hotels__title {
  font-size: var(--step-h2);
  font-family: var(--font-latin-display);
  margin-block-end: var(--space-6);
}

.section-hotels__grid {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: var(--space-2);
}

.section-hotels__grid .card-destination {
  flex: 0 0 min(80vw, 22rem);
  scroll-snap-align: start;
  border: 1px solid var(--color-gold-500);
  padding: var(--space-3);
}

.section-hotels__grid .card-destination__media {
  aspect-ratio: 4 / 3;
}

/* ==== src/scss/sections/_food.scss ==== */
/* Restaurants, Cafés & Local Food — uneven masonry of macro shots */
/* (Visual Rhythm Principle: the highest-density, most intimate section; */
/* contrasts with the horizontal carousel before it). */
.section-food__title {
  font-size: var(--step-h2);
  font-family: var(--font-latin-display);
  margin-block-end: var(--space-6);
}

.section-food__grid {
  columns: 2;
  column-gap: var(--space-4);
}

.section-food__grid .card-destination {
  display: inline-block;
  inline-size: 100%;
  margin-block-end: var(--space-4);
  break-inside: avoid;
}

/* Varying aspect ratios per position creates the uneven masonry rhythm. */
.section-food__grid .card-destination:nth-child(odd) .card-destination__media {
  aspect-ratio: 3 / 4;
}

.section-food__grid .card-destination:nth-child(even) .card-destination__media {
  aspect-ratio: 1 / 1;
}

.section-food__grid .card-destination__title {
  font-size: var(--step-h6);
}

@media (max-width: 40rem) {
  .section-food__grid {
    columns: 1;
  }
}

/* ==== src/scss/sections/_experiences.scss ==== */
/* Travel Experiences — numbered vertical timeline, not a grid */
/* (Visual Rhythm Principle: contrasts with Food's masonry before it). */
.section-experiences__title {
  font-size: var(--step-h2);
  font-family: var(--font-latin-display);
  margin-block-end: var(--space-6);
}

.section-experiences__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section-experiences__grid .card-destination {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--color-ink-700);
  counter-increment: experience;
}

.section-experiences__grid {
  counter-reset: experience;
}

.section-experiences__grid .card-destination::before {
  content: counter(experience, decimal-leading-zero);
  font-family: var(--font-latin-display);
  font-size: var(--step-h1);
  color: var(--color-gold-500);
  flex: 0 0 auto;
  inline-size: 3.5ch;
}

.section-experiences__grid .card-destination__media {
  display: none; // timeline composition intentionally omits imagery — number is the anchor
}

.section-experiences__grid .card-destination__title {
  font-size: var(--step-h4);
  margin-block-start: 0;
}

/* ==== src/scss/sections/_events.scss ==== */
/* Events — date-forward list rows (Visual Rhythm Principle: contrasts */
/* with Experiences' timeline before it via horizontal rows, not a stack). */
.section-events__title {
  font-size: var(--step-h2);
  font-family: var(--font-latin-display);
  margin-block-end: var(--space-6);
}

.section-events__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-row {
  border-block-end: 1px solid var(--color-ink-700);
}

.event-row__link {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-4);
  transition: opacity var(--duration-micro) var(--ease-house);
}

.event-row__link:hover,
.event-row__link:focus-visible {
  opacity: 0.7;
}

.event-row__date {
  flex: 0 0 auto;
  font-family: var(--font-latin-display);
  font-size: var(--step-h3);
  color: var(--color-gold-500);
  inline-size: 5ch;
}

.event-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.event-row__title {
  font-size: var(--step-h5);
}

.event-row__excerpt {
  font-size: var(--step-caption);
  color: var(--color-neutral-400);
}

@media (max-width: 40rem) {
  .event-row__link {
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ==== src/scss/sections/_gallery.scss ==== */
/* Gallery — full-bleed masonry, image is the content */
/* (Visual Rhythm Principle: contrasts with Events' text-forward rows before it). */
.section-gallery__grid {
  columns: 3;
  column-gap: 2px;
}

.gallery-tile {
  display: block;
  inline-size: 100%;
  margin-block-end: 2px;
  break-inside: avoid;
  overflow: hidden;
}

.gallery-tile picture,
.gallery-tile img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  transition: transform var(--duration-reveal) var(--ease-house);
}

.gallery-tile:hover img {
  transform: scale(1.05);
}

@media (max-width: 48rem) {
  .section-gallery__grid {
    columns: 2;
  }
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 10, 8, 0.92);
}

.gallery-lightbox[hidden] {
  display: none;
}

.gallery-lightbox__stage {
  max-inline-size: 90vw;
  max-block-size: 90vh;
}

.gallery-lightbox__stage img {
  max-inline-size: 90vw;
  max-block-size: 90vh;
  object-fit: contain;
}

.gallery-lightbox__close {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  font-size: 2rem;
  color: var(--color-neutral-100);
}

/* ==== src/scss/sections/_testimonials.scss ==== */
/* Layout-only rules specific to the testimonials section wrapper; */
/* the carousel/card visuals live in components/_testimonial.scss. */
.section-testimonials {
  text-align: center;
}

/* ==== src/scss/sections/_cta.scss ==== */
/* Final CTA — centered single focal point, the calmest moment before the footer */
/* (Visual Rhythm Principle: intentionally echoes Testimonials' centered stillness). */
.section-cta__inner {
  text-align: center;
}

.section-cta__title {
  font-size: var(--step-display-m);
  font-family: var(--font-latin-display);
  margin-block-end: var(--space-5);
}

:root[lang="fa"] .section-cta__title,
[dir="rtl"] .section-cta__title {
  font-family: var(--font-fa-display);
}

/* ==== src/scss/sections/_archive-loop.scss ==== */
/* Shared archive/blog listing grid — one straightforward responsive grid; */
/* this is a utility listing page, not a narrative homepage section, so it */
/* intentionally stays simple rather than getting its own unique rhythm. */
.archive-loop__title {
  font-size: var(--step-h1);
  font-family: var(--font-latin-display);
  margin-block-end: var(--space-6);
}

.archive-loop__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.archive-loop__empty {
  color: var(--color-neutral-400);
}

@media (max-width: 60rem) {
  .archive-loop__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 32rem) {
  .archive-loop__grid {
    grid-template-columns: 1fr;
  }
}

/* Native pagination markup from the_posts_pagination(). */
.pagination {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-7);
}

.pagination .page-numbers {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-ink-700);
}

.pagination .page-numbers.current {
  border-color: var(--color-gold-500);
  color: var(--color-gold-500);
}

/* ==== src/scss/sections/_single-content.scss ==== */
/* Shared single-post/CPT layout. */
.single-content__media {
  aspect-ratio: 16 / 9;
  max-block-size: 60vh;
  overflow: hidden;
}

.single-content__media picture,
.single-content__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.single-content__header .l-container {
  padding-block-start: var(--space-5);
}

.single-content__kicker {
  font-size: var(--step-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gold-500);
}

.single-content__title {
  font-size: var(--step-h1);
  font-family: var(--font-latin-display);
  margin-block-start: var(--space-2);
}

.single-content__body {
  margin-block: var(--space-7);
  font-size: var(--step-body-l);
  line-height: var(--line-height-body);
}

.single-content__body > * + * {
  margin-block-start: var(--space-4);
}

.single-content__back {
  padding-block-end: var(--space-8);
}

.single-content__back-link {
  font-size: var(--step-caption);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.single-content__back-link:hover,
.single-content__back-link:focus-visible {
  color: var(--color-gold-500);
}

/* ==== src/scss/sections/_contact-form.scss ==== */
.contact-page__notice {
  padding: var(--space-3);
  margin-block-end: var(--space-4);
}

.contact-page__notice--success {
  border: 1px solid var(--color-gold-500);
  color: var(--color-gold-500);
}

.contact-page__notice--error {
  border: 1px solid #b3453c;
  color: #b3453c;
}

.contact-page__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}

.contact-page__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--step-caption);
}

.contact-page__field input,
.contact-page__field textarea {
  padding: var(--space-2);
  background: var(--color-ink-800);
  border: 1px solid var(--color-ink-700);
  color: var(--color-neutral-100);
  font: inherit;
}

.contact-page__field input:focus-visible,
.contact-page__field textarea:focus-visible {
  outline: 1px solid var(--color-gold-500);
}

/* ==== src/scss/sections/_faq.scss ==== */
.faq-page__title {
  font-size: var(--step-h1);
  font-family: var(--font-latin-display);
  margin-block-end: var(--space-6);
}

.faq-item {
  border-block-end: 1px solid var(--color-ink-700);
  padding-block: var(--space-3);
}

.faq-item__question {
  cursor: pointer;
  font-size: var(--step-h5);
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question::after {
  content: '+';
  float: inline-end;
  color: var(--color-gold-500);
}

.faq-item[open] .faq-item__question::after {
  content: '\2212'; // minus sign
}

.faq-item__answer {
  margin-block-start: var(--space-3);
  color: var(--color-neutral-400);
}

/* ==== src/scss/sections/_404.scss ==== */
.error-404-page__inner {
  text-align: center;
}

.error-404-page__kicker {
  font-family: var(--font-latin-display);
  font-size: var(--step-display-m);
  color: var(--color-gold-500);
}

.error-404-page__title {
  font-size: var(--step-h2);
  margin-block: var(--space-3);
}

.error-404-page__text {
  color: var(--color-neutral-400);
  margin-block-end: var(--space-5);
}