/* =============================================================================
   Konverz Library — Resources page redesign (desktop-7 mockup)
   -----------------------------------------------------------------------------
   PURE PRESENTATION LAYER. Loaded AFTER style.css / responsive.css so it wins
   on the cascade. Nothing in style.css is edited and no data-rendering PHP is
   touched — every rule below is scoped to the Frontpage template body class.
   ============================================================================= */

body.page-template-template-frontend {
  --lib-ink:        #16202B;
  --lib-muted:      #6B7280;
  --lib-line:       #E6E9EE;
  --lib-pink:       #E8408A;
  --lib-blue-soft:  #D9EDFC;
  --lib-radius:     16px;
  font-family: "Poppins", sans-serif;
}

/* the theme paints a pink line-art SVG behind everything — the new hero has its
   own artwork, so switch the global one off on this template only */
body.page-template-template-frontend .top-wrapper {
  background-image: none;
}


/* =============================================================================
   1. HERO
   ============================================================================= */
body.page-template-template-frontend .slider-section {
  background: url(../images/hero-laibary-page.png) no-repeat top center;
  background-size: 100% auto;
  padding: 0 0 10px;
}

/* the mockup drops the "Trending on Konverz" rail — hide it and let the
   headline column run full width & centred. (Markup + PHP left intact.) */
body.page-template-template-frontend .slider-section .trending-bnner {
  display: none;
}

body.page-template-template-frontend .slide-left-main > .row > [class*="col-"]:first-child {
  flex: 0 0 auto;
  width: 100%;
}

/* NOTE: these blocks carry Bootstrap's .float-start (float:left !important), so
   `margin: auto` cannot centre them until the float is cleared with !important. */
body.page-template-template-frontend .slide-left-text {
  padding: 34px 0 56px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  float: none !important;
}

/* small pink "Resources" eyebrow above the headline */
body.page-template-template-frontend .lib-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lib-pink);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 14px;
}

body.page-template-template-frontend .lib-eyebrow svg {
  width: 18px;
  height: 18px;
}

body.page-template-template-frontend .slide-left-text h1 {
  font-size: 56px;
  line-height: 1.16;
  font-weight: 700;
  color: var(--lib-ink);
  letter-spacing: -0.5px;
}

/* ---- search bar: one white pill holding the input + gradient CTA ---- */
body.page-template-template-frontend .slide-left-text form.search-form {
  margin: 34px auto 0;
  max-width: 640px;
  width: 100%;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--lib-line);
  border-radius: 999px;
  padding: 6px 6px 6px 10px;
  box-shadow: 0 6px 22px rgba(16, 32, 43, 0.06);
  float: none;
}

body.page-template-template-frontend .slide-left-text .serch-inpt {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  height: 48px;
  padding: 0 14px;
  float: none;
  font-size: 15px;
  color: var(--lib-ink);
}

body.page-template-template-frontend .slide-left-text .serch-inpt::placeholder {
  color: #9AA3AE;
}

/* kill the webkit search reset button so the pill stays symmetrical */
body.page-template-template-frontend .slide-left-text .serch-inpt::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

body.page-template-template-frontend .slide-left-text form.search-form button {
  flex: 0 0 auto;
  width: auto;
  height: 48px;
  margin: 0;
  padding: 0 22px;
  float: none;
  border-radius: 999px;
  line-height: 48px;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  background: linear-gradient(92deg, #F05A9B 0%, #E8408A 55%, #D62E7C 100%);
  box-shadow: 0 6px 16px rgba(232, 64, 138, 0.32);
  transition: filter .2s ease, transform .2s ease;
}

body.page-template-template-frontend .slide-left-text form.search-form button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* the markup separates the label and the arrow with   — collapse that gap
   and render the arrow as the round badge from the mockup */
body.page-template-template-frontend .slide-left-text form.search-form button i {
  margin-left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  vertical-align: middle;
}


/* =============================================================================
   2. TOPICS — tab row + category pills
   ============================================================================= */
body.page-template-template-frontend .topic-heading {
  background: transparent;
  padding: 10px 0 0;
}

/* mockup has no "Topics" title — the tabs are the heading. Hide the whole grid
   column, not just the h2, otherwise its 16.6% still pushes the tabs off-centre. */
body.page-template-template-frontend .topic-heading .container > .row > .col-md-2 {
  display: none;
}

body.page-template-template-frontend .topic-heading .container > .row {
  justify-content: center;
}

body.page-template-template-frontend .topic-heading .col-md-9 {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1080px;
}

/* ---- tabs: All / Read / Watch ---- */
body.page-template-template-frontend .gallery .gallery-filter {
  border-bottom: 1px solid var(--lib-line);
  text-align: center;
  float: none;
  display: flex;
  justify-content: center;
  gap: 26px;
}

body.page-template-template-frontend .gallery .gallery-filter .filter-item {
  font-size: 16px;
  font-weight: 500;
  color: var(--lib-muted);
  padding: 10px 4px 14px;
  margin-right: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body.page-template-template-frontend .gallery .gallery-filter .filter-item:hover {
  color: var(--lib-ink);
}

body.page-template-template-frontend .gallery .gallery-filter .filter-item.active {
  color: var(--lib-ink);
  font-weight: 600;
}

body.page-template-template-frontend .gallery .gallery-filter .filter-item.active:after {
  height: 2px;
  background: var(--lib-ink);
  bottom: -1px;
}

/* the two content-type tabs get their mockup glyphs. They are positional
   (2nd = Read, 3rd = Watch) because the labels come from the DB. */
body.page-template-template-frontend .gallery .gallery-filter .filter-item:nth-child(2)::before,
body.page-template-template-frontend .gallery .gallery-filter .filter-item:nth-child(3)::before {
  content: "";
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .85;
}

body.page-template-template-frontend .gallery .gallery-filter .filter-item:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}

body.page-template-template-frontend .gallery .gallery-filter .filter-item:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
}

/* ---- sub-category pills ---- */
body.page-template-template-frontend #buttons {
  margin: 22px 0 0;
  text-align: center;
  float: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

body.page-template-template-frontend .nesting-btn {
  float: none;
}

body.page-template-template-frontend #buttons button {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #4A5662;
  background: #FFFFFF;
  border: 1px solid var(--lib-line);
  border-radius: 999px;
  line-height: 1.4;
}

body.page-template-template-frontend #buttons button:hover {
  border-color: #C9D3DE;
  color: var(--lib-ink);
}

body.page-template-template-frontend #buttons button.active {
  background: #E8F1FB;
  border-color: #CADFF4;
  color: #1F6FB5;
  font-weight: 600;
}

/* the loader heading the AJAX handler injects into #buttons */
body.page-template-template-frontend #buttons h4 {
  width: 100%;
  font-size: 15px;
  color: var(--lib-muted);
}


/* =============================================================================
   3. SHARED CARD LOOK  (topics list + newsroom list)
   ============================================================================= */
body.page-template-template-frontend .topiclist-section {
  padding: 34px 0 20px;
}

body.page-template-template-frontend #topics-posts-container .topic-list,
body.page-template-template-frontend #posts-container .topic-list {
  background: #FFFFFF;
  border: 1px solid #EEF1F4;
  border-radius: var(--lib-radius);
  box-shadow: 0 2px 12px rgba(16, 32, 43, 0.05);
  padding: 16px;
  margin-bottom: 18px;
  position: relative;
  transition: box-shadow .22s ease, transform .22s ease;
}

body.page-template-template-frontend #topics-posts-container .topic-list:hover,
body.page-template-template-frontend #posts-container .topic-list:hover {
  box-shadow: 0 10px 26px rgba(16, 32, 43, 0.10);
  transform: translateY(-2px);
}

body.page-template-template-frontend .topic-listimg img {
  border-radius: 12px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

body.page-template-template-frontend .topic-listtext {
  border-bottom: 1px solid var(--lib-line);
  padding-bottom: 14px;
}

body.page-template-template-frontend .topic-listtext h4 {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
}

body.page-template-template-frontend .topic-listtext h4 a {
  color: var(--lib-ink) !important;
}

body.page-template-template-frontend .topic-listdetl {
  padding-top: 14px;
}

body.page-template-template-frontend .topic-listdetl .trending-owner img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

body.page-template-template-frontend .topic-listdetl .trending-owner h5 {
  font-size: 14px;
  font-weight: 500;
  color: var(--lib-ink);
}

body.page-template-template-frontend .topic-listdetl .trending-owner li {
  font-size: 14px;
  color: var(--lib-muted);
}

body.page-template-template-frontend .date-topiclist p {
  font-size: 14px;
  color: var(--lib-muted);
}


/* Some topics have no featured image — the PHP simply omits the <a><img>, which
   would leave a dead 33% gutter. Collapse it and let the text run full width. */
body.page-template-template-frontend #topics-posts-container .topic-list > .row:not(:has(.topic-listimg img)) > .col-md-4 {
  display: none;
}

body.page-template-template-frontend #topics-posts-container .topic-list > .row:not(:has(.topic-listimg img)) > .col-md-8 {
  width: 100%;
  flex: 0 0 auto;
}


/* ---- topics cards: image left, round arrow button on the right ----
   The arrow is a real <a> (printed by the AJAX renderers in functions.php)
   pointing at the same permalink as the thumbnail and the title, so clicking
   it opens the post instead of being decoration you can't click. */
body.page-template-template-frontend #topics-posts-container .topic-list-go {
  display: none;
}

@media (min-width: 768px) {
  body.page-template-template-frontend #topics-posts-container .topic-list {
    padding-right: 84px;
  }

  body.page-template-template-frontend #topics-posts-container .topic-list-go {
    display: block;
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--lib-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 19px;
    transition: transform .2s ease, box-shadow .2s ease;
  }

  body.page-template-template-frontend #topics-posts-container .topic-list-go:hover {
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 6px 16px rgba(11, 18, 38, 0.25);
  }
}


/* =============================================================================
   4. NEWSROOM & MEDIA — soft blue panel with a horizontal card rail
   ============================================================================= */
/* Un-floating this panel means it must (a) clear the floated sections above it
   and (b) establish a BFC so its own floated children still give it height —
   otherwise the blue background bleeds up behind the whole page. */
body.page-template-template-frontend .newssection {
  background: var(--lib-blue-soft);
  border-radius: 26px;
  max-width: 1240px;
  margin: 40px auto 60px;
  padding: 46px 12px 40px;
  width: auto !important;
  float: none !important;
  clear: both;
  display: flow-root;
}

body.page-template-template-frontend .news-heading {
  background: transparent;
  padding: 0 0 30px;
}

body.page-template-template-frontend .news-heading h2 {
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  color: var(--lib-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

body.page-template-template-frontend .news-heading h2::before {
  content: "";
  width: 34px;
  height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316202B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body.page-template-template-frontend .newslist {
  padding: 0;
}

/* ---- the rail wrapper that JS injects around #posts-container ---- */
body.page-template-template-frontend .news-rail {
  position: relative;
  width: 100%;
}

/* circular slide buttons, half-overlapping the panel edge like the mockup */
body.page-template-template-frontend .news-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(16, 32, 43, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background .2s ease, transform .2s ease;
}

body.page-template-template-frontend .news-nav:hover {
  background: #F4F8FC;
}

body.page-template-template-frontend .news-nav svg {
  width: 18px;
  height: 18px;
  stroke: var(--lib-ink);
}

body.page-template-template-frontend .news-nav[hidden] {
  display: none;
}

body.page-template-template-frontend .news-nav-prev { left: -14px; }
body.page-template-template-frontend .news-nav-next { right: -14px; }

/* turn the stacked list into a swipeable rail of vertical cards */
@media (min-width: 768px) {
  /* the rail spans the full panel — drop the Bootstrap column width/offset */
  body.page-template-template-frontend #posts-container {
    display: flex;
    gap: 18px;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 6px;
    /* NO scroll-snap here: `mandatory` re-snaps as the card images finish
       loading and lands the rail on the LAST card, so it opens pre-scrolled. */
    scroll-behavior: smooth;
    /* no visible scrollbar — the arrow buttons drive the rail */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body.page-template-template-frontend #posts-container::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* exactly four cards per view, so nothing is ever clipped mid-card */
  body.page-template-template-frontend #posts-container .topic-list {
    flex: 0 0 calc((100% - 54px) / 4);
    width: auto;
    float: none;
    margin-bottom: 0;
    display: flex;
  }

  /* image on top, text underneath — and stretch so every card in the rail ends
     at the same height with its meta row pinned to the bottom */
  body.page-template-template-frontend #posts-container .topic-list > .row {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
  }

  body.page-template-template-frontend #posts-container .topic-list > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-left: 0;
  }

  body.page-template-template-frontend #posts-container .topic-list > .row > .col-md-8 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  body.page-template-template-frontend #posts-container .newslist-full-head {
    flex: 1 1 auto;
  }

  body.page-template-template-frontend #posts-container .topic-listimg {
    margin-bottom: 14px;
  }

  /* source logo sits ABOVE the headline in the mockup */
  body.page-template-template-frontend #posts-container .newslist-full-head > .row {
    display: flex;
    flex-direction: column-reverse;
    margin: 0;
  }

  body.page-template-template-frontend #posts-container .newslist-full-head > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-left: 0;
  }

  body.page-template-template-frontend #posts-container .newsimg {
    margin-bottom: 8px;
  }

  body.page-template-template-frontend #posts-container .newsimg img {
    width: auto;
    max-width: 74px;
    max-height: 22px;
    object-fit: contain;
  }

  body.page-template-template-frontend #posts-container .topic-listtext h4 {
    font-size: 15px;
    line-height: 1.45;
  }

  /* author line then date line, stacked */
  body.page-template-template-frontend #posts-container .topic-listdetl > .row {
    display: block;
    margin: 0;
  }

  body.page-template-template-frontend #posts-container .topic-listdetl > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  body.page-template-template-frontend #posts-container .date-topiclist p {
    text-align: left;
    margin-top: 8px;
    font-size: 13px;
  }
}


/* =============================================================================
   5. SHOW MORE
   ============================================================================= */
body.page-template-template-frontend .showmorebtn {
  margin-top: 26px;
}

body.page-template-template-frontend .showmorebtn a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lib-ink);
}

body.page-template-template-frontend .showmorebtn a img {
  margin-left: 0;
  width: 14px;
}


/* =============================================================================
   6. CLOSING CTA BANNER
   ============================================================================= */
body.page-template-template-frontend .lib-cta {
  max-width: 1160px;
  margin: 0 auto 70px;
  padding: 0 12px;
  clear: both;
  display: flow-root;
}

body.page-template-template-frontend .lib-cta-inner {
  position: relative;
  border-radius: 22px;
  padding: 74px 30px;
  text-align: center;
  overflow: hidden;
  /* #05070F stays behind the artwork as a fallback and keeps the text readable
     while the PNG is still loading. */
  background: #05070F;
}

/* The wave PNG ships trough-down (rising left-to-right). The design wants the
   mirrored sweep: magenta climbing out of the lower-left to a crest across the
   top, particles in the upper-left. Painting it on a rotated ::before layer
   gets that without shipping a second 1.4 MB export of the same artwork.
   The layer is inset:0, so rotating about its centre still covers the banner
   exactly; `cover` (not 100% 100%) keeps the artwork undistorted. */
body.page-template-template-frontend .lib-cta-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/bg-img-Transform.png) no-repeat center center;
  background-size: cover;
  transform: rotate(180deg);
  pointer-events: none;
  z-index: 0;
}

/* keep the copy and button above the artwork layer */
body.page-template-template-frontend .lib-cta-inner > * {
  position: relative;
  z-index: 1;
}

body.page-template-template-frontend .lib-cta-inner h2 {
  color: #FFFFFF;
  font-size: 40px;
  line-height: 1.25;
  font-weight: 700;
  max-width: 720px;
  margin: 0 auto;
}

body.page-template-template-frontend .lib-cta-inner p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.6;
  max-width: 620px;
  margin: 18px auto 0;
}

body.page-template-template-frontend .lib-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 13px 15px 13px 26px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--lib-ink);
  font-size: 15px;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease;
}

body.page-template-template-frontend .lib-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  color: var(--lib-ink);
}

body.page-template-template-frontend .lib-cta-btn span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lib-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.page-template-template-frontend .lib-cta-btn span svg {
  width: 15px;
  height: 15px;
}


/* =============================================================================
   7. RESPONSIVE
   ============================================================================= */
@media (max-width: 1199px) {
  body.page-template-template-frontend .slide-left-text h1 { font-size: 46px; }
  body.page-template-template-frontend .news-heading h2    { font-size: 32px; }
  body.page-template-template-frontend .lib-cta-inner h2   { font-size: 34px; }
}

@media (max-width: 991px) {
  body.page-template-template-frontend .slider-section { background-size: 160% auto; }
  body.page-template-template-frontend .slide-left-text { padding: 26px 0 40px; }
  body.page-template-template-frontend .slide-left-text h1 { font-size: 38px; }
  body.page-template-template-frontend .newssection { border-radius: 20px; padding: 36px 10px 30px; }
  body.page-template-template-frontend .lib-cta-inner { padding: 54px 22px; }
  body.page-template-template-frontend .lib-cta-inner h2 { font-size: 29px; }
}

@media (max-width: 767px) {
  body.page-template-template-frontend .slider-section { background-size: 260% auto; }
  body.page-template-template-frontend .slide-left-text { padding: 20px 0 32px; }
  body.page-template-template-frontend .slide-left-text h1 { font-size: 29px; }
  body.page-template-template-frontend .lib-eyebrow { font-size: 14px; }

  /* the pill becomes a stacked field + full-width button */
  body.page-template-template-frontend .slide-left-text form.search-form {
    flex-direction: column;
    align-items: stretch;
    border-radius: 18px;
    padding: 10px;
    gap: 10px;
    margin-top: 24px;
  }

  body.page-template-template-frontend .slide-left-text .serch-inpt {
    height: 44px;
    padding: 0 8px;
    border-bottom: 1px solid var(--lib-line);
    border-radius: 0;
  }

  body.page-template-template-frontend .slide-left-text form.search-form button {
    width: 100%;
    height: 46px;
    line-height: 46px;
  }

  /* tabs scroll sideways instead of wrapping */
  body.page-template-template-frontend .gallery .gallery-filter {
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  body.page-template-template-frontend .gallery .gallery-filter::-webkit-scrollbar { display: none; }

  body.page-template-template-frontend .gallery .gallery-filter .filter-item {
    font-size: 15px;
    flex: 0 0 auto;
  }

  body.page-template-template-frontend #buttons {
    justify-content: flex-start;
    gap: 8px;
    margin-top: 16px;
  }

  body.page-template-template-frontend #buttons button {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* cards go single-column, image on top */
  body.page-template-template-frontend #topics-posts-container .topic-list,
  body.page-template-template-frontend #posts-container .topic-list {
    padding: 14px;
  }

  body.page-template-template-frontend .topic-listimg { margin-bottom: 14px; }

  body.page-template-template-frontend .topic-listtext h4 { font-size: 17px; }

  /* keep the desktop order on phones too: source logo sits above the headline */
  body.page-template-template-frontend #posts-container .newslist-full-head > .row {
    display: flex;
    flex-direction: column-reverse;
  }

  body.page-template-template-frontend #posts-container .newslist-full-head > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  body.page-template-template-frontend #posts-container .newsimg img {
    max-width: 70px;
    max-height: 22px;
    object-fit: contain;
  }

  body.page-template-template-frontend #posts-container .newsimg { margin-bottom: 8px; }

  /* phones scroll the page, not a rail — no slide buttons needed */
  body.page-template-template-frontend .news-nav { display: none !important; }

  body.page-template-template-frontend .date-topiclist p { text-align: left; margin-top: 6px; }

  body.page-template-template-frontend .newssection {
    border-radius: 16px;
    margin: 24px 12px 40px;
    padding: 30px 6px 26px;
  }

  body.page-template-template-frontend .news-heading h2 { font-size: 25px; }
  body.page-template-template-frontend .news-heading h2::before { width: 25px; height: 25px; }

  body.page-template-template-frontend .lib-cta { margin-bottom: 44px; }
  body.page-template-template-frontend .lib-cta-inner {
    padding: 40px 18px;
    border-radius: 18px;
  }
  body.page-template-template-frontend .lib-cta-inner h2 { font-size: 24px; }
  body.page-template-template-frontend .lib-cta-inner p { font-size: 14px; }
}

@media (max-width: 575px) {
  body.page-template-template-frontend .slide-left-text h1 { font-size: 25px; }
  body.page-template-template-frontend .topic-listdetl .trending-owner h5,
  body.page-template-template-frontend .topic-listdetl .trending-owner li { font-size: 13px; }
}