/* ==========================================================================
FILE: amazing-recipes/css/output-formate.css


1.0 BANNER
    1.1 Bilder und Slider über volle Seitenbreite
        - Größenklassen (gesetzt in: amazing-recipes/js/output-media.js)
            - banner-small (Banner für Beiträge)
            - banner-medium (Slider für Startseite)
            - banner-large (Rezeptbilder)
    1.2 Responsiveness Handy


2.0 QUERFORMATE 16:9 und 4:3

3.0 HOCHFORMAT 3:4 und QUADRAT 1:1

4.0 FEHLERBILD
========================================================================== */

/* ==========================================================================
   Globale Definitionen

    DEFINITION BREAKPOINTS
    (auf der gesamten Site umgesetzt)

    4K      : >2000px
    Desktop : >1250px
    Tablet  : 769px–1250px
    Mobile  : <=768px

   ========================================================================= */


/* ==========================================================================

1.1 BANNER
    - Bilder und Slider über volle Seitenbreite
        - Größenklassen:
            - banner-small (Banner für Beiträge)
            - banner-medium (Slider für Startseite)
            - banner-large (Rezeptbilder)

            gesetzt in: amazing-recipes/js/output-media.js

            Klassen können zusätzlich als Klasse auf Bildern gesetzt werden
===========================================================================*/

    .banner-small,
    .banner-medium,
    .banner-large {
        overflow: hidden;
        max-width: none;
    }

    .banner-small img,
    .banner-medium img,
    .banner-large img {
        width: 100%; /* Bild auf Containergröße einpassen */
        height: 100%;
        object-fit: cover; /* Fixe Höhe - Überlauf wird abgeschnitten */
        display: block;
    }

    /* Small - Banner */
    .banner-small {
        /* Mindesthöhe - Wunschhöhe in % von view height - Maximalhöhe*/
        height: clamp(120px, 30vh, 350px);
    }

    /* Medium - Slider */
    
    .banner-medium {
        /* Mindesthöhe - Wunschhöhe in % von view height - Maximalhöhe*/
        height: clamp(200px, 47vh, 650px);
    }

    /* Large - Rezeptbild */
    
    .banner-large {
        /* Mindesthöhe - Wunschhöhe in % von view height - Maximalhöhe*/
        height: clamp(300px, 70vh, 2000px);
    }


    /* =========================================
    1.2 Banner-Größen Handy
    ========================================= */
    /* Handy maximal mögliche Höhe - quadratisch*/
        @media (max-width: 768px) {
            

            .banner-small {
                aspect-ratio: 3 / 1;
                height: auto;
            }

            .banner-medium {
                aspect-ratio: 1 / 1;
                height: auto;
            }

            .banner-large {
                aspect-ratio: 1 / 1;
                height: auto;
            }

        }

/* ====================================================================
 2.0  QUERFORMATE 16:9 und 4:3
   ==================================================================== */

/* ====================================================================
   2.1 QUERFORMAT 16:9 und 4:3
   ==================================================================== */

.quer_16_9 .output-media,
.quer_4_3 .output-media {
    display: flex;
    justify-content: center;
}

.quer_16_9 .output-media img,
.quer_4_3 .output-media img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
}

/* ====================================================================
   2.2 RESPONSIVENESS QUERFORMAT 16:9
   ==================================================================== */

/*Für 4K maximale Breite wide-width (gleich wie Content)
  Höhe auf 72vh, damit bündig mit Überschrift (ist für kleinere Geräte zu viel) */

@media (min-width: 2001px) {

    .quer_16_9 .output-media img {
        max-width: var(--wide-width);
        max-height: 72vh;
    }

}

/* ====================================================================
 3.0  HOCHFORMAT 3:4 und QUADRAT 1:1        
   ==================================================================== */


.quadrat .output-media,
.hochformat .output-media {
    padding-left: var(--content-padding);
    padding-right: 2vh;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    
}

   /* Bildhöhe begrenzen */
.quadrat .output-media img,
.hochformat .output-media img {
    max-height: clamp(500px, 70vh, 900px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}



/* ====================================================================
4.0 FEHLERBILD

   ==================================================================== */
.error {
    height: auto;
    overflow: visible;
}

.error img {
    all: unset;
    display: block;
}