/* Block: Shop-Banner mit schrägem Bildschnitt
   ------------------------------------------------------------------
   Gemessen an .figma-ref/20.08/Beckenrandsteine_Terrassenplatten.png:
   Karte über die volle Inhaltsbreite (1476), Höhe 468, Radius 16,
   Bildanteil rechts etwa die Hälfte, Schnittkante von oben nach unten
   nach links geneigt.

   Die Überschrift ist Poppins Bold – nicht Literata. Das ist im Entwurf
   die einzige Stelle dieser Art, deshalb steht es hier ausdrücklich.

   Tablet/Mobil sind abgeleitet: Dort verliert der schräge Schnitt seinen Sinn
   (die Karte wird schmal). Text und Pfeil stehen oben, das Bild darunter –
   so trägt die Aussage und nicht das Motiv.
   ------------------------------------------------------------------ */

.shop-banner {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: box-shadow var(--transition), transform var(--transition);
}

a.shop-banner:hover,
a.shop-banner:focus-visible {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* ── Mobil und Tablet: Text oben, Bild darunter ─────────────── */
.shop-banner-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.shop-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-banner-content {
    padding: 28px;
}

.shop-banner-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 50%;
    background-color: var(--color-dark);
    color: var(--color-accent);
}

.shop-banner-headline {
    margin: 0;
    font-family: var(--font-body);       /* bewusst Poppins, siehe Kopf */
    font-weight: var(--fw-bold);
    font-size: 24px;
    line-height: 1.25;
    color: var(--color-dark);
}

/* ── Desktop (≥1200px): Text links, Bild rechts mit Schräge ─── */
@media (min-width: 1200px) {
    .shop-banner {
        display: flex;
        align-items: stretch;
        min-height: 468px;
    }

    .shop-banner-content {
        flex: 0 0 48%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 48px 48px 48px 56px;
    }

    .shop-banner-media {
        flex: 1 1 auto;
        aspect-ratio: auto;
        /* Die Schnittkante läuft von oben rechts nach unten links – im
           Entwurf rund 9 % der Kartenbreite Versatz. Der negative
           Innenabstand links holt die Fläche unter die Textspalte, damit
           die Schräge nicht am Bildrand endet. */
        margin-left: -10%;
        clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
    }

    .shop-banner-headline {
        font-size: 34px;
    }

    .shop-banner-arrow {
        width: 56px;
        height: 56px;
        margin-bottom: 28px;
    }
}