/* ───────────── 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 (the
   directory's sheet, and on WordPress pages the Glovebox theme's style.css); the viewport meta carries viewport-fit=cover.
   CarCody, helper 34. */

/* nothing wider than the screen, from 320 px: on WordPress pages the bar also holds the estate search, which pushed the light/dark
   button 12 px off the screen at 320; below 380 px the word mark, the gaps and the "Get listed" button give a little room (it stays) */
h1, h2, h3 { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .bar-in { gap: 8px; }
  .brand { gap: 6px; }
  .brand svg { width: 28px; height: 28px; }
  .word { font-size: 1.15rem; }
  .bar-end { gap: 6px; }
  .bar .cta { padding-inline: 8px; letter-spacing: .06em; }
}

/* safe areas: notches, rounded corners and the home bar */
.wrap { width: min(calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))), var(--wrap)); }
.strip { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.foot-base { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
.foot > .ym-policy-links { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

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

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .mode { width: 44px; height: 44px; }
  .seek button { min-width: 44px; min-height: 44px; }
  .brand, .skip, .btn, a.chip, .makes a, .road li a, .places li a, .gb-tags a, .gb-comments .submit { min-height: 44px; }
  .bar .cta, .strip a, .term-tabs a, .gb-sections a { display: inline-flex; align-items: center; min-height: 44px; }
  .pager a, .pager span, .gb-pager .page-numbers { height: 44px; }
  .toc li { padding-block: 0; }
  .toc li a { display: flex; align-items: center; min-height: 44px; }
  main details > summary { min-height: 44px; padding-block: 9px; }
  .foot ul { gap: 0; }
  .foot ul a, .foot-base nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .foot-base nav { row-gap: 0; }
  /* lone small links: a taller box that does not move the layout */
  .more, .crumbs a, .makers-line a, .road p > a, .credit a, .src a, aside a.small, .sponsor-line a, .ri-more, .gb-by a, .gb-log a {
    display: inline-block; padding: 13px 6px; margin: -13px -6px; }
  .ym-policy-links a { display: inline-block; min-width: 44px; padding-block: 13px; margin-block: -13px; }
}

/* 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 reading column keep to the left half; side columns and pictures 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) - 32px); }
  /* the section strip: its links share their lines out over the two halves instead of one scrolling row across the fold */
  .strip { display: block; columns: 2; column-gap: var(--fold-gap); overflow: visible; }
  .strip a { display: inline-flex; margin-bottom: 2px; }
  /* important: several of these carry inline max-width/margin styles (page intros, sign-in panels, the FAQ band, the search form) */
  .crumbs, .makers-line, .head-row h2, .prose, .wrap > .copy, .tool-top, .vs-wrap, .table-wrap, .foot-base, .gb-head, .gb-story--wide, .gb-page .gb-paper,
    .gb-band .wrap, .gb-search, .wrap > .eyebrow, .wrap > h1, .wrap > p, .wrap > form, .wrap > .panel, .wrap > .term-tabs, .band > h2, .section > h2,
    .band.faq, .foot > .ym-policy-links { 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: max(16px, calc(50% - var(--wrap) / 2)) auto !important; }
  .makers-line { justify-content: flex-start; }
  .gb-sections { flex-wrap: wrap; overflow: visible; }
  .tool-top { grid-template-columns: 72px minmax(0, 1fr); }
  .tool-top .logo { width: 72px; height: 72px; border-radius: 16px; }
  .tool-top .score-box { grid-column: 1 / -1; justify-self: start; }
  .hero-in, .chart-head, .layout, .car-top, .makers-band, .vs-head, .foot-in, .gb-story:not(.gb-story--wide)
    { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  .lockup { grid-column: auto; }
  .vs-head .disc { display: none; }
  /* the lead story becomes one card in its half */
  .gb-lead { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .gb-lead-in { padding: 0 20px 22px; }
  .tiles, .seg-cards, .cards, .stories, .plans, .price-grid, .offers, .steps, .said-pics, .g2, .g3, .g4, .gb-grid, .gb-grid--3
    { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  .makes { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  .toc { columns: 2; column-gap: var(--fold-gap); }
  /* inside one half, the half's own phone layout */
  .layout .spec, .layout .pc, .gb-hop { grid-template-columns: minmax(0, 1fr); }
  .layout .spec div { border-right: 0 !important; border-top: 1px solid var(--line) !important; }
  .layout .spec div:first-child { border-top: 0 !important; }
  .gb-hop-next { grid-column: 1; text-align: left; }
  /* a ranked chart: one column of rows on each half, each row in its phone layout */
  .rows { columns: 2; column-gap: var(--fold-gap); background: none; border: 0; border-radius: 0; overflow: visible; }
  .rows > li { break-inside: avoid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
  .row, .row.finder { grid-template-columns: 38px 76px minmax(0, 1fr); grid-template-areas: "pl pic who" "fig fig fig"; gap: 10px 12px; padding: 14px; }
  .row .pic { width: 76px; }
  .row .cost { display: none; }
  .row .fig .v span.c { display: inline; }
  .row.tool { grid-template-columns: 38px 48px minmax(0, 1fr); grid-template-areas: "pl pic who" "score score act"; }
  .row.tool .pic { width: 48px; aspect-ratio: 1; }
  .row.tool .score { grid-auto-flow: column; align-items: baseline; gap: 6px; justify-content: start; }
  .row.tool .act { justify-items: end; text-align: right; }
}