/*** Promo grid ****/

.promo-grid {
    padding: 40px 0 20px;
}

.promo-grid .container {
    display: grid;
    gap: 18px;
    grid-template-columns:
        1.1fr 2fr 1fr 1fr;
    grid-template-rows:
        repeat(2, 200px);
}

.container_header_section {
    width: 100%;
    max-width: var(--max-page-width);
    padding: 0 var(--padding-x) 18px;
    margin: 0 auto;
}

.container_header_section h2 {
    margin: 0;
    font-family: var(--header-font);
    font-size: var(--h3-size);
    line-height: 1;
    text-transform: uppercase;
    color: var(--bazinga-light);
}

/****************************/

.promo-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
}

/****************************/

.promo-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .7s ease,
        filter .5s ease;
}

/****************************/

.promo-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, .65),
            rgba(0, 0, 0, .15));
    transition: .45s;
}

/****************************/

.promo-card .content {
    position: relative;
    z-index: 2;
    padding: 28px;
}

.promo-card .content span {
    display: block;
    opacity: .75;
    margin-bottom: 6px;
    color: var(--bazinga-gold);
}

.promo-card .content h2 {
    font-size: 42px;
    margin: 0;
    font-family: var(--header-font);
}

.promo-card .content h3 {
    margin: 0;
    font-size: 36px;
    font-family: var(--header-font);
    line-height: 1;
}

/****************************/

/*
 * La flecha se ve por defecto y solo se esconde donde hay hover de verdad.
 *
 * Estaba al revés: `opacity: 0` de base y visible al pasar el ratón, así que
 * en un móvil no aparecía nunca. Era una indicación que solo veía quien no la
 * necesitaba. Invertirlo hace que el caso seguro no dependa de detectar nada:
 * cualquier dispositivo que no case `(hover: hover)` la ve.
 */
.arrow {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    color: #111;
    display: grid;
    place-items: center;
    font-size: 24px;
    opacity: .92;
    transition: .35s;
    z-index: 3;
}

@media (hover: hover) {

    .promo-card .arrow {
        right: 24px;
        bottom: 24px;
        width: 52px;
        height: 52px;
        transform: translateY(20px);
        opacity: 0;
    }
}

/****************************/

.promo-card:hover img {
    transform: scale(1.08);
}

.promo-card:hover .overlay {
    background: linear-gradient(to top,
            rgba(0, 0, 0, .78),
            rgba(0, 0, 0, .35));
}

@media (hover: hover) {

    .promo-card:hover .arrow {
        opacity: 1;
        transform: translateY(0);
    }
}

.promo-card:hover .content {
    transform: translateY(-6px);
}

.promo-card .content {
    transition: .4s;
}

/****************************/

.intro {
    background: #b3872d;
    color: #073b39;
    align-items: flex-start;
}

.intro .content {
    padding: 40px;
}

.intro p {
    margin-top: 20px;
    max-width: 220px;
}

/****************************/

.promo-card.large {
    grid-column: 2;
    grid-row: 1 / span 2;

}

.promo-card.tall {
    grid-column: 4;
    grid-row: 1 / span 2;
}

/* =========================
   ADAPTACIÓN
   -------------------------
   El reset de las tarjetas grandes se escribe con las dos clases,
   `.promo-card.large`, y no con `.large` a secas.

   Ese detalle era el fallo: la regla base tiene dos clases y el reset tenía
   una, así que perdía por especificidad y `grid-column: 2` seguía en pie por
   debajo de 1100px. Con una sola columna explícita, las tarjetas colocadas en
   las columnas 2 y 4 creaban columnas implícitas, la explícita se quedaba sin
   espacio —0px medidos— y los títulos salían recortados dentro de tarjetas de
   101px. La media query siempre estuvo bien; lo que no ganaba era el selector.
========================= */

@media (max-width: 1100px) {

    .promo-grid .container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    /*
     * Un alto mínimo para todas. Las filas fijas de 200px del maquetado de
     * escritorio se sueltan aquí, y sin esto las tarjetas sin clase de tamaño
     * se quedaban en el alto de su texto —124px medidos— junto a otras de
     * 350px, con la rejilla desigual.
     */
    .promo-card,
    .promo-card.large,
    .promo-card.tall {
        grid-column: auto;
        grid-row: auto;
        min-height: 280px;
    }
}

/*
 * Por debajo de 600px, una columna. Con dos, una tarjeta se queda en 173px y
 * un título como «Argentina» necesita 144px: cabe por los pelos y cualquier
 * nombre más largo se parte o se sale. A una columna la portada se ve y el
 * título entra entero.
 */
@media (max-width: 600px) {

    .promo-grid {
        padding: 28px 0 12px;
    }

    .promo-grid .container {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .promo-card,
    .promo-card.large,
    .promo-card.tall {
        min-height: 190px;
    }

    .promo-card .content {
        padding: 20px;
    }

    /* El título se adapta al ancho en vez de desbordar la tarjeta. */
    .promo-card .content h2,
    .promo-card .content h3 {
        font-size: clamp(26px, 8vw, 36px);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    .promo-card .content span {
        font-size: var(--small-text);
        margin-bottom: 2px;
    }
}