/* ==========================================================================
   Top Mobility Trends / Whitepaper (list + detail) — theme
   Reuses css/press-releases-theme.css (which itself imports
   procurement-sourcing-intelligence.css) for the base Poppins/teal skin,
   breadcrumb polish, .enquiry-card-header, .enquire_submit_btn/.enquire_reset_btn
   and toast styling — same sidebar enquiry form component
   (common/forms/enquiry_form.php, modelled on
   newdesign/includes/press-releases-enquire-form.php) is reused here, so
   this file only adds whitepaper-specific pieces: the report-card grid,
   the download/subscribe modals, and the detail-page image slider.
   ========================================================================== */
@import url("press-releases-theme.css");

/* ---------- Whitepaper cards (list page grid + detail page "You may
   also like") ---------- */
/* Same defensive reset press-releases-theme.css documents:
   newdesign/assets/css/customstyles.css has an unscoped ".card-body {
   position: absolute; bottom: 0; background: rgba(0,0,0,.5); ... }" rule
   written for a different image-hover-overlay component (.report-card)
   elsewhere on the site. Bootstrap's own .card-body (used here) collides
   with that name, so ".wp-card .card-body" (2 classes) has to outweigh
   the bare ".card-body" (1 class) to render as normal flow instead of a
   black overlay. Covers both the grid card (.wp-card) and the featured
   card (.wp-featured) — missing the latter here is exactly what caused
   the featured card's title/description to render as a full-width gray
   overlay stacked on top of the image instead of flowing beside it. */
.wp-card.card .card-body,
.wp-featured.card .card-body {
    position: static;
    width: auto;
    background: none;
    color: inherit;
    text-align: left;
}
.wp-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .07);
    margin-bottom: 24px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.wp-card:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .11);
    transform: translateY(-2px);
}
.wp-card .wp-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f4f6f7;
}
.wp-card .wp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wp-card .card-body {
    padding: 20px 22px 22px;
}
.wp-card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.35;
    color: #1a2b2f;
    margin-bottom: 10px;
    /* The markup also carries Bootstrap's .d-block ("display:block
       !important"), which otherwise wins over the plain "display:
       -webkit-box" below and silently disables -webkit-line-clamp — the
       card just wrapped to however many lines the title text needed (1 to
       4+) instead of ever actually capping at 3. !important here forces
       the clamp to stay in effect. */
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Reserve exactly 3 lines' worth of height (1.35em * 3) regardless of
       actual title length, so grid cards with a 1-line title don't end up
       shorter than neighbouring cards with a 3-line title in the same row. */
    min-height: 4.05em;
}
a.wp-card-title:hover {
    color: #17484a;
}
.wp-card-desc {
    color: #6b7a80;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wp-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.wp-card-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wp-empty-state {
    background: #f8fafc;
    border-left: 4px solid #38908f;
    border-radius: 10px;
    padding: 26px;
    color: #566573;
    font-size: 15px;
}

/* ---------- Featured card (most recent whitepaper, page 1 only) ---------- */
.wp-featured {
    border: none;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .09);
    overflow: hidden;
    margin-bottom: 28px;
}
.wp-featured-thumb {
    display: block;
    height: 100%;
    min-height: 180px;
    background: #f4f6f7;
}
.wp-featured-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wp-featured-body {
    padding: 18px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.wp-featured-badge {
    display: inline-block;
    background: #eaf3f3;
    color: #17484a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 4px 12px;
    margin-bottom: 8px;
    width: fit-content;
}
.wp-featured-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: #1a2b2f;
    margin-bottom: 8px;
}
a.wp-featured-title:hover {
    color: #17484a;
}
.wp-featured-desc {
    color: #566573;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Small circular icon buttons (download / share) ---------- */
.wp-icon-btn {
    background: #17484a;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    transition: background .2s ease;
    flex: none;
}
.wp-icon-btn:hover {
    background: #123638;
    color: #fff;
}

/* ---------- Share dropdown (list + detail) ---------- */
.wp-share {
    position: relative;
    display: inline-block;
}
.wp-share-menu {
    display: none;
    position: absolute;
    bottom: 48px;
    left: 0;
    z-index: 20;
    min-width: 170px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
    padding: 6px;
}
.wp-share-menu.show {
    display: block;
}
.wp-share-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 6px;
    color: #33424a;
    font-size: 13.5px;
    text-decoration: none;
}
.wp-share-menu a:hover {
    background: #f4f6f7;
}

/* ---------- "View More" pill button ---------- */
.wp-viewmore-btn {
    background: #17484a;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13.5px;
    padding: 10px 22px;
    transition: background .2s ease;
}
.wp-viewmore-btn:hover {
    background: #123638;
    color: #fff;
}

/* ---------- Detail-page download button (share/download bar, not a card) ---------- */
.wp-download-btn {
    background: #17484a;
    color: #fff !important;
    border: none;
    border-radius: 22px;
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .2s ease;
}
.wp-download-btn:hover {
    background: #123638;
    color: #fff;
}

/* ---------- Download & subscribe modals ---------- */
/* Both use the same treatment as the rest of the migrated site: a
   teal-to-dark-teal gradient header (matches .enquiry-card-header on the
   sidebar form), white body, rounded fields. Single-step forms — the old
   two-step "check existing subscriber" flow depended on a backend endpoint
   that no longer exists (see common/forms/download_modal.php); both now
   collect all fields up front. */
#documentmyModal .modal-content,
#exampleModalCenter .modal-content {
    border-radius: 14px;
    border: none;
    overflow: hidden;
}
#documentmyModal .modal-header,
#exampleModalCenter .modal-header {
    background: linear-gradient(135deg, #17484a 0%, #1f6b6d 100%);
    color: #fff;
    padding: 18px 24px;
}
#documentmyModal .modal-title,
#exampleModalCenter .modal-title {
    font-size: 17px;
    font-weight: 600;
}
#documentmyModal .modal-header .btn-close,
#exampleModalCenter .modal-header .btn-close {
    flex: none;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    min-width: 30px;
    background-color: rgba(255, 255, 255, .18);
    border-radius: 50%;
    filter: brightness(0) invert(1);
    opacity: 1;
}
#documentmyModal .modal-header .btn-close:hover,
#exampleModalCenter .modal-header .btn-close:hover {
    background-color: rgba(255, 255, 255, .3);
}
#documentmyModal .modal-body,
#exampleModalCenter .modal-body {
    padding: 26px;
}
#documentmyModal .form-control,
#documentmyModal .form-select,
#exampleModalCenter .form-control,
#exampleModalCenter .form-select {
    border-radius: 8px;
    border: 1px solid #dde3e8;
    padding: 10px 14px;
    font-size: 14px;
}
#documentmyModal .form-control:focus,
#documentmyModal .form-select:focus,
#exampleModalCenter .form-control:focus,
#exampleModalCenter .form-select:focus {
    border-color: #17484a;
    box-shadow: 0 0 0 3px rgba(23, 72, 74, .12);
}
#exampleModalCenter .modal-intro {
    color: #566573;
    font-size: 14.5px;
    margin-bottom: 18px;
}
/* Download modal keeps the brand orange CTA (matches the site's other
   "buy now"/order-action buttons); subscribe modal gets its own solid teal
   submit so the two don't look identical despite sharing the header/field
   treatment above. */
#documentmyModal .modal-submit {
    background: #ec4b3b;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-weight: 600;
    padding: 10px 30px;
    width: 100%;
}
#documentmyModal .modal-submit:hover {
    background: #d33f30;
}
#exampleModalCenter .modal-submit {
    background: #17484a;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-weight: 600;
    padding: 10px 30px;
    width: 100%;
}
#exampleModalCenter .modal-submit:hover {
    background: #123638;
}
#documentmyModal .modal-terms,
#exampleModalCenter .modal-terms {
    font-size: 12px;
    color: #7a7a7a;
    margin-top: 12px;
    text-align: center;
}
.sub-modal-close-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: #959595;
    font-size: 14px;
}

/* ---------- Detail page: image slider + share/download bar ---------- */
.wp-slider {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    margin-bottom: 18px;
}
.wp-slider img {
    width: 100%;
    display: block;
}
/* Big prev/next arrows overlaid on the image, vertically centered at the
   left/right edges — overrides owl.theme.default.min.css's default
   below-carousel small gray nav buttons. */
.wp-slider .owl-nav {
    margin: 0;
    padding: 0;
    pointer-events: none;
}
.wp-slider .owl-nav [class*="owl-"] {
    /* owl.carousel.min.css's own ".owl-carousel .owl-nav button.owl-next"
       rule (font: inherit) is one selector more specific than this one — it
       wins the cascade regardless of stylesheet order and was silently
       collapsing font-size back down, which is why bumping it alone did
       nothing. !important on the actually-contested properties forces this
       rule to win instead.
       Positioned directly (not via a flex/space-between wrapper) against
       .owl-carousel itself — the nearest position:relative ancestor per
       owl.carousel.min.css — so each arrow pins to the true edge of the
       image regardless of .owl-nav's own box width. */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: auto;
    width: 50px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    color: #fff;
    font-size: 136px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65));
    transition: color .2s ease;
}
.wp-slider .owl-nav .owl-prev {
    left: 35px !important;
}
.wp-slider .owl-nav .owl-next {
    right: 35px !important;
}
.wp-slider .owl-nav [class*="owl-"]:hover {
    background: none;
    color: #eaf3f3;
}
.wp-share-download {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.wp-detail-desc {
    color: #46545c;
    line-height: 1.75;
    font-size: 15px;
}
.wp-related-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #17484a;
    font-size: 18px;
    margin: 30px 0 16px;
}

/* ---------- "You may also like" — right sidebar, image-only pair
   (below the enquiry form on the whitepaper detail page) ---------- */
.wp-related-sidebar {
    margin-top: 24px;
}
.wp-related-sidebar .wp-related-title {
    margin: 0 0 12px;
}
.wp-related-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    background: #f4f6f7;
}
.wp-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}
.wp-related-thumb:hover img {
    transform: scale(1.05);
}

@media screen and (max-width: 768px) {
    #documentmyModal .modal-body,
    #exampleModalCenter .modal-body {
        padding: 18px;
    }

    /* The slide images are infographic screenshots (text near the top/edges),
       so on narrow screens where the full-width image would otherwise scale
       down to a short strip, this reserves a taller box and uses
       object-fit: contain (not cover) — the whole slide always stays
       readable, letterboxed rather than cropped, instead of shrinking with
       the viewport width. */
    .wp-slider {
        background: #f4f6f7;
    }
    .wp-slider img {
        height: 280px;
        width: 100%;
        object-fit: contain;
    }
    /* procurement-sourcing-intelligence.css (pulled in transitively via this
       file's @import chain — whitepaper-theme.css -> press-releases-theme.css
       -> procurement-sourcing-intelligence.css) has an unscoped
       ".owl-carousel { height: 100px !important; }" for its own trusted-by
       logo strip at this same breakpoint. Being unscoped, it also clips our
       slider's #wpSlider carousel down to 100px regardless of the img height
       above, which was the actual reason the previous fix looked like it did
       nothing. Only !important + higher specificity can beat !important. */
    .wp-slider .owl-carousel {
        height: 280px !important;
    }
}