/* ==========================================================================
   LumaSKIN Clinic - Layout
   Container, sections, bento grid, image placeholders.
   ========================================================================== */

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

.container--narrow {
  max-width: 880px;
}

.container--mid {
  max-width: 1080px;
}

/* ---- Section padding utilities ---- */
.section {
  padding-block: var(--space-section);
}

.section--sm {
  padding-block: var(--space-section-sm);
}

.section--cream { background: var(--luma-cream); }
.section--cream-mid { background: var(--luma-cream-mid); }
.section--pearl { background: var(--luma-pearl); }
.section--obsidian { background: var(--luma-obsidian); }

/* ---- 12 column bento grid ---- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-gap);
}

/* span helpers */
.col-1-8 { grid-column: 1 / 9; }
.col-9-12 { grid-column: 9 / 13; }
.col-6a { grid-column: span 6; }
.col-1-4 { grid-column: 1 / 5; }
.col-5-12 { grid-column: 5 / 13; }
.col-1-7 { grid-column: 1 / 8; }
.col-8-12 { grid-column: 8 / 13; }

/* ---- Flex utilities ---- */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: var(--space-gap); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* ==========================================================================
   Image Placeholders - global component
   <div class="img-placeholder" data-label="LABEL"></div>
   Label rendered via ::after pseudo-element.
   ========================================================================== */

.img-placeholder {
  position: relative;
  width: 100%;
  background: var(--ph-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
}

.img-placeholder::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--luma-umber);
  line-height: 1.5;
}

/* Mid-tone variant */
.img-placeholder--mid {
  background: var(--ph-mid);
}

/* Dark variant */
.img-placeholder--dark {
  background: var(--ph-dark);
}

.img-placeholder--dark::after {
  color: var(--luma-gold);
}

/* ---- Aspect ratio variants ---- */
.ph-16-9 { aspect-ratio: 16 / 9; }
.ph-4-5 { aspect-ratio: 4 / 5; }
.ph-3-4 { aspect-ratio: 3 / 4; }
.ph-4-3 { aspect-ratio: 4 / 3; }
.ph-3-2 { aspect-ratio: 3 / 2; }
.ph-1-1 { aspect-ratio: 1 / 1; }
.ph-2-3 { aspect-ratio: 2 / 3; }
.ph-21-9 { aspect-ratio: 21 / 9; }
.ph-fill { height: 100%; }

/* Avatar placeholder — rounded square (squircle), less generic than a circle */
.img-placeholder--circle {
  border-radius: 28%;
  aspect-ratio: 1 / 1;
}

.img-placeholder--circle::after {
  font-size: 9px;
  letter-spacing: 0.1em;
}

/* ---- Real media dropped into a placeholder ----
   An <img> or <video> child fills the placeholder and hides the label. */
.img-placeholder > img,
.img-placeholder > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.img-placeholder:has(> img)::after,
.img-placeholder:has(> video)::after {
  display: none;
}

/* Section heading block */
.section-head {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head--center {
  text-align: center;
  margin-inline: auto;
  max-width: 640px;
}

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