/**
 * Open Data Wizard — Frontend Styles (Download-Card)
 *
 * Aufbau: Name groß + „Metadaten JSON" rechts · Download-Button · bunte Badges
 * (Format/Größe/Lizenz) · Accordion mit allen Metadatenfeldern.
 *
 * Struktur erbt Theme-Farben (currentColor); die Badges und der Download-Button
 * verwenden bewusst eigene Akzentfarben, damit sie „bunt" hervorstechen.
 */

.odw-download-card {
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 8px;
    padding: 1.25rem 1.4rem;
    margin: 1.5rem 0;
}

/* --- Kopf: Titel groß + Metadaten-JSON-Link rechts --- */
.odw-download-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    margin-bottom: 1rem;
}

.odw-download-card__title {
    margin: 0;
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.25;
    flex: 1 1 auto;
}

.odw-download-card__metajson {
    flex-shrink: 0;
    font-size: 0.82em;
    text-decoration: none;
    opacity: 0.75;
    white-space: nowrap;
}

.odw-download-card__metajson:hover {
    opacity: 1;
    text-decoration: underline;
}

/* --- Download-Button (Akzent) --- */
.odw-download-card__download {
    display: inline-block;
    padding: 0.6em 1.4em;
    background: #2563eb;
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1em;
    text-decoration: none;
    line-height: 1.3;
    transition: background 0.15s ease;
}

.odw-download-card__download:hover,
.odw-download-card__download:focus {
    background: #1d4ed8;
    color: #fff;
}

/* --- Bunte Badges: Format · Größe · Lizenz --- */
.odw-download-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.9rem 0 0;
}

.odw-badge {
    display: inline-block;
    padding: 0.2em 0.7em;
    border-radius: 99px;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.5;
}

.odw-badge--format  { background: #e7f0fd; color: #17416b; }
.odw-badge--size    { background: #e6f4ea; color: #0f5323; }
.odw-badge--license { background: #fdf3e2; color: #7a4f00; }

/* --- Accordion mit allen Metadatenfeldern --- */
.odw-download-card__details {
    margin-top: 1.1rem;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    padding-top: 0.75rem;
}

.odw-download-card__details summary {
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    opacity: 0.85;
    list-style-position: inside;
}

.odw-download-card__details summary:hover {
    opacity: 1;
}

.odw-download-card__details[open] summary {
    margin-bottom: 0.75rem;
}

.odw-download-card__metalist {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.45rem 1.1rem;
    margin: 0;
    font-size: 0.9em;
}

.odw-metarow {
    display: contents;
}

.odw-download-card__metalist dt {
    font-weight: 600;
    opacity: 0.6;
}

.odw-download-card__metalist dd {
    margin: 0;
    word-break: break-word;
}

.odw-download-card__metalist a {
    word-break: break-all;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media screen and (max-width: 480px) {
    .odw-download-card__title {
        font-size: 1.35em;
    }

    .odw-download-card__download {
        display: block;
        text-align: center;
    }

    .odw-download-card__metalist {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .odw-metarow {
        display: block;
        margin-bottom: 0.5rem;
    }

    .odw-download-card__metalist dt {
        display: block;
    }
}

/* --- Weitere Distributionen --- */
.odw-download-card__dists {
    margin-top: 1.1rem;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    padding-top: 0.85rem;
}

.odw-download-card__dists-title {
    margin: 0 0 0.6rem;
    font-size: 0.9em;
    font-weight: 700;
    opacity: 0.8;
}

.odw-dist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.35rem 0;
}

.odw-dist__link {
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
}

.odw-dist__link:hover {
    text-decoration: underline;
}

.odw-dist__badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

@media screen and (max-width: 480px) {
    .odw-dist {
        flex-direction: column;
        align-items: flex-start;
    }
}