/*
 * 20-layout.css — container, section rhythm, rules and grid helpers.
 * ElNidoGuide-Migration.md §2.3 and §9.
 */

/* §2.3 — 1280px container. Also set in Customizer → Layout; repeated here so the
   measurement survives a Customizer reset. */
.grid-container,
.eng-container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--space-4);
}

/*
 * §2.3 — section separator rules, at the three weights the prototype uses.
 * These are structural, not decorative: they are what replaces card elevation.
 */
.eng-rule-heavy{ border-top:4px solid var(--color-text); }   /* masthead top, footer top */
.eng-rule-mid{   border-top:2px solid var(--color-text); }   /* list heads, article footers */
.eng-rule-hair{  border-top:1px solid var(--color-divider); }/* row rules */

/* §2.3 — sections separated by --space-8. The prototype's dominant pattern is
   `padding: var(--space-6) var(--space-4) var(--space-8)` on the first section and
   `padding: 0 var(--space-4) var(--space-8)` on each one after. */
.eng-section{ padding:0 var(--space-4) var(--space-8); }
.eng-section--first{ padding-top:var(--space-6); }

/*
 * §9 — every multi-column section is an auto-fit minmax grid at one of the
 * minimums the spec names, so they collapse without per-breakpoint overrides.
 * Named rather than inlined so the set stays auditable against §9.
 */
.eng-grid{ display:grid; gap:var(--space-8); align-items:start; }
.eng-grid--320{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.eng-grid--300{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.eng-grid--280{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.eng-grid--260{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.eng-grid--230{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.eng-grid--210{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.eng-grid--150{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.eng-grid--tight{ gap:var(--space-4); }

/* §6.3, §6.5, §6.9 — main + aside, aside sticky on desktop. Collapses in
   50-responsive.css. */
.eng-split{ display:grid; grid-template-columns:2fr 1fr; gap:var(--space-8); align-items:start; }
.eng-rail{ position:sticky; top:var(--rail-top); }

/* §2.2 — article measure. */
.eng-article{
  font-size:var(--type-body-article);
  line-height:1.65;
  max-width:var(--measure-article);
}

/* §9 — tables scroll rather than squash. The wrapper, not the table, scrolls. */
.eng-scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/*
 * Grid and flex children default to min-width:auto, which refuses to shrink below
 * their content's intrinsic width. One long unbreakable string — a URL, a wide
 * image, a Woo table — then pushes the whole track wider than its container and the
 * page scrolls sideways. This is the single most common cause of horizontal
 * overflow in a grid layout, and it produced 19px of it on the category archive.
 */
.eng-grid > *,
.eng-split > *,
.eng-editorial > *,
.eng-tours > *,
.eng-dests > *,
.eng-featgrid > *,
.eng-tipgrid > *,
.eng-postrow > *,
.eng-rank > *,
.eng-faqcols > *,
.eng-footer__cols > *{
  min-width:0;
}

/* Long words and URLs inside prose wrap rather than extend the track. */
.eng-article,
.eng-postrow__title,
.eng-teaser__title,
.eng-rank__blurb{
  overflow-wrap:break-word;
}