/* ==========================================================================
   Split Showcase 3 — three vertical banners
   Overrides the base .qodef-split-showcase rules (which assume 2 x 50%).
   Only targets the .qodef-split-showcase--3 variant, so the original
   2-banner widget is untouched.
   ========================================================================== */

.qodef-split-showcase.qodef-split-showcase--3 .qodef-info-left,
.qodef-split-showcase.qodef-split-showcase--3 .qodef-info-center,
.qodef-split-showcase.qodef-split-showcase--3 .qodef-info-right {
  width: 33.3333%;
  position: relative;
}

/* Center column needs its own positioning/hover rules,
   the original CSS only defines left + right. */
.qodef-split-showcase.qodef-split-showcase--3 .qodef-info-center .qodef-m-label {
  left: 50%;
  /* keep the same vertical-text rotation as the base label, but center it */
  transform: rotate(-90deg) translateX(50%);
  transform-origin: center;
}

.qodef-split-showcase.qodef-split-showcase--3 .qodef-info-center:hover .qodef-m-label {
  background-size: 100% var(--qodef-underline-height);
  background-position: 0% var(--qodef-underline-position-y);
}

.qodef-split-showcase.qodef-split-showcase--3 .qodef-info-center:hover .qodef-e-media-image img {
  filter: grayscale(1);
}

.qodef-split-showcase.qodef-split-showcase--3 .qodef-info-center:hover .qodef-e-media-image:after {
  opacity: 1;
}

/* Central logo stays centered across the whole 3-column row (unchanged). */

/* ---- Responsive: stack to a single column on small screens ---- */
@media only screen and (max-width: 768px) {
  .qodef-split-showcase.qodef-split-showcase--3 {
    flex-direction: column;
    height: auto;
  }
  .qodef-split-showcase.qodef-split-showcase--3 .qodef-info-left,
  .qodef-split-showcase.qodef-split-showcase--3 .qodef-info-center,
  .qodef-split-showcase.qodef-split-showcase--3 .qodef-info-right {
    width: 100%;
    height: 60vh;
  }
  /* Un-rotate labels so they read normally when stacked. */
  .qodef-split-showcase.qodef-split-showcase--3 .qodef-m-label {
    position: absolute;
    top: 50%;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}