/*
=========================================================
BlaBlaDating – BlaBla CrimeStory
BCS-00A CrimeStory Bildlayout
Version 1.1.0
=========================================================

Reines Frontend-CSS.

Funktion:
- Einführung: Bild links / Text rechts
- Ungerade Hinweistage: Text links / Bild rechts
- Gerade Hinweistage: Bild links / Text rechts
- Individuelle Bildbreite 30–60 %
- Einheitliche Bildrundung 12px
- Mobil: Bild oben / Text darunter

Wichtig:
- Backend-Bildvorschauen werden separat durch BCS-00B gesteuert
- BCS-00 Design Framework bleibt unverändert
- keine PHP- oder Spiellogik
=========================================================
*/


/* =========================================================
   1. Grundlayout Bild + Text
========================================================= */

.bcs-story-media-row {
    --bcs-story-image-width: 42%;

    display: grid;
    grid-template-columns:
        minmax(0, var(--bcs-story-image-width))
        minmax(0, calc(100% - var(--bcs-story-image-width)));

    gap: 28px;
    align-items: start;
    margin-top: 14px;
}

.bcs-story-media-row.no-image {
    display: block;
}


/* =========================================================
   2. Individuelle Bildgrößen
========================================================= */

.bcs-story-media-row.bcs-image-size-30 {
    --bcs-story-image-width: 30%;
}

.bcs-story-media-row.bcs-image-size-32 {
    --bcs-story-image-width: 32%;
}

.bcs-story-media-row.bcs-image-size-34 {
    --bcs-story-image-width: 34%;
}

.bcs-story-media-row.bcs-image-size-36 {
    --bcs-story-image-width: 36%;
}

.bcs-story-media-row.bcs-image-size-38 {
    --bcs-story-image-width: 38%;
}

.bcs-story-media-row.bcs-image-size-40 {
    --bcs-story-image-width: 40%;
}

.bcs-story-media-row.bcs-image-size-42 {
    --bcs-story-image-width: 42%;
}

.bcs-story-media-row.bcs-image-size-44 {
    --bcs-story-image-width: 44%;
}

.bcs-story-media-row.bcs-image-size-46 {
    --bcs-story-image-width: 46%;
}

.bcs-story-media-row.bcs-image-size-48 {
    --bcs-story-image-width: 48%;
}

.bcs-story-media-row.bcs-image-size-50 {
    --bcs-story-image-width: 50%;
}

.bcs-story-media-row.bcs-image-size-52 {
    --bcs-story-image-width: 52%;
}

.bcs-story-media-row.bcs-image-size-54 {
    --bcs-story-image-width: 54%;
}

.bcs-story-media-row.bcs-image-size-56 {
    --bcs-story-image-width: 56%;
}

.bcs-story-media-row.bcs-image-size-58 {
    --bcs-story-image-width: 58%;
}

.bcs-story-media-row.bcs-image-size-60 {
    --bcs-story-image-width: 60%;
}


/* =========================================================
   3. Wechselnde Bildposition
========================================================= */

.bcs-story-media-row.image-right {
    grid-template-columns:
        minmax(0, calc(100% - var(--bcs-story-image-width)))
        minmax(0, var(--bcs-story-image-width));
}

.bcs-story-media-row.image-right .bcs-story-media-image {
    order: 2;
}

.bcs-story-media-row.image-right .bcs-story-media-text {
    order: 1;
}


/* =========================================================
   4. Bilddarstellung
========================================================= */

.bcs-story-media-image {
    border-radius: 0 !important;
    overflow: visible !important;
}

.bcs-story-media-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px !important;
    clip-path: none !important;
}


/* =========================================================
   5. Textbereich
========================================================= */

.bcs-story-media-text {
    min-width: 0;
}

.bcs-story-media-text > :first-child {
    margin-top: 0;
}


/* =========================================================
   6. Smartphone / kleine Tablets
========================================================= */

@media (max-width: 767px) {

    .bcs-story-media-row,
    .bcs-story-media-row.image-right {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .bcs-story-media-image {
        order: 1 !important;
    }

    .bcs-story-media-text {
        order: 2 !important;
    }
}