/* ============================================================
   mhs-extra.css · LP Miss Hall's School pt-BR
   CSS aditivo apenas — nenhuma regra de style.css é sobrescrita.
   Carregado DEPOIS de style.css. Ver plano: "Como forkar sem
   tocar na SCLA" para a justificativa de cada bloco.
   ============================================================ */

/* 0) Paleta da Miss Hall's (Rodada 2, primeiro ajuste visual).
      Redeclara as custom properties --brand* dentro de :root — como
      este arquivo carrega depois de style.css, os novos valores
      vencem em cascata sem editar nenhuma regra do arquivo original.
      --brand* era o vermelho da SCLA (#C41230) e é o único "lever"
      de cor usado em botões, links, ícones, eyebrows e bordas de
      destaque em todo o site — trocar aqui já recolore essas peças
      todas de uma vez. --navy/--navy-800 etc. (cor de texto/heading
      neutra, já um navy escuro quase preto) ficam como estão: dão
      bom contraste de leitura e continuam coerentes com a marca.
      --gold* é um token novo, aplicado por enquanto só no eyebrow
      do hero (item 7 abaixo) — outros pontos de uso ficam para
      quando houver direção de design mais específica.
      --accent-2 (#E65722, laranja-queimado) é a cor secundária pra
      usar nos lugares em que o dourado não tem contraste/leitura
      boa (ex.: sobre fundos claros/brancos) — ainda sem aplicação
      no HTML, disponível para quando surgir um ponto de uso. */
:root {
  --brand:        #20588D;
  --brand-hover:  #1B4B78;
  --brand-active: #163E63;
  --brand-ring:   rgba(32,88,141,.18);
  --brand-subtle: rgba(32,88,141,.07);
  --brand-light:  #E4EBF1;
  --brand-fg:     #FFFFFF;

  --gold:         #FFDD34;
  --gold-dark:    #D9BC2C;
  --gold-subtle:  #FFFCEB;

  --accent-2:         #E65722;
  --accent-2-hover:   #C4451A;
  --accent-2-subtle:  #FDEEE7;

  /* Azul bem diluído (~4% de --brand sobre branco) só pra fundo de
     seção — --brand-light é mais saturado e já é usado em outros
     lugares (bordas de avatar, fundo da seção de inglês etc.), não
     queria mexer nesses ao criar um tom mais claro. */
  --section-tint-blue: #F6F8FA;
}

/* 1) .img-placeholder dentro de contêineres com altura fixa/aspect-ratio
      (o CSS original espera um <img> filho com height:100%, que um
      <div> não herda por padrão). */
.school-media .img-placeholder,
.programs-photo .img-placeholder,
.campuslife-photo .img-placeholder {
  height: 100%;
}

/* 2) Wrapper para o card único da ex-aluna (Seção 5 — Ubah Ali).
      .testimonials-grid original é fixamente 3 colunas; aqui queremos
      um único .testimonial-card centralizado e mais estreito. */
.spotlight-single {
  max-width: 420px;
  margin-inline: auto;
}

/* 3) Placeholder em texto para a faixa de logos de universidades
      (Seção 5) — sem arquivos de logo reais nesta rodada. */
.university-logo-item__placeholder-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy-400);
  text-align: center;
  line-height: 1.3;
  opacity: 0.75;
  transition: opacity 200ms ease, color 200ms ease;
}
.university-logo-item:hover .university-logo-item__placeholder-text,
.university-logo-item:focus-within .university-logo-item__placeholder-text {
  opacity: 1;
  color: var(--brand);
}

/* 4) Logo real da MHS (navbar / card da página de obrigado) — a imagem
      é bem mais "larga" que quadrada (monograma + wordmark lado a
      lado), então dimensiona por largura, não altura, para não ficar
      minúscula dentro dos 60px de altura pensados para o brasão
      vertical da SCLA. */
.navbar__logo {
  width: auto;
  height: auto;
  max-height: 60px;
  max-width: 240px;
  object-fit: contain;
}
@media (max-width: 767px) {
  .navbar__logo { max-height: 48px; max-width: 190px; }
}
/* SCLA tem um terceiro degrau em ≤420px (60→52→44) que a MHS não
   tinha (só 60→48) — faltava esse nível mais estreito. Mesma queda
   proporcional (~15%) aplicada ao nosso 48px, não ao 52px da SCLA,
   pra manter a logo da MHS um pouco maior em todas as larguras,
   como pedido antes. */
@media (max-width: 420px) {
  .navbar__logo { max-height: 40px; max-width: 160px; }
}
.thanks-card__logo {
  width: clamp(180px, 40vw, 260px);
  height: auto;
}

/* 9) Hero (Seção 1) — o overlay original da SCLA é um branco fixo a
      86% cobrindo a imagem inteira, pensado pra um fundo mais neutro.
      Com uma foto de campus real (outono, lago, prédios), esse branco
      quase apaga a foto por completo. Texto fica dentro de
      .hero__text (max-width:620px, alinhado à esquerda) — no desktop,
      a metade direita da foto some sem necessidade. Trocado por um
      degradê: opaco onde o texto precisa de contraste, transparente
      do lado direito pra revelar a foto. */
@media (min-width: 768px) {
  .hero__overlay {
    background: linear-gradient(
      92deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.92) 34%,
      rgba(255,255,255,.62) 54%,
      rgba(255,255,255,.22) 74%,
      rgba(255,255,255,0) 92%
    );
  }
}
/* No mobile o texto ocupa a largura toda (sem "lado livre" pra foto
   aparecer atrás dele), então um degradê horizontal não ajuda — mas o
   .hero original tem min-height:80vh, e a foto (paisagem, ~1.95:1) com
   object-fit:cover num retângulo tão alto/estreito de celular corta a
   ENORME maioria da largura da foto pra preencher a altura (sobra só
   uma fatia vertical central, ~24% da foto original numa tela comum).
   É por isso que os prédios "não aparecem direito" — a maior parte
   do que sobra depois do corte é grama/céu. Baixando a altura mínima
   do hero, a caixa fica proporcionalmente mais "paisagem" (mais perto
   da proporção da própria foto), então o corte precisa remover bem
   menos da largura — mais prédio, menos grama vazia. Isso, combinado
   com um overlay bem mais leve (o texto continua legível porque agora
   tem mais foto/menos vazio atrás, não porque o branco ficou mais
   forte), resolve os dois problemas relatados juntos. */
/* Revisão do ajuste acima, a pedido do usuário: em celulares de
   ~375–390px o texto do hero quebra em mais linhas (eyebrow em 2,
   título em 5) e passa dos 58vh. Sem folga pra centralizar, o respiro
   vira só o padding do style.css (28px em cima, 40px embaixo) e o
   eyebrow encosta na navbar. Com 48px/56px o respiro visual fica
   praticamente igual dos dois lados (embaixo leva um pouco mais porque
   o botão pesa mais que o eyebrow). O overlay de .72 também deixava o
   texto apagado: medido pixel a pixel sobre a foto atrás de cada
   linha, o subtítulo caía a 5,5:1 no pior ponto. .82 é o menor valor
   em que ele passa AAA (7:1) em todos os pixels, e a foto continua
   aparecendo. O eyebrow laranja (--accent-2) não passa de 3,65:1 nem
   sobre branco puro: ali o limite é a cor, não o overlay. */
@media (max-width: 767px) {
  .hero,
  .hero__content {
    min-height: 58vh;
  }
  .hero__content {
    padding-top: 48px;
    padding-bottom: 56px;
  }
  .hero__overlay {
    background: rgba(255,255,255,.82);
  }
}

/* 10) Seção de stats logo abaixo do hero (Seção 2) — .section aplica
       padding-block:96px (--s9) de cada lado, pensado pra seções com
       cabeçalho + parágrafos + grid. Aqui é só uma faixa de 4 números,
       e esse padding + a margem própria de .stats-grid (48px, --s7)
       faziam o bloco ocupar quase 300px de altura, a maior parte vazia.
       Reduzido pra secção ficar mais contida, do tamanho do conteúdo. */
.section--stats-compact {
  padding-block: var(--s6);
}
.section--stats-compact .stats-grid {
  margin-block: 0;
}

/* 6) Bloco de hipismo (Seção 9) — reaproveita .quote-card como card de
      destaque informativo (sem a decoração de aspas nem autor),
      apenas omitindo esses elementos no HTML; nenhuma regra nova
      é necessária além de remover a decoração de aspas herdada. */
.quote-card--callout .quote-card__decoration {
  display: none;
}

/* 8) Marcador do mapa/estado (Seção 10) — .location-state-svg__marker-dot
      e .location-map-pin__dot têm a cor vermelha da SCLA fixa em hex no
      style.css (não ligada a --brand), então precisam de override aqui.
      Usam --accent-2 (não navy): é um pino "você está aqui", ganha em
      ser um ponto de cor que chama atenção sobre o mapa claro.
      .location-state-pin-label também é reposicionado: o valor original
      (left:55%;top:64%) foi calibrado para o contorno de Minnesota da
      SCLA; com o contorno de Massachusetts (proporção/posição do marker
      diferentes) o rótulo "Pittsfield" precisa de uma posição própria,
      medida empiricamente sobre o SVG renderizado. */
.location-state-svg__marker-dot {
  fill: var(--accent-2);
}
.location-map-pin__dot {
  background: var(--accent-2);
}
/* Contorno de MA (viewBox já cortado rente à forma) cabia com sobra
   dentro do padding de 30px pensado pro contorno de Minnesota da SCLA
   — reduzido para o desenho ocupar mais a área disponível. */
.location-state-svg {
  padding: 10px;
}
/* O ajuste acima (coluna 1.5fr pro mapa do estado) resolvia sobra
   vazia dentro de uma caixa de 220px de altura — mas deixava o mapa do
   estado maior que os outros itens da seção (grade de fotos logo
   abaixo, que são 4:3). Pedido do usuário: reduzir o mapa do estado
   pro mesmo tamanho dos outros itens, mantendo a proporção do
   contorno. Solução: colunas voltam a ser iguais (1fr 1fr, o valor
   original do style.css) e o card do mapa do estado ganha
   aspect-ratio:4/3 — mesma proporção da grade de fotos — em vez de
   esticar pra acompanhar a altura de 220px do mapa Leaflet ao lado
   (align-self:start tira ele do align-items:stretch do grid pai). O
   SVG usa preserveAspectRatio="xMidYMid meet" (Seção 10, ajuste
   anterior), então o contorno nunca distorce — só fica menor, com
   mais respiro ao redor, dentro da caixa reduzida. */
@media (min-width: 900px) {
  .location-state-wrap {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    align-self: start;
  }
  .location-state-svg {
    height: 100%;
    min-height: 0;
  }
}
/* .location-state-svg__abbr (o "MA" translúcido atrás do contorno) tem
   font-size definido em unidades do viewBox, não em px de tela. O
   viewBox de Minnesota da SCLA é bem mais "largo" (152 unidades) que o
   nosso, recortado rente à forma (108 unidades) — o mesmo font-size
   de 34 acaba ocupando uma fatia proporcionalmente maior da área,
   ficando enorme e pesando na composição. Reduzido para manter a
   mesma proporção texto/largura-do-viewBox do original. */
.location-state-svg__abbr {
  font-size: 22px;
}
@media (max-width: 767px) {
  .location-state-svg__abbr {
    font-size: 18px;
  }
}
.location-state-pin-label {
  left: 9.6%;
  top: 37.5%;
}
@media (max-width: 767px) {
  .location-state-pin-label {
    left: 9%;
    top: 35%;
  }
}

/* 7) Mapa de cores de destaque (navy vs. laranja vs. dourado).
      Com --brand = navy, ícones e pequenos acentos passaram a ter
      pouco contraste contra o texto e os títulos — que também são
      navy (--navy/--navy-800, a cor de tinta neutra do site). O navy
      "sumia" ao lado do navy. Critério aplicado:

      → LARANJA (--accent-2): tudo que é ícone, número de destaque ou
        indicador pequeno — precisa de contraste pra ser notado, não
        é um bloco grande que já se destaca por tamanho/forma.
        - .text-eyebrow (base): recoloreia de uma vez os ~15 rótulos
          de seção (e consolida com o eyebrow do hero, que já usava
          --accent-2 — removida a regra duplicada específica dele)
        - Ícones: check-item (Seção 3), support-card (Seção 7),
          campuslife-card (Seção 9), includes-item (Seção 12, sobre
          fundo navy — bom contraste), ícones dos tópicos de
          Localização (Seção 10)
        - Números de destaque: .stat-card__number (base — Seção 2,
          Horizons, CSE) e .school-metrics .stat-card__number
          (Seção 6) — são os dados mais "vendedores" da página,
          ganham em chamar atenção
        - Coluna de anos na tabela EUA×Brasil (Seção 8)
        - Dots ativos do progresso do formulário
        - Marcadores do mapa (já feito no item 8 acima)

      → NAVY (--brand, sem alteração): botões primários (CTAs — já
        são blocos grandes com texto branco, se destacam por forma,
        não precisam de cor extra) e os inputs do formulário (radio/
        checkbox accent-color) — área "séria" do site, sem excesso
        de cor.

      → DOURADO (--gold-dark): reservado só pros números de
        fechamento do Horizons (Seção 4 — +75/~100/~150), o programa
        mais característico da MHS. Um acento só pra ele, distinto do
        laranja usado no resto da página.

      Também corrige 3 lugares que ainda tinham vermelho literal da
      SCLA em hex, não ligados a --brand: sombra do botão primário no
      hover, sombra de foco do progresso do formulário, e as bordas
      da tabela EUA×Brasil. */
.text-eyebrow {
  color: var(--accent-2);
}
/* .hero__eyebrow e .equiv-card__eyebrow são classes próprias (não têm
   .text-eyebrow no HTML, têm sua própria regra de cor do zero) — e
   .school-header .text-eyebrow é um seletor composto (2 classes) que
   vence a regra base acima por especificidade, mesmo carregando
   depois. Os três precisam de override explícito. */
.hero__eyebrow,
.equiv-card__eyebrow,
.school-header .text-eyebrow {
  color: var(--accent-2);
}
.check-item__icon,
.support-card__icon,
.campuslife-card__icon,
.offcampus-topics p strong i,
.seasons-topics p strong i {
  color: var(--accent-2);
}
.includes-item__icon {
  color: var(--accent-2);
}
.stat-card__number,
.school-metrics .stat-card__number {
  color: var(--accent-2);
}
.equiv-card .equiv-table td:nth-child(1) {
  color: var(--accent-2);
}
.equiv-card .equiv-table th,
.equiv-card .equiv-table td {
  border-bottom-color: rgba(32,88,141,.12);
}
.form-progress__dot.is-active,
.form-progress__dot.is-done {
  background: var(--accent-2);
}
.form-progress__dot:focus-visible {
  box-shadow: 0 0 0 3px rgba(230,87,34,.20);
}
.btn-primary:hover {
  box-shadow: 0 4px 16px rgba(32,88,141,.40);
}

/* Dourado reservado para os números de fechamento do Horizons —
   ver .stats-grid--gold no HTML da Seção 4. */
.stats-grid--gold .stat-card__number {
  color: var(--gold-dark);
}

/* 11) Horizons (Seção 4) — redesenho pedido: os cards de "os quatro
       anos" reaproveitavam .campuslife-card (pensado pra 4 fatos
       soltos e independentes, tipo "esportes/artes/liderança/WIN"),
       mas aqui o conteúdo é uma PROGRESSÃO de 4 anos — faltava
       transmitir sequência/continuidade, e cards genéricos não
       fazem isso. Trocado por uma timeline (linha conectando os
       marcadores 9th→10th→11th→12th), que é o padrão certo pra
       contar uma jornada, não uma lista. Fica dentro de
       .programs-content (a coluna de texto do .programs-layout,
       junto com "O que é o Horizons?"), sempre vertical — ocupa o
       espaço que sobrava embaixo do texto, mais curto que a foto ao
       lado (.programs-photo tem aspect-ratio 3/4, então é bem alta).
       O fechamento (75 orgs/100 estágios/150 lideranças + os dois
       parágrafos ao redor) ganhou um painel com fundo — o "chapter
       close" pedido, com a cor dourada já estabelecida como
       identidade do Horizons (mesma cor dos números).
       Intro ganhou um placeholder de foto ao lado do texto (mesmo
       padrão de .programs-layout já usado na Seção 8) — quebra o
       bloco de texto corrido e já deixa marcado onde uma foto de
       aluna em estágio/projeto do Horizons entra na Rodada 2. */
.horizons-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  margin-block: var(--s6) var(--s7);
  position: relative;
}
/* A linha é UMA SÓ, do centro do primeiro marcador ao centro do
   último — não por segmento. Uma linha reta vertical numa coluna
   onde todos os marcadores têm o mesmo X passa, por construção, por
   cima de qualquer marcador intermediário, não importa a altura de
   cada item. O que faltava era saber ONDE exatamente o primeiro e o
   último marcador ficam (isso muda conforme o texto quebra linha) —
   impossível de prever só com CSS. horizons-timeline.js mede a
   posição real na tela depois que a página carrega (e de novo se a
   janela for redimensionada) e escreve esses dois números aqui como
   variáveis CSS. Com os marcadores centralizados de verdade dentro
   do rail (align-items:center), o texto sempre alinha certinho com
   o marcador correspondente, seja o item curto ou longo. */
.horizons-timeline::before {
  content: '';
  position: absolute;
  left: 27px;
  top: var(--timeline-line-top, 28px);
  height: var(--timeline-line-height, 0px);
  width: 2px;
  background: var(--gold);
  opacity: .4;
}
.horizons-timeline__item {
  display: flex;
  gap: var(--s5);
}
.horizons-timeline__rail {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.horizons-timeline__marker {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold-subtle);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  color: var(--navy);
  position: relative;
  z-index: 1;
}
.horizons-timeline__content p {
  color: var(--navy-800);
  font-size: 15px;
  line-height: 1.6;
}
.horizons-timeline__content strong { color: var(--navy); }

.horizons-highlight {
  background: var(--gold-subtle);
  border: 1px solid rgba(217,188,44,.30);
  border-radius: var(--r-lg);
  padding: var(--s7) var(--s6);
  margin-top: var(--s7);
}
.horizons-highlight__intro,
.horizons-highlight__closing {
  color: var(--navy-800);
  font-size: 16px;
  line-height: 1.7;
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
.horizons-highlight .stats-grid {
  margin-block: var(--s6);
}
.horizons-highlight .section-cta {
  margin-top: var(--s6);
}

/* 12) Resultados (Seção 5) — remove o card de depoimento da ex-aluna
       (não vamos usar esse depoimento) e dá cor de fundo à seção
       (azul bem claro, --brand-light, já derivado do navy da MHS). */
.section--brand-tint {
  background: var(--section-tint-blue);
}

/* .university-list (Seção 5) — grid original deixa a última linha
   incompleta alinhada à esquerda quando o total de itens não é
   múltiplo exato do número de colunas (11 itens ÷ 3 ou ÷ 4 sempre
   sobra resto), abrindo um vão vazio à direita. Trocado de grid pra
   flex+wrap+justify-content:center, que centraliza qualquer linha
   incompleta automaticamente, em qualquer breakpoint. */
.university-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s5);
}
.university-list .university-logo-item {
  width: calc(50% - 12px);
}
@media (min-width: 768px) {
  .university-list .university-logo-item { width: calc(33.333% - 16px); }
}
@media (min-width: 1024px) {
  .university-list .university-logo-item { width: calc(25% - 18px); }
}

/* 13) Vida no campus (Seção 9) — redesenho pedido:
       - .campuslife-grid original vai a 4 colunas em ≥1200px; aqui ele
         mora dentro da coluna de 58% do .campuslife-layout (a MHS não
         tinha texto de abertura pra ocupar esse slot, então o grid
         assumiu o lugar), então trava em 2 colunas sempre — em 4
         ficaria espremido demais nessa largura, e o pedido era
         "2 cards por linha" mesmo.
       - Bloco de hipismo: era um .quote-card com "Bloco de hipismo"
         escrito literalmente como texto — esse rótulo nunca foi copy
         de verdade, é uma instrução de estrutura do documento (mesma
         categoria de "Texto de apoio:" ou "CTA:", que nunca apareceram
         como texto na página). Troquei pelo padrão .school-layout
         (o mesmo texto+foto já usado na Seção 6) com um heading
         "Hipismo" de verdade, e a foto/placeholder ao lado — dá o
         destaque visual que o hipismo merece (a MHS até vai ter uma
         landing page inteira dedicada a isso depois) sem o texto
         estranho. */
@media (min-width: 768px) {
  .campuslife-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 14) Vida no campus (Seção 9) — foto "sobrando" espaço vazio embaixo
       em desktop. Causa: .campuslife-layout usa align-items:start (não
       stretch, ao contrário de .school-layout), e .campuslife-photo
       tem aspect-ratio:4/3 fixo — então a foto para nessa proporção e
       não acompanha a altura real da coluna de cards ao lado (2 linhas
       de texto, mais alta que uma foto 4:3 nessa largura). Só existe
       de fato quando os cards ficam lado a lado da foto (≥1024px,
       breakpoint de .campuslife-layout virar 2 colunas) — abaixo disso
       é foto empilhada sobre os cards, onde 4:3 continua sendo a
       proporção certa. */
@media (min-width: 1024px) {
  .campuslife-layout {
    align-items: stretch;
  }
  .campuslife-photo {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* 15) Bloco de hipismo (Seção 9) — logo abaixo dos 4 .campuslife-card,
       o texto solto de .school-layout (sem fundo próprio, o mesmo
       padrão "cru" da Seção 6) parecia destoar. Classe extra só nesta
       instância (não em .school-layout em si, pra não afetar "A
       escola" na Seção 6). Padrão visual = .horizons-highlight (Seção
       4, fundo dourado clarinho + borda dourada fina) — mesma
       cor/borda/raio/padding, por pedido explícito do usuário. */
.school-layout--framed {
  background: var(--gold-subtle);
  border: 1px solid rgba(217, 188, 44, .30);
  border-radius: var(--r-lg);
  padding: var(--s7) var(--s6);
}

/* 16) A foto do hipismo "vazava" pela borda direita do card acima.
       Causa: .school-layout usa grid-template-columns:55% 45% (soma
       100%) + gap:var(--s6) a partir de ≥768px (não 1024px — era o
       breakpoint errado nesta correção antes; conferido de novo no
       style.css, o bug ficava voltando entre 768–1023px) — em CSS
       Grid, colunas em % não descontam o gap, então texto+foto juntos
       ocupam 100% da largura MAIS 32px de gap, estourando o container
       em 32px. Sem borda visível isso nunca apareceu (Seção 6 "A
       escola" tem o mesmo estouro, só que invisível); com o card novo
       do item 15, vira a foto colada/cortada na borda direita.
       Corrigido só aqui (não em .school-layout base, pra não mexer na
       Seção 6) trocando % por fr — fr já desconta o gap
       automaticamente — mantendo a mesma proporção 55/45 (11:9). */
@media (min-width: 768px) {
  .school-layout--framed {
    grid-template-columns: 11fr 9fr;
  }
}

/* 17) Mapa Leaflet (Seção 10) — o tile provider original (CartoDB,
       basemaps.cartocdn.com/light_all, forkado verbatim da SCLA) mudou
       a política do plano grátis e passou a exigir chave de API; sem
       ela, os tiles renderizam com um watermark diagonal "KEY
       REQUIRED" por cima do mapa (o mesmo provavelmente já afeta a
       SCLA em produção). Testei alternativas sem chave: OpenStreetMap
       padrão tem estilo colorido/carregado, bem diferente do visual
       "clean" da SCLA; Wikimedia bloqueia uso fora de sites da própria
       Wikimedia. A dupla Esri World_Light_Gray_Base +
       World_Light_Gray_Reference (script.js) reproduz o mesmo visual
       claro/minimalista do CartoDB original (cinza clarinho, rótulos
       discretos) sem exigir chave — pedido explícito do usuário
       ("deixe o estilo do mapa igual o da SCLA"). attributionControl
       voltou a true (estava false, copiado da SCLA) porque a Esri pede
       atribuição visível; aqui só estiliza esse crédito pra ficar
       discreto e combinar com o card arredondado do mapa. */
.location-map-wrap .leaflet-control-attribution {
  font-size: 9px;
  line-height: 1.4;
  padding: 1px 6px;
  background: rgba(255, 255, 255, .75);
  color: var(--navy-600);
}
.location-map-wrap .leaflet-control-attribution a {
  color: var(--navy-600);
}

/* 18) Faixa de logos de universidades (Seção 5) — mesmo padrão da
       SCLA: .university-logo já vem com filter:grayscale(100%) fixo
       no style.css, e a SCLA já calibra opacidade por marca quando o
       logo oficial é muito "pesado" (ex. img[src*="boston"], "mit"
       etc, em style.css) — sem isso, logos que são um bloco sólido
       preenchido (não um wordmark fino) ficam cinza-escuro quase
       preto e pesam muito mais que os outros 9 na mesma fileira.
       Dois casos assim aqui: Harvey Mudd (quadrado preto sólido,
       oficial) e Boston University (retângulo vermelho sólido,
       oficial) — mesmo tratamento, reduzindo a opacidade só desses
       dois pra equilibrar com o resto da fileira. */
.result-university-list img[src*="harveymudd"] { filter: grayscale(100%); opacity: 0.35; }
.result-university-list img[src*="/bu.png"]    { filter: grayscale(100%); opacity: 0.40; }

/* O :hover da SCLA original só existe pros logos que ela mesma
   escureceu (Harvard, MIT, NYU etc. em style.css) — os outros nunca
   tinham essa regra, então ficavam sem reação nenhuma ao mouse (só
   coloriam no :focus-within, via teclado). Ao herdar o mesmo padrão
   só pros 2 casos "pesados" daqui (item acima), os outros 9 logos da
   MHS ficaram sem hover — inconsistente ("alguns não ficam com cor
   no hover"). Um :hover só pra university-logo (universal, cobre os
   11) resolve pros dois lados de uma vez. */
.result-university-list .university-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* 19) Vida no campus (Seção 9) — .campuslife-card__title tem
       min-height:52px no style.css (reserva espaço pra até 2 linhas,
       pra manter os cards alinhados quando algum título da SCLA
       quebrava linha). Como os 4 títulos aqui agora cabem em 1 linha
       só (inclusive "10 modalidades esportivas", depois de tirar "em
       nível varsity" pro texto), essa reserva vira espaço vazio entre
       o título e a descrição — visível nos 4 cards, não só nesse
       (o mobile já não tem esse problema: style.css zera o
       min-height lá, min-height:0, só o desktop reservava). Mesmo
       ajuste aqui: título ocupa só a própria linha, sem sobra. */
@media (min-width: 768px) {
  .campuslife-card__title {
    min-height: 0;
  }
}

/* 20) Espaço grande demais em dois pontos, ambos pela mesma causa:
       .location-sub-title tem margin-top:32px no style.css, pensado
       pra separar o subtítulo de um PARÁGRAFO anterior no mesmo bloco
       (funciona bem em "Tradição", Seção 6, e "Os quatro anos",
       Seção 4, que já tem uma classe mt-s6 própria pra isso). Nos
       dois casos abaixo, porém, o subtítulo é o PRIMEIRO elemento
       dentro de um item de grid (.programs-paragraphs,
       .school-content) — margin não colapsa através da fronteira de
       um grid item, então esse margin-top de 32px SOMA com o gap que
       já existe ali (48px do .section-header acima, ou 24px do grid
       .school-layout), em vez de ser absorvido. Reduz só essas duas
       instâncias (:first-child dentro do container certo, não afeta
       "Tradição" nem "Os quatro anos"):
       - Horizons (Seção 4): "O que é o Horizons?" logo abaixo do H2 —
         80px de vão (48+32) virando 48px.
       - Hipismo (Seção 9, framed): "Hipismo" logo abaixo da foto no
         mobile empilhado — 56px de vão (24+32) virando 24px.
       Complementar: o último parágrafo do bloco de Hipismo também
       tinha margin-bottom:16px sobrando antes do padding do próprio
       card (48px) — mesma causa (grid item não colapsa margin),
       resultando em 64px de vazio embaixo em vez dos 48px pretendidos
       pelo padding. */
.programs-paragraphs > .location-sub-title:first-child,
.school-layout--framed .school-content > .location-sub-title:first-child {
  margin-top: 0;
}
.school-layout--framed .school-paragraphs p:last-child {
  margin-bottom: 0;
}