/* Todo scopeado para no chocar con WordPress */
.sx-top-schools{
  --sx-card:#fff; --sx-text:#0f172a; --sx-muted:#64748b;
  --sx-brand:#0a73ff; --sx-accent:#fff3cd; --sx-shadow:0 8px 24px rgba(0,0,0,.08);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  color:var(--sx-text);
}

.sx-top-schools .sx-header{max-width:1100px;margin:32px auto 10px;padding:0 16px}
.sx-top-schools .sx-h1{margin:0 0 6px;font-weight:800;font-size:clamp(28px,3vw,40px)}
.sx-top-schools .sx-year{color:var(--sx-brand)}
.sx-top-schools .sx-sub{margin:0;color:var(--sx-muted)}

.sx-top-schools .sx-list{max-width:1100px;margin:0 auto 60px;padding:0 16px;display:grid;gap:18px}

/* Card */
.sx-top-schools .sx-card{
  display:grid;
  grid-template-columns:240px 1fr;      /* columna izquierda para imagen */
  gap:18px;
  background:var(--sx-card);
  border-radius:18px;
  box-shadow:var(--sx-shadow);
  overflow:hidden;
  align-items:stretch;                  /* imagen se estira al alto de la card */
}

/* Imagen como background para evitar conflictos de lazy-load */
.sx-top-schools .sx-thumb{
  background:#e9edf5 center/cover no-repeat;
  background-image:var(--sx-bg);
  inline-size:100%;
  block-size:100%;
  min-block-size:100%;
  display:block;
}

/* Contenido */
.sx-top-schools .sx-content{padding:16px}
.sx-top-schools .sx-content > :first-child{margin-top:0 !important}
.sx-top-schools .sx-h2{margin:4px 0 8px !important;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sx-top-schools .sx-rank{font-weight:900;font-size:22px;color:#d12e2e}
.sx-top-schools .sx-title{font-weight:800;font-size:clamp(20px,2.2vw,28px);color:#0b2b6f;text-decoration:underline}

.sx-top-schools .sx-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--sx-muted);font-weight:500}
.sx-top-schools .sx-address{padding:6px 10px;background:#eff4fb;border-radius:10px}

/* Rating compacto */
.sx-top-schools .sx-rating{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;font-size:.95rem;background:var(--sx-accent);border:1px solid #ffe08a;border-radius:10px}
.sx-top-schools .sx-star{font-weight:700;line-height:1}

/* Verified */
.sx-top-schools .sx-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:#e8f8ef;color:#1a7f42;border:1px solid #bfe9cf;border-radius:10px}
.sx-top-schools .sx-badge::after{content:"✓";font-weight:900;margin-left:4px}

.sx-top-schools .sx-desc{margin:12px 0 8px}

.sx-top-schools .sx-tabs{display:flex;gap:16px;border-top:2px solid #eef2f6;padding-top:10px}
.sx-top-schools .sx-tab{font-weight:700;color:#173b8f;opacity:.9;position:relative}
.sx-top-schools .sx-tab:hover{opacity:1}
.sx-top-schools .sx-tab.is-active{color:#000}
.sx-top-schools .sx-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:3px;background:var(--sx-brand)}

.sx-top-schools .sx-footer{text-align:center;color:#94a3b8;padding:20px 0 40px}

/* ======= Responsive ======= */
@media (max-width:720px){
  .sx-top-schools .sx-list{padding:0}
  .sx-top-schools .sx-card{grid-template-columns:1fr;gap:0;border-radius:18px}
  /* en móvil usamos 16:9 para evitar saltos y huecos */
  .sx-top-schools .sx-thumb{block-size:auto;aspect-ratio:16/9}
  .sx-top-schools .sx-content{padding:14px 16px 16px}
  .sx-top-schools .sx-h2{margin:6px 0 6px !important}
}

/* Fallback si el navegador no soporta aspect-ratio */
@supports not (aspect-ratio:1/1){
  @media (max-width:720px){
    .sx-top-schools .sx-thumb{height:210px}
  }
}