/* =====================================================

Agile AI University

Module      : Student & Executive Portal
Stylesheet  : Credential Preview Experience

File        : credential-preview.css
Version     : 1.0.0
Status      : ACTIVE

Governance  : Portal Governance v7.0

=====================================================

Purpose

Owns the Inline Credential Experience.

Responsibilities

• Preview Container
• Credential Hero
• Credential Information
• Recognition Assets
• Action Bar
• Selected Card Styling
• Preview Animations
• Responsive Preview Layout

Must Never Style

✘ Credential Portfolio Grid

✘ Portfolio Cards

✘ Loading State

✘ Empty State

✘ Error State

These remain governed by
credentials.css

Dependencies

my-credentials.html

credential-renderer.js

=====================================================

Architecture

Credential Portfolio
        │
        ▼
Inline Credential Experience

        │
        ├── Hero
        ├── Information
        ├── Recognition Assets
        └── Action Bar

=====================================================

Change History

v1.0.0

• Initial governed stylesheet
• Introduced Hero styling
• Introduced Metadata layout
• Introduced Recognition Asset cards
• Introduced Action Bar
• Responsive Preview Experience

===================================================== */

/* =====================================================
   DESIGN TOKENS

   Governs the visual language of the Inline
   Credential Experience.

   Future themes should override these variables
   instead of modifying component rules.

===================================================== */

:root {

    --preview-primary: #2563eb;

    --preview-surface: #ffffff;

    --preview-muted: #f8fafc;

    --preview-border: #e5e7eb;

    --preview-border-light: #e2e8f0;

    --preview-title: #111827;

    --preview-heading: #0f172a;

    --preview-shadow:
        0 10px 30px rgba(15,23,42,.06);

    --preview-shadow-hover:
        0 10px 20px rgba(0,0,0,.08);

    --preview-selected-shadow:
        0 0 0 3px rgba(37,99,235,.15),
        0 10px 24px rgba(15,23,42,.08);

}

/* =====================================================
   PREVIEW CONTAINER
===================================================== */

#credential-preview-container {

    margin-top: 40px;

    padding: 32px;

    background: var(--preview-surface);

    border: 1px solid var(--preview-border);

    border-radius: 18px;

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

    animation:
        credentialFadeIn
        0.35s ease;

}

/* =====================================================
   PREVIEW SECTION
===================================================== */

.credential-preview-section {

    margin-top: 32px;

}

.credential-preview-section:first-child {

    margin-top: 0;

}

.credential-preview-section h3 {

    margin-bottom: 20px;

    font-size: 22px;

    font-weight: 700;

    color: var(--preview-heading);

}

/* =====================================================
   HERO
===================================================== */

.credential-preview-header {

    display: flex;

    align-items: center;

    gap: 32px;

    padding-bottom: 28px;

    border-bottom: 1px solid var(--preview-border);

}

.credential-preview-title {

    flex: 1;

}

.credential-preview-title h2 {

    margin: 10px 0;

    font-size: 34px;

    font-weight: 700;

    color: var(--preview-title);

}

.credential-preview-title
.credential-portfolio-code {

    margin-bottom: 8px;

}

.credential-preview-title
.credential-portfolio-validity {

    margin-top: 12px;

}

/* =====================================================
   METADATA GRID
===================================================== */

#credential-information {

    margin-top: 32px;

}

#credential-information
.credential-preview-section {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px, 1fr)
        );

    gap: 20px;

}

#credential-information
.credential-helper {

    margin: 0;

    padding: 20px;

    background: var(--preview-muted);

    border: 1px solid var(--preview-border-light);

    border-radius: 12px;

}

#credential-information
strong {

    display: block;

    margin-bottom: 10px;

    color: var(--preview-heading);

}

/* =====================================================
   RECOGNITION ASSETS
===================================================== */

.recognition-assets-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );

    gap: 24px;

}

.recognition-asset-card {

    padding: 24px;

    border: 1px solid var(--preview-border);

    border-radius: 14px;

    background: var(--preview-surface);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.recognition-asset-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--preview-shadow-hover);

}

.recognition-asset-card h4 {

    margin-bottom: 12px;

    font-size: 18px;

}

/* =====================================================
   ACTION BAR
===================================================== */

#credential-actions {

    margin-top: 40px;

    padding-top: 28px;

    border-top: 1px solid var(--preview-border);

}

#credential-actions
.credential-actions {

    margin-top: 24px;

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

}

/* =====================================================
   ANIMATION
===================================================== */

@keyframes credentialFadeIn {

    from {

        opacity: 0;

        transform:
            translateY(8px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

/* =====================================================
   SELECTED CARD

   Highlights the currently selected credential
   within the portfolio experience.

   Applied by credential-renderer.js when the
   learner selects a credential for inline
   preview.

===================================================== */

.credential-card.selected {

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

    transform:
        translateY(-2px);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

    box-shadow:
        var(--preview-selected-shadow);

}

/* =====================================================
   RECOGNITION ASSETS
===================================================== */

#recognition-assets {

    margin-top: 36px;

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 768px) {

    #credential-preview-container {

        padding: 24px;

    }

    .credential-preview-header {

        flex-direction:column;

        text-align:center;

    }

    .credential-preview-title h2 {

        font-size: 28px;

    }

    .recognition-assets-grid {

        grid-template-columns:1fr;

    }

}