/* ============================================================
   Harper College – Graduation Shoutout Wall
   Embedded include — full width, responsive, WCAG 2.1 AA
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.shoutout-wrap {
    width: 100%;
}

:focus-visible {
    outline: 3px solid #f5a623;
    outline-offset: 2px;
}

.tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 1em;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background: #1e3f7a;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    min-height: 44px;
    transition: background 0.15s;
}

.tab-btn i {
    font-size: 1em;
    flex-shrink: 0;
}

.tab-btn:hover {
    background: #2a5298;
}

.tab-btn.active,
.tab-btn[aria-selected="true"] {
    background: #2a5298;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e3f7a;
}

/* ══════════════════════════════════════════════════════════════
   PANELS
   ══════════════════════════════════════════════════════════════ */
.panel { width: 100%; }
.panel[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════
   CARD
   ══════════════════════════════════════════════════════════════ */
.grad-card {
    position: relative;
    background: #ffffff;
    border: 3px solid rgba(0, 51, 102, 0.5);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 36px;   /* room for the hanging closing quote */
    width: 100%;
    overflow: visible;
}

/* Opening quote — top-left, sits over the border */
.quote-open {
    position: absolute;
    top: -20px;
    left: 14px;
    font-size: 2.2rem;
    line-height: 1;
    color: #b9d423;
    background: #ffffff;
    padding: 0 4px;
    pointer-events: none;
}

/* Closing quote — bottom-right, hangs below border */
.quote-close {
    position: absolute;
    bottom: -24px;
    right: 14px;
    font-size: 2.2rem;
    line-height: 1;
    color: #b9d423;
    background: #ffffff;
    padding: 0 4px;
    pointer-events: none;
}

/* ── Card interior: big photo left, content right ──────────── */
.card-inner {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Photo — large, fixed column, fills the left side */
.card-photo-wrap {
    flex: 0 0 240px;
    line-height: 0;
}

.card-photo {
    width: 240px;
    height: 240px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* Content column — name, quote, button */
.card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.card-name {
    font-size: 1.1em;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
    overflow-wrap: break-word;
}

.card-quote {
    font-size: 1em;
    color: #444444;
    line-height: 1.6;
    margin-bottom: 16px;
    overflow-wrap: break-word;
    flex: 1;
}

.card-role,
.card-extra {
    font-size: 0.95em;
    color: #606875;
    font-style: italic;
    margin-bottom: 10px;
}

/* ── Profile button — centred under the text ───────────────── */
.card-btn-wrap {
    display: flex;
    justify-content: center;
}

.card-btn {
    display: inline-block;
    padding: 9px 24px 7px;      /* asymmetric: 2px extra top, 2px less bottom = space for border */
    font-size: 1em;
    font-weight: 700;
    font-family: inherit;
    color: #ffffff;
    background: #0d4a8a;
    border-radius: 4px;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    min-height: 38px;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    transition: background 0.12s, border-color 0.12s;
}

.card-btn:hover {
    background: #083970;
    color: #ffffff;
    border-bottom-color: #ffffff;
    text-decoration: none;
}

.card-btn:focus-visible {
    outline: 3px solid #f5a623;
    outline-offset: 2px;
}

/* ── No results ─────────────────────────────────────────────── */
.no-results {
    text-align: center;
    padding: 40px 20px;
    color: #606875;
    font-size: 1em;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {
    .tab-btn {
        font-size: 0.9em;
        padding: 8px 12px;
        gap: 5px;
    }

    /* Stack photo above text on very small screens */
    .card-inner {
        flex-direction: column;
    }

    .card-photo-wrap { flex: none; width: 100%; }
    .card-photo      { width: 100%; height: auto; aspect-ratio: 1; }

    .quote-open  { font-size: 1.8rem; top: -16px; }
    .quote-close { font-size: 1.8rem; bottom: -20px; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tab-btn, .card-btn { transition: none; }
}

/* ── Forced colours (Windows high-contrast) ─────────────────── */
@media (forced-colors: active) {
    .tab-btn        { border: 2px solid ButtonText; }
    .tab-btn.active { box-shadow: 0 0 0 3px Highlight; }
    .card-btn       { border: 2px solid ButtonText; }
    .grad-card      { border-color: ButtonText; }
    .quote-open,
    .quote-close    { color: Highlight; background: Canvas; }
}

/* ── Read more truncation ───────────────────────────────────── */
.card-quote-truncated {
    display: none;
}

.card-quote-full {
    display: block;
}

.card-quote.is-truncated .card-quote-full {
    display: none;
}

.card-quote.is-truncated .card-quote-truncated {
    display: block;
}

.read-more-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 1em;
    font-weight: 700;
    color: #1a5fa8;
    cursor: pointer;
    text-decoration: underline;
    margin-left: 2px;
}

.read-more-btn:hover {
    color: #154e8c;
}

.read-more-btn:focus-visible {
    outline: 3px solid #f5a623;
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 0 28px;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 1em;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background: #0d4a8a;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.12s;
}

.page-btn:hover:not(:disabled) {
    background: #083970;
}

.page-btn:disabled {
    background: #b0bec5;
    cursor: not-allowed;
}

.page-btn:focus-visible {
    outline: 3px solid #f5a623;
    outline-offset: 2px;
}

.page-indicator {
    font-size: 1em;
    color: #444;
    min-width: 100px;
    text-align: center;
}