/* ==========================================================================
   Lumina Dermatology — Layout Utilities & Grid
   ========================================================================== */

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

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

/* ---- Section rhythm ---- */
.section { padding-block: var(--space-10); }
.section--tight { padding-block: var(--space-8); }
.section--loose { padding-block: var(--space-11); }
.section--sunken { background: var(--color-surface-sunken); }
.section--textured {
  background:
    linear-gradient(rgba(235, 233, 226, 0.88), rgba(235, 233, 226, 0.88)),
    url("../images/Why%20Choose%20Us%20Background.png") center / cover no-repeat;
}
.section--ink { background: var(--color-surface-ink); color: var(--color-ink-invert); }

@media (max-width: 768px) {
  .section { padding-block: var(--space-8); }
  .section--loose { padding-block: var(--space-9); }
}

/* ---- Grid: 12 / 8 / 4 col intentional system ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
}
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(8, 1fr); gap: var(--space-5); }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}

/* Column span helpers — desktop is 12-col; each breakpoint below collapses
   intentionally (quarters/thirds -> halves on tablet -> full width on mobile)
   rather than leaving desktop spans to wrap unevenly. */
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 1024px) {
  .col-2, .col-3, .col-4 { grid-column: span 4; }  /* quarters/thirds -> halves on 8-col grid */
  .col-5, .col-6, .col-7, .col-8 { grid-column: span 8; } /* half-or-wider -> full on tablet */
}
@media (max-width: 640px) {
  .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 4; } /* full width on 4-col mobile grid */
}

/* ---- Section header pattern ---- */
.section-head {
  max-width: 720px;
  margin-bottom: var(--space-8);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head > .type-eyebrow { display: block; margin-bottom: var(--space-3); }
.section-head > h2 { margin-top: var(--space-2); }
.section-head > .type-lead { margin-top: var(--space-4); }

/* ---- Reveal (JS toggles .is-visible; GSAP owns transform when present) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
}
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Visually hidden (screen-reader only) ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Divider ---- */
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold) 50%, transparent);
  opacity: 0.5;
  border: none;
}

/* ---- Image frame with graceful placeholder (before real photography is added) ---- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--color-surface-sunken) 0%, var(--color-clay-light) 55%, var(--color-sage-light) 100%);
}
.media::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.5), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(94,122,107,0.18), transparent 50%);
}
.media img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-cinematic) var(--ease-out-expo);
}
.media--square { aspect-ratio: 1 / 1; }
.media--portrait { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 9; }
.media--tall { aspect-ratio: 3 / 4; }

/* Zoom-on-hover parent hook, used by cards */
.hover-zoom:hover .media img,
.hover-zoom:focus-within .media img { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
  .media img { transition: none; }
}