/* ================================================================
   ALEX COANDA — PORTFOLIO 2026
   PLATES — empty image containers.
   Every plate is a bare slot that receives a ready-made mockup
   image 1:1 (edge to edge, no padding). Schematic CSS devices were
   retired 2026-07-27 — see git history if ever needed again.
   ================================================================ */

.plate {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.plate img,
.plate video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* fullscreen inherits the plate's cover-crop — switch to contain so a
   4:5 cut plays full-height with pillarboxing instead of cropped to
   the screen. Separate rules: an unknown pseudo kills a whole list. */
.plate video:fullscreen { object-fit: contain; }
.plate video:-webkit-full-screen { object-fit: contain; }

/* optional caption chip — not used while plates are empty, kept for
   content-fill time (orange tick + mono label, bottom-left) */
.plate__tag {
  position: absolute;
  left: 0.9rem;
  bottom: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
}
.plate__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Aspect helpers
---------------------------------------------------------------- */
.plate--16x10 { aspect-ratio: 16 / 10; }
.plate--16x9 { aspect-ratio: 16 / 9; }
.plate--21x9 { aspect-ratio: 21 / 9; }
.plate--4x3 { aspect-ratio: 4 / 3; }
.plate--1x1 { aspect-ratio: 1; }
.plate--4x5 { aspect-ratio: 4 / 5; }
.plate--3x4 { aspect-ratio: 3 / 4; }
.plate--9x16 { aspect-ratio: 9 / 16; }

/* ----------------------------------------------------------------
   Browser frame — used ONLY by the M08 tall scroller: a fixed
   viewport the full-page screenshot scrubs through on scroll.
---------------------------------------------------------------- */
.dev-browser {
  width: min(100%, 900px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.dev-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--line);
}
.dev-browser__dots { display: flex; gap: 5px; }
.dev-browser__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #37352f;
}
.dev-browser__url {
  flex: 1;
  text-align: center;
  color: var(--muted);
  background: rgba(234, 232, 227, 0.04);
  padding: 0.25rem 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dev-browser--tall .dev-browser__view {
  /* doubled ceiling (was 680px); vh-bound so the frame still fits
     on screen — a frame taller than the viewport fights the scrub */
  height: clamp(500px, 90vh, 1360px);
  position: relative;
  overflow: hidden;
}
/* the full-page screenshot: replace the empty div with a tall <img>.
   faint rules visualize the scrub while the slot is empty. */
.dev-browser__page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 300%;
  will-change: transform;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(25% - 1px),
    var(--line) calc(25% - 1px),
    var(--line) 25%
  );
}
.dev-browser__page img { width: 100%; height: auto; display: block; }
/* once a real screenshot lands, the image defines the height —
   drop the placeholder floor + ruled background */
.dev-browser__page:has(img) {
  min-height: 0;
  background-image: none;
}