/* =====================================================
   MEDIA DESIGN SYSTEM
===================================================== */



/*==================================================
    MEDIA COMPONENTS 1.0
==================================================*/

/*--------------------------------------
    Example Grid
--------------------------------------*/

.media-example-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:var(--space-8);

}


/*--------------------------------------
    Example Block
--------------------------------------*/

.media-example{

    display:flex;

    flex-direction:column;

    gap:var(--space-3);

}


.media-example h2{

    margin:0;

}


.media-example__intro{

    color:var(--text-muted);

}


/*--------------------------------------
    Notes
--------------------------------------*/

.media-notes{

    padding:var(--space-4);

    background:var(--surface-beige-light);

    border-radius:var(--radius-sm);

}


.media-notes ul{

    margin-top:.75rem;

    padding-left:1.25rem;

}

/*==================================================
    MEDIA CARD
==================================================*/

.media-card{

    overflow:hidden;

    position:relative;

    border-radius:var(--radius-sm);

    border:1px solid var(--border);

    background:var(--surface);

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

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.media-card img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .35s ease;

}


.media-card:hover{

    transform:translateY(-4px);

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

}


.media-card:hover img{

    transform:scale(1.04);

}

.content-media{

    display:grid;

    grid-template-columns:auto 1fr;

    gap:var(--space-6);

    align-items:start;

}

@media (max-width:768px){

    .content-media{

        grid-template-columns:1fr;

    }

}

/*--------------------------------------
    Media Card Sizes
--------------------------------------*/

.media-card--sm{

    max-width:240px;

}

.media-card--md{

    max-width:360px;

}

.media-card--lg{

    max-width:520px;

}

/*--------------------------------------
    Portrait
--------------------------------------*/

.media-card--portrait{

    aspect-ratio:4 / 5;

}


/*--------------------------------------
    Landscape
--------------------------------------*/

.media-card--landscape{

    aspect-ratio:16 / 9;

}


/*--------------------------------------
    Square
--------------------------------------*/

.media-card--square{
    
    aspect-ratio:1;

}
/*==================================================
    MEDIA LAYOUTS 1.0
==================================================*/

/*==================================================
    MEDIA LAYOUT
==================================================*/

.media-layout{

    --media-height:420px;

}

.media-layout .media-card{

    height:var(--media-height);

}



/*--------------------------------------
    Example Container
--------------------------------------*/

.media-layout-example{

    display:flex;

    flex-direction:column;

    gap:var(--space-4);

}


/*--------------------------------------
    Notes
--------------------------------------*/

.media-layout-notes{

    padding:var(--space-4);

    background:var(--surface-beige-light);

    border-radius:var(--radius-sm);

}



/*--------------------------------------
    Triptych
--------------------------------------*/


.media-layout--triptych{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:var(--space-5);

}

/*--------------------------------------
    Quad Layout
    Four Equal Images
--------------------------------------*/


.media-layout--quad{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:var(--space-5);

}



/*--------------------------------------
    Duet
--------------------------------------*/


.media-layout--duet{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:var(--space-5);

}

/*--------------------------------------
    Quintet Layout
    Five Equal Images
--------------------------------------*/


.media-layout--quintet{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:var(--space-5);

}

@media(max-width:1100px){


.media-layout--quintet{

    grid-template-columns:repeat(3,1fr);

}


.media-layout--quad{

    grid-template-columns:repeat(2,1fr);

}


}

@media(max-width:600px){


.media-layout--quad,
.media-layout--quintet{

    grid-template-columns:1fr;

}


}



/*--------------------------------------
    Editorial
--------------------------------------*/


.media-layout--editorial{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:var(--space-5);

    align-items:center;

}


.media-layout--editorial 
.media-card:nth-child(2){

    transform:translateY(-30px);

}



/*--------------------------------------
    Hero
--------------------------------------*/


.media-layout--hero{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:var(--space-5);

}



.media-layout__support{

    display:grid;

    grid-template-columns:1fr;

    gap:var(--space-5);

}



/*--------------------------------------
    Responsive
--------------------------------------*/


@media(max-width:900px){


.media-layout--triptych{

    grid-template-columns:repeat(2,1fr);

}


.media-layout--editorial{

    grid-template-columns:1fr;

}


.media-layout--hero{

    grid-template-columns:1fr;

}


}


@media(max-width:600px){


.media-layout--triptych,
.media-layout--duet{

    grid-template-columns:1fr;

}


.media-layout--editorial 
.media-card:nth-child(2){

    transform:none;

}


}


.media-layout--compact{

    --media-height:280px;

}

.media-layout--standard{

    --media-height:420px;

}

.media-layout--tall{

    --media-height:560px;

}

/*==================================================
    MEDIA TREATMENT ExampleS
==================================================*/


.media-treatment-example{

    max-width:420px;

    display:flex;

    flex-direction:column;

    gap:var(--space-4);

}

/*==================================================
    FEATURED MEDIA CARD
==================================================*/


.media-card--featured{

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

    transform:translateY(-6px);

}

/*==================================================
    CAPTION MEDIA CARD
==================================================*/


.media-card--caption figcaption{

    padding:var(--space-4);

}


.media-card--caption h3{

    margin-bottom:var(--space-2);

}


.media-card--caption p{

    margin:0;

    color:var(--text-muted);

}

/*==================================================
    OVERLAY MEDIA CARD
==================================================*/


.media-card--overlay figcaption{

    position:absolute;

    inset:auto 0 0 0;


    padding:var(--space-5);


    color:white;


    background:

        linear-gradient(

            transparent,

            rgba(0,0,0,.65)

        );



    font-size:1.1rem;

    font-weight:600;

}

.media-card--flush{

    border:none;

    box-shadow:none;

    background:none;

}

/*==================================================
    IMAGE FRAMES
==================================================*/


.media-frame--soft{

    padding:var(--space-3);

    background:var(--surface-beige-light);

}

.media-frame--rounded{

    border-radius:var(--radius-sm);

    overflow:hidden;

}

.media-frame--full{

    width:100%;

    overflow:hidden;

}


.media-frame--full img{

    width:100%;

    display:block;

}