/* ======== Intro Banner ======== */
.introBanner .m-banner {
  max-width: 100% !important;
}

/* ======== Card Grid ======== */
.wideFeatured {
  width: 100%;
  overflow: hidden;
  padding: 0;
}

/* Card flip styles */
.card {
  perspective: 5000px;
  cursor: pointer;
}

/* Screen reader and keyboard navigation */
.card span.card-flip-focus {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  transform-style: preserve-3d;
  /* Safari fix */
  -webkit-transform-style: preserve-3d;
}

@media (min-width: 769px) {
  /* Card flip effect only for screens wider than 768px */
  .card:hover .card-inner,
  .card:has(.card-flip-focus:focus) .card-inner,
  .card:has(.c-call-to-action:focus) .card-inner {
    transform: rotateY(180deg);
  }

  /* Disable pointer events on the front when the card is flipped */
  .card:hover .card-front,
  .card:has(.card-flip-focus:focus) .card-front,
  .card:has(.c-call-to-action:focus) .card-front {
    pointer-events: none;
  }

  /* VFI */
  .card:has(.card-flip-focus:focus) .card-inner {
    border: 2px dashed #000;
    outline: 2px dashed #fff;
  }
}

/* On mobile only show card back */
@media (max-width: 768px) {
  .card-inner {
    transform: rotateY(180deg) !important;
  }

  .card-front {
    display: none !important;
  }

  .card-back {
    display: block !important;
  }

  .card-flip-focus {
    display: none !important;
  }
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 2;
  background: #111;
  /* Force stacking context for Safari */
  will-change: transform;
}

.card-back {
  transform: rotateY(180deg);
  z-index: 3;
}

/* Remove flip-specific styles for the static card */
.card-static .card-inner,
.card-static .card-front,
.card-static .card-back {
  all: unset;
}

.card-static .card-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.m-content-placement-item.f-size-large {
  width: 100%;
  aspect-ratio: 693 / 800;
  position: relative;
  margin: 0;
}

.m-content-placement-item.f-size-large img.c-image {
  width: 100%;
  object-fit: cover;
}

.m-content-placement-item .slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  z-index: 100;
  padding: 32px 27px 30px 30px;
  white-space: normal;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 32px, rgba(0, 0, 0, 0.75) 72px, rgba(0, 0, 0, 1) 100%);
}

.m-content-placement-item .slide-content h2 {
  font-weight: 700 !important;
}

@media screen and (max-width: 767px) {
  .m-content-placement-item .slide-content {
    padding: 32px 12px 12px 16px;
  }
}

.wideFeatured .card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 25px;
}

@media (max-width: 1084px) {
  .wideFeatured .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .wideFeatured .card-grid {
    grid-template-columns: 1fr;
  }
}

.wideFeatured .card {
  margin: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.m-content-placement-item.f-size-large.card.card-hero {
  grid-column: 1/-1;
  aspect-ratio: 693 / 800;
}

@media screen and (min-width: 768px) {
  .m-content-placement-item.f-size-large.card.card-hero {
    aspect-ratio: 1083 / 609;
  }

  .m-content-placement-item.f-size-large.card.card-hero .slide-content {
    width: 100%;
    height: fit-content;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
  }

  .m-content-placement-item.f-size-large.card.card-hero .slide-content .c-heading-3 {
    font-size: 46px;
    line-height: 56px;
  }
}

@media screen and (min-width: 1084px) {
  .m-content-placement-item.f-size-large.card.card-hero {
    aspect-ratio: 1920 / 720;
  }

  .m-content-placement-item.f-size-large.card.card-hero .slide-content .c-subheading-4 {
    font-size: 24px;
    line-height: 28px;
    padding: 4px 0 2.3632px;
  }
}

.m-content-placement-item.f-size-large.card.card-hero img {
  max-width: 100%;
}

/* ======== Jump In Banner ======== */
.jumpIn .m-banner .c-heading-1a.static-desktop-size {
  font-size: 86px !important;
  line-height: 82px !important;
}

/* ======== Icon Bar ======== */
.iconBar .custom-cp-icons img {
  max-width: 137px;
}

@media (max-width: 540px) {
  /* Override MWF mobile grid layout */
  .iconBar [data-grid="col-12 stack-3"]>div>div {
    width: 50% !important;
    float: left !important;
    box-sizing: border-box;
  }

  .iconBar .custom-cp-icons img {
    max-width: 103px;
  }
}