/*
 * Mobilpolering av startsidan (≤600px).
 * Additivt lager ovanpå index.html:s inline-CSS, mobile.css och
 * mobile-hero-redesign.css. Rör inget över 600px.
 * Rollback: ta bort länken till filen i index.html.
 *
 * Syfte: samma tydliga hierarki som desktop.
 * 1. Sektionsrubrikerna (h2) var 27–34px medan h1 är ~34px — de tävlade
 *    med hero-rubriken. Nu en gemensam, tydligt mindre skala.
 * 2. Kortrubrikerna ärvde brödtextens radavstånd (1.66) och gled isär.
 * 3. Korten i lösningsblocket hade ojämnt avstånd (24px, sedan 16px).
 */
@media(max-width:600px){

  /* ---------- Hero ----------
     Mobilheron var ljus: vit textdel med fotot som en smal remsa
     under. Ren, men platt — och den delade inte datorvyns uttryck.
     Här återställs den filmiska heron från desktop: fotot bakom hela
     ytan, mörk gradient över, vit typografi. Åsidosätter
     mobile-hero-redesign.css, som laddas före den här filen.

     display:block i stället för flex — .hero-bg ligger absolut och
     är ändå ur flödet, och då blir höjden helt enkelt innehållets. */
  .hero{
    display:block;
    position:relative;
    min-height:0;
    padding:0;
    overflow:hidden;
    border-bottom:0;
    background:var(--ink);
    color:#fff;
  }

  .hero-bg{
    position:absolute;
    inset:0;
    order:0;
    width:100%;
    height:auto;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    /* Fotot är 3:2 liggande och heron är en smal stående yta. object-fit:
       cover fyller då höjden exakt (0px lodrätt överskott) — hela bildens
       höjd syns alltid, och ett lodrätt värde här gör ingenting. All slack
       ligger vågrätt: 549 av 939 renderade px är utanför bild.
       66% skjuter utsnittet åt höger så laddhandtaget och kabeln kommer
       med, i stället för att kapas vid högerkanten. */
    object-position:66% center;
    filter:saturate(.42) brightness(.72);
  }

  /* Texten täcker hela ytan på mobil, till skillnad från desktop där
     den bara bor i nederkanten. Gradienten är därför jämnare mörk —
     ljusast på mitten, där fotot får synas mest. */
  .hero-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
      rgba(16,24,32,.93) 0%,
      rgba(16,24,32,.80) 48%,
      rgba(16,24,32,.96) 100%);
  }

  .hero-inner.container{
    position:relative;
    z-index:1;
    order:1;
    padding-top:var(--sp-12);
    padding-bottom:var(--sp-12);
  }

  .hero h1{
    color:#fff;
  }

  .hero .sub{
    max-width:38ch;
    margin-bottom:var(--sp-8);
    color:#d2d8dc;
    font-size:16.5px;
    line-height:1.5;
  }

  /* Prislöftet stod två gånger i samma vy: här som egen fet rad, och
     direkt nedanför som proof-radens första punkt ("Fast pris / ingen
     kostnad per genomfört test"). Dubbleringen var det som gjorde
     heron rörig. Meningen göms på mobil — budskapet står kvar i
     proof-raden, och på desktop är den orörd.

     ÅTERSTÄLL: ta bort den här regeln (då flyter meningen med i
     ingressen igen, som i ursprungsdesignen). */
  .hero .sub strong{
    display:none;
  }

  .hero-actions{
    gap:10px;
  }

  /* Sekundärknappen låg som enbart en tunn kontur direkt mot fotot, så
     motivet löpte rakt igenom knappytan.
     Lösningen är samma som sajtens kort använder: en plan yta med en
     hårfin kant — fast inverterad för mörk botten. Ingen blur, inga
     gradienter; sajten har inga sådana ytor någon annanstans.
     Fyllningen är samma ton som heron (--ink) och nästan opak, så
     fotot slutar vid knappens kant i stället för att löpa igenom. */
  .hero-actions .btn-outline-d{
    border:1px solid rgba(255,255,255,.38);
    background:rgba(16,24,32,.74);
    color:#fff;
  }

  .hero-meta{
    border-top:1px solid var(--line-d);
  }

  .hm b{
    color:#fff;
    font-size:14.5px;
  }

  .hm span{
    color:var(--inv-muted);
    font-size:13px;
  }

  /* ---------- Sektionsrubriker ---------- */
  /* En skala för alla h2 på sidan: klart under h1, klart över kortrubrik. */
  .partner-proof h2,
  .report-copy h2,
  .method-copy h2,
  .i-head h2,
  .faq h2,
  .cta h2{
    font-size:clamp(25px,6.9vw,28px);
    line-height:1.16;
    letter-spacing:var(--track-1);
  }

  /* ---------- Kortrubriker ---------- */
  .sol-body h3{
    margin:12px 0 10px;
    font-size:21px;
    line-height:1.22;
    letter-spacing:var(--track-2);
  }

  .sol-s h3{
    margin:10px 0 8px;
    font-size:18px;
    line-height:1.28;
    letter-spacing:var(--track-2);
  }

  .i-card h3{
    font-size:19px;
    line-height:1.28;
  }

  .faq summary{
    min-height:52px;
    padding:14px 0;
    line-height:1.35;
  }

  .faq details{
    padding:0;
  }

  /* ---------- Rytm i lösningsblocket ---------- */
  /* Fem kort på rad under varandra — samma avstånd mellan alla. */
  .sol-grid{
    gap:16px;
  }

  .sol-body,
  .sol-s{
    padding:26px 22px;
  }

  /* ---------- Partnerlogotyper ---------- */
  /* Lägre rutor och mindre inre luft ger logotyperna mer bredd. */
  .partner-logo{
    min-height:92px;
    padding:20px;
  }

  /* ---------- Knapphierarki ---------- */
  /* Primära handlingar (hero, rapport) är fullbredd. Sektionernas
     sekundära länkknappar följer desktop och tar bara sin egen bredd,
     så de inte läser som sidans huvudhandling. */
  .i-head .btn,
  .faq .left .btn{
    width:auto;
  }

  .report-actions .btn{
    min-height:48px;
  }

  /* ---------- Trust-bar ---------- */
  /* 40px toning räckte inte på en telefon: namnen kapades tvärt vid
     kanterna och läste som avhuggen text i stället för en rullande rad. */
  .marquee{
    mask-image:linear-gradient(90deg,transparent,#000 78px,#000 calc(100% - 78px),transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 78px,#000 calc(100% - 78px),transparent);
  }
}