/* Projekt: Ninabella | https://nina3c.dk/
 * Brugsvilkår: LICENSE.md / /brugsvilkaar/ | Kilder: SOURCES.md
 * Projekt-credit angiver ikke verificeret ophav til alle bidrag.
 */
/*
 * Ninabella | https://nina3c.dk/
 * Side / effekt / komponent: workshops
 * Fil: css/workshops.css
 * Version registreret: 2026-10-04T19:00:49+02:00 (Europe/Copenhagen)
 * Filens oprettelsesdato: 2026-10-03T21:58:54+02:00
 * Observeret seneste filændring før registrering: 2026-10-03T21:58:54+02:00
 * Fildatoer kan ændres ved kopiering og dokumenterer ikke første udviklingsdato.
 * Registreringen daterer denne version; oprindelig udviklingsdato er ikke verificeret.
 */
/* Layout shared only by the migrated creative workshops. */
.ninabella-workshop-page {
    min-height: calc(100svh - var(--site-header-height));
    padding: clamp(28px, 5vw, 64px) max(18px, env(safe-area-inset-right)) clamp(40px, 6vw, 72px) max(18px, env(safe-area-inset-left));
    background: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--workshop-accent, #b968ff) 14%, transparent), transparent 31rem), #080b16;
}

.ninabella-workshop-layout {
    width: min(1050px, 100%);
    margin: 0 auto;
}

.ninabella-workshop-link {
    display: inline-flex;
    margin: 0 0 18px;
    padding: 9px 12px;
    border: 1px solid var(--workshop-accent, #b968ff);
    border-radius: 10px;
    color: var(--workshop-accent, #b968ff);
    font-weight: 800;
    text-decoration: none;
}

.ninabella-workshop-link:hover,
.ninabella-workshop-link:focus-visible {
    border-color: #ffe66d;
    color: #fff;
    background: rgb(255 230 109 / 12%);
    outline: none;
}

.ninabella-workshop-panel {
    overflow: hidden;
    padding: clamp(25px, 5vw, 52px);
    border: 2px solid var(--workshop-accent, #b968ff);
    border-radius: 28px;
    color: #f6f7ff;
    background: rgb(17 21 38 / 95%);
    box-shadow: 0 0 40px color-mix(in srgb, var(--workshop-accent, #b968ff) 17%, transparent);
}

@media (max-width: 680px) {
    .ninabella-workshop-panel { border-radius: 20px; }
}

.about-panel {
    display: grid;
    gap: 22px;
}

.about-kicker {
    margin: 0;
    color: #25d7ff;
    font: 800 12px "Courier New", monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.about-panel h1 {
    max-width: 13ch;
    margin: 0;
    color: #fff;
    font-size: clamp(2.6rem, 7vw, 5.8rem);
    line-height: .95;
}

.about-lead {
    max-width: 62ch;
    margin: 0;
    color: #dfe7ff;
    font-size: clamp(1.08rem, 2vw, 1.35rem);
    line-height: 1.6;
}

.document-version {
    margin: -8px 0 22px;
    color: #b968ff;
    font: 850 .95rem/1.4 "Ninabella Navigation", Arial, sans-serif;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.about-grid article {
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(185, 104, 255, .35);
    border-radius: 16px;
    background: #0b1020;
}

.about-grid h2 {
    margin: 0 0 10px;
    color: #ff63da;
    font-size: 1.12rem;
}

.about-grid p {
    margin: 0;
    color: #cbd4ed;
    line-height: 1.62;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.about-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid #25d7ff;
    border-radius: 12px;
    color: #25d7ff;
    font-weight: 850;
    text-decoration: none;
}

.about-actions a:hover,
.about-actions a:focus-visible {
    border-color: #ff63da;
    color: #fff;
    background: rgb(255 99 218 / 12%);
    outline: none;
}

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

.solfeggio-panel {
    display: grid;
    gap: 22px;
}

.solfeggio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.solfeggio-grid button {
    min-height: 118px;
    padding: 18px;
    border: 1px solid rgba(37, 215, 255, .34);
    border-radius: 16px;
    background: radial-gradient(circle at 82% 18%, rgb(255 99 218 / 14%), transparent 38%), #0b1020;
    color: #f6f7ff;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 1px rgb(255 255 255 / 8%);
}

.solfeggio-grid button strong,
.solfeggio-grid button span {
    display: block;
}

.solfeggio-grid button strong {
    color: #25d7ff;
    font: 900 1.55rem/1 Poppins, Arial, sans-serif;
}

.solfeggio-grid button span {
    margin-top: 10px;
    color: #cbd4ed;
    line-height: 1.35;
}

.solfeggio-grid button:hover,
.solfeggio-grid button:focus-visible {
    border-color: #ff63da;
    box-shadow: 0 0 28px rgb(255 99 218 / 18%), inset 0 1px rgb(255 255 255 / 10%);
    outline: none;
}

.solfeggio-status {
    min-height: 28px;
    color: #b968ff;
    font-weight: 850;
}

.tone-composer {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 99, 218, .35);
    border-radius: 18px;
    background: linear-gradient(135deg, rgb(255 99 218 / 10%), rgb(37 215 255 / 8%)), #0b1020;
}

.tone-composer h2 {
    margin: 0 0 8px;
    color: #ff63da;
}

.tone-composer p {
    margin: 0;
    color: #cbd4ed;
    line-height: 1.55;
}

.tone-sequence {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 52px;
    align-items: center;
    padding: 10px;
    border: 1px dashed rgba(185, 104, 255, .45);
    border-radius: 14px;
    background: rgb(8 11 22 / 76%);
}

.tone-sequence.is-empty::before {
    content: attr(data-empty);
    color: #8f98b3;
    font-weight: 800;
}

.tone-sequence button {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(37, 215, 255, .45);
    border-radius: 10px;
    background: rgb(37 215 255 / 12%);
    color: #f6f7ff;
    font-weight: 850;
    cursor: pointer;
}

.tone-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tone-actions button {
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid #25d7ff;
    border-radius: 12px;
    background: #10172b;
    color: #f6f7ff;
    font-weight: 900;
    cursor: pointer;
}

.tone-actions button:hover,
.tone-actions button:focus-visible,
.tone-sequence button:hover,
.tone-sequence button:focus-visible {
    border-color: #ff63da;
    outline: none;
}

.solfeggio-note {
    margin: 0;
    color: #9ea8c3;
    font-size: .95rem;
    line-height: 1.55;
}

/* Fælles indhold i værkstedsskabelonen. */
.ninabella-workshop-kicker { color: var(--workshop-accent, #25d7ff); font-weight: 800; letter-spacing: .12em; }
.ninabella-workshop-panel h1 { margin: 12px 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; }
.workshop-highlight { color: #ff63da; }
.ninabella-workshop-intro { max-width: 62ch; color: #c7cee8; line-height: 1.6; }
.workshop-credit, .workshop-activity { margin: 24px 0; padding: 20px; border: 1px solid #b968ff; border-radius: 16px; }
.workshop-credit p { line-height: 1.5; }
.workshop-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.workshop-steps li { padding: 16px; border: 1px solid #35415a; border-radius: 14px; background: #0b1020; }
.workshop-steps strong { color: #ffe66d; }
.workshop-steps p { margin-bottom: 0; line-height: 1.5; }
@media (max-width: 680px) { .workshop-steps { grid-template-columns: 1fr; } }

/* Ens hovedoverskrifter i alle kreative værksteder. */
body .ninabella-workshop-panel h1, body .workshop-main .copy h1 { font-family: 'Arial Rounded MT Bold', 'Ninabella Navigation', ui-rounded, sans-serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.05; letter-spacing: normal; margin: 12px 0; }