/* Envana designsystem: Bagoss Standard (rubrik, procenttal) + Hanken Grotesk
     (beskrivningar, fotnot). Tokens i envana-custom.css (--env-*).
     Kräm #FEFAF8 som sektionsbakgrund för sektionsrytm (godkänt av Rasmus)
     — ingen token finns för kräm, därför hex. */
  .epdp-stats {
    background: #FEFAF8; /* kräm — sektionsbakgrund, ingen token */
    padding: 56px 0;
  }

  /* Dubbelklass slår .epdp-regeln i envana-pdp-base.css, som laddas om av
     senare epdp-sektioner och annars vinner källordningen (samma mönster
     som hero). Tas ned till .epdp-stats när alla sektioner bytt. */
  .epdp.epdp-stats {
    font-family: var(--env-font-body);
    color: var(--env-text-body);
  }

  /* Tvåkolumnsgrid: bild vänster, innehåll höger — samma yttermått som hero */
  .epdp-stats__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .epdp-stats__media {
    min-width: 0;
  }

  .epdp-stats__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px; /* radius 20 = media enligt systemet */
  }

  .epdp-stats__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* H1-nivå (40/45) trots h2-element — Figma-facit. Vänsterställd,
     avviker medvetet från centrerad sektionsrubrik-default. */
  .epdp-stats__heading {
    margin: 0 0 8px;
    font-family: var(--env-font-heading);
    font-weight: 400;
    font-size: 40px;
    line-height: 45px;
    letter-spacing: -0.03em;
    color: var(--env-text-heading);
    text-align: left;
  }

  .epdp-stats__row {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: stretch;
  }

  /* Procenttalen: rött som signal (godkänt fall), aldrig som yta.
     Ingen tracking på siffrorna (Rasmus 2026-08-11). */
  .epdp-stats__num {
    flex: 0 0 auto;
    min-width: 80px; /* linjerar beskrivningarna utan för stort gap */
    font-family: var(--env-font-heading);
    font-weight: 400;
    font-size: 40px;
    line-height: 45px;
    letter-spacing: normal;
    color: var(--env-action-primary);
  }

  /* Beskrivningar: Body L 18/26 i ink (Rasmus 2026-08-11) */
  .epdp-stats__desc {
    flex: 1 1 auto;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.01em;
    color: var(--env-text-heading);
  }

  /* Fotnot: caption 13/19, aldrig kursiv (systemet har inga italics) */
  .epdp-stats__note {
    margin: 16px 0 0;
    max-width: 550px;
    font-size: 13px;
    line-height: 19px;
    letter-spacing: -0.01em;
    color: #4E4E4E; /* dämpad fotnotsgrå, samma som hero-fineprint — ingen token */
  }

  @media screen and (max-width: 989px) {
    .epdp-stats {
      padding: 40px 0;
    }

    /* En kolumn: innehållet först, bilden efter (samma ordning som draften) */
    .epdp-stats__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 28px;
    }

    .epdp-stats__media {
      order: 2;
    }

    .epdp-stats__content {
      order: 1;
      gap: 12px; /* tightare mellan raderna på mobil (Rasmus 2026-08-11) */
    }

    .epdp-stats__heading {
      font-size: 32px;
      line-height: 36px;
    }

    /* H1-skalan på mobil är 32/36 — procenttalen följer den.
       Beskrivningarna (brödtext) ändras aldrig på mobil. */
    .epdp-stats__num {
      min-width: 78px;
      font-size: 32px;
      line-height: 36px;
    }
  }