/* Renéra · Journal — MOBILE overrides (Carousel build)
   Scoped under .rn-m so it only touches the mobile build. The desktop grids
   (featured spread, archive grid/chips/toggle/pager) are not rendered on
   mobile — posts.php emits two horizontal scroll-snap "shelves" instead:
   "Just in" (full-width spotlight) and "The archive" (compact two-up poster).
   Dots are injected by posts-mobile.js, reusing the site .rn-cdots convention.
   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
   ========================================= */
.rn-m .rn-posts-hero { padding: 44px 0 40px !important; }
.rn-m .rn-posts-hero h1 {
  font-size: 46px !important;
  line-height: 1.04 !important;
  margin-bottom: 22px !important;
}
.rn-m .rn-posts-hero .rn-lead {
  font-size: 16px !important;
  margin-bottom: 0 !important;
}
.rn-m .rn-posts-hero .rn-eyebrow { margin-bottom: 22px !important; }

/* =========================================
   SHELF — a titled horizontal carousel
   ========================================= */
.rn-m .rn-shelf { padding: 30px 0 34px; }
.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;
}

/* The rail */
.rn-m .rn-rail {
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 22px 6px;       /* left/right gutter + peek of the next card */
  scroll-padding-left: 22px;
}
.rn-m .rn-rail::-webkit-scrollbar { display: none; }

/* Dot indicator (injected by posts-mobile.js — reuses the .rn-cdots site pattern) */
.rn-m .rn-cdots {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 18px;
}
.rn-m .rn-cdots__hint {
  font-family: var(--renera-font-mono); font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--renera-mute); margin-right: 8px;
}
.rn-m .rn-cdots__dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--renera-clay-300);
  transition: width .25s var(--renera-ease), background .25s var(--renera-ease);
}
.rn-m .rn-cdots__dot.is-active { width: 20px; background: var(--renera-clay-700); }

/* =========================================
   CONCEPT A — SPOTLIGHT (full-width swipe, one at a time)
   ========================================= */
.rn-m .rn-rail--spotlight { scroll-padding-left: 22px; }
.rn-m .rn-rail--spotlight > .rn-spot {
  flex: 0 0 86%;
  max-width: 360px;
  scroll-snap-align: center;
}
.rn-m .rn-spot {
  display: block; text-decoration: none;
  background: var(--renera-sand-100, #fff);
  border: 1px solid var(--renera-clay-300);
  border-radius: 18px; overflow: hidden;
  color: inherit;
}
.rn-m .rn-spot__media {
  position: relative; height: 240px;
  background: var(--renera-clay-200) center/cover no-repeat;
}
.rn-m .rn-spot__cat {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--renera-font-mono);
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--renera-paper); background: var(--renera-overlay-scrim); backdrop-filter: blur(4px);
  padding: 6px 11px; border-radius: 999px;
}
.rn-m .rn-spot__body { padding: 22px 22px 24px; }
.rn-m .rn-spot__meta {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--renera-olive-700); margin-bottom: 12px;
  display: flex; gap: 8px; align-items: center;
}
.rn-m .rn-spot__title {
  font-family: var(--renera-font-serif);
  font-weight: 400;
  font-size: 21px; line-height: 1.14; letter-spacing: -0.005em;
  color: var(--renera-ink); margin: 0 0 12px;
}
.rn-m .rn-spot__excerpt {
  font-size: 14.5px; line-height: 1.55; color: var(--renera-mute, #6b6258);
  margin: 0 0 18px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rn-m .rn-spot__cta {
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--renera-clay-700);
}

/* =========================================
   CONCEPT B — POSTER RAIL (compact two-up)
   ========================================= */
.rn-m .rn-rail--poster { gap: 14px; }
.rn-m .rn-rail--poster > .rn-poster {
  flex: 0 0 45%;
  max-width: 190px;
  scroll-snap-align: start;
}
.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. */