/* ==========================================================================
   APDocs blog — base stylesheet   (BlogRender/Assets/blog-base.css)
   Published version number: BlogAssets.BaseCssVersion — bump it on EVERY edit here.
   --------------------------------------------------------------------------
   Styles every apd-* class the renderer emits (BlogFragments / BlogPages).
   Authored ONCE here, embedded in BlogRender, written to the blog bucket root
   as /assets/blog-N.css, N = BlogAssets.BaseCssVersion (immutable) and linked from every page by ABSOLUTE URL on the
   blog host — never a relative path, so a customer-domain distribution
   (OriginPath = the org folder) cannot route it to the customer's own /assets/.

   Rules of this file:
     * every selector starts with an apd- class — never bare body/h1/a/p —
       so the markup can sit inside a client's own page outline untouched;
     * every colour, font, radius and spacing comes from a --apd-* variable
       with a default below; the client's theme.css (linked AFTER this file)
       only ever re-declares variables;
     * no external resources; fonts are the theme's business;
     * responsive without JavaScript.

   A breaking change to the markup ships as blog-2.css; blogs move to it on
   their next full republish, never all at once.
   ========================================================================== */

/* ---- TOKENS — defaults; the per-blog theme.css overrides these ---------- */
.apd-page,
.apd-blog {
  --apd-accent:         #378ADD;   /* links, dates, bar header, media placeholder */
  --apd-secondary:      #E9EEF3;   /* alternating rows, tag chips */
  --apd-page-bg:        #ffffff;
  --apd-card-bg:        #ffffff;
  --apd-card-bg-alt:    var(--apd-card-bg);     /* rows layout: every 2nd card */
  --apd-card-border:    rgba(0,0,0,0.12);
  --apd-card-text:      var(--apd-text-color);  /* text ON cards (white on a dark card) */
  --apd-card-title:     var(--apd-title-color);
  --apd-radius:         12px;
  --apd-title-color:    #1f2933;
  --apd-text-color:     #4a5568;
  --apd-link:           var(--apd-accent);
  --apd-button-bg:      var(--apd-accent);
  --apd-button-text:    #ffffff;
  --apd-title-font:     system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --apd-body-font:      system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --apd-gap:            16px;
  --apd-max-width:      1100px;
  --apd-article-width:  760px;
}
/* ---- end TOKENS --------------------------------------------------------- */

/* ---- page frame (default outline only; a client outline supplies its own) */
.apd-page { margin: 0; background: var(--apd-page-bg); font-family: var(--apd-body-font); color: var(--apd-text-color); }
.apd-page--index   { /* hook: index-only overrides go in theme.css */ }
.apd-page--article { /* hook: article-only overrides go in theme.css */ }
.apd-blog { max-width: var(--apd-max-width); margin: 0 auto; padding: calc(var(--apd-gap) * 1.5) var(--apd-gap); }
.apd-blog-footer { max-width: var(--apd-max-width); margin: 0 auto; padding: var(--apd-gap); font-size: 0.8rem; color: var(--apd-text-color); opacity: 0.7; text-align: center; }

/* ---- blog header: sense of place ---------------------------------------- */
.apd-blog-header { margin: 0 0 calc(var(--apd-gap) * 1.5); }
.apd-blog-header__name { margin: 0 0 4px; font-family: var(--apd-title-font); font-size: 2rem; line-height: 1.2; color: var(--apd-title-color); }
.apd-blog-header__tagline { margin: 0 0 8px; font-family: var(--apd-title-font); font-size: 1.1rem; color: var(--apd-accent); }
.apd-blog-header__about { margin: 0; max-width: var(--apd-article-width); line-height: 1.6; }
.apd-blog-empty { padding: var(--apd-gap); border: 1px dashed var(--apd-card-border); border-radius: var(--apd-radius); text-align: center; }

/* ---- list + layouts ------------------------------------------------------ */
.apd-blog-list { display: grid; gap: var(--apd-gap); list-style: none; margin: 0; padding: 0; }
.apd-grid-rows { grid-template-columns: 1fr; }
.apd-grid-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.apd-grid-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- card ---------------------------------------------------------------- */
.apd-card { display: flex; flex-direction: column; background: var(--apd-card-bg); color: var(--apd-card-text); border: 1px solid var(--apd-card-border); border-radius: var(--apd-radius); overflow: hidden; }
/* height:auto on every media element: the renderer emits width/height
   attributes (D6) for layout reservation, and an attribute height would
   otherwise beat aspect-ratio and stretch the box to the stored pixel size. */
.apd-card__media { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--apd-accent); }
.apd-media--empty { min-height: 0; }
.apd-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 16px; }
.apd-card__title { margin: 0 0 6px; font-family: var(--apd-title-font); font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--apd-card-title); }
.apd-card__title a { color: inherit; text-decoration: none; }
.apd-card__title a:hover { text-decoration: underline; }
.apd-card__summary { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.6; }
/* Rich-text short fields (2026-10-07): links take the surrounding text colour
   and underline, so a client's own link colour can't make them vanish against
   the card background. Element in the selector on purpose (client a rules). */
.apd-card__summary a, .apd-blog-header__about a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.apd-card__summary a:hover, .apd-blog-header__about a:hover, .apd-card__summary a:focus, .apd-blog-header__about a:focus { color: inherit; font-style: italic; text-decoration: underline; }
/* On a card, everything is drawn in the card text colour (v6, 2026-10-13):
   the accent on a dark accent-coloured card made the date and the button vanish. */
.apd-card__meta { font-size: 0.8rem; color: var(--apd-card-text); opacity: 0.85; margin-top: auto; }
.apd-card__more { display: inline-block; margin-top: 10px; align-self: flex-start; padding: 6px 12px; border-radius: 2px; background: transparent; color: var(--apd-card-text); border: 1px solid var(--apd-card-text); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
/* Hover inverts (2026-10-07, Lesley). Declared on the anchor WITH :hover so a
   client stylesheet's own a:hover rule (type + pseudo, 0,1,1) cannot outrank
   it — the plain class alone (0,1,0) lost to Brixworth's and the button text
   took their link colour. */
a.apd-card__more:hover, a.apd-card__more:focus { background: var(--apd-card-text); color: var(--apd-card-bg); text-decoration: none; }
.apd-grid-rows .apd-card:nth-child(even) a.apd-card__more:hover, .apd-grid-rows .apd-card:nth-child(even) a.apd-card__more:focus { color: var(--apd-card-bg-alt); }

/* rows layout: image beside the text, alternating card colours */
.apd-grid-rows .apd-card { flex-direction: row; }
.apd-grid-rows .apd-card__media { width: 36%; max-width: 360px; aspect-ratio: 3 / 2; flex: 0 0 auto; }
.apd-grid-rows .apd-card:nth-child(even) { background: var(--apd-card-bg-alt); }

/* ---- pager (2026-10-13, index pagination) ---------------------------------- */
.apd-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--apd-gap); margin: var(--apd-gap) 0 0; padding-top: var(--apd-gap); border-top: 1px solid var(--apd-card-border); font-size: 0.95rem; }
.apd-pager__status { color: var(--apd-accent); }
a.apd-pager__link, a.apd-pager__link:visited { color: var(--apd-button-text); background: var(--apd-button-bg); padding: 8px 14px; border-radius: var(--apd-radius); text-decoration: none; }
a.apd-pager__link:hover, a.apd-pager__link:focus { color: var(--apd-button-bg); background: var(--apd-button-text); text-decoration: none; }
.apd-pager__link--newer { margin-right: auto; }
.apd-pager__link--older { margin-left: auto; }
.apd-pager__link--off { visibility: hidden; }

/* ---- article ------------------------------------------------------------- */
.apd-article { max-width: var(--apd-article-width); margin: 0 auto; }
.apd-article--hero { max-width: var(--apd-max-width); }
.apd-article--hero > *:not(.apd-article__hero) { max-width: var(--apd-article-width); margin-left: auto; margin-right: auto; }
.apd-article__hero { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--apd-radius); margin: 0 0 var(--apd-gap); background: var(--apd-accent); }
.apd-article__media { display: block; max-width: 100%; height: auto; border-radius: var(--apd-radius); margin: 0 0 var(--apd-gap); }
.apd-article__title { margin: 0 0 8px; font-family: var(--apd-title-font); font-size: 1.9rem; line-height: 1.2; color: var(--apd-title-color); }
.apd-article__meta { margin: 0 0 var(--apd-gap); font-size: 0.85rem; color: var(--apd-accent); }
.apd-article__body { line-height: 1.7; }
.apd-article__body h2, .apd-article__body h3, .apd-article__body h4 { font-family: var(--apd-title-font); color: var(--apd-title-color); line-height: 1.25; margin: 1.4em 0 0.5em; }
.apd-article__body h2 { font-size: 1.5rem; }
.apd-article__body h3 { font-size: 1.25rem; }
.apd-article__body p, .apd-article__body ul, .apd-article__body ol { margin: 0 0 1em; }
.apd-article__body a { color: var(--apd-link); }
.apd-article__body img { max-width: 100%; height: auto; border-radius: var(--apd-radius); }
.apd-article__body blockquote { margin: 1em 0; padding: 0.5em 1em; border-left: 4px solid var(--apd-accent); background: var(--apd-secondary); }
.apd-article__body pre { overflow-x: auto; padding: 12px; border-radius: var(--apd-radius); background: var(--apd-secondary); }
.apd-article__body code { font-size: 0.9em; }
.apd-article__body table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.apd-article__body th, .apd-article__body td { border: 1px solid var(--apd-card-border); padding: 6px 8px; text-align: left; }
.apd-article__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: var(--apd-gap) 0; padding: 0; }
.apd-article__tags li { padding: 3px 10px; border-radius: 999px; background: var(--apd-secondary); font-size: 0.8rem; }
.apd-article__back { margin: var(--apd-gap) 0 0; }
.apd-article__back a { color: var(--apd-link); text-decoration: none; }
.apd-article__back a:hover { text-decoration: underline; }

/* ---- author box ---------------------------------------------------------- */
.apd-author { display: flex; gap: var(--apd-gap); align-items: flex-start; margin: calc(var(--apd-gap) * 1.5) 0 0; padding: var(--apd-gap); border: 1px solid var(--apd-card-border); border-radius: var(--apd-radius); background: var(--apd-card-bg); color: var(--apd-card-text); }
.apd-author__image { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.apd-author__body { min-width: 0; }
.apd-author__name { margin: 0 0 4px; font-family: var(--apd-title-font); font-weight: 600; color: var(--apd-card-title); }
.apd-author__title { font-weight: 400; opacity: 0.8; }
.apd-author__title::before { content: "· "; }
.apd-author__bio { margin: 0; font-size: 0.9rem; line-height: 1.6; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .apd-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .apd-grid-2, .apd-grid-3 { grid-template-columns: 1fr; }
  .apd-grid-rows .apd-card { flex-direction: column; }
  .apd-grid-rows .apd-card__media { width: 100%; max-width: none; aspect-ratio: 16 / 9; }
  .apd-blog-header__name { font-size: 1.6rem; }
  .apd-article__title { font-size: 1.5rem; }
}