/**
 * Public shared components (tokens.css values only): buttons, cards, badges, form fields,
 * alerts, section headings and empty states. Pages reuse these classes instead of restyling.
 */

/* ---------- Buttons (pill) ---------- */
body .btn {
    box-sizing: border-box; /* width: 100% buttons must include their padding */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 10px;
    border-radius: var(--radius-pill);
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);
    line-height: 1.2;
    transition: var(--transition);
    cursor: pointer;
}

.btn-brand {
    background-color: var(--color-primary);
    color: var(--color-bg);
    border: 1px solid var(--color-primary);
}

.btn-brand:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-bg);
    transform: scale(1.02);
    box-shadow: var(--shadow-brand);
}

.btn-outline-custom {
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-outline-custom:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-md);
}

.btn-lg {
    padding: 14px 32px;
    font-size: var(--fs-lg);
}

body .btn:disabled,
body .btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---------- Sections ---------- */
.section-padding {
    padding: 70px 0;
}

.section-head {
    margin-bottom: var(--space-8);
}

.section-head__eyebrow {
    display: inline-block;
    margin-bottom: var(--space-2);
    color: var(--color-primary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-head__title {
    margin: 0 0 var(--space-2);
    font-size: clamp(var(--fs-3xl), 3.5vw, var(--fs-4xl));
}

.section-head__lead {
    max-width: var(--container-text);
    margin: 0;
    color: var(--color-text-secondary);
    line-height: var(--lh-base);
}

.section-head--center {
    text-align: center;
}

.section-head--center .section-head__lead {
    margin-inline: auto;
}

/* ---------- Cards ---------- */
.glass-card {
    background: var(--color-surface-glass);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: var(--transition);
    overflow: hidden;
}

.glass-card-hover:hover {
    transform: translateY(-4px);
    border-color: var(--color-border-accent);
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(55, 189, 138, 0.1);
}

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

.badge--neutral { background: rgba(255, 255, 255, 0.06); color: var(--color-text-secondary); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--error { background: var(--color-error-soft); color: var(--color-error); }

/* ---------- Form fields ---------- */
.field {
    display: grid;
    gap: var(--space-2);
}

.field__label {
    color: var(--color-text);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
}

.field__hint {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.field__error {
    color: var(--color-error);
    font-size: var(--fs-sm);
}

.input,
.select,
.textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-lg); /* 16px: stops iOS zooming into the field */
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--color-text-muted);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--color-error);
}

/* ---------- Alerts ---------- */
.alert-box {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
}

.alert-box--success { border-color: rgba(52, 211, 153, 0.35); background: var(--color-success-soft); color: var(--color-text); }
.alert-box--warning { border-color: rgba(251, 191, 36, 0.35); background: var(--color-warning-soft); color: var(--color-text); }
.alert-box--error { border-color: rgba(248, 113, 113, 0.35); background: var(--color-error-soft); color: var(--color-text); }

/* ---------- Empty states ---------- */
.empty-state {
    padding: var(--space-12) var(--space-6);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    text-align: center;
}

.empty-state__icon {
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--fs-4xl);
}

.empty-state__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-2xl);
}

.empty-state__text {
    max-width: 420px;
    margin: 0 auto;
    color: var(--color-text-secondary);
    line-height: var(--lh-base);
}

.empty-state .btn {
    margin-top: var(--space-6);
}

/* ---------- Course card (shared/includes/public_course_card.php) ---------- */
.cc {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-glass);
    transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.cc:hover, .cc:focus-within { border-color: var(--color-border-accent); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cc--new { border-color: rgba(139, 92, 246, 0.3); }
.cc--soon { border-color: rgba(251, 191, 36, 0.3); }

.cc__media { position: relative; z-index: 2; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-raised); }
.cc__media.js-inline-preview-player { cursor: pointer; }
.cc__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.cc:hover .cc__img { transform: scale(1.04); }
.cc__img--empty { display: grid; place-items: center; color: var(--color-text-muted); font-size: var(--fs-4xl); }
.cc__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cc--soon .cc__img { filter: brightness(0.8); }
.cc__badges { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); pointer-events: none; }
.cc-badge { padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.7); color: var(--color-text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.02em; backdrop-filter: blur(6px); }
.cc-badge--new { background: rgba(139, 92, 246, 0.9); }
.cc-badge--soon { background: rgba(251, 191, 36, 0.92); color: #1c1300; }
.cc-badge--pre { background: rgba(0, 0, 0, 0.7); color: var(--color-warning); }
.cc-badge--offer { background: var(--color-warning); color: #1c1300; }
.cc-badge--free { background: var(--color-primary); color: var(--color-on-primary); }
.cc__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-round);
    background: rgba(0, 0, 0, 0.55);
    color: var(--color-text);
    font-size: var(--fs-lg);
    transform: translate(-50%, -50%);
    backdrop-filter: blur(6px);
    transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
    pointer-events: none;
}
.cc__media:hover .cc__play, .cc__media:focus-visible .cc__play { background: var(--color-primary); color: var(--color-on-primary); transform: translate(-50%, -50%) scale(1.08); }
.cc__launch { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6) var(--space-4) var(--space-3); background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent); color: var(--color-warning); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

.cc__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.cc__title { margin: 0; font-size: var(--fs-xl); line-height: 1.3; }
.cc__link { color: var(--color-text); }
.cc__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card opens the course */
.cc__link:focus-visible { outline: none; }
.cc:has(.cc__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cc__desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--fs-md);
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cc__by { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-sm); }
.cc__by i { margin-right: var(--space-1); color: var(--color-primary); }
.cc__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-1) 0 0; padding: 0; list-style: none; color: var(--color-text-muted); font-size: var(--fs-sm); }
.cc__meta i { margin-right: 2px; }
.cc__rating { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.cc__rating i { color: var(--color-warning); }
.cc__rating strong { color: var(--color-text); }
.cc__early { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-3); border: 1px solid rgba(52, 211, 153, 0.3); border-radius: var(--radius-md); background: var(--color-success-soft); }
.cc__early small { display: block; color: var(--color-text-secondary); font-size: var(--fs-xs); }
.cc__early strong { color: var(--color-success); font-size: var(--fs-xl); }
.cc__early-after { text-align: right; }
.cc__early s { color: var(--color-text-muted); }
.cc__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cc-chip { padding: 0.2rem 0.55rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); color: var(--color-text-secondary); font-size: var(--fs-xs); }
.cc-chip--warn { border-color: rgba(251, 191, 36, 0.5); color: var(--color-warning); }
.cc-chip--bad { border-color: rgba(248, 113, 113, 0.5); color: var(--color-error); }
.cc__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.cc__body > .cc__footer { margin-top: auto; }
.cc__desc + .cc__footer, .cc__meta + .cc__footer, .cc__rating + .cc__footer { margin-top: auto; }
.cc__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.cc__price strong { color: var(--color-text); font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.cc__price s { color: var(--color-text-muted); font-size: var(--fs-sm); }
.cc__price--soon { color: var(--color-warning); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.cc__cta { position: relative; z-index: 2; display: inline-flex; flex: none; align-items: center; gap: var(--space-2); padding: 0.55rem 1rem; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--fs-md); font-weight: var(--fw-semibold); transition: background var(--duration) var(--ease); }
span.cc__cta { z-index: 0; } /* decorative: the card link underneath handles the click */
.cc:hover .cc__cta, .cc__cta:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.cc__cta--ghost { border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text); }
.cc:hover .cc__cta--ghost { background: rgba(255, 255, 255, 0.06); color: var(--color-text); }
.cc__body { padding-top: var(--space-4); }

/* ---------- Page hero (top of every inner public page: same spacing under the fixed header everywhere) ---------- */
.page-hero {
    padding: clamp(120px, 13vw, 150px) 0 var(--space-10);
    text-align: center;
}

.page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--color-border-accent);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.page-hero__title {
    max-width: 18em;
    margin: 0 auto var(--space-4);
    color: var(--color-text);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.page-hero__lead {
    max-width: 620px;
    margin: 0 auto;
    color: var(--color-text-secondary);
    font-size: var(--fs-xl);
    line-height: var(--lh-base);
    text-wrap: pretty;
}

.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-6);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-secondary);
    font-size: var(--fs-md);
}

.page-hero__meta i {
    margin-right: var(--space-2);
    color: var(--color-primary);
}

@media (max-width: 575px) {
    .page-hero { padding-bottom: var(--space-8); }
    .page-hero__lead { font-size: var(--fs-lg); }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--color-text-muted); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.breadcrumbs li + li::before { content: "/"; color: var(--color-border-strong); }
.breadcrumbs a { color: var(--color-text-secondary); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs [aria-current] { overflow: hidden; color: var(--color-text); text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; }

/* ---------- Course reviews: summary + masonry cards (home, alumni) ---------- */
.hrev {
    display: grid;
    gap: var(--space-8);
    margin-top: var(--space-12);
    align-items: start;
}
@media (min-width: 992px) {
    .hrev { grid-template-columns: 300px 1fr; gap: var(--space-10); }
    .hrev__summary { position: sticky; top: 110px; }
}
.hrev__summary {
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(55, 189, 138, 0.08), transparent 60%), var(--color-surface-raised);
}
.hrev__summary-title { margin: 0 0 var(--space-4); color: var(--color-text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
.hrev__score { display: flex; align-items: baseline; gap: var(--space-2); }
.hrev__score-num { color: var(--color-text); font-size: 3.5rem; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.04em; }
.hrev__score-out { color: var(--color-text-muted); font-size: var(--fs-xl); }
.hrev__summary > .hrev-stars { display: block; margin: var(--space-3) 0 var(--space-2); font-size: var(--fs-xl); }
.hrev__based { margin: 0 0 var(--space-6); color: var(--color-text-secondary); font-size: var(--fs-md); }
.hrev__bars { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--color-border); list-style: none; }
.hrev__bars li { display: grid; grid-template-columns: 34px 1fr 36px; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.hrev__bar-label { color: var(--color-text-secondary); white-space: nowrap; }
.hrev__bar-label i { color: var(--color-warning); font-size: 0.7em; }
.hrev__bar { height: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.hrev__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), #6ee7b7); }
.hrev__bar-count { color: var(--color-text-muted); text-align: right; font-variant-numeric: tabular-nums; }

.hrev-stars { color: var(--color-warning); letter-spacing: 2px; font-size: var(--fs-sm); }
.hrev-stars .far { color: rgba(255, 255, 255, 0.2); }

.hrev__list { columns: 1; column-gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .hrev__list { columns: 2; } }
.hrev-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    break-inside: avoid;
    margin: 0 0 var(--space-5);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-glass);
    transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.hrev-card[hidden] { display: none; }
.hrev-card:hover { border-color: var(--color-border-accent); transform: translateY(-2px); }
.hrev-card__top { display: flex; justify-content: space-between; align-items: center; }
.hrev-card__mark { color: var(--color-primary); opacity: 0.35; font-size: var(--fs-2xl); }
.hrev-card__text { margin: 0; color: var(--color-text); font-size: var(--fs-lg); line-height: var(--lh-base); overflow-wrap: anywhere; }
.hrev-card__text:dir(rtl) { line-height: var(--lh-urdu); font-size: calc(var(--fs-lg) * 1.18); padding-top: var(--space-2); }
.hrev-card__author { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.hrev-card__avatar { flex: none; width: 40px; height: 40px; border-radius: var(--radius-round); object-fit: cover; }
.hrev-card__avatar--initial { display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--fw-bold); }
.hrev-card__who { display: grid; min-width: 0; }
.hrev-card__who strong { color: var(--color-text); font-size: var(--fs-md); }
.hrev-card__course { color: var(--color-text-muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrev__more { margin-top: var(--space-2); text-align: center; }
.hrev__more[hidden] { display: none; }
.hrev__more-count { color: var(--color-text-muted); }

/* student work cards (home + alumni) */
.hport-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.hport-card figure { margin: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.hport-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hport-card figcaption { display: grid; gap: var(--space-1); padding: var(--space-4); }
.hport-card figcaption .badge { justify-self: start; }
.hport-card__title { color: var(--color-text); font-size: var(--fs-lg); }
.hport-card__by { color: var(--color-text-muted); font-size: var(--fs-sm); }
.hport-card__desc { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--fs-md); line-height: var(--lh-base); }

/* ---------- verified alumni card (/graduates + profile pages); the whole card opens the profile ---------- */
.ac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px)); justify-content: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.ac-grid > li { display: flex; }
.ac { position: relative; display: flex; flex: 1; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: linear-gradient(160deg, rgba(55, 189, 138, 0.07), transparent 45%), var(--color-surface); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.ac:hover, .ac:focus-within { border-color: var(--color-border-accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ac__top { display: flex; align-items: center; gap: var(--space-4); }
.ac__photo { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-primary); }
.ac__photo--initials { display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.ac__who { min-width: 0; }
.ac__name { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.3; }
.ac__link { color: var(--color-text); text-decoration: none; }
.ac__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ac__link:hover, .ac__link:focus-visible { color: var(--color-text); outline: none; }
.ac:has(.ac__link:focus-visible) { outline: 2px solid var(--color-focus, var(--color-primary)); outline-offset: 3px; }
.ac__verified { color: var(--color-primary); font-size: 0.85em; }
.ac__role { margin: 2px 0 0; color: var(--color-primary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ac__loc { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.ac__course { align-self: flex-start; margin: 0; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.05); color: var(--color-text-secondary); font-size: var(--fs-xs); }
.ac__course i, .ac__loc i { margin-right: 4px; opacity: 0.8; }
.ac__quote { display: -webkit-box; margin: 0; overflow: hidden; color: var(--color-text-secondary); font-size: var(--fs-md); line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.ac__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ac__tags li { padding: 0.25rem 0.65rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.ac__tags i { margin-right: 4px; color: var(--color-primary); }
.ac__cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); color: var(--color-primary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ac__cta i { font-size: 0.8em; transition: transform 0.2s; }
.ac:hover .ac__cta i { transform: translateX(4px); }

/* the review is what matters: the text leads; photo, name, course and stars sit small and quiet underneath */
.hrev-card { gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-4); }
.hrev-card__text { font-size: var(--fs-lg); line-height: 1.75; }
.hrev-card__author { gap: var(--space-2); padding-top: var(--space-3); border-top-color: rgba(255, 255, 255, 0.05); }
.hrev-card__avatar { width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.08); }
.hrev-card__avatar--initial { width: 26px; height: 26px; border: 0; background: rgba(55, 189, 138, 0.1); font-size: 0.65rem; }
.hrev-card__who { display: flex; flex: 1; align-items: baseline; column-gap: 0.4rem; min-width: 0; line-height: 1.3; white-space: nowrap; } /* one line: a long course name is cut, never the reviewer */
.hrev-card__name { flex: none; max-width: 70%; overflow: hidden; color: var(--color-text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-overflow: ellipsis; }
.hrev-card__course { flex: 1; min-width: 0; font-size: var(--fs-xs); }
.hrev-card__course::before { content: "·"; margin-right: 0.4rem; }
.hrev-card__author .hrev-stars { flex: none; letter-spacing: 1px; font-size: 0.62rem; opacity: 0.8; }
.hrev__main { min-width: 0; } /* the one-line reviewer row must not widen the grid column */