/*
 * Tablón de anuncios (/:locale/classifieds). Se carga solo en su página
 * (content_for :head), como blog.css. Tokens de base.css/public.css: Fraunces en
 * los títulos, Hanken Grotesk en el texto, --cream, --ink, --line.
 */
.cls{max-width:var(--maxw);margin:0 auto;padding:44px 34px 88px}
.cls-head{max-width:46rem;margin:0 0 30px}
.cls-head h1{font-size:clamp(2.4rem,5vw,3.6rem);margin:0 0 12px}
.cls-head p{margin:0;color:var(--ink-soft);font-size:1.12rem}
.cls-head .cls-publish{margin-top:14px;font-size:.98rem}
.cls-publish a{color:var(--maroon);font-weight:600;text-underline-offset:3px}
.cls-publish a:hover{color:var(--ink)}

/* Filtro de país: píldoras-enlace, la activa en tinta. */
.cls-filter{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 40px}
.cls-chip{border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.95rem;color:var(--ink-soft);text-decoration:none;white-space:nowrap}
.cls-chip:hover{border-color:var(--ink-soft);color:var(--ink)}
.cls-chip[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cls-chip:focus-visible{outline:3px solid var(--action);outline-offset:2px}

.cls-empty{color:var(--ink-soft)}

.cls-group + .cls-group{margin-top:56px}
.cls-group h2{font-size:1.75rem;margin:0 0 18px}
.cls-list{list-style:none;margin:0;padding:0;display:grid;gap:18px;max-width:52rem}

.cls-item{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 26px}
.cls-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 12px}
.cls-school{font-weight:700;color:var(--ink);text-decoration:none;font-size:1.05rem}
.cls-school:hover{text-decoration:underline;text-underline-offset:4px}
.cls-place{color:var(--greige);font-size:.9rem}
/* El texto es de la escuela: largo, con párrafos y a veces con URLs o emails
   pegados que no tienen dónde partirse. */
.cls-body{color:var(--ink);line-height:1.6;overflow-wrap:anywhere}
.cls-body p{margin:0 0 .8em}
.cls-body p:last-child{margin-bottom:0}
.cls-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--cream-2);font-size:.92rem}
.cls-contact a{color:var(--maroon);font-weight:600;text-underline-offset:3px;overflow-wrap:anywhere}
.cls-contact a:hover{color:var(--ink)}
.cls-date{color:var(--greige)}

@media(max-width:860px){
  .cls{padding:32px 16px 64px}
  .cls-item{padding:18px 18px}
}