/* ==========================================================================
   FRONTGRADE  ·  fg2 PRODUCT CATALOG
   The catalog template's own layer: the hero band, the component bands and
   the editor prose inside them. Requires tokens.css and components.css to be
   loaded first.

   NO KIT RULE IS REDEFINED HERE. This file used to strengthen one,
   .fg-media-band__scrim, because the hero was a photographic band and the
   copy's contrast depended on whatever picture an editor had uploaded. The
   header is now the sitewide contract's drawn band, page-header.css, whose
   ground is a fixed set of values rather than a photograph, so the scrim it
   carries needs no floor raised under it and the arithmetic that used to sit
   in section 1 has nothing left to guard.

   Every colour below is a token, and every new pair carries its computed
   WCAG 2.1 ratio, derived the same way tokens.css derives its own.
   ========================================================================== */

/* ==========================================================================
   1. THE PAGE HEADER

   THE HEADER IS page-header.css's, NOT THIS FILE'S. What used to live in this
   section drew a photographic band: a three layer scrim whose flat bottom
   layer was measured against a pure white pixel so that no picture an editor
   uploaded could put the copy under 4.5:1, the well that picture sat in, and
   the system breadcrumb restyled to a 12px uppercase strip. All three are
   gone with the picture. The contract's ground is drawn, so there is no
   photograph to guard the copy against, and the trail is the contract's own
   14px treatment.

   THE HERO IMAGE FIELD IS NOT READ AT ALL. field_background_hero_image is
   still on the bundle and still populated; the template no longer renders it,
   so placeholder2400-8.jpg, the one shared stock file a large part of the
   bundle pointed at, is not requested by any catalog page.
   ========================================================================== */

/* ==========================================================================
   2. BANDS
   The body is the node's components, one band each, in the editor's order.
   .fg-bands carries the alternation and the hairline between them, so this
   pattern names no surface of its own.
   ========================================================================== */

/* The support band closes the body, and the closing call to action follows
   it immediately. Dropping its lower padding keeps the two from reading as
   two separate closings with a gap between them. */
.fg-catalog__band--support { padding-bottom: var(--section-y-sm); }

/* THE SUPPORT BAND'S BUTTON LABELS ARE EDITORIAL, so one of them may be a
   single unbroken string: a page in this bundle carries a pasted web address
   in a button title today. The kit's stacking modifier lets a label wrap at
   its spaces, and a string with no spaces needs the break to be allowed
   anywhere or it runs past the button it sits in. The rule is scoped to this
   band so no other button in the system changes how it breaks.            */
.fg-catalog__actions .fg-btn { overflow-wrap: anywhere; max-width: 100%; }

/* ==========================================================================
   3. EDITOR PROSE
   What the components carry is rich text written in the site's editor, so the
   elements below are the ones that are actually in this content rather than a
   general reset: headings h2 to h6, paragraphs, lists, rules, links, inline
   images and data tables. Everything is drawn on the band surfaces, which are
   --surface-base and --surface-raised, and the ratios quoted are the lower of
   the two.
   ========================================================================== */

/* EVERY ELEMENT BELOW NAMES ITS OWN COLOUR AND ITS OWN MARGINS, and that is
   not belt and braces. The site's existing stylesheet is attached on every
   page of the site, this one included, and it carries element rules written
   for the white ground: body p sets #121212 at 20px with 1rem margins, body a
   sets #303030, and body h1 to h4 set their own size and margins. Those
   selectors are more specific than an inherited colour, so a block that only
   set a colour on this wrapper would render its paragraphs in near black on
   the near black band. The article template's body copy answers the same
   rules the same way; this is that solution applied to catalog prose.       */
.fg-catalog__prose { color: var(--text-muted); }               /* 5.31:1  AA */
.fg-catalog__prose > * + * { margin-top: var(--space-5); }

/* The centred variant. The editor sets alignment per block and roughly two
   thirds of these pages centre their opening block, so the setting is carried
   rather than flattened. The measure is centred with it, and tables and
   figures inside it stay left aligned because centred data is unreadable. */
.fg-catalog__prose--center { margin-inline: auto; text-align: center; }
.fg-catalog__prose--center table,
.fg-catalog__prose--center td,
.fg-catalog__prose--center th { text-align: left; }
.fg-catalog__prose--center ul,
.fg-catalog__prose--center ol { display: inline-block; text-align: left; }

/* --- Headings ------------------------------------------------------------
   The editor's h2 opens a block and is the display face at the section size;
   h3 to h6 step down to the body face, because below the section size the
   condensed display face at small sizes reads as a label rather than as a
   heading. All of them take --text-display, 17.08:1 at worst.             */
.fg-catalog__prose h2,
.fg-catalog__prose h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--text-display);
  text-transform: uppercase;
  text-wrap: balance;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}
.fg-catalog__prose h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
}
.fg-catalog__prose h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
.fg-catalog__prose h4,
.fg-catalog__prose h5,
.fg-catalog__prose h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--text-primary);                                 /* 15.47:1 AAA */
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.fg-catalog__prose > :first-child { margin-top: 0; }

.fg-catalog__prose p {
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  color: var(--text-muted);                                   /* 5.31:1   AA */
  margin-block: 0;
  text-wrap: pretty;
}
.fg-catalog__prose p + p { margin-top: var(--space-5); }

/* --- Lists ---------------------------------------------------------------
   The markers are the accent, which is a 3:1 non-text minimum and clears it
   at 4.98:1 on the raised band. A list item on these pages is often a single
   linked category name, so the row spacing is set for scanning rather than
   for reading.                                                             */
.fg-catalog__prose ul,
.fg-catalog__prose ol {
  margin-block: 0;
  padding-inline-start: var(--space-6);
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  color: var(--text-muted);                                   /* 5.31:1   AA */
}
.fg-catalog__prose li { margin-top: var(--space-2); }
.fg-catalog__prose li::marker { color: var(--accent); }
.fg-catalog__prose li > p { margin: 0; font-size: inherit; line-height: inherit; }

/* --- Links ---------------------------------------------------------------
   Underlined as well as coloured, so the link is not signalled by colour
   alone. --accent measures 4.98:1 on the raised band, which clears AA for
   text at any size.                                                        */
.fg-catalog__prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: var(--t-color);
}
.fg-catalog__prose a:hover { color: var(--text-primary); }

.fg-catalog__prose strong,
.fg-catalog__prose b { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* The editor's rule separates two blocks inside one component, so it takes
   the hairline the bands use between themselves rather than a second weight. */
.fg-catalog__prose hr {
  height: 0;
  margin-block: var(--space-8);
  border: 0;
  border-top: var(--border-hairline-w) solid var(--border-hairline);
}

.fg-catalog__prose img { max-width: 100%; height: auto; display: block; }

/* --- Data tables ---------------------------------------------------------
   Twenty one of these pages carry a specification table in their body copy,
   and a table is the one element here that can be wider than the column, so
   it scrolls inside its own box rather than pushing the page sideways. The
   header row sits one step up the surface ladder from the band:
     --text-primary on --surface-panel  14.55:1  AAA  header cells
     --text-muted   on --surface-panel   4.99:1  AA   data cells
   Row separation is the hairline, which is the same rule the bands use.    */
.fg-catalog__prose .fg-catalog__table-scroll,
.fg-catalog__prose table { display: block; overflow-x: auto; max-width: 100%; }
.fg-catalog__prose table {
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  white-space: normal;
}
.fg-catalog__prose thead,
.fg-catalog__prose tbody,
.fg-catalog__prose tr { display: table; width: 100%; table-layout: auto; }
.fg-catalog__prose th,
.fg-catalog__prose td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border-hairline-w) solid var(--border-hairline);
}
.fg-catalog__prose th {
  background: var(--surface-panel);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-chip);
}
.fg-catalog__prose td { color: var(--text-muted); }
.fg-catalog__prose td a { white-space: nowrap; }

/* ==========================================================================
   4. CATEGORY CARDS
   The kit card, with the category picture in the media slot and the category
   name as the whole-card link. Nothing here redefines a kit value; the two
   rules set the picture's shape and drop the card title to the body face,
   because a category name is a name rather than a headline.
   ========================================================================== */

.fg-catalog__card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-panel);
  border-bottom: var(--border-hairline-w) solid var(--border-hairline);
}
.fg-catalog__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --text-primary on --surface-raised 15.47:1 AAA, and the kit's own hover
   rule takes it to --accent at 4.98:1. */
.fg-catalog__card-title {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}

/* ==========================================================================
   5. FIGURES
   A picture the editor placed in the body, held to the reading measure so it
   sits with the prose around it rather than running the band's full width.
   ========================================================================== */

.fg-catalog__figure { max-width: var(--measure-prose); margin: 0; }
.fg-catalog__frame {
  overflow: hidden;
  background: var(--surface-panel);
  border: var(--border-hairline-w) solid var(--border-hairline);
}
.fg-catalog__frame img { display: block; width: 100%; height: auto; }
.fg-catalog__caption {
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-muted);                                   /* 5.31:1  AA */
}
.fg-catalog__caption p { margin: 0; }

/* ==========================================================================
   6. NARROW VIEWPORTS
   The kit already collapses the grid, and page-header.css steps the header
   band's own proportions down; the one rule here is what the kit has no way
   to know about.
   ========================================================================== */

@media (max-width: 640px) {
  /* A specification table cannot narrow past its own columns, so below this
     width the cell padding is the only thing left to give back. The table
     still scrolls inside its own box. */
  .fg-catalog__prose th,
  .fg-catalog__prose td { padding: var(--space-2) var(--space-3); }
}