/**
 * JobFlexy City Grid — shortcode [jf_city_grid] "Variante B".
 * Adaptado de la maqueta aprobada (mock-grid-ciudades.html), prefijo .jf-cg-.
 * SIN font-family: los headings y textos heredan las fuentes del tema (Roboto Slab en <h2>).
 * Todo el CSS se ancla en `.jf-cg` para ganar en especificidad a los estilos de enlace del
 * tema (`.entry-content a` = 0,1,1) y no ser sobreescrito dentro del contenido.
 */
.jf-cg{
    --jfcg-card:#fff;
    --jfcg-ink:#1e2a4a;
    --jfcg-muted:#66708a;
    --jfcg-line:#e6e4de;
    --jfcg-accent:#f58220;
    --jfcg-chipbg:#fff;
    margin-bottom:52px; /* separación del footer (que el grid no se pegue abajo) */
}
.jf-cg *{box-sizing:border-box}
.jf-cg .jf-cg-h2{margin:22px 0 12px}

/* --- Cards destacadas (3×2) --- */
.jf-cg .jf-cg-feat32{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.jf-cg .jf-cg-fcard{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/3.4;display:block;color:#fff;text-decoration:none;box-shadow:0 2px 10px rgba(20,25,39,.10)}
.jf-cg .jf-cg-fcard img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:cover;margin:0;padding:0;border:0;border-radius:0;transition:transform .3s}
.jf-cg .jf-cg-fcard:hover img{transform:scale(1.04)}
.jf-cg .jf-cg-fcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,25,39,0) 40%,rgba(20,25,39,.84) 100%)}
.jf-cg .jf-cg-fmeta{position:absolute;left:13px;right:11px;bottom:11px;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;flex-wrap:wrap}
/* Única excepción a "sin font-family": replica la maqueta usando la fuente de headings
   del tema (Roboto Slab), ya cargada en estas páginas. */
.jf-cg .jf-cg-fname{font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:1.05em;line-height:1.2;color:#fff}
.jf-cg .jf-cg-fcount{font-size:.76em;color:#ffd7b0;font-weight:600;white-space:nowrap}
.jf-cg .jf-cg-fcount b{color:#c65f00;background:#fff;border-radius:99px;padding:1px 7px;margin-right:4px}

/* --- Pills --- */
.jf-cg .jf-cg-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}
.jf-cg .jf-cg-pill{display:flex;align-items:center;gap:7px;background:var(--jfcg-chipbg);border:1px solid var(--jfcg-line);border-radius:10px;padding:8px 11px;text-decoration:none;color:var(--jfcg-ink);transition:border-color .15s,box-shadow .15s}
.jf-cg .jf-cg-pill:hover{border-color:var(--jfcg-accent);box-shadow:0 2px 8px rgba(245,130,32,.15)}
.jf-cg .jf-cg-pin{color:var(--jfcg-muted);display:flex;flex:0 0 auto}
.jf-cg .jf-cg-pin svg{display:block}
.jf-cg .jf-cg-nm{flex:1 1 auto;font-weight:600;font-size:.88em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jf-cg .jf-cg-ct{color:var(--jfcg-accent);font-weight:700;font-size:.82em;font-variant-numeric:tabular-nums}
.jf-cg .jf-cg-ar{color:var(--jfcg-muted);display:flex;flex:0 0 auto}
.jf-cg .jf-cg-ar svg{display:block}
.jf-cg .jf-cg-pill:hover .jf-cg-ar{color:var(--jfcg-accent)}

/* --- Toggle USA (CSS-only, checkbox hack; los 43 enlaces SIEMPRE en el DOM) --- */
.jf-cg .jf-cg-toggle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.jf-cg .jf-cg-toggle:focus-visible ~ .jf-cg-more{outline:2px solid var(--jfcg-accent);outline-offset:3px}
/* Contenedor colapsable de las pills USA 10-43: apertura/cierre suave con animación
   grid-rows (0fr→1fr), sin JS. Colapsado: sin altura, invisible y NO focusable
   (visibility:hidden lo saca del tab order); los 43 <a> siguen SIEMPRE en el DOM. */
.jf-cg .jf-cg-us-rest{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .45s ease, opacity .4s ease, visibility 0s .45s}
.jf-cg .jf-cg-us-rest-in{overflow:hidden;min-height:0}
.jf-cg .jf-cg-toggle:checked ~ .jf-cg-us-rest{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .45s ease, opacity .4s ease, visibility 0s 0s}
@media (prefers-reduced-motion:reduce){.jf-cg .jf-cg-us-rest{transition:none}}
/* Botón CTA de marca (línea editorial del sitio): naranja sólido, texto blanco, centrado.
   Es el <label> del checkbox-hack — solo cambia su presentación; el mecanismo sigue intacto. */
.jf-cg .jf-cg-more{display:block;width:fit-content;margin:18px auto 0;padding:12px 26px;background:#f58220;color:#fff;font-weight:700;font-size:.95em;line-height:1.2;border-radius:9px;text-align:center;text-decoration:none;cursor:pointer;transition:filter .15s}
.jf-cg .jf-cg-more:hover{filter:brightness(.94)}
.jf-cg .jf-cg-more-close{display:none}
.jf-cg .jf-cg-toggle:checked ~ .jf-cg-more .jf-cg-more-open{display:none}
.jf-cg .jf-cg-toggle:checked ~ .jf-cg-more .jf-cg-more-close{display:inline}

/* --- Responsive: 3 columnas → 2 en móvil (cards y pills) --- */
@media (max-width:760px){
    .jf-cg .jf-cg-feat32{grid-template-columns:repeat(2,1fr)}
    .jf-cg .jf-cg-pgrid{grid-template-columns:repeat(2,1fr)}
}