/*
 * VALDIER V3 — page container system (homepage).
 *
 * The widths come from the design-system tokens (design-system/src/styles/
 * tokens.css, served here by assets/valdier-island/booking.css):
 *   --v-container-wide     1440px  main container: navbar, hero, sections, footer
 *   --v-container-reading   800px  long running text
 *   --v-page-gutter        5vw, 16–96px  side gutter of every section
 * Each var() repeats the token as fallback only so the page keeps its layout
 * if that stylesheet is missing; tokens.css is the place to change a width.
 *
 * Audit of the Webflow export (docs/LAYOUT-CONTAINERS.md):
 *   .container-large   75.5rem (1208px)  navbar, hero         → wide
 *   .container-medium  67.5rem (1080px)  every other section  → wide
 *   .footer_block      75.5rem           grey footer plate    → wide
 *   .faq_layout        56rem, centred    FAQ                  → wide (no own cap)
 *   section and bar padding 5%, navbar 3% gutters              → one gutter
 * Narrow inner limits stay as they are (hero text 37.75rem, slider 28.5rem,
 * paragraphs 25rem, newsletter 23.5rem, Booking Card 500px). Full-bleed
 * surfaces (section backgrounds, the hero photograph) are untouched.
 *
 * Below 1440px the containers are already narrower than the cap: phones and
 * tablets keep exactly the layout they had (the gutter equals the export's 5%).
 */

.banner_section,
.section-large,
.section-large-2,
.section-medium {
  padding-left: var(--v-page-gutter, clamp(1rem, 5vw, 6rem));
  padding-right: var(--v-page-gutter, clamp(1rem, 5vw, 6rem));
}

.container-large,
.container-medium,
.footer_block {
  max-width: var(--v-container-wide, 90rem);
}

/* FAQ on the same edges as About and the other sections: the export's
   56rem cap (centred) made it start further right; the container sets the
   width now. Its two columns (1fr / 1.55fr) are unchanged. */
#vario-faq-02 .faq_layout {
  max-width: none;
}

/* The answer card grows with it; the answers keep a reading measure
   (about 80 characters at their size) instead of running its full width. */
#vario-faq-02 .column-xsmall > p {
  max-width: 36rem;
}

/* Desktop navbar on the same gutter as the content, so the logo lines up with
   the hero text at every width (the export used 3% here, 5% below). The
   collapsed navbar of tablets and phones keeps the export's 3%. */
@media screen and (min-width: 992px) {
  .nav_bar {
    padding-left: var(--v-page-gutter, clamp(1rem, 5vw, 6rem));
    padding-right: var(--v-page-gutter, clamp(1rem, 5vw, 6rem));
  }
}

/* Services grid: six services as 3 × 2 on desktop, 2 × 3 on tablets (the
   export kept three 204px columns down to 768px), 1 × 6 on phones (the
   export's own rule below 480px). */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #vario-feature-04 .feature_content-grid {
    grid-template-columns: 1fr 1fr;
  }
}