/* ==========================================================================
   GNC SG — Layout
   ========================================================================== */

/* ---- Container ---- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Escapes the page container so a tinted band can run edge to edge, while an
   inner .container keeps its contents lined up with everything else on the
   page. Node content renders inside main > .container, so a section that needs
   the full viewport has to break out rather than be moved in page.html.twig,
   which would change every page. */
.full-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- Page wrapper ---- */

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-wrapper__main {
  flex: 1;
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
  /* Contains the .full-bleed overhang. 100vw counts the scrollbar but the page
     is only clientWidth wide, so a bled band sticks out by half a scrollbar on
     each side and would add a horizontal scrollbar. `clip` rather than `hidden`
     because clip does not create a scroll container — the sticky site header
     (outside this element, but the distinction matters if that ever changes)
     keeps working. */
  overflow-x: clip;
}

/* ---- Content with sidebar (PLP, Search Results) ---- */

/*
 * minmax(0, …) rather than a bare 1fr: a grid item defaults to min-width:auto,
 * so a wide descendant — a product card's unbreakable title, a pager row —
 * pushes the track past the container instead of being constrained by it, and
 * the whole page then scrolls sideways. Capping the minimum at 0 keeps the
 * track inside its parent and lets the content wrap or scroll on its own.
 */
.layout-with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

@media (min-width: 1024px) {
  .layout-with-sidebar {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }
}

.layout-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .layout-sidebar {
    display: block;
    /* As tall as its own filter groups, not as tall as the results beside it.
       A grid item stretches to the row by default, and .layout-sidebar carries
       the bordered white card (facets.css), so the card was being drawn down to
       the bottom of the product grid with a long run of empty space under the
       last group. design/update/PLP-apply-filter.png ends the card right after
       it. */
    align-self: start;
  }
}

/* ---- Product / Article grid (3 columns) ---- */

.grid-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .grid-3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Category icon grid (homepage) ---- */

.grid-category {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

@media (min-width: 560px) {
  .grid-category {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-category {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ---- Two-column layout (PDP hero, About hero) ---- */

.layout-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .layout-two-col {
    grid-template-columns: 1fr 1fr;
  }
}

/* PDP: image area slightly wider */
@media (min-width: 768px) {
  .layout-two-col--pdp {
    grid-template-columns: 55% 1fr;
    gap: var(--space-10);
  }
}

/* ---- Section spacing ---- */

.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section--sm {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.section--bg-alt {
  background-color: var(--color-bg-alt);
}

.section--bg-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

/* ---- Hero region ---- */

.region-hero {
  position: relative;
}

/* .visually-hidden is not defined here: core's system/base library loads
   hidden.module.css on every page and already provides it. Re-declaring it —
   with !important on every line — only made the rule harder to override. */