/* Label landing pages: /school-labels and /camp-labels (Views/Catalog/SchoolLabels.cshtml,
   CampLabels.cshtml). Loaded after catalog.css.

   The pages are built from the catalog page's own pieces - .product_set / .package_set,
   the catalog thumbnails at their usual 4-across (products) and 3-across (packages), the
   .product_banner text card, and the product-page feature icons (label-* sprite classes in
   site_1200.css). Only the banner, the copy blocks and the question cards are styled here. */

/* Section titles: same look as the catalog's h3.set_title, on an h2. */
.landing_labels h2.set_title {
    margin: 3px 0 12px;
    padding-bottom: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 22px;
}

.landing_labels .landing_block {
    margin: 26px 12px 0;
}

/* Banner: full width of the section, like the special edition banner. The art is
   1200x150 with the people in the middle and right, so the heading sits on a tab at the
   left edge, clear of the faces. Phones get their own 800x200 image (the <source> in
   the view) and the heading drops below it. */
.landing_banner {
    position: relative;
    overflow: hidden;
    padding-top: 12.5%;
    background: #f4f4f4;
}

    .landing_banner img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .landing_banner h1 {
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin: 0;
        padding: 8px 20px 9px 24px;
        background: rgba(255, 255, 255, 0.9);
        font-family: 'Bitter', serif;
        font-weight: 700;
        font-size: 30px;
        line-height: 1.1;
        text-transform: uppercase;
        white-space: nowrap;
        color: #444;
    }

    /* Translated camp headings are too long for the clear strip left of the campers
       (about 22% of the banner), so they wrap onto two smaller lines. */
    .landing_banner.landing_banner_tight h1 {
        max-width: 22%;
        padding: 7px 14px 8px 20px;
        font-size: 20px;
        line-height: 1.15;
        white-space: normal;
    }

.landing_intro {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 12px;
}

/* Feature checklist: the product-page icons, laid out as one row. */
.landing_features {
    list-style: none;
    margin: 22px 12px 0;
    padding: 0 0 12px;
    border-bottom: 1px solid #dbdbdb;
    text-align: center;
}

    .landing_features li {
        display: inline-block;
        vertical-align: top;
        width: 15.5%;
        min-width: 120px;
        padding: 0 6px 6px;
    }

        .landing_features li p {
            margin: 4px 0 0;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.2;
        }

/* Cards sit inside .landing_block, which already has the side margins. */
.landing_labels.catalog .package_set,
.landing_labels.catalog .product_set {
    margin: 0;
    padding: 0;
}

/* Text cards ("see all ...") are links here; keep the catalog look. */
.landing_labels a.thumbnail.landing_text_card,
.landing_labels a.thumbnail.landing_text_card:hover {
    text-decoration: none;
}

    .landing_labels a.thumbnail.landing_text_card:hover h4 {
        text-decoration: underline;
    }

.landing_labels.catalog .package_set .product_options_thumbs .thumbnail .product_banner {
    min-height: 467px;
}

.landing_labels .landing_text_card .landing_text_link {
    display: block;
    margin-top: 18px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1376a6;
}

/* Questions: one card each, equal height per row. */
.landing_faq {
    padding-bottom: 24px;
}

.landing_faq_cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .landing_faq_cards:before,
    .landing_faq_cards:after {
        display: none;
    }

    .landing_faq_cards > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.landing_labels .product_options_thumbs .thumbnail.landing_faq_card {
    width: 100%;
    padding: 22px 24px 18px;
}

.landing_faq_card h3 {
    font-family: 'Bitter', serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.25;
    color: #1376a6;
    margin: 0 0 10px;
}

.landing_faq_card p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 1199px) {
    .landing_banner h1 {
        font-size: 25px;
        padding: 7px 16px 8px 20px;
    }

    .landing_banner.landing_banner_tight h1 {
        font-size: 17px;
        padding: 6px 11px 7px 16px;
    }
}

@media (max-width: 991px) {
    .landing_banner h1 {
        font-size: 19px;
        padding: 5px 12px 6px 15px;
    }

    .landing_banner.landing_banner_tight h1 {
        font-size: 13px;
        padding: 4px 8px 5px 12px;
    }

    .landing_features li {
        width: 32%;
    }
}

@media (max-width: 767px) {
    .landing_labels .landing_block {
        margin: 20px 8px 0;
    }

    .landing_labels h2.set_title {
        text-align: center;
    }

    .landing_banner {
        padding-top: 0;
    }

        .landing_banner img {
            position: static;
            display: block;
            height: auto;
            -webkit-aspect-ratio: 4 / 1;
            aspect-ratio: 4 / 1;
        }

        .landing_banner h1 {
            position: static;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            padding: 9px 12px 10px;
            background: #fff;
            font-size: 24px;
            text-align: center;
            white-space: normal;
        }

        .landing_banner.landing_banner_tight h1 {
            max-width: none;
            padding: 9px 12px 10px;
            font-size: 22px;
        }

    .landing_intro {
        margin: 0 8px;
        font-size: 15px;
    }

    .landing_features {
        margin: 18px 8px 0;
    }

        .landing_features li {
            width: 32%;
            min-width: 0;
        }

            .landing_features li p {
                font-size: 12px;
            }

    .landing_labels.catalog .product_options_thumbs .thumbnail.landing_text_card {
        height: auto;
    }

    .landing_labels.catalog .package_set .product_options_thumbs .thumbnail .product_banner,
    .landing_labels.catalog .product_set .product_options_thumbs .thumbnail .product_banner {
        min-height: 0;
        padding: 28px 24px;
    }
}