/* Styles spécifiques à la page d'accueil */
.hero-main .hero-media::after { content:''; display:block; height:4px; background: var(--bwtv-color-primary); }
.section-title { border-left: 10px solid var(--bwtv-color-primary); padding-left: 8px; }

/* Top block: HERO + Livefeed */
.home-top { margin-top: 18px; }
.home-grid { display:grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items:start; }

/* HERO styles */
.hero-main { text-align:center; }
.hero-main .hero-media { display:block; aspect-ratio: 16 / 9; overflow:hidden; background:#f3f3f3; }
.hero-main .hero-media img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-kicker { margin: 14px 0 10px; color:#111; font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.hero-kicker span { position:relative; padding:2px 0; display:inline-block; }
.hero-kicker span::after { content:''; display:block; width:40px; height:2px; background:var(--bwtv-color-primary); margin:6px auto 0; }
.hero-title { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; margin: 8px 0 6px; text-wrap: balance; }
.hero-title a { color:#111; }
.hero-title a:hover { text-decoration:underline; }
.hero-byline { font-size:13px; color:var(--bwtv-color-muted); font-style:italic; margin-bottom:14px; }
.hero-excerpt { color:var(--bwtv-color-muted); width:min(85%, 760px); margin:0 auto 16px; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Intro éditoriale sous le HERO (home) */
.home-intro { display:none; }
.home-intro-title { font-size:18px; font-weight:900; text-transform:uppercase; margin:0 0 6px; }
.home-intro-text { max-width:760px; margin:0; color:var(--bwtv-color-muted); }

/* Intro éditoriale des pages thématiques (News, People, Sport, etc.) */
.page-intro { max-width:760px; margin: 8px 0 16px; color: var(--bwtv-color-muted); font-size:14px; display:none; }
.page-title-main { display:none; }

/* Masquage spécifique pour la page Communiqués (titre/intro éventuels) */
body.page-communiques .entry-title,
body.page-communiques .page-intro { display:none; }

/* Teaser list under HERO */
.teaser-list { list-style:none; margin: 18px 0 0; padding:0; }
.teaser-li { display:grid; grid-template-columns: 22px 1fr; column-gap:6px; align-items:start; padding:4px 0; }
.teaser-li + .teaser-li { margin-top: 1px; }
.teaser-li::before { content:''; width:22px; height:22px; margin-top:1px; background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M1 12h18' stroke='%23e6007e' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M18 7l6 5-6 5V7z' fill='%23e6007e'/></svg>"); }
.teaser-li a { color:#111; font-weight:600; font-size:15px; line-height:1.25; display:block; }
.teaser-li a:hover { text-decoration:underline; }

/* Right column: Livefeed */
.livefeed-panel { align-self:start; }
.lf-head { background: var(--bwtv-color-primary); color:#fff; font-weight:800; font-size:12px; text-transform:uppercase; padding:6px 10px; letter-spacing:.02em; margin:0; border:1px solid var(--bwtv-color-border); border-bottom:0; }
.lf-date { display:block; background:#f5f5f5; color:#000; font-weight:800; font-size:12px; padding:6px 10px; letter-spacing:.02em; border-top:1px solid var(--bwtv-color-border); border-bottom:1px solid var(--bwtv-color-border); }
.lf-list { list-style:none; margin:0; padding:0; border:1px solid var(--bwtv-color-border); border-top:none; height:700px; overflow-y:auto; overscroll-behavior: contain; position:relative; -webkit-overflow-scrolling: touch;
  /* Fade the content itself to transparent at the bottom so it blends with page bg */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0,
    rgba(0,0,0,1) calc(100% - 160px),
    rgba(0,0,0,1) calc(100% - 80px),
    rgba(0,0,0,0) 100%
  );
          mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0,
    rgba(0,0,0,1) calc(100% - 160px),
    rgba(0,0,0,1) calc(100% - 80px),
    rgba(0,0,0,0) 100%
  );
}
.lf-item { display:grid; grid-template-columns: 56px 1fr; gap:10px; align-items:start; padding:6px 10px; border-bottom:1px solid var(--bwtv-color-border); }
.lf-list .lf-item:first-child { padding-top:10px; }
.lf-item:last-child { border-bottom:none; }
.lf-time { color:var(--bwtv-color-muted); font-weight:400; min-width:48px; text-align:right; }
.lf-text { min-width:0; }
.lf-link { color:#111; font-size:14px; line-height:1.35; font-weight:900; }
.lf-link:hover { text-decoration:underline; }
.livefeed-panel .lf-list .lf-link { font-weight: 900 !important; font-family: var(--bwtv-font-headings) !important; }
.lf-pill { display:inline-block; background:var(--bwtv-color-primary); color:#fff; font-weight:700; font-size:12px; padding:1px 5px; border-radius:3px; margin-right:6px; text-decoration:none; vertical-align:middle; }
.lf-pill:hover { text-decoration:none; filter: brightness(0.96); }
.lf-more { display:block; text-align:center; background:var(--bwtv-color-primary); color:#fff; font-weight:800; padding:8px 10px; margin-top:0; text-transform:uppercase; }

/* Coupe du Monde 2026 */
.home-worldcup-band {
  margin: 24px 0 4px;
  padding: 22px 0;
  background: #f7f9fc;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.home-worldcup {
  --hwc-border: #dfe5ee;
  --hwc-muted: #58677d;
}
.hwc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.hwc-heading {
  min-width: 0;
}
.hwc-kicker {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin-bottom: 6px;
  color: #b00060;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.hwc-title {
  margin: 0;
  color: #101827;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
}
.hwc-calendar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--bwtv-color-primary);
  border-radius: 6px;
  background: var(--bwtv-color-primary);
  color: #fff;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
}
.hwc-calendar-link:hover {
  color: #000;
  text-decoration: none;
  filter: brightness(.97);
}
.hwc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 18px;
  align-items: start;
}
.hwc-fixtures,
.hwc-news {
  min-width: 0;
  border: 1px solid var(--hwc-border);
  border-radius: 8px;
  background: #fff;
}
.hwc-block-title {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hwc-border);
  color: #101827;
  font-weight: 900;
  line-height: 1.2;
}
.hwc-shortcode {
  padding: 12px;
}
.hwc-shortcode .bwtv-wc-2026-matches {
  margin: 0;
}
.hwc-shortcode .bwtv-wc-2026-head {
  display: none;
}
.hwc-shortcode .bwtv-wc-2026-match-list {
  display: grid;
  gap: 10px;
}
.hwc-shortcode .bwtv-wc-2026-match-card {
  margin: 0;
}
.hwc-feature {
  padding: 12px;
  border-bottom: 1px solid var(--hwc-border);
}
.hwc-feature-body {
  min-width: 0;
}
.hwc-date {
  display: block;
  margin-bottom: 5px;
  color: var(--hwc-muted);
  font-size: 12px;
  font-weight: 800;
}
.hwc-feature-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}
.hwc-feature-title a {
  color: #101827;
  text-decoration: none;
}
.hwc-feature-title a:hover {
  text-decoration: underline;
}
.hwc-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hwc-news-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 11px 12px;
  border-bottom: 1px solid var(--hwc-border);
}
.hwc-news-list li:last-child {
  border-bottom: 0;
}
.hwc-news-list a {
  color: #101827;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}
.hwc-news-list a:hover {
  text-decoration: underline;
}
.hwc-news-list time {
  color: var(--hwc-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1024px) {
  .home-grid { grid-template-columns: 1fr; }
  .hwc-grid { grid-template-columns: 1fr; }
  .lf-list { height:400px; overflow-y:auto; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0,
      rgba(0,0,0,1) calc(100% - 160px),
      rgba(0,0,0,1) calc(100% - 80px),
      rgba(0,0,0,0) 100%
    );
            mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0,
      rgba(0,0,0,1) calc(100% - 160px),
      rgba(0,0,0,1) calc(100% - 80px),
      rgba(0,0,0,0) 100%
    );
  }
}
@media (max-width: 640px) {
  .home-worldcup-band { margin-top: 18px; padding: 18px 0; }
  .hwc-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .hwc-title { font-size: 24px; line-height: 1.15; }
  .hwc-calendar-link { width: 100%; }
  .hwc-feature-title { font-size: 15px; line-height: 1.3; }
  .hwc-news-list li { grid-template-columns: 1fr; gap: 5px; }
}

/* Theme blocks (sections) */
.theme-block { margin: 34px 0 24px; }
.tb-head { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.tb-title { margin:0; font-size:34px; line-height:1.1; font-weight:900; text-transform:uppercase; }
.tb-rule { flex:1; height:3px; background: var(--bwtv-color-border); display:block; }

/* Petit texte d’introduction des blocs thématiques (NEWS, REFLEXION, etc.) */
.tb-intro { max-width:760px; margin: 0 0 12px; color: var(--bwtv-color-muted); font-size:14px; }

.tb-grid { display:grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 22px; align-items:start; }
.tb-feature { position:relative; min-width:0; }
.tb-media { position:relative; display:block; overflow:hidden; aspect-ratio: 16 / 9; }
.tb-media img { width:100%; height:100%; object-fit:cover; display:block; }
.tb-overlay-pill { position:absolute; left:10px; bottom:10px; background:#000; color:#fff; font-weight:700; font-size:12px; padding:6px 8px; border-radius:2px; }
.tb-feat-title { font-size:24px; line-height:1.25; margin:10px 0 6px; }
.tb-feat-title a { color:#111; }
.tb-date { font-size:12px; color:var(--bwtv-color-muted); margin-bottom:8px; }
.tb-excerpt { color:var(--bwtv-color-muted); overflow-wrap:anywhere; }

.tb-list { min-width:0; list-style:none; margin:0; padding:0; display:grid; grid-template-columns: minmax(0, 1fr); gap:14px; }
.tb-li { min-width:0; display:grid; grid-template-columns: 140px minmax(0, 1fr); gap:12px; align-items:center; }
.tb-li-body { min-width:0; }
.tb-li-thumb { display:block; aspect-ratio: 16 / 9; overflow:hidden; }
.tb-li-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.tb-li-title { color:#111; font-weight:700; }
.tb-li-title:hover { text-decoration:underline; }
.tb-li-date { font-size:12px; color:var(--bwtv-color-muted); margin-top:4px; }

.tb-more-wrap { text-align:right; margin-top:12px; }
.tb-more { color:#e40000; font-weight:800; text-transform:capitalize; }
.tb-more:hover { text-decoration:underline; }

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

/* Lazy placeholders */
.tb-placeholder { position:relative; }
.tb-placeholder .tb-skel { height: 220px; border:1px solid var(--bwtv-color-border); border-radius:4px; background:
  linear-gradient(90deg, rgba(0,0,0,0.035) 25%, rgba(0,0,0,0.06) 37%, rgba(0,0,0,0.035) 63%);
  background-size: 400% 100%;
  animation: tb-shimmer 1.2s ease-in-out infinite;
}
@keyframes tb-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Elections générales 2026 au Bénin (bloc spécial) */
.tb-elec { position:relative; z-index:0; padding:10px 12px 14px; display:grid; grid-template-columns: 6fr 6fr; }
.tb-elec::before { content:""; position:absolute; top:0; bottom:0; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; background:#fff0f7; border-top:1px solid #f5cade; border-bottom:1px solid #f5cade; z-index:-1; }
.tb-elec .tb-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; grid-column: 1 / -1; }
.tb-elec .tb-title { position:relative; padding-left:14px; margin:0; font-size:20px; font-weight:900; text-transform:uppercase; }
.tb-elec .tb-title::before { content:""; position:absolute; left:0; top:.4em; width:8px; height:8px; background: var(--bwtv-color-primary); border-radius:1px; }
.tb-elec .tb-more-head { color: var(--bwtv-color-link); font-size:12px; text-transform:uppercase; text-decoration:none; }
.tb-elec .tb-more-head:hover { text-decoration:underline; }
.tb-elec .elec-rule { height:3px; background:#f5cade; margin:6px 0 10px; grid-column: 1 / -1; }

.tb-elec .elec-top { display:grid; grid-template-columns: 6fr 6fr; gap:18px; align-items:start; grid-column: 1 / -1; }
.tb-elec .elec-media { position:relative; display:block; aspect-ratio: 16 / 9; overflow:hidden; border-radius:6px; background:#eee; }
.tb-elec .elec-media img { width:100%; height:100%; object-fit:cover; display:block; }
.tb-elec .elec-play { position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); color:#000; display:flex; align-items:center; justify-content:center; font-size:14px; }
.tb-elec .elec-main { min-width:0; }
.tb-elec .elec-title { margin:0 0 6px; font-size:22px; line-height:1.25; font-weight:900; }
.tb-elec .elec-title a { color:#111; text-decoration:none; }
.tb-elec .elec-title a:hover { text-decoration:underline; }
.tb-elec .elec-excerpt { color: var(--bwtv-color-muted); display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.tb-elec .elec-meta { margin-top:8px; color: var(--bwtv-color-muted); font-size:12px; text-transform:uppercase; letter-spacing:.02em; }

.tb-elec .elec-grid-mini { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px 22px; margin-top:14px; grid-column: 1 / -1; }
/* If .elec-grid-mini is inside the .elec-top grid (due to markup), force it to span both columns */
.tb-elec .elec-top .elec-grid-mini { grid-column: 1 / -1 !important; }
.tb-elec .elec-mini { display:block; }
.tb-elec .mini-thumb { display:block; position:relative; aspect-ratio:16 / 9; overflow:hidden; border-radius:6px; background:#eee; }
.tb-elec .mini-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.tb-elec .mini-play { position:absolute; right:8px; bottom:8px; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.9); color:#000; display:flex; align-items:center; justify-content:center; font-size:12px; }
.tb-elec .mini-body { margin-top:6px; }
.tb-elec .mini-cat { color: var(--bwtv-color-primary); font-weight:900; font-size:11px; letter-spacing:.02em; text-transform:uppercase; }
.tb-elec .mini-title { display:block; margin-top:4px; color:#111; text-decoration:none; line-height:1.35; font-weight:900; }
.tb-elec .mini-title:hover { text-decoration:underline; }
.tb-elec .mini-date { display:block; margin-top:2px; font-size:11px; color: var(--bwtv-color-muted); }

@media (max-width: 1024px) {
  .tb-elec .elec-top { grid-template-columns: 1fr !important; }
  .tb-elec .elec-grid-mini { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 12px !important; 
    grid-template-columns: none !important;
    width: 100% !important;
  }
  .tb-elec .elec-mini { 
    display: grid !important; 
    grid-template-columns: 100px 1fr !important; 
    gap: 12px !important; 
    align-items: start !important;
    width: 100% !important;
  }
  .tb-elec .mini-thumb { 
    aspect-ratio: 4/3 !important;
    width: 100px !important;
    height: auto !important;
  }
  .tb-elec .mini-body { margin-top: 0 !important; }
  .tb-elec .mini-cat { font-size: 10px !important; margin-bottom: 4px !important; }
  .tb-elec .mini-title { font-size: 14px !important; line-height: 1.3 !important; margin-top: 0 !important; }
  .tb-elec .mini-date { font-size: 11px !important; margin-top: 4px !important; }
}

/* Force mobile layout even more specifically */
@media (max-width: 768px) {
  .theme-block .tb-elec .elec-grid-mini { 
    display: flex !important; 
    flex-direction: column !important; 
    grid-template-columns: none !important;
  }
  .theme-block .tb-elec .elec-mini { 
    display: grid !important; 
    grid-template-columns: 80px 1fr !important; 
  }
}

/* Desktop: enforce 2-column layout (image left, text right) for presidential block */
@media (min-width: 1025px) {
  .tb-elec .elec-top { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .tb-elec .elec-media { grid-column: 1 !important; }
  .tb-elec .elec-main { grid-column: 2 !important; display: block !important; }
  .tb-elec .elec-grid-mini { grid-column: 1 / -1 !important; width: 100%; }
}

/* Livefeed height enforcement (homepage) */
.livefeed-panel .lf-list { height: 700px !important; overflow-y:auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 1024px) {
  .livefeed-panel .lf-list { height: 400px !important; }
}

/* Theme block type 2: PLUS DE … (compact list in columns) */
.tb-compact { margin-top: 8px; }
.tb2-head { margin: 14px 0 10px; }
.tb2-title { margin:0; font-size:18px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; }
.tb2-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px; }
.tb2-item { padding-top:10px; border-top:1px solid var(--bwtv-color-border); }
.tb2-link { color:#111; font-weight:700; line-height:1.35; display:inline-block; }
.tb2-link:hover { text-decoration:underline; }
.tb2-meta { margin-top:6px; font-size:12px; color:var(--bwtv-color-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tb2-cat { color:var(--bwtv-color-primary); font-weight:800; }
.tb2-dot { color:var(--bwtv-color-muted); }

@media (max-width: 1024px) {
  .tb2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tb2-grid { grid-template-columns: 1fr; }
}