/**
 * @file
 * e72 theme — incremental overrides (i2).
 *
 * Approved / deployable incremental CSS only.
 * Pending work (e.g. Our Tutors) lives in custom_i2_our_tutors.css — do not
 * merge pending styles here until signed off for dev/prod.
 * Loaded after custom.css via e72.libraries.yml.
 */

/* ==========================================================================
   Homepage footer banners
   Match Latest News card columns:
   - desktop: 3 cols
   - ≤1024: 2 cols
   - ≤480: 1 col
   ========================================================================== */

#block-homepagefooterbanner {
  margin-top: 30px;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  box-sizing: border-box;
}

/*
 * Match .card-deck flex container size.
 * Below 1280px: news == banner width N, .card-deck grows to N+30 — expand content.
 * At 1280px: banner is already deck-width — keep width:100%.
 */
#block-homepagefooterbanner .content {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1279.98px) {
  #block-homepagefooterbanner .content {
    width: calc(100% + 30px);
  }
}

/* Desktop — #page-wrapper .view-news .card */
#block-homepagefooterbanner .content > div {
  flex: 0 0 calc(33.33% - 30px);
  width: calc(33.33% - 30px);
  max-width: calc(33.33% - 30px);
  min-width: 0;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 15px;
  box-sizing: border-box;
  text-align: center;
}

/* Tablet / mid — same as measured news cards (2 columns) */
@media all and (max-width: 1024px) {
  #block-homepagefooterbanner .content > div {
    flex: 0 0 calc(50% - 30px);
    width: calc(50% - 30px);
    max-width: calc(50% - 30px);
  }
}

/* Mobile — #page-wrapper .view-news .card @ max-width 480px */
@media (max-width: 480px) {
  #block-homepagefooterbanner .content {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  #block-homepagefooterbanner .content > div {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 15px;
  }
}

#block-homepagefooterbanner .paragraph--type--homepage-footer-banner {
  display: block;
  width: 100%;
  margin: 0;
  table-layout: auto;
}

#block-homepagefooterbanner .paragraph--type--homepage-footer-banner:before,
#block-homepagefooterbanner .paragraph--type--homepage-footer-banner:after {
  content: none;
  display: none;
}

#block-homepagefooterbanner .paragraph--type--homepage-footer-banner > .paragraph__column {
  float: none;
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  text-align: center;
}

#block-homepagefooterbanner .paragraph--type--homepage-footer-banner a {
  display: block;
  max-width: 100%;
}

#block-homepagefooterbanner .paragraph--type--homepage-footer-banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}