/* ============================================
   Breakout Grid — Viewport Utilisation System
   ============================================
   Replaces .container { max-width: 1200px; margin: 0 auto; }
   
   Usage:
   <section class="breakout-grid">
     <!-- Text auto-defaults to content track (75ch max) -->
     <h2>Heading</h2>
     <p>Body text stays readable...</p>
     
     <!-- Card grids push into feature track -->
     <div class="breakout-feature grid grid-cols-1 md:grid-cols-3 gap-8">
       <div class="card">...</div>
     </div>
     
     <!-- Backgrounds bleed full-width -->
     <div class="breakout-full bg-navy-950">
       <p>CTA content</p>
     </div>
   </section>
   
   See: docs/bp-reference/04-design-system/v4/viewport-utilisation-strategy.md
   ============================================ */

.breakout-grid {
  /* Fluid outer gap — scales with viewport */
  --gap: clamp(1rem, 6vw, 3rem);

  /* Content track: 75ch for readable text measure.
     Override with --content-max on text-light sections if needed. */
  --content-width: min(var(--content-max, 75ch), 100% - (var(--gap) * 2));

  /* Popout: collapsed by default */
  --popout-width: minmax(0, 0px);

  /* Feature: absorbs all leftover space via 1fr.
     Card grids, data tables, icon grids go here. */
  --feature-width: minmax(0, 1fr);

  /* Full: minimal breathing gap at edges, 1-2rem.
     Background treatments use breakout-full instead. */
  --full-width: minmax(1rem, 2rem);

  display: grid;
  grid-template-columns:
    [full-start]
    var(--full-width)
    [feature-start]
    var(--feature-width)
    [popout-start]
    var(--popout-width)
    [content-start]
    var(--content-width)
    [content-end]
    var(--popout-width)
    [popout-end]
    var(--feature-width)
    [feature-end]
    var(--full-width)
    [full-end];
}

/* Default: all direct children sit in the content (readable text) track */
.breakout-grid > * {
  grid-column: content;
}

/* Explicit content track — rarely needed, this is the default */
.breakout-content {
  grid-column: content;
}

/* Popout: ~4rem wider than text total (2rem each side) */
.breakout-popout {
  grid-column: popout;
}

/* Feature: ~10rem wider than text total (5rem each side) */
.breakout-feature {
  grid-column: feature;
  max-width: var(--feature-cap, 1500px);
  justify-self: center;
  width: 100%;
}

/* Full bleed: touches viewport edges */
.breakout-full {
  grid-column: full;
}

/* Asymmetric splits — content anchored one side, bleeds to opposite edge */

/* Content left, visual bleeds right (text-heavy hero) */
.breakout-left {
  grid-column: full-start / content-end;
}

/* Visual left, content right (image-heavy hero) */
.breakout-right {
  grid-column: content-start / full-end;
}

/* ============================================
   Container Queries for Card Components
   ============================================
   Cards adapt to their grid track, not the viewport.
   A card in the content track gets less space than
   a card in the feature track — same viewport.
   ============================================ */

.card {
  container-type: inline-size;
  container-name: card;
}

/* Card in narrow track (>400px available): stack layout */
@container card (min-width: 400px) {
  .card-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

/* ============================================
   Edge-to-Edge Grid (Strategy B)
   ============================================
   Self-regulating card grid — adds columns as
   space allows, no media queries needed.
   Place inside .breakout-feature container.
   ============================================ */

.edge-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 320px), 1fr)
  );
  gap: clamp(1.5rem, 3vw, 3rem);
}

/* ============================================
   Sticky Companion Layout (Strategy C)
   ============================================
   Blog posts, case studies, documentation.
   Place inside .breakout-feature or .breakout-popout.
   ============================================ */

.sticky-layout {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(auto, 75ch);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start; /* CRITICAL: prevents sidebar from stretching */
}

.sticky-sidebar {
  position: sticky;
  top: clamp(2rem, 5vh, 4rem);
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
}

/* ============================================
   Z-Pattern Alternating Rows (Strategy E)
   ============================================
   Sequential features: text-left image-right,
   then image-left text-right, etc.
   Type-safe when placed in .breakout-feature.
   ============================================ */

.z-pattern-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(3rem, 6vw, 8rem);
}

.z-pattern-row:nth-child(even) {
  flex-direction: row-reverse;
}

.z-pattern-row .z-text {
  flex: 1 1 50ch;
}

.z-pattern-row .z-media {
  flex: 1.5 1 0%;
}

/* ============================================
   Overflow Carousel (Strategy G)
   ============================================
   Logo bars, case study galleries, resource collections.
   Place inside .breakout-full for edge-to-edge scrolling.
   ============================================ */

.scroll-carousel {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  /* Align first card with content track */
  padding-inline: max(var(--gap, 1rem), calc(50vw - 37.5ch));
}

.scroll-carousel::-webkit-scrollbar {
  display: none;
}

.scroll-carousel > * {
  flex: 0 0 clamp(300px, 30vw, 450px);
  scroll-snap-align: center;
}

/* ============================================
   Full-Bleed Background Treatments (Strategy F)
   ============================================
   GPU-composited, zero-bandwidth background patterns.
   Apply to .breakout-full containers.
   ============================================ */

/* Subtle blueprint grid — use for section backgrounds */
.bg-blueprint {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Soft radial glow — use for CTA/conversion sections */
.bg-glow {
  background:
    radial-gradient(
      circle at 80% 50%,
      var(--surface-2, rgba(255,255,255,0.02)),
      var(--surface-1, transparent)
    );
}

/* ============================================
   Space Activation — Utility Classes
   ============================================
   Turn dead space into intentional canvas without
   adding content or bandwidth cost.
   ============================================ */

/* Horizontal rule that spans the feature track (not just content) */
.hr-feature {
  grid-column: feature;
  border: none;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  margin-block: clamp(2rem, 5vh, 4rem);
}