/*
 * Water Concepts
 * Tag cards (homepage, [wce_tag_grid])
 *
 * Bouwt voort op category-cards.css (zelfde kaart, vlak,
 * hover, pijl). Alleen de afwijkingen staan hier:
 *   - langere tekst (lopende tekst: 1rem, niet 0.875rem)
 *   - pijl rechts, uitgelijnd op de onderkant van de tekst
 *   - kaarten in een rij even hoog → pijlen op één lijn
 *
 * Grid:  desktop 3 · tablet 2 · mobiel 1
 */


/* ==========================================
   SECTION
   Kop + intro staan in de editor erboven,
   dus alleen ruimte aan de onderkant.
========================================== */

.tag-cards {
    --container: 1600px;
    --gutter: 30px;

    padding: 2rem 0 5rem;
}

.tag-cards__inner {
    max-width: var(--container);

    margin: 0 auto;
    padding: 0 var(--gutter);
}

.tag-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/* ==========================================
   CARD — AFWIJKINGEN T.O.V. CATEGORIEKAART
========================================== */

/* Body vult de kaarthoogte: tekst boven,
   pijl onder (rechts). */
.category-card--tag .category-card__body {
    flex: 1 1 auto;
    align-items: stretch;
    gap: 16px;
}

.category-card--tag .category-card__text {
    align-self: flex-start;
    gap: 10px;
}

.category-card--tag .category-card__arrow {
    align-self: flex-end;
}

.category-card--tag .category-card__name {
    font-size: 1.125rem;
    line-height: 1.35;
}

/* Lopende tekst: nooit onder 1rem. */
.category-card--tag .category-card__subtitle {
    font-size: 1rem;
    line-height: 1.6;
}


/* ==========================================
   TABLET — 2 kolommen
========================================== */

@media (max-width: 1024px) {

    .tag-cards {
        padding-bottom: 4rem;
    }

    .tag-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}


/* ==========================================
   MOBIEL — 1 kolom
========================================== */

@media (max-width: 768px) {

    .tag-cards {
        --gutter: 15px;

        padding: 1.5rem 0 3rem;
    }

    .tag-cards__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}