/* =============================================================
   LAYOUT — Containers, sections, grid primitives, backgrounds
   Zelken MD Plastic Surgery
   ============================================================= */

/* ============================================================
   CONTAINERS
   ============================================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.container-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   SECTION WRAPPERS
   ============================================================ */
.section     { padding-block: var(--section-y); }
.section--sm { padding-block: clamp(40px, 5vw, 64px); }

/* ============================================================
   BACKGROUND CONTEXTS
   ============================================================ */
.bg-bone  { background: var(--bone); }
.bg-lilac { background: var(--lilac); }
.bg-ink   { background: var(--ink); color: var(--cream); }
.bg-slate { background: var(--slate); color: var(--cream); }

/* Deep dark with radial warmth — editorial marble look */
.bg-marble {
  position: relative;
  background:
    radial-gradient(120% 90% at 18% 0%, #25241f 0%, transparent 55%),
    radial-gradient(120% 90% at 90% 100%, #211f1a 0%, transparent 55%),
    var(--marble-deep);
  color: var(--cream);
  overflow: hidden;
}

.bg-marble::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 0%, rgba(148, 128, 86, .07) 38%, transparent 42%),
    linear-gradient(80deg, transparent 60%, rgba(148, 128, 86, .05) 78%, transparent 82%);
  opacity: .9;
}

.bg-marble > * { position: relative; z-index: 1; }

/* Diagonal warm weave — used on light sections needing texture */
.bg-weave {
  background:
    linear-gradient(135deg, transparent 49.6%, rgba(151, 131, 80, .18) 49.6% 50.4%, transparent 50.4%),
    linear-gradient(45deg, transparent 49.6%, rgba(151, 131, 80, .12) 49.6% 50.4%, transparent 50.4%),
    var(--bone);
  background-size: 220px 220px, 220px 220px, auto;
}

/* ============================================================
   SPLIT / TWO-COLUMN LAYOUT
   ============================================================ */
.about-split {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

/* Reverse proportions (awards layout: wide media left, narrow copy right) */
.about-split--awards { grid-template-columns: 1fr 0.9fr; }

.about-split .portrait {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   RESPONSIVE LAYOUT
   ============================================================ */
@media (max-width: 980px) {
  .about-split { grid-template-columns: 1fr; }
}