/**
 * Splide banner listings (lay/banner/splide_*.php).
 * Splide core CSS loads globally; this file adds brand tokens + layout polish.
 */

.c-listing.m-banner-splide {
  --listing-nav-arrow-opacity: 0.72;
  --listing-nav-arrow-opacity-hover: 1;
  --banner-splide-radius: var(--radius-base, 0.75rem);
  --banner-splide-accent: var(--color-accent, #2563eb);
  --banner-splide-surface: var(--color-surface, #ffffff);
  margin-block: var(--space-unit, 1rem);
}

.c-listing.m-banner-splide .splide__track {
  border-radius: var(--banner-splide-radius);
  overflow: hidden;
}

.c-listing.m-banner-splide .m-banner-splide__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--banner-splide-radius);
  background: var(--banner-splide-surface);
  text-decoration: none;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-text, #111) 12%, transparent);
  transition: transform 320ms ease, box-shadow 320ms ease;
}

.c-listing.m-banner-splide .m-banner-splide__link:hover,
.c-listing.m-banner-splide .m-banner-splide__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--banner-splide-accent) 22%, transparent);
}

.c-listing.m-banner-splide .m-banner-splide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Template `.prose img { height:auto }` must not collapse Splide slide images */
.m-template-casino-blue .prose .c-listing.m-banner-splide .m-banner-splide__img,
.c-listing.m-banner-splide .m-banner-splide__img {
  max-width: none;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

.c-listing.m-banner-splide .m-banner-splide__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: calc(var(--space-unit, 1rem) * 0.85);
  font-size: clamp(0.875rem, 2vw, 1.05rem);
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.68), transparent 72%);
}

/* --- standard --- */
.c-listing.m-banner-splide--standard .splide__slide {
  aspect-ratio: 21 / 9;
}

/* --- multi-card --- */
.c-listing.m-banner-splide--multi-card .splide__slide .m-banner-splide__link {
  aspect-ratio: 4 / 3;
}

.c-listing.m-banner-splide--multi-card .splide__slide {
  opacity: 0.88;
  transition: opacity 320ms ease;
}

.c-listing.m-banner-splide--multi-card .splide__slide.is-active {
  opacity: 1;
}

/* --- marquee (logo strip) --- */
.c-listing.m-banner-splide--marquee {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.c-listing.m-banner-splide--marquee .splide__slide {
  width: clamp(140px, 18vw, 220px);
}

.c-listing.m-banner-splide--marquee .m-banner-splide__link {
  aspect-ratio: 16 / 9;
  padding: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--banner-splide-surface) 92%, var(--banner-splide-accent) 8%);
  box-shadow: none;
}

.c-listing.m-banner-splide--marquee .m-banner-splide__img {
  object-fit: contain;
  max-height: 72px;
}

.c-listing.m-banner-splide--marquee .m-banner-splide__caption {
  display: none;
}

/* --- fade --- */
.c-listing.m-banner-splide--fade .splide__slide .m-banner-splide__link {
  aspect-ratio: 21 / 9;
}

/* --- testimonials --- */
.c-listing.m-banner-splide--testimonials .m-banner-splide__quote-card--hero {
  padding: 0;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

.c-listing.m-banner-splide--testimonials .m-banner-splide__quote-hero {
  display: block;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.c-listing.m-banner-splide--testimonials .m-banner-splide__quote-card--hero .m-banner-splide__quote-author {
  padding: calc(var(--space-unit, 1rem) * 0.85) clamp(1rem, 3vw, 1.5rem);
}

.c-listing.m-banner-splide--testimonials .m-banner-splide__quote-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: clamp(220px, 32vh, 320px);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--banner-splide-radius);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--banner-splide-surface) 94%, var(--banner-splide-accent) 6%),
    var(--banner-splide-surface)
  );
  border: 1px solid color-mix(in srgb, var(--banner-splide-accent) 18%, transparent);
  box-shadow: 0 10px 36px color-mix(in srgb, var(--color-text, #111) 8%, transparent);
  text-decoration: none;
  color: inherit;
}

.c-listing.m-banner-splide--testimonials .m-banner-splide__quote-mark {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--banner-splide-accent);
  opacity: 0.75;
}

.c-listing.m-banner-splide--testimonials .m-banner-splide__quote-text {
  flex: 1;
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--color-text, #111827);
}

.c-listing.m-banner-splide--testimonials .m-banner-splide__quote-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.c-listing.m-banner-splide--testimonials .m-banner-splide__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--banner-splide-accent) 35%, transparent);
}

.c-listing.m-banner-splide--testimonials .m-banner-splide__author-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.c-listing.m-banner-splide--testimonials .m-banner-splide__author-role {
  font-size: 0.82rem;
  opacity: 0.72;
}

/* --- bento 1+4: 4×2 unit squares; hero = 2×2 units, sides = 1×1 --- */
.c-listing.m-banner-splide--grid-1-4 .splide__slide {
  height: auto;
}

.c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14 {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "hero hero s1 s2"
    "hero hero s3 s4";
  aspect-ratio: 2 / 1;
  gap: clamp(0.45rem, 1vw, 0.75rem);
}

.c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14-link {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: var(--banner-splide-radius, 0.75rem);
  background: var(--banner-splide-surface, #fff);
  text-decoration: none;
}

.c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14-link .m-banner-splide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14-link--hero { grid-area: hero; }
.c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14-link--s1 { grid-area: s1; }
.c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14-link--s2 { grid-area: s2; }
.c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14-link--s3 { grid-area: s3; }
.c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14-link--s4 { grid-area: s4; }

.c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14-empty {
  display: none;
}

.c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14--solo {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "hero";
  aspect-ratio: 1 / 1;
  max-width: min(100%, 28rem);
  margin-inline: auto;
}

.c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14-link .m-banner-splide__caption {
  font-size: clamp(0.72rem, 1.4vw, 0.88rem);
  padding: calc(var(--space-unit, 1rem) * 0.5);
}

/* --- bento 1+N: left landscape hero + right stacked landscape bars --- */
.c-listing.m-banner-splide--grid-1-3 .splide__slide {
  height: auto;
}

.c-listing.m-banner-splide--grid-1-3 {
  --bento-13-side-slots: 5;
  --bento-13-side-scale: 0.28;
  --bento-13-side-ref-width: clamp(5rem, 16vw, 9.5rem);
  --bento-13-side-aspect: 4 / 1;
  --bento-13-hero-aspect: 4 / 1;
}

/* Right N thumbs set row height; hero stretches to match their stack. */
.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13 {
  display: grid;
  width: 100%;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: repeat(var(--bento-13-side-slots, 5), auto);
  grid-template-areas:
    "hero s1"
    "hero s2"
    "hero s3"
    "hero s4"
    "hero s5";
  gap: clamp(0.45rem, 1vw, 0.75rem);
}

.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--banner-splide-radius, 0.75rem);
  background: var(--banner-splide-surface, #fff);
  text-decoration: none;
}

.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link .m-banner-splide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--hero {
  grid-area: hero;
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: var(--bento-13-hero-aspect);
  min-height: 0;
  align-self: stretch;
  justify-self: start;
}

.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s1 { grid-area: s1; }
.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s2 { grid-area: s2; }
.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s3 { grid-area: s3; }
.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s4 { grid-area: s4; }
.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s5 { grid-area: s5; }

.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s1,
.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s2,
.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s3,
.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s4,
.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s5 {
  width: calc(var(--bento-13-side-ref-width) * var(--bento-13-side-scale));
  aspect-ratio: var(--bento-13-side-aspect);
  height: auto;
  justify-self: start;
  align-self: start;
}

.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-empty {
  display: none;
}

.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13--solo {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "hero";
  max-width: min(100%, 36rem);
  margin-inline: auto;
}

.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13--solo .m-banner-splide__bento-13-link--hero {
  width: 100%;
  height: auto;
  aspect-ratio: var(--bento-13-hero-aspect);
}

.c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link .m-banner-splide__caption {
  font-size: clamp(0.7rem, 1.3vw, 0.85rem);
  padding: calc(var(--space-unit, 1rem) * 0.45);
}

@media (max-width: 640px) {
  .c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "hero"
      "s1"
      "s2"
      "s3"
      "s4"
      "s5";
    aspect-ratio: auto;
  }

  .c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--hero {
    width: 100%;
    height: auto;
    aspect-ratio: var(--bento-13-hero-aspect);
  }

  .c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s1,
  .c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s2,
  .c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s3,
  .c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s4,
  .c-listing.m-banner-splide--grid-1-3 .m-banner-splide__bento-13-link--s5 {
    width: calc(var(--bento-13-side-ref-width) * var(--bento-13-side-scale));
    aspect-ratio: var(--bento-13-side-aspect);
    height: auto;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "hero hero"
      "s1 s2"
      "s3 s4";
    aspect-ratio: auto;
  }

  .c-listing.m-banner-splide--grid-1-4 .m-banner-splide__bento-14-link {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* Splide chrome — brand tokens */
.c-listing.m-banner-splide .splide__arrow {
  background: color-mix(in srgb, var(--banner-splide-surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--banner-splide-accent) 25%, transparent);
  opacity: var(--listing-nav-arrow-opacity, 1);
  transition: opacity 220ms ease, background-color 220ms ease;
}

.c-listing.m-banner-splide:hover .splide__arrow,
.c-listing.m-banner-splide .splide__arrow:focus-visible {
  opacity: var(--listing-nav-arrow-opacity-hover, 1);
}

.c-listing.m-banner-splide .splide__arrow svg {
  fill: var(--color-text, #111827);
}

.c-listing.m-banner-splide .splide__pagination__page {
  background: color-mix(in srgb, var(--color-text, #111) 28%, transparent);
}

.c-listing.m-banner-splide .splide__pagination__page.is-active {
  background: var(--banner-splide-accent);
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .c-listing.m-banner-splide .m-banner-splide__link,
  .c-listing.m-banner-splide--multi-card .splide__slide {
    transition: none;
  }

  .c-listing.m-banner-splide .m-banner-splide__link:hover,
  .c-listing.m-banner-splide .m-banner-splide__link:focus-visible {
    transform: none;
  }
}