/* ============================================================
   Container Queries — Lag 1.5 (WP3)
   BygMedAI Frontend Capability Platform

   STRATEGI: Container queries ALL-IN for nye moduler.
   Eksisterende sektioner migreres gradvist.
   Se CONTAINER-QUERIES-ADR.md for beslutningsdokumentation.

   FALLBACK: Alle @container regler er wrapnet i
   @supports (container-type: inline-size) for graceful
   degradation i ældre browsere — eksisterende @media regler
   forbliver funktionelle som fallback.

   BROWSER SUPPORT (per 2026): Chrome 105+, Firefox 110+,
   Safari 16+. Samlet ~97% global dækning.
   ============================================================ */

/* ----------------------------------------------------------------
   CONTAINER REGISTRERINGER
   Sektioner registreres som containere så grid-børn kan
   reagere på tilgængelig bredde frem for viewport-bredde.
   Ændringerne er additive — eksisterende @media regler bevares.
   ---------------------------------------------------------------- */

/* Pilot-migration: 6 eksisterende sektioner */
.usp-section      { container-type: inline-size; container-name: usp-section; }
.process-section  { container-type: inline-size; container-name: process-section; }
.segment-section  { container-type: inline-size; container-name: segment-section; }
.pain-section     { container-type: inline-size; container-name: pain-section; }
.trust-section    { container-type: inline-size; container-name: trust-section; }
.portfolio-section { container-type: inline-size; container-name: portfolio-section; }

/* ----------------------------------------------------------------
   CONTAINER QUERY REGLER
   Wrapnet i @supports for graceful degradation.
   I ikke-understøttende browsere anvendes eksisterende @media regler.
   Disse regler supplerer (overrider ikke) eksisterende responsivitet.
   ---------------------------------------------------------------- */

@supports (container-type: inline-size) {

  /* ============================================================
     PROTOTYPE 1: USP Grid — 3 kolonner → 2 → 1
     Reagerer på sektionens egen bredde frem for viewport.
     Use-case: Når sektionen indlejres i en sidebar eller
     et narrowt layout — viewportbreds @media er utilstrækkeligt.
     ============================================================ */
  @container usp-section (max-width: 720px) {
    .usp-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @container usp-section (max-width: 480px) {
    .usp-grid {
      grid-template-columns: 1fr;
    }
  }
  /* Card-niveau: komprimér padding i smalt container-rum */
  @container usp-section (max-width: 400px) {
    .usp-card {
      padding: 24px 20px;
    }
  }

  /* ============================================================
     PROTOTYPE 2: Process Grid — 4 kolonner → 2 → 1
     4-kolonne flowdiagram kollapser baseret på container-bredde.
     Giver korrekt layout når sektionen genbruges i sidebars
     eller smalle landing-page layouts (prospect-layout etc.).
     ============================================================ */
  @container process-section (max-width: 800px) {
    .process-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @container process-section (max-width: 480px) {
    .process-grid {
      grid-template-columns: 1fr;
    }
  }
  /* Reducer padding på process-cards i smalt rum */
  @container process-section (max-width: 400px) {
    .process-card {
      padding: 28px 18px;
    }
    .process-num {
      font-size: 36px;
    }
  }

  /* ============================================================
     PROTOTYPE 3: Segment Grid — 2 kolonner → 1
     Service-type kort tilpasser sig container-bredde.
     Korrekt når segment-sektionen genbruges på landing pages
     med smalere content-kolonner end viewport.
     ============================================================ */
  @container segment-section (max-width: 600px) {
    .segment-grid {
      grid-template-columns: 1fr;
    }
  }
  @container segment-section (max-width: 400px) {
    .segment-card {
      padding: 32px 24px;
    }
  }

  /* ============================================================
     SUPPLERENDE MIGRERINGER: Pain, Trust, Portfolio
     Bringer disse sektioner op på container-query-niveau
     som del af pilot-migrationsbølgen.
     ============================================================ */

  /* Pain Grid — 2 kolonner → 1 */
  @container pain-section (max-width: 600px) {
    .pain-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Trust Grid — asymmetrisk 2-kol → 1-kol */
  @container trust-section (max-width: 700px) {
    .trust-grid {
      grid-template-columns: 1fr;
      text-align: center;
    }
    .trust-photo img {
      max-width: 300px;
      margin: 0 auto;
    }
    .trust-values {
      margin-top: 24px;
    }
  }
  @container trust-section (max-width: 480px) {
    .trust-values {
      grid-template-columns: 1fr;
    }
  }

  /* Portfolio Grid — 2 kolonner → 1 */
  @container portfolio-section (max-width: 640px) {
    .portfolio-grid {
      grid-template-columns: 1fr;
    }
  }

}

/* ----------------------------------------------------------------
   NYE MODULER — container-first pattern (WP3 fremadrettet)

   Nye komponenter bygges ALTID container-first:
   1. Wrap med .cq-container (eller navngiv specifikt)
   2. Brug @container frem for @media til layout-beslutninger
   3. Behold @media til global typografi og spacing

   Eksempel-mønster:
   ----------------------------------------------------------------

   .ny-modul-wrapper {
     container-type: inline-size;
     container-name: ny-modul;
   }
   @supports (container-type: inline-size) {
     @container ny-modul (max-width: 480px) {
       .ny-modul-grid { grid-template-columns: 1fr; }
     }
   }

   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   UTILITY: .cq-container
   Generisk container-wrapper til nye moduler.
   Brug når en specifik container-name ikke er nødvendig.
   ---------------------------------------------------------------- */
.cq-container {
  container-type: inline-size;
}