/*
 * mobile.css — Alle @media-regler samlet
 */

/* Admin bar offset */
@media screen and (max-width: 782px) {
    body.admin-bar { padding-top: calc(var(--altom-header-height) + 46px); }
    body.admin-bar #altom-header { top: 46px; }
    body.admin-bar #altom-mobile-nav { top: calc(64px + 46px); }
    body.admin-bar .single .entry-hero .entry-hero-container-inner,
    body.admin-bar .page:not(.page-id-26):not(.page-id-9) .entry-hero .entry-hero-container-inner {
        padding-top: calc(var(--altom-header-height) + 46px) !important;
    }
}

/* Arkiv-hero — mobil: behold header-offset, reduser sidemarger */
@media (max-width: 640px) {
    .archive .entry-hero,
    .category .entry-hero { padding: 0 !important; }
    .archive .entry-hero .entry-hero-container,
    .category .entry-hero .entry-hero-container { padding: 0 !important; }
    /* IKKE overstyr padding-top — den maa vaere var(--altom-header-height) fra main.css */
    .archive .entry-hero .entry-hero-container-inner,
    .category .entry-hero .entry-hero-container-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 0 !important;
    }
    .archive .entry-hero .page-title,
    .category .entry-hero .page-title {
        font-size: 1.5rem !important;
    }
}

/* Admin bar — mobil (46px) */
@media screen and (max-width: 782px) {
    body.admin-bar .archive .entry-hero .entry-hero-container-inner,
    body.admin-bar .category .entry-hero .entry-hero-container-inner {
        padding-top: calc(var(--altom-header-height) + 46px) !important;
    }
}

/* Nav skjules på mobil, hamburger vises */
@media (max-width: 768px) {
    .altom-nav { display: none; }
    .altom-header-right { display: none !important; }
    #altom-hamburger { display: block !important; }
}

/* Forsidehero */
@media (max-width: 640px) {
    #altom-hero { padding: calc(64px + 52px) 20px 52px; }
    .ah-title { letter-spacing: -1.8px; }
    .ah-br { display: none; }
    .ah-actions { flex-direction: column; align-items: center; }
    .ah-btn-p, .ah-btn-g { width: 100%; max-width: 300px; justify-content: center; }
    .ah-glass { padding: 18px 16px; }
    .ah-gi span:last-child { font-size: 10px; }
}

/* Kategori-grid (altom-cat-section) */
@media (max-width: 600px) {
    .altom-cat-section { padding: 32px 16px 28px; }
    .altom-cat-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .altom-cat-item { width: calc(33.33% - 8px); min-width: 80px; flex-shrink: 0; }
    .altom-cat-icon { font-size: 20px; }
    .altom-cat-name { font-size: 11.5px; }
}

/* Hugin-boks */
@media (max-width: 600px) {
    .altom-hugin-box { padding: 28px 16px; gap: 14px; }
    .altom-hugin-emoji { width: 44px; height: 44px; }
}

/* Footer */
@media (max-width: 640px) {
    .altom-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
    .altom-footer-brand { grid-column: 1 / -1; }
    .altom-footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}

/* Anbefalte verktøy hero */
@media (max-width: 640px) {
    .apv-hero { padding: calc(64px + 44px) 20px 40px; }
    .apv-title { letter-spacing: -1px; }
    .apv-br { display: none; }
    .page-id-9 .entry-content { padding: 32px 16px 60px !important; }
}

/* ================================================================
   Kolonnegrid - stacking pa mobil
================================================================ */
@media (max-width: 767px) {
    .wp-block-columns {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ================================================================
   Mobilmeny - accordion-style undermeny
================================================================ */
.altom-mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 12px;
    color: rgba(255,255,255,0.65);
    font-family: var(--altom-font-body);
    font-size: 15px;
    font-weight: 400;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.altom-mobile-nav-toggle:hover,
.altom-mobile-nav-toggle:active {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.95);
}
.altom-mobile-chevron {
    opacity: 0.45;
    flex-shrink: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.altom-mobile-nav-group.is-open .altom-mobile-chevron {
    transform: rotate(180deg);
    opacity: 0.7;
}
.altom-mobile-subnav {
    display: none;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 4px 12px;
}
.altom-mobile-nav-group.is-open .altom-mobile-subnav {
    display: flex;
}
.altom-mobile-nav-sublink {
    display: block;
    padding: 8px 12px;
    color: rgba(255,255,255,0.45);
    font-family: var(--altom-font-body);
    font-size: 13.5px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 6px;
    border-left: 1.5px solid rgba(255,255,255,0.10);
    margin-left: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}
.altom-mobile-nav-sublink:hover,
.altom-mobile-nav-sublink:active {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.78);
    text-decoration: none;
}

/* ================================================================
   Artikkelsider — reduser topp-padding pa mobil
================================================================ */
@media (max-width: 640px) {
    .single .entry-header,
    .page:not(.page-id-26):not(.page-id-9) .entry-header {
        padding-top: 28px !important;
    }
    .single .entry-content,
    .page:not(.page-id-26):not(.page-id-9) .entry-content {
        padding-top: 24px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ================================================================
   AI-styrke-oversikten (.aig-*) — mobiloppsett
================================================================ */
@media (max-width: 640px) {
    /* Grid: rang-sirkel i kol.1, info + badge i kol.2 under hverandre */
    .aig-item {
        display: grid;
        grid-template-columns: 28px 1fr;
        grid-template-areas:
            "rank info"
            ".    badge";
        column-gap: 10px;
        row-gap: 6px;
        padding: 14px;
        align-items: start;
    }
    .aig-rank  { grid-area: rank; }
    .aig-info  { grid-area: info; min-width: 0; }
    .aig-badge {
        grid-area: badge;
        align-self: start;
        justify-self: start;
        white-space: nowrap;
    }
    .aig-meta {
        flex-direction: column;
        gap: 4px;
        padding: 10px 14px;
    }
}

/* ================================================================
   Inline-style grids i innholdssider — tving til enkeltkolonne
   Treffer display:grid med grid-template-columns i style-attributt
================================================================ */
@media (max-width: 767px) {
    .entry-content [style*='grid-template-columns'],
    .single-content [style*='grid-template-columns'] {
        grid-template-columns: 1fr !important;
    }
    /* wp-block-column med inline flex-basis (Gutenberg) */
    .wp-block-column[style] {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/* ================================================================
   Newsletter — full-bredde breakout + redesignet pa mobil
================================================================ */
@media (max-width: 640px) {

    /* Brekk ut av 16px-paddingen pa innholdskolonnen. body:not(.page-id-26) ekskluderer
       forsiden korrekt (den gamle .single-varianten matchet page-26 og ga -16px = hvit stripe). */
    body:not(.page-id-26) .altom-newsletter,
    body:not(.page-id-26) #nyhetsbrev {
        margin-left: -16px !important;
        margin-right: -16px !important;
    }


    /* Full-bredde layout, friskere bakgrunn */
    .altom-newsletter, #nyhetsbrev {
        padding: 48px 28px 44px !important;
        border-radius: 0 !important;
        border-top: 1px solid rgba(var(--rgb-accent),0.28) !important;
        background: linear-gradient(160deg, var(--surface-dark) 0%, #150f08 55%, var(--c-ink-850) 100%) !important;
    }

    /* ROT: forside-innholdskolonnen får 24px padding på mobil (Kadence), som gjør at
       calc(50%-50vw)-breakouten på #nyhetsbrev (overflow:hidden/BFC) bommer med 8px og lager
       hvit stripe. Nullstill paddingen -> kolonnen er full bredde -> calc gir margin:0 og begge
       bånd ligger flush kant-til-kant. */
    body.page-id-26 article.content-bg.single-entry .entry-content.single-content,
    body.page-id-26 .entry-content-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Kolonnen er nå full bredde -> drop vw/calc-breakouten (som bommer på overflow:hidden-boksen)
       og bruk enkel width:100% + margin:0. Deterministisk full bredde, ingen hvit stripe. */
    .page-id-26 .altom-about-band,
    .page-id-26 #nyhetsbrev {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
    }



    /* Overskrift */
    .altom-newsletter h2, #nyhetsbrev h2 {
        font-size: clamp(22px, 5.5vw, 28px) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.6px !important;
        margin-bottom: 10px !important;
    }

    /* Ingress */
    .altom-newsletter > p:not([style*=rgba]),
    #nyhetsbrev > p:not([style*=rgba]) {
        font-size: 14px !important;
        line-height: 1.65 !important;
        margin-bottom: 28px !important;
    }

    /* mc4wp-skjema — vertikal stabling */
    .altom-newsletter .mc4wp-form-fields,
    #nyhetsbrev .mc4wp-form-fields {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        max-width: 380px !important;
        margin: 0 auto !important;
    }

    .altom-newsletter .mc4wp-form-fields > p,
    #nyhetsbrev .mc4wp-form-fields > p {
        margin: 0 !important;
        /* Desktop-regelen setter flex:1 1 260px på e-post-p -> i kolonne blir det 260px HØYDE
           (stort tomrom mellom felt og knapp). Nullstill til innholdshøyde på mobil. */
        flex: 0 0 auto !important;
    }

    /* E-postfelt: full bredde, iOS-safe font-size (hindrer zoom) */
    .altom-newsletter .mc4wp-form input[type=email],
    #nyhetsbrev .mc4wp-form input[type=email] {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        text-align: left !important;
    }

    /* Send-knapp: full bredde */
    .altom-newsletter .mc4wp-form input[type=submit],
    #nyhetsbrev .mc4wp-form input[type=submit] {
        width: 100% !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        letter-spacing: 0.1px !important;
    }
}

/* ================================================================
   Redaksjons-hero pa mobil — tettere padding, skrift
================================================================ */
@media (max-width: 640px) {
    .redaks-hero {
        padding: 44px 24px 36px !important;
    }
    .redaks-hero h1 {
        font-size: clamp(22px, 5.5vw, 30px) !important;
        letter-spacing: -0.8px !important;
        margin-bottom: 14px !important;
    }
    .redaks-hero p {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }
    /* Kompakt innhold-seksjoner under */
    .page-id-10 .entry-content > div:not(.redaks-hero)[style*=padding] {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 36px !important;
    }
}

/* ================================================================
   Editorial hero (.altom-cover) — mobil
================================================================ */
@media (max-width: 640px) {
    .altom-cover { min-height: clamp(330px, 64vw, 460px); }
    .altom-cover-inner { padding: 0 20px 34px; }
    .altom-cover-title { font-size: clamp(24px, 6.6vw, 32px) !important; letter-spacing: -0.6px !important; }
    .altom-cover-cat { font-size: 12px; margin-bottom: 10px; }
    .altom-cover-meta { font-size: 13px; }
    body.altom-has-cover #inner-wrap .entry-content { padding: 22px 18px 64px !important; }
    .altom-has-cover .altom-breadcrumb { margin-top: 22px !important; padding: 0 18px !important; }
}

/* ================================================================
   Nyhetsbrev-side (page 13) — mobil
================================================================ */
@media (max-width: 640px) {
    .nb-masthead { padding: calc(var(--altom-header-height) + 12px) 22px 52px !important; }
    .nb-masthead h1 { font-size: clamp(26px, 7vw, 36px) !important; letter-spacing: -1px !important; }
    .nb-masthead p { font-size: 15px !important; }

    .nb-section { padding: 44px 18px 0 !important; }
    .nb-benefits { grid-template-columns: 1fr !important; gap: 14px !important; }
    .nb-card { padding: 24px 20px !important; }

    .nb-signup { padding: 56px 22px !important; margin-top: 52px !important; }
    /* Skjema stables vertikalt på mobil */
    .nb-signup .mc4wp-form-fields { flex-direction: column !important; max-width: 380px !important; }
    .nb-signup .mc4wp-form-fields p { flex: 0 0 auto !important; }
    .nb-signup .mc4wp-form input[type="email"] { font-size: 16px !important; text-align: left !important; }
    .nb-signup .mc4wp-form input[type="submit"] { width: 100% !important; }

    .nb-text { padding: 48px 22px 64px !important; }
    .nb-text h2 { font-size: 21px !important; }
    .nb-text p { font-size: 16px !important; }
}

/* ================================================================
   Breadcrumb — mobiltilpasning
================================================================ */
@media (max-width: 640px) {
    .altom-breadcrumb {
        font-size: 11.5px;
        gap: 4px 6px;
        margin-bottom: 16px;
    }
    .altom-bc-current {
        max-width: 200px;
    }
}

/* ================================================================
   Artikkelgrid — mobiloppsett
================================================================ */
@media (max-width: 900px) {
    .altom-latest-grid { grid-template-columns: repeat(2, 1fr); }
    .altom-latest-section { padding: 52px 24px 48px; }
}

@media (max-width: 540px) {
    .altom-latest-grid { grid-template-columns: 1fr; }
    .altom-latest-section { padding: 40px 16px 36px; }
    .altom-latest-title { font-size: 1.25rem; }
}

/* ================================================================
   FORSIDE-REDESIGN v1.7.0 — mobiloppsett
================================================================ */
@media (max-width: 900px) {
    .altom-hovedsak { grid-template-columns: 1fr; gap: 0; }
    .altom-hovedsak-media { min-height: 0; aspect-ratio: 16 / 9; }
    .altom-hovedsak-body { padding: 26px 24px 30px; }
    .altom-hovedsak-section { padding: 48px 24px 4px; }
    .altom-section-eyebrow { padding: 0 24px; }
    .altom-temaer-grid { grid-template-columns: repeat(3, 1fr); }
    .altom-temaer-section { padding: 20px 24px 48px; }
}

@media (max-width: 640px) {
    .altom-temaer-grid { grid-template-columns: repeat(2, 1fr); }
    .altom-trust-band h2 { font-size: 1.3rem; }
}

@media (max-width: 540px) {
    .altom-hovedsak-section { padding: 36px 16px 4px; }
    .altom-hovedsak-body { padding: 22px 18px 26px; }
    .altom-section-eyebrow { padding: 0 16px; }
    .altom-temaer-section { padding: 16px 16px 40px; }
    .page-id-26 .altom-trust-band { padding: 44px 20px; }
}

/* Verktøy-tabell: stables til kort under 760px */
@media (max-width: 760px) {
  .altom-vt thead { display: none; }
  .altom-vt, .altom-vt tbody, .altom-vt tr, .altom-vt td { display: block; width: 100%; }
  .altom-vt tr { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 4px 0; }
  .altom-vt tbody tr:hover { background: var(--surface); }
  .altom-vt td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); text-align: right; }
  .altom-vt td:last-child { border-bottom: 0; }
  .altom-vt td::before { content: attr(data-label); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-subtle); text-align: left; }
  .altom-vt-namecell { flex-direction: column; align-items: flex-start; text-align: left; }
  .altom-vt-namecell::before, .altom-vt-ctacell::before { display: none; }
  .altom-vt-cta { width: 100%; text-align: center; }
  .altom-vt-bar { flex-direction: column; align-items: stretch; }
}

/* Verktøytabell mobil-fiks: navnecelle venstrejusteres (slår .altom-vt td text-align:right) */
@media (max-width: 760px) { .altom-vt td.altom-vt-namecell { text-align: left; } }

/* Verktøytabell mørk hud, mobilkort (page-id-9) */
@media (max-width: 760px) {
  .page-id-9 .altom-vt tr { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
  .page-id-9 .altom-vt tbody tr:hover { background: rgba(255,255,255,0.04); }
  .page-id-9 .altom-vt td { border-bottom-color: rgba(255,255,255,0.08); }
  .page-id-9 .altom-vt td::before { color: rgba(255,255,255,0.50); }
}

/* ================================================================
   iOS-FIKS: backdrop-filter på position:fixed (header + mobilmeny) trigger
   om-komposittering som skalerer/kutter innhold ved scroll på iOS. Skru av på
   mobil og bruk solide bakgrunner i stedet. Hever også solid-graden på pillen.
================================================================ */
@media (max-width: 900px) {
    #altom-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body.scrolled #altom-header {
        background-color: rgba(28,24,19,0.97) !important;
    }
    /* forside transparent-topp beholdes (ingen filter nødvendig) */
    #altom-mobile-nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: #1c1813 !important;
    }
}