/* case-study-teasers
   Four image cards linking to the case-study pages. The legacy row is a
   Woodmart banners-carousel of promo-banner elements; the carousel itself is
   not reproduced (all four fit on one row at desktop, and it autoplayed), but
   the card treatment is: image filling the card, a dark mask over it, and the
   content sitting bottom-left in white.

   Values read from prod: .banner-mask .wrapper-content-banner is
   rgba(0,0,0,.3), going to rgba(0,0,0,.6) on hover
   (el-banner-style-mask-and-shadow.css), the row carries
   --wd-col-lg:4 / --wd-col-md:4 / --wd-col-sm:1 with --wd-gap-lg:0px (the
   breakpoint at which four across begins is raised, see below), the
   images are served at 497x350, and each card is banner-hover-zoom-reverse
   (the image scales back to 1 on hover from a zoomed rest state). */

/* Full bleed: the source row carries data-vc-stretch-content="true", and the
   section otherwise renders inside article.prose inside a max-width
   container. */
.sf-cta-banner--case-study-teasers {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  /* No vertical space of its own -- the page owns spacing around banners. */
  margin-bottom: 0;
  padding: 0;
}

/* Four across with no gap, matching the carousel's own column settings.
   Restated rather than inherited: the .prose rules do not apply on the home
   slot, and a banner must lay out the same wherever it is placed. */
.sf-cta-banner--case-study-teasers .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
}

.sf-cta-banner--case-study-teasers .sf-cta-card {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
  aspect-ratio: 497 / 350;
  overflow: hidden;
  isolation: isolate;
}

/* 2x2 from 768 up. The source switches to four across at 992, but these
   titles are long enough to overflow their cards at that width -- four across
   only works once there is about 1200px to share. */
@media (min-width: 768px) {
  .sf-cta-banner--case-study-teasers .sf-cta-card { flex: 1 1 50%; }
}

@media (min-width: 1200px) {
  .sf-cta-banner--case-study-teasers .wp-block-columns { flex-wrap: nowrap; }
  .sf-cta-banner--case-study-teasers .sf-cta-card { flex: 1 1 25%; }
}

/* The image is the card's background. It is a real image block rather than a
   CSS background so it goes through the sync's mirroring like any other. */
.sf-cta-banner--case-study-teasers .sf-cta-card__img {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.sf-cta-banner--case-study-teasers .sf-cta-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1.06);
  transition: transform .5s cubic-bezier(0, 0, .44, 1.18);
}

.sf-cta-banner--case-study-teasers .sf-cta-card:hover .sf-cta-card__img img {
  transform: scale(1);
}

/* The mask and the content are the same layer, exactly as Woodmart has it:
   the content wrapper fills the card and carries the tint. */
.sf-cta-banner--case-study-teasers .sf-cta-card__body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  padding: 30px;
  background-color: rgba(0, 0, 0, .3);
  transition: background-color .5s cubic-bezier(0, 0, .44, 1.18);
  color: #fff;
}

.sf-cta-banner--case-study-teasers .sf-cta-card:hover .sf-cta-card__body {
  background-color: rgba(0, 0, 0, .6);
}

.sf-cta-banner--case-study-teasers .sf-cta-card__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  order: -1;
}

.sf-cta-banner--case-study-teasers .wp-block-heading {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  color: #fff;
}

.sf-cta-banner--case-study-teasers .sf-cta-card__body p:last-child {
  margin: 10px 0 0;
}

/* The button is the site's own, and its hit area is stretched over the whole
   card so the card reads as one target -- the legacy markup achieved that
   with a separate absolutely positioned anchor, which would be an empty link
   here. */
.sf-cta-banner--case-study-teasers a.btn {
  text-decoration: none;
}

.sf-cta-banner--case-study-teasers a.btn::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media (max-width: 767px) {
  .sf-cta-banner--case-study-teasers .sf-cta-card__body { padding: 20px; }
  .sf-cta-banner--case-study-teasers .wp-block-heading { font-size: 18px; }
}