/*
=====================================================
 EF22 FRAMEWORK
 DOWNLOADS.CSS
=====================================================

 Mitglieder-Downloads (sites/downloads.php):
 Anmeldeformular, Status, Karten mit Vorschau und
 Download-Links.
*/


/* ==========================================
   MELDUNGEN
========================================== */

.member-message {

    max-width: 520px;

    margin:
        var(--space-lg)
        0
        0;

    padding:
        var(--space-sm)
        var(--space-md);

    border-left:
        4px solid
        var(--color-primary);

    background: var(--color-primary-soft);

    color: var(--color-text-on-light);

}

.member-message--error {

    border-left-color: var(--color-error);

    background: var(--color-error-soft);

}


/* ==========================================
   FORMULAR (ANMELDEN, PASSWORT)
========================================== */

.member-form {

    display: flex;

    flex-direction: column;

    gap: var(--space-md);

    max-width: 520px;

    margin-top: var(--space-xl);

}

.member-form h2 {

    margin: 0;

    font-size: var(--font-size-lg);

}

.member-form p {

    margin: 0;

    color: var(--color-text-muted-on-light);

}

.member-form .button {

    align-self: flex-start;

}

.member-field {

    display: flex;

    flex-direction: column;

    gap: var(--space-xs);

    font-weight: 600;

}

.member-field input {

    min-height: 48px;

    padding:
        0
        var(--space-md);

    border:
        2px solid
        var(--color-input-border);

    border-radius: var(--radius-md);

    background: var(--color-white);

    color: var(--color-text-on-light);

    font: inherit;

    font-size: var(--font-size-md);   /* 16 px: kein Zoomen auf dem iPhone */

}

.member-field input:focus {

    outline: none;

    border-color: var(--color-primary);

}

.member-next {

    padding:
        var(--space-sm)
        var(--space-md);

    border-radius: var(--radius-sm);

    background: var(--color-primary-soft);

}


/* ==========================================
   STATUS (ANGEMELDET)
========================================== */

.member-status {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--space-md);

    margin-top: var(--space-lg);

    color: var(--color-text-muted-on-light);

}

.member-status .fa-lock-open {

    color: var(--color-primary-on-light);

}


/* ==========================================
   PASSWORT ÄNDERN (AUFKLAPPBAR)
========================================== */

.member-details summary {

    cursor: pointer;

    font-weight: 700;

    color: var(--color-text-on-light);

}

.member-details[open] summary {

    margin-bottom: var(--space-sm);

}


/* ==========================================
   KARTEN
========================================== */

.download-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-lg);

}

.download-card {

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        var(--color-primary-border);

    border-radius: var(--radius-lg);

    background: var(--color-background-dark);

    color: var(--color-text-on-dark);

    box-shadow: var(--shadow-md);

}

.download-card--draft {

    border-style: dashed;

}


/* ==========================================
   VORSCHAU
   Schachbrett zeigt, wo das Logo transparent ist
========================================== */

.download-preview {

    display: flex;

    justify-content: center;

    align-items: center;

    aspect-ratio: 4 / 3;

    padding: var(--space-lg);

    background-color: var(--color-preview-dark);

    background-image:
        conic-gradient(
            var(--color-preview-light) 25%,
            transparent 0 50%,
            var(--color-preview-light) 0 75%,
            transparent 0
        );

    background-size: 24px 24px;

}

.download-preview img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}


/* ==========================================
   INHALT
========================================== */

.download-body {

    display: flex;

    flex-direction: column;

    gap: var(--space-sm);

    padding: var(--space-lg);

}

.download-body h2 {

    margin: 0;

    color: var(--color-primary);

    font-size: var(--font-size-lg);

}

.download-variant {

    margin: 0;

    font-weight: 600;

}

.download-note {

    margin: 0;

    color: var(--color-text-muted-on-dark);

    font-size: var(--font-size-sm);

}

.download-badge {

    align-self: flex-start;

    padding:
        var(--space-xs)
        var(--space-sm);

    border:
        1px dashed
        var(--color-primary);

    border-radius: var(--radius-sm);

    color: var(--color-primary);

    font-size: var(--font-size-xs);

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

}


/* ==========================================
   DOWNLOAD-LINKS
========================================== */

.download-group {

    margin-top: var(--space-sm);

}

.download-group h3 {

    margin:
        0
        0
        var(--space-xs);

    color: var(--color-text-muted-on-dark);

    font-size: var(--font-size-xs);

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

}

.download-links {

    display: flex;

    flex-direction: column;

    gap: var(--space-xs);

    margin: 0;

    padding: 0;

    list-style: none;

}

.download-link {

    display: flex;

    align-items: center;

    gap: var(--space-sm);

    min-height: 44px;

    padding:
        0
        var(--space-md);

    border:
        1px solid
        var(--color-border-strong);

    border-radius: var(--radius-md);

    color: var(--color-text-on-dark);

    text-decoration: none;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);

}

.download-link i {

    color: var(--color-primary);

}

.download-link strong {

    min-width: 2.6em;

}

.download-link span {

    color: var(--color-text-muted-on-dark);

    font-size: var(--font-size-sm);

}

.download-link:hover,
.download-link:focus-visible {

    border-color: var(--color-primary);

    background: var(--color-primary-soft-dark);

    outline: none;

}


/* ==========================================
   AB TABLET
========================================== */

@media (min-width: 700px) {

    .download-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}