/* ============================================================================
   Campus — annotated map with six building callouts, mascot and "One Campus"
   Live: friendsseminary.org section.section--school-cards
   (recon/homepage-loaded-rules.css lines 555–695 = Legacy/homepage.css; img, .global-icons and
   .dark-blue--button from global.css). Every value is the live one; only the copy, the photo
   (assets/campus.png) and the mascot (assets/ndc-logo.png) are Nalanda's.
   Base font-size 16px. Live body: brandon-grotesque 20px/23px, rgb(84,84,84), bg rgb(240,239,231).
   The clone's html carries .no-touch (added by sections/campus.js, like Modernizr on the live site);
   the hover rules key on it exactly as the live CSS does.
   ============================================================================ */

/* ---------- Section ---------- */
.section--school-cards { background-color: rgb(240, 239, 231); position: relative; }
@media (max-width: 1900px) {
  .section--school-cards { top: -8.75rem; }                       /* live: drawn 140px above its flow position (relative offset only) */
}
@media (max-width: 991px) {
  .section--school-cards { padding-bottom: 5.625rem; top: 0; }    /* live: 90px, no offset on phones */
}

/* ---------- Map ---------- */
.section--school-cards .map--inner { position: relative; }
.section--school-cards .map--inner .cards--map { display: block; position: relative; padding-bottom: 5px; }
  /* live: the <img> is inline, its baseline gap makes the map box 5px taller than the image
     (964 − 959 @1440, 377.8 − 372.8 @390); the pin percentages are measured against that 964 box */
.section--school-cards .map--inner .cards--map img {
  display: block; width: 100%; height: auto; object-fit: cover;
  aspect-ratio: 2880 / 1918;                                       /* live desktop map 2880×1918 → 959px tall @1440 */
  /* live: the map PNG's sky is transparent and the buildings dissolve into cream from the top —
     measured mean alpha per row: 0 to 18%, .05 @20%, .13 @24%, .28 @30%, .65 @36%, .91 @40%, 1 @46% */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0.1) 22%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.65) 36%, rgba(0, 0, 0, 0.92) 41%, #000 46%);
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0.1) 22%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.65) 36%, rgba(0, 0, 0, 0.92) 41%, #000 46%);
}
@media (min-width: 992px) {
  .section--school-cards .map--inner .cards--map::before { background-color: rgba(162, 150, 138, 0.07); content: ""; height: 50%; left: 0; position: absolute; top: 0; width: 100%; }   /* live: 7% brown tint over the top half */
}
/* live: the curved photo/cream edge is alpha in the map PNG (no CSS rule). Measured bottom edge of the
   opaque area: 93.6% of the height at both sides, 99.9% at the centre (mobile PNG: 87.6% → 99.7%).
   The clone paints that arc in cream over its rectangular photo. */
.section--school-cards .map--inner .cards--map::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 5px; pointer-events: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 936Q500 1062 1000 936V1000H0Z' fill='%23F0EFE7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (max-width: 991px) {
  .section--school-cards .map--inner .cards--map img {
    aspect-ratio: 750 / 717;                                       /* live mobile map 750×717 → 372.8px tall @390 */
    /* mobile PNG mean alpha per row: 0 to 10%, .07 @20–26%, .35 @36%, .53 @42%, .84 @46%, .95 @48%, 1 @54% */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.07) 20%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0.6) 44%, rgba(0, 0, 0, 0.95) 49%, #000 54%);
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.07) 20%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0.6) 44%, rgba(0, 0, 0, 0.95) 49%, #000 54%);
  }
  .section--school-cards .map--inner .cards--map::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 876Q500 1118.5 1000 876V1000H0Z' fill='%23F0EFE7'/%3E%3C/svg%3E");
  }
}

/* ---------- Desktop callout layer ---------- */
.section--school-cards .map--inner .module--school-cards { inset: 0; position: absolute; }
@media (max-width: 991px) {
  .section--school-cards .map--inner .module--school-cards { display: none; }   /* CSS hides at ≤991 while JS clones at ≤992 — same 1px mismatch as the live site */
}

/* ---------- Callout (pin) ---------- */
.section--school-cards .map--inner .module--school-cards .cards-card { max-width: 10.5625rem; padding-bottom: 15%; pointer-events: none; position: absolute; text-align: center; transform: translate(-50%, -50%); width: 100%; }
  /* live: 169px wide; padding-bottom % resolves against the map width (15% of 1440 = 216px);
     the box = 27px icon + padding, centred on (left, top) by the translate */
@media (max-width: 1200px) {
  .section--school-cards .map--inner .module--school-cards .cards-card { max-width: 8.4375rem; }   /* 135px */
}
.section--school-cards .map--inner .module--school-cards .cards-card .cards-card-btn { background: transparent; border: 0; cursor: pointer; height: 100%; left: 0; min-height: 19.375rem; padding: 0; pointer-events: all; position: absolute; top: -17.5rem; width: 100%; z-index: 6; }
  /* live: invisible hit-area, min 310px tall, starting 280px above the box so it also covers the floating text */
.section--school-cards .map--inner .module--school-cards .cards-card::after,
.section--school-cards .map--inner .module--school-cards .cards-card::before { content: ""; left: 50%; position: absolute; transform: translate(-50%); width: 0.125rem; }   /* 2px lines */
.section--school-cards .map--inner .module--school-cards .cards-card::before { background: rgb(255, 255, 255); bottom: 0; height: 95%; }              /* white pin line */
.section--school-cards .map--inner .module--school-cards .cards-card::after { background: rgb(84, 84, 84); height: 14%; opacity: 0.29; top: 5%; z-index: 0; }   /* grey shadow line */
.section--school-cards .map--inner .module--school-cards .cards-card .ccc-inner { bottom: calc(100% + 0.4375rem); cursor: pointer; left: 0; pointer-events: all; position: absolute; width: 100%; font-size: 1.25rem; line-height: 1.15; }
  /* live: text block floats 7px above the box. font-size/line-height pin the strut to the live body metrics
     (20px/23px) so the empty inline-thumbnail line above the name is 23px tall like the live */
.section--school-cards .map--inner .module--school-cards .cards-card .ccc-inner .ccc-name { -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: rgb(214, 38, 45); display: -webkit-box; font-size: clamp(0.9375rem, 0.822115rem + 0.240385vw, 1.0625rem); font-weight: 700; letter-spacing: clamp(0.09375rem, 0.0822115rem + 0.0240385vw, 0.10625rem); line-height: 1.1; margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
  /* 15→17px (16.6px @1440), tracking 1.5→1.7px, 2-line clamp */
.section--school-cards .map--inner .module--school-cards .cards-card .ccc-inner .description { -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: rgb(84, 84, 84); display: -webkit-box; font-size: clamp(0.875rem, 0.759615rem + 0.240385vw, 1rem); font-weight: 500; line-height: 1.18; overflow: hidden; text-overflow: ellipsis; }
  /* 14→16px (15.6px @1440), 3-line clamp */
.section--school-cards .map--inner .module--school-cards .cards-card .ccc-inner .description h2,
.section--school-cards .map--inner .module--school-cards .cards-card .ccc-inner .description h3,
.section--school-cards .map--inner .module--school-cards .cards-card .ccc-inner .description h4,
.section--school-cards .map--inner .module--school-cards .cards-card .ccc-inner .description p { font-size: inherit; font-weight: inherit; }
.section--school-cards .map--inner .module--school-cards .cards-card .ccc--small-img { display: inline; vertical-align: baseline; height: 0; margin-bottom: 0.25rem; object-fit: contain; opacity: 0; transition: 0.3s ease-in-out; width: 0; }
  /* live: building thumbnail, 0×0 until hover (inline like the live img so it keeps its own line) */
.section--school-cards .map--inner .module--school-cards .cards-card .ccc--small-img.noImage { display: none; }
.section--school-cards .map--inner .module--school-cards .cards-card .global-icons { color: rgb(255, 255, 255); cursor: pointer; display: block; font-size: 0.625rem; height: 1.6875rem; line-height: 1; margin: 0 auto; pointer-events: all; position: relative; width: 1.6875rem; z-index: 3; }   /* 27×27 box, 10px glyph; line-height 1 = live global .global-icons */
.section--school-cards .map--inner .module--school-cards .cards-card .global-icons::after { background-color: rgb(239, 152, 66); border-radius: 50%; content: ""; height: 1.3125rem; transition: 0.3s ease-in-out; width: 1.3125rem; z-index: 0; }   /* 21×21 orange disc */
.section--school-cards .map--inner .module--school-cards .cards-card .global-icons::after,
.section--school-cards .map--inner .module--school-cards .cards-card .global-icons::before { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.section--school-cards .map--inner .module--school-cards .cards-card .global-icons::before { z-index: 1; }

/* live: .global-icons.global-plus-icon::before is glyph U+E900 of the site's icon font (white, 1em = a 10.03×10px
   box on the desktop pins, 9.03×9 in the phone list); the clone draws the same "+" with two gradients sized in em
   so the 9px mobile variant follows — 1em bars, 0.2em thick, like the glyph's ink */
.section--school-cards .global-icons.global-plus-icon::before { content: ""; display: block; width: 1em; height: 1em; background: linear-gradient(currentColor, currentColor) center / 0.2em 1em no-repeat, linear-gradient(currentColor, currentColor) center / 1em 0.2em no-repeat; }

/* per-building positions, relative to the map box (live tag in the comment). DOM order = the order the live
   feed rendered them (Annex, OldSchoolHouse, Meetinghouse, HunterHall, TownHouse, Stuyvesant), which is what
   the nth-child tweens in campus.js assume; the padding-bottom values are the tween end values the live shows */
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="Library"] { left: 23.5%; position: absolute; top: 27.6%; }                                 /* FriendsAnnex, nth 1 */
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="ComputerLabs"] { left: 54.5%; padding-bottom: 17%; position: absolute; top: 45.5%; }     /* FriendsOldSchoolHouse, nth 2 (live CSS 17%, overridden to 15% by the nth-child(2) tween 2.5 s after load) */
@media (max-width: 1200px) {
  .section--school-cards .map--inner .module--school-cards .cards-card[data-tag="ComputerLabs"] { left: 55.8%; top: 45%; }
}
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="VisComStudio"] { left: 39%; position: absolute; top: 36%; }                              /* FriendsMeetinghouse, nth 3 (live CSS keeps the base 15%; the nth-child(3) tween ends at 17%) */
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="VisComStudio"]::after { height: 63%; }
@media (max-width: 1200px) {
  .section--school-cards .map--inner .module--school-cards .cards-card[data-tag="VisComStudio"] { left: 40%; top: 39%; }
}
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="NdcRadio"] { left: 63%; padding-bottom: 19%; position: absolute; top: 33%; }             /* FriendsHunterHall, nth 4 */
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="NdcRadio"]::after { height: 64%; }
@media (max-width: 1200px) {
  .section--school-cards .map--inner .module--school-cards .cards-card[data-tag="NdcRadio"] { left: 63.5%; top: 31.5%; }
}
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="PlacementCell"] { left: 71.3%; padding-bottom: 3%; position: absolute; top: 38%; }       /* FriendsTownHouseBuilding, nth 5 */
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="PlacementCell"]::before { background: rgb(84, 84, 84); opacity: 0.29; }   /* grey line instead of white */
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="PlacementCell"]::after { display: none; }
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="PlayGround"] { left: 24%; padding-bottom: 2%; position: absolute; top: 75.5%; }          /* FriendsStuyvesantSquare, nth 6 */
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="PlayGround"]::after { display: none; }
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="PlayGround"] .ccc-inner .ccc-name,
.section--school-cards .map--inner .module--school-cards .cards-card[data-tag="PlayGround"] .ccc-inner .description { color: rgb(255, 255, 255); }   /* sits on the dark ground */

/* hover (live: html.no-touch only) */
html.no-touch .section--school-cards .map--inner .module--school-cards .cards-card:hover .global-icons::after { background-color: rgb(214, 38, 45); transform: translate(-50%, -50%) scale(1.2); }
html.no-touch .section--school-cards .map--inner .module--school-cards .cards-card:hover .ccc--small-img { height: 3.1875rem; opacity: 1; width: 3.5rem; }   /* 56×51px thumbnail grows in over .3s */

/* ---------- Copy block: mascot row, "One Campus", two columns ---------- */
.section--school-cards .module--campus-inner { position: relative; }
.section--school-cards .module--campus-inner > * { transform: translateY(2.8125rem); }   /* 45px: CSS-side initial state = GSAP "from" (y 45 → 0) */
@media (max-width: 991px) {
  .section--school-cards .module--campus-inner { margin-bottom: 1.875rem; }
  .section--school-cards .module--campus-inner > * { transform: none; }
}
.section--school-cards .module--campus-inner .campus-inner--top { text-align: center; }
@media (min-width: 992px) {
  .section--school-cards .module--campus-inner .campus-inner--top { display: flex; justify-content: center; }
}
@media (max-width: 991px) {
  .section--school-cards .module--campus-inner .campus-inner--top { transform: none !important; }
}
.section--school-cards .module--campus-inner .campus-inner--top span { color: rgb(149, 137, 125); font-size: clamp(0.875rem, 0.701923rem + 0.360577vw, 1.0625rem); font-weight: 700; letter-spacing: clamp(0.0875rem, 0.0701923rem + 0.0360577vw, 0.10625rem); line-height: 3.2; text-transform: uppercase; vertical-align: middle; }
  /* 14→17px (16.4px @1440), tracking 1.4→1.7px */
.section--school-cards .module--campus-inner .campus-inner--top span:nth-child(2) { padding-right: 1.25rem; }
@media (min-width: 992px) {
  .section--school-cards .module--campus-inner .campus-inner--top span:nth-child(2) { order: 1; }
}
@media (max-width: 991px) {
  .section--school-cards .module--campus-inner .campus-inner--top span:nth-child(2) { padding-right: 0; }
}
.section--school-cards .module--campus-inner .campus-inner--top span:nth-child(3) { padding-left: 0.4375rem; }
@media (min-width: 992px) {
  .section--school-cards .module--campus-inner .campus-inner--top span:nth-child(3) { order: 3; }
}
@media (max-width: 991px) {
  .section--school-cards .module--campus-inner .campus-inner--top span { display: block; line-height: 1.28; }
}
.section--school-cards .module--campus-inner .campus-inner--top .item--image { --mascot: url("../assets/ndc-emblem.png"); display: inline-block; height: 14.0625rem; margin-top: -10rem; position: relative; width: 14.0625rem; }
  /* live: 225×225 mascot box pulled 160px up over the bottom of the map. --mascot is declared HERE (not inline in the markup):
     Chromium resolves a url() inside a custom property against the stylesheet that consumes it, so an inline
     url(assets/…) became sections/assets/… and 404'd in the assembled page. Override --mascot-state for a second hover pose. */
@media (min-width: 992px) {
  .section--school-cards .module--campus-inner .campus-inner--top .item--image { order: 2; }
}
@media (max-width: 991px) {
  .section--school-cards .module--campus-inner .campus-inner--top .item--image { height: 8.5rem; margin-bottom: 0.1875rem; margin-top: -7rem; width: 8.5rem; }   /* 136×136, -112px */
}
.section--school-cards .module--campus-inner .campus-inner--top .item--image::after,
.section--school-cards .module--campus-inner .campus-inner--top .item--image::before { background-position: 50% 100%; background-repeat: no-repeat; background-size: contain; content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
  /* live: two owl PNGs (451×446, background-position 50% center). The clone's mascot is the college logo
     (--mascot above) set on the bottom edge of the box so it stands under the curve */
.section--school-cards .module--campus-inner .campus-inner--top .item--image::before { background-image: var(--mascot); opacity: 1; }
.section--school-cards .module--campus-inner .campus-inner--top .item--image::after { background-image: var(--mascot-state, var(--mascot)); background-position: 50% calc(100% - 0.375rem); opacity: 0; }   /* hover state: same mark, a 6px hop (live: second owl pose) */
html.no-touch .section--school-cards .module--campus-inner .campus-inner--top .item--image:hover::before { opacity: 0; }   /* no transition on the live site → instant swap */
html.no-touch .section--school-cards .module--campus-inner .campus-inner--top .item--image:hover::after { opacity: 1; }
.section--school-cards .module--campus-inner .campus--title { color: rgb(214, 38, 45); font-family: "EB Garamond", serif; font-size: clamp(3.9375rem, -4.37019rem + 17.3077vw, 12.9375rem); font-weight: 700; letter-spacing: clamp(-0.118125rem, 0.131106rem - 0.519231vw, -0.388125rem); line-height: 0.77; margin: 0 0 4.6875rem; text-align: center; }
  /* live @1440: 179.308px, line-height 138.067px, letter-spacing -1.89px (the clamp's min > max so it is always -0.118125rem), margin 0 0 75px */
@media (max-width: 991px) {
  .section--school-cards .module--campus-inner .campus--title { margin-bottom: 1.5625rem; margin-top: 0.625rem; transform: none !important; }
}
.section--school-cards .module--campus-inner .campus--description { align-items: flex-start; display: flex; justify-content: flex-start; margin: 0 auto; max-width: 51.25rem; min-height: 13.75rem; }   /* 820px wide, at least 220px tall */
@media (min-width: 1800px) {
  .section--school-cards .module--campus-inner .campus--description { max-width: 55.625rem; }
}
@media (max-width: 991px) {
  .section--school-cards .module--campus-inner .campus--description { display: block; min-height: auto; padding: 0 1.25rem; text-align: center; transform: none !important; }
}
.section--school-cards .module--campus-inner .campus--description p { color: rgb(84, 84, 84); flex: 0 0 50%; font-size: clamp(1rem, 0.769231rem + 0.480769vw, 1.25rem); font-weight: 500; line-height: 1.55; max-width: 50%; margin: 0; }
  /* 16→20px (19.23px @1440); line-height 1.55 is the GSAP "from", 1.35 the end state */
.section--school-cards .module--campus-inner .campus--description p span { color: rgb(214, 38, 45); font-weight: 700; }
@media (max-width: 991px) {
  .section--school-cards .module--campus-inner .campus--description p { display: inline; flex: 0 0 100%; line-height: 1.35; max-width: 100%; }
}
.section--school-cards .module--campus-inner .campus--description_first { padding-right: 2.125rem; }
.section--school-cards .module--campus-inner .campus--description_second { padding-left: 2.125rem; }
@media (max-width: 991px) {
  .section--school-cards .module--campus-inner .campus--description_first { padding-right: 0; }
  .section--school-cards .module--campus-inner .campus--description_second { padding-left: 0; }
}

/* ---------- Mobile stacked list (≤992px; campus.js clones the callout layer after the copy block) ---------- */
.section--school-cards .module--school-cards--mobile { padding: 0 1.25rem; position: relative; }
.section--school-cards .module--school-cards--mobile::before { background: linear-gradient(rgba(240, 239, 231, 0), rgb(240, 239, 231)) transparent; bottom: 4.8125rem; content: ""; height: 8.5625rem; left: 0; position: absolute; width: 100%; z-index: 1; }   /* fade: 137px tall, 77px above the bottom */
.section--school-cards .module--school-cards--mobile.expand::before { display: none; }
.section--school-cards .module--school-cards--mobile .cards-card { background: rgb(250, 250, 247); border-radius: 0.9375rem; box-shadow: rgba(149, 137, 125, 0.25) 0.1875rem 0.1875rem 0.6875rem; margin-bottom: 0.625rem; position: relative; padding: 0.9375rem 3.125rem 0.9375rem 1.25rem !important; }   /* 15px radius; 15px 50px 15px 20px */
.section--school-cards .module--school-cards--mobile .cards-card:nth-child(4),
.section--school-cards .module--school-cards--mobile .cards-card:nth-child(5),
.section--school-cards .module--school-cards--mobile .cards-card:nth-child(6) { display: none; }
.section--school-cards .module--school-cards--mobile.expand .cards-card:nth-child(4),
.section--school-cards .module--school-cards--mobile.expand .cards-card:nth-child(5),
.section--school-cards .module--school-cards--mobile.expand .cards-card:nth-child(6) { display: block; }
.section--school-cards .module--school-cards--mobile .cards-card .global-icons { background-color: rgb(239, 152, 66); border-radius: 50%; bottom: 0.625rem; color: rgb(255, 255, 255); display: block; font-size: 0.5625rem; height: 1.125rem; line-height: 1; position: absolute; right: 0.625rem; width: 1.125rem; }   /* 18px disc, 10px from the corner, 9px glyph, line-height 1 (live global .global-icons) */
.section--school-cards .module--school-cards--mobile .cards-card .ccc-inner,
.section--school-cards .module--school-cards--mobile .cards-card .global-icons { align-items: center; display: flex; justify-content: center; }
@media (max-width: 991px) {
  .section--school-cards .module--school-cards--mobile .cards-card .ccc-inner { justify-content: flex-start; }
}
.section--school-cards .module--school-cards--mobile .cards-card .ccc-inner .ccc--small-img { flex-shrink: 0; margin-right: 1.0625rem; max-height: 4.3125rem; object-fit: contain; width: 3.1875rem; }   /* live rule: 51px wide, height from the image up to a 69px cap, 17px gap */
/* live thumbnails per card: 1, 2 and 5 are portrait cut-outs that fill the 69px cap (card 99px tall), 3 and 4 are
   landscape (51×46.9, 51×38.4 → shorter than the text, card 81.7px), 6 has none (81.7px). The clone's photos are all
   landscape, so cards 1, 2 and 5 are pinned to the cap (object-fit: contain letterboxes them) and 3 and 4 keep their
   own height → the same 99/99/81.7/81.7/99/81.7 cards, and the fade and Show all land where the live's do */
.section--school-cards .module--school-cards--mobile .cards-card:is([data-tag="Library"], [data-tag="ComputerLabs"], [data-tag="PlacementCell"]) .ccc-inner .ccc--small-img { height: 4.3125rem; }
.section--school-cards .module--school-cards--mobile .cards-card .ccc-inner .ccc--small-img.noImage { display: none; }
.section--school-cards .module--school-cards--mobile .cards-card .ccc-inner .ccc-name { -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: rgb(214, 38, 45); display: -webkit-box; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.09375rem; line-height: 1.1; margin-bottom: 0.1875rem; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.section--school-cards .module--school-cards--mobile .cards-card .ccc-inner .description { -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: rgb(84, 84, 84); display: -webkit-box; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
  /* line-height 1.15: live inherits body line-height 1.15 → 16.1px lines (the clone's body is 1.25 → 17.5px, which made
     the text-only cards 84.5px instead of 81.7px) */
.section--school-cards .module--school-cards--mobile .cards-card .cards-card-btn { background: transparent; border: 0; cursor: pointer; height: 100%; left: 0; padding: 0; pointer-events: all; position: absolute; top: 0; width: 100%; z-index: 6; }

/* Show all button — live: .btn.dark-blue--button (global.css) + .cards-show-all overrides */
.section--school-cards .dark-blue--button { align-items: center; background: transparent; border: 0; color: rgb(255, 255, 255); cursor: pointer; display: flex; font-family: inherit; font-size: clamp(0.875rem, 0.528846rem + 0.721154vw, 1.25rem); font-weight: 700; justify-content: center; letter-spacing: clamp(0.0875rem, 0.0528846rem + 0.0721154vw, 0.125rem); line-height: 1.45; margin-right: 1.5625rem; min-width: 12.1875rem; padding: 0.9375rem 2.5rem; position: relative; text-transform: uppercase; transition: 0.3s ease-in-out; }
.section--school-cards .dark-blue--button::before { border: 0.125rem solid rgb(255, 255, 255); border-radius: 0.4375rem; content: ""; height: 100%; left: 0; opacity: 0.22; position: absolute; top: 0; transition: 0.3s ease-in-out; width: 100%; }   /* 2px border @ .22, 7px radius */
.section--school-cards .dark-blue--button .global-icons { color: rgb(255, 181, 106); font-size: clamp(0.6875rem, 0.514423rem + 0.360577vw, 0.875rem); font-weight: 400; line-height: 1; padding-left: clamp(0.625rem, 0.394231rem + 0.480769vw, 0.875rem); }   /* line-height 1 = live global .global-icons */
html.no-touch .section--school-cards .dark-blue--button:hover { color: rgb(255, 181, 106); }
html.no-touch .section--school-cards .dark-blue--button:hover::before { transform: scale(1.02); }
@media (max-width: 767px) {
  .section--school-cards .dark-blue--button { margin: 0 0 0.9375rem; padding: 0.9375rem 1.875rem; }   /* live rule; loses to the more specific .cards-show-all below, as on the live site */
}
.section--school-cards .module--school-cards--mobile .cards-show-all { background-color: transparent; border: 0; color: rgb(84, 84, 84); margin: 2.5rem auto 0; min-width: auto; padding: 0.8125rem 1.4375rem; position: relative; z-index: 2; }   /* 40px auto 0; 13px 23px */
.section--school-cards .module--school-cards--mobile .cards-show-all::before { border-color: rgb(149, 137, 125); }
.section--school-cards .module--school-cards--mobile .cards-show-all .global-icons { color: rgb(84, 84, 84); display: block; font-size: 0.4375rem; font-weight: 400; }   /* live: .global-tiny-arrow-icon has no glyph rule → renders empty, only its padding shows */

/* live global.css: .general-truncate, .truncate-js */
.section--school-cards .truncate-js { overflow: hidden; overflow-wrap: break-word; word-break: break-word; }

/* ---------- Callout popup: campus.js fills and opens the static <dialog id="mediaPopup"> at the end of this section (live
   section#mediaPopup.mediaPopup.shTemplReset.defaultLayout.isMpStaff.isCard); the drawer and its scroll lock are styled by the
   shared sections/media-popup.css. ---------- */

/* ---------- Motion safety: no GSAP (campus.js adds .is-static) or opt-in reduced motion → the end state, no offset.
   Reduced motion is opt-in only (<html class="respect-reduced-motion">, read by campus.js too): the live has no such rule. ---------- */
.section--school-cards.is-static .module--campus-inner > * { transform: none; }
.section--school-cards.is-static .module--campus-inner .campus--description p { line-height: 1.35; }
@media (prefers-reduced-motion: reduce) {
  html.respect-reduced-motion .section--school-cards .module--campus-inner > * { transform: none; }
  html.respect-reduced-motion .section--school-cards .module--campus-inner .campus--description p { line-height: 1.35; }
  html.respect-reduced-motion .section--school-cards .map--inner .module--school-cards .cards-card .ccc--small-img,
  html.respect-reduced-motion .section--school-cards .map--inner .module--school-cards .cards-card .global-icons::after,
  html.respect-reduced-motion .section--school-cards .dark-blue--button,
  html.respect-reduced-motion .section--school-cards .dark-blue--button::before { transition: none; }
}