/* article-polish.css - post-launch article-experience fixes (2026-10-14 audit).

   A separate sheet, loaded right after editorial.css on every page that loads editorial.css
   (inc/assets.php), for one reason: production's editorial.css is also edited in place by the
   separate hero/featured-image workstream (its per-post `.postid-*` hero corrections at the end of
   that file). Keeping these shared fixes in their own file means neither workstream can overwrite
   the other's rules by uploading its copy of editorial.css. Tokens only; no per-post selectors here. */

/* ---------------------------------------------------------------------------------------------
   1. AIOSEO breadcrumbs
   gg_render_article_breadcrumbs() hands over to aioseo_breadcrumbs() when AIOSEO is active (it is,
   on production), and that markup (div.aioseo-breadcrumbs > span.aioseo-breadcrumb + span.
   aioseo-breadcrumb-separator) had no styles at all: over the dark hero it inherited the body ink
   colour (near-invisible) and the full, immutable article title ran on for two or three lines.
   Same treatment as the theme's own .breadcrumbs trail (components.css / editorial.css). Markup,
   links and AIOSEO's breadcrumb schema are untouched.
   --------------------------------------------------------------------------------------------- */
.aioseo-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
  margin: 0;
  font-size: var(--fs-0);
  line-height: 1.4;
  color: var(--ink-3);
}
.aioseo-breadcrumbs a { color: inherit; text-decoration: none; }
.aioseo-breadcrumbs a:hover { color: var(--red); }
.aioseo-breadcrumb-separator { color: var(--ink-3); }
.aioseo-breadcrumbs > .aioseo-breadcrumb:last-child { color: var(--ink); }

.article-header--hero .aioseo-breadcrumbs,
.article-header--hero .aioseo-breadcrumbs > .aioseo-breadcrumb:last-child { color: var(--paper-2); }
.article-header--hero .aioseo-breadcrumb-separator { color: var(--muted-on-ink); }
.article-header--hero .aioseo-breadcrumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; }
/* The last crumb is the full article title: one line, truncated, never dominating the hero. */
.article-header--hero .aioseo-breadcrumbs > .aioseo-breadcrumb:last-child {
  display: inline-block;
  max-width: 48ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
@media (max-width: 63.999rem) {
  .article-header--hero .aioseo-breadcrumbs > .aioseo-breadcrumb:last-child { max-width: 26ch; }
}
@media (max-width: 30rem) {
  .article-header--hero .aioseo-breadcrumbs > .aioseo-breadcrumb:last-child { max-width: 18ch; }
}

/* ---------------------------------------------------------------------------------------------
   2. Hero without a photo ("hero-pending")
   At >= 64rem the hero overlay is capped at 60% of the hero so the type never runs over the photo
   on the right. A pending hero has no photo, and in the gear-guide / standard layouts it sits in a
   ~600px main column between the TOC rail and the sidebar - 60% of that left the display-size
   title one word per line and the empty header ~1,100px tall. With no photo there is nothing to
   protect: let the type use the whole band. Applies only while no portrait/hero photo exists, so a
   hero that gets its photo later returns to the normal composition by itself.
   --------------------------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .article-header--hero-pending:not(:has(.article-header__portrait)) > .article-header__overlay { max-width: none; }
}

/* ---------------------------------------------------------------------------------------------
   3. Drop cap: the article's opening paragraph only
   editorial.css's `.prose p:first-of-type:not([class])::first-letter` matches the first <p> of
   EVERY container inside .prose, so the 3.4em red initial also landed in each FAQ answer, each
   tone-recipe card, every On This Day <section> and the first paragraph after the Guitar Legend
   opening (measured: up to 16 per page), splitting words ("T ommy", "| use Kemper"). Reset it
   everywhere, then re-apply it to the one opening paragraph of each article shape:
   standard/legacy (.prose > p), premium (.prose > .gg-article > p, or > article > p one level
   down), Guitar Legend (.legend__lede only - .legend__prose is the continuation) and the On This
   Day story (first <section> only). News keeps no drop cap (editorial.css). */
.prose p:first-of-type:not([class])::first-letter {
  font: inherit;
  float: none;
  padding: 0;
  color: inherit;
}
:is(.prose:not(.legend__prose, .prose--news) > p,
    .prose:not(.legend__prose, .prose--news) > .gg-article > p,
    .prose:not(.legend__prose, .prose--news) > .gg-article > article > p,
    .prose:not(.legend__prose, .prose--news) > article > section:first-of-type > p):first-of-type:not([class])::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.8;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--red);
}

/* ---------------------------------------------------------------------------------------------
   4. Table captions inside the horizontal-scroll region
   A <caption> is as wide as its table, so on a phone a 544px table's caption was clipped at both
   ends inside the 358px .table-scroll ("Tommy Shaw Amp Settings (Marshall JMP — A"). Pin it to the
   visible width of the scroll region so it always reads in full and stays put while the table
   scrolls underneath it. */
.table-scroll { container-type: inline-size; }
.table-scroll > table > caption {
  position: sticky;
  left: 0;
  max-width: 100cqi;
  text-align: left;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------------------------
   5. Timeline edge fade below 64rem
   The symmetric mask faded the FIRST point at rest ("1953 BORN" half-transparent at 390px).
   Only the trailing edge needs the "more to scroll" cue; at the start nothing is hidden. */
@media (max-width: 63.999rem) {
  .article-timeline {
    -webkit-mask-image: linear-gradient(to right, var(--ink) 0, var(--ink) calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, var(--ink) 0, var(--ink) calc(100% - 28px), transparent 100%);
  }
}

/* ---------------------------------------------------------------------------------------------
   6. Inline editorial photographs and the image-credits block (2026-10 image enrichment)
   Inline photos are inserted into post_content as
     <figure class="gg-inline-figure gg-inline-figure--landscape|--portrait"> <img class="wp-image-N"> <figcaption>
   and their attribution is collected once at the end of the article in
     <div class="image-credits"><p class="image-credits__title">Image credits</p><ul class="image-credits__list">…
   (a labelled block, not an <h2>, so it never enters the in-page table of contents). */
.prose .gg-inline-figure { margin: 2em 0; }
.prose .gg-inline-figure img { display: block; width: 100%; height: auto; }
.prose .gg-inline-figure--portrait { max-width: min(100%, 26rem); }
.prose .gg-inline-figure figcaption { max-width: var(--article-measure); }
@media (min-width: 64rem) {
  /* Landscape photographs break out to the Guitar Legend body's wide track, like tables and gear cards. */
  .legend__prose .legend-flow > .gg-inline-figure--landscape { grid-column: wide; }
}

.prose .image-credits {
  margin-top: 3em;
  padding-top: var(--space-3);
  border-top: var(--rule-thin);
  font-size: var(--fs-0);
  line-height: 1.45;
  color: var(--ink-2);
}
.prose .image-credits__title {
  margin: 0 0 0.5em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.prose .image-credits__list { list-style: none; padding: 0; margin: 0; }
.prose .image-credits__list li { max-width: var(--article-measure); overflow-wrap: anywhere; }
.prose .image-credits__list li + li { margin-top: 0.3em; }
.prose .image-credits a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.prose .image-credits a:hover { color: var(--red); }