/*
 * E-Iure — página Conventions (maqueta «Conventions — C»). Se carga después de home.css e inner.css.
 */

.conventions-page{--gold-soft:#E2C47E}

/* Banner: distintivo «en familia» */
.eh .mhero .family{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:60px;padding:7px 16px;font-size:13px;font-weight:600;margin-top:28px}
.eh .mhero .family span{color:var(--gold-soft)}

.eh .clist-section{padding:70px 0 90px}

/* Sello con el número de convención: une todas las tarjetas */
.eh .seal{display:inline-flex;align-items:flex-start;justify-content:center;font-family:var(--serif);font-weight:600;color:var(--gold-soft);line-height:1;letter-spacing:-.01em}
.eh .seal sup{font-size:.42em;font-weight:500;margin:.12em 0 0 .06em;letter-spacing:.02em}

/* PRÓXIMA CONVENCIÓN */
.eh .nextbox{background:var(--ink);color:#fff;border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;margin-bottom:64px}
.eh .nextim{position:relative;min-height:340px;background:#1c2a1a}
.eh .nextim img,.eh .nextim .noimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.eh .nextbd{padding:clamp(28px,4vw,50px);position:relative}
.eh .nextbd .kicker{color:var(--gold-soft);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.eh .nextbd .seal-lg{position:absolute;top:clamp(22px,3vw,40px);right:clamp(22px,3vw,40px);width:84px;height:84px;border-radius:50%;align-items:center;font-size:32px;border:1px solid rgba(201,162,77,.75);box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px rgba(201,162,77,.45)}
.eh .nextbd h2{color:#fff;font-size:clamp(34px,4.6vw,56px);margin:10px 0 6px;padding-right:96px}
.eh .nextbd .meta{color:rgba(255,255,255,.85);font-size:16px}
.eh .cd{display:flex;gap:12px;margin:26px 0 20px;flex-wrap:wrap}
.eh .cd div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:12px 16px;text-align:center;min-width:76px}
.eh .cd b{font-family:var(--serif);font-weight:500;font-size:30px;display:block;line-height:1;font-variant-numeric:tabular-nums}
.eh .nextbd .tbc{display:inline-flex;align-items:center;gap:10px;margin:26px 0 20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:14px 20px;font-weight:600;font-size:15px;color:#fff}
.eh .nextbd .tbc span{color:var(--gold-soft);font-size:18px;line-height:1}
.eh .cd small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.eh .nextbd .note{color:rgba(255,255,255,.85);max-width:44ch}
.eh .nextbd .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.eh .nextbd .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.eh .nextbd .btn.ghost:hover{background:var(--green-light);color:var(--ink);border-color:var(--green-light)}
/* Sin próxima convención cargada: bloque «Coming soon» con el contador a 0 */
.eh .nextbox.tba .nextim .noimg{background:radial-gradient(60% 70% at 30% 30%,#2f7d4a 0%,transparent 60%),radial-gradient(55% 65% at 75% 70%,#7AC956 0%,transparent 55%),#0f2e1e;display:flex;align-items:center;justify-content:center}
.eh .nextbox.tba .tba-mark{font-family:var(--serif);font-size:clamp(40px,6vw,72px);color:rgba(255,255,255,.18);letter-spacing:.04em}
.eh .nextbox.tba .cd b{color:rgba(255,255,255,.55)}

/* FILTRO POR AÑOS */
.eh .filters{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.eh .list-title{font-size:clamp(28px,3.6vw,42px)}
.eh .filters .chip{padding:7px 15px;font-size:13.5px}

/* LISTADO: colección de tarjetas con el mismo tratamiento de imagen */
.eh .cgrid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.eh .ccard{position:relative;display:block;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#1c2a1a;isolation:isolate;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.eh .ccard .cimg,.eh .ccard .noimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.86) contrast(1.06) brightness(.93);transition:transform .6s ease}
.eh .ccard .noimg{background:linear-gradient(160deg,#2f7d4a,#0f2e1e)}
/* Tono común (velo verde muy suave) + degradado para que se lean ciudad y fechas */
.eh .ccard::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(10,26,17,.45) 0%,rgba(10,26,17,0) 28%,rgba(10,26,17,0) 45%,rgba(8,18,12,.86) 100%),
  linear-gradient(0deg,rgba(15,46,30,.14),rgba(15,46,30,.14))}
.eh .ccard .seal{position:absolute;top:14px;left:14px;width:60px;height:60px;border-radius:50%;align-items:center;font-size:23px;background:rgba(8,18,12,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:1px solid rgba(201,162,77,.8);box-shadow:inset 0 0 0 3px rgba(8,18,12,.45),inset 0 0 0 4px rgba(201,162,77,.4)}
.eh .ccard .cinfo{position:absolute;left:20px;right:20px;bottom:18px;color:#fff}
.eh .ccard .ccity{display:block;font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.1;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.eh .ccard .cmeta{display:block;margin-top:6px;font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.88)}
.eh .ccard:hover .cimg,.eh .ccard:focus-visible .cimg{transform:scale(1.05)}
.eh .ccard:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.eh .empty{padding:20px 0;color:#8a8478;text-align:center}

@media(max-width:1024px){.eh .cgrid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
  .eh .nextbox{grid-template-columns:1fr}
  .eh .nextim{min-height:240px}
  .eh .cgrid{grid-template-columns:1fr}
}
/* ---------------------------------------------------------------------------
   CONVENTIONS EN MÓVIL
   Era la página más larga del sitio con diferencia: dieciocho pantallas, de las
   cuales el listado de 44 convenciones ocupaba el 84 %. Aquí se reorganiza sin
   quitar contenido: las 44 siguen estando, y los 24 años del filtro también.
   Todo por debajo de 560 px; el escritorio y el corte de 820 px no se tocan.
   --------------------------------------------------------------------------- */
@media(max-width:560px){
  /* ----- Cabecera ----- */
  .eh .conventions-page .mhero{padding:54px 0 40px}
  .eh .conventions-page .mhero h1{font-size:38px}
  .eh .conventions-page .mhero p{font-size:15.5px;line-height:1.55;margin-top:12px}
  .eh .conventions-page .mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:0 10px;margin-top:22px}
  .eh .conventions-page .mstats b{font-size:26px}
  .eh .conventions-page .mstats small{font-size:10.5px;letter-spacing:.06em}
  .eh .mhero .family{margin-top:18px;padding:6px 13px;font-size:11.5px}

  .eh .clist-section{padding:42px 0}

  /* ----- Próxima convención -----
     Foto más baja para que no se coma la pantalla antes del texto, y la cuenta
     atrás en rejilla de tres iguales: sueltos, los recuadros tenían anchos
     distintos según el número que mostraban y quedaban descuadrados. */
  .eh .nextbox{border-radius:18px;margin-bottom:28px}
  .eh .nextim{min-height:180px}
  .eh .nextbd{padding:20px 16px}
  .eh .nextbd .seal-lg{top:16px;right:16px;width:58px;height:58px;font-size:22px;
    box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4px rgba(201,162,77,.45)}
  .eh .nextbd h2{font-size:30px;margin:8px 0 5px;padding-right:70px}
  .eh .nextbd .meta{font-size:14px}
  .eh .cd{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 14px}
  .eh .cd div{padding:9px 6px;border-radius:10px;min-width:0}
  .eh .cd b{font-size:24px}
  .eh .cd small{font-size:10.5px;letter-spacing:.06em}
  .eh .nextbd .tbc{margin:16px 0 14px;padding:11px 16px;font-size:14px}
  .eh .nextbd .note{font-size:14px;line-height:1.55}
  .eh .nextbd .actions{margin-top:16px;gap:10px}
  .eh .nextbd .actions .btn{flex:1 1 100%;justify-content:center;padding:12px 20px;font-size:14px}

  /* ----- Filtro por años -----
     Veinticuatro botones ocupaban cinco renglones. El desplegable lo crea
     conventions.js solo en móvil y al elegir un año pulsa el botón que
     corresponde, así que filtra exactamente igual. */
  .eh .filters{gap:12px;margin-bottom:16px}
  .eh .list-title{font-size:26px}
  .eh .filters .chips{display:none}
  .eh .yearsel{display:block;width:100%;appearance:none;-webkit-appearance:none;
    font:600 14px var(--sans);color:var(--ink);background-color:#fff;
    border:2px solid var(--green);border-radius:60px;padding:11px 42px 11px 18px;cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F7A2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;background-size:15px}
  .eh .yearsel:focus{outline:none;box-shadow:0 0 0 4px rgba(122,201,86,.25)}

  /* ----- Listado: dos por fila -----
     Medido con las 44 fichas: a una columna el listado ocupa 12 760 px; a dos
     columnas en 4:3, 3081 px. Comparé también la ficha cuadrada (4038 px) y se
     lee igual de bien en 4:3, así que gana la más corta. */
  .eh .cgrid{grid-template-columns:1fr 1fr;gap:10px}
  .eh .ccard{aspect-ratio:4/3;border-radius:14px}
  .eh .ccard .seal{top:8px;left:8px;width:36px;height:36px;font-size:14px;
    box-shadow:inset 0 0 0 2px rgba(8,18,12,.45),inset 0 0 0 3px rgba(201,162,77,.4)}
  .eh .ccard .cinfo{left:11px;right:11px;bottom:10px}
  .eh .ccard .ccity{font-size:16px;line-height:1.1}
  .eh .ccard .cmeta{margin-top:3px;font-size:10px;line-height:1.3}
}

@media(prefers-reduced-motion:reduce){.eh .ccard .cimg{transition:none}}