/**
 * F1GMAT APU Theme · fg-browse.css
 * Browse index band — term navigation that closes an article
 * ("Browse MBA Essay Examples By Theme / Trait / Job Title").
 *
 * MARKUP CONTRACT
 *   <nav class="fg-browse" aria-labelledby="…">
 *     <div class="fg-browse__inner">        constrains to --fg-column-wide
 *       <p  class="fg-browse__kicker">      eyebrow, Arial caps
 *       <h2 class="fg-browse__title">       Georgia, hairline suppressed
 *       <section class="fg-browse__group">  one per vocabulary
 *         <h3 class="fg-browse__label">     + span.fg-browse__count
 *         <ul class="fg-browse__list fg-browse__list--theme|trait|role">
 *           <li class="fg-browse__item--top">  top three by count
 *             <a><span class="fg-browse__tile-label">
 *                <span class="fg-browse__tile-count">
 *           <li><a class="fg-browse__more">    escape hatch to the hub
 *
 * WHY A GRID AND NOT A TABLE
 *   The original blocks used three-column layout tables. A screen reader
 *   announced "table, 10 rows, 3 columns" before the first link, the last
 *   row left empty cells whenever the term count was not divisible by
 *   three, and the tap target was the text run rather than a box. The
 *   grid is repeat(auto-fill, minmax(160px, 1fr)), so column count follows
 *   the viewport and every tile clears the 44px WCAG 2.2 target size.
 *
 * CONTRAST (WCAG 2.2 AA, computed from the hex values in this file)
 *   Tile text and fills, on --fg-paper #FBFAF7, identical in both
 *   directions because each pair is the same two colours swapped:
 *     theme  gold-dark  #8A6B1F   4.79:1
 *     trait  teal       #0E7490   5.13:1
 *     role   plum       #5B4A6B   7.63:1
 *   Band text, on --fg-paper-aged #EDE5D1:
 *     kicker and count  #7A5E1B   4.86:1
 *   Gold-dark #8A6B1F is NOT used on the aged band: it measures 3.98:1
 *   there and fails AA for normal text. It is confined to tiles, which
 *   sit on paper. The .fg-browse__more tile therefore carries a paper
 *   background rather than a transparent one.
 *
 * BORDER WIDTHS
 *   1px throughout. Sub-pixel widths round to zero on 1x displays in some
 *   engines, which drops the tile grid's edges entirely. --fg-hairline
 *   #D4CFC4 is 1.49:1 against paper, faint enough to read as a hairline
 *   at a full pixel.
 *
 * SECURITY NOTE: this file styles author-entered markup from Custom Block
 * bodies and Views output. It adds no inline script or style, so it holds
 * under a strict CSP (script-src 'self'; style-src 'self').
 *
 * Palette variables come from style.css :root; each var() call carries a
 * literal fallback so the band degrades predictably if a token is renamed.
 */

/* BAND ----------------------------------------------------------------- */
.fg-browse {
  /* Width cap. --fg-column-wide is 880px, the reading measure for prose; a
     grid of short tiles is not a column of text, so the band runs wider.
     Retune with --fgb-max alone, or set it to none to fill the region. */
  --fgb-max: 1180px;
  width: 100%;
  max-width: min(var(--fgb-max), 100%);

  /* Left-aligned to the content column, not centred. The blocks above and
     below (author bio, job-title and industry lists) all sit flush left, so
     centring left the band looking pushed right on a wide screen. Use auto
     on both sides if those blocks are converted to this component. */
  margin: 48px auto 0 0;

  /* The band may sit in a flex region or follow a floated editorial image,
     either of which creates a shrink-to-fit context where max-width never
     engages. width: 100% states the intent; these cover the two causes. */
  align-self: stretch;
  clear: both;

  background: var(--fg-paper-aged, #EDE5D1);
  border-top: 2px solid var(--fg-ink, #1A1A1A);
  border-bottom: 1px solid var(--fg-hairline, #D4CFC4);
  padding: 32px 0 36px;
}

.fg-browse__inner {
  max-width: var(--fg-column-wide, 880px);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

.fg-browse__kicker {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #7A5E1B;
  margin: 0 0 4px;
}

/* style.css puts a border-bottom on every h2; the group labels carry the
   hairlines in this component, so it is dropped here. */
.fg-browse__title,
.fg-browse h2.fg-browse__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
  font-weight: 400;
  color: var(--fg-ink, #1A1A1A);
  line-height: 1.3;
  border-bottom: 0;
  padding-bottom: 0;
  margin: 0 0 24px;
}

/* GROUP ---------------------------------------------------------------- */
.fg-browse__group + .fg-browse__group {
  margin-top: 28px;
}

.fg-browse__label,
.fg-browse h3.fg-browse__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-ink-muted, #525252);
  border-bottom: 1px solid var(--fg-hairline, #D4CFC4);
  padding-bottom: 6px;
  margin: 0 0 12px;
}

/* Border rather than text-decoration: the uppercase Arial label keeps its
   letter-spacing without a ragged underline. */
.fg-browse__label a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--fg-hairline, #D4CFC4);
}

.fg-browse__label a:hover,
.fg-browse__label a:focus-visible {
  color: var(--fg-teal-dark, #0B5A70);
  border-bottom-color: var(--fg-teal-dark, #0B5A70);
}

.fg-browse__label a:focus-visible {
  outline: 2px solid var(--fg-ink, #1A1A1A);
  outline-offset: 2px;
}

.fg-browse__count {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: #7A5E1B;
  white-space: nowrap;
}

/* GRID ----------------------------------------------------------------- */
.fg-browse__list {
  --fgb-accent: var(--fg-teal, #0E7490);
  --fgb-accent-dark: var(--fg-teal-dark, #0B5A70);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fg-browse__list--theme {
  --fgb-accent: var(--fg-gold-dark, #8A6B1F);
  --fgb-accent-dark: #6E5518;
}

.fg-browse__list--role {
  --fgb-accent: #5B4A6B;
  --fgb-accent-dark: #453853;
}

/* Cancel the editorial bullet and indent style.css gives lists */
.fg-browse__list > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fg-browse__list > li::before,
.fg-browse__list > li::marker {
  content: none;
}

/* One declaration for the tile. Every state below overrides it rather
   than restating it, so behaviour does not depend on source order. */
.fg-browse__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--fg-paper, #FBFAF7);
  border: 1px solid var(--fg-hairline, #D4CFC4);
  color: var(--fgb-accent);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fg-browse__tile-count {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--fg-ink-muted, #525252);
  flex: 0 0 auto;
}

/* Filled treatment: hover, focus, and the top three by count. */
.fg-browse__list a:hover,
.fg-browse__list a:focus-visible,
.fg-browse__item--top a {
  background: var(--fgb-accent);
  border-color: var(--fgb-accent);
  color: var(--fg-paper, #FBFAF7);
}

.fg-browse__item--top a:hover,
.fg-browse__item--top a:focus-visible {
  background: var(--fgb-accent-dark);
  border-color: var(--fgb-accent-dark);
}

.fg-browse__list a:hover .fg-browse__tile-count,
.fg-browse__list a:focus-visible .fg-browse__tile-count,
.fg-browse__item--top a .fg-browse__tile-count {
  color: inherit;
}

.fg-browse__list a:focus-visible {
  outline: 2px solid var(--fg-ink, #1A1A1A);
  outline-offset: 2px;
}

/* Current term. Drupal's ActiveLinkResponseFilter adds .is-active to a
   link matching the current path. It sets no aria-current, so there is no
   attribute selector here. Declared last so the current tile outranks the
   top-three fill; otherwise a reader sees a louder tile beside the one
   they are already on.

   This also means keyboard focus on the current tile changes nothing but
   the outline, which is deliberate: the ink outline measures 15.16:1
   against warm paper, so SC 1.4.11 and SC 2.4.11 both hold. Do not
   "fix" it by moving this rule above :focus-visible. */
.fg-browse__list a.is-active,
.fg-browse__item--top a.is-active {
  background: var(--fg-paper-warm, #F5EFDF);
  border-color: var(--fgb-accent-dark);
  color: var(--fg-ink, #1A1A1A);
  font-weight: 600;
}

.fg-browse__list a.is-active .fg-browse__tile-count {
  color: var(--fg-ink-muted, #525252);
}

/* UNRANKED GROUPS ------------------------------------------------------- */
/* A group without counts has no top three, so it renders as fourteen plain
   tiles and reads as unfinished beside a ranked group. The accent moves to
   a left edge on every tile: the group gets its colour, and nothing claims
   an order the data does not support.
 *
 * A tinted tile surface was the first attempt and fails on measurement: at
 * 5-12% plum over paper the text stays legible at ~7:1, but the tile falls
 * to 1.03-1.11 against the aged band, so the tiles dissolve into the panel.
 * The paper fill is what separates tile from band.
 *
 * Applies to any list marked --flat. Drop the class once the group has
 * counts, and the top three take the filled treatment instead. */
.fg-browse__list--flat a {
  border-left: 3px solid var(--fgb-accent);
}

.fg-browse__list--flat a:hover,
.fg-browse__list--flat a:focus-visible {
  border-left-color: var(--fgb-accent-dark);
}

/* Escape hatch to the full vocabulary. Paper background, not transparent:
   the accent would sit on the aged band at 3.98:1 and fail AA. */
.fg-browse__list a.fg-browse__more {
  justify-content: center;
  border-style: dashed;
  color: var(--fgb-accent-dark);
}

.fg-browse__list a.fg-browse__more:hover,
.fg-browse__list a.fg-browse__more:focus-visible {
  background: var(--fgb-accent-dark);
  border-color: var(--fgb-accent-dark);
  color: var(--fg-paper, #FBFAF7);
}

/* UTILITY -------------------------------------------------------------- */
/* Custom themes do not inherit Olivero's or Claro's copy of this. The tile
   count uses it for its unit, so a screen reader hears "Inclusion, 21
   articles" rather than "Inclusion 21".
   Scoped to the list as well as the band, so it still applies if the list
   is ever rendered in its own wrapper outside the .fg-browse nav. */
.fg-browse .visually-hidden,
.fg-browse__list .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  word-wrap: normal;
}

/* TABLE FALLBACK -------------------------------------------------------- */
/* Wrapping a legacy three-column table in .fg-browse re-lays it as the
   grid. Assistive tech still hears a table, so this is the migration
   path, not the finished state. */
.fg-browse table {
  display: block;
  width: 100%;
  border: 0;
  margin: 0;
  font-size: inherit;
  overflow-x: visible;
}

.fg-browse table thead {
  display: none;
}

.fg-browse table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
}

.fg-browse table tr {
  display: contents;
  border: 0;
  background: transparent;
}

.fg-browse table td {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Filler cells: no rule. The base td declaration above already strips the
   box, so a cell holding &nbsp; draws nothing, and a cell holding plain
   text still prints it. What remains is that the filler cell keeps its
   grid slot and leaves a hole in the row. :empty does not match it, since
   &nbsp; is a text node, and CSS has no selector for whitespace-only
   content, so that one belongs in the content migration rather than here. */

.fg-browse table td a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--fg-paper, #FBFAF7);
  border: 1px solid var(--fg-hairline, #D4CFC4);
  color: var(--fgb-accent, var(--fg-teal, #0E7490));
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}

.fg-browse table td a:hover,
.fg-browse table td a:focus-visible {
  background: var(--fgb-accent, var(--fg-teal, #0E7490));
  border-color: var(--fgb-accent, var(--fg-teal, #0E7490));
  color: var(--fg-paper, #FBFAF7);
}

.fg-browse table td a:focus-visible {
  outline: 2px solid var(--fg-ink, #1A1A1A);
  outline-offset: 2px;
}

/* MOBILE ---------------------------------------------------------------- */
@media (max-width: 600px) {
  .fg-browse {
    margin-top: 32px;
    padding: 24px 0 28px;
  }

  .fg-browse__list,
  .fg-browse table tbody {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .fg-browse__list a,
  .fg-browse table td a {
    font-size: 14px;
    padding: 8px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fg-browse__list a {
    transition: none;
  }
}

@media print {
  .fg-browse {
    display: none;
  }
}

/* HOST-THEME OVERRIDES -------------------------------------------------- */
/* style.css styles editor body content, and this component renders inside
   .field--name-body when it lives in a block body. Two collisions, both
   verified against style.css rather than assumed:
 *
 *   1. Line 332: `a, a:link, a:visited { color: teal; underline }`. The
 *      :link pseudo-class counts as a class, so `a:link` is (0,1,1) and
 *      ties `.fg-browse__list a`. A tie goes to source order, so the
 *      component must also load after style.css: put it in a `theme:`
 *      group with a weight above 100, not a `component:` group, which the
 *      SMACSS order loads first.
 *
 *   2. Line 854: `.field--name-body ul li::before` paints a gold bullet at
 *      (0,1,3), beating `.fg-browse__list > li::before` at (0,1,2) whatever
 *      the load order. Line 842 adds 18px of left padding for it.
 *
 * The selectors below carry enough specificity to win outright, so the
 * component no longer depends on load order for correctness. They are kept
 * separate from the base rules so the reason stays visible. */

.fg-browse ul.fg-browse__list > li {
  position: static;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  list-style: none;
}

.fg-browse ul.fg-browse__list > li::before,
.fg-browse ul.fg-browse__list > li::marker {
  content: none;
  display: none;
}

.fg-browse .fg-browse__list a:link,
.fg-browse .fg-browse__list a:visited {
  color: var(--fgb-accent);
  text-decoration: none;
}

.fg-browse .fg-browse__list a:hover,
.fg-browse .fg-browse__list a:focus-visible,
.fg-browse .fg-browse__item--top a:link,
.fg-browse .fg-browse__item--top a:visited {
  color: var(--fg-paper, #FBFAF7);
  text-decoration: none;
}

.fg-browse .fg-browse__list a.is-active:link,
.fg-browse .fg-browse__list a.is-active:visited {
  color: var(--fg-ink, #1A1A1A);
}

.fg-browse .fg-browse__list a.fg-browse__more:link,
.fg-browse .fg-browse__list a.fg-browse__more:visited {
  color: var(--fgb-accent-dark);
}

.fg-browse .fg-browse__list a.fg-browse__more:hover,
.fg-browse .fg-browse__list a.fg-browse__more:focus-visible {
  color: var(--fg-paper, #FBFAF7);
}

/* PROSE-BULLET KILL ----------------------------------------------------- */
/* style.css paints a gold prose bullet twice, at line 851 and again at
   3049, as `.field--name-body ul li::before` with 18px of left padding on
   the li at 3040. It exempts its own components (fg-tldr, fg-failure,
   fg-do-dont, fg-structure) in the kill lists at 3089 and 3127, but
   fg-browse predates none of that and was never added.
 *
 * The .node__content and .field--name-body prefixes below take these to
 * (0,3,3), above every prose-bullet selector in the file, so the component
 * is correct wherever it renders and whatever the library order. Adding
 * fg-browse to the two kill lists in style.css is the tidier long-term
 * home for this; these rules make it unnecessary. */

.node__content .fg-browse ul.fg-browse__list > li,
.field--name-body .fg-browse ul.fg-browse__list > li,
.fg-browse ul.fg-browse__list > li {
  position: static;
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  font-size: inherit;
  line-height: inherit;
  list-style: none;
  list-style-type: none;
  list-style-image: none;
}

.node__content .fg-browse ul.fg-browse__list > li::before,
.field--name-body .fg-browse ul.fg-browse__list > li::before,
.node__content .fg-browse ul.fg-browse__list > li::marker,
.field--name-body .fg-browse ul.fg-browse__list > li::marker,
.fg-browse ul.fg-browse__list > li::before,
.fg-browse ul.fg-browse__list > li::marker {
  content: none;
  display: none;
  background: none;
}

/* BAND WIDTH ------------------------------------------------------------ */
/* The panel is bounded to the same box as its content rather than bleeding
   to the region edge. Full bleed works when the content fills the width;
   with a capped grid it leaves aged shoulders on a large display. Panel and
   grid share one box, set on .fg-browse above.

   To restore the full-bleed section break: max-width: none on .fg-browse,
   and move the cap to .fg-browse__inner. */

.fg-browse__inner {
  max-width: none;
}

/* Wider viewports get wider tiles rather than more of them, so a 50-tile
   band does not fragment into a dozen narrow columns. */
@media (min-width: 1200px) {
  .fg-browse__list {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}