/**
 * EIASM Graduate Stories — Widget Styles
 *
 * Design Language Spec §6.2 (Narrative Cards), §9 (Graduate Stories)
 *
 * Narrative card traits:
 *   - stronger title/quote hierarchy
 *   - portrait-capable
 *   - controlled media area
 *   - restrained supporting metadata
 *
 * Uses the same token family as Faculty Roster.
 */

.eiasm-graduate-stories {
    --eiasm-ink: #0B1220;
    --eiasm-teal: #1587A8;
    --eiasm-teal-light: #e8f4f8;
    --eiasm-lime: #A8C834;
    --eiasm-surface: #ffffff;
    --eiasm-border: #e4e7ec;
    --eiasm-muted: #667085;
    --eiasm-muted-light: #98a2b3;
    --eiasm-bg: #f9fafb;
    --eiasm-radius: 12px;
    --eiasm-radius-sm: 8px;
    --eiasm-shadow: 0 1px 3px rgba(11, 18, 32, 0.06), 0 1px 2px rgba(11, 18, 32, 0.04);
    --eiasm-font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --eiasm-font-body: 'Inter', system-ui, -apple-system, sans-serif;

    font-family: var(--eiasm-font-body);
    color: var(--eiasm-ink);
    line-height: 1.5;
}

/* ─── Grid ────────────────────────────────────────────────────────── */

.eiasm-gs-grid {
    display: grid;
    gap: 24px;
    align-items: stretch; /* Equal-height cards */
}

.eiasm-gs-cols-1 { grid-template-columns: 1fr; }
.eiasm-gs-cols-2 { grid-template-columns: repeat(2, 1fr); }
.eiasm-gs-cols-3 { grid-template-columns: repeat(3, 1fr); }
.eiasm-gs-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ─── Standard Card ───────────────────────────────────────────────── */

.eiasm-gs-card {
    background: var(--eiasm-surface);
    border: 1px solid var(--eiasm-border);
    border-radius: var(--eiasm-radius);
    overflow: hidden;
    box-shadow: var(--eiasm-shadow);
    display: flex;
    flex-direction: column;
}

.eiasm-gs-card--standard {
    /* Portrait-top layout by default */
}

/* ─── Portrait (Standard) ─────────────────────────────────────────── */

.eiasm-gs-card--standard .eiasm-gs-card__portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--eiasm-bg);
    flex-shrink: 0;
}

.eiasm-gs-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eiasm-gs-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eiasm-muted-light);
    background: var(--eiasm-bg);
    min-height: 140px;
}

/* ─── Image-Left Layout ───────────────────────────────────────────── */

.eiasm-gs--img-left .eiasm-gs-card--standard {
    flex-direction: row;
}

.eiasm-gs--img-left .eiasm-gs-card--standard .eiasm-gs-card__portrait {
    width: 200px;
    aspect-ratio: auto;
    min-height: 100%;
}

.eiasm-gs--img-left .eiasm-gs-card--standard .eiasm-gs-card__body {
    flex: 1;
    min-width: 0;
}

/* ─── Card Body ───────────────────────────────────────────────────── */

.eiasm-gs-card__body {
    padding: 20px 20px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ─── Badge ───────────────────────────────────────────────────────── */

.eiasm-gs-card__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--eiasm-teal);
    background: var(--eiasm-teal-light);
    padding: 3px 8px;
    border-radius: 4px;
    align-self: flex-start;
    margin-bottom: 10px;
}

/* ─── Headline ────────────────────────────────────────────────────── */

.eiasm-gs-card__headline {
    font-family: var(--eiasm-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--eiasm-ink);
    margin: 0 0 10px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Quote / Testimonial ─────────────────────────────────────────── */

.eiasm-gs-card__quote {
    margin: 0 0 16px;
    padding: 0;
    border: none;
    flex: 1;
}

.eiasm-gs-card__quote p {
    font-size: 14px;
    color: #344054;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: italic;
}

/* Compact variant: tighter clamp */
.eiasm-gs-card__quote--compact p {
    -webkit-line-clamp: 3;
    font-size: 13px;
    line-height: 1.5;
}

/* ─── Attribution ─────────────────────────────────────────────────── */

.eiasm-gs-card__attribution {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--eiasm-border);
}

.eiasm-gs-card__attrib-text {
    min-width: 0;
}

.eiasm-gs-card__name {
    font-family: var(--eiasm-font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--eiasm-ink);
    margin: 0;
    line-height: 1.3;
}

.eiasm-gs-card__role {
    font-size: 13px;
    color: var(--eiasm-muted);
    margin: 2px 0 0;
    line-height: 1.35;
}

.eiasm-gs-card__meta {
    font-size: 12px;
    color: var(--eiasm-muted-light);
    margin: 2px 0 0;
    line-height: 1.3;
}

/* ─── Company Logo (Secondary) ────────────────────────────────────── */

.eiasm-gs-card__logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid var(--eiasm-border);
    background: var(--eiasm-surface);
    flex-shrink: 0;
}

/* ─── Compact Card ────────────────────────────────────────────────── */

.eiasm-gs-card--compact {
    /* No portrait area at top — avatar in attribution */
}

.eiasm-gs-card--compact .eiasm-gs-card__body {
    padding: 16px 18px 18px;
}

.eiasm-gs-card--compact .eiasm-gs-card__badge {
    margin-bottom: 8px;
}

.eiasm-gs-card--compact .eiasm-gs-card__headline {
    font-size: 14px;
    margin-bottom: 8px;
}

.eiasm-gs-card--compact .eiasm-gs-card__attribution {
    padding-top: 12px;
}

.eiasm-gs-card--compact .eiasm-gs-card__name {
    font-size: 13px;
}

.eiasm-gs-card--compact .eiasm-gs-card__role {
    font-size: 12px;
}

/* ─── Compact Avatar ──────────────────────────────────────────────── */

.eiasm-gs-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--eiasm-bg);
}

.eiasm-gs-card__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* ─── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .eiasm-gs-grid {
        gap: 20px;
    }

    .eiasm-gs-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Collapse image-left to image-top on tablet */
    .eiasm-gs--img-left .eiasm-gs-card--standard {
        flex-direction: column;
    }

    .eiasm-gs--img-left .eiasm-gs-card--standard .eiasm-gs-card__portrait {
        width: 100%;
        aspect-ratio: 4 / 5;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .eiasm-gs-grid {
        gap: 16px;
    }

    .eiasm-gs-cols-3,
    .eiasm-gs-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .eiasm-gs-card__body {
        padding: 16px 16px 18px;
    }
}

@media (max-width: 480px) {
    .eiasm-gs-cols-2,
    .eiasm-gs-cols-3,
    .eiasm-gs-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ─── Pagination / Load More ──────────────────────────────────────── */

.eiasm-gs-pagination {
    margin-top: 36px;
    text-align: center;
}

.eiasm-gs-load-more {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.42857 !important;
    padding: 10px 28px !important;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease;

    color: #FFFFFF !important;
    background: #1587A8 !important;
    border: 1px solid #1587A8 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.eiasm-gs-load-more:hover {
    color: #FFFFFF !important;
    background: #0F6E89 !important;
    border-color: #0F6E89 !important;
    box-shadow: none !important;
}

.eiasm-gs-load-more:active {
    color: #FFFFFF !important;
    background: #0F6E89 !important;
    border-color: #0F6E89 !important;
    box-shadow: none !important;
}

.eiasm-gs-load-more:focus-visible {
    outline: 2px solid #1587A8 !important;
    outline-offset: 2px !important;
}

.eiasm-gs-load-more:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* ─── Reduced Motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .eiasm-graduate-stories,
    .eiasm-graduate-stories *,
    .eiasm-graduate-stories *::before,
    .eiasm-graduate-stories *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}