/**========================================================================
 *  Saba News Agency — agency.css
 *  Scoped styles for agency.html, news-single.html and news.html.
 *  Requires base.css.
 *
 *  Sections: layout → hero + kiosk → ad zone → news feed → story blocks
 *            → native inserts → gallery → editorial → sidebar widgets
 *            → article single → archive listing → responsive
 *
 *  Breadcrumb and comment-thread components live in base.css since they
 *  are shared, unstyled-by-platform building blocks.
 *========================================================================**/

/*===================================================================
  Layout
===================================================================*/

.agency {
  padding-block: var(--sn-space-lg) var(--sn-space-2xl);
}

.agency > * + * {
  margin-block-start: var(--sn-space-xl);
}

.agency__main {
  min-width: 0;
}

.agency__main > * + * {
  margin-block-start: var(--sn-space-xl);
}

.agency__aside {
  min-width: 0;
}

.agency__aside-inner {
  position: sticky;
  inset-block-start: calc(var(--headerHeight) + 1rem);
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-md);
}

/* Safety: let grid/flex children shrink instead of forcing overflow */
.news-card,
.mini-card,
.trending__item,
.editor-picks__item,
.kiosk-card {
  min-width: 0;
}

/*===================================================================
  Shared — section heading with "view all"
===================================================================*/

.block-head {
  display: flex;
  align-items: baseline;
  gap: var(--sn-space-sm);
  margin-block-end: var(--sn-space-md);
  padding-block-end: var(--sn-space-2xs);
  border-block-end: 2px solid var(--sn-ink);
}

.block-head__title {
  font-size: var(--sn-fs-lg);
  font-weight: 700;
  position: relative;
  padding-inline-start: 0.85rem;
}

.block-head__title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.15rem 0.15rem;
  width: 4px;
  border-radius: 2px;
  background-color: var(--sn-editorial);
}

.block-head__all {
  margin-inline-start: auto;
  font-size: var(--sn-fs-xs);
  font-weight: 500;
  color: var(--sn-link);
  white-space: nowrap;
}

.block-head__live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--sn-fs-2xs);
  font-weight: 700;
  color: var(--sn-editorial);
}

.block-head__live .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--sn-editorial);
  position: relative;
}

.block-head__live .live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--sn-editorial);
  animation: pulse-ring 1.8s ease-out infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* headline links: ink, hover editorial red */
.news-card__title a,
.mini-card__title a,
.gallery__title a,
.editorial__title a,
.trending__title a,
.editor-picks__title a {
  color: inherit;
}

.news-card__title a:hover,
.mini-card__title a:hover,
.gallery__title a:hover,
.editorial__title a:hover,
.trending__title a:hover,
.editor-picks__title a:hover {
  color: var(--sn-editorial);
}

/*===================================================================
  Hero — news slider + cross-platform kiosk
  (ported from the saba/index.html reference prototype: hero-news-card
  cinematic slides + hero-vod-card + kiosk-card print covers)
===================================================================*/

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--mainTransition);
  z-index: 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--whiteColor);
  z-index: 2;
  letter-spacing: 0.3px;
}

.glass-badge {
  background: rgba(var(--whiteColorRGB), 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--whiteColorRGB), 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.dark-badge {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--whiteColorRGB), 0.1);
}

.live-badge {
  background: var(--primaryColor);
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 0 15px rgba(var(--primaryColorRGB), 0.4);
}

.color-danger {
  color: #ff5252;
}

.color-warning {
  color: #ffd740;
}

.blinking-dot {
  animation: blinkDot 1.5s infinite;
  font-size: 0.6rem;
}

@keyframes blinkDot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

/*--- Main news slider --------------------------------------------------*/

.hero-news-slider {
  border-radius: var(--sn-radius-lg);
  overflow: hidden;
  height: 100%;
  min-height: 520px;
  box-shadow: var(--sn-shadow);
  background-color: var(--premiumDark);
}

.hero-news-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 16/9;
  position: relative;
  width: 100%;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 3rem);
  text-decoration: none;
}

.hero-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.95) 0%, rgba(var(--premiumDarkRGB), 0.4) 50%, transparent 100%);
  z-index: 1;
  transition: var(--mainTransition);
}

.hero-news-card:hover .hero-bg-img {
  transform: scale(1.05);
}

.hero-news-card:hover .hero-card-overlay {
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.98) 0%, rgba(var(--premiumDarkRGB), 0.6) 50%, rgba(var(--premiumDarkRGB), 0.2) 100%);
}

.hero-news-top {
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}

.hero-news-content {
  position: relative;
  z-index: 2;
  transform: translateY(0);
  transition: var(--mainTransition);
}

.hero-news-card:hover .hero-news-content {
  transform: translateY(-5px);
}

.hero-news-title {
  color: var(--whiteColor);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.5;
  margin-block-end: 1rem;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.hero-news-excerpt {
  color: rgba(var(--whiteColorRGB), 0.85);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-block-end: 2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.hero-news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-block-start: 1px solid rgba(var(--whiteColorRGB), 0.15);
  padding-block-start: 1.5rem;
  position: relative;
  z-index: 2;
}

.hero-news-meta {
  display: flex;
  gap: 1.5rem;
  color: rgba(var(--whiteColorRGB), 0.7);
  font-size: 0.95rem;
}

.hero-news-meta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-btn-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--whiteColorRGB), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--whiteColor);
  font-size: 1.25rem;
  transition: var(--mainTransition);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--whiteColorRGB), 0.2);
}

.hero-news-card:hover .hero-btn-circle {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  transform: translateX(-8px);
  box-shadow: var(--premiumGlow);
}

.hero-news-pagination {
  position: absolute;
  inset-inline-end: clamp(1.5rem, 3vw, 3rem);
  bottom: clamp(0.5rem, 1vw, 1rem) !important;
  z-index: 10;
  display: flex;
  gap: 6px;
  inset-inline: 0 !important;
  justify-content: center;
  margin: auto;
}

.hero-news-pagination .swiper-pagination-bullet {
  background: rgba(var(--whiteColorRGB), 0.4);
  opacity: 1;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  transition: var(--mainTransition);
  margin: 0 !important;
}

.hero-news-pagination .swiper-pagination-bullet-active {
  background: var(--primaryColor);
  width: 24px;
  box-shadow: 0 0 10px rgba(var(--primaryColorRGB), 0.5);
}

/*--- VOD card -----------------------------------------------------*/

.hero-vod-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 100%;
  min-height: 260px;
  aspect-ratio: 16 / 9;
  border-radius: var(--sn-radius-lg);
  overflow: hidden;
  padding: 1.5rem;
  box-shadow: var(--sn-shadow);
  background-color: var(--premiumDark);
}

.hero-vod-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.9) 0%, rgba(var(--premiumDarkRGB), 0.3) 50%, rgba(var(--premiumDarkRGB), 0.4) 100%);
  z-index: 1;
  transition: var(--mainTransition);
}

.hero-vod-card:hover .hero-vod-overlay {
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.95) 0%, rgba(var(--premiumDarkRGB), 0.4) 50%, rgba(var(--premiumDarkRGB), 0.6) 100%);
}

.hero-vod-card:hover .hero-bg-img {
  transform: scale(1.05);
}

.hero-vod-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-vod-play {
  width: 60px;
  height: 60px;
  margin-inline: auto;
  background: rgba(var(--whiteColorRGB), 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--whiteColorRGB), 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--whiteColor);
  font-size: 1.5rem;
  padding-inline-start: 4px;
  position: relative;
  z-index: 2;
  transition: var(--mainTransition);
}

.play-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(var(--whiteColorRGB), 0.6);
  animation: playPulse 2s infinite;
  z-index: -1;
}

@keyframes playPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.hero-vod-card:hover .hero-vod-play {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  box-shadow: var(--premiumGlow);
}

.hero-vod-card:hover .play-pulse-ring {
  border-color: var(--primaryColor);
}

.hero-vod-content {
  position: relative;
  z-index: 2;
}

.hero-vod-title {
  color: var(--whiteColor);
  font-size: 1.15rem;
  font-weight: 700;
  margin-block-end: 1rem;
  line-height: 1.5;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hero-vod-meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hero-vod-progress {
  width: 100%;
  height: 4px;
  background: rgba(var(--whiteColorRGB), 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.hero-vod-progress .progress-bar {
  height: 100%;
  background: #10b981;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.hero-vod-stats {
  display: flex;
  justify-content: space-between;
  color: rgba(var(--whiteColorRGB), 0.8);
  font-size: 0.85rem;
}

.hero-vod-stats span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/*--- Kiosk cards — print covers (newspaper / magazine) -------------*/

.kiosk-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--sn-radius-lg);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  height: 100%;
  transition: var(--mainTransition);
  box-shadow: var(--sn-shadow);
}

.bg-kiosk-daily {
  background: linear-gradient(145deg, var(--slate900) 0%, var(--premiumDark) 100%);
  border: 1px solid rgba(var(--whiteColorRGB), 0.05);
}

.bg-kiosk-monthly {
  background: linear-gradient(145deg, var(--whiteColor) 0%, var(--slate50) 100%);
  border: 1px solid var(--slate200);
}

.bg-kiosk-daily .kiosk-label,
.bg-kiosk-daily .kiosk-issue {
  color: var(--whiteColor);
}

.bg-kiosk-daily .kiosk-date {
  color: var(--slate400);
}

.bg-kiosk-monthly .kiosk-label,
.bg-kiosk-monthly .kiosk-issue {
  color: var(--slate800);
}

.bg-kiosk-monthly .kiosk-date {
  color: var(--slate500);
}

.kiosk-header {
  display: flex;
  justify-content: center;
  margin-block-end: 1rem;
}

.kiosk-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.9;
}

.kiosk-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
}

.kiosk-3d-wrapper {
  width: clamp(95px, 75%, 160px);
  margin-block-end: 1.5rem;
  position: relative;
}

.kiosk-cover-img {
  width: 100%;
  border-radius: 2px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  height: 100%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
  transition: var(--mainTransition);
  position: relative;
  z-index: 2;
}

.bg-kiosk-monthly .kiosk-cover-img {
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15);
}

.kiosk-card:hover .kiosk-cover-img {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.3);
}

.kiosk-info {
  margin-block-end: 1rem;
}

.kiosk-issue {
  font-size: 1.15rem;
  font-weight: 800;
  margin-block-end: 0.3rem;
}

.kiosk-date {
  font-size: 0.85rem;
}

.kiosk-action-group {
  max-width: 260px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.kiosk-btn-view {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem;
  border-radius: var(--sn-radius);
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--mainTransition);
  text-decoration: none;
}

.kiosk-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--sn-radius);
  font-size: 1.1rem;
  transition: var(--mainTransition);
  text-decoration: none;
  flex-shrink: 0;
}

.bg-kiosk-daily .kiosk-btn-view,
.bg-kiosk-daily .kiosk-btn-icon {
  background: rgba(var(--whiteColorRGB), 0.08);
  border: 1px solid rgba(var(--whiteColorRGB), 0.15);
  color: var(--whiteColor);
}

.bg-kiosk-daily .kiosk-btn-view:hover,
.bg-kiosk-daily .kiosk-btn-icon:hover {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  transform: translateY(-2px);
  box-shadow: var(--premiumGlow);
}

.kiosk-btn-view,
.kiosk-btn-icon {
  background: var(--whiteColor);
  border: 1px solid var(--slate200);
  color: var(--slate800);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}

.kiosk-btn-view:hover,
.kiosk-btn-icon:hover {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--whiteColor);
  transform: translateY(-2px);
  box-shadow: var(--premiumGlow);
}

@media (max-width: 1199px) {
  .hero-news-slider {
    min-height: 480px;
  }
}

@media (max-width: 767px) {
  .hero-news-card {
    padding: 1.5rem;
  }

  .hero-news-title {
    font-size: 1.25rem;
  }

  .hero-news-excerpt {
    font-size: 0.9rem;
    margin-block-end: 1.5rem;
  }

  .hero-news-pagination {
    inset-inline-end: 1.5rem;
    bottom: 1.5rem !important;
  }
}

/*===================================================================
  Ad zone
===================================================================*/

.adzone__head {
  display: flex;
  align-items: center;
  gap: var(--sn-space-2xs);
  margin-block-end: 0.5rem;
  font-size: var(--sn-fs-3xs);
  color: var(--sn-ink-muted);
}

.adzone__grid .ad__media {
  aspect-ratio: 3 / 1;
}

/*===================================================================
  News feed — "Latest News" (main column)
===================================================================*/

.newsfeed__grid .news-card__media {
  aspect-ratio: 16 / 9;
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.news-card__media {
  border-radius: var(--sn-radius);
  overflow: hidden;
  background-color: var(--sn-surface-sunken);
}

.news-card__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.news-card__cat {
  font-size: var(--sn-fs-3xs);
  font-weight: 700;
  color: var(--sn-editorial);
}

.news-card__title {
  font-size: var(--sn-fs-sm);
  font-weight: 700;
  line-height: 1.55;
  margin-block: 0.2rem;
}

.news-card__excerpt {
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink-muted);
  line-height: 1.8;
}

.news-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
  font-size: var(--sn-fs-3xs);
  color: var(--sn-ink-muted);
}

.news-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.newsfeed__more {
  margin-block-start: var(--sn-space-md);
  display: flex;
  justify-content: center;
}

/*===================================================================
  Story blocks — editorial-block mini-card list
===================================================================*/

.mini-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding-block: 0.7rem;
  border-block-end: 1px solid var(--sn-hairline);
}

.mini-card:first-child {
  padding-block-start: 0;
}

.mini-card:last-child {
  border-block-end: 0;
}

.mini-card__media {
  aspect-ratio: 4/3;
  border-radius: var(--sn-radius-sm);
  overflow: hidden;
  background-color: var(--sn-surface-sunken);
}

.mini-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-card__cat {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--sn-editorial);
}

.mini-card__title {
  font-size: var(--sn-fs-2xs);
  font-weight: 500;
  line-height: 1.6;
  margin-block-start: 0.2rem;
}

/*===================================================================
  Native inserts (cross-platform promos between blocks)
===================================================================*/

.insert {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sn-space-md);
  padding: var(--sn-space-md);
  border-radius: var(--sn-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sn-hairline);
}

.insert__label {
  display: block;
  font-size: var(--sn-fs-3xs);
  font-weight: 700;
  color: var(--sn-editorial);
  margin-block-end: 0.3rem;
}

.insert__title {
  font-size: var(--sn-fs-sm);
  font-weight: 700;
  line-height: 1.6;
  color: var(--sn-ink);
}

.insert__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 28px;
  margin-block-start: 0.4rem;
  font-size: var(--sn-fs-2xs);
  font-weight: 500;
  color: var(--sn-link);
}

.insert__content {
  min-width: 0;
  flex: 1;
}

/* TV insert */
.insert--tv {
  background-color: var(--premiumDark);
  border-color: transparent;
  color: var(--lightTextColor);
}

.insert--tv .insert__title {
  color: var(--lightTextColor);
}

.insert--tv .insert__label {
  color: #ff6b6b;
}

.insert__play {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--premiumDark);
  background-color: var(--lightTextColor);
  border-radius: 50%;
}

.insert__play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  animation: pulse-ring 2s ease-out infinite;
}

.insert__action {
  flex-shrink: 0;
  color: var(--lightTextColor);
  font-size: 1.1rem;
}

/* Newspaper insert (editorial quote) */
.insert--paper {
  background-color: var(--slate50);
  border-inline-start: 4px solid var(--sn-ink);
}

.insert--paper .insert__quote {
  position: absolute;
  inset-block-start: -0.5rem;
  inset-inline-end: 0.75rem;
  font-size: 4rem;
  line-height: 1;
  color: rgba(33, 37, 43, 0.06);
  pointer-events: none;
}

.insert--paper .insert__cover {
  flex-shrink: 0;
  width: 110px;
  aspect-ratio: 3 / 4;
  border-radius: var(--sn-radius-sm);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.insert--paper .insert__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Magazine insert */
.insert--mag {
  background-color: var(--slate50);
}

.insert--mag .insert__cover {
  flex-shrink: 0;
  width: 96px;
  aspect-ratio: 3 / 4;
  border-radius: var(--sn-radius-sm);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
}

.insert--mag .insert__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*===================================================================
  Gallery — Photo & Multimedia
===================================================================*/

.gallery__item {
  position: relative;
  display: block;
  border-radius: var(--sn-radius);
  overflow: hidden;
  color: var(--lightTextColor);
}

.gallery__media {
  aspect-ratio: 16 / 9;
}

.gallery__media img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sn-transition);
}

.gallery__item:hover .gallery__media img {
  transform: scale(1.05);
}

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 8, 16, 0.8), rgba(5, 8, 16, 0) 55%);
}

.gallery__count {
  position: absolute;
  inset-block-start: 0.6rem;
  inset-inline-end: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  font-size: var(--sn-fs-3xs);
  font-weight: 500;
  background-color: rgba(0, 0, 0, 0.55);
  border-radius: 2rem;
}

.gallery__play {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--sn-ink);
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
}

.gallery__title {
  position: absolute;
  inset-inline: 0.75rem;
  inset-block-end: 0.7rem;
  z-index: 2;
  font-size: var(--sn-fs-2xs);
  font-weight: 700;
  line-height: 1.5;
}

.gallery__item--lg .gallery__title {
  font-size: var(--sn-fs-sm);
}

/*===================================================================
  Editorial — lead + mini-card list (Cinema / Radio & TV /
  Art & Culture / World)
===================================================================*/

.editorial__lead .news-card__media {
  aspect-ratio: 16 / 9;
  margin-block-end: 0.75rem;
}

.editorial__title {
  font-size: var(--sn-fs-lg);
  line-height: 1.4;
  margin-block-end: 0.5rem;
}

.editorial__dropcap {
  font-size: var(--sn-fs-xs);
  line-height: 1.95;
  color: var(--sn-ink-soft);
}

.editorial__list {
  border-inline-start: 1px solid var(--sn-hairline);
  padding-inline-start: var(--sn-space-lg);
}

/*===================================================================
  Sidebar widgets
===================================================================*/

.widget {
  background-color: var(--sn-surface);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-lg);
  padding: 1.25rem;
}

.widget__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-block-end: var(--sn-space-sm);
  padding-block-end: 0.5rem;
  border-block-end: 2px solid var(--sn-ink);
}

.widget__title {
  font-size: var(--sn-fs-md);
  font-weight: 700;
  position: relative;
  padding-inline-start: 0.8rem;
}

.widget__title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.1rem 0.1rem;
  width: 4px;
  border-radius: 2px;
  background-color: var(--sn-editorial);
}

.widget__live {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--sn-fs-3xs);
  font-weight: 700;
  color: var(--sn-editorial);
}

.widget__live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--sn-editorial);
}

/*--- Breaking-news category tabs (فوری‌ها) -------------------*/

.breaking-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-end: var(--sn-space-sm);
}

.breaking-tabs__btn {
  border: 1px solid var(--sn-hairline);
  background-color: var(--sn-surface);
  color: var(--sn-ink-muted);
  font-size: var(--sn-fs-3xs);
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--sn-transition-fast);
  white-space: nowrap;
}

.breaking-tabs__btn:hover {
  color: var(--sn-ink);
  border-color: var(--sn-ink);
}

.breaking-tabs__btn.is-active {
  background-color: var(--sn-editorial);
  border-color: var(--sn-editorial);
  color: var(--whiteColor, #fff);
}

/*--- Latest-news timeline (sidebar echo) --------------------*/

.timeline__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  padding-block: 0.65rem;
  border-block-end: 1px solid var(--sn-hairline);
}

.timeline__item:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.timeline__time {
  font-size: var(--sn-fs-2xs);
  font-weight: 500;
  color: var(--sn-link);
  font-variant-numeric: tabular-nums;
}

.timeline__link {
  font-size: var(--sn-fs-xs);
  font-weight: 500;
  color: var(--sn-ink);
  line-height: 1.65;
}

.timeline__link:hover {
  color: var(--sn-editorial);
}

.timeline__item--latest .timeline__time {
  color: var(--sn-editorial);
  font-weight: 700;
}

/*--- Featured picks (simple link list, no timestamps) ---------*/

.picks__item {
  padding-block: 0.65rem;
  border-block-end: 1px solid var(--sn-hairline);
}

.picks__item:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.picks__link {
  font-size: var(--sn-fs-xs);
  font-weight: 500;
  color: var(--sn-ink);
  line-height: 1.65;
}

.picks__link:hover {
  color: var(--sn-editorial);
}

/*--- Trending (watermark numerals) ------------------------*/

.trending__item {
  position: relative;
  padding: 0.75rem 0;
  padding-inline-start: 3rem;
  border-block-end: 1px solid var(--sn-hairline);
}

.trending__item:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.trending__rank {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--sn-watermark);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.trending__title {
  font-size: var(--sn-fs-xs);
  font-weight: 500;
  line-height: 1.65;
}

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

.ad-widget {
  padding: 0;
  border: 0;
  background: none;
}

/*--- Poll ----------------------------------------------*/

.poll__question {
  font-size: var(--sn-fs-xs);
  font-weight: 700;
  line-height: 1.75;
  margin-block-end: var(--sn-space-sm);
}

.poll__option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.65rem 0.75rem;
  margin-block-end: 0.5rem;
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius);
  font-size: var(--sn-fs-2xs);
  line-height: 1.5;
  cursor: pointer;
  transition: border-color var(--sn-transition-fast), background-color var(--sn-transition-fast);
}

.poll__option:hover {
  border-color: var(--sn-link);
}

.poll__option input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--sn-editorial);
}

.poll__option:has(input:checked) {
  border-color: var(--sn-link);
  background-color: rgba(63, 81, 181, 0.06);
}

.poll__actions {
  margin-block-start: var(--sn-space-sm);
}

.poll__results {
  margin-block-start: var(--sn-space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-sm);
}

.poll__result-label {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--sn-fs-2xs);
  margin-block-end: 0.35rem;
}

.poll__result-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.poll__bar {
  height: 8px;
  background-color: var(--sn-surface-sunken);
  border-radius: 2rem;
  overflow: hidden;
}

.poll__bar-fill {
  height: 100%;
  background-color: var(--sn-link);
  border-radius: 2rem;
  transition: width 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.poll__result--leading .poll__bar-fill {
  background-color: var(--sn-editorial);
}

.poll__note {
  margin-block-start: var(--sn-space-xs);
  font-size: var(--sn-fs-3xs);
  color: var(--sn-ink-muted);
}

/*--- Editor picks --------------------------------------*/

.editor-picks__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--sn-hairline);
}

.editor-picks__item:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.editor-picks__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--sn-surface-sunken);
}

.editor-picks__title {
  font-size: var(--sn-fs-2xs);
  font-weight: 500;
  line-height: 1.6;
}

.editor-picks__name {
  display: block;
  margin-block-start: 0.2rem;
  font-size: 0.6875rem;
  color: var(--sn-ink-muted);
}

/*===================================================================
  Article — single news page
===================================================================*/

.article__title {
  margin-block: var(--sn-space-sm);
}

.article__excerpt {
  font-size: var(--sn-fs-md);
  color: var(--sn-ink-soft);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sn-space-sm);
  margin-block-start: var(--sn-space-md);
  padding-block: var(--sn-space-sm);
  border-block: 1px solid var(--sn-hairline);
}

.article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--sn-fs-2xs);
  color: var(--sn-ink-muted);
}

.article__byline strong {
  color: var(--sn-ink);
  font-weight: 700;
}

.article__byline .byline__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
}

.article__share {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.article__share a,
.article__share button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sn-ink-soft);
  background-color: var(--sn-surface-sunken);
  border-radius: 50%;
  transition: background-color var(--sn-transition-fast), color var(--sn-transition-fast);
}

.article__share a:hover,
.article__share button:hover {
  color: var(--lightTextColor);
  background-color: var(--sn-editorial);
}

.article__cover {
  margin-block-start: var(--sn-space-lg);
}

.article__cover-media {
  aspect-ratio: 16 / 9;
  border-radius: var(--sn-radius-lg);
  overflow: hidden;
}

.article__cover-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article__cover figcaption {
  margin-block-start: 0.5rem;
  font-size: var(--sn-fs-2xs);
  color: var(--sn-ink-muted);
}

.article__body {
  margin-block-start: var(--sn-space-lg);
  font-size: var(--sn-fs-sm);
  color: var(--sn-ink-soft);
}

.article__body > * + * {
  margin-block-start: var(--sn-space-md);
}

.article__body h2 {
  font-size: var(--sn-fs-lg);
  color: var(--sn-ink);
}

.article__quote {
  position: relative;
  padding: var(--sn-space-sm) var(--sn-space-lg);
  font-size: var(--sn-fs-md);
  font-weight: 500;
  color: var(--sn-ink);
  border-inline-start: 3px solid var(--sn-editorial);
  background-color: var(--sn-surface-sunken);
  border-radius: 0 var(--sn-radius) var(--sn-radius) 0;
}

.article__quote cite {
  display: block;
  margin-block-start: 0.5rem;
  font-size: var(--sn-fs-2xs);
  font-style: normal;
  font-weight: 400;
  color: var(--sn-ink-muted);
}

.article__inline-figure {
  aspect-ratio: 16 / 9;
  border-radius: var(--sn-radius);
  overflow: hidden;
}

.article__inline-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article__inline-figure figcaption {
  margin-block-start: 0.4rem;
  font-size: var(--sn-fs-2xs);
  color: var(--sn-ink-muted);
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: var(--sn-space-lg);
  padding-block-start: var(--sn-space-md);
  border-block-start: 1px solid var(--sn-hairline);
}

.article__related {
  margin-block-start: var(--sn-space-xl);
}

/*===================================================================
  Archive listing (news.html)
===================================================================*/

.archive-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sn-space-sm);
  margin-block-end: var(--sn-space-lg);
}

.archive-toolbar .filter-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.archive-toolbar .filter-chip {
  padding: 0.4rem 1rem;
  font-size: var(--sn-fs-2xs);
  font-weight: 500;
  color: var(--sn-ink-soft);
  background-color: var(--sn-surface-sunken);
  border-radius: 2rem;
  transition: background-color var(--sn-transition-fast), color var(--sn-transition-fast);
}

.archive-toolbar .filter-chip:hover {
  color: var(--sn-ink);
}

.archive-toolbar .filter-chip.is-active {
  color: var(--lightTextColor);
  background-color: var(--sn-editorial);
}

.archive-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
  font-size: var(--sn-fs-2xs);
  color: var(--sn-ink-muted);
}

.archive-toolbar__sort select {
  min-height: 38px;
  padding-inline: 0.75rem;
  font-size: var(--sn-fs-2xs);
  color: var(--sn-ink);
  background-color: var(--sn-surface);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-sm);
  cursor: pointer;
}

.archive-meta {
  margin-block-end: var(--sn-space-md);
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink-muted);
}

.archive-more {
  display: flex;
  justify-content: center;
  margin-block-start: var(--sn-space-lg);
}

/*===================================================================
  Responsive
===================================================================*/

@media (max-width: 991.98px) {
  .agency__aside-inner {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sn-space-md);
    margin-block-start: 0;
  }

  .editorial__list {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

@media (max-width: 560px) {
  .agency__aside-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .insert {
    flex-wrap: wrap;
  }

  .insert--paper .insert__cover,
  .insert--mag .insert__cover {
    display: none;
  }

  .trending__rank {
    font-size: 2rem;
  }

  .article__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .archive-toolbar__sort {
    margin-inline-start: 0;
    width: 100%;
  }

  .archive-toolbar__sort select {
    flex: 1;
  }
}