/* ==========================================================================
   journals.css — Journals & Publications page
   --------------------------------------------------------------------------
   This file is ADDITIVE ONLY. It does not override or redeclare any of the
   theme's existing classes (thm-btn, sidebar__*, blog-details__*, container,
   row, col-*). It only styles the new markup introduced on journals.php:
   .publications, .publication-card, .pdf-modal and their children.

   If the theme exposes CSS custom properties for its palette/fonts (check
   assets/css/style.css or theme.css), replace the --pub-* fallback values
   below with the real var() references so this page inherits the exact
   brand colours and font automatically. As shipped, the fallbacks below
   are neutral so the page still looks correct even without that step.
   ========================================================================== */

.publications {
    --pub-primary: var(--thm-base, #0e8a5f);
    --pub-dark: var(--thm-black, #16213e);
    --pub-text: var(--thm-text, #6b7385);
    --pub-border: #ececec;
    --pub-radius: 6px;
    --pub-shadow: 0 10px 60px rgba(0, 0, 0, 0.07);
    padding: 120px 0;
    font-family: inherit;
}

/* ---------- Toolbar: search + filters ---------- */
.publications__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 50px;
}

.publications__search-form {
    position: relative;
    flex: 1 1 320px;
    max-width: 420px;
}

.publications__search-form input[type="search"] {
    width: 100%;
    height: 55px;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 0 55px 0 20px;
    font-size: 15px;
    color: var(--pub-dark);
    background: #fff;
}

.publications__search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--pub-primary);
}

.publications__search-form button {
    position: absolute;
    top: 0;
    right: 0;
    width: 55px;
    height: 55px;
    border: none;
    background: var(--pub-primary);
    color: #fff;
    border-radius: 0 var(--pub-radius) var(--pub-radius) 0;
    cursor: pointer;
}

.publications__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.publications__filter-btn {
    border: 1px solid var(--pub-border);
    background: #fff;
    color: var(--pub-dark);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.publications__filter-btn:hover,
.publications__filter-btn.is-active {
    background: var(--pub-primary);
    border-color: var(--pub-primary);
    color: #fff;
}

/* ---------- Featured publication ---------- */
.publications__featured {
    background: #f8f8f8;
    border-radius: var(--pub-radius);
    padding: 40px;
    margin-bottom: 60px;
}

.publications__featured-label {
    display: inline-block;
    background: var(--pub-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 30px;
    margin-bottom: 15px;
}

.publications__featured-img img {
    width: 100%;
    border-radius: var(--pub-radius);
    box-shadow: var(--pub-shadow);
}

/* ---------- Publication grid & cards ---------- */
.publications__grid {
    margin-top: 0;
}

.publication-item {
    margin-bottom: 30px;
}

.publication-card {
    background: #fff;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--pub-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.publication-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.publication-card__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f1f1;
}

.publication-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.publication-card:hover .publication-card__thumb img {
    transform: scale(1.06);
}

.publication-card__badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--pub-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 5px 12px;
    border-radius: 30px;
}

.publication-card__content {
    padding: 22px 22px 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.publication-card__title {
    font-size: 19px;
    line-height: 1.35;
    margin-bottom: 10px;
}

.publication-card__text {
    font-size: 14px;
    color: var(--pub-text);
    margin-bottom: 16px;
    flex-grow: 1;
}

.publication-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
    color: var(--pub-text);
    margin-bottom: 20px;
}

.publication-card__meta-item i {
    color: var(--pub-primary);
    margin-right: 5px;
}

.publication-card__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.publication-card__btns .thm-btn {
    padding: 10px 20px;
    font-size: 13px;
}

/* Secondary/outline variant of the theme button, for Download actions
   next to a primary Preview thm-btn */
.thm-btn.thm-btn--outline {
    background: transparent;
    color: var(--pub-primary);
    border: 1px solid var(--pub-primary);
}

.thm-btn.thm-btn--outline:hover {
    background: var(--pub-primary);
    color: #fff;
}

/* ---------- Empty state ---------- */
.publications__empty {
    text-align: center;
    padding: 70px 20px;
    border: 1px dashed var(--pub-border);
    border-radius: var(--pub-radius);
    color: var(--pub-text);
}

.publications__empty i {
    font-size: 40px;
    color: var(--pub-primary);
    margin-bottom: 15px;
}

.publications__empty h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

/* ---------- Load more ---------- */
.publications__load-more {
    text-align: center;
    margin-top: 30px;
}

/* ==========================================================================
   PDF Preview Modal
   ========================================================================== */
.pdf-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.pdf-modal.is-open {
    display: block;
}

.pdf-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 30, 0.75);
}

.pdf-modal__dialog {
    position: relative;
    max-width: 1000px;
    width: 94%;
    height: 90vh;
    margin: 5vh auto 0;
    background: #fff;
    border-radius: var(--pub-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.pdf-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--pub-border);
    background: #fafafa;
}

.pdf-modal__title {
    font-size: 17px;
    margin: 0;
    padding-right: 20px;
}

.pdf-modal__close {
    border: none;
    background: transparent;
    font-size: 18px;
    color: var(--pub-dark);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pdf-modal__close:hover {
    background: var(--pub-border);
}

.pdf-modal__body {
    position: relative;
    flex: 1;
    background: #525659; /* neutral document-viewer backdrop */
}

.pdf-modal__frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.pdf-modal__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    gap: 8px;
}

.pdf-modal__footer {
    padding: 14px 22px;
    border-top: 1px solid var(--pub-border);
    text-align: right;
    background: #fafafa;
}

body.pdf-modal-open {
    overflow: hidden;
}

/* ==========================================================================
   Responsive breakpoints — matches the theme's Bootstrap grid behaviour
   ========================================================================== */
@media (max-width: 991px) {
    .publications { padding: 80px 0; }
    .publications__toolbar { flex-direction: column; align-items: stretch; }
    .publications__search-form { max-width: 100%; }
    .publications__featured { padding: 26px; }
    .pdf-modal__dialog { height: 92vh; margin-top: 4vh; }
}

@media (max-width: 767px) {
    .publications { padding: 60px 0; }
    .publications__filters { gap: 8px; }
    .publications__filter-btn { padding: 8px 14px; font-size: 13px; }
    .publication-card__btns { flex-direction: column; }
    .publication-card__btns .thm-btn { width: 100%; text-align: center; }
    .pdf-modal__dialog { width: 100%; height: 100vh; margin-top: 0; border-radius: 0; }
}