/*
 * CCS Landingpage Section Interaction v1.0.1
 * No structural/layout changes.
 * Full-section click works on all devices via JS.
 * Visual hover polish exists only for real desktop hover devices.
 */

.ccs-landing-interactive-section {
  cursor: pointer;
}

/* Existing interactive descendants keep their normal pointer semantics. */
.ccs-landing-interactive-section a,
.ccs-landing-interactive-section button,
.ccs-landing-interactive-section input,
.ccs-landing-interactive-section textarea,
.ccs-landing-interactive-section select,
.ccs-landing-interactive-section label,
.ccs-landing-interactive-section summary {
  cursor: pointer;
}

/* Desktop only: no hover simulation on touch/tablet/mobile. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .ccs-landing-interactive-section {
    position: relative;
    isolation: isolate;
    transition:
      filter 320ms cubic-bezier(.22,.61,.36,1),
      box-shadow 320ms cubic-bezier(.22,.61,.36,1),
      background-color 320ms cubic-bezier(.22,.61,.36,1);
  }

  /* Subtle edge lift without changing dimensions. */
  .ccs-landing-interactive-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    box-shadow:
      inset 0 1px 0 rgba(244,119,0,.28),
      inset 0 -1px 0 rgba(244,119,0,.20);
    transition: opacity 320ms cubic-bezier(.22,.61,.36,1);
  }

  /* Images: almost imperceptible premium zoom. */
  .ccs-landing-interactive-section .ccsref-split-image,
  .ccs-landing-interactive-section .ccsref-workshop-image,
  .ccs-landing-interactive-section .ccsref-megastar-image,
  .ccs-landing-interactive-section .ccsfm-split-image img,
  .ccs-landing-interactive-section .ccsfm-mega-image img {
    transition:
      transform 360ms cubic-bezier(.22,.61,.36,1),
      filter 360ms cubic-bezier(.22,.61,.36,1);
    transform-origin: center center;
    will-change: transform, filter;
  }

  /* Existing overlays are only gently adjusted. */
  .ccs-landing-interactive-section .ccsref-megastar-overlay,
  .ccs-landing-interactive-section .ccsfm-mega-image::after {
    transition: opacity 320ms ease;
  }

  /* CTA reaction reinforces that the whole section is actionable. */
  .ccs-landing-interactive-section .ccsref-text-cta,
  .ccs-landing-interactive-section .ccsref-image-cta,
  .ccs-landing-interactive-section .ccsfm-split-copy a,
  .ccs-landing-interactive-section .ccsfm-mega-copy a {
    transition:
      color 280ms ease,
      opacity 280ms ease;
  }

  .ccs-landing-interactive-section .ccsref-text-cta span,
  .ccs-landing-interactive-section .ccsref-image-cta span,
  .ccs-landing-interactive-section .ccsfm-split-copy a b,
  .ccs-landing-interactive-section .ccsfm-mega-copy a b {
    display: inline-block;
    transition: transform 300ms cubic-bezier(.22,.61,.36,1);
  }

  .ccs-landing-interactive-section:hover::before {
    opacity: 1;
  }

  .ccs-landing-interactive-section:hover .ccsref-split-image,
  .ccs-landing-interactive-section:hover .ccsref-workshop-image,
  .ccs-landing-interactive-section:hover .ccsref-megastar-image,
  .ccs-landing-interactive-section:hover .ccsfm-split-image img,
  .ccs-landing-interactive-section:hover .ccsfm-mega-image img {
    transform: scale(1.018);
    filter: brightness(1.055) contrast(1.035) saturate(1.025);
  }

  .ccs-landing-interactive-section:hover .ccsref-text-cta span,
  .ccs-landing-interactive-section:hover .ccsref-image-cta span,
  .ccs-landing-interactive-section:hover .ccsfm-split-copy a b,
  .ccs-landing-interactive-section:hover .ccsfm-mega-copy a b {
    transform: translateX(4px);
  }

  /* Slightly stronger CCS orange accent, without glow/neon. */
  .ccsref-split-auto.ccs-landing-interactive-section:hover .ccsref-eyebrow,
  .ccsref-split-workshop.ccs-landing-interactive-section:hover .ccsref-eyebrow,
  .ccsref-split-rental.ccs-landing-interactive-section:hover .ccsref-eyebrow,
  .ccsfm-split-auto.ccs-landing-interactive-section:hover .ccsfm-split-copy > span,
  .ccsfm-split-workshop.ccs-landing-interactive-section:hover .ccsfm-split-copy > span,
  .ccsfm-split-rental.ccs-landing-interactive-section:hover .ccsfm-split-copy > span {
    color: #ff941f;
  }

  /* MEGASTAR keeps its own red brand accent on the landingpage. */
  .ccsref-megastar.ccs-landing-interactive-section::before,
  .ccsfm-mega-home.ccs-landing-interactive-section::before {
    box-shadow:
      inset 0 1px 0 rgba(231,77,71,.28),
      inset 0 -1px 0 rgba(231,77,71,.20);
  }

  .ccsref-megastar.ccs-landing-interactive-section:hover .ccsref-megastar-overlay {
    opacity: .88;
  }

  .ccsref-megastar.ccs-landing-interactive-section:hover .ccsref-eyebrow,
  .ccsfm-mega-home.ccs-landing-interactive-section:hover .ccsfm-mega-copy > span {
    color: #f05a54;
  }
}

/* Never animate for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .ccs-landing-interactive-section,
  .ccs-landing-interactive-section *,
  .ccs-landing-interactive-section::before {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}