/* mobile.css — layout för ≤768px. Laddas via media-attribut. Samma klasser som desktop.css. */

/* Mobil luft: överlagra --air med mobilvärdet (styr all vertikal rytm). */
:root { --air: var(--air-mobile); }
.sc-wrap { padding: 0 var(--space-md); }

/* Per-device (mobil): höjd, synlighet, justering */
.sc-sec { min-height: var(--sc-h-m, auto); }
.sc-sec--tall { display: flex; flex-direction: column; justify-content: center; }
.sc-hide-m { display: none !important; }
.sc-am-center { text-align: center; }
.sc-am-right { text-align: right; }

.sc-grid { display: grid; grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr)); gap: var(--space-md); }

.sc-hero { min-height: 60vh; text-align: center; }
.sc-hero__inner { max-width: 100%; }

.sc-richtext__body { column-count: 1; }

/* Knappar sida vid sida när de får plats; wrap:ar (staplar) automatiskt när de blir för breda. */
.sc-cta__actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }

.sc-timeline { border-left: 2px solid var(--color-surface); padding-left: var(--space-md); }
.sc-timeline__item { position: relative; padding-bottom: var(--space-lg); }
.sc-timeline__item::before { content: ''; position: absolute; left: calc(-1 * var(--space-md) - 6px); top: .4rem; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); }

.sc-form { display: grid; gap: var(--space-md); }

/* Meny på mobil: kompakt topp (logga + kontaktikoner). Länkar + login flyttas till bottenmenyn. */
.sc-nav__inner { align-items: center; min-height: var(--sc-nav-h-mt, 56px); gap: var(--space-md); }
/* Logga = X% av navhöjden (styrs i Meny → Design → Höjder). Default 80%. */
.sc-nav__logo { height: calc(var(--sc-nav-h-mt, 56px) * var(--sc-logo-scale, 0.8)); width: auto; }
.sc-nav__links { display: none; }
.sc-nav__contact { border-left: none; padding-left: 0; }  /* samma rad, utan avdelare på mobil */
.sc-nav__login { display: none; }                          /* login/admin ligger i bottenmenyn på mobil */
.sc-nav__logout { display: none; }                         /* logga ut likaså – undvik dubbletter */
/* Meny-beteende (normal/animerad) gäller bara desktop – mobilens topp förblir sticky */
.sc-nav, .sc-nav--static, .sc-nav--autohide { position: sticky; top: 0; transform: none; }

/* Bottenmeny synlig + utrymme så den inte täcker innehåll */
.sc-botnav { display: flex; }
body { padding-bottom: calc(var(--sc-botnav-h, 75px) + env(safe-area-inset-bottom) + .3rem); }

/* Sidfot på mobil (som originalet): brand full bredd, Tjänster + Företaget sida vid sida,
   Kontakt full bredd under. På riktigt smala skärmar staplas allt i en spalt. */
.sc-foot__grid { grid-template-columns: 1fr 1fr; }
.sc-foot__grid > :first-child, .sc-foot__grid > :last-child { grid-column: 1 / -1; }
.sc-foot__bar { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.sc-foot__right { align-items: flex-start; text-align: left; }  /* vänsterställ när det stackas */
@media (max-width: 380px) {
    .sc-foot__grid { grid-template-columns: 1fr; }
}