/* ==========================================================================
   manmohansamal.in — Layout compositions & responsive behaviour
   Mobile-first. Layouts are recomposed at each breakpoint, not merely shrunk.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Base (mobile) — every composition is a single readable column
   -------------------------------------------------------------------------- */
.split,
.split--reverse,
.duo,
.trio,
.quartet,
.hero-home,
.hero-home__body,
.about-open,
.leader-grid,
.career-grid,
.contrib-grid,
.contact-grid,
.media-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}

.stack-sm { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.stack-md { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.stack-lg { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* Home hero (mobile: portrait first, then text) */
.hero-home { gap: var(--sp-5); padding-block: clamp(2.5rem, 1.5rem + 4.5vw, 4.5rem) clamp(3rem, 2rem + 5vw, 6rem); }
.hero-home__figure { order: -1; max-width: 24rem; margin-inline: auto; width: 100%; }
.hero-home__title { margin-bottom: var(--sp-3); }
.hero-home__desc {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  margin-bottom: var(--sp-3);
  line-height: 1.7;
}
.hero-home__cue { margin-top: var(--sp-5); }
.hero-home__meta {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.hero-home__meta dt { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mineral); margin-bottom: 0.3rem; }
.hero-home__meta dd { margin: 0; font-size: var(--step--1); color: var(--ink); line-height: 1.55; }

/* Full-bleed visual break */
.visual-break { position: relative; background: var(--aubergine); }
.visual-break__media { max-width: 68rem; margin-inline: auto; }
.visual-break__media img { width: 100%; height: auto; }

/* Contributions: data-led rows */
.datarow {
  border-top: 1px solid var(--line);
  padding: var(--sp-4) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.datarow:last-of-type { border-bottom: 1px solid var(--line); }
.datarow__no { font-family: var(--font-display); font-size: 1.35rem; color: var(--terracotta); line-height: 1; }
.datarow__title { font-family: var(--font-display); font-size: var(--step-2); color: var(--aubergine); line-height: 1.22; margin-bottom: var(--sp-2); }
.datarow__body { max-width: 42em; }

/* Leadership: typographic statement blocks */
.creed { border-top: 2px solid var(--aubergine); padding-top: var(--sp-4); }
.creed__no { font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; color: var(--terracotta-deep); text-transform: uppercase; display: block; margin-bottom: var(--sp-3); }
.creed__t { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; color: var(--aubergine); margin-bottom: var(--sp-3); }
.panel--dark .creed { border-top-color: var(--terracotta-light); }
.panel--dark .creed__no { color: var(--terracotta-light); }
.panel--dark .creed__t { color: var(--parchment); }

/* Journey preview strip on home */
.preview-rail { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.preview-rail__cell { background: var(--bg); padding: var(--sp-4) var(--sp-3); }
.preview-rail__yr { font-family: var(--font-display); font-size: var(--step-2); color: var(--terracotta-deep); line-height: 1; display: block; margin-bottom: 0.6rem; }
.preview-rail__t { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.28; color: var(--aubergine); display: block; margin-bottom: 0.5rem; }
.preview-rail__d { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.55; }

/* Media page intro */
.media-intro__count { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 5vw, 5.5rem); line-height: 0.9; color: var(--aubergine); }

/* Contact aside card */
.contact-card { background: var(--parchment-hi); border: 1px solid var(--line-soft); padding: clamp(1.25rem, 3vw, 2.25rem); }

/* --------------------------------------------------------------------------
   B. >= 480px — small phones to large phones
   -------------------------------------------------------------------------- */
@media (min-width: 30em) {
  .hero-home__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger__row { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--sp-4); }
  .datarow { grid-template-columns: 3rem 1fr; gap: var(--sp-3); }
  .preview-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social__icon { width: 2.9rem; height: 2.9rem; }
}

/* --------------------------------------------------------------------------
   C. >= 600px — large phones / small tablets
   -------------------------------------------------------------------------- */
@media (min-width: 37.5em) {
  .mosaic { columns: 2; }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quartet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pager__link { padding: var(--sp-5) var(--sp-4); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .sources__list { columns: 2; }
  .chrono__trigger { grid-template-columns: 5.5rem 1fr 1.75rem; }
  .chrono__panel-inner { grid-template-columns: 5.5rem 1fr; }
  .chrono__year { font-size: 1.7rem; }
  .footer__base { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   D. >= 768px — tablets
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
  :root { --nav-h: 5.25rem; }

  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-6); }
  .split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-6); }
  .split--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-6); }
  .split--narrow-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: var(--sp-6); }

  .hero-home {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }
  .hero-home__figure { order: 0; max-width: none; margin-inline: 0; }
  .hero-home__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .fact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preview-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .preview-rail__cell { padding: var(--sp-5) var(--sp-3); }

  .datarow { grid-template-columns: 4rem minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
  .datarow__no { font-size: 1.6rem; }

  .chronicle::before { left: 6.5rem; }
  .chronicle__item { padding-left: 8.75rem; }
  .chronicle__item::before { left: 6.0625rem; }
  .chronicle__year {
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 5.5rem;
    text-align: right;
    margin-bottom: 0;
  }
  .chronicle__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }

  .contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-6); }
  .media-intro { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: center; }

  .lightbox__img { max-height: 72vh; }
}

/* --------------------------------------------------------------------------
   E. >= 900px — small laptops: index rail, three-column mosaic, wider footer
   -------------------------------------------------------------------------- */
@media (min-width: 56.25em) {
  .railed { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--sp-5); }
  .rail { display: block; position: sticky; top: calc(var(--nav-h) + 2rem); }

  .mosaic { columns: 3; }
  .quartet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .pager { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sources__list { columns: 3; }

  .split--offset > :first-child { padding-right: var(--sp-4); }
  .figure--pull-right { margin-right: calc(-1 * clamp(0rem, 4vw, 3rem)); }
  .figure--pull-left { margin-left: calc(-1 * clamp(0rem, 4vw, 3rem)); }

  .sticky-side { position: sticky; top: calc(var(--nav-h) + 2.5rem); }
}

/* --------------------------------------------------------------------------
   E2. >= 1120px — the nine-item horizontal navigation only appears when it
       provably fits; below this width the compact menu is used instead.
   -------------------------------------------------------------------------- */
@media (min-width: 70em) {
  .site-header.is-stuck .nav { min-height: 4.25rem; }
  .nav__list { display: flex; flex-wrap: nowrap; }
  .nav-toggle { display: none; }
  .nav-drawer { display: none; }
}

@media (min-width: 78em) {
  .nav__aside { display: flex; }
}

@media (min-width: 96em) {
  .brand__sub { display: block; }
  .brand__rule { display: block; }
}

/* --------------------------------------------------------------------------
   F. >= 1024px — laptops, iPads landscape
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .nav__link { font-size: 0.735rem; letter-spacing: 0.15em; }
  .hero-home { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: clamp(3rem, 5vw, 5.5rem); }
  .chronicle::before { left: 9rem; }
  .chronicle__item { padding-left: 11.5rem; }
  .chronicle__item::before { left: 8.5625rem; }
  .chronicle__year { width: 7.5rem; font-size: var(--step-3); }
  .datarow { grid-template-columns: 5rem minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-6); }
  .chrono__trigger { grid-template-columns: 7rem 1fr 2rem; padding-block: 1.6rem; }
  .chrono__panel-inner { grid-template-columns: 7rem 1fr; }
  .chrono__panel { padding-bottom: 2rem; }
  .ledger__row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   G. >= 1280px — standard desktop
   -------------------------------------------------------------------------- */
@media (min-width: 80em) {
  :root { --shell: 80rem; }
  .railed { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sp-6); }
  .mosaic { columns: 3; }
  .split--wide { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   H. >= 1600px — large desktop / iMac
   -------------------------------------------------------------------------- */
@media (min-width: 100em) {
  :root { --shell: 86rem; --shell-wide: 104rem; }
  .mosaic { columns: 4; }
}

/* --------------------------------------------------------------------------
   I. Short landscape phones — reduce vertical drama
   -------------------------------------------------------------------------- */
@media (max-height: 30em) and (orientation: landscape) {
  :root { --nav-h: 3.75rem; --section-y: 2.5rem; }
  .hero-home { padding-block: 2rem 2.5rem; }
  .nav-drawer { padding-block: var(--sp-3) var(--sp-5); }
  .nav-drawer__link { font-size: 1.15rem; padding: 0.7rem 0.25rem; min-height: 2.75rem; }
  .access-body { align-items: flex-start; padding-block: 2rem; }
  .lightbox__img { max-height: 62vh; }
}

/* --------------------------------------------------------------------------
   J. Fine-grained guards against overflow at very small widths (320px)
   -------------------------------------------------------------------------- */
@media (max-width: 22.5em) {
  :root { --nav-h: 4.25rem; }
  .brand__mark { font-size: 1.05rem; }
  .btn { padding: 0.85rem 1.15rem; font-size: 0.67rem; letter-spacing: 0.12em; }
  .chrono__trigger { grid-template-columns: 3.4rem 1fr 1.5rem; gap: 0.75rem; }
  .chrono__panel-inner { grid-template-columns: 1fr; }
  .chrono__year { font-size: 1.2rem; }
  .contact-block__val { font-size: 1.15rem; }
  .lightbox__nav { width: 2.5rem; height: 3rem; }
}

/* Long unbroken strings (emails, URLs) must never force a horizontal scrollbar */
.contact-block__val,
.footer__contact,
.sources__list li,
.prose { overflow-wrap: break-word; word-wrap: break-word; }

/* Hover affordances only where hover is genuinely available */
@media (hover: none) {
  .mosaic__item:hover { transform: none; }
  .chrono__trigger:hover { padding-left: 0.25rem; background: none; }
  .chrono__trigger[aria-expanded="true"] { padding-left: 0.85rem; background: var(--parchment-hi); }
}

/* Archive entries: reference column separates from the record at tablet width */
@media (min-width: 48em) {
  .entry { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sp-5); }
}
@media (min-width: 64em) {
  .entry { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--sp-6); }
  .register { min-width: 0; }
}