/*
=====================================================
 EF22 FRAMEWORK
 STORY.CSS
=====================================================

 Text mit Foto, z. B. auf „Über uns“.

 <div class="story">                  Text links, Foto rechts
 <div class="story story--reverse">   Foto links (ab Tablet)
     <div class="story-text"> … </div>
     <figure class="story-photo"> <img …> </figure>
 </div>

 <div class="story-closing">          Abschluss, alles mittig
 <figure class="story-photo story-photo--portrait">  Hochformat:
                                      ab 900 px schmaler

 Auf dem Smartphone steht das Foto immer unter
 dem Text. Das Foto steckt in einem schlichten
 Polaroid-Rahmen, leicht gedreht.
*/


/* ==========================================
   STORY
========================================== */

.story {

    display: grid;

    gap: var(--space-xl);

    align-items: center;

}


/* ==========================================
   TEXT
   Abstand oben übernimmt .section-text
========================================== */

.story-text {

    min-width: 0;

}


/* ==========================================
   FOTO (POLAROID)
========================================== */

.story-photo {

    margin: 0;

    padding:
        var(--space-sm)
        var(--space-sm)
        var(--space-xl);

    background: var(--color-white);

    box-shadow: var(--shadow-md);

    transform: rotate(-1deg);

}

.story-photo img {

    display: block;

    width: 100%;

    height: auto;

}

.story--reverse .story-photo {

    transform: rotate(1deg);

}


/* ==========================================
   FOTO OHNE TEXT DANEBEN
   (z. B. Gruppenbild am Seitenende)
========================================== */

.story-photo--wide {

    max-width: 760px;

    margin-top: var(--space-xl);

    margin-left: auto;

    margin-right: auto;

}

.story-photo--wide:first-child {

    margin-top: 0;

}


/* ==========================================
   ABSCHLUSS
   Überschrift, Foto und Text mittig
   <div class="story-closing"> … </div>
========================================== */

.story-closing {

    text-align: center;

}

.story-closing .section-header {

    align-items: center;

}

.story-closing .section-text {

    margin-left: auto;

    margin-right: auto;

}


/* ==========================================
   AB 900 PX (TABLET QUER, DESKTOP)
========================================== */

@media (min-width: 900px) {

    .story {

        grid-template-columns: 1fr 1fr;

        gap: var(--space-3xl);

    }

    .story--reverse .story-text {

        order: 2;

    }

    .story-photo--portrait {

        justify-self: center;

        max-width: 420px;

    }

    .story-photo {

        padding:
            var(--space-md)
            var(--space-md)
            var(--space-2xl);

    }

}