/* Home hero: compact, editorial mobile layout inspired by the supplied reference. */

/* Calque « image nette » du héros : masqué par défaut (bureau paysage,
   plein cadre cover) ; activé sur mobile et pour les visuels verticaux. */
#trending-hero .hero-slide-focus {
  display: none;
}

@media (min-width: 721px) {
  body:has(.cinema-nav) #trending-hero {
    height: clamp(640px, 82svh, 860px);
    min-height: 640px;
    max-height: 860px;
    overflow: clip;
    background: #050505;
  }

  body:has(.cinema-nav) #trending-hero .hero-slide {
    align-items: flex-end;
    padding: 0 0 clamp(100px, 12vh, 132px);
  }

  body:has(.cinema-nav) #trending-hero .hero-slide-bg {
    inset: 0;
    background-position: 50% 50%;
    background-size: cover;
    filter: saturate(.9) brightness(.86);
    transform: scale(1.02);
  }

  /* Visuel vertical (affiche) : jamais recadré en gros plan. L'affiche
     entière est présentée AU CENTRE du héros, sur fond flouti assombri. */
  body:has(.cinema-nav) #trending-hero .hero-slide-bg--portrait {
    inset: -52px;
    background-position: 50% 50%;
    filter: saturate(.9) brightness(.58) blur(16px);
    transform: none;
  }

  body:has(.cinema-nav) #trending-hero .hero-slide-bg--portrait ~ .hero-slide-focus {
    display: block;
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: auto 88%;
    background-repeat: no-repeat;
  }

  body:has(.cinema-nav) #trending-hero .hero-slide-bg--portrait ~ .hero-slide-focus::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .78) 28%, rgba(5, 5, 5, .4) 53%, rgba(5, 5, 5, .08) 82%, rgba(5, 5, 5, .16) 100%),
      linear-gradient(180deg, rgba(5, 5, 5, .28) 0%, transparent 28%, rgba(5, 5, 5, .18) 62%, rgba(5, 5, 5, .82) 91%, #050505 100%);
  }

  body:has(.cinema-nav) #trending-hero .hero-slide-bg::after {
    background:
      linear-gradient(90deg, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .78) 28%, rgba(5, 5, 5, .4) 53%, rgba(5, 5, 5, .08) 82%, rgba(5, 5, 5, .16) 100%),
      linear-gradient(180deg, rgba(5, 5, 5, .28) 0%, transparent 28%, rgba(5, 5, 5, .18) 62%, rgba(5, 5, 5, .82) 91%, #050505 100%);
  }

  body:has(.cinema-nav) #trending-hero .hero-slide-content {
    display: flex;
    width: min(1520px, 100%);
    max-width: 1520px;
    flex-direction: column;
    align-items: flex-start;
    margin-inline: auto;
    padding: 0 clamp(38px, 7vw, 112px);
    text-align: left;
  }

  body:has(.cinema-nav) #trending-hero .hero-eyebrow {
    display: none;
  }

  body:has(.cinema-nav) #trending-hero .hero-meta {
    order: 1;
    justify-content: flex-start;
    gap: 7px;
    margin: 0 0 14px;
    font-size: 11px;
  }

  body:has(.cinema-nav) #trending-hero .hero-meta > span,
  body:has(.cinema-nav) #trending-hero .hero-meta .tag {
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 9px;
    background: rgba(15, 16, 19, .62);
    color: rgba(255, 255, 255, .94);
    white-space: nowrap;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  body:has(.cinema-nav) #trending-hero .hero-meta .hero-rating {
    border-color: rgba(255, 202, 86, .42);
    color: #ffd46e;
  }

  body:has(.cinema-nav) #trending-hero .hero-title {
    order: 2;
    align-self: flex-start;
    max-width: min(850px, 62vw);
    margin: 0 0 12px;
    font-size: clamp(58px, 6.1vw, 90px);
    line-height: .98;
    letter-spacing: -.065em;
    text-align: left;
    text-wrap: balance;
  }

  body:has(.cinema-nav) #trending-hero .hero-desc {
    order: 3;
    align-self: flex-start;
    max-width: min(590px, 47vw);
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.65;
    text-align: left;
    -webkit-line-clamp: 3;
  }

  body:has(.cinema-nav) #trending-hero .hero-actions {
    order: 4;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  body:has(.cinema-nav) #trending-hero .hero-actions .btn-primary {
    min-width: 220px;
    min-height: 50px;
    padding: 0 22px;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 12px;
    background: #fff;
    color: #101114;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .26);
    font-size: 14px;
  }

  body:has(.cinema-nav) #trending-hero .hero-actions .btn-primary:hover,
  body:has(.cinema-nav) #trending-hero .hero-actions .btn-primary:active {
    background: #f0f0f0;
    border-color: #f0f0f0;
    color: #101114;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .3);
    transform: translateY(0);
  }

  body:has(.cinema-nav) #trending-hero .hero-actions .hero-watchlist {
    min-width: 132px;
    min-height: 50px;
    padding: 0 17px;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 12px;
    background: rgba(15, 16, 19, .6);
    color: #fff;
    font-size: 13px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  body:has(.cinema-nav) #trending-hero .hero-actions .hero-watchlist[aria-pressed="true"] {
    border-color: rgba(255, 91, 102, .7);
    background: rgba(229, 9, 20, .2);
    color: #ffb8bd;
  }

  body:has(.cinema-nav) #trending-hero .hero-actions .btn-outline {
    display: none;
  }

  body:has(.cinema-nav) #trending-hero .hero-dots {
    right: clamp(32px, 5vw, 76px);
    bottom: 28px;
  }
}

@media (max-width: 720px) {
  body:has(.cinema-nav) #trending-hero {
    height: min(76svh, 700px);
    min-height: 540px;
    max-height: 700px;
    margin-top: -70px;
    padding-top: 70px;
    overflow: clip;
    background: #050505;
  }

  body:has(.cinema-nav) #trending-hero .hero-slide {
    align-items: flex-end;
    padding: 0 0 62px;
  }

  /* Format SkyStream : plein cadre centré, sans bandeau — le texte vit
     dans le dégradé sombre du bas. */
  body:has(.cinema-nav) #trending-hero .hero-slide-bg {
    inset: 0;
    background-position: 50%;
    background-size: cover;
    filter: none;
    transform: none;
  }

  body:has(.cinema-nav) #trending-hero .hero-slide-focus {
    display: none;
  }

  /* Ombre SkyStream : presque opaque en bas (texte), claire en haut. */
  body:has(.cinema-nav) #trending-hero .hero-slide-bg::after {
    background:
      linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, .94) 20%, rgba(5, 5, 5, .5) 48%, rgba(5, 5, 5, .08) 74%),
      linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 24%);
  }

  body:has(.cinema-nav) #trending-hero .hero-slide-content {
    display: flex;
    width: 100%;
    max-width: 560px;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px 2px;
    text-align: left;
  }

  body:has(.cinema-nav) #trending-hero .hero-eyebrow {
    display: none;
  }

  body:has(.cinema-nav) #trending-hero .hero-meta {
    order: 1;
    justify-content: flex-start;
    gap: 5px;
    margin: 0 0 9px;
    font-size: 9px;
  }

  body:has(.cinema-nav) #trending-hero .hero-meta > span,
  body:has(.cinema-nav) #trending-hero .hero-meta .tag {
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    background: rgba(15, 16, 19, .7);
    color: #f5f5f7;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  body:has(.cinema-nav) #trending-hero .hero-meta > span:nth-of-type(n+5):not(.hero-rating) {
    display: none;
  }

  body:has(.cinema-nav) #trending-hero .hero-meta .hero-rating {
    border-color: rgba(255, 202, 86, .4);
    color: #ffd46e;
  }

  body:has(.cinema-nav) #trending-hero .hero-title {
    order: 2;
    align-self: flex-start;
    max-width: 100%;
    margin: 0 0 8px;
    font-size: clamp(32px, 9.2vw, 43px);
    line-height: 1;
    letter-spacing: -.055em;
    text-align: left;
    text-wrap: balance;
  }

  body:has(.cinema-nav) #trending-hero .hero-desc {
    order: 3;
    align-self: flex-start;
    max-width: 440px;
    margin: 0 0 13px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    line-height: 1.55;
    text-align: left;
    -webkit-line-clamp: 2;
  }

  body:has(.cinema-nav) #trending-hero .hero-actions {
    order: 4;
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 9px;
  }

  body:has(.cinema-nav) #trending-hero .hero-actions .btn-primary {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0 16px;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 12px;
    background: #fff;
    color: #101114;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .24);
    font-size: 13px;
  }

  body:has(.cinema-nav) #trending-hero .hero-actions .btn-primary:hover,
  body:has(.cinema-nav) #trending-hero .hero-actions .btn-primary:active {
    background: #f0f0f0;
    border-color: #f0f0f0;
    color: #101114;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .28);
    transform: translateY(0);
  }

  body:has(.cinema-nav) #trending-hero .hero-actions .hero-watchlist {
    display: inline-flex;
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 12px;
    background: rgba(15, 16, 19, .7);
    color: #fff;
    font-size: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  body:has(.cinema-nav) #trending-hero .hero-actions .hero-watchlist::before {
    width: 18px;
    height: 18px;
  }

  body:has(.cinema-nav) #trending-hero .hero-actions .hero-watchlist[aria-pressed="true"] {
    border-color: rgba(255, 91, 102, .75);
    background: rgba(229, 9, 20, .2);
    color: #ffb8bd;
  }

  body:has(.cinema-nav) #trending-hero .hero-actions .btn-outline {
    display: none;
  }

  body:has(.cinema-nav) #trending-hero .hero-dots {
    right: 20px;
    bottom: 18px;
  }

  .motion-ready #trending-hero .hero-slide.is-active .hero-actions .btn-primary {
    animation: none;
  }
}

@media (max-width: 390px) {
  body:has(.cinema-nav) #trending-hero .hero-slide-content {
    padding-inline: 16px;
  }

  body:has(.cinema-nav) #trending-hero .hero-title {
    font-size: clamp(30px, 9vw, 36px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.cinema-nav) #trending-hero .hero-slide-bg,
  body:has(.cinema-nav) #trending-hero .hero-actions .btn {
    transition: none !important;
    animation: none !important;
  }
}

/* Sur l’accueil, la barre est superposée au hero : supprimer le coussin
   global du body et rendre au hero la même hauteur pour garder son contenu
   et la section suivante exactement à leur place. */
body:has(#trending-hero) {
  padding-top: 0 !important;
}

@media (min-width: 721px) {
  body:has(#trending-hero) {
    --home-hero-top-clearance: 92px;
  }

  body:has(#trending-hero) #trending-hero {
    height: calc(clamp(640px, 82svh, 860px) + var(--home-hero-top-clearance));
    min-height: calc(640px + var(--home-hero-top-clearance));
    max-height: calc(860px + var(--home-hero-top-clearance));
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  body:has(#trending-hero) {
    --home-hero-top-clearance: 86px;
  }
}

@media (max-width: 720px) {
  body:has(#trending-hero) #trending-hero {
    margin-top: 0;
  }
}