/*
 * Shared layout guardrails.
 *
 * The pages intentionally keep their own visual styles, but all wide-screen
 * horizontal surfaces share this 1440px content boundary.  Full-bleed
 * backgrounds remain full width; only their readable content and grids are
 * capped.  The mobile rules retain the existing 900px/600px breakpoints.
 */
:root {
  --layout-max: 1440px;
  --layout-gutter: max(24px, 7%, calc((100vw - var(--layout-max)) / 2));
  --layout-inner-gutter: clamp(24px, 7%, 96px);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Fixed navigation keeps its full-width backdrop while its contents stop
   drifting apart on very wide screens. */
.nav {
  padding-left: var(--layout-gutter) !important;
  padding-right: var(--layout-gutter) !important;
}

/* Full-bleed bands: cap the readable area through the horizontal gutter. */
.hero-content,
.knowledge-strip,
.manifesto,
.books-section,
.contact-bar,
.page-hero,
.news-hero,
.list-section,
.content-section,
section.block,
.section,
.recommend-section,
.cocktail-section,
.order-section,
.book-intro,
.features-section,
.artist-intro,
.works-section,
.quote-strip,
.service-section,
.map-section {
  padding-left: var(--layout-gutter) !important;
  padding-right: var(--layout-gutter) !important;
}

/* A max-width page wrapper already consumes the outer boundary; its own
   sections need the smaller readable gutter rather than the viewport gutter. */
.page-wrap > *,
.page-main > * {
  padding-left: var(--layout-inner-gutter) !important;
  padding-right: var(--layout-inner-gutter) !important;
}

/* The hero copy has an intentional narrow max-width.  Keep its padding
   readable at 2560px instead of adding the full outer gutter to the flex item. */
.hero-content {
  padding-left: var(--layout-inner-gutter) !important;
  padding-right: var(--layout-inner-gutter) !important;
}

/* The homepage has two wide card bands without a padding-based inner
   wrapper.  Their backgrounds are neutral, so centering the band itself is
   safe and prevents card columns from stretching with the viewport. */
.product-hero,
.product-grid {
  width: 100%;
  max-width: var(--layout-max);
  margin-left: auto;
  margin-right: auto;
}

/* Existing page wrappers are content surfaces rather than full-bleed image
   bands.  Center them without changing their internal typography. */
.page-wrap,
.page-main {
  width: 100%;
  max-width: var(--layout-max);
  margin-left: auto;
  margin-right: auto;
}

/* Narrow reading columns already have an explicit max-width; this adds the
   missing centering on wide screens. */
.article-hero,
.article-body,
.faq-section,
.toc,
.source-note {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Shared inner grids are the actual footer/contact containers. */
.contact-bar-inner,
.footer-grid {
  width: 100%;
  max-width: var(--layout-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Pages whose footer is itself the grid still get the same max-width content
   boundary while keeping the background full bleed. */
footer {
  padding-left: var(--layout-gutter) !important;
  padding-right: var(--layout-gutter) !important;
}

/* The former 2fr brand column left a disproportionate unused block beside a
   short company name.  At desktop widths 1.5fr keeps the brand prominent
   while giving the three navigation columns useful room. */
@media (min-width: 901px) {
  .footer-grid,
  footer {
    grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  }
}

/* Do not let responsive images grow beyond their intrinsic/layout boundary. */
img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* The existing ac article intentionally has fixed desktop padding.  On
   tablet/phone its old 0px horizontal padding made text touch the viewport;
   this rule fixes only that mobile state and leaves the desktop repair intact. */
@media (max-width: 900px) {
  .article-body {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 600px) {
  .nav,
  footer {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}