/* ProTruck — maskine-single.css
   Enkelt-maskine-siden: mellemzonen (§17, builder/pt-maskine-*) +
   Kalmar-faceliftet (§20: hero, pt-mdesc, pt-mspec, pt-mgal).
   Flyttet fra css/custom.css (runde 5d); sektionsnummer og indhold
   er bevaret. Indlæses betinget i <head> — lige efter custom.css —
   af inc/pt-assets.php, når layoutet (typisk skabelonerne
   »Enkelt maskine« / »Enkelt maskine - Kalmar«) har et pt-maskine-*-
   element eller klassen pt-kalmar-hero.
   Cache-bustes via filemtime (ingen manuel versions-bump). */

/* =============================================================
   17. Maskine-single mellemzone — redesign "2A + Lag" (2026-08)
   Elementer: builder/pt-maskine-{nav,beskrivelse,specs,video,brand,usp}
   Datahelpers: inc/maskine-single-sections.php · JS: js/maskine-single.js §10
   Design-kilde: _design/maskine-single-redesign/design-final.html
   ============================================================= */

.pt-mnav, .pt-mdesc, .pt-mspec, .pt-mvideo, .pt-mbrand, .pt-musp, .pt-mgal {
    --pt-ms-red:    var(--protruck-red, #bf0921);
    --pt-ms-ink:    #212121;
    --pt-ms-body:   #565656;
    --pt-ms-muted:  #7f7f7f;
    --pt-ms-line:   #e6e9ec;
    --pt-ms-line2:  #eef0f2;
    --pt-ms-pale:   #f7f7f7;
}

/* ── Fælles byggesten ───────────────────────────────────────── */
.pt-msingle-h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pt-ms-ink);
    margin: 0;
}
.pt-msingle-rule {
    width: 48px;
    height: 3px;
    border: 0;
    background: var(--pt-ms-red);
    margin: 14px 0 22px;
}

/* Knapper (gradient-sweep, 1:1 med leje-sidens .pt-leje-btn) */
.pt-msingle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    font-family: inherit;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    cursor: pointer;
}
.pt-msingle-btn--primary {
    color: #fff;
    border: 0;
    background-color: transparent;
    background-image: linear-gradient(90deg, #c81930 50%, var(--protruck-red, #bf0921) 50%);
    background-size: 200%;
    background-position-x: 100%;
    transition: background-position .5s ease-in-out;
}
.pt-msingle-btn--primary:hover,
.pt-msingle-btn--primary:focus-visible { background-position-x: 0%; color: #fff; }
.pt-msingle-btn--primary:active { background-image: none; background-color: #a3081c; }
.pt-msingle-btn--ghost {
    color: #212121;
    border: 1px solid #212121;
    background-color: #fff;
    background-image: linear-gradient(90deg, #212121 50%, #fff 50%);
    background-size: 200%;
    background-position-x: 100%;
    transition: background-position .5s ease-in-out, color .5s ease-in-out;
}
.pt-msingle-btn--ghost:hover,
.pt-msingle-btn--ghost:focus-visible { background-position-x: 0%; color: #fff; }
.pt-msingle-btn svg { flex: 0 0 auto; }

/* Medie-kort på grå offset-baggrundsflade ("Lag"-signaturen) */
.pt-msingle-stack { position: relative; padding: 30px 30px 0 0; }
.pt-msingle-stack--flip { padding: 30px 0 0 30px; }
.pt-msingle-stack::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 78%;
    height: 78%;
    background: var(--pt-ms-pale, #f7f7f7);
}
.pt-msingle-stack--flip::before { right: auto; left: 0; }
.pt-msingle-card {
    position: relative;
    background: #fff;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .16);
}
.pt-msingle-card video {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
}

/* Video-cover m. rød play-knap (skjules efter klik — js/maskine-single.js §10) */
.pt-msingle-cover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    padding: 0;
    cursor: pointer;
    background-size: cover;
    background-position: center;
}
.pt-msingle-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(23, 25, 29, .18);
    transition: background .2s ease;
}
.pt-msingle-cover:hover::before,
.pt-msingle-cover:focus-visible::before { background: rgba(23, 25, 29, .38); }
.pt-msingle-cover__play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--protruck-red, #bf0921);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .32);
    transition: transform .2s ease;
}
.pt-msingle-cover:hover .pt-msingle-cover__play,
.pt-msingle-cover:focus-visible .pt-msingle-cover__play { transform: scale(1.08); }
.pt-msingle-cover__play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.pt-msingle-cover.pt-hidden { display: none; }

/* ── Sektionsnav (sticky bjælke) ────────────────────────────── */
/* JS (maskine-single.js §10) sætter .pt-mnav-section på elementets .uk-section — DEN er sticky,
   så bjælken følger med gennem hele siden (sticky på selve elementet ville
   kun virke inden for dets egen korte sektion). */
.pt-mnav-section {
    position: sticky;
    top: var(--pt-header-height, 80px);
    z-index: 50;
    background: #fff;
    border-top: 1px solid #e6e9ec;
    border-bottom: 1px solid #e6e9ec;
}
/* Sektions-padding væk uanset builder-opsætning (0,2,0 slår uk-section) */
.uk-section.pt-mnav-section { padding-top: 0; padding-bottom: 0; }
.pt-mnav__inner {
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 58px;
}
.pt-mnav__model {
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    margin-right: 6px;
    color: var(--pt-ms-ink);
}
.pt-mnav__links {
    display: flex;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.pt-mnav__links::-webkit-scrollbar { display: none; }
.pt-mnav__links a {
    position: relative;
    display: block;
    padding: 19px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pt-ms-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}
.pt-mnav__links a::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 3px;
    background: var(--pt-ms-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}
.pt-mnav__links a:hover { color: var(--pt-ms-ink); }
.pt-mnav__links a.pt-active { color: var(--pt-ms-ink); }
.pt-mnav__links a.pt-active::after { transform: scaleX(1); }
.pt-mnav__links a[hidden] { display: none; }
.pt-mnav .pt-msingle-btn { min-height: 38px; padding: 0 18px; font-size: 11px; }

/* Anker-mål lander under header (80) + nav (58) + luft */
.pt-mdesc [id], .pt-mspec [id], .pt-mvideo [id], .pt-mbrand [id], .pt-mgal [id] {
    scroll-margin-top: calc(var(--pt-header-height, 80px) + 70px);
}

/* ── Beskrivelse + "Kort om serien" ─────────────────────────── */
.pt-mdesc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
.pt-mdesc__grid--single { grid-template-columns: minmax(0, 1fr); }
.pt-mdesc__prose { font-size: 15px; line-height: 1.625; color: var(--pt-ms-body); }
.pt-mdesc__prose p { margin: 0 0 18px; }
.pt-mdesc__prose p:last-child { margin-bottom: 0; }
.pt-mdesc__facts {
    border: 1px solid var(--pt-ms-line);
    background: #fff;
    padding: 24px;
}
.pt-mdesc__facts-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--pt-ms-muted);
    margin: 0 0 14px;
}
.pt-mdesc__facts dl { margin: 0; }
.pt-mdesc__fact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--pt-ms-line2);
    font-size: 14px;
}
.pt-mdesc__fact dt { color: var(--pt-ms-body); font-weight: 600; margin: 0; }
.pt-mdesc__fact dd { color: var(--pt-ms-ink); font-weight: 700; margin: 0; text-align: right; }
.pt-mdesc__facts-foot { font-size: 12px; color: var(--pt-ms-muted); margin: 12px 0 0; }

/* ── Specifikationer (kort m. rød topkant) ──────────────────── */
.pt-mspec__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.pt-mspec__head .pt-msingle-h2 { margin-bottom: 24px; }
.pt-mspec__docs { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.pt-mspec__card {
    background: #fff;
    border-top: 3px solid var(--pt-ms-red);
    box-shadow: 0 5px 23px rgba(0, 0, 0, .07);
    overflow-x: auto;
}
.pt-mspec__table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; margin: 0; }
.pt-mspec__table th {
    text-align: left;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pt-ms-ink);
    background: #fff;
    padding: 15px 22px 12px;
    border-bottom: 1px solid var(--pt-ms-line2);
    white-space: nowrap;
}
.pt-mspec__table td {
    padding: 13px 22px;
    color: var(--pt-ms-body);
    border-bottom: 1px solid var(--pt-ms-line2);
}
.pt-mspec__table tbody tr:last-child td { border-bottom: 0; }
.pt-mspec__table td:first-child { font-weight: 700; color: var(--pt-ms-ink); }
.pt-mspec__table tbody tr { transition: background .12s ease; }
.pt-mspec__table tbody tr:hover { background: var(--pt-ms-pale); }

/* Dokument-modal (native <dialog>, bygges af js/maskine-single.js §10) */
.pt-mdoc-modal { border: 0; padding: 0; max-width: min(1500px, 96vw); width: 100%; background: #fff; }
.pt-mdoc-modal::backdrop { background: rgba(17, 19, 22, .72); }
.pt-mdoc-modal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid #e6e9ec;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
}
.pt-mdoc-modal__close { border: 0; background: none; cursor: pointer; padding: 6px; color: #212121; display: flex; }
.pt-mdoc-modal__close svg { width: 18px; height: 18px; }
.pt-mdoc-modal iframe { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 82vh; border: 0; }

/* ── "Lag"-medie-sektionerne (video / brand / guide-teaser) ─────
   Fælles spejlbart grid; siden (medie venstre/højre) tildeles server-side af
   zig-zag-tælleren i inc/maskine-single-sections.php, da sektionerne er
   betingede og rytmen ellers ville knække på maskiner uden video/guide. */
.pt-mguide { --pt-ms-red: var(--protruck-red, #bf0921); --pt-ms-ink: #212121; --pt-ms-body: #565656; --pt-ms-muted: #7f7f7f; --pt-ms-line: #e6e9ec; --pt-ms-line2: #eef0f2; --pt-ms-pale: #f7f7f7; }
.pt-mmedia__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 72px;
    align-items: center;
}
.pt-mmedia__grid--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.pt-mmedia__grid--flip .pt-msingle-stack { order: -1; }
.pt-mvideo__text { font-size: 15px; line-height: 1.625; color: var(--pt-ms-body); margin: 0; }
.pt-mbrand__prose { font-size: 15px; line-height: 1.625; color: var(--pt-ms-body); }
.pt-mbrand__prose p { margin: 0 0 18px; }
.pt-mbrand__prose p:last-child { margin-bottom: 0; }
.pt-mbrand__card, .pt-mguide__card { aspect-ratio: 5 / 4; overflow: hidden; }
.pt-mbrand__card img, .pt-mbrand__card picture,
.pt-mguide__card img, .pt-mguide__card picture { display: block; width: 100%; height: 100%; }
.pt-mbrand__card img, .pt-mguide__card img { object-fit: cover; }

/* Guide-teaser: eyebrow + prosa + ghost-knap m. pil */
.pt-msingle-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--pt-ms-red, #bf0921);
    margin: 0 0 14px;
}
/* Citat-udtryk (som det gamle design): røde anførselstegn før/efter + større tekst */
.pt-mguide__prose {
    font-size: 17px;
    line-height: 1.65;
    color: var(--pt-ms-body, #565656);
}
.pt-mguide__prose::before {
    content: '\201C';
    display: block;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.08em;
    color: var(--pt-ms-red, #bf0921);
    margin-bottom: 6px;
}
.pt-mguide__prose::after {
    content: '\201D';
    display: block;
    text-align: right;
    font-size: 44px;
    font-weight: 800;
    line-height: .4;
    letter-spacing: -.08em;
    color: var(--pt-ms-red, #bf0921);
    margin-top: 14px;
}
.pt-mguide__prose p { margin: 0 0 18px; }
.pt-mguide__prose p:last-child { margin-bottom: 0; }
.pt-mguide__btn { margin-top: 30px; }

/* Tæt rytme: to Lag-medie-sektioner lige efter hinanden trækkes sammen, så
   zig-zagget læses som ét forløb. Uden :has-støtte beholdes normal padding. */
.uk-section:has(.pt-mmedia) + .uk-section:has(.pt-mmedia) { padding-top: 0; }

/* ── USP-strip (ingen overskrift, hairline-delt) ────────────── */
/* Hairline mod sektionen ovenover, så strippen ikke flyder ud i ingenting */
.uk-section:has(.pt-musp) { border-top: 1px solid #eef0f2; }
.pt-musp {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.pt-musp__item { padding: 6px 32px; border-left: 1px solid var(--pt-ms-line, #e6e9ec); }
.pt-musp__item:first-child { border-left: 0; padding-left: 0; }
.pt-musp__icon { width: 46px; height: 46px; margin-bottom: 14px; }
.pt-musp__title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pt-ms-ink, #212121);
    margin: 0 0 6px;
}
.pt-musp__text { font-size: 13px; line-height: 1.55; color: var(--pt-ms-body, #565656); margin: 0; }
.pt-musp__text p { margin: 0; font-size: inherit; line-height: inherit; }
.pt-musp__text a { color: inherit; text-decoration: underline; }

/* ── Responsivt ─────────────────────────────────────────────── */
@media (max-width: 959px) {
    .pt-mnav__model { display: none; }
    .pt-mdesc__grid, .pt-mmedia__grid, .pt-mmedia__grid--flip {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .pt-mmedia__grid--flip .pt-msingle-stack { order: 0; }
    .pt-musp { grid-template-columns: 1fr 1fr; gap: 32px 0; }
    .pt-musp__item { padding: 0 24px; }
    .pt-musp__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 559px) {
    .pt-mnav .pt-msingle-btn { display: none; }
    .pt-musp { grid-template-columns: 1fr; gap: 28px; }
    .pt-musp__item { border-left: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pt-msingle-btn,
    .pt-msingle-cover::before,
    .pt-msingle-cover__play,
    .pt-mnav__links a,
    .pt-mnav__links a::after,
    .pt-mspec__table tbody tr { transition: none; }
}


/* =============================================================
   20. Kalmar maskine-single facelift (2026-08-26)
   Design godkendt i _design/kalmar-single-redesign/oplaeg-a.html
   (harness 8195 + artifact). Bygger oven på §17's formsprog:
   - .pt-kalmar-hero: rolig video-hero (kun H1/underoverskrift/
     knapper), midterstillet vertikalt, venstrestillet tekst.
   - pt-mdesc-udvidelser: eyebrow + brand-logo i faktapanelet
     (logo = BESKÅRET kalmar-logo — original-SVG'en har ~25 %
     indbygget luft; brug images/kalmar-logo-cropped.svg).
   - Specs på uk-section-primary (#2c112d = Kalmars brand-lilla):
     hvid overskrift, første dok-knap rød primær, øvrige hvid ghost.
   - .pt-mgal: produktgalleri (stage 16:9 + thumbs m. rød markør);
     Kalmar-varianten (.pt-mgal--kalmar) bruger lilla accenter.
   (.pt-seotekst + .bubbles-block bor fortsat i css/custom.css §20 —
   de bruges også uden for maskine-singles.)
   Kalmars palet: #2c112d (lilla) · #bcadc8 · #fee8db · #e29682.
   JS: custom.js §13 (læs mere) + js/maskine-single.js §14 (galleri)
   · §10 (nav m.m.).
   ============================================================= */

/* ── Hero ─────────────────────────────────────────────────────── */
.uk-section.pt-kalmar-hero {
    display: flex;
    align-items: center;
    min-height: 640px;
}
.pt-kalmar-hero > .uk-container { width: 100%; }
.pt-kalmar-hero h1 {
    font-size: clamp(28px, 3.9vw, 44px);
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
    text-align: left;
    margin-bottom: 14px;
}
.pt-kalmar-hero .pt-khero-sub {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .9);
    text-align: left;
    max-width: 72ch;
    margin-bottom: 36px;
}
/* Knapperne skal følge venstrestillingen (layoutets cta-element står m. --center) */
.pt-kalmar-hero .pt-form-cta--center { justify-content: flex-start; }
@media (max-width: 700px) {
    .uk-section.pt-kalmar-hero { min-height: 560px; }
}

/* ── Beskrivelse: eyebrow + brand-logo i faktapanelet ─────────── */
.pt-mdesc__eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--pt-ms-red);
    margin: 0 0 8px;
}
.pt-mdesc__facts-logo {
    height: 34px;
    width: auto;
    display: block;
    margin: 2px 0 22px;
}

/* ── Specs på Kalmar-lilla (uk-section-primary = #2c112d) ─────── */
.uk-section-primary .pt-mspec .pt-msingle-h2 { color: #fff; }
.uk-section-primary .pt-mspec .pt-mspec__card {
    box-shadow: 0 22px 54px rgba(0, 0, 0, .35);
}
/* Første dok-knap (datablad) = rød primær, resten = hvid ghost */
.uk-section-primary .pt-mspec .pt-mspec__docs .pt-msingle-btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .75);
    background-color: transparent;
    background-image: linear-gradient(90deg, #fff 50%, transparent 50%);
    background-size: 200%;
    background-position-x: 100%;
}
.uk-section-primary .pt-mspec .pt-mspec__docs .pt-msingle-btn--ghost:hover,
.uk-section-primary .pt-mspec .pt-mspec__docs .pt-msingle-btn--ghost:focus-visible {
    background-position-x: 0%;
    color: #2c112d;
}
.uk-section-primary .pt-mspec .pt-mspec__docs .pt-msingle-btn--ghost:first-child {
    color: #fff;
    border: 0;
    background-color: transparent;
    background-image: linear-gradient(90deg, #c81930 50%, var(--protruck-red, #bf0921) 50%);
}
.uk-section-primary .pt-mspec .pt-mspec__docs .pt-msingle-btn--ghost:first-child:hover,
.uk-section-primary .pt-mspec .pt-mspec__docs .pt-msingle-btn--ghost:first-child:focus-visible {
    background-position-x: 0%;
    color: #fff;
}

/* ── Galleri (pt-maskine-galleri) ─────────────────────────────── */
.pt-mgal { --pt-mgal-accent: #17191d; --pt-mgal-stage-bg: #f2f2f2; }
.pt-mgal--kalmar { --pt-mgal-accent: #2c112d; --pt-mgal-stage-bg: #f6f2f7; }
.pt-mgal__eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--protruck-red, #bf0921);
    margin: 0 0 8px;
}
.pt-mgal__stage {
    position: relative;
    background: var(--pt-mgal-stage-bg);
    margin-top: 8px;
}
.pt-mgal__stage img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.pt-mgal__count {
    position: absolute;
    right: 0;
    bottom: 0;
    background: var(--pt-mgal-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 9px 14px;
}
.pt-mgal__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
}
.pt-mgal__thumbs button {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    width: 132px;
}
.pt-mgal__thumbs button img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    opacity: .55;
    transition: opacity .25s ease;
}
.pt-mgal__thumbs button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--protruck-red, #bf0921);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.pt-mgal__thumbs button:hover img { opacity: .85; }
.pt-mgal__thumbs button.pt-active img { opacity: 1; }
.pt-mgal__thumbs button.pt-active::after { transform: scaleX(1); }
@media (max-width: 560px) {
    .pt-mgal__thumbs button { width: 88px; }
}
@media (prefers-reduced-motion: reduce) {
    .pt-mgal__thumbs button img,
    .pt-mgal__thumbs button::after { transition: none; }
}