/* Header — matches index.css */
[hidden] { display: none !important; }
header { background: #f7f4ee; backdrop-filter: none; }
nav.wrap { max-width: 1244px; min-height: 74px; padding-block: 14px; gap: 28px; }
.brand { font-family: 'DM Sans', sans-serif; font-size: 21px; text-decoration: none; }
.iris { width: 28px; height: 28px; }
.iris::after { inset: 8px; background: #f7f4ee; }
.navlinks { font-family: 'DM Sans', sans-serif; font-weight: 500; color: #50545a; }
.navlinks a:hover { color: #a93616; }
.burger { width: 44px; height: 44px; }
.mobile-nav { background: #f7f4ee; }

@media (max-width: 860px) {
    nav.wrap { min-height: 68px; flex-wrap: wrap; }
    .navlinks { display: flex; width: 100%; flex-wrap: wrap; gap: 12px 24px; }
    .burger { display: none; }
    .menu-ready .navlinks { display: none; }
    .menu-ready .burger { display: flex; }
    .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 600px) {
    nav.wrap { padding-inline: 20px; }
}

/* ─────────────────────────────────────────────
   Fælles case-sider (naboting.html, cykelgron.html)
   Portfoliets typografi og layout (Anton + DM Sans,
   4px hjørner, store farveblokke). Standardfarverne
   er Naboting-appens; hvert projekt kan overskrive
   --nb-* variablerne i sin egen CSS-fil.
   ───────────────────────────────────────────── */
.nb {
    --nb-green: #517849;
    --nb-green-dark: #2f4a28;
    --nb-sand: #eddbc5;
    --nb-cream: #f7f4ee;
    --nb-accent: #d98359;
    --nb-accent-text: #96461f;
    --nb-ink: #2d2b2a;
    --nb-muted: #5c5955;
    --nb-line: #d5cbbd;

    display: block;
    background: var(--nb-cream);
    color: var(--nb-ink);
}

.nb h1, .nb h2, .nb h3 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
}
.nb code {
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(45, 43, 42, 0.08);
}
.nb a:focus-visible { outline: 3px solid var(--nb-green-dark); outline-offset: 4px; }

.nb-wrap { max-width: 1244px; margin: 0 auto; padding: 0 32px; }

/* Knapper — samme form som portfoliets .btn */
.nb-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.nb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.nb-btn:hover { transform: translateY(-2px); }
.nb-btn--primary { background: var(--nb-green); color: #fff; }
.nb-btn--primary:hover { background: var(--nb-green-dark); }
.nb-btn--ghost { border-color: #8a7f70; color: var(--nb-ink); }
.nb-btn--ghost:hover { background: #fff; }
.nb-btn--light { background: var(--nb-cream); color: var(--nb-green-dark); }
.nb-btn--light:hover { background: #fff; }
.nb-btn--outline-light { border-color: rgba(247, 244, 238, 0.6); color: var(--nb-cream); }
.nb-btn--outline-light:hover { background: rgba(247, 244, 238, 0.12); }

/* Hero */
.nb-hero { background: var(--nb-sand); padding: 28px 0 64px; }
.nb-back {
    display: inline-block;
    margin-bottom: 28px;
    color: var(--nb-green-dark);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.nb-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.nb-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 48px;
    /* Billedet starter øverst, så det står ens, uanset hvor lang overskriften er */
    align-items: start;
}
.nb-hero-text { min-width: 0; }
.nb-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: #4a4239;
    font-size: 13px;
    font-weight: 500;
}
.nb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nb-green); flex-shrink: 0; }
.nb-hero h1 { font-size: clamp(56px, 8vw, 104px); line-height: 0.95; margin: 0; color: var(--nb-green-dark); }
.nb-tagline { margin: 8px 0 0; font-size: 23px; color: var(--nb-ink); }
.nb-lead { margin: 18px 0 0; max-width: 50ch; font-size: 16px; line-height: 1.6; color: #4a4239; }
.nb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 22px 0 28px;
    padding: 0;
}
.nb-chips li {
    padding: 6px 12px;
    border: 1px solid #a68d75;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* Farveblok med illustration — som projektkortene på forsiden */
.nb-visual {
    position: relative;
    margin: 0;
    padding: 56px 28px 64px;
    border-radius: 8px;
    background: var(--nb-green);
    color: var(--nb-cream);
    overflow: hidden;
}
.nb-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 18px 40px rgba(20, 30, 15, 0.35);
}
.nb-visual-tag {
    position: absolute;
    top: 20px;
    left: 28px;
    font-size: 12px;
    font-weight: 700;
}
.nb-visual-num {
    position: absolute;
    right: 24px;
    bottom: 12px;
    font-family: 'Anton', sans-serif;
    font-size: 40px;
    line-height: 1;
    color: var(--nb-sand);
}

/* Nøgletal */
.nb-facts { padding: 0; background: var(--nb-green-dark); color: var(--nb-cream); }
.nb-facts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-block: 0;
}
.nb-facts-grid div {
    padding: 28px 24px;
    border-left: 1px solid rgba(247, 244, 238, 0.18);
}
.nb-facts-grid div:first-child { border-left: none; padding-left: 0; }
.nb-facts dt { font-size: 13px; opacity: 0.8; margin-bottom: 6px; }
.nb-facts dd { margin: 0; font-size: 20px; font-weight: 700; }
.nb-facts dd.nb-big { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 44px; line-height: 1; color: var(--nb-accent); }

/* Sektioner */
.nb-section { padding: 88px 0; }
.nb-section--sand { background: var(--nb-sand); }
.nb-split {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 48px;
}
.nb-num {
    display: block;
    margin-bottom: 6px;
    font-family: 'Anton', sans-serif;
    font-size: 22px;
    color: var(--nb-accent-text);
}
.nb-head h2 { font-size: clamp(36px, 4.5vw, 52px); line-height: 1; margin: 0; color: var(--nb-green-dark); }
.nb-head--row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.nb-head--row p { max-width: 38ch; margin: 0; color: var(--nb-muted); font-size: 15px; }
.nb-body { max-width: 64ch; }
.nb-body p { margin: 0 0 18px; font-size: 16px; line-height: 1.65; color: #4a4239; }
.nb-body .nb-statement {
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.25;
    font-weight: 700;
    color: var(--nb-ink);
}

/* Kort — samme linje + orange markør som "Om mig" på forsiden */
.nb-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.nb-card {
    position: relative;
    padding: 28px 24px 26px;
    background: #fff;
    border-top: 2px solid var(--nb-green-dark);
    border-radius: 0 0 8px 8px;
}
.nb-card::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 48px;
    height: 4px;
    background: var(--nb-accent);
}
.nb-card-label {
    display: block;
    margin-bottom: 8px;
    color: var(--nb-accent-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.nb-card h3 { font-size: 26px; line-height: 1.05; margin: 0 0 12px; color: var(--nb-green-dark); }
.nb-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--nb-muted); }

.nb-challenge {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
    margin-top: 20px;
    padding: 28px;
    border-radius: 8px;
    background: var(--nb-green-dark);
    color: var(--nb-cream);
}
.nb-challenge-label {
    font-family: 'Anton', sans-serif;
    font-size: 26px;
    text-transform: uppercase;
    color: var(--nb-accent);
}
.nb-challenge p { margin: 0; font-size: 15px; line-height: 1.65; }

/* Lånets statusser — samme pills som i appen */
.nb-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    list-style: none;
    margin: 8px 0 28px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
}
.nb-flow li { display: flex; align-items: center; gap: 8px; }
.nb-flow li + li::before { content: "→"; color: var(--nb-muted); margin-right: 4px; }
.nb-or { font-size: 13px; color: var(--nb-muted); }
.nb-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}
.nb-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.nb-pill--pending { background: #f7e8d8; color: #7a3810; }
.nb-pill--ok      { background: #e8f0e3; color: #2d4a1e; }
.nb-pill--no      { background: #f8d7da; color: #842029; }
.nb-pill--done    { background: #eceae8; color: #3a3836; }

.nb-body .nb-learned {
    padding-left: 16px;
    border-left: 4px solid var(--nb-accent);
    color: var(--nb-muted);
}
.nb-learned strong { color: var(--nb-ink); }

/* Prøv appen */
.nb-try { background: var(--nb-green); color: var(--nb-cream); padding: 56px 0; }
.nb-try-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.nb-try h2 { font-size: clamp(34px, 4vw, 48px); margin: 0 0 8px; color: var(--nb-cream); }
.nb-try p { margin: 0; font-size: 15px; }
.nb-try code { background: rgba(247, 244, 238, 0.16); color: var(--nb-cream); }

/* Footer — samme som forsiden */
footer .wrap { max-width: 1244px; }
footer { background: #f7f4ee; border-top: 6px solid var(--magenta); padding-block: 64px 28px; }
footer h2 { font-size: 40px; max-width: 19ch; }
.footer-links { flex-wrap: wrap; gap: 24px; color: var(--ink); font-weight: 600; }
.footer-links a { padding-block: 8px; border-bottom: 1px solid currentColor; }
.footer-links a:hover { color: #a93616; }
.fineprint { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 48px; color: #50545a; font-size: 12px; }
.fineprint a { text-underline-offset: 4px; }

@media (max-width: 960px) {
    .nb-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .nb-split { grid-template-columns: 1fr; gap: 20px; }
    .nb-cards { grid-template-columns: 1fr; }
    .nb-facts-grid { grid-template-columns: repeat(2, 1fr); }
    .nb-facts-grid div:nth-child(3) { border-left: none; padding-left: 0; }
    .nb-facts-grid div:nth-child(n+3) { border-top: 1px solid rgba(247, 244, 238, 0.18); }
}

@media (max-width: 600px) {
    .nb-wrap { padding: 0 20px; }
    .nb-hero { padding-bottom: 44px; }
    .nb-tagline { font-size: 19px; }
    .nb-section { padding: 56px 0; }
    .nb-visual { padding: 48px 16px 56px; }
    .nb-facts-grid div { padding: 20px 16px; }
    .nb-facts dd.nb-big { font-size: 36px; }
    .nb-challenge { grid-template-columns: 1fr; gap: 10px; padding: 22px; }
    footer { padding-block: 44px 24px; }
    footer h2 { font-size: 34px; }
}

/* Lightbox: klik på et billede for at se det i fuld størrelse */
.cg-zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
}
.cg-zoom img { transition: transform .25s ease; }
.cg-zoom:hover img { transform: scale(1.03); }
.cg-zoom:focus-visible { outline: 3px solid var(--nb-green-dark); outline-offset: -3px; }

.lightbox {
    width: fit-content;
    max-width: 94vw;
    max-height: 94vh;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}
.lightbox::backdrop { background: rgba(20, 22, 18, 0.88); }
.lightbox-img {
    display: block;
    max-width: 94vw;
    max-height: calc(94vh - 70px);
    margin: 0 auto;
    object-fit: contain;
    border-radius: 4px;
}
.lightbox-caption {
    max-width: 70ch;
    margin: 12px auto 0;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: rgba(247, 244, 238, 0.85);
}
.lightbox-caption strong { color: #f7f4ee; }
.lightbox-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #2d2b2a;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.lightbox-close:hover { background: #f7f4ee; }
.lightbox-close:focus-visible { outline: 3px solid #fdb456; outline-offset: 2px; }

@media (max-width: 600px) {
    .lightbox-close { top: -12px; right: -4px; }
}

@media (prefers-reduced-motion: reduce) {
    .cg-zoom img { transition: none; }
    .cg-zoom:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nb-btn { transition: none; }
    .nb-btn:hover { transform: none; }
}