.dwd-channels{--gap:1rem; margin:1rem 0;}
.dwd-channels__header{display:flex; align-items:baseline; justify-content:space-between; margin-bottom: .5rem;}
.dwd-row{margin-bottom:1.5rem;}
.dwd-row__title{margin:.25rem 0 .5rem 0;}
.dwd-row__scroller{display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem;}
.dwd-card{scroll-snap-align:start; min-width: 200px; max-width:220px; display:flex; flex-direction:column; position:relative}
.dwd-card__image img{width:100%; height:auto; display:block; border-radius:6px;}
.dwd-card__meta{margin-top:.5rem; font-size:.9rem;}
.dwd-card__title{font-weight:600; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.dwd-card__series{opacity:.7; font-size:.85rem;}
.dwd-card__fav{position:absolute; top:.5rem; right:.5rem; background:#fff; border:1px solid #ddd; border-radius:999px; width:32px; height:32px; line-height:30px; text-align:center; cursor:pointer}
@media (max-width:600px){ .dwd-card{min-width: 160px; max-width: 180px;} }


/* Full-bleed option: allow the container to span edge-to-edge */
.dwd-fullbleed { position: relative; }
.dwd-fullbleed .dwd-hero { width: 100%; }
@media (min-width: 700px){
  .dwd-fullbleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
}

/* Hero (Featured) */
.dwd-hero{ position:relative; margin: 0 0 1.5rem 0; }
.dwd-hero__track{ display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
.dwd-hero__slide{ position:relative; min-width:min(90vw,1100px); height: clamp(240px, 46vw, 520px); scroll-snap-align:center; border-radius:12px; overflow:hidden; }
.dwd-hero__imgwrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.dwd-hero__overlay{ position:absolute; inset:auto 0 0 0; padding:1rem 1.25rem 1.25rem; color:#fff; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%); }
.dwd-hero__title{ margin:0 0 .25rem 0; font-size: clamp(1.1rem, 3.2vw, 2rem); line-height:1.1; }
.dwd-hero__series{ opacity:.85; font-size: clamp(.85rem, 2vw, 1rem); }

.dwd-hero__nav{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:999px; border:1px solid rgba(0,0,0,.15); background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer; }
.dwd-hero__nav--prev{ left:.5rem; }
.dwd-hero__nav--next{ right:.5rem; }
.dwd-hero__nav:focus{ outline:2px solid #2271b1; outline-offset:2px; }

/* Keep regular rows after the hero */