/* ============================================================
   lr-klub.css — Loeberute Klub landing page (v1 fake door)
   Bygger på lr-theme.css' tokens. Indlæses kun på /klub.
   Tokens: --lr-navy #081158, --lr-amber #FBB244, --lr-amber-hover #e9a02e,
   --lr-green #27ae60, --lr-green-light #e8f8ef, --lr-blue-light #e3f0ff,
   --lr-surface #f6f8fb, --lr-border #e9ecef, --lr-muted #6c757d.
   amberLight #fff7e6 + purpleLight #f3e8ff er ikke globale vars → hex her.
   ============================================================ */

.lr-klub {
    font-family: 'Open Sans', system-ui, sans-serif;
    color: #333;
}

/* ----- Fælles sektion + heading ---------------------------- */
.lr-klub-section { padding: 5rem 1.5rem; }
.lr-klub-section--surface { background: var(--lr-surface); }

.lr-klub-head { text-align: center; max-width: 760px; margin: 0 auto 2.75rem; }

.lr-klub-eyebrow {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.lr-klub-eyebrow--amber { color: var(--lr-amber); }

.lr-klub-h2 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    color: var(--lr-navy);
    letter-spacing: -.4px;
    line-height: 1.12;
    font-size: 2.2rem;
    margin: .5rem 0 0;
}
.lr-klub-sub { color: var(--lr-muted); margin: .65rem auto 0; max-width: 620px; }

/* ----- Hero ------------------------------------------------- */
.lr-klub-hero {
    background: linear-gradient(160deg, #fff7e6 0%, #fff 60%);
}
.lr-klub-hero__inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 4.5rem 1.5rem;
}
.lr-klub-eyebrow--pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid var(--lr-amber);
    color: var(--lr-amber-hover);
    box-shadow: 0 4px 14px rgba(251, 178, 68, .18);
}
.lr-klub-hero__title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--lr-navy);
    letter-spacing: -1px;
    line-height: 1.05;
    font-size: clamp(2.2rem, 7vw, 3.7rem);
    text-wrap: balance;
    margin: 1.4rem 0 0;
}
.lr-klub-accent { color: var(--lr-amber); }
.lr-klub-hero__lead {
    font-size: 1.2rem;
    color: #333;
    line-height: 1.6;
    max-width: 620px;
    margin: 1.1rem auto 0;
}
.lr-klub-hero__ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.9rem;
}

/* Ghost-knap (lys baggrund) */
.lr-klub-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .7rem 1.5rem;
    border-radius: 50px;
    border: 1px solid var(--lr-border);
    background: transparent;
    color: var(--lr-navy);
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.lr-klub-btn-ghost:hover { background: #fff; border-color: #d8dde6; color: var(--lr-navy); }

/* Outline-navy (månedligt pricing) */
.lr-klub-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: .8rem 1.5rem;
    border-radius: 50px;
    border: 1.5px solid var(--lr-navy);
    background: #fff;
    color: var(--lr-navy);
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.lr-klub-btn-outline:hover { background: var(--lr-navy); color: #fff; }

/* ----- Pillars --------------------------------------------- */
.lr-klub-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.lr-klub-pillar {
    background: #fff;
    border-radius: 24px;
    padding: 2.25rem 1.85rem;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 24px rgba(8, 17, 88, .07);
}
.lr-klub-pillar__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}
.lr-klub-pillar__icon--purple { background: #f3e8ff; color: #7c3aed; }
.lr-klub-pillar__icon--blue { background: var(--lr-blue-light); color: var(--lr-navy); }
.lr-klub-pillar__icon--amber { background: #fff7e6; color: var(--lr-amber); }
.lr-klub-pillar__tag {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: .4rem;
}
.lr-klub-pillar__title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    color: var(--lr-navy);
    font-size: 1.28rem;
    line-height: 1.2;
    text-wrap: balance;
    margin: 0;
}
.lr-klub-pillar__desc { font-size: .94rem; color: #333; line-height: 1.6; margin: .65rem 0 0; }
.lr-klub-checklist { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 9px; }
.lr-klub-checklist li { display: flex; gap: 10px; align-items: center; font-size: .88rem; color: var(--lr-navy); font-weight: 600; }
.lr-klub-check {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background: var(--lr-green-light);
    color: var(--lr-green);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: .65rem;
}

/* ----- Gratis vs Klub-tabel -------------------------------- */
.lr-klub-compare { max-width: 760px; margin: 0 auto; }
.lr-klub-table {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--lr-border);
    overflow: hidden;
}
.lr-klub-table__head,
.lr-klub-table__row {
    display: grid;
    grid-template-columns: 1fr 110px 110px;
    align-items: center;
    padding: 14px 24px;
}
.lr-klub-table__head { border-bottom: 1px solid var(--lr-border); }
.lr-klub-table__head .lr-klub-th-fn {
    font-size: .8rem; font-weight: 700; color: var(--lr-muted);
    text-transform: uppercase; letter-spacing: 1px;
}
.lr-klub-table__head .lr-klub-th-free {
    text-align: center; font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700; color: var(--lr-muted); font-size: .95rem;
}
.lr-klub-table__head .lr-klub-th-mem {
    text-align: center; font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800; color: var(--lr-navy); font-size: .95rem;
    display: inline-flex; gap: 5px; justify-content: center; align-items: center;
}
.lr-klub-table__head .lr-klub-th-mem i { color: var(--lr-amber); }
.lr-klub-table__row { border-bottom: 1px solid #f0f0f0; }
.lr-klub-table__row:last-child { border-bottom: none; }
.lr-klub-table__row--prem { background: rgba(251, 178, 68, .03); }
.lr-klub-table__row .lr-klub-fn { font-size: .94rem; color: var(--lr-navy); font-weight: 600; }
.lr-klub-soon { font-size: .72rem; font-weight: 700; color: var(--lr-amber-hover); margin-left: 6px; }
.lr-klub-mark { display: grid; place-items: center; }
.lr-klub-mark span {
    width: 26px; height: 26px; border-radius: 50px;
    display: grid; place-items: center; font-size: .8rem;
}
.lr-klub-mark--free span { background: var(--lr-green-light); color: var(--lr-green); }
.lr-klub-mark--accent span { background: var(--lr-amber); color: #fff; }
.lr-klub-mark--off { color: #cdd2da; font-size: 1rem; }

/* ----- Pricing --------------------------------------------- */
.lr-klub-pricing { display: flex; gap: 24px; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.lr-klub-price {
    width: 360px;
    max-width: 100%;
    background: #fff;
    border-radius: 22px;
    border: 1px solid var(--lr-border);
    padding: 2rem;
    position: relative;
}
.lr-klub-price--rec {
    border: 2px solid var(--lr-amber);
    box-shadow: 0 12px 40px rgba(251, 178, 68, .18);
}
.lr-klub-price__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lr-amber);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 5px 14px;
    border-radius: 50px;
    text-transform: uppercase;
    white-space: nowrap;
}
.lr-klub-price__title { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; color: var(--lr-navy); font-size: 1.2rem; }
.lr-klub-price__sub { font-size: .9rem; color: var(--lr-muted); margin-top: 2px; }
.lr-klub-price__amount {
    display: flex; align-items: baseline; gap: 8px; margin-top: 1rem;
    font-family: 'Montserrat', system-ui, sans-serif; font-size: 3rem; font-weight: 800;
    color: var(--lr-navy); letter-spacing: -1px;
}
.lr-klub-price__amount span { font-family: 'Open Sans', system-ui, sans-serif; font-size: .95rem; font-weight: 400; color: var(--lr-muted); }
.lr-klub-price__note { font-size: .88rem; color: var(--lr-muted); margin-top: 4px; }
.lr-klub-price__note--green { color: var(--lr-green); font-weight: 700; }
.lr-klub-price .lr-btn-cta,
.lr-klub-price .lr-klub-btn-outline { width: 100%; margin-top: 1.4rem; }

/* ----- Community/support-stribe ---------------------------- */
.lr-klub-strip { background: var(--lr-navy); padding: 3.5rem 1.5rem; color: #fff; }
.lr-klub-strip__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.lr-klub-strip__icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: rgba(251, 178, 68, .16); color: var(--lr-amber);
    display: inline-grid; place-items: center; font-size: 1.5rem; margin-bottom: 1.1rem;
}
.lr-klub-strip__inner h3 {
    font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700;
    color: #fff; font-size: 1.5rem; text-wrap: balance; margin: 0;
}
.lr-klub-strip__inner p { color: rgba(255, 255, 255, .8); font-size: 1rem; line-height: 1.6; max-width: 620px; margin: .75rem auto 0; }

/* ----- FAQ (oven på .lr-faq fra lr-theme) ------------------ */
.lr-klub-faq { max-width: 820px; margin: 0 auto; }

/* ----- "Kommer snart"-overlay (selvstændigt, ingen Bootstrap) ---- */
.lr-klub-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 17, 88, .55);
    display: none;
    place-items: center;
    z-index: 2000;
    padding: 1.5rem;
}
.lr-klub-overlay.is-open { display: grid; }
.lr-klub-overlay__card {
    background: #fff;
    border-radius: 22px;
    max-width: 420px;
    width: 100%;
    padding: 2.25rem 1.75rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(8, 17, 88, .3);
}
.lr-klub-modal__icon {
    width: 64px; height: 64px; border-radius: 18px;
    background: #fff7e6; color: var(--lr-amber);
    display: inline-grid; place-items: center; font-size: 1.6rem; margin-bottom: 1rem;
}
.lr-klub-modal h3 { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; color: var(--lr-navy); }
.lr-klub-modal p { color: var(--lr-muted); }

/* ----- Responsiv ------------------------------------------- */
@media (max-width: 960px) {
    .lr-klub-pillars { grid-template-columns: 1fr; max-width: 460px; }
    .lr-klub-pricing { flex-direction: column; align-items: center; }
    .lr-klub-h2 { font-size: 1.9rem; }
    .lr-klub-section { padding: 3.5rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lr-klub-btn-ghost, .lr-klub-btn-outline { transition: none; }
}
