/* ══════════════════════════════════════
   PORTRAIT SESSIONS
   /portrait is a run of sessions, not a
   grid. Each session is one arrangement.
   ══════════════════════════════════════ */

.portrait-sessions {
  padding: 0 var(--section-padding) 120px;
  display: flex;
  flex-direction: column;
  /* Sessions stand well apart; the lines inside one sit close. That contrast
     is what makes a session read as a single unit. */
  gap: 128px;
}

/* The container already holds the page's side padding; these are <section>
   elements, so the global `section { padding: 120px var(--section-padding) }`
   in hero.css would otherwise inset every arrangement a second time. */
.portrait-session { padding: 0; }

/* ── Session heading ── */

.portrait-session-head {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.portrait-session-mark {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.portrait-session-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--line-faint);
}

.portrait-session-no {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 300;
  font-style: italic;
  line-height: 0.9;
  color: var(--text-strong);
}

.portrait-session-text { min-width: 0; }

.portrait-session-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  color: var(--text-strong);
}

/* ── The arrangement ── */

.portrait-session-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.portrait-line {
  display: flex;
  gap: 28px;
  /* Frames are sized by weight, so they end at different heights; align-items
     is the default each frame's own alignment overrides. */
  align-items: flex-start;
}

.portrait-frame {
  /* --frame-weight is the frame's share of the line: grow against a zero
     basis, so a weight of 4 beside a weight of 2 is twice as wide. */
  flex: var(--frame-weight, 2) 1 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

.portrait-frame.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Where the frame sits in a line taller than itself. Photographs hung at
   three different heights are what stop a line reading as a row of tiles. */
.portrait-frame[data-align="center"] { align-self: center; }
.portrait-frame[data-align="bottom"] { align-self: flex-end; }

/* A single-frame line is a held pause, not a full-bleed banner: it keeps to
   part of the measure and alternates which edge it sits against. */
.portrait-line[data-count="1"] .portrait-frame { flex: 0 1 46%; }
.portrait-line[data-count="1"] { justify-content: flex-start; }
.portrait-session-body > .portrait-line[data-count="1"]:nth-child(even) { justify-content: flex-end; }

/* Holds a plausible box while the photograph is still coming down the wire —
   the frame is a flex item with no intrinsic height until the image lands.
   Dropped on load so the real aspect ratio takes over. */
.portrait-frame:not(.loaded) { aspect-ratio: 3 / 4; }

.portrait-frame img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.4s ease;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.portrait-frame.loaded img { opacity: 1; }
.portrait-frame:hover img { transform: scale(1.03); }

/* A frame with no photograph behind it still holds its place in the
   arrangement — the studio shows it as a slot to fill. */
.portrait-frame.is-empty,
.portrait-frame.is-broken {
  cursor: default;
  aspect-ratio: 3 / 4;
}

/* Arrived from a featured photo on the home page (/portrait#photo-{id}) */
.portrait-frame.deep-linked { animation: deep-link-pulse 2.6s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .portrait-frame {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .portrait-frame img { transition: opacity 0.2s ease; }
  .portrait-frame:hover img { transform: none; }
}

/* ── Phones ──
   Four frames across a phone is four thumbnails. The line wraps instead, and
   the weights decide what wraps: a wide frame takes the full measure, the
   narrow ones pair up. Alignment still varies within each wrapped row, so the
   arrangement survives the fold. */
@media (max-width: 768px) {
  .portrait-sessions { padding: 0 var(--section-padding) 80px; gap: 72px; }

  /* A number and a title fit one line on a phone; only a long title wraps. */
  .portrait-session-head {
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
  }
  .portrait-session-no { font-size: 34px; }

  .portrait-session-body { gap: 10px; }
  .portrait-line { flex-wrap: wrap; gap: 10px; }
  /* No grow: a frame keeps its measure rather than stretching to fill,
     which is what preserves the arrangement's unevenness on a phone. */
  .portrait-frame { flex: 0 1 calc(50% - 5px); }

  /* The line's widest frame leads on a phone. In document order it sits
     mid-line, so the half before it wrapped onto a row of its own with a
     dead hole beside it; pulled to the front, the lead takes the full
     measure and the halves pair up beneath it. */
  .portrait-frame[data-span="full"] { order: -1; flex-basis: 100%; }

  /* A pair staggers diagonally — each frame takes ~2/3 of the measure, one
     off the left edge, one off the right — instead of shrinking into two
     level thumbnails. */
  .portrait-line[data-count="2"] .portrait-frame { flex-basis: 64%; }
  .portrait-line[data-count="2"] .portrait-frame:last-child { margin-left: auto; }

  /* Four-frame lines leave one half over after the pair; it widens and hangs
     from the right edge rather than sitting under the pair's left column. */
  .portrait-line[data-count="4"] .portrait-frame:last-child { flex-basis: 64%; margin-left: auto; }

  .portrait-line[data-count="1"] .portrait-frame { flex-basis: 72%; }
}