/* ==========================================================================
   Sticker Slab — Layout & site chrome
   Loaded LAST. Depends on vars.css → base.css → components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--ts-container);
  margin-inline: auto;
  padding-inline: var(--ts-space-5);
}
.container--narrow { max-width: var(--ts-container-narrow); }

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: var(--ts-space-4);
  z-index: 40;
  padding-top: var(--ts-space-4);
}
.site-header__inner {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--ts-space-5);
}
@media (max-width: 640px) {
  .site-header { top: var(--ts-space-3); padding-top: var(--ts-space-3); }
  .site-header__inner { padding-inline: var(--ts-space-3); }
}

/* --------------------------------------------------------------------------
   Site main
   -------------------------------------------------------------------------- */
.site-main {
  padding-top: var(--ts-space-7);
  padding-bottom: var(--ts-space-6);
}

/* --------------------------------------------------------------------------
   Layout: content + sidebar
   -------------------------------------------------------------------------- */
.layout {
  display: grid;
  gap: var(--ts-space-6);
  grid-template-columns: 1fr;
}
.has-sidebar .layout {
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .has-sidebar .layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
.layout__main { min-width: 0; }
.layout__sidebar { min-width: 0; }

/* --------------------------------------------------------------------------
   Feature area (homepage) + post grid
   -------------------------------------------------------------------------- */
.feature-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ts-space-4);
  margin-bottom: var(--ts-space-5);
}
.feature-heading h2 {
  font-size: var(--ts-fs-2xl);
  margin: 0;
}
.feature-heading__link {
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.post-grid {
  display: grid;
  gap: var(--ts-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Feature card spans full width on desktop */
.post-grid > .post-card--feature { grid-column: 1 / -1; }

/* Anchor targets in the main content flow — keep them below the
   sticky pill nav on smooth-scroll. */
#recent { scroll-margin-top: 120px; }

/* --------------------------------------------------------------------------
   Site footer — compact sticker-card, matches the rest of the theme.
   -------------------------------------------------------------------------- */
.site-footer {
  padding: var(--ts-space-6) 0 var(--ts-space-7);
  margin-top: var(--ts-space-6);
}
.site-footer__card {
  padding: var(--ts-space-6) var(--ts-space-5);
  display: grid;
  gap: var(--ts-space-4);
  justify-items: center;
  text-align: center;
}
.site-footer__title {
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: var(--ts-fs-2xl);
  line-height: 1.15;
  margin: 0;
}
.site-footer__desc {
  color: var(--ts-ink-soft);
  font-size: var(--ts-fs-sm);
  line-height: 1.55;
  max-width: 620px;
  margin: 0;
}
.site-footer__socials {
  display: flex;
  gap: var(--ts-space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--ts-space-2);
}
.site-footer__legal {
  width: 100%;
  padding-top: var(--ts-space-4);
  border-top: 1px solid var(--ts-ink-line);
  display: grid;
  gap: var(--ts-space-2);
  justify-items: center;
}
.site-footer__copyright {
  margin: 0;
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ts-ink-mute);
}
.site-footer__contact {
  margin: 0;
  font-family: var(--ts-font-body);
  font-size: 0.7rem;
  color: var(--ts-ink-mute);
}
.site-footer__contact a {
  color: var(--ts-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__contact a:hover {
  color: var(--ts-accent-1);
}

/* --------------------------------------------------------------------------
   Single post layout
   -------------------------------------------------------------------------- */
.post-layout {
  display: grid;
  gap: var(--ts-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .has-sidebar.tmpl-post .post-layout,
  .has-sidebar.tmpl-page .post-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
.post-layout__main { min-width: 0; }

/* --------------------------------------------------------------------------
   Comments — themed sticker-card wrapper around Ghost's {{comments}} widget.
   -------------------------------------------------------------------------- */
.comments-section {
  padding: clamp(var(--ts-space-5), 4vw, var(--ts-space-6));
  margin-top: var(--ts-space-8);
}
.comments-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ts-space-3);
  padding-bottom: var(--ts-space-4);
  border-bottom: 2px solid var(--ts-ink-line);
  margin-bottom: var(--ts-space-5);
}
.comments-section__title {
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: var(--ts-fs-xl);
  line-height: 1;
  margin: 0;
}
.comments-section__count {
  font-family: var(--ts-font-heading);
  font-weight: 700;
  font-size: var(--ts-fs-sm);
  line-height: 1;
  color: var(--ts-ink-soft);
  padding-block: calc(var(--ts-space-2) + var(--ts-pill-nudge))
                 calc(var(--ts-space-2) - var(--ts-pill-nudge));
  padding-inline: var(--ts-space-4);
  border: 2px solid var(--ts-ink);
  border-radius: var(--ts-radius-pill);
  background: var(--ts-bg);
  white-space: nowrap;
}
.comments-section__body {
  min-height: 4rem;
}

/* --------------------------------------------------------------------------
   Utility classes used sparingly by templates
   -------------------------------------------------------------------------- */
.mt-6 { margin-top: var(--ts-space-6); }
.mb-6 { margin-bottom: var(--ts-space-6); }
.text-center { text-align: center; }
.stack { display: grid; gap: var(--ts-space-4); }
.stack-lg { display: grid; gap: var(--ts-space-6); }

/* --------------------------------------------------------------------------
   Homepage feature slot: allow big-feature card when show_feature_area
   -------------------------------------------------------------------------- */
.feature-slot { margin-bottom: var(--ts-space-6); }

/* --------------------------------------------------------------------------
   Home magazine sections (Recent / Podcasts / News / Articles). Each is a
   teaser row of 4 posts in a 2×2 grid — the feed's default 2-up .post-grid
   handles the columns (2-across ≥640px, stacked below), so no grid override
   here, only the section spacing.
   -------------------------------------------------------------------------- */
.home-section { margin-bottom: var(--ts-space-7); }

/* Recent is the exception: a single 3-across row on desktop, and its cards
   are stripped down to photo + headline + author + date (no excerpt, no
   reading time) to stay compact at three across. Below 640px it stacks and
   shows the full card like everywhere else. The other home sections keep the
   default 2×2. */
@media (min-width: 640px) {
  .home-recent .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-recent .post-card__excerpt,
  .home-recent .post-card__readtime { display: none; }
}

/* The home mid/bottom banners carry .promo-band--home-mid / --home-bottom as
   CSS hooks for independent targeting; the responsive show/hide lives on the
   shared .promo-band__m / __d rules (defined below). No rule needed here
   unless/until they need placement-specific styling. */

/* --------------------------------------------------------------------------
   Home 1×1 ad — responsive placement. On desktop (sidebar beside, ≥960px)
   the ad lives in the sidebar (.promo-slot--side). Below 960px the sidebar
   stacks, so that copy is hidden and the ad shows under the Featured section
   instead (.promo-slot--feature). Exactly one copy is visible per viewport;
   main.js loads only the visible one. (Layout-only rules on neutral wrapper
   classes — the ad interior styles itself inside the iframe.)
   -------------------------------------------------------------------------- */
.promo-slot--feature { display: none; margin-bottom: var(--ts-space-6); }
@media (max-width: 959px) {
  .promo-slot--side { display: none; }
  .promo-slot--feature { display: block; }
}

/* --------------------------------------------------------------------------
   404 / error page. Deliberately NOT wrapped in .layout — that grid reserves
   a 320px sidebar track when the has-sidebar body class is on, which would
   leave an empty column here since the 404 renders no sidebar.
   -------------------------------------------------------------------------- */
.error-page {
  display: grid;
  justify-items: center;
  gap: var(--ts-space-4);
  padding: clamp(var(--ts-space-5), 5vw, var(--ts-space-7));
  text-align: center;
}
.error-page__code {
  margin: 0;
  font-family: var(--ts-font-heading);
  font-weight: 800;
  font-size: clamp(var(--ts-fs-4xl), 12vw, var(--ts-fs-5xl));
  line-height: 1;
}
.error-page__message {
  max-width: 620px;
  margin: 0;
  font-size: var(--ts-fs-lg);
  color: var(--ts-ink-soft);
}
.error-page__meme {
  width: 100%;
  max-width: 360px;
  height: auto;
  border: var(--ts-border-w) solid var(--ts-ink);
  border-radius: var(--ts-radius);
  box-shadow: var(--ts-shadow-sticker-sm);
}
.error-recent { margin-top: var(--ts-space-7); }
/* Recent-posts row is 3 across (scoped override of the feed's default 2-up
   grid). Higher specificity than .post-grid, so it wins without !important;
   below 640px it stays single-column so three cards aren't crammed. */
@media (min-width: 640px) {
  .error-recent .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Post tags on single post
   -------------------------------------------------------------------------- */
.post-tags {
  display: flex;
  gap: var(--ts-space-2);
  flex-wrap: wrap;
  margin-top: var(--ts-space-5);
}

/* Banner ad placements (4×1) — spacing + responsive variant switching only,
   scoped to these placements (no global .cx-unit / .cx-embed rules; the
   sticker-card supplies the frame).
   Each placement emits a mobile and a desktop slot; exactly one is visible
   per viewport at the same 960px breakpoint used for the sidebar/home ad,
   and main.js only loads the visible copy (defer=true).
   Class names are neutral by design — a wrapper ending in "-ad" matches
   generic ad-blocker cosmetic filters and would hide the ad with it. */
.promo-band { margin-top: var(--ts-space-6); }

/* Home mid banner sits between two home sections (Recent → Podcasts), so it
   needs bottom spacing too — otherwise the ad + its meta row butt up against
   the next section's heading. Matches the .home-section rhythm. Scoped to the
   mid placement; the other banners are followed by elements that already
   supply their own top spacing (post-footer-grid, the site footer, etc.). */
.promo-band--home-mid { margin-bottom: var(--ts-space-7); }

/* Desktop default: show __d, hide __m. */
.promo-band__m { display: none; }

@media (max-width: 959px) {
  .promo-band__d { display: none; }
  .promo-band__m { display: block; }
}