/* Cards and banners */
/* Requires variables_1.0.css */

/* Cards single reference HTML
<div class="card">
    <div class="copy">
        <h1>Lorem</h1>
        <h2>Ipsum</h2>
        <h3>Ipsum</h3>
        <p>Lorem impsum</p>
        <a href="#" class="cta">Lorem impsum</a>
    </div>
    <div class="img"></div>
</div>
*/

/* Cards set reference HTML
<div class="card-set">
    <div class="card">
        <div class="copy">
            <h1>Lorem</h1>
            <h2>Ipsum</h2>
            <h3>Ipsum</h3>
            <p>Lorem impsum</p>
            <a href="#" class="cta">Lorem impsum</a>
        </div>
        <div class="img"></div>
    </div>
</div>
*/

/* Card sidebar reference HTML
<div class="card-set inline-img sidebar">
    <div class="card">
        <div class="copy">
            <h3>Lorem</h3>
            <p>Ipsum</p>
            <a href="#" class="cta">Lorem impsum</a>
        </div>
        <div class="img"></div>
    </div>
</div>
*/

/* Ribbon refernce HTML 
<a href="#" class="ribbon">Lorem Ipsum</a>
*/

.card {
    display: flex;
    flex-direction: column-reverse;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: var(--width-content-max);
}

.card .copy {
    align-self: center;
    padding: 2rem;
    width: calc(100% - 4rem);
}

.card .img {
    background: url(/media/wysiwyg/top-banner.jpg);
    width: 100%;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    min-height: 30rem;
}

.inline-img .card .img,
.inline-img.card .img  {
    background: unset;
    min-height: auto;
    line-height: 0;
}

.card-set.inline-img .card {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

.card.ltr-mobile {
    display: flex;
    flex-direction: row-reverse;
}

.card .copy h1,
.card .copy h2,
.card .copy h3 {
    margin-top: 0;
}

.card .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-set {
    display: flex;
    flex-direction: column;
}

.card-set > a {
    width: 100%;
}

.card-set > a:hover {
    text-decoration: none;
}

.card-set a h4,
.card-set p {
    color: var(--color-text)
}

.card-set .cta {
    text-decoration: underline;
    color: var(--color-link)
}

.card-set .cta:hover {
    text-decoration: underline;
    color: var(--color-link-hover)
}


@media only screen and (min-width: 768px) {

    .card .img {
        min-height: 30rem;
    }

    .card {
        display: flex;
        flex-direction: row;
        background-position-x: center;
    }

    .card > * {
        width: 100%;
        max-width: var(--width-content-max)
    }

    .card.ltr {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    .card-set {
        display: flex;
        flex-direction: row;
        gap: 2rem;
    }

    .card-set .card {
        display: flex;
        flex-direction: column-reverse;
        height: 100%;
    }

    

}

@media only screen and (min-width: 1440px) {

    .card .img {
        min-height: 40rem;
    }

}

/* Ribbon */

.ribbon {
    width: 100%;
    max-width: var( --width-content-max-calc);
    background: var(--color-branding-primary);
    color: #fff;
    text-align: center;
    padding: 1rem;
    font-size: var(--text-h3-size);
    display: block;
    margin: 2rem auto;
}

a.ribbon:hover, a.ribbon:visited {
    color: #fff;
}

a.ribbon:hover {
    text-decoration: underline;
}

/* Top ribbon */

.top.ribbon {
    margin: 0;
    max-width: calc(100% - 2rem);
    padding: .5rem 1rem;
    font-size: var(--text-normal-size);
}


/* Sidebar */

.page-layout-2columns-left .sidebar-additional, 
.page-layout-2columns-left .sidebar-main {
    padding: 0;
    border: unset;
}

.card.sidebar-ad {
    display: flex;
    flex-direction: column-reverse;
}

/* Full width ad */