/*
 * Gallery section styles - homepage widget, full listing page and
 * details/print page.
 *
 * Typography intentionally matches the rest of the frontend site
 * (see public/defaultfiles/css/style.css):
 *   - base font: 'Open Sans', sans-serif, 14px (site body default)
 *   - heading color/weight: #092063, 600 (as used by .page-title span)
 *   - secondary/meta text: #878585 (as used by .spons_detail / .spons_name)
 */

.gallery-cont,
.gallery-listing,
.gallery-details-page {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #333;
}

.gallery-cont {
    margin-top: 30px;
}
.gallery-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -10px;
}
.gallery-grid-item {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 25%;
    flex: 1 1 25%;
    max-width: 25%;
    padding: 0 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
}
.gallery-grid-item img {
    width: 100%;
    height: auto;
    display: block;
}
.gallery-grid-item .gallery-item-title {
    margin-top: 8px;
    font-weight: 600;
    font-size: 16px;
    color: #000;
}
.gallery-grid-item .gallery-item-title a {
    color: #000;
}
.gallery-grid-item .gallery-item-caption {
    font-size: 13px;
    color: #878585;
    text-transform: uppercase;
    margin-bottom: 4px;
}
@media (max-width: 767px) {
    .gallery-grid-item {
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
        max-width: 50%;
    }
}

/* Gallery full listing page (/gallery) */
/* The site-wide .page-title heading style (public/defaultfiles/css/style.css)
   draws a horizontal rule under every page-title via a :after pseudo-element.
   That rule is shared across many sections (e.g. "SPONSORED TOPICS", the
   homepage "GALLERY" widget heading), so it is NOT changed here. Instead this
   selector is scoped ONLY to the /gallery full-listing page's own heading
   (which carries the extra .gallery-listing-heading class) and is more
   specific than the shared rule, so it overrides it there without affecting
   .page-title anywhere else on the site. */
.page-title.gallery-listing-heading:after {
    content: none;
    background: transparent;
    display: none;
}

.gallery-listing {
    margin-top: 15px;
}
.gallery-list-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    padding: 15px 0;
}
.gallery-list-thumb {
    -ms-flex: 0 0 150px;
    flex: 0 0 150px;
    max-width: 150px;
    margin-right: 20px;
}
.gallery-list-thumb img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    display: block;
}
.gallery-list-detail {
    -ms-flex: 1;
    flex: 1;
}
.gallery-posted-date {
    color: #878585;
    font-size: 13px;
    margin-bottom: 4px;
}
.gallery-title a {
    font-size: 18px;
    font-weight: 600;
    color: #000;
}
.gallery-description {
    margin: 6px 0;
    font-size: 14px;
    color: #878585;
}
.gallery-description a {
    color: #878585;
}
.gallery-enlarge-link {
    font-size: 14px;
    font-weight: 600;
}

/* Gallery infographic detail / print page (/gallery-details) */
/* Scoped the same way as .gallery-listing-heading above: removes the
   shared .page-title underline only from this infographic detail page's
   "INFOGRAPHIC: <title>" heading, leaving .page-title untouched elsewhere. */
.page-title.gallery-details-heading:after {
    content: none;
    background: transparent;
    display: none;
}

/* "first title color should be normal": the shared .page-title span style
   colors headings brand-blue (#092063, see style.css); on this page the
   heading now includes the actual infographic title text, so it is
   normalized to the same plain body text color used elsewhere on this
   page instead of the special heading blue. */
/* Only the appended title text is normalized; the "INFOGRAPHIC:" label
   keeps the brand-blue color the shared .page-title span rule already
   gives it (public/defaultfiles/css/style.css), since only the outer
   <span> (wrapping "INFOGRAPHIC:") is targeted by that shared rule and
   this inner span is more specific. */
.page-title.gallery-details-heading .gallery-details-title-inline {
    color: #333;
}

/* Left-align (instead of centered) so the heading text starts at the
   same left edge as the infographic image below it. */
.gallery-details-page {
    text-align: left;
}
/* This title used to also render on-screen, but it now duplicates the
   title already shown in the "INFOGRAPHIC: <title>" heading above, so it
   is hidden on screen and shown only in the printed/saved output (the
   heading itself is marked .no-print and does not appear there). */
.gallery-detail-title {
    display: none;
    font-size: 24px;
    font-weight: 600;
    color: #092063;
    margin-bottom: 15px;
}
.gallery-detail-image img {
    max-width: 100%;
    height: auto;
}
.gallery-detail-description {
    max-width: 800px;
    margin: 15px auto 0;
    font-size: 14px;
    text-align: left;
    color: #333;
}

@media print {
    .no-print,
    header, footer, nav, .top-header, .navbar, .site-footer {
        display: none !important;
    }
    #gallery-print-area {
        width: 100%;
        font-family: 'Open Sans', sans-serif;
    }
    .gallery-detail-title {
        display: block;
    }
}