.sr-cards-filter-02 .container {
  position: relative;
}

.sr-cards-filter-02 .heading {
  text-transform: uppercase;
}

.sr-cards-filter-02-filter {
  margin-bottom: 1.25rem;
  gap: 1rem;
}

.sr-cards-filter-02-filter button {
  -webkit-appearance: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  box-shadow: none;
  padding: 0 1.5rem;
  font-weight: 700;
  font-family: 'Poppins',sans-serif;
  text-transform: uppercase;
}

.sr-cards-filter-02-filter button:focus {
  outline: none;
}

/* AODA 750831 + 751000 (2.4.7): visible keyboard focus indicator on the filter tabs. Dual-tone ring
   (white inner + blue outer) so it stays visible on BOTH dark sections (#404040, Latest Resources)
   and light/white sections (Partners). Transparent outline = Windows High-Contrast fallback. */
.sr-cards-filter-02-filter button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #1d70b8;
}

.sr-cards-filter-02-item img {
  height: 150px;
  margin-bottom: 0;
  max-width: 100%;
  width: 100%;
  object-fit: fill;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.sr-cards-filter-02-item img.hs-featured-image {
  object-fit: cover;
  object-position: top;
  
}

.sr-cards-filter-02-item .featured-image-wrapper .hs-featured-image-link {
  display: block;
  height: 100%;
}
.sr-cards-filter-02-item .featured-image-wrapper .play-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  position: absolute;
  left: calc(50% - 21px);
  top: calc(50% - 21px);
  pointer-events: none; /* AODA 750843: decorative badge — let clicks fall through to the thumbnail link */
}

.sr-cards-filter-02-item .featured-image-wrapper .play-button .vid-icon{
  max-height: inherit;
  max-width: inherit;
  width: auto;
  height: auto;
}

.sr-cards-filter-02-item a,
.sr-cards-filter-02-item h4 {
  color: #404040;
  margin: 0;
  font-weight: 600;
  font-family: 'Poppins',sans-serif;
  position: relative;
}

/* AODA 750840 (TR Focus / single tab stop): each card now has ONE focusable link
   (the heading; the redundant thumbnail link is aria-hidden + tabindex=-1 in markup).
   Draw a single focus ring around the WHOLE card on keyboard focus, instead of two
   separate rings. #D64000 (Imagen warm-pink) is 4.57:1 against the white card; the 3px
   thickness also satisfies the TR ">=2px thickness" rule against the dark section bg. */
.sr-cards-filter-02-item .item-card:has(.post-name a:focus-visible) {
  /* !important: beats a global :focus-visible rule that would otherwise reset the colour to
     the section's near-white currentColor (invisible on the white card) and the offset to 1px. */
  outline: 3px solid #D64000 !important;
  outline-offset: 3px !important;
}
/* the card carries the focus ring, so suppress the inner link's own outline (no double ring) */
.sr-cards-filter-02-item .card-content p.post-name a:focus-visible {
  outline: none;
}

.sr-cards-filter-02-item .item-card {
  padding: 0rem;
  background: #fff;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  border-radius: 5px;
}

.sr-cards-filter-02-items.hideitems.row {
  justify-content: center;
}

.sr-cards-filter-02-item .card-content {
  padding: 20px 27px;
  text-align: left;
}

.sr-cards-filter-02-item .card-content p.post-name {
  margin-bottom: 0px;
}

.sr-cards-filter-02-item .item-card .featured-image-wrapper {
  display: block;
  position: relative;
}

/*
.sr-cards-filter-02 a.playBtn {
align-items: center;
border: 1px solid #fff; 
border-radius: 50%;
display: flex;
height: 42px;
justify-content: center;
left: 50%;
position: absolute;
  /* 2026-10-15: these were 20%/20%/15% (and 19% in Featured Resources), which put the badge
     a fifth of the way down rather than centred. The badge is translate(-50%,-50%) and its
     containing block is .hs-featured-image-link, measured to be exactly the image box, so 50%
     is dead centre. Imagen Stories Module already used 50%. */
top: 50%;
transform: translate(-50%, -50%);
transition: .3s ease-in-out;
width: 42px;
z-index: 11;
cursor: pointer;
}
*/
/*
.sr-cards-filter-02 .play-button i.play-icon {
fill: #fff;
}
*/

.card-content p.blog-name {
  margin: 0;
  color: #D64000;
  font-size: 12px;
  line-height: 24px;
  font-weight: 700;
  font-family: Poppins,sans-serif;
}

.sr-cards-filter-02-item a:hover .item-card {
  background-color: #fff;
  box-shadow: 15px 25px 60px 0px rgba(0, 0, 0, 0.1);
}

.sr-cards-filter-02 .bg-primary:hover {
  background-color: #C13C02 !important;
}
@media(max-width:991px) {
  .sr-cards-filter-02-item.col-6 {
    max-width: 50% !important;
    margin-bottom: 30px;
    min-height:inherit !important;
  }
}
@media (min-width: 768px) {
  .sr-cards-filter-02-items .col-md-3 {
    min-height: 100%;
    display: flex;
  }
}
@media(max-width:575px) {
  .sr-cards-filter-02-item.col-6 {
    max-width: 100% !important;
  }
  .sr-cards-filter-02-item img {
    height: 180px;
  }
}
@media(max-width:530px) {
  .sr-cards-filter-02-item .card-content {
    height: 160px;
    padding: 14px 15px;
    text-align: left;
  }
}

@media(max-width:480px) {
  .sr-cards-filter-02-item .card-content p.post-name {
    font-size: 14px;
    line-height: 20px;
  }

  .sr-cards-filter-02-filter {
    gap: 0rem;
  }

  .sr-cards-filter-02-filter button {
    padding: 0 0.8rem;
  }
}
button.col-auto.active.text-primary {
    background-color: #D64000;
}