/*
 * layout.css — Grid, containers, spacing system
 * Ref: Gundari 50/50 split, Aman centered text,
 *      The Ridge Bali section padding, Singita wide margins
 */

/* ── CONTAINERS ──────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}

.container--text {
  max-width: var(--max-w-text);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}

.container--narrow {
  max-width: var(--max-w-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}

.container--flush {
  width: 100%;
  max-width: 100%;
}

/* ── SECTION SPACING ────────────────────────────── */
.section {
  padding-top: var(--sp-xl);
  padding-bottom: var(--sp-xl);
}

.section--lg {
  padding-top: var(--sp-2xl);
  padding-bottom: var(--sp-2xl);
}

.section--sm {
  padding-top: var(--sp-lg);
  padding-bottom: var(--sp-lg);
}

.section--linen  { background-color: var(--linen); }
.section--sand   { background-color: var(--sand); }
.section--dark   { background-color: var(--dark); }
.section--warm   { background-color: var(--white-warm); }

/* ── SPLIT LAYOUT — Gundari 50/50 Pattern ────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.split--60-40 {
  grid-template-columns: 60fr 40fr;
}

.split--40-60 {
  grid-template-columns: 40fr 60fr;
}

.split__image {
  position: relative;
  overflow: hidden;
}

.split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s var(--ease);
}

.split__image:hover img {
  transform: scale(1.03);
}

.split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px);
}

/* ── GRID SYSTEMS ───────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
}

/* ── SCROLL REVEAL ANIMATION ────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--speed-slow) var(--ease),
    transform var(--speed-slow) var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"] { transition-delay: 0.5s; }