/*
 * newsroom-landing-page.css
 *
 * Breakpoint overview:
 *
 *  ≥1024px  DESKTOP
 *    - 2-column grid: 300px left | 1fr right
 *    - Left col spans all right-panel rows (grid-row: 1 / span 4)
 *    - Hero (2fr) + external-links (3fr) side by side in right panel
 *    - Left cards wrapper: margin-top 80px (visual alignment with hero)
 *    - Hero slot: margin-top -35px (visual flush alignment)
 *
 *  768px–1023px  TABLET
 *    - Single column, right panel ABOVE left cards (column-reverse)
 *    - Hero full-width, external-links full-width below hero (stacked)
 *    - Left cards: 2-per-row grid
 *
 *  ≤767px  MOBILE
 *    - Same as tablet but left cards 1-per-row
 *
 * Rules here use !important to defeat AEM's own section/block stylesheet.
 * Also targets AEM-generated selectors (.hero.block etc.) that this
 * template cannot annotate with Tailwind classes directly.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BASE — applied at all widths, overridden at breakpoints below
═══════════════════════════════════════════════════════════════════════════ */

/* Ensure col-slot children don't overflow their grid cell */
.newsroom-layout-row > .col-slot {
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Hero and external-links sub-grid slots: prevent AEM margin leak */
.newsroom-right-panel .newsroom-hero-details-grid > .col-hero-block,
.newsroom-right-panel .newsroom-hero-details-grid > .col-external-links-block {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Heading bottom margin */
.newsroom-right-heading {
  margin: 0 0 1rem 0 !important;
}

/* Related stories top margin */
.newsroom-right-panel .newsroom-related-stories-row {
  margin-top: 2rem !important;
  box-sizing: border-box !important;
}

/* Button wrapper top margins */
.newsroom-right-panel .newsroom-show-more-wrapper {
  margin-top: -85px !important;
}

.newsroom-right-panel .newsroom-more-related-wrapper {
  margin-top: 1rem !important;
}

/* Show-more button alignment: center on mobile/tablet, left on desktop */
.newsroom-show-more-wrapper {
  display: flex !important;
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AEM-GENERATED HERO BLOCK
   .hero.block is rendered by AEM — cannot add Tailwind classes to it.
═══════════════════════════════════════════════════════════════════════════ */
.newsroom-layout-row .hero.block {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.newsroom-layout-row .hero.block > div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.newsroom-layout-row .hero.block * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.newsroom-layout-row .hero.block img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

.newsroom-layout-row .hero.block > div > .right-section {
  order: -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON STATE OVERRIDES
   AEM injects :hover/:focus/:active rules at high specificity.
═══════════════════════════════════════════════════════════════════════════ */
.newsroom-right-panel .btn-show-more-news,
.newsroom-right-panel .btn-more-related-stories,
.newsroom-right-panel .btn-show-more-news:hover,
.newsroom-right-panel .btn-more-related-stories:hover,
.newsroom-right-panel .btn-show-more-news:focus,
.newsroom-right-panel .btn-more-related-stories:focus,
.newsroom-right-panel .btn-show-more-news:active,
.newsroom-right-panel .btn-more-related-stories:active {
  background-color: white !important;
  color: #0061aa !important;
  border-color: #0061aa !important;
  box-shadow: none !important;
  background-image: none !important;
  -webkit-text-fill-color: #0061aa !important;
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP  (≥1024px)
   2-column grid layout as per Figma:
     Left:  300px fixed, stacks card items vertically with top offset
     Right: heading + hero(2fr)|details(3fr) + show-more + related + more-btn
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* Enforce 2-col grid — Tailwind [grid-template-columns:300px_1fr] sets this
     but AEM section styles may reset display; !important guarantees it wins */
  .newsroom-layout-row {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 1.5rem !important;
    align-items: start !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  /* Left column: fixed 300px, spans the full height of all right-panel rows */
  .newsroom-layout-row > .col-slot.col-left-cards {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    grid-row: 1 / span 4 !important;
    overflow: hidden !important;
  }

  /* Right panel slot takes remaining 1fr */
  .newsroom-layout-row > .col-slot.col-right-panel {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Right panel: 5-row grid */
  .newsroom-right-panel {
    display: grid !important;
    grid-template-rows: auto auto auto 1fr auto !important;
    gap: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
  }

  /* Each section row is full-width */
  .newsroom-right-panel > .newsroom-section-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Hero/details sub-grid: 2fr hero | 3fr details */
  .newsroom-hero-details-grid {
    display: grid !important;
    grid-template-columns: 2fr 3fr !important;
    gap: 1rem !important;
    align-items: start !important;
    width: 100% !important;
  }

  /* Hero/details slots: desktop nudge — hero slightly above the grid baseline */
  .newsroom-hero-details-grid > .col-hero-block {
    margin-top: -35px !important;
  }

  .newsroom-hero-details-grid > .col-external-links-block {
    margin-top: -10px !important;
  }

  /* Show-more button: negative top margin to pull it up below news-details */
  .col-external-links-block .newsroom-show-more-wrapper {
    margin-top: -85px !important;
    justify-content: flex-start !important;
  }

  /* Left cards wrapper: offset downward so cards align below the heading */
  .newsroom-layout-row .cards-grid-wrapper {
    margin-top: 88px !important;
  }

  /* Reset any negative heading row margin on desktop */
  .newsroom-section-row.newsroom-row-1 {
    margin-bottom: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET + MOBILE  (≤1023px)
   Single-column layout. Right panel (news) sits ABOVE left cards
   because of column-reverse on the layout row.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Layout row: grid → column-reverse flex */
  .newsroom-layout-row {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 1rem !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Left cards: release fixed 300px, go full width */
  .newsroom-layout-row > .col-slot.col-left-cards {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    grid-row: auto !important;
  }

  /* Right panel slot: full width */
  .newsroom-layout-row > .col-slot.col-right-panel {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Right panel inner: grid → vertical flex */
  .newsroom-right-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  /* Each section row: full-width block */
  .newsroom-right-panel > .newsroom-section-row {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hero/details sub-grid: side-by-side → stacked single column */
  .newsroom-hero-details-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  /* Both slots: full width, reset desktop nudge margins */
  .newsroom-hero-details-grid > .col-hero-block,
  .newsroom-hero-details-grid > .col-external-links-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
  }

  /* Apply negative bottom margin to the heading row on tablet and mobile
     to visually tuck the heading closer to the hero as requested. */
  .newsroom-section-row.newsroom-row-1 {
    margin-bottom: -40px !important;
  }

  /* Hero block: full width */
  .newsroom-right-panel .hero.block {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Reserve hero height on mobile/tablet to avoid layout shifts
     and provide an aspect ratio fallback for the image. */
  .newsroom-hero-reserve,
  .newsroom-hero-reserve .hero.block {
    min-height: 180px !important;
    box-sizing: border-box !important;
  }
  .newsroom-hero-reserve .hero.block img {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    max-width: 100% !important;
  }

  /* Hero cards list: 2-column grid on tablet */
  .newsroom-right-panel .hero.block .cards-grid-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .newsroom-right-panel .hero.block .card-item {
    width: 100% !important;
  }

  /* Reset left cards wrapper desktop offset */
  .newsroom-layout-row .cards-grid-wrapper {
    margin-top: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET ONLY  (768px–1023px)
   Left cards column: 2-per-row flex grid with equal-height cards.
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .col-left-cards .cards-grid-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Each card block: 50% width minus half the gap */
  .col-left-cards .cards-grid-wrapper .cards-grid.block {
    flex: 0 0 calc(50% - 0.5rem) !important;
    max-width: calc(50% - 0.5rem) !important;
    width: calc(50% - 0.5rem) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Stretch inner list & container to fill the block height */
  .col-left-cards .cards-grid-wrapper .cards-grid.block .cards-grid-list {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .col-left-cards .cards-grid-wrapper .cards-grid.block .card-item,
  .col-left-cards .cards-grid-wrapper .cards-grid.block .cards-grid-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Single or last unpaired card: full width */
  .col-left-cards .cards-grid-wrapper .cards-grid.block:only-child,
  .col-left-cards .cards-grid-wrapper .cards-grid.block:last-child:nth-child(odd) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE ONLY  (≤767px)
   Left cards: 1-per-row. Hero cards: 1-per-row.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .col-left-cards .cards-grid-wrapper {
    display: block !important;
  }

  .col-left-cards .cards-grid-wrapper .cards-grid.block {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .newsroom-right-panel .hero.block .cards-grid-list {
    grid-template-columns: 1fr !important;
  }
}