/* ==========================================================================
   Press Releases (listing page) — theme
   Reuses the same re-skin as Procurement-Sourcing-Intelligence.php (Poppins,
   green/orange brand palette, card + shadow language) via @import, same
   pattern as the consulting pages. css/press-releases.css (the page's
   original stylesheet, also used elsewhere) is kept and loaded alongside
   this file for the base list/sidebar layout rules — only the visual polish
   layer lives here.
   ========================================================================== */
@import url("procurement-sourcing-intelligence.css");

/* ---------- Intro line under the page heading ---------- */
.pr-intro {
    color: #566573;
    font-size: 15.5px;
    margin: -6px 0 24px;
}

/* Sidebar enquiry-form card header — same treatment on every detail page
   (Press-Details.php / blogdetail.php / articledetail.php /
   infographics.php / infographics_details.php) for a consistent look
   across the site. */
.enquiry-card-header {
    background: #16484b;
    color: #fff;
    padding: 16px 20px;
}
.enquiry-card-header p {
    color: rgba(255, 255, 255, .85);
}

/* ---------- No-results state (search returns nothing) ---------- */
.pr-empty-state {
    background: #f8fafc;
    border-left: 4px solid #38908f;
    border-radius: 10px;
    padding: 26px;
    color: #566573;
    font-size: 15px;
}

/* ---------- In-page pagination fade while a page loads ---------- */
#pr-list-container {
    transition: opacity .2s ease;
}

/* ---------- Search box ---------- */
.pr-search-box {
    margin-bottom: 26px;
    max-width: 560px;
}
.pr-search-box .input-group {
    box-shadow: 0 6px 16px rgba(23, 72, 74, .08);
    border-radius: 30px;
    overflow: hidden;
}
.pr-search-box .form-control {
    border: 1px solid #dde3e8;
    border-right: none;
    border-radius: 30px 0 0 30px !important;
    padding: 12px 20px;
    font-size: 15px;
}
.pr-search-box .form-control:focus {
    box-shadow: none;
    border-color: #17484a;
}
.pr-search-box .sear-btn {
    border-radius: 0 30px 30px 0 !important;
    background: #17484a;
    border: 1px solid #17484a;
    color: #fff;
    padding: 15px 26px;
}
.pr-search-box .sear-btn:hover {
    background: #123638;
}

/* ---------- Press release cards ---------- */
/* 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 "report-card" image-overlay component elsewhere on the site.
   Bootstrap's own .card-body class (used here) collides with that name, so
   every press-release card's body was rendering as a black, absolutely
   positioned overlay — stacking all cards on top of one another instead of
   listing them. ".card.press .card-body" (3 classes) outweighs the bare
   ".card-body" (1 class), so this resets it back to normal flow. */
.card.press .card-body {
    position: static;
    width: auto;
    background: none;
    color: inherit;
    text-align: left;
    padding: 22px 26px;
}
.card.press {
    position: relative;
    border: none;
    border-left: 4px solid #38908f;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    margin-bottom: 20px;
    transition: box-shadow .25s ease, transform .25s ease, border-left-color .25s ease;
}
.press .card:hover {
    box-shadow: 0 12px 26px rgba(0, 0, 0, .1);
    transform: translateY(-3px);
    border-left-color: #ec4b3b;
}

/* Badge icon — same PR.png asset, framed as a compact rounded badge instead
   of a large flat square repeated identically on every card. The PNG itself
   is a solid teal square with the icon drawn in white (no transparency), so
   it's clipped into a circle rather than recolored — an invert filter just
   whitewashed the whole square since there's no transparent background for
   it to reveal. */
.press_list .pr-icon-badge {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(23, 72, 74, .25);
}
.press_list .pr-icon-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.press-heading p {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #17484a;
    margin-bottom: 8px;
    transition: color .2s ease;
}
.card.press:hover .press-heading p {
    color: #ec4b3b;
}
.press-content p {
    color: #566573;
    font-size: 14.5px;
    line-height: 1.65;
    margin-bottom: 0;
}
.press_list > div > a {
    text-decoration: none;
}
.press_list .row {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f2f4;
    align-items: center;
}
.press-date {
    color: #7a7a7a;
    font-size: 13px;
}
.press-date::before {
    content: '\f073';
    font-family: 'FontAwesome';
    margin-right: 6px;
    color: #38908f;
}
.view-more-link {
    text-align: right;
}
.view-more {
    background: #ec4b3b !important;
    color: #fff !important;
    border-radius: 20px;
    padding: 5px 18px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 10px rgba(236, 75, 59, .25);
    transition: background .2s ease, transform .2s ease;
}
.view-more:hover, .view-more:focus {
    background: #d33f30 !important;
    transform: translateX(2px);
}

/* ---------- Pagination ---------- */
.paginate {
    margin-top: 8px;
}
ul.setPaginate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.setPaginate li {
    display: inline-flex;
}
ul.setPaginate li.setPage {
    color: #566573;
    font-size: 13.5px;
    margin-right: 10px;
}
ul.setPaginate li.dot {
    color: #9aa5ac;
    padding: 0 4px;
}
/* Note: function.php's shared displayPaginationBelow() also echoes its own
   top-level <style> block with !important colors every time it's included
   (a site-wide quirk, not touched here since other pages rely on it) — that
   used to fight these colors when this page called that function. Since
   Press-Releases.php now renders its own pagination markup instead of
   calling that function, function.php is never included here and this
   styling applies cleanly without needing !important. */
ul.setPaginate li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #dde3e8;
    background: #fff;
    color: #46545c;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
ul.setPaginate li a:hover {
    background: #f1f6f6;
    border-color: #17484a;
    color: #17484a;
}
ul.setPaginate li a.current_page {
    background: #17484a;
    border-color: #17484a;
    color: #fff;
}

/* ---------- Sidebar enquiry panel ---------- */
@media (min-width: 992px) {
    #enquire_form {
        position: sticky;
        top: 24px;
    }
}
.panel.press {
    border: none;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    overflow: hidden;
}
.press .panel-heading {
    background: linear-gradient(135deg, #17484a 0%, #1f6b6d 100%) !important;
    padding: 20px 22px !important;
}
.press .panel-title.enquire-title {
    font-family: 'Poppins', sans-serif;
    color: #fff;
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}
.press .panel-body {
    background: #fff !important;
    padding: 22px !important;
}
.press .panel-body > span {
    display: block;
    color: #7a7a7a !important;
    margin-bottom: 14px;
}
.press .panel-body .form-group {
    margin-bottom: 14px;
}
.press .panel-body label {
    font-size: 13px;
    font-weight: 600;
    color: #17484a;
    margin-bottom: 4px;
}
.press .panel-body .form-control {
    border-radius: 8px;
    border: 1px solid #dde3e8;
    padding: 9px 12px;
    font-size: 14px;
}
.press .panel-body .form-control:focus {
    border-color: #17484a;
    box-shadow: 0 0 0 3px rgba(23, 72, 74, .12);
}
.enquire_submit_btn {
    background: #ec4b3b;
    color: #fff;
    border-radius: 24px;
    border: none;
    font-weight: 600;
    width: 100%;
    padding: 10px 0;
    box-shadow: 0 6px 14px rgba(236, 75, 59, .25);
}
.enquire_submit_btn:hover {
    background: #d33f30;
}
.enquire_reset_btn {
    background: #f1f3f5;
    color: #46545c;
    border-radius: 24px;
    border: none;
    font-weight: 600;
    width: 100%;
    padding: 10px 0;
}
.enquire_reset_btn:hover {
    background: #e4e7eb;
}