/* ============================
   PUBLICATIONS PAGE (Europe House)
   File: /assets/css/publication.css
   ============================ */

/* Safety: box sizing */
.publications-page,
.publications-page * {
  box-sizing: border-box;
}

/* ---------- PAGE WRAPPER ---------- */
.publications-page {
  width: 100%;
}

/* ---------- HEADER STRIP (WHITE AREA) ---------- */
.publications-header-wrapper {
  background: #fff;
}

.publications-header-inner {
  width: 1300px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Left: icon + title */
.publications-header-left {
  display: flex;
  align-items: center;
  gap: 20px; /* 20px padding to the right of icon */
}

.publications-icon {
  width: 61px;
  height: 61px;
  display: block;
}

/* Title block */
.publications-title-wrap .kryetitull {
  line-height: 1;
}

/* Right: description aligned to far right within 1300 */
.publications-header-right {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  max-width: 520px;
}

.publications-header-right .shpjegimi {
  line-height: 1.25;
}

/* Grey divider line below header */
.publications-header-divider {
  width: 1300px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  height: 1px;
  background: #C6C6C6;
}

/* ---------- FILTERS ROW ---------- */
.publications-filters-wrapper {
  width: 1300px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  padding-top: 40px;  /* 40px below divider */
  padding-bottom: 30px; /* 30px below underlines to the grey section */
  background: #fff;
}

/* UPDATED: fixed-width filter controls like Events/Newsblog */
.publications-filters-form {
  display: grid;
  grid-template-columns: repeat(3, 90px) auto; /* 3 filters @ 90px + submit */
  gap: 45px;                                   /* requested spacing */
  align-items: end;
  justify-content: start;
}

/* One filter block */
.publications-filter-block .filters {
  padding-bottom: 10px; /* “Each Filter category has 10px padding below” */
}

/* Select + underline wrapper (fixed width + caret positioning) */
.publications-filter-select-wrapper {
  width: 90px;
  position: relative;
}

/* The dropdown */
.publications-filter-select {
  width: 90px;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0 14px 8px 0; /* right padding = room for caret */
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #000;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

/* Underline */
.publications-filter-underline {
  width: 90px;
  height: 1px;
  background: #000; /* underline 1px #000 */
}

/* Caret pinned to underline end */
.publications-filter-select-wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10px; /* matches the working alignment */
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #000;
  pointer-events: none;
}

/* Optional “Apply” button – hide it visually (filters still work on submit/Enter) */
.publications-filter-submit {
  display: flex;
  align-items: flex-end;
}

.publications-filter-button {
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
}

/* ---------- GREY BACKGROUND AREA ---------- */
.publications-list-wrapper {
  background: #F1F6F8;
  padding: 40px 0 60px 0;
}

.publications-list-inner {
  width: 1300px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

/* Empty state */
.publications-empty {
  margin: 0;
  padding: 24px 0;
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #555353;
}

/* ---------- GRID (2 cards per row) ---------- */
.publications-grid {
  display: grid;
  grid-template-columns: repeat(2, 632px);
  justify-content: center; /* center inside 1300 */
  gap: 36px;               /* adjust if you want tighter/looser */
}

/* Responsive: stack to 1 column when needed */
@media (max-width: 1400px) {
  .publications-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .publication-card {
    width: 100%;
    max-width: 632px;
    margin: 0 auto;
  }
}

/* ---------- PUBLICATION CARD ---------- */
.publication-card {
  width: 632px;
  height: 334px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  background: transparent;
}

/* Left part 396x334 */
.publication-card-left {
  width: 396px;
  height: 334px;
  display: flex;
  flex-direction: column;
}

/* Top left: 396x264, bg #DBDDE0 */
.publication-card-top {
  width: 396px;
  height: 264px;
  background: #DBDDE0;
  position: relative;
}

.publication-card-top-inner {
  padding-top: 45px;
  padding-left: 38px;
  padding-right: 24px;
}

/* Title + date */
.publication-cardH1 {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 10px 0;
  color: #000;
}

.dates {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #8E8D8D;
}

/* Bottom left: 396x70, bg #4433EE */
.publication-card-bottom {
  width: 396px;
  height: 70px;
  background: #4433EE;
  display: flex;
  align-items: center;
}

.publication-card-bottom-inner {
  width: 100%;
  padding-left: 38px;
  padding-right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* “Download PDF” label */
.publication-download {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 18px; /* NOTE: you wrote 42px; that is visually huge for 70px height */
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

/* Pills */
.publication-download-pills {
  display: flex;
  gap: 8px;
}

.publication-lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 54px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  color: #4433EE;
  text-decoration: none;
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
}

.publication-lang-pill--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Right part 236x334 (image) */
.publication-card-right {
  width: 236px;
  height: 334px;
  background: #fff;
}

.publication-card-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* fills frame like you requested */
}

/* =========================
   MOBILE: stack publication card (title -> image -> download)
   Keeps desktop intact.
   ========================= */
@media (max-width: 680px){

  /* Make grid 1 column and prevent overflow */
  .publications-grid{
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Card becomes vertical */
  .publication-card{
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
  }

  /* Left and right become full width */
  .publication-card-left,
  .publication-card-right{
    width: 100% !important;
    height: auto !important;
  }

  /* Reorder: top first, image second, bottom last */
  .publication-card-top{ order: 1; }
  .publication-card-right{ order: 2; }
  .publication-card-bottom{ order: 3; }

  /* Top section sizing */
  .publication-card-top{
    width: 100% !important;
    height: auto !important;
    padding-bottom: 8px;
  }

  .publication-card-top-inner{
    padding: 22px 18px 10px 18px !important; /* smaller mobile padding */
  }

  /* Image full width and fixed nice height */
  .publication-card-right{
    background: #fff; /* optional */
  }

  .publication-card-image{
    width: 100% !important;
    height: 220px;           /* adjust if you want */
    object-fit: cover;
    display: block;
  }

  /* Download bar */
  .publication-card-bottom{
    width: 100% !important;
    height: auto !important;
    padding: 14px 0;
  }

  .publication-card-bottom-inner{
    padding: 0 18px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  /* Pills wrap nicely */
  .publication-download-pills{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Prevent any long text from pushing layout */
  .publication-cardH1{
    word-break: break-word;
  }
}

/* =========================
   MOBILE: Publications header layout
   Smaller icon + title, subtitle below
   ========================= */
@media (max-width: 680px){

  /* Header container stacks vertically */
  .publications-header-inner{
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 20px 0 12px 0;
    gap: 10px;
  }

  /* Left side (icon + title) */
  .publications-header-left{
    width: 100%;
    align-items: center;
    gap: 12px;
  }

  /* Icon smaller */
  .publications-icon{
    width: 36px;
    height: 36px;
  }

  /* Title smaller */
  .publications-title-wrap .kryetitull{
    font-size: 28px;   /* was large desktop size */
    line-height: 1.15;
  }

  /* Move subtitle below title */
  .publications-header-right{
    width: 100%;
    margin-top: 6px;
    align-content: left-aligned;
  }

  /* Subtitle left-aligned and narrower */
  .publications-header-right .shpjegimi{
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    max-width: 100%;
  }
}

.publication-card.is-hidden{
  display:none;
}

.publications-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:34px;
}

.publications-more-btn{
  border:none;
  background:#4433EE;
  color:#fff;
  padding:14px 42px;
  border-radius:999px;
  cursor:pointer;
  font-family:"Kanit", sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1;
}

.publication-card.is-hidden { display: none; }