:root {
    --card-border: 1px solid #E9EAEB;
    --card-bg: #FFF;
    --card-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
    --card-radius: 8px;
    --card-padding: 1.375rem 1rem;
    /* 22px 16px */
    --card-gap: 0.5rem;
    --card-transition: all 0.2s ease-in-out;

    /* Icon sizes */
    --icon-sm: 2rem;
    /* 32px */
    --icon-md: 2.5rem;
    /* 40px */
    --icon-lg: 3rem;
    /* 48px */

    /* School card specific */
    --school-logo-size: 6.25rem;
    /* 100px */
    --school-logo-size-mobile: 5rem;
    /* 80px */
}

.card {
    display: flex;
    align-items: center;
    padding: var(--card-padding);
    gap: var(--card-gap);
    border-radius: var(--card-radius);
    border: var(--card-border);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    width: 100%;
    /* Default hover border color (accent) */
    --card-hover-border-color: var(--color-secondary, #FF692E);
}

.card.interactive {
    cursor: pointer;
    text-decoration: none;
}

.card.interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--card-hover-border-color);
    text-decoration: none;
}

.card.border-primary {
    --card-hover-border-color: var(--color-primary, #076FC6);
}

.card.bg-primary {
    --card-hover-border-color: transparent;
}

.card.bg-primary-light.border-primary {
    --card-hover-border-color: var(--color-primary, #076FC6);
}

.card--hero {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.90);
}

.card.vertical {
    flex-direction: column;
    text-align: center;
}

.card.full-width {
    width: 100%;
    max-width: none;
}

.card--width-lg {
    min-width: 300px;
}

.card--min--height {
    height: 100px;
}

.card__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 0.25rem;
    border: 1px solid #E9EAEB;
    background: var(--card-bg);
    box-shadow:
        0 0 0 0.1px rgba(10, 13, 18, 0.18) inset,
        0 -2px 0 0 rgba(10, 13, 18, 0.05) inset,
        0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

.card__icon.sm {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.card__icon.md {
    width: var(--icon-md);
    height: var(--icon-md);
}

.card__icon.lg {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

.card__icon i {
    font-size: 0.9rem;
    color: var(--color-secondary, #FF692E);
}

.card__text {
    flex-grow: 1;
    color: var(--color-text-medium, #414651);
}

.card__text.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card__arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 50%;
}

.card__arrow.sm {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.card__arrow.md {
    width: var(--icon-md);
    height: var(--icon-md);
}

.card__arrow.lg {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

.school-card {
    border: var(--card-border);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    padding: 1.25rem;
    /* 20px */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--card-transition);
    cursor: pointer;
}

.school-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.school-card__logo {
    flex-shrink: 0;
    width: var(--school-logo-size);
    height: var(--school-logo-size);
    display: flex;
    justify-content: center;
    align-items: center;
}

.school-card__logo img {
    max-width: var(--school-logo-size);
    height: auto;
}

.school-card__info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.school-card__name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.school-card__type {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.school-card__rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.25rem 0;
}

.school-card__rating .star-icon {
    width: 16px;
    height: 16px;
}

.school-card__rating .star-icon--filled {
    color: #f97316;
    /* Orange color for stars */
}

.school-card__rating .star-icon--empty {
    color: #d1d5db;
    /* Gray color for empty stars */
}

.school-card__rating span {
    font-size: 0.875rem;
    color: #6b7280;
    margin-left: 0.25rem;
}

.school-card__details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.school-card__detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.school-card__detail svg {
    width: 1rem;
    height: 1rem;
}

.school-card__action {
    flex-shrink: 0;
}

.school-card__action i {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary, #076FC6);
}

@media (max-width: 768px) {
    .school-card__logo {
        width: var(--school-logo-size-mobile);
        height: var(--school-logo-size-mobile);
    }

    .school-card__logo img {
        max-width: var(--school-logo-size-mobile);
    }
}

@media (min-width: 1024px) {
    .school-card__logo {
        width: var(--entity-logo-size);
        height: var(--entity-logo-size);
    }
}

a.card,
a.school-card {
    text-decoration: none;
    color: inherit;
}

a.card:hover,
a.school-card:hover {
    text-decoration: none;
    color: inherit;
}