/*
 * Mobil-hero för startsidan (≤600px).
 * Ljus hero: texten på vit botten som sajtens övriga sektioner,
 * bilden som en egen helbleed-remsa under — foto och typografi
 * konkurrerar aldrig om samma yta. Bygger enbart på tokens.
 * Rollback: ta bort länken till filen i index.html.
 */
@media(max-width:600px){
  .hero{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    min-height:0;
    padding:0;
    border-bottom:0;
    overflow:hidden;
    background:var(--bg);
    color:var(--body);
  }

  .hero-inner.container{
    position:relative;
    z-index:1;
    order:1;
    width:100%;
    margin:0;
    padding:var(--sp-12)
            max(var(--sp-5),env(safe-area-inset-right))
            var(--sp-10)
            max(var(--sp-5),env(safe-area-inset-left));
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
  }

  .hero h1{
    max-width:15ch;
    color:var(--ink);
    font-size:clamp(32px,8.8vw,40px);
    line-height:1.06;
    letter-spacing:var(--track-1);
  }

  .hero .sub{
    max-width:36ch;
    margin:var(--sp-4) 0 var(--sp-6);
    color:var(--body);
    font-size:16px;
    line-height:1.55;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:var(--sp-2);
  }

  .hero-actions .btn,
  .hero-actions .btn-outline-d{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:52px;
    padding:12px 16px;
    border-radius:var(--r);
    font-size:15px;
  }

  /* Ljus botten → sekundärknappen följer den ljusa konturvarianten,
     samma primär/sekundär-hierarki som desktop. */
  .hero-actions .btn-outline-d{
    border:1px solid #c6cacd;
    background:transparent;
    color:var(--ink);
  }

  .hero-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--sp-5) var(--sp-4);
    margin-top:var(--sp-8);
    padding-top:var(--sp-6);
    border-top:1px solid var(--line);
  }

  .hm{
    margin:0;
    padding:0;
    border:0;
  }

  .hm b{
    display:block;
    color:var(--ink);
    font-size:14px;
    line-height:1.3;
  }

  .hm span{
    display:block;
    margin-top:var(--sp-1);
    color:var(--muted);
    font-size:12.5px;
    line-height:1.4;
  }

  /* Bilden: egen remsa i full bredd under textblocket. */
  .hero-bg{
    position:relative;
    inset:auto;
    order:2;
    width:100%;
    height:230px;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:68% 50%;
    filter:saturate(.72) contrast(.98);
  }

  /* Ingen mörk läggning på ljus hero — bilden står ren. */
  .hero-bg::after{
    background:none;
  }
}

@media(max-width:360px){
  .hero-inner.container{
    padding-top:var(--sp-10);
    padding-bottom:var(--sp-8);
  }

  .hero .sub{
    margin-bottom:var(--sp-5);
  }

  .hero-meta{
    margin-top:var(--sp-6);
  }

  .hero-bg{
    height:200px;
  }
}