/**
 * Portail culture — hero immersif (image de fond à droite, texte à gauche).
 * Image : attachment médiathèque « fond culture » (ID 6362), zone gauche dégagée.
 */

.cdl-cultural-portal-hero--immersive {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0 0 2.5rem;
  padding: 0;
  min-height: clamp(14rem, 34vw, 20.5rem);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--cdl-cultural-accent, #6b4c9a) 22%, transparent);
  background: linear-gradient(
    128deg,
    color-mix(in srgb, var(--cdl-cultural-accent, #6b4c9a) 10%, #fff) 0%,
    #faf8fc 42%,
    #fff 100%
  );
  box-shadow: 0 10px 36px color-mix(in srgb, var(--cdl-cultural-accent, #6b4c9a) 12%, transparent);
}

.cdl-cultural-portal-hero--immersive:not(.cdl-cultural-portal-hero--has-cover) {
  padding: 2rem 1.5rem 2.25rem;
}

.cdl-cultural-portal-hero__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--cdl-portal-hero-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 92% center;
}

.cdl-cultural-portal-hero--has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    102deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(250, 246, 255, 0.92) 38%,
    color-mix(in srgb, var(--cdl-cultural-accent, #6b4c9a) 8%, rgba(255, 255, 255, 0.55)) 58%,
    rgba(255, 255, 255, 0.12) 100%
  );
}

.cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__inner {
  position: relative;
  z-index: 2;
  max-width: min(44rem, 58%);
  padding: clamp(1.65rem, 3.5vw, 2.35rem) clamp(1.25rem, 3vw, 2rem);
}

.cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__title {
  text-wrap: balance;
}

.cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__subtitle {
  max-width: 38rem;
}

/* Pas d’animation d’entrée sur le hero (évite CLS / shift vertical). */
.cdl-cultural-archive[data-cultural-portal-v3="1"] .cdl-cultural-portal-hero--immersive {
  animation: none;
  transform: none;
}

@media (max-width: 900px) {
  .cdl-cultural-portal-hero--immersive {
    min-height: clamp(13rem, 42vw, 17.5rem);
  }

  .cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__inner {
    max-width: 100%;
  }

  .cdl-cultural-portal-hero__cover {
    background-position: 88% 42%;
    opacity: 0.92;
  }

  .cdl-cultural-portal-hero--has-cover::after {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(250, 246, 255, 0.9) 55%,
      rgba(255, 255, 255, 0.35) 100%
    );
  }
}

@media (max-width: 640px) {
  .cdl-cultural-portal-hero--immersive {
    min-height: 13.5rem;
    margin-bottom: 2rem;
  }

  .cdl-cultural-portal-hero--immersive:not(.cdl-cultural-portal-hero--has-cover) {
    padding: 1.35rem 1rem 1.5rem;
  }

  .cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__inner {
    padding: 1.35rem 1rem 1.5rem;
  }

  .cdl-cultural-portal-hero__cover {
    background-position: 90% 38%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__cta {
    transition: opacity 0.15s ease;
  }

  .cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__cta:hover,
  .cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__cta:focus-visible {
    transform: none;
  }
}