/* Shared school card.
   Rendered on the school list page, the search results modal, and the
   favorites page. Ships its own design tokens so it can load standalone on
   the search/favorites surfaces where schools-list.css is not present. */
:root {
    --school-list-ink: #111827;
    --school-list-muted: #6b7280;
    --school-list-gold: #e8ba00;
    --school-list-line: rgba(107, 114, 128, .22);
    --school-list-chip: #f2f2f2;
    --school-list-shadow: 1px 4px 10px rgba(0, 0, 0, .10);
}

.school-list-card,
.school-list-card *,
.school-list-card *::before,
.school-list-card *::after,
.school-search-card,
.school-search-card *,
.school-search-card *::before,
.school-search-card *::after { box-sizing: border-box; }

.school-list-card {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 307px;
    overflow: hidden;
    border: 1px solid rgba(107, 114, 128, .12);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--school-list-shadow);
    color: var(--school-list-ink);
    font-family: "Rubik", sans-serif;
}
.school-list-card__media {
    position: relative;
    width: 100%;
    height: 104px;
    overflow: hidden;
    background: #f2f2f2;
}
.school-list-card__media > a { display: block; width: 100%; height: 100%; }
.school-list-card__cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.school-list-card__gallery {
    position: absolute;
    top: 9px;
    inset-inline-end: 9px;
    display: flex;
    direction: ltr;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 49px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 1px 3px 8px rgba(0, 0, 0, .08);
    color: #111827;
    font-size: 12px;
    backdrop-filter: blur(8px);
}
.school-list-card__gallery img { width: 20px; height: 20px; }
.school-list-card__ribbons {
    position: absolute;
    z-index: 3;
    top: 9px;
    inset-inline-start: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: calc(100% - 70px);
}
.school-list-card__ribbon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 8px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 1px 2px 5px rgba(0, 0, 0, .08);
    color: #137a43;
    font-size: 9px;
    font-weight: 500;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}
.school-list-card__ribbon i { font-size: 9px; }
.school-list-card__media-overlay {
    position: absolute;
    inset-inline-end: 9px;
    bottom: 8px;
    display: flex;
    direction: ltr;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 125px);
}
html[dir="rtl"] .school-list-card__media-overlay {
    inset-inline-start: auto;
    inset-inline-end: auto;
    left: 9px;
    right: auto;
}
.school-list-card__support,
.school-list-card__fee {
    display: flex;
    align-items: center;
    height: 22px;
    border-radius: 7px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, .08);
    backdrop-filter: blur(8px);
}
.school-list-card__support {
    max-width: 135px;
    gap: 4px;
    padding: 0 7px 0 4px;
    background: rgba(255, 255, 255, .84);
    color: #8a4c27;
    font-size: 8px;
}
.school-list-card__support img { width: 17px; height: 17px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.school-list-card__support span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.school-list-card__fee {
    gap: 4px;
    padding: 0 7px;
    background: rgba(236, 253, 243, .90);
    color: #137a43;
    white-space: nowrap;
}
.school-list-card__fee strong { font-size: 11px; font-weight: 500; }
.school-list-card__fee span { font-size: 8px; font-weight: 300; }
.school-list-card__logo {
    position: absolute;
    z-index: 2;
    top: 59px;
    inset-inline-start: 16px;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 20px;
    background: #fff;
    box-shadow: 1px 4px 10px rgba(0, 0, 0, .12);
}
.school-list-card__logo a { display: block; width: 100%; height: 100%; }
.school-list-card__logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.school-list-card__identity { min-width: 0; height: 51px; padding: 4px 16px 0; padding-inline-start: 116px; }
.school-list-card__identity h2 {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    white-space: nowrap;
}
.school-list-card__identity h2 a { min-width: 0; overflow: hidden; color: inherit; text-decoration: none; text-overflow: ellipsis; }
.school-list-card__verified { width: 14px; height: 14px; flex: 0 0 auto; }
.school-list-card__meta { display: flex; direction: ltr; align-items: center; gap: 6px; min-width: 0; color: var(--school-list-muted); }
html[dir="rtl"] .school-list-card__meta { direction: rtl; }
.school-list-card__location { display: flex; align-items: center; min-width: 0; gap: 4px; overflow: hidden; font-size: 10px; font-weight: 300; }
.school-list-card__location span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.school-list-card__location img { width: 10px; height: 13px; flex: 0 0 auto; }
.school-list-card__separator { width: 3px; height: 3px; flex: 0 0 auto; border-radius: 50%; background: rgba(107, 114, 128, .7); }
.school-list-card__rating { display: flex; direction: ltr; align-items: center; flex: 0 0 auto; gap: 3px; font-size: 10px; }
.school-list-card__rating img { width: 12px; height: 12px; }
.school-list-card__genders {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 2px 16px 4px;
    overflow: hidden;
}
.school-list-card__genders span {
    flex: 0 0 auto;
    height: 22px;
    padding: 3px 7px;
    border-radius: 8px;
    background: #f3edff;
    color: #6f42c1;
    font-size: 9px;
    line-height: 16px;
}
.school-list-card__genders .is-male { background: #eef6ff; color: #2871b7; }
.school-list-card__genders .is-female { background: #fff0f6; color: #c73e7d; }
.school-list-card__genders .is-segregated { background: #f6f0ff; color: #6f42c1; }

.school-list-card__facts { height: 61px; margin: 0 16px; font-size: 10px; }
.school-list-card__facts > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; min-height: 30px; }
.school-list-card__facts dt { color: var(--school-list-muted); font-size: 10px; font-weight: 300; }
.school-list-card__facts dd { display: flex; min-width: 0; margin: 0; gap: 6px; overflow: hidden; }
.school-list-card__facts dd span {
    display: inline-block;
    flex: 0 0 auto;
    max-width: 82px;
    height: 22px;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--school-list-chip);
    color: var(--school-list-muted);
    font-size: 10px;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.school-list-card__footer {
    display: grid;
    direction: ltr;
    grid-template-columns: 44px minmax(110px, 137px) minmax(0, 1fr);
    grid-template-areas: "favorite details badges";
    align-items: center;
    gap: 6px;
    height: 59px;
    margin: 0 16px;
    border-top: 1px solid var(--school-list-line);
}
.school-list-card__details {
    display: grid;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff 0%, var(--school-list-gold) 100%);
    box-shadow: var(--school-list-shadow);
    color: var(--school-list-ink);
    direction: rtl;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    text-wrap: balance;
    white-space: normal;
}
.school-list-card__favorite {
    display: grid;
    width: 44px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--school-list-gold);
    border-radius: 10px;
    background: #fff;
    color: #e63341;
    cursor: pointer;
    font-size: 20px;
    text-decoration: none;
}
/* Favorited: Figma gold button + solid red heart (same active state as the search card). */
.school-list-card__heart-on { display: none; }
.school-list-card__favorite.is-favorited {
    border-color: rgba(107, 114, 128, .12);
    background: linear-gradient(180deg, #fff 0%, var(--school-list-gold) 100%);
    box-shadow: var(--school-list-shadow);
}
.school-list-card__favorite.is-favorited .school-list-card__heart-off { display: none; }
.school-list-card__favorite.is-favorited .school-list-card__heart-on { display: block; }
.school-list-card__favorite img { width: 22px; height: 22px; }
.school-list-card__favorite:not(.is-favorited) img { opacity: .72; }
.school-list-card__favorite.is-disabled { cursor: default; opacity: .45; }
/* Not allowed to favorite (school / admin / supplier-off): dimmed but clickable
   so a tap can explain why (see favorite-denied.js). */
.school-list-card__favorite.is-denied { cursor: pointer; opacity: .55; }
.school-list-card__favorite.is-loading { cursor: wait; opacity: .65; }
.school-list-card__badges { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; overflow: hidden; }
.school-list-card__badges img { width: 31px; height: 31px; flex: 0 0 auto; object-fit: contain; }
.school-list-card__badges-empty { display: grid; width: 31px; height: 22px; place-items: center; border-radius: 8px; background: var(--school-list-chip); color: var(--school-list-muted); font-size: 10px; }
.school-list-card__favorite { grid-area: favorite; }
.school-list-card__details { grid-area: details; }
.school-list-card__badges { grid-area: badges; }
html[dir="ltr"] .school-list-card__footer { grid-template-columns: minmax(0, 1fr) minmax(110px, 137px) 44px; grid-template-areas: "badges details favorite"; }
html[dir="ltr"] .school-list-card__badges { justify-content: flex-start; }

/* ── Search / favorites card ──
   Reproduces the Figma "school search results (mobile)" node (1487-31258 /
   1565-32002) as a fluid, non-overflowing flow layout. Row order and colours
   come straight from the Figma design context:
     [logo | (complete tag, name+verified, rating↔support, genders)]
     location ↔ fee   ·   stages   ·   curriculum   ·   shared footer
   Every row wraps and every text truncates, so nothing leaves the card at any
   width. */
.school-search-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    /* The card lives inside the modal's bounded flex-column scroller
       (#search-result-body). flex-shrink:0 stops flexbox from squashing a tall
       card down and clipping its footer; the card is exactly as tall as its
       content. */
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid rgba(107, 114, 128, .12);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--school-list-shadow);
    color: var(--school-list-ink);
    font-family: "Rubik", sans-serif;
}
/* Head grid: the name is a full-width row on top on phones, but sits beside the
   logo on wider screens (see the min-width:768px override below). The 14px side
   padding keeps the name off the card edge in both layouts. */
.school-search-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "title title"
        "logo  main";
    align-items: start;
    gap: 6px 10px;
    padding: 12px 14px 0;
    min-width: 0;
}
.school-search-card__logocol { grid-area: logo; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.school-search-card__logo { width: 76px; height: 76px; overflow: hidden; border-radius: 16px; background: #f3f7ff; box-shadow: 1px 4px 10px rgba(0, 0, 0, .10); }
.school-search-card__logo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* complete-profile / featured: white pill with a soft yellow glow (Figma) */
.school-search-card__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    max-width: 100%;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 12px rgba(240, 205, 50, .8);
    color: #111827;
    font-size: 9px;
    font-weight: 300;
    white-space: nowrap;
}
.school-search-card__status > span { overflow: hidden; text-overflow: ellipsis; }
.school-search-card__status i { flex: 0 0 auto; font-size: 9px; color: #e8ba00; }

.school-search-card__main { grid-area: main; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
/* Name: full-width row on top on phones; beside the logo on wider screens. */
.school-search-card__title { grid-area: title; display: flex; align-items: center; gap: 4px; min-width: 0; }
.school-search-card__title a { min-width: 0; overflow: hidden; color: #111827; font-size: 15px; font-weight: 500; line-height: 20px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }

/* PC / tablet: name moves up next to the logo instead of a full-width row. */
@media (min-width: 768px) {
    .school-search-card__head {
        grid-template-areas:
            "logo title"
            "logo main";
    }
}
.school-search-card__verified { width: 14px; height: 14px; flex: 0 0 auto; }

.school-search-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 8px; width: 100%; min-width: 0; }
.school-search-card__rating { display: inline-flex; direction: ltr; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--school-list-muted); font-size: 11px; }
.school-search-card__rating img { width: 12px; height: 12px; }

/* pills (support / genders / fee) share one base */
.school-search-card__support,
.school-search-card__gender,
.school-search-card__fee {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 22px;
    max-width: 100%;
    min-width: 0;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}
.school-search-card__support { flex: 0 1 auto; background: #eef4ff; color: #111827; font-size: 9px; }
.school-search-card__support img { width: 15px; height: 15px; flex: 0 0 auto; object-fit: contain; }
.school-search-card__support > span { overflow: hidden; text-overflow: ellipsis; }
.school-search-card__genders { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.school-search-card__gender { background: #f3edff; color: #6f42c1; }
.school-search-card__gender.is-male { background: #eef4ff; color: #1d4ed8; }
.school-search-card__gender.is-female { background: #fff0f5; color: #b4235a; }
.school-search-card__gender.is-segregated { background: #f3edff; color: #6f42c1; }

.school-search-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 10px; padding: 8px 14px 0; min-width: 0; }
/* On a featured card, مميز swaps to the inline-start and the location to the
   inline-end, so the two trade sides (direction-aware in RTL and LTR). Scoped to
   featured cards so non-featured cards keep their location↔fee spread. */
.school-search-card__meta:has(.school-search-card__status--featured) .school-search-card__status--featured { order: -1; }
.school-search-card__meta:has(.school-search-card__status--featured) .school-search-card__location { order: 1; }
.school-search-card__location { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; color: var(--school-list-muted); font-size: 11px; font-weight: 300; }
.school-search-card__location img { width: 8px; height: 10px; flex: 0 0 auto; }
.school-search-card__location span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.school-search-card__fee { flex: 0 0 auto; background: #fdecec; }
.school-search-card__fee strong { color: #b42318; font-size: 12px; font-weight: 400; }
.school-search-card__fee span { color: #111827; font-size: 8px; font-weight: 300; }

.school-search-card__facts { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 14px 4px; }
.school-search-card__fact { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.school-search-card__fact dt { flex: 0 0 auto; padding-top: 4px; color: var(--school-list-muted); font-size: 11px; font-weight: 300; }
.school-search-card__fact dd { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; }
.school-search-card__fact dd span {
    display: inline-block;
    max-width: 100%;
    height: 22px;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(107, 114, 128, .12);
    color: var(--school-list-muted);
    font-size: 11px;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reuse the shared footer (favorite / details / badges); its border-top is the
   divider. It sits directly after the facts, so the card height always equals
   its content — nothing to clamp or push outside the border. */
.school-search-card .school-list-card__footer { margin: 8px 14px 0; }

/* Favorited state (Figma node 1553-31930): a gold-gradient button with a solid
   red heart. The toggle JS only flips the .is-favorited class, so the outline
   and filled hearts are swapped with CSS. Scoped to the search/favorites card. */
.school-search-card__heart-on { display: none; }
.school-search-card .school-list-card__favorite.is-favorited {
    border-color: rgba(107, 114, 128, .12);
    background: linear-gradient(180deg, #fff 0%, var(--school-list-gold) 100%);
    box-shadow: var(--school-list-shadow);
}
.school-search-card .school-list-card__favorite.is-favorited .school-search-card__heart-off { display: none; }
.school-search-card .school-list-card__favorite.is-favorited .school-search-card__heart-on { display: block; }

/* The search modal ships a blanket `.search-body img:not(.avatar){width:2rem}`
   that would shrink our logo and inflate our icons. Our card owns its image
   sizes — re-assert them at higher specificity so they win regardless of the
   stylesheet load order (searchModalGlobal.css / custom-app.css). */
.search-body .school-search-card .school-search-card__logo img { width: 100%; height: 100%; }
.search-body .school-search-card .school-search-card__verified { width: 14px; height: 14px; }
.search-body .school-search-card .school-search-card__rating img { width: 12px; height: 12px; }
.search-body .school-search-card .school-search-card__location img { width: 8px; height: 10px; }
.search-body .school-search-card .school-search-card__support img { width: 15px; height: 15px; }
.search-body .school-search-card .school-list-card__favorite img { width: 22px; height: 22px; }
/* Search-card badges: three large badges on PC/tablet. On phones we show only
   the first TWO so each stays big and legible instead of three cramped ones.
   Both selectors cover the modal (.search-body) and the favorites grid alike. */
.school-search-card .school-list-card__badges img,
.search-body .school-search-card .school-list-card__badges img { width: 42px; height: 42px; }
/* ≤480: two badges (hide the 3rd). */
@media (max-width: 480px) {
    .school-search-card .school-list-card__badges img:nth-child(n+3),
    .search-body .school-search-card .school-list-card__badges img:nth-child(n+3) { display: none; }
    .school-search-card .school-list-card__badges img,
    .search-body .school-search-card .school-list-card__badges img { width: 40px; height: 40px; }
}
/* <397px: two badges @ 30px. */
@media (max-width: 396px) {
    .school-search-card .school-list-card__badges img,
    .search-body .school-search-card .school-list-card__badges img { width: 30px; height: 30px; }
}
/* <376px: two badges @ 25px. */
@media (max-width: 375px) {
    .school-search-card .school-list-card__badges img,
    .search-body .school-search-card .school-list-card__badges img { width: 25px; height: 25px; }
}
/* ≤360px: drop to a single badge and reset it larger (36px). */
@media (max-width: 360px) {
    .school-search-card .school-list-card__badges img:nth-child(n+2),
    .search-body .school-search-card .school-list-card__badges img:nth-child(n+2) { display: none; }
    .school-search-card .school-list-card__badges img,
    .search-body .school-search-card .school-list-card__badges img { width: 36px; height: 36px; }
}
/* ≤320px: shrink the single badge further. */
@media (max-width: 320px) {
    .school-search-card .school-list-card__badges img,
    .search-body .school-search-card .school-list-card__badges img { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: no-preference) {
    .school-list-card,
    .school-search-card { transition: transform .2s ease, box-shadow .2s ease; }
    .school-list-card:hover,
    .school-search-card:hover { transform: translateY(-2px); box-shadow: 1px 8px 18px rgba(0, 0, 0, .13); }
}