/* ───────────── every form factor: phones from 320 px, foldables (cover, open, book posture), tablets, desktops ─────────────
   rules_design_review, 28-Oct-2026 · directory-blueprint/design/FOLD-LAYER.md. An override appended after the site's own CSS
   (club.css + the WordPress theme's style.css); the viewport meta carries viewport-fit=cover. The Geeks Club, helper 34.
   On WordPress pages this file arrives with the directory's chrome links, BEFORE the theme's style.css, so every rule aimed at a
   theme class (.cl-*) is either more specific than the theme's (html body …) or !important. */

/* readable articles: WordPress gives every single post the class "post" (post_class), so the home's card rules (.post p 13.5 px
   muted with no paragraph gap, .post div padding, .post img cropped to 16:9 and stretched) reached every article body */
.cl-sheet.post p { font-size: inherit; color: inherit; margin: 0 0 1em; }
.cl-sheet.post p.cl-byline { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.cl-sheet.post .entry-content { padding: 0; }
.cl-sheet.post img { aspect-ratio: auto; object-fit: fill; width: auto; background: transparent; }
.cl-sheet.post .cl-hero img { width: 100%; }

/* nothing wider than the screen: a long product name breaks inside its heading */
h1, h2, h3 { overflow-wrap: anywhere; }

/* safe areas: notches, rounded corners and the home bar */
.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.foot { padding-bottom: max(26px, env(safe-area-inset-bottom)); }
.findsheet { padding: max(70px, calc(env(safe-area-inset-top) + 54px)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }

/* short screens (the Flip's cover screen, phones and folded foldables on their side): side rails stop holding the screen */
@media (max-height: 520px) { .side, html body .cl-side { position: static; } }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .iconbtn { width: 44px; height: 44px; }
  .btn, .field button, .field input, .terms-switch button, .foot .lockup { min-height: 44px; }
  .mast__band a { display: inline-flex; align-items: center; min-height: 44px; }
  .mast__nav a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .front__card ol { gap: 0; }
  .front__card li a { display: flex; align-items: center; min-height: 44px; }
  .links li { padding-block: 0; }
  .links a { display: flex; align-items: center; min-height: 44px; }
  details.qa summary { min-height: 44px; align-items: center; }
  .foot ul { gap: 0; }
  .foot ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__legal { row-gap: 0; }
  .foot__legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .pager a, .pager span, html body .cl-pages .page-numbers { min-width: 44px; min-height: 44px; }
  .row__go { row-gap: 14px; }
  .standing { gap: 14px; }
  /* lone small links: a taller box that does not move the layout */
  .crumbs a, .lede__meta a, .head-row a, .row__go small a, .standing a, .panel > a, .panel > dl.kv + p > a, .kv dd > a, .entry-content td a,
  .cl-trail a { display: inline-block; padding: 13px 6px; margin: -13px -6px; }
  .posts .post h3 a, .cl-card h2 a { display: block; padding-block: 13px; margin-block: -13px; }
  html body .cl-topic { min-width: 44px; padding: 16px 4px; margin: -16px -4px -6px; }
  main details:not(.qa) > summary { padding-block: 11px; }
  .form label:has(> input[type="checkbox"]) { min-height: 44px; }
}

/* book posture (a foldable half-open like a book): nothing across the fold. Lists and grids put one column on each half; a
   page's opening words and the articles keep to the left half; side rails go to the right half */
@media (horizontal-viewport-segments: 2) {
  :root { --seg0: env(viewport-segment-width 0 0, 50vw); --fold-gap: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px) + 32px);
    --fold-page: calc(var(--seg0) - var(--gutter) - 16px); }
  .mast__find { display: none; }
  .mast__find-open { display: inline-grid; margin-left: auto; }
  /* the section links: their lines share out over the two halves instead of one scrolling row across the fold */
  .mast__nav .wrap { display: block; columns: 2; column-gap: var(--fold-gap); overflow: visible; }
  .mast__nav a { display: inline-flex; }
  .crumbs.wrap { max-width: var(--seg0); margin-inline: 0 auto; padding-right: 16px; }
  /* important: several of these carry inline max-width/margin styles (the sign-up and vendor pages' centred blocks) */
  .lede, .hero, .tabs, .cl-head, .cl-trail, .cl-cols--solo, .cl-plain, .foot__legal, .band > .panel, .band > h2, .head-row h2, .note,
  .terms-switch, .wrap > .panel, .wrap > section.panel { max-width: var(--fold-page) !important; margin-inline: 0 auto !important; }
  /* the estate's "Your plans" box (inline-styled) */
  aside.ym-net { max-width: var(--fold-page) !important; margin-inline: var(--gutter) auto !important; }
  .hero { grid-template-columns: auto minmax(0, 1fr); }
  .hero__go { grid-column: 1 / -1; justify-items: start; }
  .front, .grid2, .cl-cols:not(.cl-cols--solo), .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  .posts, .tiles, .plans, .offers, html body .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  .links { columns: 2; column-gap: var(--fold-gap); }
  .grid2 .goodbad { grid-template-columns: minmax(0, 1fr); }
  /* a roster row in one half takes its phone layout */
  .row, .row--item { grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; padding: 14px; align-items: start; }
  .row .gauge { grid-column: 2; grid-row: 2; --size: 46px; margin-bottom: 14px; }
  .row__go { grid-column: 3; grid-row: 2; justify-items: start; align-self: center; }
  .row__body { grid-column: 3; }
}

/* ── v2 (28-Oct-2026 night; helper 34 for lead 68): the finer book-posture check found one tile grid on the home and search pages
   that carries its columns in a style attribute (auto-fill, 200 px minimum): three across at 790 and 954, the middle tile across
   the fold. It takes the two halves like every other grid. ── */
@media (horizontal-viewport-segments: 2) {
  .tiles[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}