/* ================================================================================
   SECTOR PAGES - SHARED CARD INTERACTIONS
   One hover finish for every card grid of the sector pages (shared and sector-specific):
   slight lift, violet hairline, accent glow and an icon tile that fills with the accent.
   Surfaces stay in each section stylesheet and in SectorTheme.css; this file only adds
   the interaction layer. "body.sector-page" keeps these rules above the theme overrides
   (".sector-page.sector-theme-dark .card") without !important.
================================================================================ */

.sector-page {
  --sector-card-border-hover: rgba(124, 58, 237, 0.38);
  --sector-card-glow: rgba(124, 58, 237, 0.28);
}

.sector-page.sector-theme-dark {
  --sector-card-border-hover: rgba(196, 181, 253, 0.48);
  --sector-card-glow: rgba(124, 58, 237, 0.5);
}

body.sector-page
  :is(
    .sector-challenge-card,
    .sector-format-card,
    .courtier-commercial-card,
    .courtier-skill-card,
    .courtier-audience-card,
    .btob-challenge-card,
    .btob-metric-card,
    .pme-method-card,
    .pme-audience-card,
    .pme-result-card,
    .saas-challenge-card,
    .saas-role-card,
    .saas-value-proof
  ) {
  /* Keep the scroll reveal (styles/scroll-animations.css) and add the hover properties:
     the hover lift uses `translate`, so it never fights the reveal's `transform` */
  transition:
    opacity var(--animation-duration, 800ms) var(--animation-easing-elegant)
      var(--animation-delay, 0ms),
    transform var(--animation-duration, 800ms) var(--animation-easing-overshoot)
      var(--animation-delay, 0ms),
    translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

body.sector-page
  :is(
    .sector-challenge-card,
    .sector-format-card,
    .courtier-commercial-card,
    .courtier-skill-card,
    .courtier-audience-card,
    .btob-challenge-card,
    .btob-metric-card,
    .pme-method-card,
    .pme-audience-card,
    .pme-result-card,
    .saas-challenge-card,
    .saas-role-card,
    .saas-value-proof
  ):hover {
  translate: 0 -3px;
  border-color: var(--sector-card-border-hover);
  box-shadow: 0 24px 46px -20px var(--sector-card-glow);
}

body.sector-page
  :is(
    .sector-challenge-card i,
    .sector-format-card i,
    .courtier-commercial-card__icon,
    .courtier-skill-card__icon,
    .courtier-audience-card__icon,
    .btob-challenge-card__icon,
    .btob-metric-card__icon,
    .pme-method-card__icon,
    .pme-audience-card__icon,
    .pme-result-card__icon,
    .saas-challenge-card .saas-seo-icon,
    .saas-role-card__icon
  ) {
  transition:
    transform 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

body.sector-page
  :is(
    .sector-challenge-card,
    .sector-format-card,
    .courtier-commercial-card,
    .courtier-skill-card,
    .courtier-audience-card,
    .btob-challenge-card,
    .btob-metric-card,
    .pme-method-card,
    .pme-audience-card,
    .pme-result-card,
    .saas-challenge-card,
    .saas-role-card
  ):hover
  :is(
    .sector-challenge-card i,
    .sector-format-card i,
    .courtier-commercial-card__icon,
    .courtier-skill-card__icon,
    .courtier-audience-card__icon,
    .btob-challenge-card__icon,
    .btob-metric-card__icon,
    .pme-method-card__icon,
    .pme-audience-card__icon,
    .pme-result-card__icon,
    .saas-seo-icon,
    .saas-role-card__icon
  ) {
  transform: rotate(-4deg) scale(1.05);
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #ffffff;
  box-shadow: 0 10px 22px -10px rgba(124, 58, 237, 0.8);
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  body.sector-page
    :is(
      .sector-challenge-card,
      .sector-format-card,
      .courtier-commercial-card,
      .courtier-skill-card,
      .courtier-audience-card,
      .btob-challenge-card,
      .btob-metric-card,
      .pme-method-card,
      .pme-audience-card,
      .pme-result-card,
      .saas-challenge-card,
      .saas-role-card,
      .saas-value-proof
    ):hover {
    translate: none;
  }

  body.sector-page
    :is(
      .sector-challenge-card,
      .sector-format-card,
      .courtier-commercial-card,
      .courtier-skill-card,
      .courtier-audience-card,
      .btob-challenge-card,
      .btob-metric-card,
      .pme-method-card,
      .pme-audience-card,
      .pme-result-card,
      .saas-challenge-card,
      .saas-role-card
    ):hover
    :is(
      .sector-challenge-card i,
      .sector-format-card i,
      .courtier-commercial-card__icon,
      .courtier-skill-card__icon,
      .courtier-audience-card__icon,
      .btob-challenge-card__icon,
      .btob-metric-card__icon,
      .pme-method-card__icon,
      .pme-audience-card__icon,
      .pme-result-card__icon,
      .saas-seo-icon,
      .saas-role-card__icon
    ) {
    transform: none;
  }
}