/* Renéra · Our Ingredients — MOBILE reflow (phones + tablets)
   Layered after chrome.css + ingredients.css when body.rn-m. The shared
   mobile header comes from mobile-header.css; this file collapses the desktop
   two-column grids to a single column, rescales type, and turns Key Actives +
   Fusion Blend into native scroll-snap swipe carousels (dots injected by
   ingredients-mobile.js). Inline styles win, so structural rules use !important.
   Section ids/structure match page-templates/ingredients.php. */

.rn-m { background: var(--renera-sand-300); }

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

/* Section vertical rhythm */
.rn-m #ing-hero      { padding: 40px 0 44px !important; }
.rn-m #collagen      { padding: 72px 0 56px !important; }
.rn-m #postbiotic    { padding: 64px 0 !important; }
.rn-m #actives,
.rn-m #fusion        { padding: 60px 0 !important; }
.rn-m #sourcing      { padding: 60px 0 !important; }
.rn-m #connect       { padding: 60px 0 !important; }

/* ---- HERO ---- */
.rn-m #ing-hero > .container {
  grid-template-columns: 1fr !important;
  gap: 44px !important;
  align-items: start !important;
}
.rn-m #ing-hero h1 { font-size: 44px !important; line-height: 1.02 !important; margin-bottom: 24px !important; }
.rn-m #ing-hero .rn-lead { font-size: 15.5px !important; }
.rn-m #ing-hero .rn-baroque-corner { display: none !important; }
/* stamps: 3 -> 2 columns, smaller circles */
.rn-m #ing-hero > .container > div:last-child {
  grid-template-columns: 1fr 1fr !important;
  gap: 20px 14px !important;
}
.rn-m #ing-hero > .container > div:last-child > div > div:first-child {
  width: 104px !important; height: 104px !important;
}

/* ---- 01 · MARINE COLLAGEN ---- */
.rn-m #collagen > .container {
  grid-template-columns: 1fr !important;
  gap: 64px !important;
}
.rn-m #collagen > .container > div:first-child > span:first-child {
  font-size: 120px !important; top: -16px !important;
}
.rn-m #collagen > .container > div:first-child img[alt] {
  height: 380px !important;
}
.rn-m #collagen .rn-stat { font-size: 24px !important; }
.rn-m #collagen .rn-h-2 { font-size: 34px !important; }
.rn-m #collagen .rn-lead-italic { font-size: 17px !important; }

/* ---- 02 · POSTBIOTIC ---- */
.rn-m #postbiotic > img { width: 90px !important; height: 90px !important; top: 32px !important; }
.rn-m #postbiotic .container > div:first-child { margin-bottom: 48px !important; }
.rn-m #postbiotic .rn-h-2 { font-size: 32px !important; }
.rn-m #postbiotic .container > div:last-child {
  grid-template-columns: 1fr !important;
  gap: 36px !important;
}
/* Stacked order: imagery carousel first, numbered list second. */
.rn-m #postbiotic .container > div:last-child > .rn-ingcar { order: -1; }
.rn-m #postbiotic .rn-ingcar__slide { height: 380px !important; }

/* Imagery-carousel nav (sections 01 + 02): compact the centered cluster
   ([prev] dots [next]) on phones so it clears the absolute "01 / NN" counter
   down to 320px-wide viewports. */
.rn-m .rn-ingcar__nav { gap: 14px; }
.rn-m .rn-ingcar__btn { width: 40px; height: 40px; }
.rn-m .rn-ingcar__count { right: 0; font-size: 10px; }

/* ---- 03 · KEY ACTIVES ---- */
.rn-m #actives > .container > div:first-child {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  margin-bottom: 40px !important;
}
.rn-m #actives .rn-h-2 { font-size: 32px !important; }
/* cards 3 stacked -> horizontal swipe carousel (peek next) */
.rn-m #actives > .container > div:nth-child(2) {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  gap: 14px !important;
  margin: 0 -20px !important;
  padding: 4px 20px 10px !important;
  scroll-padding: 0 20px;
}
.rn-m #actives > .container > div:nth-child(2)::-webkit-scrollbar { display: none; }
.rn-m #actives > .container > div:nth-child(2) { scrollbar-width: none; }
.rn-m #actives > .container > div:nth-child(2) > article {
  flex: 0 0 84% !important;
  scroll-snap-align: center;
  min-height: 0 !important;
}
.rn-m #actives > .container > div:nth-child(2) > article > div:first-child {
  height: 200px !important;
}

/* ---- 04 · FUSION BLEND ---- */
.rn-m #fusion .rn-h-2 { font-size: 32px !important; }
.rn-m #fusion .rn-lead-italic { font-size: 16px !important; }
/* 8 cards -> 2-row horizontal swipe carousel (4 columns) */
.rn-m #fusion > .container > div:nth-child(2) {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-rows: 1fr 1fr !important;
  grid-template-columns: none !important;
  grid-auto-columns: 66% !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  gap: 12px !important;
  margin: 0 -20px !important;
  padding: 4px 20px 10px !important;
  scroll-padding: 0 20px;
}
.rn-m #fusion > .container > div:nth-child(2)::-webkit-scrollbar { display: none; }
.rn-m #fusion > .container > div:nth-child(2) { scrollbar-width: none; }
.rn-m #fusion > .container > div:nth-child(2) > article {
  padding: 20px !important; min-height: 0 !important;
  scroll-snap-align: start;
}
/* footer rule row wraps */
.rn-m #fusion > .container > div:last-child { flex-wrap: wrap; gap: 12px !important; }
.rn-m #fusion > .container > div:last-child hr { max-width: 60px !important; }

/* Carousel dots (injected by ingredients-mobile.js). Desktop shows a static
   3-across grid — nothing scrolls — so the pager only renders under .rn-m. */
.rn-cdots { display: none; }
.rn-m .rn-cdots { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; }
.rn-cdots__dot { width: 6px; height: 6px; border-radius: 50%;
  background: var(--renera-clay-300); transition: background .2s, width .2s; }
.rn-cdots__dot.is-active { background: var(--renera-olive-700); width: 18px; border-radius: 99px; }

/* ---- 05 · SOURCING ---- */
.rn-m #sourcing > .container > div:first-child {
  grid-template-columns: 1fr !important;
  gap: 28px !important;
  margin-bottom: 48px !important;
}
.rn-m #sourcing .rn-h-2 { font-size: 32px !important; }
.rn-m #sourcing > .container > div:nth-child(2) {
  grid-template-columns: 1fr 1fr !important;
}
.rn-m #sourcing > .container > div:nth-child(2) > div {
  padding: 28px 20px !important;
  border-right: 1px solid var(--renera-clay-300) !important;
  border-bottom: 1px solid var(--renera-clay-300) !important;
}
.rn-m #sourcing > .container > div:nth-child(2) > div:nth-child(2n) { border-right: 0 !important; }
.rn-m #sourcing > .container > div:nth-child(2) > div:nth-last-child(-n+2) { border-bottom: 0 !important; }
.rn-m #sourcing > .container > div:nth-child(2) > div h4 { font-size: 24px !important; }

/* ---- NEWSLETTER ---- */
.rn-m #connect > .container {
  grid-template-columns: 1fr !important;
  gap: 36px !important;
}
.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. */