/* compact.css — compact-mode layout engine, loaded only when body.compact
 *
 * Philosophy: this file handles LAYOUT ONLY (flex/grid/widths/heights/gaps).
 * Typography, colors and base font come from w3.css + the inline <style>
 * block in deed/index.php. Don't re-declare font-family or background here.
 */

/* ============================================================
   ▼▼▼  TUNABLES — edit these to resize tiers & spacing  ▼▼▼
   Every absolute (px) size the compact engine uses is declared
   here. The rest of the file is logic that reads these vars.
   ============================================================ */
body.compact {
  /* --- Overall column (the "our-width" concept) --- */
  --our-width: clamp(600px, 68vw, 980px); /* min / preferred / max */
  --gap: 8px;                              /* space between cells */
  --page-max: 1400px;                      /* outer page cap */

  /* --- Text-only column width (2/3 of our-width by default) --- */
  --text-max-width: calc(var(--our-width) * 2 / 3);

  /* --- Small-tier cell height (A4, A5, Aux, Flying History) --- */
  --small-tier-h: 220px;

  /* --- Big-tier ceilings (A0 / A1) --- */
  --big-tier-max-h: 700px;                 /* cap on A0/A1 rendered height */

  /* --- G-row groups (-G[N]-) --- */
  --g-row-h: 220px;                        /* fixed row height */
  --g-row-gap: 4px;                        /* inner gap between group cells */

  /* --- Chapter banner --- */
  --chapter-banner-pad: 2px;

  /* --- Media cutoff below which everything collapses to full-width --- */
  /* (CSS vars cannot be used inside @media queries; if you change this
     number, also update the `@media (max-width: 820px)` block below) */
  --mobile-breakpoint: 820px;
}
/* ============================================================
   ▲▲▲  END TUNABLES — below here is layout logic  ▲▲▲
   ============================================================ */

/* Page wrapper — outer cap only, no typography */
body.compact .page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
}

/* Text containers: constrained to 2/3 of our-width so reading stays comfortable.
   Image/gallery containers stay at full --our-width (below). */
body.compact .md-content,
body.compact .chapter-text,
body.compact .intro-text,
body.compact .footer-text {
  max-width: var(--text-max-width);
  box-sizing: border-box;
}

/* Chapter label: ". [name]" rendered as a plain small paragraph. */
body.compact .chapter-label {
  margin: 22px 0 6px 0;
  font-size: 12px;
  line-height: 1.3;
}

/* ===== Gallery: hybrid tier layout ===== */
body.compact .gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap);
  margin: 10px 0 22px 0;
  max-width: var(--our-width);
  padding: 0 4px;
  box-sizing: border-box;
}
body.compact .gallery .gcell {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  padding: 2px;
  box-sizing: border-box;
  transition: transform .2s ease, filter .2s ease;
}
body.compact .gallery .gcell:hover {
  transform: translateY(-2px); filter: contrast(1.04);
}
body.compact .gallery .gcell img,
body.compact .gallery .gcell video {
  display: block;
  max-width: 100%;
}

/* Small tiers: unified height (see --small-tier-h) */
body.compact .gcell.fh img, body.compact .gcell.fh video,
body.compact .gcell.a4 img, body.compact .gcell.a4 video,
body.compact .gcell.a5 img, body.compact .gcell.a5 video,
body.compact .gcell.aux img, body.compact .gcell.aux video {
  height: var(--small-tier-h); width: auto;
}

/* Big tiers: width-based */
body.compact .gcell.a0, body.compact .gcell.a1 {
  flex-basis: 100%; width: 100%; text-align: left;
}
body.compact .gcell.a0 img, body.compact .gcell.a1 img,
body.compact .gcell.a0 video, body.compact .gcell.a1 video {
  width: auto; max-width: 100%; max-height: var(--big-tier-max-h); height: auto; margin: 0;
}

/* Paired A0/A1 portraits — marked by PHP as .pair-1 / .pair-2.
   First one is half-width. Second matches first's height, image stays bounded
   by --big-tier-max-h so it can never render "unbound" at full scale. */
body.compact .gcell.pair-1 {
  flex-basis: calc(50% - (var(--gap) / 2));
  width: calc(50% - (var(--gap) / 2));
}
body.compact .gcell.pair-1 img,
body.compact .gcell.pair-1 video {
  width: 100%; height: auto;
  max-height: var(--big-tier-max-h);
  object-fit: contain; margin: 0;
}
body.compact .gcell.pair-2 {
  flex-basis: auto;
  width: auto;
  align-self: stretch;
  max-width: calc(50% - (var(--gap) / 2));
}
body.compact .gcell.pair-2 img,
body.compact .gcell.pair-2 video {
  height: 100%;
  width: auto;
  max-height: var(--big-tier-max-h);
  max-width: 100%;
  object-fit: contain; margin: 0;
}

body.compact .gcell.a2, body.compact .gcell.a3 {
  flex-basis: calc(50% - var(--gap));
  width: calc(50% - var(--gap));
}
body.compact .gcell.a2 img, body.compact .gcell.a2 video,
body.compact .gcell.a3 img, body.compact .gcell.a3 video {
  width: 100%; height: auto;
}
body.compact .gcell.a2.p, body.compact .gcell.a3.p {
  flex-basis: calc(25% - var(--gap));
  width: calc(25% - var(--gap));
}

/* -Max- cells: pulled out of the gallery in PHP and rendered as a standalone
   .max-banner block that breaks out of the page wrapper to fill the viewport.
   Sits in the normal document flow (above/below galleries), no overlap. */
body.compact .max-banner {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  line-height: 0;
}
body.compact .max-banner img,
body.compact .max-banner video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Chapter banner (A0 image with Chapter flag) */
body.compact .chapter-banner {
  display: block; width: 100%; max-width: var(--our-width);
  padding: var(--chapter-banner-pad); margin: 10px 0 6px; box-sizing: border-box; line-height: 0;
}
body.compact .chapter-banner img { display: block; width: 100%; height: auto; }

/* G-row groups — justified rows: each cell gets width proportional to its
   aspect ratio so all cells share the same computed height. No cropping. */
body.compact .g-row {
  display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--g-row-gap);
  width: 100%; padding: 2px; margin: 4px 0; box-sizing: border-box;
  max-width: var(--our-width);
}
body.compact .g-row .gcell { flex-grow: var(--ar, 1.778); flex-basis: 0; min-width: 0; padding: 0; }
body.compact .g-row .gcell img,
body.compact .g-row .gcell video {
  width: 100%; height: auto; aspect-ratio: var(--ar, 1.778); display: block;
}

/* Divider / misc */
body.compact .divider-dots {
  letter-spacing: 3px; color: #999;
  margin: 14px 0 4px 4px; font-size: 11px; max-width: var(--our-width);
}

/* Mobile */
@media (max-width: 820px) {
  body.compact { --our-width: 100%; --text-max-width: 100%; }
  body.compact .page { padding: 6px; }
  body.compact .md-content, body.compact .chapter-text,
  body.compact .intro-text, body.compact .footer-text {
    max-width: 100%; padding: 6px 4px;
  }
  body.compact .gallery { gap: 6px; }
  body.compact .gallery .gcell,
  body.compact .gallery .gcell.pair-1,
  body.compact .gallery .gcell.pair-2 {
    flex-basis: 100% !important; width: 100% !important; max-width: 100% !important; padding: 3px;
  }
  body.compact .gallery .gcell img,
  body.compact .gallery .gcell video {
    width: 100% !important; height: auto !important;
    max-height: none !important; max-width: 100% !important; margin: 0 !important;
  }
  body.compact .g-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; height: auto; max-width: 100%; }
  body.compact .g-row.g3 { grid-template-columns: 1fr 1fr 1fr; }
  body.compact .g-row.g4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
  body.compact .g-row .gcell { width: 100% !important; height: auto; }
  body.compact .g-row .gcell img,
  body.compact .g-row .gcell video { height: auto !important; }
  body.compact .chapter-banner { margin: 6px 0 2px 0; }
}