/* Renéra · Journal — MOBILE overrides (Carousel build)
   Scoped under .rn-m so it only touches the mobile build. The desktop grids
   (archive grid/chips/toggle/pager) are not rendered on mobile — posts.php
   emits one "shelf" instead: a compact two-up poster grid carrying every post,
   scrolled with the page rather than swiped.
   Inline styles win over normal CSS, so structural/size rules use !important. */

.rn-m {
  background: var(--renera-sand-300);
  min-height: 100%;
}

/* Tighter gutters everywhere */
.rn-m .container,
.rn-m .container-mid,
.rn-m .container-narrow {
  max-width: 100% !important;
  padding: 0 22px !important;
}

/* =========================================
   HERO (editorial) — clean masthead, no stat pill
   Kept deliberately short: at 361px the old masthead ate 54% of a 664px
   viewport, so the first article sat below the fold. Mirrors the compact
   desktop hero (posts.php) — same intent, portrait proportions.
   ========================================= */
.rn-m .rn-posts-hero { padding: 28px 0 26px !important; }
.rn-m .rn-posts-hero h1 {
  font-size: 34px !important;
  line-height: 1.06 !important;
  margin-bottom: 12px !important;
}
.rn-m .rn-posts-hero .rn-lead {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}
.rn-m .rn-posts-hero .rn-eyebrow { margin-bottom: 12px !important; }

/* =========================================
   SHELF — a titled horizontal carousel
   ========================================= */
.rn-m .rn-shelf { padding: 24px 0 28px; }
.rn-m .rn-shelf + .rn-shelf { border-top: 1px solid var(--renera-clay-300); }

.rn-m .rn-shelf__head {
  padding: 0 22px;
  margin-bottom: 18px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
/* Shelf titles share the hero's .rn-h-display treatment (Recoleta serif,
   weight 400, -0.015em / 1.04) — this only sets the shelf-specific size. */
.rn-m .rn-shelf__title {
  font-size: 24px;
  margin: 0;
}
.rn-m .rn-shelf__count {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--renera-olive-700); white-space: nowrap; flex: 0 0 auto;
}

/* =========================================
   POSTER GRID (compact two-up) — the only mobile shelf
   Replaced the horizontal swipe rail 2026-08-13: every post is now reached by
   scrolling the page, so nothing sits off-screen behind a gesture and the
   injected dot pager is gone with it.
   .rn-m covers everything up to 880px (responsive-chrome.js), so the grid
   gains a third column on tablets — two columns that wide would stretch each
   card far past its 150px image.
   ========================================= */
.rn-m .rn-poster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 14px;
  padding: 0 22px;
}
@media (min-width: 600px) {
  .rn-m .rn-poster-grid { grid-template-columns: repeat(3, 1fr); }
}
.rn-m .rn-poster {
  display: block; text-decoration: none; color: inherit;
}
.rn-m .rn-poster__media {
  height: 150px; border-radius: 14px; overflow: hidden;
  background: var(--renera-clay-200) center/cover no-repeat;
  border: 1px solid var(--renera-clay-300);
  margin-bottom: 12px;
}
.rn-m .rn-poster__meta {
  font-family: var(--renera-font-mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--renera-olive-700); margin-bottom: 6px;
}
.rn-m .rn-poster__title {
  font-family: var(--renera-font-serif);
  font-weight: 400;
  font-size: 15px; line-height: 1.2; letter-spacing: -0.005em;
  color: var(--renera-ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* =========================================
   NEWSLETTER
   ========================================= */
.rn-m #connect { padding-top: 56px !important; padding-bottom: 56px !important; }
.rn-m #connect .container {
  grid-template-columns: 1fr !important;
  gap: 32px !important;
}
.rn-m #connect .rn-h-2 { font-size: 32px !important; }
.rn-m #connect form { max-width: 100% !important; }

/* The mobile footer is the shared template-parts/mobile-footer.php partial
   (.rnm-footer), styled by assets/css/mobile-footer.css. No page-level footer
   overrides here — a `.rn-m footer` rule would out-specify the shared partial
   and reach into markup that no longer renders on mobile. */