/*
 * blog.css — Blog listing page styles (tall photo hero, featured post, card grid, sidebar)
 * ═══════════════════════════════════════════════════════════════════════
 * PATH: css/blog.css
 * ROLE: Everything page-specific for /blog and its category / tag / search
 *       listings (the hero band keeps the site default bookshelf photo, same
 *       as About): the two-column layout (posts + sidebar), the
 *       featured newest post, the post card grid (a swipeable row on phones),
 *       the pager, and the sidebar boxes — search, categories with counts,
 *       recent posts, topics (tags), the dark contact card and the
 *       credentials line. Tokens (--band, --teal, --display, --serif, --line…)
 *       come from css/site-shell.css. Motion = the shared [data-reveal]
 *       scroll reveal (states in site-shell.css, js/site-reveal.js).
 * USED BY: app/Views/public/blog.php and blog_post.php (both loaded through
 *       the layout's 'head' section). The .blog-* block is the listing
 *       (moved out of css/main.css 2026-09-13); the post- prefixed block at
 *       the bottom is blog_post.php's own reading column, article body,
 *       tags, share pills and related grid (reuses .blog-grid/.blog-card
 *       for the related cards, so the two pages' card look stays identical).
 * Last Modified: 2026-09-14 — added the post- block (blog post restyle: reading column, article
 *       body typography, tags, share pills, related grid); 2026-09-13 —
 *       created (blog listing restyle); hero override removed (bookshelf, matches About)
 */

/* ── hero band photo ─────────────────────────────────────
   No photo override: the blog keeps the layout's default .wrapper2
   band (images/bg321.jpg, the bookshelf reading nook). A "woman reading"
   shot (images/banner-1536x1024.jpg) was trialled 2026-09-13 and dropped:
   the title crossed her face at ≥1700px and on phones.
   2026-09-14: attachment + position ARE overridden — main.css pins the
   band to the viewport (fixed), which on desktop can only show the top of
   the photo (the window) and hides the bench. Scroll attachment sizes the
   photo to the band; bottom anchoring keeps the bench in view at every
   width (user: "change the image position to bottom for desktop"). */
.wrapper2[data-page="blog"],
.wrapper2[data-page="blog-post"] {
  background-attachment: scroll;
  background-position: center bottom;
}

/* ── page frame ──────────────────────────────────────── */
.blog-page {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  overflow-x: clip;                /* the reveal translate must not widen the page */
}
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2.5rem;
  align-items: start;
}
.blog-main {
  min-width: 0;
}
.blog-context {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.blog-context strong {
  color: var(--ink);
}
.blog-context a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-context a:hover,
.blog-context a:focus {
  color: var(--teal);
}

/* ── shared bits: eyebrow, meta, excerpt, arrow link ──── */
.blog-eyebrow {
  margin: 0 0 .75rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.blog-meta {
  margin: 0 0 .9rem;
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.blog-excerpt {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.blog-more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-decoration: none;
}
.blog-more::after {
  content: "\2192";
  transition: transform .3s var(--ease);
}
.blog-more:hover,
.blog-more:focus {
  color: var(--teal);
  text-decoration: none;
}
.blog-more:hover::after {
  transform: translateX(4px);
}
.blog-chip {
  display: inline-block;
  align-self: flex-start;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-family: var(--display);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── featured (newest) post ──────────────────────────── */
.blog-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 2.5rem;
}
/* The photo cell takes its height from the text column (absolute img fills
   it) so a 4:3 box can never grow wider than its grid track. */
.blog-featured-photo {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 320px;
}
.blog-featured-photo img {
  position: absolute;
  inset: 0;
}
.blog-featured-photo img,
.blog-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.blog-featured:hover .blog-featured-photo img,
.blog-card:hover .blog-card-photo img {
  transform: scale(1.04);
}
.blog-featured-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2rem 2rem 2.25rem;
}
.blog-featured h2 {
  margin: 0 0 .6rem;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}
/* main.css paints every <a> white — the title links need the ink colour */
.blog-featured h2 a,
.blog-card h3 a {
  color: var(--ink);
  text-decoration: none;
}
.blog-featured h2 a:hover,
.blog-featured h2 a:focus,
.blog-card h3 a:hover,
.blog-card h3 a:focus {
  color: var(--teal-deep);
  text-decoration: none;
}

/* ── post card grid ──────────────────────────────────── */
.blog-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(20, 32, 31, .1);
}
.blog-card-photo {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem 1.35rem 1.4rem;
}
.blog-card h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}
.blog-card .blog-meta {
  margin: 0;
}
.blog-card .blog-excerpt {
  margin: 0;
  font-size: .92rem;
}
.blog-card .blog-more {
  margin-top: auto;
  padding-top: .5rem;
}
.blog-swipe-hint {
  display: none;                   /* phones only, see the ≤768px block */
  margin: .5rem 0 0;
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.blog-empty {
  padding: 3rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--muted);
}

/* ── pager (CI4 default template: nav > ul > li > a) ─── */
.blog-pager {
  margin-top: 2rem;
}
.blog-pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-pager a {
  display: inline-block;
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--display);
  font-size: .82rem;
  color: var(--ink);
  text-decoration: none;
}
.blog-pager a:hover,
.blog-pager a:focus {
  border-color: var(--teal);
  color: var(--teal-deep);
  text-decoration: none;
}
.blog-pager .active a {
  background: var(--band);
  border-color: var(--band);
  color: #fff;
}

/* ── sidebar ─────────────────────────────────────────── */
.blog-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.blog-search {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.blog-search:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.blog-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: .7rem 1.1rem;
  background: transparent;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
}
.blog-search input:focus {
  outline: none;
}
.blog-search button {
  display: grid;
  place-items: center;
  border: 0;
  padding: 0 1rem;
  background: var(--teal);
  color: var(--band);
  cursor: pointer;
  transition: background .2s ease;
}
.blog-search button:hover,
.blog-search button:focus-visible {
  background: var(--teal-bright);
}
.blog-search svg {
  width: 18px;
  height: 18px;
}
.blog-box {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.blog-box-title {
  margin: 0;
  padding: .9rem 1.25rem;
  background: var(--band);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.blog-box-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-box-list li + li {
  border-top: 1px solid var(--line);
}
.blog-box-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .8rem 1.25rem;
  font-family: var(--display);
  font-size: .92rem;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.blog-box-list a:hover,
.blog-box-list a:focus {
  background: var(--ground);
  color: var(--teal-deep);
  text-decoration: none;
}
.blog-box-list a[aria-current="page"] {
  background: var(--teal-tint);
  color: var(--teal-deep);
  box-shadow: inset 4px 0 0 var(--teal);
}
.blog-count {
  font-size: .74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.blog-recent a {
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  font-family: var(--serif);
  line-height: 1.35;
}
.blog-recent time {
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 1rem 1.25rem;
}
.blog-tags a {
  display: inline-block;
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--display);
  font-size: .78rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.blog-tags a:hover,
.blog-tags a:focus,
.blog-tags a[aria-current="page"] {
  border-color: var(--teal);
  background: var(--teal-tint);
  color: var(--teal-deep);
  text-decoration: none;
}
.blog-cta {
  padding: 1.6rem 1.4rem;
  border-radius: 8px;
  background: var(--band);
  color: rgba(255, 255, 255, .82);
  text-align: center;
}
.blog-cta h3 {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
}
.blog-cta p {
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.55;
}
.blog-cta-btn {
  display: inline-block;
  padding: .7rem 1.4rem;
  border: 1px solid var(--teal);
  border-radius: 999px;
  background: var(--teal);
  color: var(--band);
  font-family: var(--display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.blog-cta .blog-cta-btn:hover,
.blog-cta .blog-cta-btn:focus {
  background: var(--teal-bright);
  border-color: var(--teal-bright);
  color: var(--band);
  text-decoration: none;
}
.blog-creds {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .08em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--muted);
}
.blog-creds strong {
  display: block;
  letter-spacing: .14em;
  color: var(--ink);
}

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 1000px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }
  .blog-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .blog-search,
  .blog-creds {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .blog-featured {
    grid-template-columns: 1fr;
  }
  .blog-featured-photo {
    min-height: 0;
    aspect-ratio: 16 / 9;   /* stacked: the photo sets its own height again */
  }
  /* the grid becomes a swipeable row — one card and a peek of the next */
  .blog-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0 0 .75rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .blog-card {
    flex: 0 0 min(78vw, 300px);
    scroll-snap-align: start;
  }
  .blog-swipe-hint {
    display: block;
  }
}
@media (max-width: 640px) {
  .blog-side {
    grid-template-columns: 1fr;
  }
  .blog-featured-body {
    padding: 1.4rem;
  }
}

/* featured post without a photo: single column */
.blog-featured[data-layout="text"] {
  grid-template-columns: 1fr;
}

/* ══════════════════════════════════════════════════════════════════════
   Post page (blog_post.php) — reading column, article body, tags, share,
   related grid. Added 2026-09-14, replacing the page's 5 inline style=
   attributes and its 69-line inline <style> block. BlogController::post()
   now sets hero_title/hero_lede, so the tall hero prints the H1 — the blog
   family keeps the default .wrapper2 bookshelf photo on purpose, so there
   is no background-image override here.
   ══════════════════════════════════════════════════════════════════════ */

/* long titles: the tall-hero H1 is sized for shorter page titles elsewhere
   (About, Pricing…) — post titles run longer, so cap the size here */
.wrapper2[data-page="blog-post"] .hero3 h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

/* ── page frame ──────────────────────────────────────── */
.post-page {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1rem, 3vw, 2rem);
  overflow-x: clip;                /* the reveal translate must not widen the page */
}
.post-layout {
  max-width: 760px;
}
.post-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1.75rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-decoration: none;
}
.post-back:hover,
.post-back:focus {
  color: var(--teal);
  text-decoration: none;
}

/* ── featured image ──────────────────────────────────── */
.post-figure {
  margin: 0 0 1.75rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
}
.post-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── meta line ───────────────────────────────────────── */
.post-meta {
  margin: 0 0 2rem;
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.post-meta a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-decoration-color: rgba(42, 139, 130, .35);
  text-underline-offset: 3px;
}
.post-meta a:hover,
.post-meta a:focus {
  color: var(--teal);
  text-decoration-color: var(--teal);
}

/* ── article body — the raw CMS HTML ──────────────────── */
.post-body {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.post-body h2 {
  margin: 2.2rem 0 .8rem;
  font-size: 1.5rem;
}
.post-body h3 {
  margin: 1.8rem 0 .6rem;
  font-size: 1.22rem;
}
.post-body p {
  margin: 0 0 1.2rem;
}
.post-body ul,
.post-body ol {
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
}
.post-body li {
  margin-bottom: .4rem;
}
.post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
  border-radius: 6px;
}
.post-body blockquote {
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--teal);
  color: var(--ink);
  font-style: italic;
}
/* main.css paints every bare <a> white — the body's in-copy links (and the
   CMS glossary-term tooltip spans below) need the .copy-link teal treatment
   in both states or they render invisible on the paper background */
.post-body a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-decoration-color: rgba(42, 139, 130, .35);
  text-underline-offset: 3px;
}
.post-body a:hover,
.post-body a:focus {
  color: var(--teal-deep);
  text-decoration-color: var(--teal-deep);
}
/* glossary term tooltip span, injected server-side by Helpers/GlossaryLinker.php
   (data-toggle="tooltip", initialised by the layout's shared script) —
   dotted underline, the same look it used to hand-carry as an inline style */
.post-body .glossary-term {
  border-bottom: 1px dotted var(--teal);
  text-decoration: none;
  cursor: help;
}

/* ── tag chips ───────────────────────────────────────── */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.post-tags a {
  display: inline-block;
  padding: .3rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--display);
  font-size: .78rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.post-tags a:hover,
.post-tags a:focus {
  border-color: var(--teal);
  background: var(--teal-tint);
  color: var(--teal-deep);
}

/* ── share pills ─────────────────────────────────────── */
.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin: 0 0 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.post-share-label {
  margin: 0 .5rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-share-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--display);
  font-size: .78rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.post-share-link svg {
  width: 15px;
  height: 15px;
}
.post-share-link:hover,
.post-share-link:focus {
  border-color: var(--teal);
  background: var(--teal-tint);
  color: var(--teal-deep);
}

/* ── related posts (reuses .blog-grid / .blog-card from the listing) ── */
.post-related-heading {
  margin: 0 0 1.25rem;
  font-size: 1.3rem;
}
/* the listing's own @media(max-width:768px) rule turns bare .blog-grid into
   a swipeable flex row (its phone card-carousel) — reassert grid display
   here so the related section keeps its own 3/2/1 column count instead */
.post-related .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) {
  .post-related .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .post-related .blog-grid {
    grid-template-columns: 1fr;
  }
}