/* Mobil: gäller bara under 768px. Laddas sist så att reglerna vinner över resten. */

@media (max-width: 767px){

  /* Sektionerna ska vara exakt en skärm höga, även när mobilens adressfält fälls in
     och ut. --screen-h sätts från window.innerHeight i main.js. */
  .hero,
  .chapter{ height: 100svh; height: var(--screen-h, 100svh); }
  .chapter.contact-section{ height: auto; min-height: 100svh; min-height: var(--screen-h, 100svh); padding-top: 110px; }

  /* ---------- Sidhuvud ---------- */
  header.chrome{ top: 14px; left: 14px; }
  .logo-chip{ height: 44px; padding: 0 18px; }
  .logo-chip svg{ height: 28px; }
  .nav-cta-bar{ top: 14px; height: 44px; }
  .nav-links{ display: none; }
  .nav-cta-bar a.header-cta{ padding: 0 20px 0 18px; font-size: 13px; }

  /* Innehållsförteckningen och scrollpilens ringtext tar för mycket plats */
  .toc{ display: none; }

  /* Scrollpilen längst ned ("Börja resan här"): man sveper i stället på mobilen */
  .bouncing-arrow-wrapper{ display: none; }

  /* ---------- Start ---------- */
  /* Mobil: längsta raden är ca 5.2em; 80 % av full bredd, samma proportioner som på datorn */
  .hero{ --fs-hero-top: clamp(29px, calc((100vw - 40px) / 6.75), 88px); }
  .headline-top{ top: 84px; left: 20px; max-width: none; }
  /* Ingressen nere till vänster som på datorn, i smala rader bredvid "Enkelt." (som tar ca 42 % av bredden) */
  .headline-sub{ left: 20px; right: auto; bottom: 30px; max-width: calc(54vw - 44px); font-size: 13px; line-height: 1.45; }
  .headline-tag{ right: 20px; bottom: calc(28px + var(--fs-hero-bottom) * 0.9 + 6px); font-size: 14px; }
  .headline-bottom{ right: 20px; bottom: 28px; }
  .team-photo .photo-say{ display: none; }

  /* ---------- Kapitel 1: Igenkänning ---------- */
  #sec-problem.chapter{ padding: 76px 16px 16px; align-items: stretch; }
  .problem-grid{
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 12px;
    padding-right: 0;
    height: 100%;
  }
  .problem-side{ flex: none; width: 100%; text-align: left; transform: none; }
  .problem-side .eyebrow{ justify-content: flex-start; }
  .problem-side .problem-headline{ text-align: left; font-size: clamp(44px, 13vw, 60px); }
  .problem-hint{ text-align: left; }
  .quote-field{ flex: 1 1 auto; width: 100%; height: auto; min-height: 0; }

  .quote-bubble.qs-0{ font-size: 9px;  max-width: 96px;  padding: 7px 9px; }
  .quote-bubble.qs-1{ font-size: 10px; max-width: 112px; padding: 8px 11px; }
  .quote-bubble.qs-2{ font-size: 11px; max-width: 130px; padding: 9px 12px; }
  .quote-bubble.qs-3{ font-size: 12px; max-width: 150px; padding: 11px 13px; }
  .quote-bubble.qs-4{ font-size: 13px; max-width: 170px; padding: 12px 15px; }

  /* ---------- Kapitel 2: Film ---------- */
  .film-overlay{ left: 20px; right: 20px; }

  /* ---------- Kapitel 3: Resan ---------- */
  /* Kolumnerna blir rader. Den valda raden (tryck) växer och visar texten. */
  #sec-process.chapter{ background: #2a2320; }
  .process-head{ top: 76px; left: 20px; right: 20px; }
  /* height: auto så att kolumnerna slutar vid skärmens nederkant (annars blir de 216 px för höga och steg 4 hamnar utanför) */
  .process-columns{ top: 216px; height: auto; flex-direction: column; }
  .process-col{ flex: 1 1 0; transform: translateX(24px); }
  .process-col.in{ transform: none; }
  .process-col:hover{ flex-basis: 0; }
  .process-col.is-open{ flex-grow: 2.6; }
  /* Hopfällda rader har ett jämnt, lätt skimmer så att stegnamnet går att läsa mitt i raden.
     Den öppna raden får ett mörkare skimmer över bilden, så att man ser vilket steg som är valt. */
  .process-col::after,
  .process-col:hover::after{ background: rgba(42,35,32,.42); }
  .process-col.is-open::after{ background: rgba(42,35,32,.74); }
  .process-col::before{ top: 0; bottom: 0; right: auto; width: 4px; height: auto; }

  /* Etiketten ("Du berättar") behövs inte på mobilen: raden visar stegnamnet i stället */
  .process-col-tab,
  .process-col:hover .process-col-tab{ display: none; }

  /* Stegen står på en rad ("Steg 01 • Förstå"), och raden krymper så att den inte bryts.
     Hopfälld: mitt i raden. Öppen: glider upp överst så att rubrik och text får plats under. */
  .process-col-step,
  .process-col:hover .process-col-step{
    left: 20px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: row;
    align-items: flex-end;
    gap: .3em;
    white-space: nowrap;
    font-size: min(34px, 7.6vw);
    transition: top .5s cubic-bezier(.65,0,.35,1), transform .5s cubic-bezier(.65,0,.35,1);
  }
  .process-col.is-open .process-col-step{ top: 16px; transform: none; }
  .process-col-title{ left: 20px; top: 56px; bottom: auto; font-size: 19px; }
  .process-col .process-col-body{ left: 20px; top: 88px; bottom: auto; font-size: 13px; line-height: 1.45; }

  .process-col:hover .process-col-title,
  .process-col:hover .process-col-body{ opacity: 0; }
  .process-col.is-open .process-col-title,
  .process-col.is-open .process-col-body{ opacity: 1; }

  /* ---------- Kapitel 5: Säg hej ---------- */
  /* Polaroiderna hänger på snöret som på datorn, men mindre: fyra i rad, lite omlott.
     Bredden räknas i vw så att korten alltid hamnar på samma ställe längs snöret
     (kortens mitt på 16 %, 39 %, 61 % och 84 % av bredden). Snöret är 70 px högt; top följer
     dess kurva så att nålarna sitter på snöret (yttre korten högre upp, de mittersta längre ner). */
  .contact-section .contact-lead{ margin-bottom: 28px; }
  .polaroid-row{ gap: 0; padding: 0 4vw; margin-bottom: 36px; }
  .polaroid-string{ height: 70px; }
  .polaroid{ width: 24.5vw; margin-left: -2vw; padding: 5px 5px 6px; border-radius: 4px; box-shadow: 0 8px 16px rgba(34,30,27,.18); }
  .polaroid:nth-child(2){ margin-left: 0; }
  .polaroid:nth-child(2), .polaroid:nth-child(5){ top: 30px !important; }
  .polaroid:nth-child(3), .polaroid:nth-child(4){ top: 44px !important; }
  .polaroid-pin{ top: -13px; width: 13px; height: 19px; }
  .polaroid-info{ padding: 6px 2px 0; }
  .polaroid-name{ font-size: 10.5px; line-height: 1.25; }
  .polaroid-title{ font-size: 9px; line-height: 1.3; hyphens: auto; overflow-wrap: break-word; }   /* långa ord i hemlisarna, t.ex. "kortkommandon" */
}

/* Texter som säger "håll musen över" byts mot "tryck" på pekskärmar */
.hint-touch{ display: none; }
@media (hover: none){
  .hint-mouse{ display: none; }
  .hint-touch{ display: inline; }
}

/* Kapitel 4 på låga telefoner: sammanfattningen under karusellen kortas till fyra rader så att den ryms */
@media (max-width: 767px) and (max-height: 700px){
  .work-section p.curve-carousel__desc{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
}

/* Kapitel 4 på låga telefoner: raden under "Du är inte först" tas bort så att rubriken inte hamnar under menyn */
@media (max-width: 767px) and (max-height: 700px){
  .work-lead{ display: none; }
}

/* Kapitel 5 på mobil: formuläret och "Kom förbi på en kaffe" delar samma plats och man sveper mellan
   dem (scroll-snap). Korten är lika höga och nästa kort sticker fram i kanten så att man ser att det
   finns fler. Prickarna (.cf-prickar) visar vilket kort som syns, js/contact-form.js håller dem i synk.
   Större skärmar påverkas inte: där gäller reglerna i contact-form.css. */
.cf-prickar{ display: none; }
@media (max-width: 767px){
  .cf-wrap{ padding-top: 48px; }
  .cf-layout{
    display: flex; align-items: stretch; gap: 14px;
    margin: 0 -20px; padding: 26px 20px 24px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 20px;
    scrollbar-width: none;
  }
  .cf-layout::-webkit-scrollbar{ display: none; }
  .cf-layout .cf-card,
  .cf-layout .cf-info{
    flex: 0 0 calc(100% - 26px); max-width: none; margin: 0;
    scroll-snap-align: start; scroll-snap-stop: always;
    transform: none;
  }
  .cf-layout .cf-info{ animation: none; }
  .cf-layout .decor-dot{ display: none; }
  .cf-prickar{ display: flex; justify-content: center; gap: 10px; margin-bottom: -6px; }
  .cf-prickar button{
    all: unset; cursor: pointer; width: 9px; height: 9px; border-radius: 50%;
    background: rgba(34,30,27,.22); transition: background .25s ease, width .25s ease;
  }
  .cf-prickar button.is-aktiv{ width: 24px; border-radius: 5px; background: var(--orange); }
  .cf-prickar button:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
}