/* ==========================================================================
   /learning — "See what learning looks like here". A calm, ruled notebook.
   Each moment: the words on one side, its photos as a stacked pile that
   UNFOLDS into the real sequence, in the order the camera caught it.
   ========================================================================== */

.learning-page {
  background-color: #FFFEFA;
  background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(82, 195, 242, .16) 35px 36px);
}

.ln-head { padding-bottom: var(--s7); }
.ln-head__title { margin-top: var(--s4); max-width: 15ch; }
.ln-head__lead { margin-top: var(--s4); max-width: 54ch; }

.ln-list { display: grid; gap: var(--s9); padding-bottom: var(--s6); counter-reset: ln; }
.ln-m { counter-increment: ln; display: grid; gap: var(--s6); padding-top: var(--s6); border-top: 2px solid var(--ink); position: relative; scroll-margin-top: 100px; }
.ln-m::before {
  content: counter(ln, decimal-leading-zero); position: absolute; right: 0; top: -.62em;
  padding-left: 12px; background: #FFFEFA;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--m);
}

/* ---- The words ---- */
.ln-m__kicker { font: 800 var(--fs-label)/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--m); }
.ln-m__title { margin-top: 8px; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); letter-spacing: -.04em; line-height: 1.05; max-width: 16ch; }
.ln-m__place { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; color: var(--text-2); }
.ln-m__place .i { width: 16px; height: 16px; }
.ln-m__lead { margin-top: var(--s4); font-size: 1.12rem; line-height: 1.5; max-width: 40ch; }
.ln-notes { margin-top: var(--s5); display: grid; gap: var(--s4); }
.ln-notes div { padding-left: 14px; border-left: 4px solid var(--m); }
.ln-notes dt { font: 800 .72rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ln-notes dd { margin: 4px 0 0; font-size: 1.02rem; line-height: 1.5; max-width: 42ch; }

.ln-unfold {
  margin-top: var(--s6); display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: var(--r-pill); background: var(--m); color: #fff; cursor: pointer;
  font: 700 1rem/1 var(--font-body); box-shadow: var(--gloss), var(--sh-1);
}
.ln-unfold:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.ln-unfold__less, .ln-m.is-open .ln-unfold__more { display: none; }
.ln-m.is-open .ln-unfold__less { display: inline; }

/* ---- The photos: a stacked pile... ---- */
.ln-strip { position: relative; }
.ln-frame { margin: 0; }
.ln-frame__media { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--m); box-shadow: 0 0 0 6px #fff, var(--sh-2); aspect-ratio: 4 / 5; }
.ln-frame__media img, .ln-frame__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ln-frame__film {
  position: absolute; left: 12px; top: 12px; padding: .35em .75em; border-radius: var(--r-pill);
  background: rgba(27, 26, 51, .78); color: #fff; font: 700 .72rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
.ln-frame figcaption { display: grid; gap: 4px; margin-top: var(--s4); }
.ln-frame time { font: 800 .72rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--m); }
.ln-frame figcaption span { font-size: .98rem; line-height: 1.45; }

.ln-m--seq:not(.is-open) .ln-strip { width: min(100% - 24px, 440px); margin-bottom: 24px; }
.ln-m--seq:not(.is-open) .ln-frame:not(:first-child) { position: absolute; inset: 0 0 auto 0; z-index: -1; pointer-events: none; }
.ln-m--seq:not(.is-open) .ln-frame:nth-child(2) { rotate: 3.5deg; translate: 12px 6px; }
.ln-m--seq:not(.is-open) .ln-frame:nth-child(3) { rotate: -3deg; translate: -8px 12px; }
.ln-m--seq:not(.is-open) .ln-frame:nth-child(n+4) { rotate: 6deg; translate: 20px 16px; }
.ln-m--seq:not(.is-open) .ln-frame:not(:first-child) figcaption { visibility: hidden; }

/* ...that unfolds into the real sequence */
.ln-m.is-open .ln-strip {
  display: flex; gap: var(--s5); overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter) var(--s5); scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.ln-m.is-open .ln-frame { flex: none; width: min(78vw, 320px); scroll-snap-align: start; }
.ln-m.is-open .ln-frame__media { aspect-ratio: 9 / 14; }
.ln-strip__count { display: none; }
.ln-m.is-open .ln-strip__count { display: inline-block; margin: var(--s4) 0 0 12px; padding: .45em .9em; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 700 .8rem/1 var(--font-body); vertical-align: middle; }

/* The unfold is a real move, not a jump: the pile is shuffled like cards
   and each photo is dealt to its place (learning.js, Web Animations). */
.ln-strip { isolation: isolate; }

@media (min-width: 1024px) {
  .ln-m { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .ln-m__text { position: sticky; top: 110px; }
  .ln-m.is-open { grid-template-columns: 1fr; }
  .ln-m.is-open .ln-m__text { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); }
  .ln-m.is-open .ln-m__text > :nth-child(-n+4) { grid-column: 1; }
  .ln-m.is-open .ln-notes { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .ln-m.is-open .ln-unfold { grid-column: 1; justify-self: start; }
  .ln-m.is-open .ln-strip { margin-inline: 0; padding-inline: 0; }
  .ln-m.is-open .ln-frame { width: 300px; }
}

.ln-frame img:not([src]) { visibility: hidden; }