/* -----------------------------------------------------------------------
   feed_scroller.css – v2.1
   -----------------------------------------------------------------------
   • NEW: component‑scoped palette in :root → --feed-surface-0…6
     (mirrors comments.css pattern so theming is one‑stop).
   • CHANGED: .feed-item background now uses var(--feed-surface-2)
     (was var(--section-dark-background-color); no visual change).
   • Everything else retained exactly to preserve layout/behavior.
--------------------------------------------------------------------------- */
:root {
  --feed-surface-1: var(--section-medium-background-color);
  --feed-surface-2: var(--section-dark-background-color);
}

/* ---------------------------------------------------------
   First Partial (Top Two Rows)
   No responsive scaling, just desktop layout
--------------------------------------------------------- */

.article-vertical-feed .article-similar,
.article-vertical-feed .article-recommended,
.article-vertical-feed .article-latest {
  border-bottom: 1px solid var(--feed-surface-1);
  margin-bottom: 32px;
}


.feed-menu-tile-board-section {
  margin-top: 0;
  position: relative;
  box-sizing: border-box;
}

.feed-menu-content {
  margin-top: 0rem;
}

.feed-menu-items.active {
  display: block;
}

/* --------------------------------------------
   Bottom Partial (feed Cont.)
   Desktop: 3 columns
   <=1150px: Single column, image on left, text on right
--------------------------------------------- */

.feed-row {
  display: grid;
  box-sizing: border-box;
}

.feed-item {
  display: flex;
  background: var(--feed-surface-2);
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  text-decoration: none;
  color: var(--white-color-1);
}

.feed-content-top {
  display: flex;
  flex-direction: column;
}

.feed-grid-item .feed-content-top {
  gap: .5rem;
}

.feed-item-content {
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
}

.feed-item-title {
  font-size: var(--font-size-21px);
  /* 1150vw to 400vw */
  font-weight: var(--font-weight7);
  letter-spacing: -.5px;
  margin: 1rem 0 1.15rem 0;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--white-color-1);
  font-family: var(--identity-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-item-description {
  display: block;
  margin: 0;
  line-height: 1.4;
  font-size: var(--font-size-16px);
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--grey-color-4);
  font-family: var(--identity-font);
  font-weight: var(--font-weight4);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-item-date {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--grey-color-3);
}

/* Hover effect */
.feed-item:hover .feed-item-title {
  text-decoration: underline;
  text-decoration-color: var(--white-color-1);
  text-decoration-thickness: 1.25px;
  text-underline-offset: 1.25px;
}

/* ---USED FOR ROW CARD--*/

.feed-row {
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: var(--ft-20-15);
}

.feed-item {
  flex-direction: row;
  align-items: flex-start;
  align-items: stretch;
  /* ⟵  key: all children get same height  */
}

.feed-item-image {
  width: 40%;
  height: var(--font-size-250px);
  object-fit: cover;
  order: 1;
}

.feed-item-content {
  order: 2;
  width: 60%;
  height: auto;
}

.feed-row .item-tag {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive Adjustments */

@media (max-width: 1150px) {
  .feed-item {
    border-radius: 5px;
  }

  .feed-item-title {
    font-size: var(--ft-21-16);
    line-height: 1.4;
  }

  .feed-item-description {
    font-size: var(--font-size-15px);
  }

  .feed-row {
    grid-template-columns: 1fr;
  }

  .feed-item-image {
    width: 40%;
    height: var(--font-size-215px);
    object-fit: cover;
    order: 1;
  }

  .feed-item-content {
    order: 2;
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .feed-item-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .feed-item-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .feed-item-date {
    display: block;
  }
}

@media (max-width: 825px) {
  .feed-item-image {
    height: var(--font-size-175px);
  }

  .feed-item-title {
    margin: .45rem 0 .7rem 0;
  }

  .feed-item-content {
    padding: clamp(12px, 9.1765px + 0.7059vw, 15px) 15px;
  }

  .feed-row1-title,
  .feed-row2-title {
    line-height: 1.3;
  }

  .feed-item-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .25rem;
  }
}

@media (max-width: 600px) {
  .feed-item-image {
    height: clamp(var(--font-size-125px), 75px + 12.5vw, var(--font-size-150px));
  }

  .feed-row1-title,
  .feed-row2-title {
    font-size: var(--fm-17-15);
  }

  .feed-item-title {
    font-size: var(--fm-16-14);
    margin: .45rem 0 0rem 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .feed-item-description {
    display: none;
  }

  .feed-item-date {
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 380px) {
  .feed-item-image {
    height: var(--font-size-120px);
  }

  .feed-row1-date,
  .feed-row2-date,
  .feed-item-date {}
}

.feed-row1 {
  grid-template-columns: repeat(2, 1fr);
}

.feed-row2 {
  grid-template-columns: repeat(2, 1fr);
}

.feed-row1 .editors-choice-badge,
.feed-row2 .editors-choice-badge {
  font-size: var(--ft-20-15)
}

.feed-row .editors-choice-badge {
  font-size: var(--ft-17-14)
}

@media (max-width: 600px) {

  .feed-row1 .editors-choice-badge,
  .feed-row2 .editors-choice-badge {
    font-size: var(--fm-15-12)
  }

  .feed-row .editors-choice-badge {
    font-size: var(--fm-14-11)
  }
}

/* Positioning for feed-row1 and feed-row2 */
.feed-row1 .editors-choice-badge,
.feed-row2 .editors-choice-badge {
  display: flex;
  /* Ensure we keep flex in case we rely on it. */
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
}

/* Positioning for .feed-row */
.feed-row .editors-choice-badge {
  display: flex;
  position: absolute;
  top: 0.75rem;
  right: calc(60% + 0.75rem);
  z-index: 10;
}



/* ────────────────────────────────────────────────────────────────
   ──────────────────────────────────────────────────────────────── */


.load-more-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 18px;
}

.btn-load-more {
  padding: 1rem 6rem;
  background: var(--card-color, var(--site-start-color));
  border: none;
  text-transform: capitalize;
  font-family: var(--identity-font);
  color: var(--white-color-1);
  border-radius: 5px;
  font-weight: 700;
  font-size: var(--font-size-16px);
  cursor: pointer;
}

.btn-load-more:hover {
  border: 1px solid var(--card-color, var(--site-start-color));
  background-color: transparent;

}




/* ────────────────────────────────────────────────────────────────
   DROP-IN (scoped to article footer): only the used var (2)
   • Affects feeds rendered under .article-footer only.
   • Change the right-hand value if you want a different footer tone.
   ──────────────────────────────────────────────────────────────── */
.article-footer :where(.article-recommended, .feed-row, .feed-item) {
  --feed-surface-2: var(--section-darkest-background-color);
}

.article-footer :where(.article-similar, .feed-row, .feed-item) {
  --feed-surface-2: var(--section-darkest-background-color);
}