/* ---------- GLOBAL VARIABLES ---------- */
:root {
  --tv-color: #002050;
  --tv-bg: #ffffff;
  --tv-radius: 14px;
  --tv-image-radius: 12px;
  --tv-shadow: 0 10px 22px rgba(0,0,0,0.08);
  --tv-inner-shadow: 0 6px 18px rgba(0,0,0,0.05);
  --tv-max-width: 450px;
}

/* ---------- OUTER WRAPPER ---------- */
.tv-featured-widget {
  max-width: var(--tv-max-width);
  width: 100%;
  background: var(--tv-bg);
  padding-bottom: 30px;
  border-radius: 20px;
  box-shadow: var(--tv-shadow);
  border: 1px solid rgba(0,0,0,0.05);
  color: var(--tv-color);
  font-family: "Inter", system-ui, sans-serif;

  /* --- STICKY LOGIC --- */
  position: -webkit-sticky;
  position: sticky;
  top: 20px; 
  align-self: start;
}

/* ---------- INNER WHITE PANEL ---------- */
.tv-featured-outer {
  background: var(--tv-bg);
  padding: 20px;
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-inner-shadow);
}

/* ---------- HEADING ---------- */
.tv-featured-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px 0;
  font-weight: 700;
  font-size: 22px;
  color: var(--tv-color);
}

.tv-accent-flag {
  width: 44px;
  height: 6px;
  border-radius: 6px;
  background: var(--tv-color);
}

.tv-featured-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 32, 80, 0.15);
}

.tv-featured-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tv-featured-imagewrap {
  width: 100%;
  overflow: hidden;
  border-radius: var(--tv-image-radius);
  background: #eee;
  aspect-ratio: 16 / 10;
  display: flex;
}

.tv-featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tv-featured-body {
  padding-top: 16px;
}

.tv-featured-title {
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tv-color);
}

.tv-featured-meta {
  font-size: 15px;
  font-weight: 600;
  color: var(--tv-color);
}

/* Disable sticky on mobile */
@media (max-width: 991px) {
  .tv-featured-widget {
    position: static;
  }
}

@media (max-width: 480px) {
  :root { --tv-max-width: 100%; }
  .tv-featured-title { font-size: 19px; }
}
/* === REPLACEMENT: responsive sidebar + flexible content === */
.sidebar-right, .sidebar-left {
  /* let grid / flex decide; remove hard 173px */
  width: auto !important;
  flex: 0 0 33.3333%;        /* or choose 30% / 35% depending on desired sidebar size */
  max-width: 420px;          /* optional: cap it */
  box-sizing: border-box;
}

.content-right {
  width: auto !important;
  flex: 1 1 0;               /* take remaining space */
  box-sizing: border-box;
}

/* make sure the row is using flex behavior (bootstrap .row does this, but safe fallback) */
.container > .row { display: flex; flex-wrap: wrap; align-items: flex-start; }