/* ─────────────────────────────────────────────────────────────────────────────
   credential-detail.css
   Shared stylesheet for all credential and training detail pages.
   Used at depth 4 from root:
     /pages/credentials/certifications/[slug]/index.html
     /pages/credentials/training/[slug]/index.html
   And depth 5 for child courses:
     /pages/credentials/certifications/google-cybersecurity-professional-certificate/[slug]/index.html
     /pages/credentials/training/cisco-junior-cybersecurity-analyst/[slug]/index.html
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Page Canvas ─────────────────────────────────────────────────────────── */
.cred-detail-main {
    width: 100%;
    min-height: calc(100vh - 12rem);
    background-color: var(--surface-depth-teal);
    background-image:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-border) 45%, transparent) 1px, transparent 0);
    background-size: 24px 24px;
    padding-top: clamp(1.5rem, 3vh, 2.5rem);
    padding-bottom: 6rem;
}

.cred-detail-shell {
    width: min(100% - (2 * var(--page-padding, 1.25rem)), 52rem);
    margin-inline: auto;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.cred-breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1rem;
}

.cred-breadcrumb a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.cred-breadcrumb a:hover {
    color: var(--color-text);
}

.cred-breadcrumb__sep {
    color: var(--muted);
    opacity: 0.5;
    user-select: none;
}

.cred-breadcrumb__current {
    color: var(--color-text);
}

/* ── Page Header ─────────────────────────────────────────────────────────── */
.cred-detail-header {
    margin-bottom: clamp(2.5rem, 5vh, 4rem);
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.cred-detail-header__top {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.cred-detail-issuer-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: color-mix(in srgb, var(--color-bg-secondary) 80%, transparent);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--color-accent);
}

.cred-detail-header__identity {
    flex: 1;
    min-width: 0;
}

.cred-detail-provider {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin: 0 0 0.5rem 0;
}

.cred-detail-title {
    font-family: var(--font-sans);
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
    margin: 0 0 1rem 0;
    letter-spacing: -0.015em;
}

.cred-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Type badge */
.cred-badge--type {
    color: var(--muted);
    background: color-mix(in srgb, var(--color-bg-secondary) 70%, transparent);
    border-color: var(--border);
    font-weight: 500;
}

[data-theme="light"] .cred-badge--type {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-bg-secondary) 50%, transparent);
    border-color: var(--border);
}

/* Parent program badge */
.cred-badge--parent {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent-deep) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

[data-theme="light"] .cred-badge--parent {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    border-color: var(--color-accent);
}

/* Domain tags */
.cred-detail-domains {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.cred-detail-domain-tag {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--muted);
    background: color-mix(in srgb, var(--color-bg-secondary) 80%, transparent);
    border: 1px solid var(--border);
    border-radius: 2px;
}

[data-theme="light"] .cred-detail-domain-tag {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-bg-secondary) 60%, transparent);
}

/* ── Metadata Strip ──────────────────────────────────────────────────────── */
.cred-detail-meta-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1rem;
    padding: 1.25rem;
    background: color-mix(in srgb, var(--color-bg-secondary) 50%, transparent);
    border: 1px solid var(--border);
    border-radius: 2px;
    margin-top: 1.5rem;
}

.cred-detail-meta-item dt {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.cred-detail-meta-item dd {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Credential Actions ───────────────────────────────────────────────────── */
.cred-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

/* ── Content Sections ────────────────────────────────────────────────────── */
.cred-detail-section {
    margin-bottom: clamp(2rem, 4vh, 3rem);
}

.cred-detail-section-heading {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin: 0 0 1rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

/* About / Description */
.cred-detail-about {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text);
    margin: 0;
}

/* Notice box (unverified info) */
.cred-detail-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--muted);
    background: color-mix(in srgb, var(--color-bg-secondary) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 2px;
}

[data-theme="light"] .cred-detail-notice {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-bg-secondary) 50%, transparent);
}

/* ── Provenance Box ──────────────────────────────────────────────────────── */
.cred-detail-provenance {
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--color-bg-secondary) 40%, transparent);
    border-left: 3px solid var(--color-accent);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.cred-detail-prov-line {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text);
    margin: 0 0 0.4rem 0;
    line-height: 1.5;
}

.cred-detail-prov-line:last-child {
    margin-bottom: 0;
}

.cred-detail-prov-line strong {
    color: var(--muted);
    font-weight: 500;
}

/* ── Coverage / Curriculum List ──────────────────────────────────────────── */
.cred-detail-coverage-list {
    display: grid;
    gap: 0.85rem;
}

.cred-detail-coverage-group {
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--color-bg-secondary) 40%, transparent);
    border: 1px solid var(--border);
    border-radius: 2px;
}

.cred-detail-coverage-domain {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
}

.cred-detail-coverage-topics {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--muted);
}

[data-theme="light"] .cred-detail-coverage-topics {
    color: var(--color-text-muted, var(--muted));
}

.cred-detail-coverage-topics li {
    margin-bottom: 0.3rem;
}

.cred-detail-coverage-topics li:last-child {
    margin-bottom: 0;
}

/* ── Included Courses / Component Programs ───────────────────────────────── */
.cred-detail-course-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.cred-detail-course-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--color-bg-secondary) 40%, transparent);
    border: 1px solid var(--border);
    border-radius: 2px;
    transition: border-color 0.15s ease;
}

.cred-detail-course-item:hover {
    border-color: var(--color-accent);
}

.cred-detail-course-num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-accent);
    min-width: 1.5rem;
    flex-shrink: 0;
}

.cred-detail-course-name {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
}

.cred-detail-course-link {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--color-accent);
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.cred-detail-course-link:hover {
    color: var(--color-accent-bright);
}

/* ── Related Sections ────────────────────────────────────────────────────── */
.cred-detail-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.25rem;
}

.cred-detail-related-column {
    padding: 1rem;
    background: color-mix(in srgb, var(--color-bg-secondary) 35%, transparent);
    border: 1px solid var(--border);
    border-radius: 2px;
}

.cred-detail-related-title {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin: 0 0 0.85rem 0;
}

.cred-detail-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cred-detail-related-list li {
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.cred-detail-related-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.cred-detail-related-link {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.cred-detail-related-link:hover {
    color: var(--color-accent-bright);
}

[data-theme="light"] .cred-detail-related-link:hover {
    color: var(--color-accent);
}

.cred-detail-related-desc {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted);
    margin: 0.25rem 0 0 0;
}

[data-theme="light"] .cred-detail-related-desc {
    color: var(--color-text-muted, var(--muted));
}

/* ── Project Status Banner ───────────────────────────────────────────────── */
.cred-detail-project-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    background: color-mix(in srgb, var(--color-bg-secondary) 50%, transparent);
    border: 1px dashed var(--border);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--muted);
}

.cred-detail-project-status__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--muted);
    flex-shrink: 0;
}

/* ── Previous / Next Navigation ─────────────────────────────────────────── */
.cred-detail-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: clamp(3rem, 6vh, 5rem);
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.cred-detail-prev,
.cred-detail-next {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.85rem 1rem;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 2px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cred-detail-prev:hover,
.cred-detail-next:hover {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent-deep) 8%, transparent);
}

.cred-detail-next {
    text-align: right;
}

.cred-detail-prevnext__label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cred-detail-prevnext__name {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

[data-theme="light"] .cred-detail-prevnext__name {
    color: var(--color-text);
}

@media (max-width: 540px) {
    .cred-detail-prevnext {
        grid-template-columns: 1fr;
    }

    .cred-detail-next {
        text-align: left;
    }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cred-detail-header__top {
        flex-direction: column;
        gap: 1rem;
    }

    .cred-detail-related-grid {
        grid-template-columns: 1fr;
    }

    .cred-detail-meta-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .cred-detail-meta-strip {
        grid-template-columns: 1fr;
    }

    .cred-detail-actions {
        flex-direction: column;
    }

    .cred-detail-actions .cred-btn {
        width: 100%;
        justify-content: center;
    }
}