/* ============================================================
   PLACEHOLDERS
   For imagery we do not have yet. Deliberately obvious: a
   hatched field carrying its own label, so a placeholder can
   never quietly ship as finished artwork.

   Usage:
     <div class="ph ph-16x9" data-ph="Classroom photograph"></div>
     <div class="ph ph-portrait" data-ph="Figure portrait"></div>

   THIS FILE DOES NOT GO TO WEBFLOW. Every .ph must be replaced
   with real media before translation. Find them with:
     grep -rn 'class="ph' build/
   ============================================================ */

.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  background-color: var(--ink);
  /* Diagonal hatch — reads as "not real" at any size. */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(232, 222, 197, 0.07) 0,
    rgba(232, 222, 197, 0.07) 1px,
    transparent 1px,
    transparent 11px
  );
  border: 1px solid var(--line-strong);
}

/* The label comes from the data attribute, so the markup carries
   its own description of what belongs here. */
.ph::after {
  content: attr(data-ph);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-mute);
  text-align: center;
  padding: 12px 18px;
  max-width: 80%;
  line-height: 1.6;
}
.ph[data-ph=""]::after,
.ph:not([data-ph])::after { content: "Placeholder"; }

/* Aspect ratios. aspect-ratio is well supported and collapses
   cleanly; no padding-top hacks needed. */
.ph-16x9    { aspect-ratio: 16 / 9; }
.ph-4x3     { aspect-ratio: 4 / 3; }
.ph-1x1     { aspect-ratio: 1 / 1; }
.ph-portrait{ aspect-ratio: 3 / 4; }
.ph-wide    { aspect-ratio: 21 / 9; }

/* Fills its parent instead of imposing a ratio — for a .scene-bg,
   where the section already sets the height. */
.ph-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: none;
}

/* A placeholder standing in for a logo in .logorow. */
.ph-logo {
  aspect-ratio: 5 / 2;
  background-color: transparent;
}