/* ──────────────────────────────────────────────────────────────
   mobile.css — Mobil-/touch-förbättringar
   Påverkar ENDAST pekskärmar (hover: none) och små skärmar
   (max-width). Desktop med mus och bred skärm berörs aldrig.
   ────────────────────────────────────────────────────────────── */

/* 1. Ta bort "fastnande" hover-effekter på pekskärmar.
      På mobilen blir :hover kvar efter en tryckning, vilket gör att
      kort förstoras/bleknar och hoppar. Här nollställer vi dem. */
@media (hover: none) {
  .svc:hover,
  .mal-card:hover,
  .news-card:hover,
  .testimonial-card:hover,
  .om-logo:hover,
  .kurs-card:hover,
  .home-svc:hover,
  .home-mal-card:hover,
  .hero-chip:hover {
    transform: none !important;
    z-index: auto !important;
    box-shadow: none !important;
  }
  .nav-links a:hover { transform: none !important; }
  .news-card:hover .news-thumb img { transform: none !important; }
  .testimonials-track:hover .testimonial-card:not(:hover) {
    opacity: 1 !important;
    transform: none !important;
  }
  .kurs-grid:hover .kurs-card:not(:hover) {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Knappar ska inte heller fastna förstorade */
  .btn:hover,
  .hero-big-cta .btn:hover,
  .kurs-hero-cta .btn:hover {
    transform: none !important;
  }
}

/* 2. Små skärmar (telefon): bekvämare knappar och tryckytor.
      Triggas aldrig på desktop (som är bred). */
@media (max-width: 560px) {
  /* Primära CTA-knappar i hjältesektioner blir fullbredd och lätta att träffa */
  .hero-big-cta,
  .kurs-hero-cta {
    width: 100%;
  }
  .hero-big-cta .btn,
  .kurs-hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Garantera minst 44px höga tryckytor i menyn och språkväljaren */
  .nav-drop a {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .lang-toggle button {
    min-height: 40px;
  }

  /* Förhindra oavsiktlig horisontell scroll om något barn sticker ut */
  html, body { overflow-x: hidden; }
}

/* 3. Startsidans kort: på telefon stackas de i en kolumn men behåller
      desktopens fasta höjd (320–360px) och stora siffror, vilket gör
      dem enorma. Här gör vi dem kompakta så de inte tar över rubriker
      och bild. Desktop (bred skärm) berörs aldrig. */
@media (max-width: 600px) {
  /* MÅL-korten */
  .home-mal-card {
    min-height: 0;
    padding: 26px 22px;
    gap: 10px;
    border-radius: 18px;
  }
  .home-mal-card .num {
    font-size: 44px;
    margin-bottom: 2px;
  }
  .home-mal-card h3 { font-size: 20px; }
  .home-mal-card p { font-size: 15px; line-height: 1.5; }

  /* Tjänste-korten */
  .home-svc {
    min-height: 0;
    padding: 24px 22px;
    gap: 14px;
    border-radius: 18px;
  }
  .home-svc-glyph {
    width: 50px; height: 50px;
    font-size: 22px;
    border-radius: 13px;
  }
  .home-svc h3 { font-size: 21px; }
  .home-svc p { font-size: 14.5px; }

  /* Testimonial-korten (marquee) — på telefon var de ~280px breda
     (nästan hela skärmen). Görs mindre så de inte dominerar hjälten. */
  .testimonial-card {
    width: 224px;
    padding: 18px 20px;
    gap: 12px;
    border-radius: 16px;
  }
  .testimonial-card blockquote { font-size: 14px; line-height: 1.45; }
  .testimonials-track { gap: 16px; }
}

/* 4. Sidfoten (samma på alla sidor): på telefon hamnade "Navigering"
      bredvid loggan och "Kontakt" på egen rad med en stor tom yta.
      Vi lägger loggan + texten i fullbredd överst och ställer sedan
      Navigering + Kontakt som två jämna kolumner under — likt
      webbversionens upplägg. Desktop berörs aldrig. */
@media (max-width: 820px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }
  /* Logga + tagline överst i full bredd */
  .foot-grid > :first-child {
    grid-column: 1 / -1;
  }
  /* Plats längst ner så den flytande chatt-knappen inte täcker
     copyright-raden */
  footer { padding-bottom: 104px; }
  .foot-bot { margin-top: 40px; }
}

/* Mindre telefoner: lite stramare sidfot */
@media (max-width: 420px) {
  .foot-grid { gap: 28px 20px; }
  .foot-col a { font-size: 13.5px; }
}

/* 5. Toppmeny på mobil: göm den stora "Kontakta oss"-knappen så raden
      blir ren (logga + SV/EN + hamburgare). Kontakt finns i menyn. */
@media (max-width: 820px) {
  .nav-cta .btn.accent { display: none; }
}
/* Hamburgaren ska BARA visas på mobil (≤820px), där topp-menyns länkar
   är dolda. På desktop syns hela menyn längst upp, så hamburgaren tas bort
   där — ingen dubbel meny. */
@media (min-width: 821px) {
  .nav-toggle { display: none; }
}

/* 6. Tidslinjen (Om-sidan) på mobil. Varannan ruta ("is-down") behöll
      desktopens grid-row: 2 och hamnade därför UNDER årtalet i stället
      för bredvid. Vi tvingar årtal + ruta till samma rad så allt ligger
      snyggt i linje. Endast mobil (≤860px) — desktop berörs aldrig. */
@media (max-width: 860px) {
  .story-step.is-up .story-card,
  .story-step.is-down .story-card {
    grid-row: 1;
    align-self: start;
  }
  .story-node {
    grid-row: 1;
    align-self: start;
  }
}

/* 7. "Datorn" på Onlinekurser-sidan som speglar kursinnehållet.
      På mobil höll skärmen på att bli en hög porträtt-platta — orealistiskt
      för en laptop. Vi trimmar bort chatt-rutan så skärmen håller en
      trovärdig, nästan kvadratisk proportion, lyfter filmrutan så den fyller
      ytan, och ger basen lite mer tyngd så hela enheten läses som en riktig
      laptop. Endast mobil — desktop berörs aldrig. */
@media (max-width: 720px) {
  .laptop-screen { aspect-ratio: auto; }
  .cp-window { height: auto; }
  .cp-body { overflow: visible; }
  .cp-main { padding: 16px 18px; gap: 10px; }
  .cp-chat { display: none; }
  .cp-video { height: clamp(96px, 28vw, 150px); }
  .laptop-base { height: 16px; }
}

/* 8. Hero-filmen på startsidan. Tidigare bröts den ut som en separat ruta
      under knapparna på mobil. Nu ska den — precis som på desktop — ligga
      som en integrerad bakgrund bakom hjälteytan och glida in snyggt.
      Vi ger sektionen extra höjd så filmen får plats nedanför texten,
      och lägger en scrim som är solid bakom rubrik/ingress (full läsbarhet)
      men klarnar nedåt så filmen syns spela. Endast mobil. */
@media (max-width: 760px) {
  .hero-big.hero-has-video {
    padding-bottom: clamp(200px, 58vw, 360px);
    min-height: 88vh;
  }
  .hero-big.hero-has-video > .hero-video {
    position: absolute; inset: 0; order: 0; margin: 0;
    border-radius: 0; box-shadow: none; aspect-ratio: auto;
  }
  .hero-big.hero-has-video .hero-video-el { object-position: center 28%; }
  /* Solid paper behind the WHOLE text block (both headline lines, lede and
     buttons) so the blue "i klassrummet." line stays crisp — exactly like
     the desktop left column — then clear downward so the film reveals in the
     lower band. Overrides home.css desktop (horizontal) scrim. */
  .hero-big.hero-has-video .hero-video-scrim {
    display: block;
    background: linear-gradient(180deg,
      var(--paper) 0%,
      var(--paper) 52%,
      color-mix(in srgb, var(--paper) 80%, transparent) 63%,
      color-mix(in srgb, var(--paper) 24%, transparent) 78%,
      transparent 90%);
  }
}