/* mod_serenade_teasers */

.mod-serenade-teasers {
    width: 100%;
    max-width: var(--layout-inner);
    margin: 0 auto;
    padding: 0;
}

.mod-serenade-teasers__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: start;
}

.mod-serenade-teasers__item {
    list-style: none;
}

/* Figma teaser strokes are gradient fills, not solid colours. Each card
 * has the brand colour concentrated in ONE corner and fades to fully
 * transparent at the opposite corner. The corner depends on the variant:
 *
 *   wasser  (blau)   →  top-left   (gradient 135deg, color → transparent)
 *   gelb    (schilf) →  bottom-left (gradient 45deg,  color → transparent)
 *   wiese   (gruen)  →  bottom-right (gradient 315deg, color → transparent)
 *   petrol           →  top-right  (gradient 225deg, color → transparent)
 *
 * The ring is drawn by a masked ::before pseudo so the colour can be
 * a real gradient even though CSS doesn't natively support gradient
 * border colours together with border-radius. */
.mod-serenade-teasers__card {
    position: relative;
    display: block;
    width: 100%;
    padding: calc(var(--s-6) + var(--bw-card));
    border-radius: var(--rad-card);
    background: transparent;
    color: var(--c-petrol);
    text-decoration: none;
    transition: transform var(--tr-base);
}

.mod-serenade-teasers__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--bw-card);
    background: linear-gradient(135deg, var(--c-petrol) 0%, transparent 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

/* wasser → colour at TOP-LEFT, fades to transparent at BOTTOM-RIGHT */
.mod-serenade-teasers__card--blau::before {
    background: linear-gradient(315deg,
        var(--c-accent-blau) 0%, transparent 100%);
}

/* schilf (gelb) → colour at BOTTOM-LEFT, fades to TOP-RIGHT */
.mod-serenade-teasers__card--gelb::before {
    background: linear-gradient(225deg,
        var(--c-accent-gelb) 0%, transparent 100%);
}

/* wiese (gruen) → colour at BOTTOM-RIGHT, fades to TOP-LEFT */
.mod-serenade-teasers__card--gruen::before {
    background: linear-gradient(135deg,
        var(--c-accent-gruen) 0%, transparent 100%);
}

/* petrol → colour at TOP-RIGHT, fades to BOTTOM-LEFT */
.mod-serenade-teasers__card--petrol::before {
    background: linear-gradient(45deg,
        var(--c-accent-petrol) 0%, transparent 100%);
}

.mod-serenade-teasers__content {
    position: relative;
    z-index: 2;
}

.mod-serenade-teasers__title {
    margin: 0 0 var(--s-2) 0;
}

.mod-serenade-teasers__body {
    margin: 0;
}

.mod-serenade-teasers__more {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-9) var(--s-6) var(--s-6) var(--s-6);
    color: var(--c-white);
    font-family: var(--ff-text);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    line-height: var(--lh-text);
    border-bottom-left-radius: var(--rad-card);
    border-bottom-right-radius: var(--rad-card);
    opacity: 0;
    transition: opacity var(--tr-base);
    pointer-events: none;
}

/* Hover / focus reveals the "mehr erfahren" overlay. Targets every
 * variant of the card (a or div) so the effect also works when the
 * teaser is rendered without a URL during preview. */
.mod-serenade-teasers__card:hover .mod-serenade-teasers__more,
.mod-serenade-teasers__card:focus-visible .mod-serenade-teasers__more,
.mod-serenade-teasers__card:focus-within .mod-serenade-teasers__more {
    opacity: 1;
    pointer-events: auto;
}

.mod-serenade-teasers__card:focus-visible {
    outline: none;
}

/* Keep the teaser text dark on mouseover/focus. The card is an <a>, so
   without this it would inherit the global `a:hover { color: wasser }` rule
   and the title/body would tint blue on hover. The white "mehr erfahren"
   overlay sets its own colour and is unaffected. */
.mod-serenade-teasers__card:hover,
.mod-serenade-teasers__card:focus-visible,
.mod-serenade-teasers__card:focus-within {
    color: var(--c-petrol);
}

.mod-serenade-teasers__card--blau   .mod-serenade-teasers__more {
    background: linear-gradient(to top, var(--c-accent-blau) 42.788%, rgba(50, 174, 171, 0));
}

.mod-serenade-teasers__card--gruen  .mod-serenade-teasers__more {
    background: linear-gradient(to top, var(--c-accent-gruen) 42.788%, rgba(190, 211, 57, 0));
}

.mod-serenade-teasers__card--gelb   .mod-serenade-teasers__more {
    background: linear-gradient(to top, var(--c-accent-gelb) 42.788%, rgba(254, 203, 60, 0));
}

.mod-serenade-teasers__card--petrol .mod-serenade-teasers__more {
    background: linear-gradient(to top, var(--c-accent-petrol) 42.788%, rgba(68, 112, 115, 0));
}

.mod-serenade-teasers__more-arrow {
    font-size: var(--fs-h3);
    line-height: 1;
}

/* Tablet / touch (<=1024): tighten the grid gutter AND drop the hover-reveal
   overlay. Touch displays can't hover, so instead of pinning the full filled
   "mehr erfahren" block open (which looked like a permanent hover state), we
   show ONLY the arrow, tinted in the card's accent (= border) colour, in
   normal flow under the text. */
@media (max-width: 1024px) {
    .mod-serenade-teasers__grid {
        gap: var(--s-6);
    }

    .mod-serenade-teasers__more {
        position: static;
        opacity: 1;
        pointer-events: auto;
        padding: 0;
        margin-top: var(--s-4);
        justify-content: flex-end;
        background: none;
    }

    /* Only the arrow remains — hide the "mehr erfahren" label. */
    .mod-serenade-teasers__more-label {
        display: none;
    }

    /* Arrow takes the variant accent colour (matches the gradient border),
       and the filled gradient background is removed. */
    .mod-serenade-teasers__card--blau   .mod-serenade-teasers__more {
        background: none;
        color: var(--c-accent-blau);
    }
    .mod-serenade-teasers__card--gruen  .mod-serenade-teasers__more {
        background: none;
        color: var(--c-accent-gruen);
    }
    .mod-serenade-teasers__card--gelb   .mod-serenade-teasers__more {
        background: none;
        color: var(--c-accent-gelb);
    }
    .mod-serenade-teasers__card--petrol .mod-serenade-teasers__more {
        background: none;
        color: var(--c-accent-petrol);
    }
}

/* Phones: single column with a comfortable stacking gap. */
@media (max-width: 640px) {
    .mod-serenade-teasers__grid {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }
}