/* ─────────────────────────────────────────────────────────────
   ТЕЛЕФОН: макет Марии по слоям (холст 390×616).
   Фон — собранные слои «основа + шлейф + фотография».
   Текст остаётся текстом и расставлен по её координатам.
   1 условный пиксель макета = 100/390 vw.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .hero-program-scene {
    background-image: url('img/hero-mobile-bg.webp') !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-color: #0a1b2e !important;
  }
  .hero-program-scene::before { background: none !important; background-color: transparent !important; }
  .hero-program-scene::after { display: none !important; }

  /* Прежнюю вуаль и фото-картинку убираем: они уже внутри макета */
  .hero-program-scene .hero-scene { display: none !important; }
  .hero-program-scene .layered-hero::before { display: none !important; }

  /* Высота героя — до того места, где в макете начинается карточка модуля */
  .hero-program-scene .layered-hero {
    position: relative !important;
    aspect-ratio: 390 / 396 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  /* Шапка: бренд, меню и ссылки — в тёмной полосе макета */
  .hero-program-scene .layered-nav {
    position: absolute !important;
    top: 3.1% !important; left: 6.2% !important; right: 6.2% !important;
    width: auto !important; min-height: 0 !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
    display: block !important;
    background: none !important;
    border: 0 !important;
    z-index: 4 !important;
  }
  .hero-program-scene .layered-brand { font-size: 3.4vw !important; letter-spacing: 0.17em !important; }
  .hero-program-scene .layered-actions,
  .hero-program-scene .layered-links {
    display: flex !important; gap: 5vw !important; margin-top: 4.6vw !important;
  }
  .hero-program-scene .layered-nav a { font-size: 3.1vw !important; }

  /* Текстовый блок: каждый элемент на своём месте по макету */
  .hero-program-scene .layered-copy {
    position: absolute !important; inset: 0 !important;
    width: auto !important; margin: 0 !important; padding: 0 !important;
    background: none !important; border: 0 !important; box-shadow: none !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }
  .hero-program-scene .layered-copy > * { pointer-events: auto !important; }
  .hero-program-scene .layered-copy h1 { margin: 0 !important; }

  .hero-program-scene .live-gold {
    position: absolute !important; left: 2.6% !important; top: 25.3% !important;
    width: 43.6% !important; margin: 0 !important; padding: 0 !important;
    font-size: 0 !important;            /* размер задаёт картинка, а не шрифт */
    line-height: 0 !important;
    display: block !important;
  }
  .hero-program-scene .live-gold::before,
  .hero-program-scene .live-underline,
  .hero-program-scene .reference-gold-shimmer { display: none !important; }
  .hero-program-scene .reference-lettering { width: 100% !important; height: auto !important; display: block !important; }

  .hero-program-scene .white-title {
    position: absolute !important; left: 3.1% !important; top: 38.9% !important;
    margin: 0 !important; font-size: 4.1vw !important; white-space: nowrap !important;
  }
  .hero-program-scene .course-label {
    position: absolute !important; left: 10.3% !important; top: 45.5% !important;
    margin: 0 !important; font-size: 2.4vw !important; letter-spacing: 0.3em !important;
  }
  .hero-program-scene .course-name {
    position: absolute !important; left: 5.6% !important; top: 49.5% !important;
    margin: 0 !important; font-size: 5.4vw !important; letter-spacing: 0.04em !important;
  }
  .hero-program-scene .layered-subtitle { display: none !important; }

  .hero-program-scene .layered-cta {
    position: absolute !important; left: 4.6% !important; top: 57.6% !important;
    width: 42% !important; min-height: 0 !important; height: 10.1vw !important;
    margin: 0 !important; padding: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 3.1vw !important;
  }
}


/* Mobile cover: use Mari's supplied layer composition through the CTA only.
   The module card from the supplied preview is intentionally cropped out. */
@media (max-width: 700px) {
  .hero-program-scene { background: #06182b !important; }
  .hero-program-scene .layered-hero {
    position: relative !important;
    width: 100% !important; height: auto !important; min-height: 0 !important;
    aspect-ratio: 706 / 1040 !important; padding: 0 !important; overflow: hidden !important;
    background: #06182b url("img/hero-mobile-designer-top.png?v=20261021-mobile-hero-v1") center top / 100% 100% no-repeat !important;
  }
  .hero-program-scene .hero-scene-picture { display: none !important; }
  .hero-program-scene .layered-nav,
  .hero-program-scene .layered-copy {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important;
    border: 0 !important;
  }
  .hero-program-scene .layered-hero::before,
  .hero-program-scene .layered-hero::after { display: none !important; content: none !important; }
  .mobile-hero-hotspots { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
  .mobile-hero-hotspots a {
    position: absolute; display: block; pointer-events: auto;
    color: transparent; font-size: 0; background: transparent;
  }
  .mobile-hotspot-brand { left: 5%; top: 2.5%; width: 39%; height: 5.4%; }
  .mobile-hotspot-question { left: 49.2%; top: 2.5%; width: 27.2%; height: 5.4%; }
  .mobile-hotspot-reviews { left: 77.8%; top: 2.5%; width: 18.8%; height: 5.4%; }
  .mobile-hotspot-format { left: 4%; top: 83.2%; width: 92%; height: 13%; }
  .post-module-art .art-hotspot-tariff-3 { left: 9% !important; top: 99.23% !important; width: 82% !important; height: .58% !important; }
}


/* Mobile artwork hotspots: align the gold CTA hit area to the full visible button. */
@media (max-width: 700px) {
  .post-module-art .art-hotspot-gold {
    left: 9% !important;
    top: 45.97% !important;
    width: 82% !important;
    height: .52% !important;
    z-index: 5 !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* The original supplied dress train keeps its native fold proportions.
   A sticky backdrop avoids enlarging a small swatch to the full course height. */
.mobile-velvet-backdrop, .mobile-floral-composition { display:none; }
@media (max-width:700px) {
  .hero-program-scene { position:relative!important; isolation:isolate; }
  .hero-program-scene::before { display:none!important; }
  .mobile-velvet-backdrop {
    display:block; position:absolute; left:0; right:0;
    top:calc(100vw * 1004 / 706 - 60px);
    height:calc(var(--mobile-course-end,4300px) - (100vw * 1004 / 706) + 60px);
    z-index:0; pointer-events:none;
  }
  .mobile-velvet-backdrop__fabric {
    position:sticky; top:0; width:100%; height:100vh; height:100svh;
    background:#06182b url("img/mobile-original-velvet-train.svg") center top / cover no-repeat;
  }
  .hero-program-scene .layered-hero {
    aspect-ratio:706 / 1004!important;
    background-image:url("img/hero-mobile-refined-v6.svg?v=native-light-20261023-v1")!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent 100%);
  }
  .hero-program-scene > .modules-flow { background:transparent!important; }
  .hero-program-scene .modules-flow #module-1 .love-showcase { padding-top:20px!important; }
  /* Keep the native 706 × 1040 coordinate space for the original glints and navigation. */
  .mobile-hero-hotspots { bottom:auto; height:calc(100vw * 1040 / 706); }
  .mobile-hotspot-format {
    left:7.17949%; top:80.86538%; width:85.64103%; height:9.39942%;
  }
  /* Both user-supplied layers share the full opening scene so the foreground
     can cross the hero/module boundary without inheriting the hero crop. */
  .mobile-floral-composition {
    display:block; position:absolute; left:0; top:0; width:100%;
    height:calc(100vw * 1250 / 706); overflow:hidden;
    z-index:5; pointer-events:none;
  }
  .mobile-floral-composition img {
    display:block; position:absolute; height:auto; max-width:none;
    pointer-events:none;
  }
  /* Exact supplied layers from the 850px reference, offset for the existing header.
     The supplied reference backs their alpha gaps; the flower pixels are unchanged. */
  .mobile-tile-bouquet {
    left:0; top:calc(100vw * 605 / 850);
    width:calc(100vw * 305 / 850);
    background:url("img/mobile-user-flower-reference-20261022.png") 0 calc(-100vw * 455 / 850) / 100vw auto no-repeat;
    filter:none;
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 80%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 8%,#000 91%,transparent 100%);
    mask-image:linear-gradient(to right,#000 0%,#000 80%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 8%,#000 91%,transparent 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
  .mobile-floral-composition .mobile-forget-me-nots {
    left:0; top:calc(100vw * 1004 / 706 + 20px - 100vw * 162 / 850);
    width:calc(100vw * 170 / 850); height:calc(100vw * 270 / 850);
    object-fit:contain; object-position:center top;
    background:url("img/mobile-user-flower-reference-20261022.png") 0 calc(-100vw * 925 / 850) / 100vw auto no-repeat;
    filter:none;
    -webkit-mask-image:url("img/mobile-user-foreground-mask.svg");
    mask-image:url("img/mobile-user-foreground-mask.svg");
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  }
}