/*
 * pal2026 i mobilen (Simons beslut 2026-10-27).
 *
 * Det här är en medveten avvikelse från WordPress: där hade mobilen datorns
 * rubrikstorlekar, 48 px sidmarginal (WPBakery-kolumnens 15 px + .wrap 32 px)
 * och bilder som beskars. Reglerna gäller bara under 641 px, så att surfplatta
 * och dator ser ut som förut. Filen laddas sist (layout.tsx), efter
 * Customizer-CSS:en, så samma specificitet räcker; !important används bara där
 * Customizer-CSS:en själv har !important.
 */
@media (max-width: 640px) {
  /* ---------- Sidmarginal: 20 px, som kolumnen (16 px) + 4 px ---------- */
  .pal2026 .wrap {
    padding-left: 4px;
    padding-right: 4px;
  }
  /* Hjälten går kant i kant, utanför kolumnen, och får hela marginalen själv. */
  .pal2026 .hero .wrap,
  .pal2026 .hero-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .pal2026 section.block {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .pal2026 .sec-head {
    margin-bottom: 28px;
  }

  /* ---------- Rubriker och ingresser ---------- */

  /* Jämna rader i stället för ett ensamt ord på sista raden. */
  .pal2026 h1,
  .pal2026 h2 {
    text-wrap: balance;
  }
  .pal2026 .hero h1 {
    font-size: clamp(28px, 7.6vw, 34px);
    margin-bottom: 18px;
  }
  .pal2026 .hero .lead {
    font-size: 16px;
    margin-bottom: 26px;
  }
  .pal2026 .hero ul {
    gap: 10px;
    margin-bottom: 28px;
  }
  .pal2026 .hero li {
    font-size: 15px;
  }
  .pal2026 .sec-head h2,
  .pal2026 .prose h2,
  .pal2026 .plate h2,
  .pal2026 .price-plate h2,
  .pal2026 .price-card h2,
  .pal2026 .final h2,
  .pal2026 .gdpr h2,
  .pal2026 .darkblock h2,
  .pal2026 .safe-plate h2 {
    font-size: 24px;
  }
  .pal2026 .sec-head p,
  .pal2026 .final p,
  .pal2026 .price-card p {
    font-size: 16px;
  }
  .pal2026 .eyebrow {
    font-size: 12px;
  }
  .pal2026 .step .num {
    font-size: 44px;
    margin-bottom: 10px;
  }
  .pal2026 .tcard .quote {
    font-size: 16px;
  }
  .pal2026 .faq summary {
    font-size: 16px;
    padding: 18px 4px;
  }

  /* ---------- Bilder utan beskärning ---------- */

  /*
   * Hjältebilden ligger bakom texten på datorn. I mobilen blev rutan smal och
   * hög, så bara en remsa av bilden syntes. Här står bilden överst i sitt eget
   * fält i sin egen form, hel och obeskuren, och texten under den på mörkblå
   * botten.
   */
  .pal2026-start .hero {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .pal2026-start .hero::before {
    content: none;
  }
  .pal2026-start .hero-bg {
    position: relative;
    inset: auto;
  }
  .pal2026-start .hero-bg img {
    height: auto;
  }
  .pal2026-start .hero-bg::after {
    background: linear-gradient(to bottom, rgba(12, 58, 96, 0) 35%, rgba(12, 58, 96, 0.55) 75%, #0c3a60 100%);
  }
  .pal2026-start .hero-inner {
    padding: 8px 20px 88px;
  }

  /* Kort- och bandbilder visas i sin egen form i stället för att beskäras. */
  .pal2026 .gcard .gimg,
  .pal2026 .bandimg {
    aspect-ratio: auto;
    height: auto;
  }

  /*
   * Kortbilden zoomas inte när kortet hålls: i mobilen sitter :hover kvar efter
   * ett tryck, och den förstorade bilden skars av i kortets kant.
   */
  .pal2026 .gcard:hover .gimg {
    transform: none;
  }

  /*
   * Registreringsrutan på startsidan: Customizer-CSS:en ger den 24 px marginal
   * med !important; här följer den samma 20 px sidmarginal som resten.
   */
  .home section.bg-ma-blue-750 {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
}