/* ============================================================
   OPPSAL BRETT & SPILL – OBS!
   Stilark for obs.karlsen.id
   ============================================================ */


/* ── VARIABLER & RESET ── */

:root {
    --brand:       #22bba3;
    --brand-dark:  #1a9688;
    --brand-light: #e6f7f5;
    --text:        #1a1a1a;
    --muted:       #6b7280;
    --bg:          #f5f5f0;
    --card:        #ffffff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Nunito", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}


/* ── HEADER ── */

header {
    background: linear-gradient(
        135deg,
        #179080 0%,
        #22bba3 40%,
        #2dd4bc 70%,
        #1a9688 100%
    );
    color: white;
    padding: 3.5rem 1.5rem 2.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Kornete grain-tekstur med hard-light blend (som i Photoshop) */
header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
    mix-blend-mode: hard-light;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

/* Radiale dybdeskygger */
header::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 85%, rgba(10, 60, 54, 0.4) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 10%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Sørg for at innhold ligger over pseudo-elementene */
header > * {
    position: relative;
    z-index: 1;
}

/* Logo – hard-light bevarer den 3D-ekstruderte effekten mot grønn bakgrunn */
.header-logo {
    width: min(540px, 85%);
    display: block;
    margin: 0 auto 1.1rem;
    mix-blend-mode: hard-light;
}

header .tagline {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.9;
}


/* ── LAYOUT ── */

main {
    max-width: 680px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
}

section {
    margin-bottom: 3rem;
}

/* Seksjonsoverskrift med dekorativ linje */
.section-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: "Fredoka", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 1rem;
}

.section-label::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--brand);
    opacity: 0.2;
    border-radius: 99px;
}


/* ── OM OSS + PRAKTISK INFO SIDE OM SIDE ── */

/* Grid-wrapper: to kolonner på desktop, én på mobil */
.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (max-width: 560px) {
    .intro-grid {
        grid-template-columns: 1fr;
    }
}

/* Fjern margin-bottom på seksjoner inne i grid (grid gap tar seg av det) */
.intro-grid section {
    margin-bottom: 0;
}

/* Kort skal fylle høyden i grid-cellen
.intro-grid .about-card,
.intro-grid .info-list {
    height: 100%;
}
*/
.about-card {
    background: var(--card);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
    font-size: 0.98rem;
}

.about-card p + p {
    margin-top: 0.65rem;
}

.about-card strong {
    color: var(--brand-dark);
}


/* ── PRAKTISK INFO ── */

.info-list {
    background: var(--card);
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.info-list li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
}


/* ── BLI MED / SIGNUP ── */

.signup-card {
    background: var(--card);
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.signup-intro {
    font-size: 0.97rem;
    color: var(--muted);
    max-width: 480px;
    line-height: 1.6;
}

/* Primærknapp: Spond */
.spond-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--brand);
    color: white;
    text-decoration: none;
    padding: 1rem 2.4rem;
    border-radius: 99px;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    box-shadow: 0 4px 22px rgba(34, 187, 163, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}

.spond-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 26px rgba(34, 187, 163, 0.45);
}

/* Rad med sekundærknapper */
.contact-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

/* Sekundærknapper: epost, telegram, signal */
.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
    padding: 0.5rem 1.1rem;
    border-radius: 99px;
    font-size: 0.88rem;
    font-weight: 700;
    border: 1.5px solid #ddd;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.contact-btn:hover {
    border-color: var(--brand);
    background: var(--brand-light);
    color: var(--brand-dark);
}

.contact-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}


/* ── PROGRAM / SCHEDULE ── */

.schedule {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Basis-kort for ett arrangement */
.session {
    background: var(--card);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--brand);
    transition: transform 0.15s;
}

.session:hover {
    transform: translateX(3px);
}

/* Varianter basert på status */
.session.done {
    opacity: 0.4;
    border-left-color: #ccc;
}

.session.away {
    border-left-color: #a78bfa;
    background: #f5f3ff;
}

.session.byog {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

/* Datoblokk (dag + måned) */
.date-block {
    text-align: center;
    min-width: 2.8rem;
}

.date-block .day {
    font-family: "Fredoka", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--brand);
}

.session.done  .date-block .day { color: #aaa; }
.session.away  .date-block .day { color: #a78bfa; }
.session.byog  .date-block .day { color: #f59e0b; }

.date-block .month {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.06em;
    font-weight: 700;
}

/* Tittel og beskrivelse */
.session-body {
    flex: 1;
}

.session-title {
    font-weight: 700;
    font-size: 0.98rem;
}

.session-desc {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 0.1rem;
}


/* ── STATUS-BADGES ── */

.badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.25rem 0.7rem;
    border-radius: 99px;
    white-space: nowrap;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.badge.done { background: #f3f4f6; color: #9ca3af; }
.badge.away { background: #ede9fe; color: #6d28d9; }
.badge.byog { background: #fef3c7; color: #92400e; }


/* ── SE FLERE-KNAPP ── */

.show-more-wrap {
    text-align: center;
    margin-top: 1rem;
}

.show-more-btn {
    background: none;
    border: 2px solid var(--brand);
    color: var(--brand);
    padding: 0.65rem 1.8rem;
    border-radius: 99px;
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.show-more-btn:hover {
    background: var(--brand);
    color: white;
}

.schedule-error {
    color: #c00;
    font-size: 0.9rem;
    padding: 1rem;
    background: #fff0f0;
    border-radius: 10px;
    text-align: center;
}


/* ── HANDLINGSKNAPPER PÅ PROGRAMKORT (YouTube + Lenke) ── */

/* Wrapper som holder ikon + label sammen */
.action-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.action-btn-label {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    line-height: 1;
}

/* YouTube-knapp */
.video-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #ff0000;
    opacity: 0.85;
    display: flex;
    align-items: center;
    transition: opacity 0.15s, transform 0.15s;
}

.video-btn:hover {
    opacity: 1;
    transform: scale(1.15);
}

.video-btn svg {
    width: 2rem;
    height: 2rem;
}

/* Lenke-knapp */
.link-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--brand-dark);
    opacity: 0.75;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
}

.link-btn:hover {
    opacity: 1;
    transform: scale(1.15);
}

.link-btn svg {
    width: 1.85rem;
    height: 1.85rem;
}


/* ── VIDEO MODAL ── */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.modal-overlay.open {
    display: flex;
}

.modal-box {
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    max-width: 700px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.modal-close:hover {
    opacity: 1;
}

/* 16:9 wrapper for iframe */
.modal-iframe-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.modal-iframe-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}


/* ── FOOTER ── */

footer {
    text-align: center;
    padding: 2rem;
    color: var(--muted);
    font-size: 0.82rem;
}