/* ============================================================
   MOTHERCRAFT — mobile-only responsive fixes
   Loaded LAST so these rules win the cascade over inline styles.
   Every rule is wrapped in a max-width media query: desktop is
   visually unchanged. (Exception: the two light-hero nav contrast
   fixes live as per-page <style> blocks, not here, because that is
   a contrast bug that applies at all widths.)
   ============================================================ */

/* ---- A. Nav + footer tap targets (all pages) ---- */
@media (max-width: 600px) {
  .mc-nav__links a { padding: 8px 4px !important; }
  footer a { display: inline-block !important; padding: 7px 2px !important; }
}

/* ---- B. Reading-page eyebrow clipping ----
   The eyebrow span sets white-space:nowrap + uppercase + a wide
   letter-spacing (0.24em / 0.26em), which runs it off-screen on
   phones. Allow it to wrap and tighten the tracking.
   The extra letter-spacing: 0.2 token keeps this OFF the peach pill
   badges (those use letter-spacing: 0.16em) and OFF the nav links
   (those are nowrap but not uppercase). */
@media (max-width: 480px) {
  [style*="white-space: nowrap"][style*="uppercase"][style*="letter-spacing: 0.2"] {
    white-space: normal !important;
    letter-spacing: 0.12em !important;
  }
}

/* ---- C. Gift card form inputs (library.html) ----
   16px prevents iOS Safari auto-zoom on focus. (#gc-custom is
   already 16px.) */
@media (max-width: 600px) {
  #f-to, #f-from, #f-msg { font-size: 16px !important; }
}

/* ---- D. method.html numbered sections ----
   The 01/02/03 numeral sits in a grid column beside the text and
   squeezes the body copy. Collapse the two-column grid to one column
   on mobile so the text gets full width. */
@media (max-width: 600px) {
  [style*="grid-template-columns: minmax(0px, 0.72fr) minmax(0px, 1.7fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---- E. library.html guide cards ----
   The 5-up guide grid drops to 2-up at 560px, which clips the right
   card's "Get guide" button on very narrow phones. Go single column
   below 380px. */
@media (max-width: 380px) {
  .guide-grid { grid-template-columns: 1fr !important; }
}

/* ---- F. library.html quick-look modal close button ----
   .ql-close is 36x36; bump to a 44x44 tap target on mobile. */
@media (max-width: 600px) {
  .ql-close { width: 44px !important; height: 44px !important; }
}

/* Guides page: centre the orphaned 5th type-guide card in the 2-column band */
@media (min-width:381px) and (max-width:560px){
  .guide-grid > .guidecard:last-child:nth-child(odd){
    grid-column: 1 / -1;
    max-width: calc(50% - 11px);
    margin-inline: auto;
  }
}

/* ---- FIX 1. guides-by-type.html — centre the lone last gt-card ----
   .gt-grid is repeat(2,1fr) above 680px and a single column at/below
   680px. With 5 cards the 5th (Reflector) hangs alone, left-aligned,
   in the 2-column band. Centre it ONLY while the grid is 2 columns
   (min-width 681px). The gap is clamp(18px,2.4vw,30px); half-width
   minus half the max gap keeps a single centred column the same width
   as a normal card. Below 681px the grid is 1-col, so the rule is
   correctly out of scope and the card is full-width as usual. */
@media (min-width:681px){
  .gt-grid > .gt-card:last-child:nth-child(odd){
    grid-column: 1 / -1;
    max-width: calc(50% - 15px);
    margin-inline: auto;
  }
}

/* ---- FIX 5. 3-card rows go straight from 3-up to 1 full-width ----
   index.html "Digital Readings"/"Live Sessions" + the
   Signature/Sensation/Bond pillar strip, and Readings.html
   "Digital Readings"/"Live Sessions" all use
   repeat(auto-fit, minmax(min(100%,Npx), 1fr)), which packs 2 columns
   at intermediate widths and orphans the 3rd card on its own row.
   We override to an explicit 3 columns once 3 cards genuinely fit
   (measured per grid below), and a single full-width column below
   that — never the orphaning 2-column state. Breakpoints are the real
   3-fit widths for each minmax floor under the section's
   clamp(20px,6vw,56px) horizontal padding:
     240px floor -> 3 fit at ~860px  (reading rows)
     280px floor -> 3 fit at ~1024px (pillar strip)
     300px floor -> 3 fit at ~1100px (Readings reading rows)
   These win over the non-important inline grid-template-columns.
   Each selector is scoped by a unique slice of the grid's inline
   style (gap / max-width) and guarded with :has(>:nth-child(3)) so it
   only ever touches genuine 3-card grids — never the 2-card grids on
   Family Reading / the Naos strip that happen to share a minmax floor. */

/* 240px reading rows (index.html: Digital Readings + Live Sessions) */
[style*="minmax(min(100%, 240px)"][style*="max-width: 1060px"]:has(> :nth-child(3)){
  grid-template-columns: 1fr !important;
}
@media (min-width:860px){
  [style*="minmax(min(100%, 240px)"][style*="max-width: 1060px"]:has(> :nth-child(3)){
    grid-template-columns: repeat(3,1fr) !important;
  }
}

/* 280px pillar strip (index.html: Signature / Sensation / Bond) */
[style*="minmax(min(100%, 280px)"][style*="gap: 22px"]:has(> :nth-child(3)){
  grid-template-columns: 1fr !important;
}
@media (min-width:1024px){
  [style*="minmax(min(100%, 280px)"][style*="gap: 22px"]:has(> :nth-child(3)){
    grid-template-columns: repeat(3,1fr) !important;
  }
}

/* 300px reading rows (Readings.html: Digital Readings + Live Sessions) */
[style*="minmax(min(100%, 300px)"][style*="max-width: 1100px"]:has(> :nth-child(3)){
  grid-template-columns: 1fr !important;
}
@media (min-width:1100px){
  [style*="minmax(min(100%, 300px)"][style*="max-width: 1100px"]:has(> :nth-child(3)){
    grid-template-columns: repeat(3,1fr) !important;
  }
}

/* Resource Library / Shop strip on home (index.html:
   50 Ways to Be With / Be With the One Who Holds / The Type Guides).
   Uses bare minmax(300px,1fr) with a large clamp gap, so auto-fit
   never settles on a clean 3-up. Force 3-up once 3 fit (~1080px),
   1 full-width below — same 3->1 treatment for a consistent home. */
[style*="minmax(300px,1fr)"]:has(> :nth-child(3)){
  grid-template-columns: 1fr !important;
}
@media (min-width:1080px){
  [style*="minmax(300px,1fr)"]:has(> :nth-child(3)){
    grid-template-columns: repeat(3,1fr) !important;
  }
}