/* Renéra · Our Story — MOBILE reflow (phones only)
   Layered on top of design-system.css + chrome.css when the Our Story page
   is served to a phone (body.rn-m). The shared mobile header comes from
   mobile-header.css; this file only reflows the Our Story sections into a single
   column and rescales the editorial type. Scoped under .rn-m / mobile-only ids
   so it can never touch the desktop layout. Inline section styles win over
   normal CSS, so structural/size rules use !important. */

/* ======================================================
   .rn-m reflow — collapse the desktop grids + rescale type
   (markup ids/structure match page-templates/our-story.php)
   ====================================================== */
.rn-m { background: var(--renera-sand-300); }

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

/* Collapse known section grids to one column */
.rn-m #story-hero .container > div:first-child,   /* hero title / lede */
.rn-m #founder .container > div,                  /* founder split */
.rn-m #vision .container,                          /* vision split */
.rn-m #mission .container,                         /* mission split */
.rn-m #connect .container {                        /* newsletter split */
  grid-template-columns: 1fr !important;
  gap: 36px !important;
  align-items: start !important;
}

/* Vertical section rhythm */
.rn-m #story-hero { padding: 24px 0 8px !important; }
.rn-m #founder,
.rn-m #vision,
.rn-m #mission,
.rn-m #promise,
.rn-m #connect,
.rn-m .rn-section { padding: 60px 0 !important; }

/* ---- HERO ---- */
.rn-m #story-hero h1 { font-size: 56px !important; line-height: 1 !important; }
.rn-m #story-hero .rn-lead-italic { font-size: 19px !important; }
.rn-m #story-hero figure > div:first-child { height: 260px !important; }
.rn-m #story-hero figcaption {
  flex-direction: column; align-items: flex-start !important;
  gap: 6px !important; padding: 16px 18px !important; font-size: 10px !important;
}
/* stat strip: 4 → 2 columns with internal hairlines */
.rn-m #story-hero .container > div:last-child {
  grid-template-columns: 1fr 1fr !important;
  margin-top: 40px !important;
}
.rn-m #story-hero .container > div:last-child > div {
  padding: 24px 18px !important;
  border-right: 1px solid var(--renera-clay-300) !important;
  border-bottom: 1px solid var(--renera-clay-300) !important;
}
.rn-m #story-hero .container > div:last-child > div:nth-child(2n) { border-right: 0 !important; }
.rn-m #story-hero .container > div:last-child > div:nth-last-child(-n+2) { border-bottom: 0 !important; }
.rn-m #story-hero .rn-stat { font-size: 30px !important; }

/* ---- FOUNDER LETTER ---- */
.rn-m #founder aside { position: static !important; top: auto !important; }
.rn-m #founder aside > div:first-child > div { height: 300px !important; }
.rn-m #founder h2.rn-h-2 { font-size: 32px !important; margin-bottom: 28px !important; }
.rn-m #founder article > div > p:first-child > span:first-child {
  font-size: 62px !important; padding: 6px 12px 0 0 !important;
}
.rn-m #founder article > div { font-size: 16px !important; line-height: 1.75 !important; }

/* ---- VISION / MISSION ---- */
.rn-m .rn-h-2 { font-size: 32px !important; }
.rn-m #vision .container > div:last-child > div { height: 320px !important; }
.rn-m #mission .container > div:first-child > div { height: 280px !important; }
/* image sits below the copy on both panels */
.rn-m #vision .container > div:first-child  { order: 1; }
.rn-m #vision .container > div:last-child   { order: 2; }
.rn-m #mission .container > div:first-child { order: 2; }
.rn-m #mission .container > div:last-child  { order: 1; }
/* hide the off-canvas baroque ornament that would force a scrollbar */
.rn-m #mission .container > div:first-child > img { display: none !important; }

/* ---- PROMISE ---- */
.rn-m #promise > .container > div { padding: 40px 20px !important; }
.rn-m #promise p:first-of-type { font-size: 34px !important; }
.rn-m #promise p:last-of-type  { font-size: 16px !important; }

/* ---- NEWSLETTER ---- */
.rn-m #connect .rn-h-2 { font-size: 30px !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. */