/*
 * «Nuestro monumento» del socio (12 oct 2026, docs/monumento.md; rediseño
 * del 19 oct 2026; sin cajas, 5 nov): el de este año con la primera foto de
 * portada y el lema encima, las demás en una tira, la ficha, los premios y los
 * ninots; debajo, los de otros años.
 *
 *  1. Cada monumento y su portada
 *  2. La ficha, los premios y los ninots
 *  3. Medallas
 *  4. Otros años
 *
 * Convenciones: cada pieza lleva sus ajustes de móvil justo debajo.
 */

/* #region 1. Cada monumento y su portada */
.mi-monumento {
    display: grid;
    gap: var(--espacio-5);
    margin-bottom: var(--espacio-12);
}

.mi-monumento[hidden] {
    display: none;
}

.mi-monumento p {
    margin: 0;
}

.mi-monumento > h2,
.mi-monumento__bloque h3 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.25rem, 1.6vw, 1.6rem);
    font-weight: 650;
    letter-spacing: -0.025em;
}

/* Las fotos: la portada a todo lo ancho y las demás en una tira que se desliza (se ven juntas en el visor). */
.mi-monumento__fotos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--espacio-2);
    margin: calc(-1 * var(--espacio-1)) 0 0;
    padding: 0;
    list-style: none;
}

.mi-monumento__fotos a {
    display: block;
    height: 100%;
}

.mi-monumento__fotos img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radio-md);
    object-fit: cover;
}

.mi-monumento__portada {
    position: relative;
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radio-lg);
}

.mi-monumento__portada img {
    border-radius: 0;
}

/* Sin foto: una franja en el color de la asociación, con la llama. */
.mi-monumento__portada--sin-foto {
    display: grid;
    place-items: start end;
    aspect-ratio: auto;
    min-height: 10rem;
    padding: var(--espacio-4);
    background: linear-gradient(135deg, var(--marca-boton), color-mix(in srgb, var(--marca-boton) 55%, #000000));
}

.mi-monumento__portada-icono .icono {
    width: 48px;
    height: 48px;
    color: color-mix(in srgb, var(--marca-sobre-boton) 60%, transparent);
}

/* El monumento, el año y el lema, abajo sobre la foto, con una sombra que los deja leer. */
.mi-monumento__portada-textos {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: var(--espacio-1);
    padding: var(--espacio-8) var(--espacio-5) var(--espacio-4);
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.72));
    color: #FFFFFF;
    pointer-events: none;
}

.mi-monumento__portada-textos p {
    font-weight: 500;
    opacity: 0.9;
}

.mi-monumento__portada-textos h2 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.75rem, 3vw, 3rem);
    letter-spacing: -0.03em;
    font-style: italic;
    line-height: 1.15;
    color: #FFFFFF;
    text-wrap: balance;
}

.mi-monumento__miniatura {
    aspect-ratio: 1;
}

@media (max-width: 767px) {
    .mi-monumento__fotos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mi-monumento__portada:not(.mi-monumento__portada--sin-foto) {
        aspect-ratio: 4 / 3;
    }

    .mi-monumento__portada-textos {
        padding: var(--espacio-6) var(--espacio-4) var(--espacio-3);
    }

    .mi-monumento__portada-textos h2 {
        font-size: 1.375rem;
    }
}
/* #endregion */

/* #region 2. La ficha, los premios y los ninots */
/* La ficha: qué es y el dato, sin cajas. */
.mi-monumento__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--espacio-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mi-monumento__datos:empty {
    display: none;
}

.mi-monumento__datos li {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.mi-monumento__datos small {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.mi-monumento__datos strong {
    font-size: var(--texto-grande);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mi-monumento__bloque {
    display: grid;
    gap: var(--espacio-3);
}

.mi-monumento__premios,
.mi-monumento__piezas {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mi-monumento__premios li {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.mi-monumento__explicacion {
    padding-bottom: var(--espacio-3);
    line-height: 1.6;
}

/* Los ninots: cada uno en su ficha con su foto. */
.mi-monumento__piezas {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    padding-bottom: var(--espacio-2);
}

.mi-monumento__pieza {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: var(--espacio-3);
}

.mi-monumento__pieza > span {
    display: grid;
    gap: 2px;
    justify-items: start;
}

.mi-monumento__pieza img,
.mi-monumento__sin-foto {
    width: 64px;
    height: 64px;
    border-radius: var(--radio-sm);
    object-fit: cover;
}

.mi-monumento__sin-foto {
    display: grid;
    place-items: center;
    color: var(--marca-acento);
}

@media (max-width: 767px) {
    /* De dos en dos: la ficha cabe en una pantalla. */
    .mi-monumento__datos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* #endregion */

/* #region 3. Medallas */
.mi-monumento__medalla {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca-acento) 10%, var(--rs-superficie-1));
    color: var(--marca-acento);
    font-size: var(--texto-pequeno);
    font-weight: 800;
}

.mi-monumento__medalla .icono {
    width: 14px;
    height: 14px;
}

.mi-monumento__medalla--1 {
    background: #F5D76E;
    color: #5C4300;
}

.mi-monumento__medalla--2 {
    background: #D9DDE3;
    color: #33404D;
}

.mi-monumento__medalla--3 {
    background: #E7B48A;
    color: #5A2F0E;
}
/* #endregion */

/* #region 4. Otros años */
.mi-monumento__galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--espacio-3);
}

.mi-monumento__anterior {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    gap: var(--espacio-3);
}

.mi-monumento__anterior > span {
    display: grid;
    gap: 2px;
}

.mi-monumento__anterior img,
.mi-monumento__anterior .mi-monumento__sin-foto {
    width: 88px;
    height: 110px;
    border-radius: var(--radio-sm);
    object-fit: cover;
}

.mi-monumento__anterior .mi-monumento__premios {
    margin-top: var(--espacio-2);
}
/* #endregion */