/* ==========================================================================
   Review site - new home page banner (hero + markets/scale panels + carousel)
   Scoped under .rv-banner so nothing here can leak into the rest of the site.
   Rollback: config/review.php -> new_home_banner = false (this file stops
   being loaded with the banner partial).

   Layout: the base rules below are the phone / tablet layout. From 992px up
   the banner follows the 1920px design (Final.png) and scales with the screen
   width through --u (1 design pixel), the same way the globe background
   scales, so text, panels and globe keep their relative positions.
   ========================================================================== */

.rv-banner {
    position: relative;
    background-color: #010510;
    background-image: url("../images/review/banner/hero-bg.jpg");
    background-repeat: no-repeat;
    background-position: 72% top;
    background-size: 150% auto;
    padding: 0 0 40px;
    overflow: hidden;
}

.rv-banner__inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 18px;
}

/* --------------------------------------------------------------- hero ---- */
.rv-hero {
    padding: 150px 0 28px;
}

.rv-hero__content {
    padding: 18px;
    background: rgba(1, 5, 16, .62);
}

.rv-hero__logo-canart img {
    width: 240px;
    max-width: 62%;
    height: auto;
}

.rv-hero__logo-brt {
    margin-top: 6px;
}

.rv-hero__logo-brt img {
    width: 330px;
    max-width: 86%;
    height: auto;
}

.rv-hero__text {
    margin: 20px 0 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.34;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}

/* The tagline carries the design's desktop line breaks; below 992px the text
   wraps naturally instead (each <br> is preceded by a space). */
.rv-hero__br {
    display: none;
}

.rv-hero__cta {
    display: inline-block;
    margin-top: 18px;
    padding: 7px 14px;
    background: #c22e2e;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease;
}

.rv-hero__cta:hover,
.rv-hero__cta:focus {
    background: #a62424;
    color: #fff;
    text-decoration: none;
}

.rv-hero__cta-text {
    text-decoration: underline;
}

.rv-hero__arrow {
    display: inline-block;
    margin-left: 6px;
}

/* ------------------------------------------------------------- panels ---- */
.rv-panels {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 34px;
}

/* Column flex so the cell row fills the panel: side by side, MARKETS SERVED
   is stretched to SCALE's (taller) height and its dividers must reach the
   bottom border. */
.rv-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    border: 1px solid #c22e2e;
    background: rgba(2, 7, 18, .55);
}

.rv-panel__head {
    padding: 7px 10px;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: .02em;
}

.rv-panel--markets .rv-panel__head {
    background: #fff;
    color: #141414;
}

.rv-panel--scale .rv-panel__head {
    background: #c22e2e;
    color: #fff;
}

.rv-panel__grid {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.rv-panel__item {
    min-width: 0;
    padding: 16px 8px 14px;
    text-align: center;
    color: #fff;
    border-left: 1px solid #c22e2e;
    border-bottom: 1px solid #c22e2e;
}

/* phones/tablets: 6 markets wrap 3-up, 4 scale figures wrap 2-up */
.rv-panel--markets .rv-panel__item {
    flex: 1 1 33.333%;
}

.rv-panel--markets .rv-panel__item:nth-child(3n + 1) {
    border-left: 0;
}

.rv-panel--scale .rv-panel__item {
    flex: 1 1 50%;
}

.rv-panel--scale .rv-panel__item:nth-child(odd) {
    border-left: 0;
}

.rv-panel__icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-bottom: 10px;
}

.rv-panel__icon {
    height: 38px;
    width: auto;
    max-width: 100%;
    display: block;
}

.rv-panel__label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rv-panel__value {
    margin: 0 0 2px;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
}

/* ----------------------------------------------------------- carousel ---- */
.rv-carousel {
    position: relative;
}

/* styles.css sets a fixed height on every .swiper-container (for the old
   full-screen hero slideshow) - the card carousel sizes to its content. */
.rv-carousel .swiper-container {
    height: auto;
    overflow: hidden;
}

.rv-carousel .swiper-wrapper {
    align-items: stretch;
}

/* styles.css forces min-height: 700px on .swiper-slide for the old hero slides. */
.rv-carousel .swiper-slide {
    height: auto;
    min-height: 0;
    display: flex;
}

.rv-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background: #e9eaeb;
    border: 1px solid #ced3d8;
    overflow: hidden;
}

.rv-card__media {
    height: 128px;
    flex: 0 0 auto;
    background: #0d1420;
}

.rv-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.rv-card__body {
    padding: 11px 13px 15px;
}

.rv-card__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 7px;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 600;
    color: #1b1b1b;
}

.rv-card__title img {
    width: 23px;
    height: auto;
    flex: 0 0 auto;
}

.rv-card__text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #414141;
}

/* ------------------------------------------------- phones (< 576px) ---- */
@media (max-width: 575.98px) {
    .rv-banner {
        background-size: 175% auto;
        background-position: 64% top;
        padding-bottom: 28px;
    }

    .rv-hero {
        padding-top: 120px;
    }

    .rv-hero__logo-canart img {
        width: 160px;
    }

    .rv-hero__logo-brt img {
        width: 220px;
    }

    .rv-hero__text {
        font-size: 14px;
    }

    .rv-panel__head {
        font-size: 17px;
    }

    /* everything wraps 2-up on phones */
    .rv-panel__item,
    .rv-panel--markets .rv-panel__item {
        flex: 1 1 50%;
        padding: 13px 6px 11px;
    }

    .rv-panel--markets .rv-panel__item:nth-child(3n + 1) {
        border-left: 1px solid #c22e2e;
    }

    .rv-panel__grid > .rv-panel__item:nth-child(odd) {
        border-left: 0;
    }

    .rv-card__media {
        height: 150px;
    }
}

/* ---------------------------------------- desktop: the 1920px design ---- */
@media (min-width: 992px) {
    .rv-banner {
        /* one design pixel; capped so screens wider than 1920 stay at 1:1 */
        --u: calc(min(100vw, 1920px) / 1920);
        background-position: center -55px;
        background-size: 100% auto;
        padding-bottom: calc(40 * var(--u));
    }

    .rv-banner__inner {
        max-width: 1920px;
        padding: 0 calc(120 * var(--u));
    }

    /* Hero: the logo lockup starts 108 design px below the 98px site header,
       logos at their natural size, tagline 38px on 45px lines. */
    .rv-hero {
        padding: calc(98px + 45 * var(--u)) 0 0;
    }

    .rv-hero__content {
        width: calc(880 * var(--u));
        padding: 0;
        background: none;
    }

    .rv-hero__logo-canart img {
        width: calc(310 * var(--u));
        max-width: none;
    }

    .rv-hero__logo-brt {
        /* the two PNGs carry transparent padding; this closes the gap to the design's */
        margin-top: calc(-8 * var(--u));
    }

    .rv-hero__logo-brt img {
        width: calc(540 * var(--u));
        max-width: none;
    }

    /* Tagline + Read More: the opening line(s) span the full width; the last
       two lines sit in column 1 with Read More 28 design px to their right,
       bottom-aligned with the final line - whatever the font's width. */
    .rv-hero__copy {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: start;
        align-items: end;
        column-gap: calc(28 * var(--u));
        font-size: max(21px, calc(26 * var(--u)));
    }

    .rv-hero__text {
        display: contents;
        font-size: inherit;
        line-height: 1.18;
    }

    .rv-hero__lead {
        grid-column: 1 / -1;
        display: block;
    }

    .rv-hero__tail {
        grid-column: 1;
        display: block;
    }

    .rv-hero__br {
        display: inline;
    }

    .rv-hero__cta {
        grid-column: 2;
        display: inline-flex;
        align-items: center;
        height: calc(40 * var(--u));
        margin: 0;
        padding: 0 calc(14 * var(--u));
        font-size: max(10px, calc(16 * var(--u)));
        letter-spacing: .03em;
    }

    .rv-hero__arrow {
        margin-left: calc(10 * var(--u));
    }

    /* Panels: two equal halves, 2px red frame and full-height 2px dividers. */
    .rv-panels {
        flex-wrap: nowrap;
        gap: calc(22 * var(--u));
        padding: calc(28 * var(--u)) 0 calc(22 * var(--u));
    }

    .rv-panel {
        flex: 1 1 0;
        min-width: 0;
        border-width: 2px;
    }

    .rv-panel__head {
        padding: calc(11 * var(--u)) 10px;
        font-size: max(15px, calc(27 * var(--u)));
        line-height: 1.05;
    }

    .rv-panel__grid {
        flex-wrap: nowrap;
    }

    .rv-panel__item,
    .rv-panel--markets .rv-panel__item:nth-child(3n + 1),
    .rv-panel--scale .rv-panel__item:nth-child(odd) {
        padding: calc(18 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
        border-left: 2px solid #c22e2e;
        border-bottom: 0;
    }

    .rv-panel__grid > .rv-panel__item:first-child {
        border-left: 0;
    }

    /* Market cells size to their label, as in the design (wide TRANSPORTATION,
       narrow two-line DATA CENTERS); the four scale cells are equal. */
    .rv-panel--markets .rv-panel__item {
        flex: 1 1 auto;
    }

    .rv-panel--scale .rv-panel__item {
        flex: 1 1 0;
    }

    .rv-panel__icon-box {
        height: calc(52 * var(--u));
        /*margin-bottom: calc(10 * var(--u));*/
    }

    /* icons at their natural size (--w = PNG width, set inline) */
    .rv-panel__icon {
        width: calc(var(--w) * var(--u));
        height: auto;
        max-width: none;
    }

    .rv-panel__label {
        font-size: max(9px, calc(14 * var(--u)));
        line-height: 1.3;
        letter-spacing: .01em;
        white-space: nowrap;
    }

    .rv-panel__value {
        margin-bottom: calc(4 * var(--u));
        font-size: max(15px, calc(28 * var(--u)));
    }
}

/* Small desktops: two halves would squeeze six markets, so stack the panels. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .rv-panels {
        flex-wrap: wrap;
    }

    .rv-panel {
        flex-basis: 100%;
    }
}

/* Small vertical adjustment requested for version 3 */
@media (min-width: 992px) {
    .rv-hero,
    .rv-hero__content,
    .rv-panels {
        position: relative;
        top: -5px;
    }
}