/* ═══════════════════════════════════════════════════════════════════════════
   home-ferias.css — Transotel.Web
   Ubicacion: Transotel.Web/wwwroot/css/home-ferias.css

   LOTE FERIAS · PUNTO C · Proximas ferias en la portada. Fichero NUEVO.

   Solo lo carga Index.cshtml, y solo cuando sale la seccion #proximas-ferias.
   La seccion usa las clases de siempre de la portada (section, container,
   section-header, divider, lead), asi que su cabecera es igual que las demas.
   Aqui solo van las tarjetas, y todo cuelga del prefijo .hf-: no redefine
   nada de site.css, home-reserva.css, home-contacto.css ni video-short.css.

   Una columna en movil; desde 640 px, las tarjetas se reparten en fila.
   Colores de marca: #008572 fondos · #dfbb3e botones.
   ═══════════════════════════════════════════════════════════════════════════ */

#proximas-ferias {
    --hf-verde:       #008572;
    --hf-verde-osc:   #00544a;
    --hf-oro:         #dfbb3e;
    --hf-oro-osc:     #c9a52f;
    --hf-oro-claro:   #fbf4dd;
    --hf-tinta:       #16221f;
    --hf-tinta-suave: #55635f;
    --hf-linea:       #d8e2df;
    --hf-radio:       16px;
}


/* ── Rejilla ────────────────────────────────────────────────────────────── */

.hf-lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 2rem auto 0;
    padding: 0;
    list-style: none;
}

/* Con una sola feria, la tarjeta no se estira a todo el ancho. */
.hf-lista--una { max-width: 520px; }

@media (min-width: 640px) {
    .hf-lista { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}


/* ── Tarjeta ────────────────────────────────────────────────────────────── */
/*    Un solo enlace por tarjeta (el de abajo). Su ::after la cubre entera,
      asi se puede pulsar en cualquier sitio sin repetir enlaces.          */

.hf-feria {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--hf-linea);
    border-radius: var(--hf-radio);
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    text-align: left;
    transition: border-color .15s ease;
}

.hf-feria:hover { border-color: var(--hf-oro); }

.hf-feria__foto { margin: 0; }

.hf-feria__foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #e6f2f0;
}

.hf-feria__foto figcaption {
    padding: .55rem 1.2rem 0;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--hf-tinta-suave);
}

.hf-feria__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem 1.2rem 1.3rem;
}

.hf-feria__cuenta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .45rem;
    margin: 0;
    padding: .25rem .8rem;
    border-radius: 999px;
    background: var(--hf-oro-claro);
    color: #7a5f06;
    font-size: .85rem;
    font-weight: 700;
}

.hf-feria__nombre {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--hf-verde-osc);
}

.hf-feria__datos {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.1rem;
    margin: 0;
    font-size: .93rem;
    color: var(--hf-tinta-suave);
}

.hf-feria__datos span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.hf-feria__datos i { color: var(--hf-verde); }

/* Esquinas de 14 px y no de pastilla: con nombres largos o en aleman el
   texto puede ir en dos lineas, y una pastilla de dos lineas se ve rota. */
.hf-feria__enlace {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .55rem;
    margin-top: auto;
    padding: .75rem 1.25rem;
    border-radius: 14px;
    background: var(--hf-oro);
    color: var(--hf-tinta);
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    text-wrap: balance;
    transition: background-color .15s ease;
}

/* En movil el boton ocupa todo el ancho de la tarjeta. */
@media (max-width: 639.98px) {
    .hf-feria__enlace {
        align-self: stretch;
        justify-content: center;
        text-align: center;
    }
}

/* El enlace cubre toda la tarjeta. */
.hf-feria__enlace::after {
    content: "";
    position: absolute;
    inset: 0;
}

.hf-feria:hover .hf-feria__enlace,
.hf-feria__enlace:focus-visible {
    background: var(--hf-oro-osc);
    color: var(--hf-tinta);
}

.hf-feria__enlace:focus-visible {
    outline: 3px solid var(--hf-verde);
    outline-offset: 3px;
}

/* Con el teclado, el foco se ve en la tarjeta entera. */
.hf-feria:has(.hf-feria__enlace:focus-visible) {
    border-color: var(--hf-verde);
    box-shadow: 0 0 0 3px rgba(0, 133, 114, .25);
}


/* ── Enlace a todas las ferias ──────────────────────────────────────────── */

.hf-todas {
    margin: 1.8rem 0 0;
    text-align: center;
}

.hf-todas a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--hf-verde-osc);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hf-todas a:hover,
.hf-todas a:focus-visible { color: var(--hf-verde); }

.hf-todas a:focus-visible {
    outline: 3px solid var(--hf-oro);
    outline-offset: 3px;
    border-radius: 6px;
}


/* ── Preferencias del visitante ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .hf-feria,
    .hf-feria__enlace { transition: none; }
}

@media print {
    .hf-feria { box-shadow: none; break-inside: avoid; }
    .hf-feria__enlace { background: none; padding: 0; text-decoration: underline; }
    .hf-feria__enlace::after { display: none; }
}