/* ==========================================================================
   ResPublica — modern editorial theme
   Identity: red #b70000 heritage, refreshed to a contemporary news look.
   ========================================================================== */

:root {
  --rp-red: #b70000;
  --rp-red-dark: #8a0000;
  --rp-ink: #222222;
  --rp-ink-soft: #4b5058;
  --rp-muted: #999999;
  --rp-line: #e6e8ec;
  --rp-bg: #fafafa;
  /* Homepage section bands — see "HOMEPAGE SECTION BANDS" below. Both are
     within 4% luminance of --rp-bg, so white cards still read as raised
     surfaces on top of them. */
  --rp-bg-alt-1: #f4f5f7;
  --rp-bg-alt-2: #fbf7f2;
  --rp-surface: #ffffff;
  --rp-radius: 14px;
  --rp-shadow: 0 1px 2px rgba(22, 24, 29, .06), 0 8px 24px rgba(22, 24, 29, .07);
  --rp-shadow-lift: 0 2px 4px rgba(22, 24, 29, .08), 0 18px 44px rgba(22, 24, 29, .14);
  /* Inter (400/600) for body, meta and teasers; Barlow Condensed (500/600/700)
     for headlines — same newspaper-condensed character as Open Sans Condensed
     but a larger x-height and open apertures at small sizes. Both are
     self-hosted (css/fonts.css); the previous Open Sans stack stays behind
     them as the fallback, so a missing woff2 degrades to what shipped before. */
  --rp-font: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --rp-font-cond: "Barlow Condensed", "Open Sans Condensed", "Arial Narrow", var(--rp-font);
  /* Article body only — see the "Article reading font" block further down. */
  --rp-font-serif: Georgia, "Times New Roman", Times, serif;
  --rp-ease: cubic-bezier(.22, .8, .3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--rp-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--rp-ink);
  background: var(--rp-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rp-red); text-decoration: none; transition: color .2s var(--rp-ease); }
a:hover { color: var(--rp-red-dark); }

img { max-width: 100%; height: auto; }

/* Old-site content box is 1180px wide (870 + 10 gutter + 300 sidebar). */
.container { max-width: 1220px; margin: 0 auto; padding: 0 20px; }

/* --------------------------------------------------------------------------
   Header — sticky, translucent, shrinks on scroll
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rp-line);
  transition: box-shadow .3s var(--rp-ease);
}

.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(22, 24, 29, .08); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  transition: min-height .3s var(--rp-ease);
}

.site-header.is-scrolled .header-inner { min-height: 60px; }

.header-brand img {
  max-height: 44px;
  width: auto;
  transition: max-height .3s var(--rp-ease);
}

.site-header.is-scrolled .header-brand img { max-height: 34px; }

.header-brand a { display: inline-flex; align-items: center; }

/* Primary menu */
.header-nav ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.header-nav li { margin: 0; }

.header-nav a {
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 15px;
  color: var(--rp-ink);
  letter-spacing: .01em;
}

.header-nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--rp-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s var(--rp-ease);
}

.header-nav a:hover,
.header-nav a.is-active { color: var(--rp-red); }

.header-nav a:hover::after,
.header-nav a.is-active::after { transform: scaleX(1); }

/* Burger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--rp-ink);
  border-radius: 2px;
  transition: transform .3s var(--rp-ease), opacity .2s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Reading progress bar */
.progress-bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--rp-red), #ff5a4e);
  transition: width .1s linear;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.site-main { padding: 36px 0 72px; }

.main-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }

/* Content left, 300px sidebar RIGHT (old region-sidebar-second) */
.has-sidebar .main-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.main-col { min-width: 0; }

.region-highlighted { margin-top: 16px; }

/* --------------------------------------------------------------------------
   Cards (teasers) — front page, term pages, listings
   -------------------------------------------------------------------------- */

.view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}

.view-content > * { min-width: 0; }

/* Front main grid: two columns beside the sidebar */
.is-front .view-frontpage .view-content { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.card {
  background: var(--rp-surface);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius);
  overflow: hidden;
  box-shadow: var(--rp-shadow);
  transition: transform .35s var(--rp-ease), box-shadow .35s var(--rp-ease);
}

.card:hover { transform: translateY(-5px); box-shadow: var(--rp-shadow-lift); }

.card-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.card-link:hover { color: inherit; }

.card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eceef1;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .6s var(--rp-ease);
}

.card:hover .card-media img { transform: scale(1.055); }

.card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
  flex: 1;
}

.card-meta { display: flex; align-items: center; gap: 12px; }

.chip {
  display: inline-block;
  padding: 3px 11px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rp-red);
  background: rgba(192, 18, 28, .08);
  border-radius: 999px;
  transition: background .2s var(--rp-ease), color .2s var(--rp-ease);
}

a.chip-link:hover, .card:hover .chip { background: var(--rp-red); color: #fff; }

.card-date, .article-date { font-size: 13.5px; color: var(--rp-muted); }

.card-title {
  margin: 0;
  font-size: 1.14rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: color .2s var(--rp-ease);
}

.card:hover .card-title { color: var(--rp-red); }

.card-summary {
  margin: 0;
  font-size: .93rem;
  color: var(--rp-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-more {
  margin-top: auto;
  font-size: .85rem;
  font-weight: 700;
  color: var(--rp-red);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--rp-ease), transform .3s var(--rp-ease);
}

.card:hover .card-more { opacity: 1; transform: translateX(0); }

.card-more .arrow { display: inline-block; transition: transform .3s var(--rp-ease); }
.card:hover .card-more .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Article page
   -------------------------------------------------------------------------- */

.is-article .region-content { max-width: 780px; margin: 0 auto; }

.page-title {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: .3em 0 .5em;
}

.article-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }

.article-hero {
  margin: 0 0 30px;
  border-radius: var(--rp-radius);
  overflow: hidden;
  box-shadow: var(--rp-shadow);
}

.article-hero img { display: block; width: 100%; }

.article-body {
  font-size: 1.09rem;
  line-height: 1.78;
  color: #222630;
}

.article-body p:first-of-type::first-letter {
  float: left;
  font-size: 3.3em;
  line-height: .85;
  font-weight: 800;
  /* Was var(--rp-red). A red initial on every article read as a second accent
     competing with the category chip and the section rules, so the drop cap now
     takes the body colour and carries its emphasis by size alone. currentColor
     rather than a literal so it follows .article-body's colour. */
  color: currentColor;
  padding: 4px 10px 0 0;
}

.article-body img { border-radius: 10px; }

.article-body a { border-bottom: 1px solid rgba(192, 18, 28, .3); }

.article-tags { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rp-line); }

/* Tags use the .chip component — see the chip rules above. */

/* --------------------------------------------------------------------------
   Hero slider (Slideri Kryesor)
   -------------------------------------------------------------------------- */

.rp-slider { position: relative; overflow: hidden; border-radius: var(--rp-radius); box-shadow: var(--rp-shadow); margin-bottom: 36px; }

.rp-slider .view-content {
  display: flex !important;
  gap: 0;
  transition: transform .65s var(--rp-ease);
  will-change: transform;
}

.rp-slider .views-row { flex: 0 0 100%; min-width: 100%; }

.rp-slider .card { border: 0; border-radius: 0; box-shadow: none; height: 100%; }
.rp-slider .card:hover { transform: none; box-shadow: none; }
.rp-slider .card.reveal { opacity: 1; transform: none; }

.rp-slider .card-link { position: relative; display: block; }

.rp-slider .card-media { aspect-ratio: 16 / 7; }
.rp-slider .card-media img { transform: none; }

.rp-slider .card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 40px 30px;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 14, .82) 55%);
  color: #fff;
}

.rp-slider .card-title { font-size: clamp(1.3rem, 2.6vw, 2rem); color: #fff; }
.rp-slider .card:hover .card-title { color: #fff; }
.rp-slider .card-date { color: rgba(255, 255, 255, .75); }
.rp-slider .card-summary { color: rgba(255, 255, 255, .85); -webkit-line-clamp: 2; }
.rp-slider .card-more { display: none; }
.rp-slider .chip { background: var(--rp-red); color: #fff; }

.rp-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--rp-ink);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--rp-shadow);
  transition: background .2s, transform .2s var(--rp-ease);
}

.rp-slider-arrow:hover { background: var(--rp-red); color: #fff; transform: translateY(-50%) scale(1.08); }
.rp-slider-arrow.prev { left: 16px; }
.rp-slider-arrow.next { right: 16px; }

.rp-slider-dots {
  position: absolute;
  bottom: 12px;
  right: 20px;
  z-index: 5;
  display: flex;
  gap: 7px;
}

.rp-slider-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: all .3s var(--rp-ease);
}

.rp-slider-dots button.is-active { background: #fff; width: 24px; border-radius: 5px; }

@media (max-width: 760px) {
  .rp-slider .card-media { aspect-ratio: 16 / 11; }
  .rp-slider .card-body { padding: 26px 18px 22px; }
  .rp-slider-arrow { display: none; }
}

/* --------------------------------------------------------------------------
   Tag cloud
   -------------------------------------------------------------------------- */

.tag-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag-cloud li { margin: 0; padding: 0; border: 0 !important; }

.tag-cloud-item {
  display: inline-block;
  padding: 3px 11px;
  border: 1px solid var(--rp-line);
  border-radius: 999px;
  color: var(--rp-ink-soft);
  background: var(--rp-surface);
  transition: all .25s var(--rp-ease);
}

.tag-cloud-item:hover { border-color: var(--rp-red); color: var(--rp-red); transform: translateY(-2px); }

.tag-size-1 { font-size: .78rem; }
.tag-size-2 { font-size: .84rem; }
.tag-size-3 { font-size: .9rem; }
.tag-size-4 { font-size: .98rem; font-weight: 600; }
.tag-size-5 { font-size: 1.06rem; font-weight: 700; }

/* Category strips: see PARITY LAYER 2 below. */

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

/* Compact horizontal mini-cards inside sidebar views */
.region-sidebar .view-content { display: flex; flex-direction: column; gap: 12px; }

.region-sidebar .card { border: 0; box-shadow: none; border-radius: 10px; background: none; }
.region-sidebar .card:hover { transform: none; box-shadow: none; }

.region-sidebar .card-link { flex-direction: row; gap: 12px; align-items: center; }

.region-sidebar .card-media { flex: 0 0 86px; aspect-ratio: 1 / 1; border-radius: 9px; }

.region-sidebar .card-body { padding: 0; gap: 4px; }
.region-sidebar .card-title { font-size: .9rem; line-height: 1.35; }
.region-sidebar .card-summary, .region-sidebar .card-more, .region-sidebar .chip { display: none; }
.region-sidebar .card-date { font-size: 13px; }

.region-sidebar .strip-title { font-size: .95rem; margin-bottom: 12px; }
.region-sidebar .strip-title::before { height: 16px; width: 4px; }

/* Title-list views (Të Fundit, Më të Komentuarat, Komentet e fundit) */
.sidebar-links, .region-sidebar .item-list ul { list-style: none; margin: 0; padding: 0; }

.sidebar-links li, .region-sidebar .item-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--rp-line);
  font-size: .92rem;
  line-height: 1.4;
}

.sidebar-links li:last-child, .region-sidebar .item-list li:last-child { border-bottom: 0; }

.sidebar-links a, .region-sidebar .item-list a {
  color: var(--rp-ink);
  display: block;
  transition: color .2s var(--rp-ease), transform .25s var(--rp-ease);
}

.sidebar-links a:hover, .region-sidebar .item-list a:hover { color: var(--rp-red); transform: translateX(4px); }

.region-sidebar > div {
  background: var(--rp-surface);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius);
  padding: 22px;
  margin-bottom: 24px;
}

.region-sidebar h2 {
  margin: 0 0 14px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: 10px;
  border-bottom: 2.5px solid var(--rp-red);
}

/* --------------------------------------------------------------------------
   Pager
   -------------------------------------------------------------------------- */

.pager__items { display: flex; gap: 6px; justify-content: center; list-style: none; padding: 32px 0 0; flex-wrap: wrap; }

.pager__item a, .pager__item.is-active a {
  display: inline-block;
  min-width: 40px;
  padding: 8px 13px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--rp-line);
  background: var(--rp-surface);
  color: var(--rp-ink);
  font-weight: 600;
  transition: all .25s var(--rp-ease);
}

.pager__item a:hover { border-color: var(--rp-red); color: var(--rp-red); transform: translateY(-2px); }

.pager__item.is-active a { background: var(--rp-red); border-color: var(--rp-red); color: #fff; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: #131519;
  color: #b9bec7;
  padding: 52px 0 34px;
  margin-top: 40px;
}

.site-footer a { color: #e6e9ee; }
.site-footer a:hover { color: #ff6b60; }

.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.footer-logo { max-height: 44px; width: auto; opacity: .95; filter: brightness(0) invert(1); }

.footer-social { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #9aa0aa; }

.social-link { display: inline-flex; padding: 8px; border-radius: 10px; background: #1d2026; transition: background .25s var(--rp-ease), transform .25s var(--rp-ease); }
.social-link:hover { background: var(--rp-red); color: #fff; transform: translateY(-3px); }

/* Footer menu */
.site-footer nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 18px 0 0; padding: 0; }
.site-footer nav a { font-size: 13.5px; color: #b9bec7; }

.footer-bottom { border-top: 1px solid #262a31; margin-top: 26px; padding-top: 22px; }

.footer-legal { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.footer-media-logo { max-height: 30px; width: auto; opacity: .8; }

.footer-copy { font-size: 13.5px; color: #7d838d; margin: 0; }

/* --------------------------------------------------------------------------
   Motion — scroll reveals
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--rp-ease), transform .6s var(--rp-ease);
}

.reveal.is-visible { opacity: 1; transform: none; }

/* Stagger within grids */
.view-content > *:nth-child(3n+2) .reveal, .view-content > *:nth-child(3n+2).reveal { transition-delay: .08s; }
.view-content > *:nth-child(3n+3) .reveal, .view-content > *:nth-child(3n+3).reveal { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Misc / admin affordances
   -------------------------------------------------------------------------- */

.region-breadcrumb { font-size: 13.5px; color: var(--rp-muted); padding-top: 14px; }
.region-breadcrumb ol { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; }

.messages { border-radius: 10px; padding: 14px 18px; margin: 14px 0; }
.messages--status { background: #e8f6ee; color: #14532d; }
.messages--error { background: #fdecec; color: #7f1d1d; }
.messages--warning { background: #fff7e6; color: #7c4a03; }

.tabs { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; flex-wrap: wrap; }
.tabs a { padding: 7px 14px; border-radius: 8px; background: var(--rp-surface); border: 1px solid var(--rp-line); font-size: 14px; }
.tabs a.is-active { background: var(--rp-red); color: #fff; border-color: var(--rp-red); }

input, textarea, select {
  font-family: inherit;
  font-size: 16px;
  padding: 9px 13px;
  border: 1px solid var(--rp-line);
  border-radius: 9px;
  background: var(--rp-surface);
  transition: border-color .2s, box-shadow .2s;
}

input:focus, textarea:focus { outline: none; border-color: var(--rp-red); box-shadow: 0 0 0 3px rgba(192, 18, 28, .12); }

.button, button[type="submit"], input[type="submit"] {
  background: var(--rp-red);
  color: #fff;
  border: 0;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s var(--rp-ease), transform .2s var(--rp-ease);
}

.button:hover, button[type="submit"]:hover, input[type="submit"]:hover { background: var(--rp-red-dark); transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .has-sidebar .main-grid { grid-template-columns: 1fr; }
  .is-front .view-content > *:first-child .card-link { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
  /* Mobile nav lives in the "HEADER — single sticky bar" block at the end. */
  .site-main { padding-top: 22px; }
}


/* ==========================================================================
   PARITY LAYER 2 — old skeleton, new skin.
   Geometry, region grids and block composition come from respublica.al (D7).
   Every colour, font, radius and shadow above this line is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography (old site)
   -------------------------------------------------------------------------- */

body { font-size: 16px; }
h1, h2, h3, h4, .card-title, .page-title { font-family: var(--rp-font-cond); }

/* Header: see "HEADER — single sticky bar" at the end of this file. */

/* --------------------------------------------------------------------------
   Page geometry — 1180 = 870 content + 10 gutter + 300 sidebar
   -------------------------------------------------------------------------- */

.site-main { padding: 20px 0 56px; }

.main-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.has-sidebar .main-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.main-col { min-width: 0; }
.sidebar-col { min-width: 0; }

/* content_below: two 430px columns + 10px gutter */
.region-content-below {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 10px;
  align-items: start;
}

.region-content-below > * { min-width: 0; }

/* Kinema + Naked City span the full 870px column. */
#block-respublica-strip-kinema,
#block-respublica-strip-naked { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Section headers — condensed uppercase, muted, accent rule (unchanged skin)
   -------------------------------------------------------------------------- */

.strip-title,
.region-sidebar h2 {
  margin: 0 0 12px;
  font-family: var(--rp-font-cond);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rp-muted);
  border-bottom: 2px solid var(--accent, var(--rp-red));
  padding-bottom: 6px;
  display: block;
}

.strip-title::before, .strip-title::after { display: none; }
.strip-title a, .region-sidebar h2 a { color: inherit; }
.strip-title a:hover, .region-sidebar h2 a:hover { color: var(--accent, var(--rp-red)); }

.region-sidebar h2 { font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   Row archetypes
   -------------------------------------------------------------------------- */

/* A — featured lead: title → teaser → image */
.card-featured .card-link { flex-direction: column; }
.card-featured .card-body { padding: 15px 17px 12px; gap: 7px; flex: 0 0 auto; }
.card-featured .card-title {
  font-size: 1.1rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0;
}
.card-featured .card-summary { font-size: .87rem; -webkit-line-clamp: 2; }
.card-featured .card-media { aspect-ratio: 16 / 9; }
.card-featured .card-more { display: none; }

/* B — compact row: square thumb left, text right */
.card-compact,
.card-titleonly {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.card-compact:hover,
.card-titleonly:hover { transform: none; box-shadow: none; }

.card-compact .card-link { flex-direction: row; gap: 12px; align-items: flex-start; }

.card-compact .card-media {
  flex: 0 0 100px;
  width: 100px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}

.card-compact .card-body { padding: 0; gap: 5px; }
.card-compact .card-title { font-size: .95rem; line-height: 1.3; text-transform: none; }
.card-compact .card-summary { font-size: .84rem; -webkit-line-clamp: 2; }
.card-compact .card-meta,
.card-titleonly .card-meta { font-size: 13px; gap: 10px; color: var(--rp-muted); }
.card-compact .chip, .card-titleonly .chip { display: none; }
.card-compact .card-more, .card-titleonly .card-more { display: none; }
.card-compact:hover .card-title,
.card-titleonly:hover .card-title { color: var(--accent, var(--rp-red)); }

/* C — title only */
.card-titleonly .card-body { padding: 0; gap: 3px; }
.card-titleonly .card-title { font-size: .95rem; line-height: 1.3; text-transform: none; }

/* D — dark tile with the title overlaid (Shqipëri Hesapi) */
.card-tile {
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
}
.card-tile:hover { transform: none; box-shadow: var(--rp-shadow); }
.card-tile .card-link { position: relative; display: block; }
.card-tile .card-media { aspect-ratio: 16 / 9; border-radius: 0; }
.card-tile .card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 14, .88) 62%);
  gap: 0;
}
.card-tile .card-title { color: #fff; font-size: .88rem; line-height: 1.25; }
.card-tile:hover .card-title { color: #fff; }
.card-tile .card-meta, .card-tile .card-summary, .card-tile .card-more { display: none; }

/* --------------------------------------------------------------------------
   Strips — main display (featured) + attachment (follow-up rows)
   -------------------------------------------------------------------------- */

.region-content-below .view-content,
.region-sidebar .view-content,
.attachment .view-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.region-content-below .attachment-after { margin-top: 12px; }

.region-content-below .attachment-after .views-row + .views-row,
.region-sidebar .views-row + .views-row {
  border-top: 1px solid var(--rp-line);
  padding-top: 12px;
}

/* Two-sub-column strips: featured left, title-only list right. */
#block-respublica-strip-opinion > div > .view,
#block-respublica-strip-billboard > div > .view,
#block-respublica-strip-alternative > div > .view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
}

#block-respublica-strip-opinion > div > .view > .view-header,
#block-respublica-strip-billboard > div > .view > .view-header,
#block-respublica-strip-alternative > div > .view > .view-header { grid-column: 1 / -1; }

#block-respublica-strip-opinion > div > .view > .view-content,
#block-respublica-strip-billboard > div > .view > .view-content,
#block-respublica-strip-alternative > div > .view > .view-content { grid-column: 1; }

#block-respublica-strip-opinion > div > .view > .attachment-after,
#block-respublica-strip-billboard > div > .view > .attachment-after,
#block-respublica-strip-alternative > div > .view > .attachment-after {
  grid-column: 2;
  margin-top: 0;
}

#block-respublica-strip-opinion .attachment-after .views-row + .views-row,
#block-respublica-strip-billboard .attachment-after .views-row + .views-row,
#block-respublica-strip-alternative .attachment-after .views-row + .views-row {
  border-top: 1px solid var(--rp-line);
  padding-top: 9px;
}

#block-respublica-strip-opinion .attachment-after .view-content,
#block-respublica-strip-billboard .attachment-after .view-content,
#block-respublica-strip-alternative .attachment-after .view-content { gap: 9px; }

/* Alternative: two featured items stacked in the left sub-column. */
#block-respublica-strip-alternative > div > .view > .view-content { gap: 14px; }

/* --------------------------------------------------------------------------
   Horizontal carousels (Kinema, Naked City, Foto-Video, sidebar Video)
   -------------------------------------------------------------------------- */

.rp-scroller { position: relative; }

#block-respublica-strip-kinema .view-content,
#block-respublica-strip-naked .view-content,
#block-respublica-fotovideo .view-content,
#block-respublica-sb-video .view-content,
.rp-scroller .view-content {
  display: flex !important;
  flex-direction: row !important;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 2px;
}

#block-respublica-strip-kinema .view-content::-webkit-scrollbar,
#block-respublica-strip-naked .view-content::-webkit-scrollbar,
#block-respublica-fotovideo .view-content::-webkit-scrollbar,
#block-respublica-sb-video .view-content::-webkit-scrollbar,
.rp-scroller .view-content::-webkit-scrollbar { display: none; }

#block-respublica-strip-kinema .views-row,
#block-respublica-strip-naked .views-row,
#block-respublica-fotovideo .views-row,
#block-respublica-sb-video .views-row,
.rp-scroller .views-row {
  scroll-snap-align: start;
  border-top: 0 !important;
  padding-top: 0 !important;
}

#block-respublica-strip-kinema .views-row { flex: 0 0 calc((100% - 28px) / 3); }
#block-respublica-strip-naked .views-row { flex: 0 0 calc((100% - 42px) / 4); }
#block-respublica-fotovideo .views-row,
#block-respublica-sb-video .views-row { flex: 0 0 100%; }

.rp-scroller .card-featured .card-title,
.rp-scroller .card-compact .card-title { font-size: .92rem; }

.rp-scroll-arrow {
  position: absolute;
  top: 40%;
  z-index: 4;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--rp-ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--rp-shadow);
  transition: background .2s var(--rp-ease), transform .2s var(--rp-ease);
}

.rp-scroll-arrow:hover { background: var(--accent, var(--rp-red)); color: #fff; }
.rp-scroll-arrow.prev { left: -6px; }
.rp-scroll-arrow.next { right: -6px; }

.rp-scroll-dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }

.rp-scroll-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--rp-line); cursor: pointer; transition: all .25s var(--rp-ease);
}

.rp-scroll-dots button.is-active { background: var(--accent, var(--rp-red)); width: 18px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Hero zone
   -------------------------------------------------------------------------- */

.rp-slider { margin-bottom: 0; }
.rp-slider .card-media { aspect-ratio: 16 / 9; }
.rp-slider .card-featured .card-body,
.rp-slider .card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 34px 26px;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 14, .82) 55%);
  color: #fff;
}
.rp-slider .card-title { color: #fff; text-transform: none; }
.rp-slider .card-link { flex-direction: column; }

#block-respublica-fotovideo .view-content { max-height: none; }
#block-respublica-fotovideo .card-media { aspect-ratio: 16 / 10; }
#block-respublica-fotovideo .card-body { padding: 10px 12px 12px; }
#block-respublica-fotovideo .card-title { font-size: .92rem; text-transform: none; }
#block-respublica-fotovideo .card-summary,
#block-respublica-fotovideo .card-more,
#block-respublica-fotovideo .card-author { display: none; }

/* --------------------------------------------------------------------------
   Per-section accent colours (old site)
   -------------------------------------------------------------------------- */

#block-respublica-strip-ekonomi { --accent: #ff0066; }
#block-respublica-strip-ne-vemendje { --accent: #ff3300; }
#block-respublica-strip-opinion { --accent: #9966cc; }
#block-respublica-strip-billboard { --accent: #ffcc00; }
#block-respublica-strip-shkenca { --accent: #1db6b6; }
#block-respublica-strip-bota { --accent: #ff3300; }
#block-respublica-strip-politike { --accent: #1db6b6; }
#block-respublica-strip-nga-lexuesit { --accent: #b70000; }
#block-respublica-strip-alternative { --accent: #b70000; }
#block-respublica-strip-kultura { --accent: #00cc55; }
#block-respublica-strip-kinema { --accent: #b70000; }
#block-respublica-strip-naked { --accent: #666666; }
#block-respublica-sb-hesapi, #block-respublica-sb-kripura { --accent: #dddddd; }
#block-respublica-sb-shendeti, #block-respublica-sb-video { --accent: #ff3300; }

.region-content-below .chip,
.region-sidebar .chip {
  color: var(--accent, var(--rp-red));
  background: color-mix(in srgb, var(--accent, var(--rp-red)) 10%, transparent);
}

.region-content-below .card:hover .chip { background: var(--accent, var(--rp-red)); color: #fff; }

/* Card meta */
.card-date { text-transform: uppercase; letter-spacing: .03em; }
.card-comments { font-size: 12.5px; color: var(--rp-muted); }
.card-author { font-style: italic; font-size: .85rem; color: var(--rp-ink-soft); }

/* --------------------------------------------------------------------------
   Sidebar (300px)
   -------------------------------------------------------------------------- */

.region-sidebar > div {
  background: var(--rp-surface);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius);
  padding: 18px;
  margin-bottom: 10px;
}

.region-sidebar .card-compact .card-media { flex: 0 0 68px; width: 68px; }
.region-sidebar .card-compact .card-title { font-size: .88rem; }
.region-sidebar .card-compact .card-summary { display: none; }
.region-sidebar .card-compact .card-meta { font-size: 12.5px; }

/* Shqipëri Hesapi — dark tiles */
#block-respublica-sb-hesapi .view-content { gap: 8px; }
#block-respublica-sb-hesapi .views-row + .views-row { border-top: 0; padding-top: 0; }

/* Shëndeti/Dieta keeps its teaser (old site shows it). */
#block-respublica-sb-shendeti .card-compact .card-summary { display: -webkit-box; font-size: .8rem; }

/* Karikatura — single image card with caption */
#block-respublica-sb-karikatura .card-link { flex-direction: column; }
#block-respublica-sb-karikatura .card-media { flex: none; width: auto; aspect-ratio: 4 / 3; border-radius: 10px; }
#block-respublica-sb-karikatura .card-body { padding-top: 8px; }

/* Video — one-up carousel */
#block-respublica-sb-video .card-link { flex-direction: column; }
#block-respublica-sb-video .card-media { flex: none; width: auto; aspect-ratio: 16 / 9; border-radius: 10px; }
#block-respublica-sb-video .card-body { padding-top: 8px; }

/* Most commented — thumb + title + count */
#block-respublica-sb-mostcommented .views-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--rp-line);
}
#block-respublica-sb-mostcommented .views-row:last-child { border-bottom: 0; }
#block-respublica-sb-mostcommented .mc-thumb img { border-radius: 6px; display: block; }
#block-respublica-sb-mostcommented .mc-title { font-size: .9rem; line-height: 1.35; }
#block-respublica-sb-mostcommented .mc-count { grid-column: 2; font-size: .8rem; color: var(--rp-muted); }
#block-respublica-sb-mostcommented .mc-count::before { content: "\1F4AC "; }

/* Recent comments — "X thotë:" + excerpt + article link */
#block-respublica-sb-comments2 .view-content { gap: 0; }
#block-respublica-sb-comments2 .views-row {
  padding: 9px 0;
  border-top: 0;
  border-bottom: 1px solid var(--rp-line);
  font-size: .88rem;
}
#block-respublica-sb-comments2 .views-row:last-child { border-bottom: 0; }
#block-respublica-sb-comments2 .comment-author { font-weight: 700; color: var(--rp-ink); }
#block-respublica-sb-comments2 .comment-node-title a { color: var(--rp-red); font-size: .84rem; }

/* Tag cloud — weighted inline cloud that wraps (old tagclouds behaviour) */
#block-respublica-sb-tagcloud .item-list { line-height: 2; }
ul.tag-cloud, .region-sidebar ul.tag-cloud {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}
ul.tag-cloud li, .region-sidebar ul.tag-cloud li {
  display: inline;
  margin: 0 6px 0 0;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  list-style: none !important;
}
.tag-cloud-item {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--rp-ink-soft);
  transition: color .2s var(--rp-ease);
}
.tag-cloud-item:hover { color: var(--rp-red); border: 0; transform: none; }
.tag-size-1 { font-size: .78rem; }
.tag-size-2 { font-size: .9rem; }
.tag-size-3 { font-size: 1.02rem; }
.tag-size-4 { font-size: 1.16rem; font-weight: 600; }
.tag-size-5 { font-size: 1.32rem; font-weight: 700; }
.tag-cloud-more { display: block; text-align: right; margin-top: 8px; font-size: .8rem; }

/* --------------------------------------------------------------------------
   Article page — body with a left-floated hero, tags, then comments
   -------------------------------------------------------------------------- */

.is-article .region-content { max-width: none; margin: 0; }

.is-article .page-title,
.is-taxonomy .page-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 10px;
}

.article-header { margin-bottom: 14px; }
.article-meta { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.article-date { font-size: 13.5px; color: var(--rp-muted); }

.article-content::after { content: ""; display: table; clear: both; }

.article-hero {
  float: left;
  width: 380px;
  max-width: 48%;
  margin: 4px 22px 14px 0;
  border-radius: var(--rp-radius);
  overflow: hidden;
  box-shadow: var(--rp-shadow);
}

.article-hero img { display: block; width: 100%; }
.article-hero figcaption { font-size: 12.5px; color: var(--rp-muted); padding: 6px 10px; background: var(--rp-surface); }

.article-body { font-size: 1.02rem; line-height: 1.75; color: #222630; }

.article-tags {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--rp-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-comments { margin-top: 30px; }
.article-comments h2 { font-family: var(--rp-font-cond); text-transform: uppercase; color: var(--rp-muted); border-bottom: 2px solid var(--rp-red); padding-bottom: 6px; }
.article-comments .comment {
  background: var(--rp-surface);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.article-comments .comment .field__label { display: none; }

/* --------------------------------------------------------------------------
   Category / taxonomy pages — single-column list
   -------------------------------------------------------------------------- */

.is-taxonomy .region-content .view-content,
.page-node-list .region-content .view-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.is-taxonomy .region-content .views-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--rp-line);
}

.is-taxonomy .region-content .card-compact .card-media { flex: 0 0 130px; width: 130px; aspect-ratio: 4 / 3; }
.is-taxonomy .region-content .card-compact .card-title { font-size: 1.05rem; color: var(--rp-red); }
.is-taxonomy .region-content .card-compact .card-summary { -webkit-line-clamp: 3; font-size: .88rem; }

/* --------------------------------------------------------------------------
   Footer — menu row, then legal | social
   -------------------------------------------------------------------------- */

.site-footer { padding: 34px 0 28px; margin-top: 34px; }

.footer-menu-row { border-bottom: 2px solid var(--rp-red); padding-bottom: 10px; }
.site-footer nav ul { margin: 0; gap: 2px 20px; }
.site-footer nav a { font-family: var(--rp-font-cond); text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }

.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 0;
  margin-top: 18px;
  padding-top: 0;
}

.footer-legal { display: block; max-width: 640px; }
.footer-copy { font-size: 13px; color: #8b919b; margin: 0 0 4px; }
.footer-contact { color: #8b919b; }
.footer-social { align-self: center; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1179px) {
  .has-sidebar .main-grid { grid-template-columns: minmax(0, 1fr); }
  .region-content-below { grid-template-columns: minmax(0, 1fr); }
  .sidebar-col { margin-top: 24px; }
  .region-sidebar { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; align-items: start; }
  .region-sidebar > div { margin-bottom: 0; }
}

@media (max-width: 899px) {
  .region-content-below { grid-template-columns: minmax(0, 1fr); }
  #block-respublica-strip-opinion > div > .view,
  #block-respublica-strip-billboard > div > .view,
  #block-respublica-strip-alternative > div > .view { grid-template-columns: minmax(0, 1fr); }
  #block-respublica-strip-opinion > div > .view > .attachment-after,
  #block-respublica-strip-billboard > div > .view > .attachment-after,
  #block-respublica-strip-alternative > div > .view > .attachment-after { grid-column: 1; margin-top: 12px; }
  #block-respublica-strip-kinema .views-row { flex: 0 0 calc((100% - 14px) / 2); }
  #block-respublica-strip-naked .views-row { flex: 0 0 calc((100% - 28px) / 3); }
  .article-hero { width: 300px; }
}

@media (max-width: 767px) {
  .card-compact .card-media { flex: 0 0 80px; width: 80px; }
  .is-taxonomy .region-content .card-compact .card-media { flex: 0 0 96px; width: 96px; }

  .article-hero { float: none; width: auto; max-width: 100%; margin: 0 0 16px; }

  #block-respublica-strip-kinema .views-row,
  #block-respublica-strip-naked .views-row { flex: 0 0 78%; }

  .region-sidebar { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   E — media tile (carousel slides: Foto-Video, Video, Karikatura, Kinema,
   Naked City): image on top, caption below.
   -------------------------------------------------------------------------- */

.card-mediatile .card-link { flex-direction: column; }
.card-mediatile .card-media { flex: none; width: auto; aspect-ratio: 16 / 10; }
.card-mediatile .card-body { padding: 9px 11px 11px; gap: 4px; }
.card-mediatile .card-title { font-size: .92rem; line-height: 1.28; text-transform: none; }
.card-mediatile .card-meta { font-size: 12.5px; color: var(--rp-muted); }
.card-mediatile .chip, .card-mediatile .card-summary, .card-mediatile .card-more { display: none; }

.rp-scroller .card-mediatile .card-title { font-size: .92rem; }

/* Sidebar carousels sit flush inside the 300px block. */
#block-respublica-sb-video .card-mediatile .card-media,
#block-respublica-sb-karikatura .card-mediatile .card-media { aspect-ratio: 16 / 10; border-radius: 0; }
#block-respublica-sb-karikatura .card-mediatile,
#block-respublica-sb-video .card-mediatile,
#block-respublica-fotovideo .card-mediatile { border-radius: 10px; }

/* --------------------------------------------------------------------------
   Fixes on top of PARITY LAYER 2
   -------------------------------------------------------------------------- */

/* Alternative's two lead items carry no teaser on the old site. */
#block-respublica-strip-alternative .card-featured .card-summary { display: none; }

/* Uniform strips (no attachment) still need row separators. */
.region-content-below .view-content > .views-row + .views-row {
  border-top: 1px solid var(--rp-line);
  padding-top: 12px;
}

#block-respublica-strip-kinema .view-content > .views-row + .views-row,
#block-respublica-strip-naked .view-content > .views-row + .views-row,
#block-respublica-strip-alternative > div > .view > .view-content > .views-row + .views-row,
#block-respublica-sb-hesapi .view-content > .views-row + .views-row,
#block-respublica-fotovideo .view-content > .views-row + .views-row,
#block-respublica-sb-video .view-content > .views-row + .views-row {
  border-top: 0;
  padding-top: 0;
}

/* Sidebar rows that draw their own separators must not get the generic one. */
#block-respublica-sb-mostcommented .views-row + .views-row,
#block-respublica-sb-comments2 .views-row + .views-row { border-top: 0; padding-top: 0; }

/* The drop cap must not collide with the left-floated hero image. */
.article-body p:first-of-type::first-letter { padding: 4px 10px 0 0; color: currentColor; }

/* Category pages use the old long Albanian date ("Postuar në 27 Korrik, 2026
   19:54"); strips and the sidebar keep the short brand form. */
.card-date-long { display: none; font-size: 13.5px; color: var(--rp-muted); }
.is-taxonomy .region-content .card-date { display: none; }
.is-taxonomy .region-content .card-date-long { display: inline; }

/* The hero slider track must stay a single horizontal row — the generic
   region rules would otherwise stack the slides. */
.rp-slider .view-content {
  flex-direction: row !important;
  gap: 0 !important;
  overflow: visible;
  scroll-snap-type: none;
}
.rp-slider .views-row { border-top: 0 !important; padding-top: 0 !important; }

/* ==========================================================================
   HEADER — single sticky bar (restores the pre-two-band design)
   Sticky lives on #site-header itself: a sticky child cannot escape its
   containing block, which is why the red-band version unstuck on scroll.
   ========================================================================== */

/* Nothing between <html> and #site-header may clip or create a containing
   block, or sticky silently stops working. */
html, body, .dialog-off-canvas-main-canvas, .layout-page {
  overflow: visible;
  overflow-x: visible;
  transform: none;
  filter: none;
  contain: none;
  will-change: auto;
}

.site-header {
  position: sticky;
  /* Sit below the Drupal toolbar when it is displacing the viewport. */
  top: var(--rp-header-offset, var(--drupal-displace-offset-top, 0px));
  z-index: 1000;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rp-line);
  transition: background .3s var(--rp-ease), box-shadow .3s var(--rp-ease);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 6px 24px rgba(22, 24, 29, .10);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

/* Fixed compact height — no shrink-on-scroll. */
.site-header.is-scrolled .header-inner { min-height: 72px; }
/* 46px from a 457x78 source: still under native height, so it stays sharp at
   1x. On a 2x screen 46px asks for 92 device px against 78 available, i.e. a
   little softening — the trade for a mark that reads at arm's length. A
   higher-resolution source would remove it; see the note in the commit. */
.header-brand img,
.site-header.is-scrolled .header-brand img { max-height: 46px; width: auto; }
.header-brand a { display: inline-flex; align-items: center; }

.header-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.header-nav a {
  position: relative;
  display: inline-block;
  padding: 11px 15px;
  font-family: var(--rp-font-cond);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rp-ink);
  background: none;
}

.header-nav a::after {
  content: "";
  display: block;
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--rp-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s var(--rp-ease);
}

.header-nav a:hover,
.header-nav a.is-active,
.header-nav li.menu-item--active-trail > a { color: var(--rp-red); background: none; }

.header-nav a:hover::after,
.header-nav a.is-active::after,
.header-nav li.menu-item--active-trail > a::after { transform: scaleX(1); }

.header-nav a[href="/search"] { font-size: 0; padding: 11px 14px; }
.header-nav a[href="/search"]::before { content: "\1F50D"; font-size: 17.5px; line-height: 1; }
.header-nav a[href="/search"]::after { display: none; }

.nav-toggle span { background: var(--rp-ink); }

/* Reading progress, pinned to the header's bottom edge. */
.progress-bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--rp-red), #ff5a4e);
  transition: width .1s linear;
}

/* In-page anchors must clear the ~61px bar. */
:target, #main-content { scroll-margin-top: 76px; }

@media (max-width: 899px) {
  .nav-toggle { display: flex; }
  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--rp-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--rp-ease);
    z-index: 20;
  }
  .header-nav.is-open { max-height: 460px; box-shadow: 0 18px 40px rgba(22, 24, 29, .12); }
  .header-nav ul { flex-direction: column; align-items: stretch; padding: 10px 20px 16px; gap: 0; }
  .header-nav a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--rp-line); }
  .header-nav li:last-child a { border-bottom: 0; }
  .header-nav a::after { display: none; }
  .header-nav a[href="/search"] { font-size: 15.5px; }
  .header-nav a[href="/search"]::before { content: "\1F50D  "; }
  .header-nav a { font-size: 16px; }
}

/* ==========================================================================
   TAG CLOUD — real wrapping flex container
   `flex-wrap: wrap` was set without `display: flex`, and the <li>s are emitted
   with no whitespace between them, so the cloud rendered as one unbreakable
   872px line and pushed a horizontal scrollbar onto the whole page.
   ========================================================================== */

#block-respublica-sb-tagcloud .tag-cloud,
ul.tag-cloud,
.region-sidebar ul.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

ul.tag-cloud > li,
.region-sidebar ul.tag-cloud > li {
  display: inline-flex;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  list-style: none !important;
  max-width: 100%;
}

ul.tag-cloud a {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Defensive: no sidebar block may widen the page again. */
.region-sidebar, .region-sidebar > * { min-width: 0; max-width: 100%; }
.region-sidebar [id^="block-respublica-"] { overflow: hidden; }

/* …but the sidebar carousels need their own horizontal scroller. */
#block-respublica-sb-video .view-content { overflow-x: auto; }
#block-respublica-sb-video .rp-scroll-arrow.prev { left: 4px; }
#block-respublica-sb-video .rp-scroll-arrow.next { right: 4px; }

/* ==========================================================================
   ONE CONTINUOUS TWO-COLUMN GRID
   The old `content_above` region formed its own grid row: its height came from
   the taller slider, so the sidebar could not start until that row closed and a
   ~171px hole opened under Foto-Video. The slider now sits at the top of
   .main-col and Foto-Video at the top of .sidebar-col, so the two columns flow
   independently and no gap can form whatever their relative heights.
   ========================================================================== */

.main-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
/* minmax(0,1fr) resolves to exactly 870px inside the 1180px content box and,
   unlike a hard 870px, cannot overflow between 1180 and 1220px viewport. */
.has-sidebar .main-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }

#block-respublica-slider { margin-bottom: 16px; }

/* Foto-Video is a sidebar card now; its carousel arrows must clear the
   overflow:hidden guard on sidebar blocks. */
#block-respublica-fotovideo .rp-scroll-arrow.prev { left: 4px; }
#block-respublica-fotovideo .rp-scroll-arrow.next { right: 4px; }

/* Article tag row: .chip pills, slightly larger hit area than the card chips. */
.article-tags .chip { padding: 5px 13px; font-size: 13px; }
.article-tags .chip:hover { background: var(--rp-red); color: #fff; }

/* ==========================================================================
   ARTICLE READING FONT — Georgia
   ==========================================================================
   The article body is the one place on the site that is read continuously
   rather than scanned, so it drops the UI sans for a serif: Georgia is on
   every Windows and macOS install, needs no download, and its large x-height
   and sturdy hairlines survive the 1.125rem/1.7 measure below.

   Scope is deliberately narrow:
     - .article-body only — never the sidebar and never .article-comments,
       which stay on Inter so a comment can never be mistaken for body copy.
     - Headings inside the body are NOT listed. `h1,h2,h3,h4` earlier in this
       file sets them to var(--rp-font-cond) explicitly, and an explicit rule
       always beats inheritance, so sub-headings keep Barlow Condensed with no
       work here.
     - .page-title and .article-meta sit outside .article-body, so the headline
       and byline keep the new condensed/Inter pair by construction.

   This block must stay BELOW the `.article-body { font-size: 1.02rem; … }`
   declaration in the "Fixes on top of" layer, which would otherwise win on
   source order.
   -------------------------------------------------------------------------- */

.article-body {
  font-family: var(--rp-font-serif);
  font-size: 1.125rem;
  line-height: 1.7;
}

/* Named explicitly so a future `p { font-family: … }` layer cannot outrank
   inheritance from the container. td/dd catch the migrated D7 markup that
   wrapped body copy in tables and definition lists. */
.article-body p,
.article-body blockquote,
.article-body ul,
.article-body ol,
.article-body li,
.article-body dl,
.article-body dd,
.article-body td {
  font-family: var(--rp-font-serif);
}

/* Georgia's figures are old-style (x-height digits with descenders), which look
   like a rendering fault in a date or a statistic mid-sentence. Lining figures
   restore them without touching the letterforms. */
.article-body { font-variant-numeric: lining-nums; }

/* ==========================================================================
   SIDEBAR — "NGA MEDIAT & X"
   ==========================================================================
   Replaces Foto-Video at the top of the sidebar (that block is disabled, not
   deleted, and views.view.front_media lives on for the Video and Karikatura
   blocks further down). One block, two halves: the media_te_tjera view and a
   click-to-load X timeline.

   The section heading is the block label, so .region-sidebar h2 above already
   gives it the .strip-title skin — nothing to restate here.
   -------------------------------------------------------------------------- */

.rp-media-x-part + .rp-media-x-part { margin-top: 20px; }

/* Sub-heading for each half: quieter than the section h2 it sits under, and
   without the accent rule, so the section still reads as one unit. */
.rp-subhead {
  margin: 0 0 10px;
  font-family: var(--rp-font-cond);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rp-ink-soft);
}

/* --- Shkrime nga media të tjera --- */

.rp-media-link {
  display: block;
  color: inherit;
}

.rp-media-link-title {
  display: block;
  font-family: var(--rp-font-cond);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color .2s var(--rp-ease);
}

.rp-media-link:hover .rp-media-link-title { color: var(--rp-red); }

/* The source is the whole value of an external link — a reader needs to know
   whose article they are about to leave for. */
.rp-media-link-source {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rp-muted);
}

/* An outbound arrow, so an external destination is not a surprise. Content, not
   decoration, hence a pseudo-element on the title rather than an icon file. */
.rp-media-link-title::after {
  content: " \2197";
  font-size: .85em;
  color: var(--rp-muted);
}

/* --- Nën-blloku i X --- */

.rp-x-load {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--rp-red);
  background: rgba(192, 18, 28, .08);
  border: 1px solid rgba(192, 18, 28, .18);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--rp-ease), color .2s var(--rp-ease);
}

.rp-x-load:hover { background: var(--rp-red); color: #fff; }
.rp-x-load:disabled { opacity: .6; cursor: default; }
.rp-x-load:focus-visible { outline: 2px solid var(--rp-red); outline-offset: 2px; }

/* The profile link is the standing fallback — it is on the page before the
   widget is asked for, and it is what remains if the widget never renders. */
.rp-x-fallback { margin: 8px 0 0; font-size: 12.5px; color: var(--rp-muted); }
.rp-x-fallback .rp-x-note { display: block; color: var(--rp-ink-soft); }

/* Once loaded, the timeline iframe must respect the 300px sidebar. */
.rp-x-mount { margin-bottom: 8px; }
.rp-x-mount iframe { max-width: 100% !important; }

/* is-loaded / is-blocked are set by js/media-x.js; the button is removed in
   both cases, so only the spacing needs adjusting. */
.rp-x-feed.is-loaded .rp-x-fallback { margin-top: 4px; }

/* ==========================================================================
   SHQIPËRI HESAPI — featured title row
   ==========================================================================
   A views attachment (front_strips:attachment_hesapi_lead) renders one node
   above the four image tiles, as a bare headline. "Featured" is the node's
   core `sticky` flag: it needed no new vocabulary, it is a checkbox already on
   the article form, and it was unused in this category (0 of 946 nodes), so
   nothing was retro-tagged by switching it on. block_hesapi itself now filters
   sticky = 0, which is what keeps the featured article from also appearing as
   one of the tiles below it.

   Every rule here hangs off .views-row rather than the .attachment-before
   wrapper: with no sticky article the attachment still renders an empty
   wrapper, and a separator on that would draw a stray line under the heading.
   -------------------------------------------------------------------------- */

.view-display-id-attachment_hesapi_lead .views-row {
  margin-bottom: 12px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--rp-line);
}

/* Larger and darker than the tile captions under it, so the row reads as the
   section's lead rather than a stray first item. */
.region-sidebar .view-display-id-attachment_hesapi_lead .card-title {
  font-size: 1.05rem;
  line-height: 1.28;
  font-weight: 700;
}

/* A pure title row: the date belongs to the cards, not to the lead. */
.view-display-id-attachment_hesapi_lead .card-meta { display: none; }

/* ==========================================================================
   KINEMA LEAD SLIDE — click-to-load video
   ==========================================================================
   The facade is a poster plus a play button in a 16/9 box; js/main.js swaps in
   the provider iframe on click. Sizing it like a normal 271px tile would make
   the player unwatchable, so the lead row takes two tile widths plus the gap
   it no longer needs — the other slides keep their width and the scroll-snap
   step still lands on a card edge.
   -------------------------------------------------------------------------- */

#block-respublica-strip-kinema .views-row:first-child:has(.card-video) {
  flex: 0 0 calc((100% - 28px) / 3 * 2 + 14px);
}

.card-video .card-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a0a0e;
  border-radius: 10px;
  overflow: hidden;
}

.card-video .card-video-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* The whole poster is the hit area, not just the 68px glyph. */
}

.card-video-play svg { transition: transform .2s var(--rp-ease); }
.card-video-play .card-video-play-bg { fill: rgba(10, 10, 14, .78); transition: fill .2s var(--rp-ease); }
.card-video-play:hover svg { transform: scale(1.08); }
.card-video-play:hover .card-video-play-bg { fill: var(--rp-red); }

/* Keyboard users get the same affordance the pointer gets on hover. */
.card-video-play:focus-visible { outline: 3px solid var(--rp-red); outline-offset: -3px; }
.card-video-play:focus-visible .card-video-play-bg { fill: var(--rp-red); }

/* Once playing, the iframe/video fills the box the poster occupied, so the
   card does not change height when the player appears. */
.card-video-frame .card-video-player {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The video card's title is a real link (the outer <a> is gone), so it needs
   the colour and hover the .card-link wrapper used to provide. */
.card-video .card-title a { color: inherit; }
.card-video .card-title a:hover { color: var(--accent, var(--rp-red)); }

/* :has() is unsupported in Firefox < 121 and Safari < 15.4. There the lead row
   keeps the standard tile width — the facade still works, just narrower — so
   this is a graceful degradation, not a break. */

/* ==========================================================================
   HOMEPAGE SECTION BANDS
   ==========================================================================
   The front page was one flat #fafafa field twelve strips tall, so where one
   section ended and the next began was carried entirely by the .strip-title
   rule. These two tints give each grid ROW its own band instead.

   Why nth-child in fours, not twos: .region-content-below is a two-column
   grid, so blocks 1+2 share a row, 3+4 share the next, and so on. Tinting
   odd/even would checkerboard the page; tinting in pairs paints whole rows.
   The 10px column gutter between a pair is closed by the box-shadow spread
   below, so a pair reads as one continuous band rather than two panels.

   Kinema and Naked City span both columns (grid-column: 1 / -1 earlier in this
   file), so they are their own rows and are assigned explicitly — the 4n
   arithmetic would otherwise hand both of them the same tint and merge them
   into one 2-section band.

   Contrast: measured against every foreground the strips use. #222222 titles
   (14.6:1), #4b5058 teasers (7.4:1) and #b70000 links (6.4:1) all clear AA on
   both tints. --rp-muted #999999 lands at 2.6:1 — but it is 2.7:1 on the
   current #fafafa too, so the bands inherit that shortfall rather than cause
   it. Raising --rp-muted to #6f6f6f clears AA on both tints; left alone here
   because it would restyle every date and section heading site-wide.
   -------------------------------------------------------------------------- */

.is-front .region-content-below > * {
  /* The tint has to reach past the block's own box to close the grid gutter:
     5px each side fills the 10px column gap, so a pair of blocks shows one
     unbroken band. Vertically it bleeds 5px into the 30px row gap, leaving
     20px of page background as the seam between bands. */
  padding: 22px 18px 26px;
  border-radius: 4px;
}

/* Rows 1, 3, 5 — cool grey. */
.is-front .region-content-below > :nth-child(4n+1),
.is-front .region-content-below > :nth-child(4n+2) {
  background: var(--rp-bg-alt-1);
  box-shadow: 0 0 0 5px var(--rp-bg-alt-1);
}

/* Rows 2, 4 — warm cream. */
.is-front .region-content-below > :nth-child(4n+3),
.is-front .region-content-below > :nth-child(4n+4) {
  background: var(--rp-bg-alt-2);
  box-shadow: 0 0 0 5px var(--rp-bg-alt-2);
}

/* The two full-width spanners, assigned so they alternate against each other
   and against the last half-width row above them. */
.is-front #block-respublica-strip-kinema {
  background: var(--rp-bg-alt-2);
  box-shadow: 0 0 0 5px var(--rp-bg-alt-2);
}

.is-front #block-respublica-strip-naked {
  background: var(--rp-bg-alt-1);
  box-shadow: 0 0 0 5px var(--rp-bg-alt-1);
}

/* Single column below 899px (see the responsive layer): blocks no longer pair
   into rows, so pairs would stack as double-height bands. Alternate one by one
   instead. Scoped to selectors nothing below this point re-declares, so it is
   safe outside the responsive layer at the end of the file. */
@media (max-width: 899px) {
  .is-front .region-content-below > :nth-child(odd),
  .is-front #block-respublica-strip-naked {
    background: var(--rp-bg-alt-1);
    box-shadow: 0 0 0 5px var(--rp-bg-alt-1);
  }
  .is-front .region-content-below > :nth-child(even),
  .is-front #block-respublica-strip-kinema {
    background: var(--rp-bg-alt-2);
    box-shadow: 0 0 0 5px var(--rp-bg-alt-2);
  }
  .is-front .region-content-below > * { padding: 18px 14px 20px; }
}

/* ==========================================================================
   RESPONSIVE LAYER — THIS MUST REMAIN THE LAST BLOCK IN THIS FILE
   ==========================================================================
   Why it lives at the bottom instead of next to the rules it modifies:
   this stylesheet grew as appended layers (base skin -> PARITY LAYER 2 ->
   "Fixes on top of" -> header -> tag cloud -> "one continuous two-column
   grid"), and each new layer re-declared layout selectors at the SAME
   specificity as the @media blocks above it. Media queries add no
   specificity, so a later non-media declaration always wins and the
   responsive rule silently dies.

   Four declarations had already died that way. The costly one:
     @media (max-width: 1179px) { .has-sidebar .main-grid {
       grid-template-columns: minmax(0, 1fr); } }        (was ~L1177)
   was overridden by the identical selector in the "one continuous
   two-column grid" block (~L1475), so the 300px sidebar column was still
   in the grid on a 360px phone and every page was wider than the viewport.

   RULE FOR FUTURE EDITS: do not re-declare these selectors below this line.
   Add new base styles ABOVE this block, not after it.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Layout collapse — re-asserted so nothing above can outrank it.
   The neighbouring rules from the earlier block (.sidebar-col margin-top,
   .region-sidebar auto-fill grid, .region-content-below single column) were
   never overridden and still apply; only the grid-template-columns below
   needed rescuing.
   -------------------------------------------------------------------------- */

@media (max-width: 1179px) {
  .has-sidebar .main-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   2. Slider on small screens — revived. A 16/9 slide is too short for the
   overlaid caption once the column is phone-width, and 44px/34px of desktop
   padding eats most of a 360px slide.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .rp-slider .card-media { aspect-ratio: 16 / 11; }
  .rp-slider .card-featured .card-body,
  .rp-slider .card-body { padding: 26px 18px 22px; }
}

/* --------------------------------------------------------------------------
   3. Migrated embeds may never exceed their column.
   The D7 corpus carries 4,376 hard-coded iframe widths (3,144 at 640px, and
   some at 854/1280px) and 11 <object>/<embed>. None of these elements had any
   max-width guard, so an article with a YouTube embed scrolled sideways on
   every phone. <img> was already covered by `img { max-width: 100% }` at the
   top of this file.
   -------------------------------------------------------------------------- */

.article-body iframe,
.article-body video,
.article-body embed,
.article-body object,
.article-comments iframe { max-width: 100%; }

/* Clamping the width alone would letterbox the video inside its authored
   height, so below the width where a 640px embed actually gets clamped, give
   the real video providers a fluid 16:9 box.

   Scoped to <=767px on purpose. Applied unconditionally it would set
   width:100% on desktop too, blowing a 640px video up to the full 870px
   column — a desktop layout change, which is out of scope here.

   Scoped by host on purpose too: Facebook plugin embeds (e.g. 640x380),
   Revive ad iframes and widgets are NOT 16:9 and must keep their own ratio,
   so they get only the max-width clamp above. */
@media (max-width: 767px) {
  .article-body iframe[src*="youtube.com"],
  .article-body iframe[src*="youtube-nocookie.com"],
  .article-body iframe[src*="youtu.be"],
  .article-body iframe[src*="player.vimeo.com"],
  .article-body iframe[src*="dailymotion.com"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* --------------------------------------------------------------------------
   4. Long words and bare URLs. filter_url turns bare links in the 70,502
   migrated comments into <a> with no break opportunity, and a single long URL
   is enough to widen the whole page. overflow-wrap inherits, which is why the
   container is enough — the comment markup itself is class-less (D10 dropped
   Classy).
   -------------------------------------------------------------------------- */

.article-body,
.article-comments,
.card-title,
.card-summary { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   5. Phone-only content overrides. Scoped to <=767px so desktop rendering of
   the archive is untouched: 2,015 bodies carry inline width:NNNpx from twelve
   years of editors pasting markup, and 96 carry <table>.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* max-width caps an inline `width`; !important is needed only because some
     of those inline styles set max-width themselves. */
  .article-body [style*="width"] { max-width: 100% !important; }

  /* No wrapper element exists to scroll, so the table becomes its own
     scroll container. Mobile-only, because display:block loosens a table's
     internal layout and desktop tables render correctly today. */
  .article-body table { display: block; width: 100%; overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   6. LARGE DESKTOPS — the page was an island on a 1440p screen.

   .container caps at 1220px, which on a 2560px display left 1340px (52% of
   the screen) as empty margin, and the type scale was built for that narrow
   box: 15px body, 14px tile captions, 11.5px chips. Together they were enough
   that the site had to be read at 175% browser zoom.

   Why every size is restated by hand instead of scaling one root value: this
   stylesheet uses `rem` for font-size ONLY — all 172 padding, margin, gap and
   radius values are px. Raising `html { font-size }` would therefore grow the
   text inside boxes that stayed put, and the cards would tighten and clip.
   So type and the padding around it step up together, explicitly.

   Two things deliberately NOT touched:
     - the 10px column gap in .region-content-below. The section bands close
       that gutter with `box-shadow: 0 0 0 5px`; widening the gap would split
       every band into two panels.
     - the Kinema/Naked/Foto-Video scroller widths, which are percentage-based
       (`calc((100% - 28px) / 3)`) and so scale on their own.

   Image headroom: the `wide` style is 1090px and cards top out at 620px here,
   so nothing is upscaled. `article_detail` is only 500px, but the article hero
   is capped at 380px and the reading column at 780px, both unchanged.
   -------------------------------------------------------------------------- */

@media (min-width: 1500px) {
  /* 1500 - 40 padding = 1460 content; 1460 - 340 sidebar - 10 gap = 1110 main;
     content_below columns become (1110 - 10) / 2 = 550px each. */
  .container { max-width: 1500px; }
  .has-sidebar .main-grid { grid-template-columns: minmax(0, 1fr) 340px; }

  /* Inherited copy only — everything below sets its own size. */
  body { font-size: 17px; }

  /* Section headings */
  .strip-title { font-size: 1.55rem; }
  .region-sidebar h2 { font-size: 1.18rem; }
  .region-sidebar .strip-title { font-size: 1.06rem; }

  /* Card titles */
  .card-title { font-size: 1.31rem; }
  .card-featured .card-title { font-size: 1.27rem; }
  .card-compact .card-title,
  .card-titleonly .card-title { font-size: 1.08rem; }
  .card-tile .card-title { font-size: 1rem; }
  .card-mediatile .card-title { font-size: 1.05rem; }
  .region-sidebar .card-title { font-size: 1rem; }
  .region-sidebar .card-compact .card-title { font-size: .98rem; }

  /* Teasers */
  .card-summary { font-size: 1.04rem; }
  .card-featured .card-summary { font-size: .98rem; }
  .card-compact .card-summary { font-size: .95rem; }

  /* Meta row: dates, comment counts, chips */
  .card-date, .article-date { font-size: 14.5px; }
  .card-compact .card-meta,
  .card-titleonly .card-meta { font-size: 14px; }
  .card-mediatile .card-meta,
  .region-sidebar .card-compact .card-meta { font-size: 13.5px; }
  .region-sidebar .card-date { font-size: 14px; }
  .chip { font-size: 13px; padding: 4px 13px; }

  /* Padding grows with the type, or the cards read as tighter than before. */
  .card-body { padding: 24px 28px 26px; }
  .card-featured .card-body { padding: 18px 20px 15px; }
  .card-tile .card-body { padding: 30px 16px 13px; }

  /* Bigger thumbs to match the bigger text beside them. */
  .card-compact .card-media { flex: 0 0 120px; width: 120px; }
  .region-sidebar .card-compact .card-media { flex: 0 0 80px; width: 80px; }

  /* The new sidebar section, same step as the cards around it. */
  .rp-subhead { font-size: .9rem; }
  .rp-media-link-title { font-size: 1.08rem; }
  .rp-media-link-source { font-size: 12.5px; }
  .rp-x-load { font-size: .92rem; }
  .region-sidebar .view-display-id-attachment_hesapi_lead .card-title { font-size: 1.18rem; }

  /* Selectors that outrank the plain .card-* rules above and would otherwise
     stay at their old size while everything around them grew. Matched at the
     same specificity, later in the file, so these win by source order:
       .rp-scroller …            (0,3,0) — the Kinema / Naked City carousels
       #block-respublica-sb-…    (1,x,0) — per-block sidebar tweaks
       .is-taxonomy …            (0,4,0) — category listings, which share the
                                           widened container. */
  .rp-scroller .card-featured .card-title,
  .rp-scroller .card-compact .card-title,
  .rp-scroller .card-mediatile .card-title { font-size: 1.05rem; }

  #block-respublica-sb-shendeti .card-compact .card-summary { font-size: .9rem; }
  #block-respublica-sb-mostcommented .mc-title { font-size: 1rem; }
  #block-respublica-sb-mostcommented .mc-count { font-size: .9rem; }
  #block-respublica-sb-comments2 .views-row { font-size: .98rem; }
  #block-respublica-sb-comments2 .comment-node-title a { font-size: .94rem; }

  .is-taxonomy .region-content .card-compact .card-title { font-size: 1.2rem; }
  .is-taxonomy .region-content .card-compact .card-summary { font-size: 1rem; }

  /* Header: the logo and menu take the same step as the rest of the page. 52px
     is still inside the asset's 78px native height. */
  .header-brand img,
  .site-header.is-scrolled .header-brand img { max-height: 52px; }
  .header-inner,
  .site-header.is-scrolled .header-inner { min-height: 80px; }
  .header-nav a { font-size: 18.5px; padding: 12px 17px; }
  .header-nav a::after { left: 17px; right: 17px; }
  .header-nav a[href="/search"] { padding: 12px 16px; }
  .header-nav a[href="/search"]::before { font-size: 19px; }

  /* Article page: the reading column stays 780px, so only the type moves. */
  .article-body { font-size: 1.19rem; }
  .site-footer nav a { font-size: 15px; }
  .footer-copy { font-size: 14px; }
}

/* Above ~2000px there is room for a wider box again, but the type is already
   at a comfortable reading size — only the geometry moves, plus a last small
   step on the headings that now have more column to fill. */
@media (min-width: 2000px) {
  /* 1660 - 40 = 1620 content; 1620 - 360 - 10 = 1250 main;
     content_below columns become (1250 - 10) / 2 = 620px each. */
  .container { max-width: 1660px; }
  .has-sidebar .main-grid { grid-template-columns: minmax(0, 1fr) 360px; }

  body { font-size: 17.5px; }
  .strip-title { font-size: 1.62rem; }
  .card-title { font-size: 1.36rem; }
  .card-featured .card-title { font-size: 1.32rem; }
  .card-summary { font-size: 1.07rem; }
  .article-body { font-size: 1.22rem; }
}

/* --------------------------------------------------------------------------
   7. Header on small screens — the logo must not crowd the hamburger.

   The desktop mark is 46px tall, i.e. 269px wide from the 457x78 asset. A
   360px phone has 320px of content box, leaving 51px for a 24px gap and a
   26px toggle; a 320px phone has none. Capped here, at the end of the file,
   because `.header-brand img { max-height: 46px }` is a plain rule further up
   and @media adds no specificity — a cap placed next to it would be dead.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .header-brand img,
  .site-header.is-scrolled .header-brand img { max-height: 38px; }
  .header-inner,
  .site-header.is-scrolled .header-inner { min-height: 62px; }
}

@media (max-width: 480px) {
  .header-brand img,
  .site-header.is-scrolled .header-brand img { max-height: 32px; }
}

/* --------------------------------------------------------------------------
   8. HOMEPAGE HEADLINES — one step larger again.

   Every size below is the selector's own existing value plus
   --rp-title-boost, so the type hierarchy that was tuned above is preserved
   exactly: a lead card title stays larger than a compact one, and a section
   heading stays larger than the headlines under it. To retune the whole
   homepage, change the one number in --rp-title-boost; nothing else.

   Scoped to .is-front, so article pages, category listings and search results
   keep the sizes set further up. The .is-front prefix also adds a class to
   every selector, which is what lets these beat the (0,3,0) .rp-scroller and
   .region-sidebar rules without relying on source order.

   Held back below 900px: the boost is a desktop correction. On a 360px phone
   a card is ~320px wide, and +10px would put a two-word headline on its own
   line — mobile type is already large relative to its viewport.
   -------------------------------------------------------------------------- */

:root { --rp-title-boost: 7px; }

@media (min-width: 900px) {
  /* >=900px  — desktop and tablet */
  .is-front .strip-title { font-size: calc(1.3rem + var(--rp-title-boost)); }   /* 20.8 -> 30.8px */
  .is-front .region-sidebar h2,
  .is-front .region-sidebar .view-display-id-attachment_hesapi_lead .card-title { font-size: calc(1.05rem + var(--rp-title-boost)); }   /* 16.8 -> 26.8px */
  .is-front .region-sidebar .strip-title,
  .is-front .card-compact .card-title,
  .is-front .card-titleonly .card-title,
  .is-front .rp-media-link-title { font-size: calc(.95rem + var(--rp-title-boost)); }   /* 15.2 -> 25.2px */
  .is-front .card-title { font-size: calc(1.14rem + var(--rp-title-boost)); }   /* 18.2 -> 28.2px */
  .is-front .card-featured .card-title { font-size: calc(1.1rem + var(--rp-title-boost)); }   /* 17.6 -> 27.6px */
  .is-front .card-tile .card-title,
  .is-front .region-sidebar .card-compact .card-title { font-size: calc(.88rem + var(--rp-title-boost)); }   /* 14.1 -> 24.1px */
  .is-front .card-mediatile .card-title,
  .is-front .rp-scroller .card-featured .card-title,
  .is-front .rp-scroller .card-compact .card-title,
  .is-front .rp-scroller .card-mediatile .card-title { font-size: calc(.92rem + var(--rp-title-boost)); }   /* 14.7 -> 24.7px */
  .is-front .region-sidebar .card-title { font-size: calc(.9rem + var(--rp-title-boost)); }   /* 14.4 -> 24.4px */

  /* The hero slider must stay ahead of the cards below it. */
  .is-front .rp-slider .card-title {
    font-size: clamp(calc(1.3rem + var(--rp-title-boost)), calc(2.6vw + var(--rp-title-boost)), calc(2rem + var(--rp-title-boost)));
  }   /* caps 32.0 -> 42.0px */
}

@media (min-width: 1500px) {
  /* >=1500px — wide desktops */
  .is-front .strip-title { font-size: calc(1.55rem + var(--rp-title-boost)); }   /* 24.8 -> 34.8px */
  .is-front .region-sidebar h2,
  .is-front .region-sidebar .view-display-id-attachment_hesapi_lead .card-title { font-size: calc(1.18rem + var(--rp-title-boost)); }   /* 18.9 -> 28.9px */
  .is-front .region-sidebar .strip-title { font-size: calc(1.06rem + var(--rp-title-boost)); }   /* 17.0 -> 27.0px */
  .is-front .card-title { font-size: calc(1.31rem + var(--rp-title-boost)); }   /* 21.0 -> 31.0px */
  .is-front .card-featured .card-title { font-size: calc(1.27rem + var(--rp-title-boost)); }   /* 20.3 -> 30.3px */
  .is-front .card-compact .card-title,
  .is-front .card-titleonly .card-title,
  .is-front .rp-media-link-title { font-size: calc(1.08rem + var(--rp-title-boost)); }   /* 17.3 -> 27.3px */
  .is-front .card-tile .card-title,
  .is-front .region-sidebar .card-title { font-size: calc(1rem + var(--rp-title-boost)); }   /* 16.0 -> 26.0px */
  .is-front .card-mediatile .card-title,
  .is-front .rp-scroller .card-featured .card-title,
  .is-front .rp-scroller .card-compact .card-title,
  .is-front .rp-scroller .card-mediatile .card-title { font-size: calc(1.05rem + var(--rp-title-boost)); }   /* 16.8 -> 26.8px */
  .is-front .region-sidebar .card-compact .card-title { font-size: calc(.98rem + var(--rp-title-boost)); }   /* 15.7 -> 25.7px */
}

@media (min-width: 2000px) {
  /* >=2000px — very wide */
  .is-front .strip-title { font-size: calc(1.62rem + var(--rp-title-boost)); }   /* 25.9 -> 35.9px */
  .is-front .region-sidebar h2,
  .is-front .region-sidebar .view-display-id-attachment_hesapi_lead .card-title { font-size: calc(1.18rem + var(--rp-title-boost)); }   /* 18.9 -> 28.9px */
  .is-front .region-sidebar .strip-title { font-size: calc(1.06rem + var(--rp-title-boost)); }   /* 17.0 -> 27.0px */
  .is-front .card-title { font-size: calc(1.36rem + var(--rp-title-boost)); }   /* 21.8 -> 31.8px */
  .is-front .card-featured .card-title { font-size: calc(1.32rem + var(--rp-title-boost)); }   /* 21.1 -> 31.1px */
  .is-front .card-compact .card-title,
  .is-front .card-titleonly .card-title,
  .is-front .rp-media-link-title { font-size: calc(1.08rem + var(--rp-title-boost)); }   /* 17.3 -> 27.3px */
  .is-front .card-tile .card-title,
  .is-front .region-sidebar .card-title { font-size: calc(1rem + var(--rp-title-boost)); }   /* 16.0 -> 26.0px */
  .is-front .card-mediatile .card-title,
  .is-front .rp-scroller .card-featured .card-title,
  .is-front .rp-scroller .card-compact .card-title,
  .is-front .rp-scroller .card-mediatile .card-title { font-size: calc(1.05rem + var(--rp-title-boost)); }   /* 16.8 -> 26.8px */
  .is-front .region-sidebar .card-compact .card-title { font-size: calc(.98rem + var(--rp-title-boost)); }   /* 15.7 -> 25.7px */
}

/* --------------------------------------------------------------------------
   9. SHQIPËRI HESAPI — one step larger than the rest of the sidebar.

   The section carries the site's editorial voice, so its headlines get
   --rp-hesapi-boost on top of the homepage boost. Both knobs are independent:
   change --rp-title-boost to move the whole page, this one to move only this
   block.

   These use the block id, so (1,2,0) clears the (0,3,0) .is-front rules in
   section 8 outright rather than relying on source order. Two bases, because
   the tiles and the featured lead row start from different sizes.
   -------------------------------------------------------------------------- */

:root { --rp-hesapi-boost: 4px; }

@media (min-width: 900px) {
  .is-front #block-respublica-sb-hesapi .card-tile .card-title {
    font-size: calc(.88rem + var(--rp-title-boost) + var(--rp-hesapi-boost));
  }
  .is-front #block-respublica-sb-hesapi .view-display-id-attachment_hesapi_lead .card-title {
    font-size: calc(1.05rem + var(--rp-title-boost) + var(--rp-hesapi-boost));
  }
}

@media (min-width: 1500px) {
  .is-front #block-respublica-sb-hesapi .card-tile .card-title {
    font-size: calc(1rem + var(--rp-title-boost) + var(--rp-hesapi-boost));
  }
  .is-front #block-respublica-sb-hesapi .view-display-id-attachment_hesapi_lead .card-title {
    font-size: calc(1.18rem + var(--rp-title-boost) + var(--rp-hesapi-boost));
  }
}