/* ─── Content Grid ───────────────────────────────────────────────────────────── */
/* Extends .page-grid (global.css). Layout columns come from .page-grid-2col.   */
.content-grid { margin-top: 40px; }

/* Manuals card spans full width */
.content-card.card-manuals { grid-column: 1 / -1; }

/* ─── Content Card ───────────────────────────────────────────────────────────── */
/* Extends .card (global.css) with content-page-specific layout.                */
.content-card {
    border-radius: 14px;
    padding: 28px 24px;
}

/* ─── Card Desc — content override ─────────────────────────────────────────── */
.content-card .card-desc {
    line-height: 1.55;
    margin-bottom: 4px;
}

/* ─── Content Card Downloads Overrides ─────────────────────────────────────── */
.content-card .card-downloads {
    margin-top: 0;
    padding-top: 4px;
}

.content-card .card-downloads .section-label {
    border-top: none;
    padding-top: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}

.content-card .card-downloads .content-title-entry {
    border-top: none;
    padding-top: 0;
}

/* ─── Red Content Cards ─────────────────────────────────────────────────────── */
/* card-red sets the live-* vars so all enabled buttons inside pick up red.    */
.content-card.card-red {
    --live-rgb:   211, 47, 47;
    --live-solid: #D32F2F;
    --live-text:  #ef5350;
    border-color: var(--live-solid);
    background: linear-gradient(160deg, rgba(var(--live-rgb), 0.07) 0%, var(--surface) 55%);
}
.card-red .content-card-icon { background: rgba(var(--live-rgb), 0.12); border: 1px solid rgba(var(--live-rgb), 0.3); }
.card-red .content-type-label { color: var(--live-text); }

/* ─── Blue Content Cards ─────────────────────────────────────────────────────── */
.content-card.card-blue {
    --live-rgb:   37, 99, 235;
    --live-solid: #2563eb;
    --live-text:  #6090f8;
    border-color: var(--live-solid);
    background: linear-gradient(160deg, rgba(var(--live-rgb), 0.07) 0%, var(--surface) 55%);
}
.card-blue .content-card-icon { background: rgba(var(--live-rgb), 0.12); border: 1px solid rgba(var(--live-rgb), 0.3); }
.card-blue .content-type-label { color: var(--live-text); }

/* ─── Manuals Card ───────────────────────────────────────────────────────────── */
/* Neutral/white card theme. Buttons inside pick up their entry-* brand colors */
/* (entry-direct / entry-broadcast / entry-stage) via the global live-* vars.  */
.content-card.card-manuals {
    border-color: rgba(255,255,255,0.5);
    background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, var(--surface) 55%);
}
.card-manuals .content-card-icon { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2); }
.card-manuals .content-type-label { color: rgba(255,255,255,0.7); }

/* Manuals uses a 3-column grid internally */
.card-manuals .card-downloads {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}

.card-manuals .card-downloads .section-label {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.card-manuals .card-downloads .content-title-entry { margin-top: 0; }

/* ─── Content Card Icon ─────────────────────────────────────────────────────── */
.content-card-icon {
    font-size: 3rem;
    line-height: 1;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    margin: 0 auto 18px;
}

/* ─── Content Placeholder ───────────────────────────────────────────────────── */
.content-placeholder {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    margin: 0;
}

/* ─── Content Title Entries ─────────────────────────────────────────────────── */
.content-title-entry {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.content-title-entry + .content-title-entry { margin-top: 14px; }

/* ─── Platform Download Buttons (within a content entry) ────────────────────── */
/* For entries with multiple platform/format variants (e.g. macOS + Windows,    */
/* MP3 + FLAC). Renders as a wrapping row of compact buttons inside the entry   */
/* box. Up to ~3 wrap gracefully; beyond that, consider a different pattern.    */
.platform-downloads {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.platform-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.platform-btn:hover { text-decoration: none; }

.platform-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.platform-btn .os-icon {
    font-size: 1rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.platform-btn .platform-name {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    white-space: normal;
}

.platform-install-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 4px;
    opacity: 0.75;
}

.platform-btn .platform-meta {
    display: block;
    font-weight: 400;
    color: var(--text-muted);
}

.platform-btn .dl-cta {
    width: auto;
    flex-shrink: 0;
}

/* Platform button — enabled state uses the card's --live-* vars (red or blue). */
.platform-btn:not(.disabled)         { border-color: rgba(var(--live-rgb), 0.4); background: rgba(var(--live-rgb), 0.07); }
.platform-btn:not(.disabled):hover   { border-color: var(--live-solid);          background: rgba(var(--live-rgb), 0.14); }
.platform-btn:not(.disabled) .dl-cta { background: rgba(var(--live-rgb), 0.15); color: var(--live-text); border: 1px solid rgba(var(--live-rgb), 0.45); }

/* ─── Content Credits Link ──────────────────────────────────────────────────── */
.content-credits-link {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: underline;
    opacity: 0.7;
}
.content-credits-link:hover { opacity: 1; }

/* ─── Content Type Label ────────────────────────────────────────────────────── */
.content-type-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #60a5fa;
    margin-bottom: 2px;
}


/* ─── Responsive Overrides ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .content-card.card-manuals    { grid-column: 1; }
    .card-manuals .card-downloads { grid-template-columns: 1fr; }
}