/* ==========================================================================
   ChennaiTrips — Layout System
   Spacing scale, containers, section rhythm, grid utilities, radius scale.
   Whitespace is treated as a design material, not empty leftover space.
   ========================================================================== */

:root {
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1.25rem;
  --space-md:  2rem;
  --space-lg:  3.25rem;
  --space-xl:  5.25rem;
  --space-2xl: 8.5rem;
  --space-3xl: 11rem;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-btn: 10px;
  --radius-pill: 999px;

  --container-max: 1320px;
  --container-narrow: 860px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);

  --header-height: 92px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--color-bg);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
  padding-block: var(--space-2xl);
  position: relative;
}

.section--tight { padding-block: var(--space-xl); }
.section--sand { background: var(--color-bg-secondary); }

.section-head {
  max-width: 720px;
  margin-bottom: var(--space-lg);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

.stack > * + * { margin-top: var(--space-md); }
.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-lg > * + * { margin-top: var(--space-lg); }

.divider-gold {
  width: 64px;
  height: 2px;
  background: var(--gradient-gold-line);
  border: 0;
  margin: var(--space-sm) 0;
}

.hairline {
  border: 0;
  border-top: 1px solid var(--color-border);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -48px;
  background: var(--color-ink);
  color: var(--color-ink-invert);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* Media frame — the wrapper every image/placeholder sits inside */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand-200);
}

.media-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.aspect-16-10 { aspect-ratio: 16 / 10; }
.aspect-4-5 { aspect-ratio: 4 / 5; }
.aspect-1-1 { aspect-ratio: 1 / 1; }
.aspect-21-9 { aspect-ratio: 21 / 9; }