/* ==========================================================================
   AIRDROP · Home - immersive mobile hero  (October 2026)

   Phones only. The active hero slide's artwork no longer sits in a card: it
   runs edge to edge from the very top of the page, under the brand header and
   the artist stories, down to the hero copy. A masked backdrop blur behind
   the header and stories fades into sharp artwork above the copy. Dark
   gradients keep the text readable. The copy is right-aligned: title, then a
   bold date line ("יום שישי ב-16 לאוקטובר").

   Switched on by `body.sp-imm`, which pages/discover.php adds when
   $homeImmersiveHero is true. Set it to false and the page is exactly the
   previous design again; nothing in spotify.css or discover.js was changed
   (discover.php only adds the hidden date line when the flag is on).

   How it works: every hero slide is stretched upward by --imm-above (the
   distance from the top of the page to the hero, measured by
   assets/js/home-immersive.js), so the hero's own cross-fade drives the
   backdrop too and the two can never drift out of sync.
   ========================================================================== */

@media (max-width: 767px) {
  /* `hidden` would clip the slides that now reach above the content box;
     `clip` keeps the horizontal guard without becoming a clipping container
     in the vertical direction. */
  body.sp-imm .sp-content { overflow-x: clip; overflow-y: visible; }

  /* ── Hero: from a framed card to a full-bleed scene ── */
  body.sp-imm .sp-nhero {
    --imm-above: 200px;             /* fallback until the script measures */
    --imm-bleed: 16px;              /* .sp-content's side gutter */
    z-index: 1;
    margin: 4px 0 6px;
    /* 24px shorter than spotify.css: the description is one line now, so the
       title keeps its distance from the stories */
    height: clamp(226px, calc(48vh - 120px), 306px);
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    isolation: isolate;
  }
  body.sp-imm .sp-nhero__slide {
    top: calc(-1 * var(--imm-above));
    inset-inline: calc(-1 * var(--imm-bleed));
    background-color: var(--sp-bg);
    overflow: hidden;               /* keep artwork inside the fade */
    /* Cross-fade without a dark dip: the outgoing slide stays fully opaque
       underneath while the incoming one fades in on top, then drops out. */
    z-index: 0;
    transition: opacity 0s linear .7s, visibility 0s linear .7s;
  }
  body.sp-imm .sp-nhero__slide.is-active {
    z-index: 1;
    transition: opacity .7s ease, visibility 0s;
  }
  /* The copy lines up with the shelves below (20px from the screen edge),
     and so does the full-width button. */
  body.sp-imm .sp-nhero__body { bottom: 46px; inset-inline: 20px; }
  body.sp-imm .sp-nhero__actions { width: 100%; margin-inline: 0; }

  /* The artwork itself stays sharp; only the separate top veil blurs it. */
  body.sp-imm .sp-nhero__slide.has-image::after {
    inset: 0;
    background-position: 50% 38%;
    filter: none;
    transform: none;
    /* Leaving: hold the drift where it stopped until the slide has faded out
       (.7s), then snap back to centre while invisible. */
    transition: background-position 0s linear .7s;
  }
  /* A slow, even drift while a slide is showing: the artwork slides left
     (background-position 50% → 60%) over the slide's 7s plus its fade-in.
     .is-panning is added by home-immersive.js one frame after load, so the
     first slide drifts too instead of starting at the end position. */
  body.sp-imm .sp-nhero.is-panning .sp-nhero__slide.has-image.is-active::after {
    background-position: 60% 38%;
    transition: background-position 7.7s linear;
  }
  @media (prefers-reduced-motion: reduce) {
    body.sp-imm .sp-nhero__slide.has-image::after,
    body.sp-imm .sp-nhero.is-panning .sp-nhero__slide.has-image.is-active::after { background-position: 50% 38%; transition: none; }
  }

  /* Scrims: a dark veil at the top for the logo, nothing over the middle of
     the picture, and a long fade at the bottom that ends in the exact page
     colour so the quick-nav below sits on one continuous surface. */
  body.sp-imm .sp-nhero__slide::before {
    background:
      linear-gradient(180deg, rgba(10,10,16,.68) 0, rgba(10,10,16,.34) 90px, rgba(10,10,16,0) 240px),
      linear-gradient(0deg,
        var(--sp-bg) 0,
        rgba(18,18,18,.96) 28px,
        rgba(18,18,18,.86) 100px,
        rgba(18,18,18,.64) 185px,
        rgba(18,18,18,.26) 275px,
        rgba(18,18,18,0) 370px);
  }

  /* Blur only the backdrop behind the header and stories, fading it out
     gradually below the rail. Mask the tint and blur together so there is no
     hard lower edge; the portraits, names and hero copy stay sharp.
     Its full-bleed width is independent of the inset scrolling rail. */
  body.sp-imm .sp-shelf[data-hot-artists] {
    position: relative; z-index: 2;
    margin: 0 calc(-1 * var(--imm-bleed, 16px));
    padding: 18px 0 0;
  }
  body.sp-imm .sp-shelf[data-hot-artists]::before {
    content: ""; position: absolute; z-index: -1;
    inset: -480px 0 -16px;             /* barely past the names: the slide title below stays sharp */
    background: rgba(10,12,20,.30);
    -webkit-backdrop-filter: blur(20px) saturate(1.05);
    backdrop-filter: blur(20px) saturate(1.05);
    -webkit-mask-image: linear-gradient(180deg,
      #000 0, #000 calc(100% - 150px),
      rgba(0,0,0,.90) calc(100% - 115px),
      rgba(0,0,0,.66) calc(100% - 80px),
      rgba(0,0,0,.32) calc(100% - 45px),
      rgba(0,0,0,.08) calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(180deg,
      #000 0, #000 calc(100% - 150px),
      rgba(0,0,0,.90) calc(100% - 115px),
      rgba(0,0,0,.66) calc(100% - 80px),
      rgba(0,0,0,.32) calc(100% - 45px),
      rgba(0,0,0,.08) calc(100% - 18px), transparent 100%);
    pointer-events: none;
  }
  /* Inset the scroll viewport itself, not just its contents. The trailing
     padding lets the last story clear the fade when the rail reaches its end. */
  body.sp-imm .sp-shelf[data-hot-artists] .sp-stories-wrap {
    margin-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px);
    mask-image: linear-gradient(90deg, transparent, #000 26px);
  }
  html[dir="ltr"] body.sp-imm .sp-shelf[data-hot-artists] .sp-stories-wrap {
    -webkit-mask-image: linear-gradient(270deg, transparent, #000 26px);
    mask-image: linear-gradient(270deg, transparent, #000 26px);
  }
  body.sp-imm .sp-shelf[data-hot-artists] .sp-stories {
    padding: 6px 2px 14px; padding-inline-end: 28px;
    gap: 4px; scroll-padding-inline: 2px;
  }
  body.sp-imm .sp-shelf[data-hot-artists] .sp-rail__nav { display: none; }
  body.sp-imm .sp-shelf[data-hot-artists] .sp-story { gap: 8px; }
  /* Rings: a hairline with a clear gap around the portrait instead of a
     filled gradient disc. Artists playing today get a brighter line and a
     bold "היום" tag on darker glass, edged with the same white line. */
  body.sp-imm .sp-shelf[data-hot-artists] .sp-story__ring {
    background: none; padding: 0;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.30);
  }
  body.sp-imm .sp-shelf[data-hot-artists] .sp-story__ring--live { box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.92); }
  /* The transparent border is the gap: ring width + 2.75px, so the portrait
     never touches the line. */
  body.sp-imm .sp-shelf[data-hot-artists] .sp-story__img {
    border: 4.75px solid transparent;
    background-clip: padding-box;
  }
  body.sp-imm .sp-shelf[data-hot-artists] .sp-story__ring--live .sp-story__img { border-width: 5.25px; }
  body.sp-imm .sp-shelf[data-hot-artists] .sp-story__live {
    display: inline-flex; align-items: center;
    bottom: -6px; padding: 1px 8px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0; line-height: 1.45;
    /* the tag hangs off the ring: same white line, darker glass inside */
    border: 2.5px solid rgba(255,255,255,.92);
    background: rgba(14,14,20,.62); color: #fff;
    -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: none;
  }
  body.sp-imm .sp-shelf[data-hot-artists] .sp-story__count { border-color: rgba(14,14,18,.40); }
  body.sp-imm .sp-shelf[data-hot-artists] .sp-story__name { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45); }

  /* A solid enough scrim keeps the sticky header readable without blur. */
  body.sp-imm .sp-mtop:not(.is-stuck) .sp-circ { background: rgba(255,255,255,.10); }
  body.sp-imm .sp-mtop.is-stuck {
    background: rgba(18,18,18,.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
  }

  /* ── Hero copy: no eyebrow pill. The block reads from the right edge like a
     headline: the title (up to two lines), then a smaller bold date line
     ("יום שישי ב-16 לאוקטובר"), then a one-line description that glides when cut. ── */
  body.sp-imm .sp-nhero__pills { display: none; }
  body.sp-imm .sp-nhero__autoplay-toggle { display: none; }   /* a desktop nicety, noise on a phone */
  body.sp-imm .sp-nhero__body { align-items: flex-start; text-align: start; }
  body.sp-imm .sp-nhero__title {
    font-size: clamp(25px, 7vw, 32px); line-height: 1.15;
    -webkit-line-clamp: 2; overflow-wrap: break-word;
    text-wrap: balance;             /* no lone last word on the second line */
  }
  body.sp-imm.sp .sp-nhero__title { margin-bottom: 6px; }
  body.sp-imm .sp-nhero__date {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
    font-size: 15px; font-weight: 700; line-height: 1.35;
    color: rgba(255,255,255,.92);
  }
  /* "היום" / "מחר" / "בעוד 4 ימים": a frosted tag at the same text size */
  body.sp-imm .sp-nhero__soon {
    padding: 2px 9px; border-radius: var(--sp-pill);
    font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap;
    background: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  }
  body.sp-imm.sp .sp-nhero__date { margin: 0 0 12px; }
  /* One line, 2px larger, with an ellipsis where it is cut */
  body.sp-imm.sp .sp-nhero__desc {
    margin-inline: 0; max-width: 100%;
    font-size: 16px;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Cut descriptions glide slowly so they can be read (home-immersive.js
     drives it). The line stays inside the copy column, like the title and
     button, with soft fades at both ends; the start-side fade only appears
     while the text moves, so the first words are crisp when it rests. */
  body.sp-imm.sp .sp-nhero__desc.is-marquee {
    text-overflow: clip;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - var(--mq-fade-start, 0px)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - var(--mq-fade-start, 0px)), transparent 100%);
  }
  html[dir="ltr"] body.sp-imm.sp .sp-nhero__desc.is-marquee {
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 28px, #000 calc(100% - var(--mq-fade-start, 0px)), transparent 100%);
            mask-image: linear-gradient(270deg, transparent 0, #000 28px, #000 calc(100% - var(--mq-fade-start, 0px)), transparent 100%);
  }
  body.sp-imm .sp-nhero__mq { display: inline-flex; flex-wrap: nowrap; will-change: transform; }
  body.sp-imm .sp-nhero__mqtext { flex: 0 0 auto; padding-inline-end: 56px; }

  /* CTA: a borderless frosted-glass key, and a plain forward arrow
     in place of the magic-wand icon. */
  body.sp-imm .sp-nhero__btn {
    height: 52px; gap: 10px;
    background: rgba(255,255,255,.14); color: #fff;
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: none;
    transition: background .15s ease, transform .12s ease;
  }
  body.sp-imm .sp-nhero__btn:hover { filter: none; transform: none; background: rgba(255,255,255,.20); }
  body.sp-imm .sp-nhero__btn:active { transform: scale(.98); }
  body.sp-imm .sp-nhero__btn svg { display: none; }
  body.sp-imm .sp-nhero__btn::after {
    content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  html[dir="ltr"] body.sp-imm .sp-nhero__btn::after { transform: scaleX(-1); }

  /* Pagination: just the dots, no pill behind them. */
  body.sp-imm .sp-nhero__dots { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Animatable, so the start-side fade can ease in and out with the marquee. */
@property --mq-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* The date line only belongs to the phone hero. */
.sp-nhero__date { display: none; }