/* EZee Link — Home Layout B
 * Dedicated NBMCW magazine UI.
 * All visual decisions are scoped to .el-home-b; other site pages remain untouched.
 */

.el-home-b {
  --el-home-width: 1240px;
  --el-home-text: #1f2933;
  --el-home-muted: #667085;
  --el-home-link: #163f73;
  --el-home-link-hover: #c24a24;
  --el-home-accent: #b74624;
  --el-home-line: #e4e8ed;
  --el-home-soft: #f6f8fa;
  --el-home-card: #fff;
  --el-home-shadow: 0 8px 24px rgb(16 24 40 / 8%);

  --content-h1-size: clamp(1.45rem, 1.7vw, 1.8rem);
  --content-h2-size: clamp(1.12rem, 1.35vw, 1.38rem);
  --content-h3-size: clamp(.96rem, 1.05vw, 1.08rem);

  color: var(--el-home-text);
  font-family: var(--font-body);
}

.el-home-b *,
.el-home-b *::before,
.el-home-b *::after {
  box-sizing: border-box;
}

.el-home-b h1,
.el-home-b h2,
.el-home-b h3 {
  margin-top: 0;
  font-family: var(--font-body);
  color: var(--el-home-text);
}

.el-home-b h1 {
  font-size: var(--content-h1-size);
  line-height: 1.2;
  font-weight: 700;
}

.el-home-b h2 {
  font-size: var(--content-h2-size);
  line-height: 1.25;
  font-weight: 700;
}

.el-home-b h3 {
  font-size: var(--content-h3-size);
  line-height: 1.35;
  font-weight: 600;
}

.el-home-b p {
  line-height: 1.65;
}

.el-home-b a {
  color: var(--el-home-link);
  text-decoration: none;
  text-underline-offset: .16em;
  transition: color .18s ease;
}

.el-home-b a:hover,
.el-home-b a:focus-visible {
  color: var(--el-home-link-hover);
}

.el-home-b a:focus-visible,
.el-home-b button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.el-home-b .el-article-tag,
.el-home-b .el-stacked-article-category,
.el-home-b .el-category-link-underline {
  color: var(--el-home-muted);
  font-size: .78rem;
  line-height: 1.35;
  font-weight: 600;
}

.el-home-b .el-category-link-underline {
  display: inline-block;
  margin-bottom: 5px;
}

.el-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.el-wrapper-r1,
.el-wrapper-r2,
.el-wrapper-r3 {
  width: min(100% - 30px, var(--el-home-width));
  margin-inline: auto;
}

.el-wrapper-r1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding-top: 18px;
}

.el-wrapper-r1 > .el-container,
.el-wrapper-r3 > .el-container {
  width: 100%;
  min-width: 0;
  padding: 0;
}

.el-home-b .moduletable {
  margin: 0;
}

.el-home-b .el-sec-latest-news,
.el-wrapper-r2 > .moduletable > h2,
.el-home-b .el-tag-heading {
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--el-home-accent);
  letter-spacing: -.01em;
}

.el-home-b .el-tag-heading {
  text-align: left;
}

/* Top stories */
.el-slider-module {
  width: 100%;
  max-width: none;
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--el-home-card);
  box-shadow: var(--el-home-shadow);
}

.el-slider-wrapper {
  position: relative;
  overflow: hidden;
}

.el-slides-container {
  display: flex;
  transition: transform .5s ease-in-out;
}

.el-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.el-slide > .el-article-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--el-home-soft);
}

.el-slide img,
.el-section-viewit img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.el-slide img {
  transition: transform .35s ease;
}

.el-slide:hover img {
  transform: scale(1.025);
}

.el-slide-content {
  padding: 11px 13px 13px;
}

.el-slide-content h3,
.el-story-title {
  margin: 0;
}

.el-sec-wr1-left {
  margin-top: 2px;
}

.el-sec-wr1-left .el-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--el-home-line);
}

.el-sec-wr1-left .el-item:first-child {
  padding-top: 0;
}

.el-section-viewit {
  margin-top: 14px;
}

.el-section-viewit > a {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
}

.el-section-viewit h3 {
  margin: 8px 0 0;
}

/* Latest News */
.el-news-section {
  padding: 15px 16px 8px;
  background: var(--el-home-soft);
  border-top: 3px solid var(--el-home-accent);
}

.el-news-section .el-sec-latest-news {
  border-bottom: 0;
}

.el-sec-latest-news .el-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid var(--el-home-line);
}

.el-sec-latest-news .el-item:first-child {
  padding-top: 2px;
}

.el-sec-latest-news .el-item:last-child {
  border-bottom: 0;
}

.el-sec-latest-news .el-article-image {
  display: block;
  width: 84px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  background: #fff;
}

.el-sec-latest-news .el-article-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.el-sec-latest-news .el-article-content {
  min-width: 0;
}

.el-sec-latest-news .el-article-tags {
  margin-bottom: 3px;
}

.el-sec-latest-news .el-article-title {
  margin: 0;
}

/* Top-right promos and stories */
.el-wrapper-r1 > .el-container:nth-child(3) .el-middle-banner {
  margin: 0 0 14px;
}

.el-wrapper-r1 > .el-container:nth-child(3) .el-sec-latest-news .el-item {
  grid-template-columns: 76px minmax(0, 1fr);
}

.el-wrapper-r1 > .el-container:nth-child(3) .el-sec-latest-news .el-article-image {
  width: 76px;
}

/* Dynamic banners */
.el-pbanner {
  width: 80%;
  margin: 0 auto 15px auto;
}

.el-pbanner:empty,
.el-middle-banner:empty,
.el-divider:empty,
.el-event-banner:empty,
.el-home-b [data-pos]:empty {
  display: none;
  margin: 0;
  padding: 0;
}

.el-middle-banner,
.el-divider {
  margin: 18px auto;
}

.el-divider {
  width: min(78%, 970px);
}

.el-middle-banner {
  overflow: hidden;
  border-radius: 3px;
}

.el-middle-banner img,
.el-divider img,
.el-primebanner img,
.el-event-banner img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Interviews */
.el-wrapper-r2 {
  margin-top: 24px;
  padding-top: 2px;
}

.el-section-interview {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 2px 0 8px;
}

.el-int-items {
  display: flex;
  align-items: stretch;
  transition: transform .5s ease;
  will-change: transform;
}

.el-int-item {
  flex: 0 0 224px;
  width: 224px;
  margin-right: 18px;
}

.el-int-item > a {
  display: block;
}

.el-int-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  background: var(--el-home-soft);
}

.el-int-item .el-article-title {
  margin: 8px 0 0;
}

.el-int-slides {
  display: none;
}

.el-int-arrow {
  position: absolute;
  top: 42%;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 50%;
  background: rgb(17 24 39 / 68%);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.el-int-arrow:hover {
  background: rgb(17 24 39 / 88%);
}

.el-int-arrow.el-left {
  left: 8px;
}

.el-int-arrow.el-right {
  right: 8px;
}

/* Main stream + sidebar */
.el-wrapper-r3 {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 24px;
}

.el-wrapper-r3 .el-side-container {
  min-width: 0;
  padding: 14px;
  background: var(--el-home-soft);
  border-top: 3px solid var(--el-home-accent);
}

.el-wrapper-r3 .el-side-container .el-item {
  padding: 14px 0 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--el-home-line);
}

.el-wrapper-r3 .el-side-container .el-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.el-wrapper-r3 .el-side-container .el-item > a {
  display: flex;
  flex-direction: column;
}

.el-wrapper-r3 .el-side-container .el-article-title {
  order: 2;
  margin: 8px 0 0;
}

.el-wrapper-r3 .el-side-container img {
  order: 1;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 3px;
}

.el-event-banner {
  margin-top: 12px;
}

/* Editorial list rows */
.el-articles-row {
  margin-bottom: 18px;
}

.el-list-articles-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.el-list-article-item {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 20px;
  padding: 0 0 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--el-home-line);
}

.el-list-article-item:last-child {
  margin-bottom: 0;
}

.el-list-article-image {
  width: 210px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  background: var(--el-home-soft);
}

.el-list-article-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.el-list-article-content {
  min-width: 0;
}

.el-list-article-title,
.el-list-article-intro p {
  margin-top: 0;
}

.el-list-article-title {
  margin-bottom: 7px;
}

.el-list-article-intro {
  color: var(--el-home-muted);
}

.el-list-article-intro p {
  margin-bottom: 0;
}

/* Grid cards */
.el-row-three-columns,
.el-row-four-columns {
  display: grid;
  gap: 20px;
}

.el-row-three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.el-row-four-columns {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.el-col-three,
.el-col-four {
  min-width: 0;
}

.el-default-article-card,
.el-compact-article-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--el-home-line);
  border-radius: 5px;
  background: var(--el-home-card);
  box-shadow: 0 3px 12px rgb(16 24 40 / 5%);
}

.el-default-article-image,
.el-compact-article-image {
  overflow: hidden;
  background: var(--el-home-soft);
}

.el-default-article-image {
  aspect-ratio: 16 / 10;
}

.el-compact-article-image {
  aspect-ratio: 4 / 3;
}

.el-default-article-image img,
.el-compact-article-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.el-default-article-card:hover img,
.el-compact-article-card:hover img {
  transform: scale(1.025);
}

.el-default-article-content {
  padding: 13px 14px 15px;
}

.el-compact-article-content {
  padding: 11px 12px 13px;
}

.el-default-article-title,
.el-compact-article-title {
  margin: 0;
}

/* Stacked feature rows */
.el-row-stacked {
  display: flex;
  flex-direction: column;
}

.el-stacked-article-content-wrapper {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.el-stacked-article-image {
  width: 190px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  background: var(--el-home-soft);
}

.el-stacked-article-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.el-stacked-article-content {
  min-width: 0;
}

.el-stacked-article-title {
  margin: 0 0 7px;
}

.el-stacked-article-divider {
  margin: 18px 0;
  border: 0;
  border-top: 1px solid var(--el-home-line);
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
  .el-wrapper-r1 {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-areas:
      "middle right-top"
      "right-bottom right-bottom";
    gap: 22px;
  }

  .el-wrapper-r1 > .el-container:nth-child(1) {
    grid-area: right-bottom;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .el-wrapper-r1 > .el-container:nth-child(1) > div:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .el-wrapper-r1 > .el-container:nth-child(1) > div:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .el-wrapper-r1 > .el-container:nth-child(1) > div:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .el-wrapper-r1 > .el-container:nth-child(2) {
    grid-area: middle;
  }

  .el-wrapper-r1 > .el-container:nth-child(3) {
    grid-area: right-top;
  }

  .el-wrapper-r3 {
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 22px;
  }

  .el-row-three-columns,
  .el-row-four-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones */
@media (max-width: 575.98px) {
  .el-home-b {
    --content-h2-size: 1.12rem;
    --content-h3-size: .98rem;
  }

  .el-wrapper-r1,
  .el-wrapper-r2,
  .el-wrapper-r3 {
    width: min(100% - 24px, var(--el-home-width));
  }

  .el-wrapper-r1,
  .el-wrapper-r3 {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .el-wrapper-r1 {
    padding-top: 12px;
  }

  .el-wrapper-r1 > .el-container:nth-child(2) {
    order: 1;
  }

  .el-wrapper-r1 > .el-container:nth-child(1) {
    order: 2;
    display: block;
  }

  .el-wrapper-r1 > .el-container:nth-child(3) {
    order: 3;
  }

  .el-news-section {
    padding: 13px 12px 6px;
  }

  .el-sec-latest-news .el-item {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 10px;
  }

  .el-sec-latest-news .el-article-image {
    width: 78px;
  }

  .el-primebanner,
  .el-divider {
    width: 100%;
    max-width: 100%;
  }

  .el-int-item {
    flex-basis: min(72vw, 224px);
    width: min(72vw, 224px);
    margin-right: 14px;
  }

  .el-list-article-item,
  .el-stacked-article-content-wrapper {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .el-list-article-image,
  .el-stacked-article-image {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .el-row-three-columns,
  .el-row-four-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .el-wrapper-r3 .el-side-container {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .el-home-b *,
  .el-home-b *::before,
  .el-home-b *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* Phase 6 visual polish
 * Reduce visual noise and normalize weight/alignment without changing structure.
 */
.el-home-b {
  --content-h2-size: clamp(1.08rem, 1.22vw, 1.28rem);
  --content-h3-size: clamp(.94rem, .98vw, 1.01rem);
  --el-home-line: #e8ebef;
}

.el-home-b h1 { font-weight: 650; }
.el-home-b h2 { font-weight: 650; }
.el-home-b h3 { font-weight: 550; }

/* Section titles: one consistent, quiet rule instead of heavy boxed accents. */
.el-home-b .el-sec-latest-news,
.el-wrapper-r2 > .moduletable > h2,
.el-home-b .el-tag-heading {
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom-width: 1px;
}

/* Latest News should align naturally with Top Stories, not look like a boxed widget. */
.el-news-section {
  padding: 0;
  background: transparent;
  border-top: 0;
}

.el-news-section .el-sec-latest-news {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--el-home-line);
}

.el-sec-latest-news .el-item {
  padding: 8px 0;
  gap: 10px;
}

.el-sec-latest-news .el-article-title {
  line-height: 1.32;
}

/* Main top row alignment. */
.el-wrapper-r1 {
  gap: 24px;
}

.el-wrapper-r1 > .el-container {
  align-self: start;
}

.el-slider-module {
  box-shadow: none;
  border-radius: 2px;
}

.el-slide-content {
  padding: 9px 0 4px;
}

.el-sec-wr1-left .el-item {
  padding: 8px 0;
}

/* Interviews: cards should read as editorial tiles, not bordered boxes. */
.el-int-item .el-article-title {
  font-weight: 550;
  line-height: 1.3;
}

/* Main stream: slightly tighter vertical rhythm and better text/image alignment. */
.el-list-article-item {
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.el-list-article-image {
  width: 190px;
}

.el-list-article-title {
  margin-bottom: 5px;
  line-height: 1.32;
}

.el-list-article-intro {
  font-size: .91rem;
  line-height: 1.55;
}

/* Remove unnecessary card outlines/shadows from the lower magazine grids.
 * Separation now comes from whitespace and image rhythm.
 */
.el-default-article-card,
.el-compact-article-card {
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  background: transparent;
}

.el-default-article-content {
  padding: 9px 1px 5px;
}

.el-compact-article-content {
  padding: 8px 1px 4px;
}

.el-default-article-title,
.el-compact-article-title {
  line-height: 1.32;
}

/* Sidebar: keep distinction, but remove the heavy widget-box feeling. */
.el-wrapper-r3 {
  gap: 26px;
}

.el-wrapper-r3 .el-side-container {
  padding: 0 0 0 14px;
  background: transparent;
  border-top: 0;
  border-left: 1px solid var(--el-home-line);
}

.el-wrapper-r3 .el-side-container .el-item {
  padding-top: 12px;
  margin-bottom: 14px;
}

.el-wrapper-r3 .el-side-container .el-article-title {
  margin-top: 7px;
  line-height: 1.3;
}

/* Stacked editorial rows. */
.el-stacked-article-content-wrapper {
  gap: 16px;
}

.el-stacked-article-title {
  margin-bottom: 5px;
  line-height: 1.32;
}

.el-stacked-article-divider {
  margin: 15px 0;
}

/* Tags/categories are supporting metadata, never stronger than headlines. */
.el-home-b .el-article-tag,
.el-home-b .el-stacked-article-category,
.el-home-b .el-category-link-underline {
  font-size: .75rem;
  font-weight: 500;
}

/* Keep promotional banners centered and visually detached from editorial rules. */
.el-middle-banner,
.el-divider {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Mobile: no sidebar rule and keep comfortable reading scale. */
@media (max-width: 575.98px) {
  .el-home-b {
    --content-h2-size: 1.08rem;
    --content-h3-size: .96rem;
  }

  .el-wrapper-r3 .el-side-container {
    padding-left: 0;
    border-left: 0;
  }

  .el-list-article-item {
    grid-template-columns: 1fr;
  }

  .el-list-article-image {
    width: 100%;
  }
}


/* Phase 7 — alignment, breathing room, typography balance and banner integrity.
 * Header/global styles remain untouched.
 */

/* Use the desktop menu as a visual baseline, not an exact clone:
 * menu is 13px/600; editorial titles stay slightly larger and more readable.
 */
.el-home-b {
  --content-h2-size: clamp(1.06rem, 1.16vw, 1.22rem);
  --content-h3-size: clamp(.93rem, .96vw, 1rem);
}

.el-home-b h2 {
  font-weight: 600;
}

.el-home-b h3 {
  font-weight: 500;
}

.el-home-b a {
  color: #243746;
}

.el-home-b a:hover,
.el-home-b a:focus-visible {
  color: var(--el-home-link-hover);
}

/* Supporting text should sit close to nav typography but remain secondary. */
.el-home-b .el-article-tag,
.el-home-b .el-stacked-article-category,
.el-home-b .el-category-link-underline {
  font-size: .78rem;
  font-weight: 500;
  color: #66727d;
}

/* Row 1: force all three columns onto one visual top line.
 * The right column has no heading, so its first banner receives the same title-block offset.
 */
.el-wrapper-r1 {
  padding-top: 16px;
  gap: 24px;
}

.el-wrapper-r1 > .el-container {
  margin: 0;
  padding-top: 0;
}

.el-wrapper-r1 > .el-container > :first-child {
  margin-top: 0;
}

.el-wrapper-r1 > .el-container:nth-child(3) .el-middle-banner:first-child {
  margin-top: 0;
}

/* Common section-title rhythm. */
.el-home-b .el-sec-latest-news,
.el-wrapper-r2 > .moduletable > h2,
.el-home-b .el-tag-heading {
  min-height: 25px;
  margin: 0 0 11px;
  padding: 0 0 6px;
  line-height: 1.2;
}

/* Add deliberate vertical breathing room without making the page loose. */
.el-slider-module {
  margin-bottom: 16px;
}

.el-sec-wr1-left .el-item {
  padding: 9px 0;
}

.el-wrapper-r2 {
  margin-top: 30px;
}

.el-wrapper-r3 {
  margin-top: 30px;
}

.el-articles-row {
  margin-bottom: 22px;
}

.el-row-three-columns,
.el-row-four-columns {
  gap: 22px;
}

.el-stacked-article-divider {
  margin: 18px 0;
}

/* Editorial title hierarchy: lighter than before, but still clearly above menu text. */
.el-slide-content h3,
.el-sec-latest-news .el-article-title,
.el-list-article-title,
.el-stacked-article-title,
.el-default-article-title,
.el-compact-article-title,
.el-int-item .el-article-title,
.el-wrapper-r3 .el-side-container .el-article-title {
  font-weight: 500;
}

.el-list-article-intro {
  color: #68737d;
}

/* Event banner fix:
 * Sidebar's generic story-image rule must never crop/force promotional artwork.
 * Keep original banner proportions and create a consistent gap between consecutive banners.
 */
.el-wrapper-r3 .el-side-container .el-event-banner {
  width: 100%;
  margin: 18px 0 0;
  padding: 0;
}

.el-wrapper-r3 .el-side-container .el-event-banner img,
.el-home-b .el-event-banner img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  margin: 0 auto;
}

.el-event-banner > * {
  margin: 0;
}

.el-event-banner > * + *,
.el-event-banner img + img,
.el-event-banner a + a {
  margin-top: 14px;
}

.el-event-banner a {
  display: block;
}

.el-event-banner a + a {
  margin-top: 14px;
}

/* Avoid accidental image zoom/crop rules leaking into banner content. */
.el-event-banner img {
  transform: none !important;
}

/* Tablet: the right column becomes a grid area, so remove desktop banner offset. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .el-wrapper-r1 > .el-container:nth-child(3) {
    padding-top: 0;
  }
}

/* Mobile keeps natural document flow and comfortable gaps. */
@media (max-width: 575.98px) {
  .el-wrapper-r1 {
    padding-top: 12px;
  }

  .el-wrapper-r1 > .el-container:nth-child(3) {
    padding-top: 0;
  }

  .el-wrapper-r2,
  .el-wrapper-r3 {
    margin-top: 24px;
  }

  .el-event-banner > * + *,
  .el-event-banner img + img,
  .el-event-banner a + a {
    margin-top: 12px;
  }
}


/* Phase 9 — corrected Row 1 selectors.
 * Important: .el-sec-latest-news is used both on the H2 heading
 * and on article-list DIVs, so heading and list styling must be separated.
 */

/* Reset shared-class side effects on article-list containers. */
.el-home-b div.el-sec-latest-news {
  min-height: 0;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  line-height: normal;
}

/* Top Stories + Latest News headings: exact same rule, spacing and baseline. */
.el-home-b h2.el-sec-latest-news {
  min-height: 25px;
  margin: 0 0 12px;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--el-home-line);
  line-height: 1.2;
}

/* Top Stories heading sits inside .moduletable, so target the real DOM. */
.el-wrapper-r1 > .el-container:nth-child(1) .moduletable > h2.el-sec-latest-news,
.el-wrapper-r1 > .el-container:nth-child(2) .moduletable > h2.el-sec-latest-news {
  margin: 0 0 12px;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--el-home-line);
}

/* Give Row 1 editorial lists more breathing space. */
.el-wrapper-r1 > .el-container:nth-child(1) .el-sec-wr1-left .el-item {
  padding: 12px 0;
}

.el-wrapper-r1 > .el-container:nth-child(2) div.el-sec-latest-news .el-item,
.el-wrapper-r1 > .el-container:nth-child(3) div.el-sec-latest-news .el-item {
  padding: 11px 0;
}

.el-wrapper-r1 div.el-sec-latest-news .el-article-title,
.el-wrapper-r1 .el-sec-wr1-left h3 {
  line-height: 1.4;
}

/* A little air after the lead Top Stories slider. */
.el-wrapper-r1 > .el-container:nth-child(1) .el-slider-module {
  margin-bottom: 20px;
}

/* Third column: no trailing rule after final article and no section/list rule. */
.el-wrapper-r1 > .el-container:nth-child(3) div.el-sec-latest-news {
  border-bottom: 0;
}

.el-wrapper-r1 > .el-container:nth-child(3) div.el-sec-latest-news .el-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .el-wrapper-r1 > .el-container:nth-child(3) {
    padding-top: 0;
  }
}

@media (max-width: 575.98px) {
  .el-wrapper-r1 > .el-container:nth-child(3) {
    padding-top: 0;
  }
}


/* Phase 10 — section underline + Event Report spacing/separators. */

/* Top Stories + Latest News: keep the accent underline consistently. */
.el-wrapper-r1 > .el-container:nth-child(1) .moduletable > h2.el-sec-latest-news,
.el-wrapper-r1 > .el-container:nth-child(2) .moduletable > h2.el-sec-latest-news {
  border-bottom: 1px solid var(--el-home-accent);
}

/* Event Report heading follows the same editorial accent rule. */
.el-home-b h2.el-tag-heading {
  border-bottom: 1px solid var(--el-home-accent);
}

/* Event Report article separation:
 * tighter image-to-title spacing, larger story-to-story spacing,
 * visible subtle separator between stories only.
 */
.el-wrapper-r3 .el-side-container .el-item {
  padding-top: 18px;
  margin-bottom: 18px;
  border-top: 1px solid var(--el-home-line);
}

.el-wrapper-r3 .el-side-container .el-item:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.el-wrapper-r3 .el-side-container .el-item:last-of-type {
  margin-bottom: 0;
}

.el-wrapper-r3 .el-side-container .el-item img {
  margin-bottom: 8px;
}

.el-wrapper-r3 .el-side-container .el-article-title {
  margin-top: 0;
  margin-bottom: 0;
}

/* If the Event Report list is wrapped in .el-tagged-item,
 * apply the same rhythm there as a safeguard.
 */
.el-home-b .el-tagged-item + .el-tagged-item {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--el-home-line);
}

.el-home-b .el-tagged-item img {
  margin-bottom: 8px;
}

.el-home-b .el-tagged-item:last-child {
  margin-bottom: 0;
}


/* Phase 11 — Event Report injected divider-banner integrity.
 * These banners live inside the Event Report story stream and were inheriting
 * the sidebar's generic 16:9 story-image crop.
 */
.el-wrapper-r3 .el-side-container [data-pos="divider-banner"] {
  display: block;
  width: 100%;
  margin: 18px 0;
  padding: 0;
  overflow: visible;
}

.el-wrapper-r3 .el-side-container [data-pos="divider-banner"]:empty {
  display: none;
  margin: 0;
}

.el-wrapper-r3 .el-side-container [data-pos="divider-banner"] img,
.el-home-b [data-pos="divider-banner"] img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0;
  margin: 0 auto;
  transform: none !important;
}

.el-wrapper-r3 .el-side-container [data-pos="divider-banner"] a {
  display: block;
  width: 100%;
  margin: 0;
}

/* If multiple creatives are injected into one divider slot, keep them distinct. */
.el-wrapper-r3 .el-side-container [data-pos="divider-banner"] > * + *,
.el-wrapper-r3 .el-side-container [data-pos="divider-banner"] a + a,
.el-wrapper-r3 .el-side-container [data-pos="divider-banner"] img + img {
  margin-top: 14px;
}


/* Phase 12 — image system
 * Editorial source images are standardized at 800x600 (4:3).
 * Promotional/banner artwork keeps its own natural ratio.
 */

/* Editorial imagery: use the native 4:3 publishing ratio consistently. */
.el-home-b .el-slide > .el-article-link,
.el-home-b .el-section-viewit > a,
.el-home-b .el-sec-latest-news .el-article-image,
.el-home-b .el-list-article-image,
.el-home-b .el-default-article-image,
.el-home-b .el-compact-article-image,
.el-home-b .el-stacked-article-image,
.el-home-b .el-int-item > a,
.el-home-b .el-wrapper-r3 .el-side-container .el-item > a {
  aspect-ratio: auto;
}

/* The actual editorial images retain their native 800x600 proportions.
 * Width is responsive; height follows naturally, so no 16:9 crop is imposed.
 */
.el-home-b .el-slide img,
.el-home-b .el-section-viewit img,
.el-home-b .el-sec-latest-news .el-article-image img,
.el-home-b .el-list-article-image img,
.el-home-b .el-default-article-image img,
.el-home-b .el-compact-article-image img,
.el-home-b .el-stacked-article-image img,
.el-home-b .el-int-item img,
.el-home-b .el-wrapper-r3 .el-side-container .el-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Containers must not crop the native 4:3 image. */
.el-home-b .el-slide > .el-article-link,
.el-home-b .el-section-viewit > a,
.el-home-b .el-sec-latest-news .el-article-image,
.el-home-b .el-list-article-image,
.el-home-b .el-default-article-image,
.el-home-b .el-compact-article-image,
.el-home-b .el-stacked-article-image {
  height: auto;
}

/* Banner/ad artwork is not editorial content:
 * preserve each creative's natural proportions and never crop it.
 */
.el-home-b .el-primebanner img,
.el-home-b .el-middle-banner img,
.el-home-b .el-divider img,
.el-home-b .el-event-banner img,
.el-home-b [data-pos="prime-banner"] img,
.el-home-b [data-pos="middle-banner"] img,
.el-home-b [data-pos="divider-banner"] img,
.el-home-b [data-pos="event-banner"] img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  margin-inline: auto;
  transform: none !important;
  border: 1px solid #e1e5e9;
  border-radius: 0;
}

/* Keep a clean gap when more than one creative is injected in a banner slot. */
.el-home-b .el-primebanner a + a,
.el-home-b .el-middle-banner a + a,
.el-home-b .el-divider a + a,
.el-home-b .el-event-banner a + a,
.el-home-b [data-pos="prime-banner"] a + a,
.el-home-b [data-pos="middle-banner"] a + a,
.el-home-b [data-pos="divider-banner"] a + a,
.el-home-b [data-pos="event-banner"] a + a {
  margin-top: 14px;
}


/* Phase 13 — Row 1 Column 3 logical video positions. */
.el-home-b .el-video-fallback[hidden] { display:none !important; }
.el-home-b .el-video-fallback:not([hidden]) { display:block; margin:0 0 18px; }
.el-home-b [data-el-video-spot]:empty { display:none; margin:0; }

/* Responsive video module — Row 1 Column 3 fallback video */
.el-home-b .el-video-section,
.el-home-b .el-video-wrap {
    width: 100%;
}

.el-home-b .el-video-wrap {
    aspect-ratio: 16 / 9;
}

.el-home-b .el-video-wrap iframe,
.el-home-b .el-video-wrap video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* Upcoming Events — breathing room before banner stack */
.el-home-b .el-side-container > h2.el-tag-heading {
  margin: 40px 0px 10px 0px;
}


/* =========================================================
   Light section surfaces — Latest News + Event Report
   Scoped to NBMCW homepage only.
   ========================================================= */

/* Latest News: subtle secondary-surface treatment. */
.el-home-b .el-news-section {
  padding: 14px 16px 10px;
  background: var(--el-home-soft);
  border-radius: 3px;
}

/* Event Report sidebar: match Latest News surface without restoring a heavy box. */
.el-home-b .el-wrapper-r3 .el-side-container {
  padding: 14px 14px 16px;
  background: var(--el-home-soft);
  border-left: 0;
  border-radius: 3px;
}

/* Keep the Event Report heading aligned cleanly inside the light surface. */
.el-home-b .el-wrapper-r3 .el-side-container > h2.el-tag-heading:first-child {
  margin-top: 0;
}

/* Mobile: retain the differentiation but reduce internal padding slightly. */
@media (max-width: 575.98px) {
  .el-home-b .el-news-section {
    padding: 12px 12px 8px;
  }

  .el-home-b .el-wrapper-r3 .el-side-container {
    padding: 12px;
  }
}