/* Breadwinner v3 prototype: about.html page-only styles. Loaded after v3-port.css.
   Everything cross-cutting (c-page-head-meta, c-compare-ledger, c-prose-lists) lives in
   v3-port.css; this file only holds the wrinkles specific to this page: the stat ledger
   under the opening paragraphs, and the lead-in spacing in the "who" section. */

.about-stats { margin-top: var(--s-xl); max-width: 30rem; }

.lead-in { margin-right: 0.15em; }

.ingredient-tables { display: grid; gap: var(--s-2xl); margin-top: var(--s-lg); }

.ingredient-tables figcaption,
.ingredient-tables .ledger-table__label { font-weight: 600; }

.about-actions { display: flex; flex-wrap: wrap; gap: var(--s-md); }

.about-compare { margin-top: var(--s-xl); }

/* Two label photographs under the "Flip the packet" comparison: the front claim and the
   back proof, laid loose like the prints on /process, not a gallery. */
.about-label-prints { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--s-xl) var(--s-2xl); margin-top: var(--s-2xl); }
.about-label-prints__sticker { width: 100%; max-width: 10rem; }
.about-label-prints__panel { width: 100%; max-width: 14rem; }
/* Phone: the sticker (10rem) and the panel (14rem) are different declared sizes, so
   flex-wrap's hypothetical-size check never breaks them onto their own lines at 360-390px
   and they sit side by side, one tiny, one large. Force the column and match their widths. */
@media (max-width: 599.98px) {
  .about-label-prints { flex-direction: column; align-items: center; }
  .about-label-prints__sticker,
  .about-label-prints__panel { max-width: 18rem; }
}

.about-cta { text-align: left; }

/* Phone: the two label-comparison tables and the three ingredient tables are plain
   .ledger-table (th | td, auto column widths, ~45/55 split). At 360-390px that gave each
   column under 150px, so long values ("stripped of fibre, nutrients and self-respect",
   "shortcuts for weak flour and short fermentation") wrapped 3-4 lines. Stack label above
   value, full row width, the same pattern v3.css's own .ledger-table--stack uses -- scoped
   here instead of adding that shared class, so the >=600px layout (already fine) is untouched. */
@media (max-width: 599.98px) {
  .about-compare .ledger-table,
  .about-compare .ledger-table tbody,
  .about-compare .ledger-table tr,
  .about-compare .ledger-table th,
  .about-compare .ledger-table td,
  .ingredient-tables .ledger-table,
  .ingredient-tables .ledger-table tbody,
  .ingredient-tables .ledger-table tr,
  .ingredient-tables .ledger-table th,
  .ingredient-tables .ledger-table td { display: block; }
  .about-compare .ledger-table tr,
  .ingredient-tables .ledger-table tr { padding: var(--row-pad) 0; border-bottom: var(--line-w) solid var(--rule); }
  .about-compare .ledger-table tr:last-child,
  .ingredient-tables .ledger-table tr:last-child { border-bottom: 0; }
  .about-compare .ledger-table th,
  .about-compare .ledger-table td,
  .ingredient-tables .ledger-table th,
  .ingredient-tables .ledger-table td { padding: 0; border: 0; text-align: left; }
  .about-compare .ledger-table td,
  .ingredient-tables .ledger-table td { margin-top: var(--s-2xs); white-space: normal; }
  /* The caption was a table-caption box sized to its text, so "As printed on our Daily Bread
     pack" wrapped in a ~120px column above the full-width rows. Make it a full-width block. */
  .about-compare .ledger-table caption { display: block; width: 100%; text-align: left; }
}

/* The front-sticker print (narrower figure, 10rem) is the only one of the two label
   photographs whose caption text actually fills the full figure width -- the frame's own
   border insets the picture by 2 * --print-edge, so the caption (no border, spans the figure)
   read 9.4px wider than the photo it sits under. Match it to the framed picture's width. */
.about-label-prints__sticker .print__caption {
  max-width: calc(100% - 2 * var(--print-edge, 0.375rem));
}

@media (max-width: 599.98px) {
  .ingredient-tables .ledger-table { width: 100%; }
  .ingredient-tables caption { display: block; width: 100%; text-align: left; }
}