/* ==========================================================================
   O'Dance Holiday — Crète 2027 · living hero (added on odanceevents.com, 2026-10-04)
   Desktop (>= 1024px, the zip's own breakpoint): the living hero, for every visitor, those
   who ask for less motion included. The waving flag and the living photos live in
   hero-anime.js. Tablets and phones (< 1024px): the zip's own hero, untouched (owner's
   choice, 2026-10-17: the still original artwork, then the two buttons).
   ========================================================================== */
@media (min-width: 1024px) {
  /* The two palm circles show photorealistic versions of the zip's photos, the first frame of
     their loops, with the framing of the zip's <img> (cover, centred), which is hidden. */
  .odh-hero__photo--a { background: #7ccff5 url("img/plage-palmiers-realiste.jpg") 50% 50% / cover no-repeat; }
  .odh-hero__photo--c { background: #7ccff5 url("img/plage-turquoise-realiste.jpg") 50% 50% / cover no-repeat; }
  .odh-hero__photo--a > img,
  .odh-hero__photo--c > img { visibility: hidden; }

  /* Living photos (see hero-anime.js): each video, or its animated image when a device
     refuses the video, lies over its picture and fades in once it plays. The background loop
     has the exact framing of fond-crete.jpg, so it is placed like the zip's background
     (cover, centre top). */
  .odh-hero__clip {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;   /* not 'inset': unknown before Safari 14.1 */
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    transition: opacity .9s ease;
  }
  .odh-hero__photo--b .odh-hero__clip { object-position: 20% 50%; }
  .odh-hero__sea {
    position: absolute; left: 0; top: var(--odh-hero-offset, 0px);
    width: 100%; height: calc(100% - var(--odh-hero-offset, 0px));
    object-fit: cover; object-position: center top;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
  }
  .odh-hero__clip.is-on, .odh-hero__sea.is-on { opacity: 1; }

  /* Older browsers (Safari before 14.1) ignore 'inset', which the zip uses on two layers of
     the hero: same placement written longhand, so the photos keep their place. */
  .odh-hero__bg, .odh-hero__photos { top: 0; right: 0; bottom: 0; left: 0; }
  /* Remove the flowers from the background corner, including the sea video.
     This layer remains behind the original title, photos and buttons. */
  .odh-hero::after {
    content: "";
    position: absolute;
    top: var(--odh-hero-offset); right: 0; bottom: 0; left: 0;
    z-index: -1;
    pointer-events: none;
    background: url("img/fond-crete-sans-fleurs-20261008.webp") center top / cover no-repeat;
    -webkit-mask-image: radial-gradient(ellipse 25% 44% at 100% 100%, #000 78%, transparent 100%);
    mask-image: radial-gradient(ellipse 25% 44% at 100% 100%, #000 78%, transparent 100%);
  }

  /* Zip of 2026-10-17: its hero is now the still original artwork (hero-original.jpg) and the
     composed hero is hidden (end of hero-crete.css). On desktop the living hero stays (owner's
     choice): the composition of the previous zips comes back, value for value. */
  .odh-hero.odh-hero {
    min-height: calc(724 * var(--u) + var(--odh-hero-offset));
    background:
      url("img/fond-crete.jpg") center top / cover no-repeat content-box,
      linear-gradient(180deg,
        #0079f4 0%, #008dfd 18%, #00a3fd 38%, #3fc2fd 55%, #9ae0fd 72%, #def3fe 81.4%,
        #0a78dc 81.6%, #0588e6 86%, #009bec 93%, #07b0e8 100%);
  }
  .odh-hero.odh-hero .odh-hero__art { display: none; }
  .odh-hero.odh-hero .odh-hero__photos { display: block; }
  .odh-hero.odh-hero .odh-hero__stage { position: relative; left: auto; top: auto; transform: none; height: calc(724 * var(--u)); }
  .odh-hero.odh-hero .odh-hero__ctas { top: calc(614 * var(--u)); left: calc(119 * var(--u)); gap: calc(19 * var(--u)); }
  .odh-hero.odh-hero .odh-hero__btn--secondary { min-width: calc(296 * var(--u)); }
  /* the zip hides these five as screen-reader-only text, with !important */
  .odh-hero.odh-hero .odh-hero__title,
  .odh-hero.odh-hero .odh-hero__styles,
  .odh-hero.odh-hero .odh-hero__dates,
  .odh-hero.odh-hero .odh-hero__sbk,
  .odh-hero.odh-hero .odh-hero__tagline { overflow: visible !important; clip: auto !important; }
  .odh-hero.odh-hero .odh-hero__title { width: 100% !important; height: calc(380 * var(--u)) !important; white-space: normal !important; }
  .odh-hero.odh-hero .odh-hero__styles { width: auto !important; height: auto !important; padding-right: calc(54 * var(--u)) !important; }
  .odh-hero.odh-hero .odh-hero__dates { width: calc(589 * var(--u)) !important; height: calc(70 * var(--u)) !important; }
  .odh-hero.odh-hero .odh-hero__sbk { width: auto !important; height: auto !important; padding-right: calc(40 * var(--u)) !important; }
  .odh-hero.odh-hero .odh-hero__tagline { width: calc(170 * var(--u)) !important; height: auto !important; white-space: normal !important; }
}
/* A desktop window narrowed below 1024px once the videos have started: they step aside,
   the zip's hero takes over. */
@media (max-width: 1023.98px) {
  .odh-hero__clip, .odh-hero__sea { display: none; }
}