/* Arik Housley — arik-blog.css (the blog and podcast lists)
   The post lists at /blog/ and /podcast/ (two categories). Loaded only there (functions.php). Token
   values only. /podcast/ has its own Loop Template with the same classes plus the listen-on buttons.

   Built from GP Elements: "Blog + Podcast: full-width layout" (Layout 1586, so the page has no GP
   padding and .ah-container sets the width), "Blog: loop template (featured + grid)" (1587) and
   "Podcast: loop template (featured + grid)" (1688): Block Elements of type Loop Template, each a
   GenerateBlocks Query inheriting the archive query. Rob, 2026-10-11:
   - Page 1: the newest post is featured on a mist panel, narrower than the page and asymmetric.
     Desktop: the panel covers two-thirds of the width; the photo breaks out past its right edge
     and hangs below it. Phones and tablets: the photo sits inset from the left and overlaps the top
     of a panel that bleeds off the left edge of the screen.
   - The rest: cards, three across (two under 1024px, one under 700px).
   - Page sizes (13 on page 1, 12 after) are set in functions.php, so every row is full. */

.ah-blog { padding-block: var(--ah-s-8) var(--ah-s-12); }
.ah-blog__head { margin-bottom: var(--ah-s-8); }
.ah-blog__lead { max-width: 40ch; margin: 0; }
/* /podcast/ and /blog/ headers (Rob, 2026-10-11, second pass): the blurb on the left, the buttons
   in one row on the right, centred on it. /podcast/ has the listen-on pattern (Substack, Spotify,
   RSS feed, Subscribe; also on the homepage), /blog/ its own Substack and RSS feed buttons. Under
   1024px the row no longer fits beside the blurb: the blurb, then the buttons (the reading order). */
.ah-podcast-intro,
.ah-blog-intro { display: grid; gap: var(--ah-s-4); }
@media (min-width: 1024px) {
  .ah-podcast-intro,
  .ah-blog-intro {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--ah-s-6);
  }
  .ah-podcast-intro .ah-btn-row,
  .ah-blog-intro .ah-btn-row { flex-wrap: nowrap; }
}
.ah-blog__empty { margin: 0; }

/* ---- The grid ---------------------------------------------------------------------------- */
.ah-post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ah-s-6) var(--ah-s-3);
}
@media (min-width: 700px) {
  .ah-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ah-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--ah-s-8); }
}

/* ---- A card ------------------------------------------------------------------------------ */
.ah-post { display: flex; flex-direction: column; gap: var(--ah-s-2); margin: 0; }
.ah-post__media { margin: 0; }
.ah-post__media a { display: block; border-radius: var(--ah-radius-card); }
.ah-post__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 30%;            /* Arik's covers are mostly people: keep heads in frame */
  border-radius: var(--ah-radius-card);
  background: var(--ah-mist);          /* while it loads */
}
/* Posts with no cover on Substack (8 of 77): GenerateBlocks drops the image, leaving the wrapper
   empty. Fill it with Arik's signature on mist (the medium-green variant: DESIGN.md logo table),
   so the grid keeps its rhythm. */
.ah-post__media:empty {
  aspect-ratio: 3 / 2;
  border-radius: var(--ah-radius-card);
  background: var(--ah-mist) url("/wp-content/uploads/2026/02/Arik-Housley-Sign_medium-green_600.png") center / 45% auto no-repeat;
}
.ah-post__body { display: flex; flex-direction: column; gap: var(--ah-s-1); }
.ah-post__date {
  font-family: var(--ah-font-label);
  font-size: var(--ah-fs-meta);
  font-weight: var(--ah-fw-label);
  letter-spacing: var(--ah-track-label);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ah-eyebrow);
  margin: 0;
}
.ah-post__title { font-size: var(--ah-fs-lead); line-height: var(--ah-lh-heading); margin: 0; }
/* Titles stay ink; the link mark (gold-deep underline) appears on hover, or when the photo is
   hovered, since the photo links to the same post. */
.ah-post__title a {
  color: var(--ah-fg-heading);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--ah-ul-rest);
  text-underline-offset: var(--ah-ul-offset);
  text-decoration-skip-ink: auto;
  transition: text-decoration-color var(--ah-speed) var(--ah-ease), text-decoration-thickness var(--ah-speed) var(--ah-ease);
}
.ah-post__title a:hover,
.ah-post__title a:focus-visible,
.ah-post:has(.ah-post__media a:hover) .ah-post__title a {
  text-decoration-color: var(--ah-ul-color);
  text-decoration-thickness: var(--ah-ul-hover);
}
.ah-post__excerpt {
  margin: 0;
  color: var(--ah-fg-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* ---- The featured post: page 1, first card ----------------------------------------------- */
/* Phones and tablets: the photo inset from the left, overlapping a mist panel that bleeds off the
   left edge of the screen and stops short of the right one. */
body:not(.paged) .ah-post-grid > .ah-post:first-child {
  grid-column: 1 / -1;
  gap: 0;
}
body:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__media {
  position: relative;
  z-index: 1;
  margin: 0 0 calc(-1 * var(--ah-s-6)) var(--ah-s-3);
}
body:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__body {
  background: var(--ah-mist);
  margin: 0 var(--ah-s-3) 0 calc(-1 * var(--ah-gutter));
  padding: calc(var(--ah-s-6) + var(--ah-s-3)) var(--ah-s-3) var(--ah-s-4) var(--ah-gutter);
  border-radius: 0 var(--ah-radius-card) var(--ah-radius-card) 0;
  gap: var(--ah-s-2);
}
body:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__title { font-size: var(--ah-fs-h3); }
/* The featured post says what it is (Rob, 2026-10-11): "Latest episode" on /podcast/, "Latest post"
   on /blog/ (their category body classes), a small teal tag in the eyebrow type above the date. */
body.category-podcast:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__body::before,
body.category-blog:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__body::before {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--ah-radius);
  background: var(--ah-teal);
  color: var(--ah-white);
  font-family: var(--ah-font-label);
  font-size: var(--ah-fs-meta);
  font-weight: var(--ah-fw-label);
  letter-spacing: var(--ah-track-label);
  text-transform: uppercase;
  line-height: 1.4;
}
body.category-podcast:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__body::before { content: "Latest episode"; }
body.category-blog:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__body::before { content: "Latest post"; }
body:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__excerpt { -webkit-line-clamp: 4; line-clamp: 4; }

@media (min-width: 700px) {
  body:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__media { margin-left: var(--ah-s-8); }
  body:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__body { margin-right: var(--ah-s-8); }
}

/* Desktop: a 12-column composition. The panel spans columns 1-9; the text sits on it in 1-5;
   the photo spans 6-11, starting 48px below the panel's top and hanging 48px below its bottom.
   Column 12 stays empty, so the feature is narrower than the grid beneath it. */
@media (min-width: 1024px) {
  body:not(.paged) .ah-post-grid > .ah-post:first-child {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: var(--ah-s-6) auto var(--ah-s-6) var(--ah-s-6);
    column-gap: var(--ah-s-3);
  }
  body:not(.paged) .ah-post-grid > .ah-post:first-child::before {
    content: "";
    grid-column: 1 / 10;
    grid-row: 1 / 4;
    background: var(--ah-mist);
    border-radius: var(--ah-radius-card);
  }
  body:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__media {
    grid-column: 6 / 12;
    grid-row: 2 / 5;
    align-self: start;
    margin: 0;
  }
  body:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__body {
    grid-column: 1 / 6;
    grid-row: 2;
    align-self: center;
    position: relative;
    z-index: 1;
    background: none;
    margin: 0;
    padding: 0 0 0 var(--ah-s-6);
    border-radius: 0;
  }
  body:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__title { font-size: var(--ah-fs-h2); }
  body:not(.paged) .ah-post-grid > .ah-post:first-child .ah-post__excerpt {
    font-family: var(--ah-font-display);
    font-weight: var(--ah-fw-quote);
    font-size: var(--ah-fs-lead);
    line-height: var(--ah-lh-lead);
    color: var(--ah-fg);
  }
}

/* ---- Pagination (GenerateBlocks prints WordPress's paginate_links: numbers only) ------------ */
.ah-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ah-s-1);
  margin-top: var(--ah-s-8);
}
.ah-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--ah-s-1);
  border-radius: var(--ah-radius);
  font-weight: var(--ah-fw-strong);
  color: var(--ah-link);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--ah-ul-rest);
  text-underline-offset: var(--ah-ul-offset);
  transition: text-decoration-color var(--ah-speed) var(--ah-ease), color var(--ah-speed) var(--ah-ease);
}
.ah-pagination a.page-numbers:hover,
.ah-pagination a.page-numbers:focus-visible {
  color: var(--ah-link-hover);
  text-decoration-color: var(--ah-ul-color);
  text-decoration-thickness: var(--ah-ul-hover);
}
.ah-pagination .page-numbers.current { background: var(--ah-mist); color: var(--ah-fg-heading); }
.ah-pagination .page-numbers.dots { color: var(--ah-fg-muted); }

/* ---- Newsletter signup after every post ----------------------------------------------------
   GP Block Element "Post: newsletter signup (Substack embed)" (1690), hooked to
   generate_after_entry_content before the post's footer meta. Arik's own sign-off on the left;
   Substack's embedded form on the right (its button is already the site teal, #175C67, Arik's
   Substack accent). An iframe can't size itself: Substack centers its form vertically, needing
   ~371px at 320px wide and ~332px at 600px, so the frame is given a little more at each width. */
.ah-signup {
  display: grid;
  gap: var(--ah-s-3);
  align-items: center;
  margin-top: var(--ah-s-8);
  padding: var(--ah-s-3);
  background: var(--ah-mist);
  border-radius: var(--ah-radius-card);
}
.ah-signup__title { font-size: var(--ah-fs-h3); margin: 0 0 var(--ah-s-1); }
.ah-signup__text { color: var(--ah-fg-muted); margin: 0; }
.ah-signup__form { display: block; width: 100%; height: 420px; border: 0; background: transparent; }
@media (min-width: 600px) {
  .ah-signup { padding: var(--ah-s-6); }
  .ah-signup__form { height: 360px; }
}
@media (min-width: 900px) {
  .ah-signup { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: var(--ah-s-6); }
}

/* ---- Tag pages and search results ----------------------------------------------------------
   One Loop Template for both ("Tags + search", 1696), the same featured + grid as the blog. Its
   header carries both eyebrows and a search box; the page type picks what shows. The h1 is
   {{archive_title}}: the tag's name, or the search query. Cards name their kind ({{ah_card_meta}},
   functions.php), because these pages mix blog posts, episodes and pages. */
.ah-list__eyebrow--tag,
.ah-list__eyebrow--search,
.ah-list__search { display: none; }
body.tag .ah-list__eyebrow--tag,
body.search .ah-list__eyebrow--search,
body.search .ah-list__search { display: block; }
body.search .ah-list__title::before { content: "\201C"; }
body.search .ah-list__title::after { content: "\201D"; }

/* The search box: the site's form field and primary button (tokens .ah-field__input, .ah-btn--primary). */
.ah-list__search { max-width: 36rem; margin-top: var(--ah-s-4); }
.ah-list__search .wp-block-search__inside-wrapper { display: flex; gap: var(--ah-s-1); padding: 0; border: 0; }
.ah-list__search .wp-block-search__input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--ah-text);
  background: var(--ah-white);
  border: 1px solid var(--ah-line-strong);
  border-radius: var(--ah-radius);
  padding: 12px 14px;
}
.ah-list__search .wp-block-search__button {
  margin: 0;
  font-family: var(--ah-font-text);
  font-size: 1rem;
  font-weight: var(--ah-fw-button);
  letter-spacing: var(--ah-track-button);
  line-height: 1.2;
  padding: 14px 26px;
  color: var(--ah-white);
  background: var(--ah-teal);
  border: 0;
  border-radius: var(--ah-radius);
  cursor: pointer;
  transition: background-color var(--ah-speed) var(--ah-ease);
}
.ah-list__search .wp-block-search__button:hover,
.ah-list__search .wp-block-search__button:focus-visible { background: var(--ah-teal-deep); }

/* ---- Single posts (Rob, 2026-10-11) --------------------------------------------------------
   The page width matches every other page: GP Layout element "Posts: full-width layout" (1699)
   drops GP's own 1100px column, and this puts the site container back. Everything runs down the
   middle (Rob: "content right down the middle"): the text at the reading measure (--ah-measure, 55ch:
   ~68 characters a line, ~660px) centred on desktop, its lines left-aligned, and the title
   left-aligned on the same edge, free to run wider to the right. A podcast's video (or Substack's audio
   player) and the newsletter signup keep the full page width. */
/* .one-container in the selector outranks GP's ".one-container:not(.page) .inside-article" (padding 0). */
.one-container.single-post .inside-article {
  max-width: var(--ah-container);
  margin-inline: auto;
  padding: var(--ah-s-8) var(--ah-gutter) var(--ah-s-12);
}
@media (min-width: 900px) {
  /* The title starts where the text column starts (Rob: "left-aligned with the content column")
     and may run 2 x 96px further right, so it still reads wider than the text. */
  .single-post .entry-header,
  .single-post .entry-content > *,
  .single-post footer.entry-meta { max-width: var(--ah-measure); margin-inline: auto; }
  .single-post .entry-title { margin-right: calc(-2 * var(--ah-s-12)); }
  /* GP sets the footer meta at 85%, which would make its "ch" (and so its column) smaller; size it
     like the text so it shares the column's edges, and shrink its contents instead. */
  .single-post footer.entry-meta { font-size: var(--ah-fs-base); }
  .single-post footer.entry-meta > * { font-size: 0.85em; }
  .single-post .entry-content > .wp-block-embed,
  .single-post .entry-content > .ah-substack-audio { max-width: none; }
}

/* ---- Media (/media/, Rob 2026-10-11) -----------------------------------------------------
   The lists' header (title with the bar, a blurb) and the same cards, two across and none
   featured. A press logo sits whole on mist in the card's image slot instead of being cropped. */
.ah-media-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ah-s-6) var(--ah-s-3); }
@media (min-width: 700px) {
  .ah-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ah-post__img--logo { object-fit: contain; object-position: center; padding: 12%; box-sizing: border-box; }