/* =============================================================
   BBI - Layout primitives
   assets/css/layout.css

   Container, grid, stack, cluster, and section helpers. Mobile-
   first. Layout-only - NO colours, NO typography. Those live in
   tokens.css and components.css.
   ============================================================= */

/* -------------------------------------------------------------
   1. Container
   ------------------------------------------------------------- */

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

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

.container--full {
  max-width: none;
  padding-inline: 0;
}

/* -------------------------------------------------------------
   2. Section spacing
   ------------------------------------------------------------- */

.bbi-section {
  padding-block: var(--space-16);
}

.bbi-section--tight {
  padding-block: var(--space-10);
}

.bbi-section--flush-top    { padding-top:    0; }
.bbi-section--flush-bottom { padding-bottom: 0; }

@media (max-width: 767px) {
  .bbi-section        { padding-block: var(--space-10); }
  .bbi-section--tight { padding-block: var(--space-6);  }
}

/* -------------------------------------------------------------
   3. Stack (vertical rhythm)
   Each direct child gets margin-block-start equal to --stack-gap.
   Default gap = --space-4. Override per-element via --stack-gap.
   ------------------------------------------------------------- */

.bbi-stack {
  display: flex;
  flex-direction: column;
  --stack-gap: var(--space-4);
}

.bbi-stack > * {
  margin: 0;
}

.bbi-stack > * + * {
  margin-block-start: var(--stack-gap);
}

.bbi-stack--sm  { --stack-gap: var(--space-2);  }
.bbi-stack--md  { --stack-gap: var(--space-6);  }
.bbi-stack--lg  { --stack-gap: var(--space-10); }
.bbi-stack--xl  { --stack-gap: var(--space-16); }

/* -------------------------------------------------------------
   4. Cluster (horizontal row that wraps)
   ------------------------------------------------------------- */

.bbi-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  align-items: center;
}

.bbi-cluster--tight    { gap: var(--space-2); }
.bbi-cluster--spaced   { justify-content: space-between; }
.bbi-cluster--end      { justify-content: flex-end; }
.bbi-cluster--center   { justify-content: center; }
.bbi-cluster--baseline { align-items: baseline; }
.bbi-cluster--top      { align-items: flex-start; }
.bbi-cluster--stretch  { align-items: stretch; }

/* -------------------------------------------------------------
   5. Grid
   Default: single column. Use --cols on a class hook OR rely on
   .bbi-grid--N variants below.
   ------------------------------------------------------------- */

.bbi-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}

.bbi-grid--2  { --cols: 2; }
.bbi-grid--3  { --cols: 3; }
.bbi-grid--4  { --cols: 4; }
.bbi-grid--5  { --cols: 5; }

/* Article body / sidebar split (70 / 30) used on single.php. */
.bbi-grid--content-sidebar {
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--space-12);
}

/* Header bar split (left + centre + right). */
.bbi-grid--header-bar {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}

/* Auto-fit cards (used for related/global news). */
.bbi-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* -------------------------------------------------------------
   6. Responsive grid collapse
   Order: desktop -> tablet -> mobile. Mobile-first means we
   define mobile defaults first and then expand outwards. Below
   we collapse multi-column grids back to single column on
   smaller widths.
   ------------------------------------------------------------- */

@media (max-width: 1023px) {
  .bbi-grid--4 { --cols: 2; }
  .bbi-grid--5 { --cols: 2; }
  .bbi-grid--content-sidebar { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

@media (max-width: 767px) {
  .bbi-grid--2,
  .bbi-grid--3,
  .bbi-grid--4,
  .bbi-grid--5,
  .bbi-grid--auto {
    --cols: 1;
    grid-template-columns: minmax(0, 1fr);
  }
  /* Keep 1fr auto 1fr (same as desktop) so the logo column stays viewport-centred
     when MENU and CHARTS differ in width. auto 1fr auto offsets the centre slot. */
  .bbi-grid--header-bar {
    grid-template-columns: 1fr auto 1fr;
  }
}

/* -------------------------------------------------------------
   7. Two-column "split" used by Latest News cards and WOMI
   (image left or right + text on the other side)
   ------------------------------------------------------------- */

.bbi-split {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.bbi-split--image-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bbi-split--image-left  { direction: ltr; }

.bbi-split--7-3  { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
.bbi-split--3-7  { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
.bbi-split--6-4  { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.bbi-split--4-6  { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }

@media (max-width: 767px) {
  .bbi-split,
  .bbi-split--image-right,
  .bbi-split--image-left,
  .bbi-split--7-3,
  .bbi-split--3-7,
  .bbi-split--6-4,
  .bbi-split--4-6 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

/* -------------------------------------------------------------
   8. Aspect-ratio media wrappers
   ------------------------------------------------------------- */

.bbi-aspect {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-gray-100);
}

.bbi-aspect > img,
.bbi-aspect > iframe,
.bbi-aspect > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bbi-aspect--16-9 { aspect-ratio: 16 / 9; }
.bbi-aspect--4-3  { aspect-ratio: 4 / 3; }
.bbi-aspect--3-2  { aspect-ratio: 3 / 2; }
.bbi-aspect--1-1  { aspect-ratio: 1 / 1; }
.bbi-aspect--9-16 { aspect-ratio: 9 / 16; }   /* Shorts */

/* -------------------------------------------------------------
   9. Site chrome
   ------------------------------------------------------------- */

.site-header__inner,
.site-footer__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.site-footer__inner {
  padding-inline: var(--container-padding);
  padding-block: var(--space-6);
}

.site-main {
  display: block;
  min-height: 50vh;
}

/* -------------------------------------------------------------
   10. Utility helpers
   ------------------------------------------------------------- */

.bbi-hidden                { display: none !important; }
.bbi-hidden\@mobile        { }
.bbi-visible\@mobile       { display: none; }
.bbi-hidden\@tablet-up     { }

@media (max-width: 767px) {
  .bbi-hidden\@mobile       { display: none !important; }
  .bbi-visible\@mobile      { display: block; }
}

@media (min-width: 768px) {
  .bbi-hidden\@tablet-up    { display: none !important; }
}

.bbi-text-center { text-align: center; }
.bbi-text-left   { text-align: left; }
.bbi-text-right  { text-align: right; }

.bbi-full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}