/* =========================================================================
   WW1AHT MASTER — CONTENT (news index, blog single, page, search, 404)
   ========================================================================= */

/* ---- News index -------------------------------------------------------- */
.card--news .card__media { aspect-ratio: 16 / 9; }
.news-featured { display: grid; grid-template-columns: 1.3fr 1fr; border-radius: 5px; overflow: hidden; margin-bottom: var(--space-xl); background: var(--primary); color: var(--bg); text-decoration: none; }
.news-featured__media { position: relative; min-height: 320px; display: grid; place-items: center; background-image: repeating-linear-gradient(135deg, rgba(42,62,92,0.05) 0 11px, rgba(42,62,92,0.1) 11px 22px); }
.news-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.news-featured__badge { position: absolute; top: 14px; left: 14px; background: var(--donate); color: #fff; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 11px; border-radius: 2px; }
.news-featured__body { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.news-featured__meta { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 8px; }
.news-featured h2 { color: var(--bg); font-size: 2.4rem; line-height: 1.05; margin: 0 0 12px; }
.news-featured__excerpt { color: rgba(255, 255, 255, 0.85); margin: 0; }
.news-featured__cta { color: var(--accent); font-weight: 600; margin-top: 10px; }
.news-body { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-xl); align-items: start; }
.news-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--space-lg); }
.sidebar-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.sidebar-card--dark { background: var(--primary); color: var(--bg); }
.sidebar-card h3 { font-size: 1.3rem; margin: 0 0 10px; }
.sidebar-card--dark h3 { color: var(--bg); }
.sidebar-card__head { border-bottom: 2px solid var(--line); padding-bottom: 8px; }
.sidebar-card--dark p { color: rgba(255, 255, 255, 0.82); }
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 0.95rem; padding: 5px 0; }
.cat-list a { color: var(--accent-ink); text-decoration: none; }
.cat-list .count { color: var(--muted); }
.btn--block { display: block; width: 100%; text-align: center; }

/* ---- Blog single ------------------------------------------------------- */
.post-header { max-width: 720px; margin: 0 auto; padding: var(--space-xl) var(--space-lg) var(--space-lg); }
.post-kicker { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-ink); margin-bottom: 10px; }
.post-header h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.03; margin: 0 0 16px; }
.post-byline { display: flex; gap: 12px; align-items: center; font-size: 0.92rem; color: var(--muted); }
.post-hero { max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 8; border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; background-image: repeating-linear-gradient(135deg, rgba(42,62,92,0.05) 0 11px, rgba(42,62,92,0.1) 11px 22px); }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }

/* Photographer credit under a post or page hero. Added 29 Aug 2026 with the
   ww1aht_featured_credit() helper — until then no template on this site could
   display a credit on a featured image at all.

   Same numbers as .article-body figcaption below, deliberately: a credit has to
   read as a credit wherever it appears, and one site should not have two sizes
   for the same job.

   The .page-article variant exists because page.php sets an inline
   margin-bottom:32px on its hero, so without the negative pull the credit floats
   in the middle of that gap looking unattached to the image it belongs to. It is
   scoped to an ancestor class the template already carries rather than needing a
   modifier — so a page WITHOUT a credit keeps its 32px spacing untouched. */
.post-hero__credit { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.4; opacity: 0.72; }
.page-article .post-hero__credit { margin: -26px 0 32px; }
/* A PORTRAIT featured image cannot live in a 2:1 box - object-fit:cover crops it to a
   band across the middle, which is what happened to post 18368 and has been happening
   to post 7654 unnoticed since May 2025. Drop the fixed ratio for portraits and contain
   instead, so the hatched background shows around the image exactly as it already does
   in .news-featured__media. Landscape and square images are UNTOUCHED and keep the 16/8
   box, so nothing currently rendering changes. Added 29 Aug 2026. */
.post-hero--portrait { aspect-ratio: auto; }
.post-hero--portrait img { width: auto; height: auto; max-height: 60vh; max-width: 100%; object-fit: contain; }
.post-body { max-width: 720px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
.post-body > p { font-size: 1.12rem; }
.post-body > p:first-of-type { font-size: 1.22rem; font-weight: 500; }
.post-body blockquote { border-left: 3px solid var(--accent); font-family: var(--font-heading); font-size: 1.6rem; font-style: italic; }
.post-footer { max-width: 720px; margin: 0 auto; padding: 24px var(--space-lg) var(--space-xl); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--line); }
.share { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--muted); }
.share__btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--primary); text-decoration: none; font-size: 0.72rem; font-weight: 600; }

/* ---- Standard page ----------------------------------------------------- */
.page-hero { background: var(--primary); color: var(--bg); }
.page-hero .wrap { padding-block: 44px; }
.page-hero .crumbs, .page-hero .crumbs a { color: var(--accent); }
.page-hero h1 { color: var(--bg); max-width: 20ch; font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin: 6px 0 0; }
.page-shell { display: grid; grid-template-columns: 1fr 250px; gap: var(--space-xl); align-items: start; }
.page-article > p { font-size: 1.12rem; }
.page-article > p:first-of-type { font-size: 1.22rem; font-weight: 500; }
.page-article h2 { font-size: 2rem; margin: 34px 0 12px; scroll-margin-top: 90px; }
.page-callout { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 22px 26px; margin: 30px 0; }
.toc { position: sticky; top: 90px; }
.toc__label { font-family: ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.toc__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc__list a { display: block; padding: 5px 14px; border-left: 2px solid transparent; margin-left: -2px; color: var(--accent-ink); text-decoration: none; }
.toc__list a.is-active { border-left-color: var(--primary); color: var(--primary); font-weight: 600; }

/* ---- Search ------------------------------------------------------------ */
.search-page { max-width: 900px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
.search-form { display: flex; gap: 10px; margin-bottom: 10px; }
.search-form input { flex: 1; }
.search-form button { padding: 0 28px; }
.search-count { color: var(--muted); margin-bottom: var(--space-lg); }
.search-count strong { color: var(--text); }
.search-results { display: flex; flex-direction: column; gap: 16px; }
.search-result { display: flex; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; }
.search-result:hover { box-shadow: var(--shadow-card); }
.search-result__media { width: 140px; flex: none; display: grid; place-items: center; background-image: repeating-linear-gradient(135deg, rgba(42,62,92,0.05) 0 11px, rgba(42,62,92,0.1) 11px 22px); }
.search-result__media img { width: 100%; height: 100%; object-fit: cover; }
.search-result__body { padding: 16px 16px 16px 0; display: flex; flex-direction: column; gap: 4px; }
.type-tag { align-self: flex-start; background: var(--primary); color: var(--bg); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 2px 9px; border-radius: 2px; }
.search-result h3 { font-size: 1.4rem; margin: 0; }

/* ---- 404 ---------------------------------------------------------------
   DO NOT name anything here .error404.

   WordPress puts `error404` on the BODY tag of any 404 response. This block
   previously used that same class for the content panel, so `max-width: 720px;
   padding: 90px` was applied to <body> as well — squeezing the header, the
   whole page and the footer into a 720px centred column, with the navigation
   overflowing its own bar. It looked like a broken mobile screenshot.

   The panel is `.notfound` instead: a name WordPress will never set itself. */
.notfound { max-width: 720px; margin: 0 auto; text-align: center; padding: 90px var(--space-lg); }
.notfound__num { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 5rem; line-height: 1; color: var(--primary); }
.notfound h1 { margin: 8px 0 12px; font-size: 2.2rem; }
.notfound p { max-width: 46ch; margin: 0 auto 28px; }
.notfound .search-form { max-width: 460px; margin: 0 auto 28px; }
.notfound .search-form { display: flex; gap: 10px; justify-content: center; }
.notfound .search-form input[type="search"] { flex: 1; }
.quicklinks { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 860px) {
  .news-featured, .news-body, .page-shell { grid-template-columns: 1fr; }
  .news-sidebar, .toc { position: static; }
  .page-shell .toc { order: -1; }
  .search-result { flex-direction: column; }
  .search-result__media { width: auto; aspect-ratio: 16 / 9; }
}

/* ---------------------------------------------------------------------------
   Images inside a long-form story body.

   Added 10 Aug 2026 with the Rhodes-Moorhouse portrait, because .article-body
   had NO image styling of any kind. The float classes existed only under
   .arch-intro, so an alignright image in a story body simply did not float and
   a figcaption rendered as ordinary body text — which would have printed the
   photograph's credit line as if it were part of the article.

   Deliberately mirrors the .arch-intro rules in _database.css rather than
   inventing a second set of numbers: same 45% cap, same 640px breakpoint, same
   unfloat-and-centre behaviour on narrow screens.

   The caption is where a photograph's CREDIT lives on this site — there is no
   per-attachment credit field, ww1aht_credits is the site-wide footer line —
   so figcaption has to read as a credit: small, quiet, and clearly not prose.
   --------------------------------------------------------------------------- */
.article-body figure { margin: 0 0 1.25rem; }
.article-body figcaption { margin-top: 6px; font-size: 0.82rem; line-height: 1.4; opacity: 0.72; }

/*
 * EXTENDED TO .page-article ON 11 Aug 2026, and the omission was the same bug
 * as the one described above, one wrapper along.
 *
 * page.php renders a standard page into .page-article, NOT .article-body, so
 * none of these rules reached a page. Found on /great-war-stories/ while
 * promoting it into the Main Navigation: its three medal illustrations —
 * alignright, alignleft and aligncenter — all stacked in a single column down
 * the left margin, because not one of the three classes did anything at all.
 *
 * 25 published pages carry these classes, so this corrects those too. That is
 * the point rather than a side effect: they have all been rendering that way
 * since the theme rebuild, on pages nobody had reason to re-read.
 *
 * aligncenter was missing from the .article-body set as well and is added here
 * for both. It existed only under .arch-intro in _database.css.
 */
.article-body .alignright,
.page-article .alignright { float: right; margin: 0 0 1.25rem 1.5rem; max-width: 45%; }
.article-body .alignleft,
.page-article .alignleft  { float: left;  margin: 0 1.5rem 1.25rem 0; max-width: 45%; }
.article-body .aligncenter,
.page-article .aligncenter { display: block; margin-left: auto; margin-right: auto; }

.page-article figure { margin: 0 0 1.25rem; }
.page-article figcaption { margin-top: 6px; font-size: 0.82rem; line-height: 1.4; opacity: 0.72; }

@media (max-width: 640px) {
  .article-body .alignright, .article-body .alignleft,
  .page-article .alignright, .page-article .alignleft { float: none; margin: 1.25rem auto; max-width: 100%; }
}