/* ==========================================================================
FILE: amazing-recipes/css/output-layout.css
Zeilensuche: STRG + G

Dynamisches Layout. 

Überschreibt, je nach zurückgegebenem Medium (derzeit nur Featured Image) 
die Styles aus frontend.css

STRUKTUR

1.0 - Beim Laden ausblenden
2.0 - Grid-Definitionen
3.0 - Responsive-Width
3.0 - Grid-Transformation für Querformate: Banner, 16:9 und 4:3
4.0 - Grid-Transformation für Hochformate: 3:4 und Quadrate
5.0 - Grid-Responsiveness


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

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

    DEFINITION BREAKPOINTS
    (auf der gesamten Site umgesetzt)

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

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

/* ====================================================================
   1.0  Inhalte bis zur AJAX-Aktualisierung ausblenden
   ==================================================================== */

.layout.loading {
    visibility: hidden;
}


/* ====================================================================
   2.0  Grid-Definitionen
   ==================================================================== */

/*-----------------------------------------------------------------
2.1 Hero-Grid
------------------------------------------------------------------*/

.hero-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 5%;
    row-gap: 0;
    align-items: start;
}


/*---------------------------------------------------------------
2.2 Intro-Grid + Content-Grid

    Die Intro soll die gleiche Text-Flucht haben wie der Content,
    daher die gleiche Grid-Definition
-----------------------------------------------------------------*/

.intro-grid,
.content-grid {
    display: grid;
    grid-template-columns: minmax(320px, 25%) auto; /* 25% vom Viewport, min 320 px) */
    column-gap: 5%;
    row-gap: 0;
    align-items: stretch; /* ganze Höhe */
}

.intro-grid-links,
.content-grid-links {
    align-self: stretch; /* ganze Höhe  */
}

/* 
Intro-Textblock linksbündig
(Zetrierung und Innenabstand aus Child-Theme überschreiben)
*/
.intro-grid .text,
.content-grid .text {
    margin-left: 0;
    padding-inline: 0;
}

/* 
Inhalte der linken Content-Spalte
Sollen bei jedem Format gleich dargestellt werden 
Zeit, Portionen, Zutatenliste 
*/
.info-spalte {
    width: clamp(320px, 30vw, 400px);
    margin-left: auto;
    margin-right: 0;
    box-sizing: border-box;
}


/* ====================================================================
   4.0  Grid-Transformation für Querformate: Banner, 16:9 und 4:3
        hero-grid    1-spaltig
        
        Anm.:
        intro-grid   wird von frontend.css geerbt und ist 2-spaltig
        intro-grid ist für Tablet und Mobile 1-spaltig      
   ==================================================================== */

    .banner .hero-grid,
    .quer_16_9 .hero-grid,
    .quer_4_3 .hero-grid{
        grid-template-columns: 1fr;
    }

   /* 
      Hero-Grid (rechte Spalte) widescreen  
      Hero-Grid im Viewport zentriert  
   */
   .banner .responsive-width,
   .quer_16_9 .responsive-width,
   .quer_4_3 .responsive-width {
        width: min(100%, var(--wide-width));
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        padding-inline: var(--content-padding);
    }

    /* 
      Content-Grid wie Hero-Grid widescreen 
      Content-Grid im Viewport zentriert
    */
    .banner .responsive-content-width,
    .quer_16_9 .responsive-content-width,
    .quer_4_3 .responsive-content-width {
        width: min(100%, var(--wide-width));
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        padding-inline: var(--content-padding);
    }

    /* 
      Info-Spalte auf die linke Grid-Spalte begrenzen
    */
    .banner .info-spalte,
    .quer_16_9 .info-spalte,
    .quer_4_3 .info-spalte {
        max-width: 100%;
    }

/* ====================================================================
   5.0  Grid-Transformation für Hochformate: 3:4 und 1:1 (Quadrate)
        intro-grid  1-spaltig 

        Anm.: 
        hero-grid wird von frontend.css geerbt und ist 2-spaltig  
   ==================================================================== */

   
/* Hero-Grid Spalten neu aufteilen */
.quadrat .hero-grid,
.hochformat .hero-grid{
    grid-template-columns: minmax(min-content, 1fr) 60%;
    column-gap: 0%;
}

/* Content-Grid gleich wie Hero-Grid wg. Textflucht (rechte Spalte)*/
.quadrat .content-grid,
.hochformat .content-grid {
    grid-template-columns: minmax(min-content, 1fr) 60%;
    column-gap: 0%;
}


/* Hero-Grid links (Bild vertikal zentrieren) */
.quadrat .hero-grid-links,
.hochformat .hero-grid-links{
    align-self: center;
}

/* Bild rechts Seitenrand - Innenabstand zum Text*/
.quadrat .output-media,
.hochformat .output-media {
    padding-left: var(--content-padding);
    padding-right: 2vw;   
}

/* Info-Spalte - Innenabstand zum Text*/
.quadrat .info-spalte,
.hochformat .info-spalte {
    margin-right: 2vw;   
}

/* 
    Hero-Grid (rechte Spalte exkl. Titel)
    Textbreite (schmäler wg. Weißraum) + zusätzliche Seitenränder
*/
.hochformat .responsive-width,
.quadrat .responsive-width {
    width: min(100%, 750px);
    margin-left: 0;
    margin-right: auto;
    padding-inline: var(--content-padding);
    
}

/* 
    Content-Grid (rechte Spalte)
    zusätzlicher Seitenrand links
*/
.hochformat .content-grid-rechts,
.quadrat .content-grid-rechts {
    margin-left: var(--content-padding);
    
}

   /* Intro-Grid 1-spaltig */
.quadrat .intro-grid,
.hochformat .intro-grid {
    grid-template-columns: 1fr;
}

/* Intro-Grid linke leere Spalte wird bei Hochformaten ausgeblendet */
.quadrat .intro-grid .intro-grid-links,
.hochformat .intro-grid .intro-grid-links {
    display: none;
}

/* Abstand nach dem Bild */
.quadrat .output-media,
.hochformat .output-media {
    margin-bottom: 5vh;
    
}

/* -------------------------------------
    Leerraum kompensieren
----------------------------------------*/

/* Abstand über dem Titel */
.hochformat .hero-grid-rechts,
.quadrat .hero-grid-rechts {
    padding-top: 3vh;
}

/* Abstand unter dem Titel */
.hochformat .page-title {
    margin-bottom: 4vh;
}



/*==========================================================================
  6.0 RESPONSIVENESS
===========================================================================*/


/*-----------------------------------
  Tablet & Mobile
-----------------------------------*/

@media (max-width: 1250px) {
    
        /* Intro 1-spaltig */
     .intro-grid{
        grid-template-columns:1fr;
    }

    /* linke leere Spalte wird ausgeblendet */
    .intro-grid .intro-grid-links{
        display:none;
    }

    /* Intro-Textblock zentrieren */
    .intro-grid .text {
    margin-left: auto;
    margin-right: auto;
    }

}



/*-----------------------------------
  Mobile
-----------------------------------*/
@media (max-width:768px){



    /* Hochformate: Hero-Grid 1-spaltig*/
        .quadrat .hero-grid,
        .hochformat .hero-grid {
            grid-template-columns: 1fr;
        }


    /* Zutatenliste + Zubereitungsschrite 1-spaltig 
       Spezifität muss mit Klasse "Layout" erhöht werden, weil sonst
       die Hochformat-Regeln ziehn*/
        .layout .content-grid {
            grid-template-columns:1fr;
        }

    /* Infospalte ausrichten
       Zutatenliste 80% Breite - usw. auf gesamter Spaltenbreite */
        .info-spalte {
            width: clamp(280px, 80vw, 500px);
            margin-left: auto;
            margin-right: auto;
        }

    /* Hero-Grid links (Bild horizontal zentrieren) */
    .quadrat .hero-grid-links,
    .hochformat .hero-grid-links{
        justify-self: center;
    }

    /* -------------------------------------
    Leerraum kompensieren für Hochformate -> zurücksetzen
    ----------------------------------------*/

    /* Abstand über dem Titel */    
    .hochformat .hero-grid-rechts,
    .quadrat .hero-grid-rechts {
        padding-top: 0;
    }

    /* Abstand unter dem Titel */
    .hochformat .page-title {
        margin-bottom: 2vh;
    }

}