/* =====================================================================
   2-COLUMN LAYOUT DISCIPLINE  (sitewide, tune here)
   Goal: no content area renders as a lone single full-width column.
   - Existing card grids are kept multi-column and never collapse to 1.
   - A section that holds only a standalone run of prose flows into two
     readable columns (the "lots of text → adjust" case).
   - Section headings/intros span both columns so they read normally.
   All of this is layered on top of main.css and is desktop-only; on phones
   everything stacks to a single column for readability.
   ===================================================================== */

/* =====================================================================
   GUARANTEED SPACING between containers — horizontal AND vertical, every
   breakpoint. No two cards/containers should ever touch. Sitewide; tune the
   one value here to change all gaps at once. (No !important, so a section that
   deliberately sets a different gap utility can still override it.)
   ===================================================================== */
.cards-grid,
.card-grid,
.content-grid,
.feature-card-grid,
.features-grid,
.grid,
[class*='grid-'],
.industry-cards-grid,
.equipment-categories-grid,
.services-grid-top,
.services-grid-bottom,
.resources-grid,
.stats-grid,
.stat-grid,
.metrics-grid,
.proposals-grid,
.symbol-grid,
.two-col-split {
  gap: 24px;
}

@media (min-width: 920px) {
  /* 1) Grids must present at least two columns on desktop ------------- */
  .cards-grid,
  .content-grid,
  .grid,
  .grid-2,
  .features-grid,
  .resources-grid,
  .services-grid-top,
  .services-grid-bottom,
  .equipment-categories-grid,
  .industry-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
  .grid-3,
  .content-grid.grid-3,
  .grid.grid-3,
  .cards-grid.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Auto-fit grids: guarantee a sensible minimum track so they pair up. */
  .cards-grid.grid-auto,
  .grid-auto-250 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  /* 1b) BARE CARDS WITH NO GRID WRAPPER --------------------------------
     Many templated sections drop .card blocks straight into .container with
     no grid, so they stack as full-width rows. Wherever a container holds two
     or more such cards, lay them out in a responsive multi-column grid; the
     section header / intro / lone non-card blocks span the full width. */
  .section .container:has(> .card ~ .card),
  .section .container:has(> .feature-card ~ .feature-card),
  .section .container:has(> .product-card ~ .product-card),
  .section .container:has(> .service-card ~ .service-card),
  .section .container:has(> .resource-card ~ .resource-card),
  .section .container:has(> .method-card ~ .method-card),
  .section .container:has(> .feature-item ~ .feature-item) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 28px;
    align-items: stretch;
  }
  /* Non-card direct children (headers, intros, buttons) span the full row. */
  .section .container:has(> .card ~ .card) > :not(.card),
  .section .container:has(> .feature-card ~ .feature-card) > :not(.feature-card),
  .section .container:has(> .product-card ~ .product-card) > :not(.product-card),
  .section .container:has(> .service-card ~ .service-card) > :not(.service-card),
  .section .container:has(> .resource-card ~ .resource-card) > :not(.resource-card),
  .section .container:has(> .method-card ~ .method-card) > :not(.method-card),
  .section .container:has(> .feature-item ~ .feature-item) > :not(.feature-item) {
    grid-column: 1 / -1;
  }

  /* 2) Standalone prose sections → two readable columns --------------- */
  /* Target a .container that holds consecutive paragraphs and is NOT a
     grid/flex layout or a media/diagram/form section. */
  .section .container:has(> p + p):not(:has(.cards-grid)):not(:has(.grid)):not(:has(.content-grid)):not(:has(.grid-2)):not(:has(.grid-3)):not(:has(.eic-wrapper)):not(:has(form)):not(:has(table)):not(:has(img)) {
    column-count: 2;
    column-gap: 48px;
  }
  /* Keep each block intact and let headers/intros span the full width. */
  .section .container:has(> p + p) > * {
    break-inside: avoid;
  }
  .section .container:has(> p + p) > h1,
  .section .container:has(> p + p) > h2,
  .section .container:has(> p + p) > h3,
  .section .container:has(> p + p) > .section-header,
  .section .container:has(> p + p) > .section-header-flex,
  .section .container:has(> p + p) > .lead,
  .section .container:has(> p + p) > .view-all-link,
  .section .container:has(> p + p) > .btn,
  .section .container:has(> p + p) > .case-study-buttons {
    column-span: all;
  }

  /* 3) A section that contains a single lone card/CTA gets centred and
        capped so it never stretches edge-to-edge as one block. */
  .section .container > .card:only-child,
  .section .container > .system-cta-card:only-child {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =====================================================================
   VERTICAL BREATHING ROOM  (sitewide, tune here)
   No container should butt up against the next one. The main offender is a
   compact hero that carries feature tiles: its bottom padding is too small,
   so the tiles crowd the following section. Give every such hero comfortable
   bottom room, on every breakpoint.
   ===================================================================== */
.hero:has(.hero-features),
.hero-small:has(.hero-features),
.hero-bg:has(.hero-features),
.product-hero:has(.hero-features),
.tech-hero:has(.hero-features),
.case-study-hero:has(.hero-features) {
  padding-bottom: 72px !important;
}

/* The feature grid itself keeps a little space below it as a second guard. */
.hero-features {
  margin-bottom: 0.5rem;
}

/* Uniform vertical rhythm so sections/containers never touch the next area.
   (pb-0 / pt-0 utility sections keep their intentional seamless joins because
   those selectors are more specific.) */
.section,
.cta-section,
.compliance-section,
.case-study-section,
.process-section,
section[class*='section'] {
  padding-top: clamp(40px, 4.5vw, 64px);
  padding-bottom: clamp(40px, 4.5vw, 64px);
}
.section > .container > .cards-grid,
.section > .container > .content-grid,
.section > .container > .features-grid {
  margin-bottom: 4px;
}

/* The footer must never butt up against the content above it, on any page
   (e.g. privacy-policy where it was touching the industry tags). */
.footer {
  margin-top: 56px !important;
}
#main-content > :last-child {
  margin-bottom: 0;
}