/* =================================================================
   RCHV mobile overrides — re-flows the desktop layout for portrait
   phones. Triggered at max-width: 768px.

   The mobile Figma frames are at 1080px design width, so inside this
   media query we redefine --fu = 100vw / 1080 and override every
   absolutely-positioned element with its mobile coords.

   Mobile sections (per Figma 21:277 hero + 30:428 rest of page):
     hero               y=    0 – 1920
     why-RCHV           y= 1920 – ~3520     (frame 30:428 starting y=0)
     programs           y= ~4463 – ~8073
     goals              y= ~8442 – 9628
     apply              y= 11596 – 13248
     admissions         y= 13950 – end
   Total page height   ≈ 16260fu
================================================================= */

@media (max-width: 768px) {
  :root {
    --fu: calc(100vw / 1080);
  }

  /* ============= Page wrapper + main containers ============= */
  /* .page is a flex column on desktop; on mobile we keep that
     (sections stack naturally). No fixed page height needed — the
     two sections' heights sum to it. */
  .hero {
    height: calc(1920 * var(--fu));
    width: 100vw;
  }
  .main {
    /* No `top` — .main flows directly under .hero in the flex column. */
    height: calc(14340 * var(--fu));
    width: 100vw;
  }

  /* ============= HERO ============= */

  /* Mobile hero now uses a single 1080×1920 unified bg image
     (hero-mobile-bg) that bakes in cliffs, horse, rope+figure, glowing
     climbers, grass, butterflies and clouds. Texts and Piesakies CTA
     are the only overlay elements. */
  .hero {
    background: linear-gradient(to bottom, #16223d 0%, #3552c2 100%);
  }
  .hero-bg-mountain {
    display: block;
  }

  /* Cliffs — klints L uses the mobile-specific asset (277x983 natural,
     pre-cropped tall narrow cliff with figure embedded), positioned
     flush against the top-left corner. */
  .hero-klints-l {
    top: 0;
    left: 0;
    width: calc(277 * var(--fu));
    height: calc(983 * var(--fu));
  }
  .hero-klints-r {
    top: calc(-91 * var(--fu));
    left: calc(671 * var(--fu));
    width: calc(465 * var(--fu));
    height: calc(700 * var(--fu));
  }

  /* Rope + figure composition (mobile asset 654x448). Nudged down
     slightly so the figure's head isn't clipped at the top, and a
     couple px left so it sits closer to the cliff. */
  .hero-rope-figure {
    top: calc(-50 * var(--fu));
    left: calc(50 * var(--fu));
    width: calc(654 * var(--fu));
    height: calc(448 * var(--fu));
  }

  /* Headline — moved to top-center, much smaller in real px */
  .hero-headline {
    top: calc(400 * var(--fu));
    left: calc(214 * var(--fu));
    width: calc(652 * var(--fu));
    font-size: calc(80 * var(--fu));
  }

  /* Horse + rider — shifted 10% left then nudged 4% right and 5% up. */
  .hero-horse-wrap {
    top: calc(447 * var(--fu));
    left: calc(-132 * var(--fu));
    width: calc(1200 * var(--fu));
    height: calc(1057 * var(--fu));
  }
  .hero-horse-stack {
    width: calc(1177 * var(--fu));
    height: calc(1051 * var(--fu));
  }

  /* Hide all 4 desktop grass layers — mobile uses two dedicated
     pre-composed layers below. */
  .hero-grass-back,
  .hero-grass-back-2,
  .hero-grass-l,
  .hero-grass-r {
    display: none;
  }

  /* Mobile back grass (2050x962 natural) — sits BEHIND the horse so
     the horse's hooves come down INTO the grass. z-index < horse (5). */
  .hero-grass-back-m {
    display: block;
    position: absolute;
    top: calc(960 * var(--fu));
    left: calc(-485 * var(--fu));
    width: calc(2050 * var(--fu));
    height: calc(962 * var(--fu));
    z-index: 3;
    pointer-events: none;
  }

  /* Mobile front grass (2459x1150 natural) — sits IN FRONT of the
     horse so the lower portion covers the horse legs naturally. */
  .hero-grass-front-m {
    display: block;
    position: absolute;
    top: calc(1100 * var(--fu));
    left: calc(-690 * var(--fu));
    width: calc(2459 * var(--fu));
    height: calc(1150 * var(--fu));
    z-index: 7;
    pointer-events: none;
  }

  /* Floor gradient — the blue fade at the bottom */
  .hero-floor-gradient {
    top: calc(1669 * var(--fu));
    height: calc(251 * var(--fu));
    width: 100vw;
  }

  /* Sub-claims — plain text on mobile, smaller and repositioned.
     Reuses the same --text-glow halo as the section titles so the
     hero claims look consistent with the rest of the page. */
  .hero-claim {
    font-size: calc(28 * var(--fu));
    text-shadow: var(--text-glow);
  }
  .hero-claim-priority {
    top: calc(893 * var(--fu));
    left: calc(102 * var(--fu));
    width: calc(160 * var(--fu));
  }
  .hero-claim-apply {
    top: calc(1443 * var(--fu));
    left: calc(774 * var(--fu));
    width: calc(279 * var(--fu));
  }

  /* Apply button — bottom of hero */
  .btn-apply--hero {
    top: calc(1625 * var(--fu));
    left: calc(229 * var(--fu));
    width: calc(622 * var(--fu));
    height: calc(136 * var(--fu));
  }
  .btn-apply--hero span {
    font-size: calc(80 * var(--fu));
  }

  /* Hero clouds — repositioned per mobile mākoņi frame (21:280) */
  /* Most desktop hero clouds are hidden on mobile — the right side
     gets the unified Group 74 cluster, only cloud-5 (small lower-left)
     remains as decoration. */
  .hero-cloud-1,
  .hero-cloud-2,
  .hero-cloud-3,
  .hero-cloud-4,
  .hero-cloud-6,
  .hero-cloud-7,
  .hero-cloud-8 {
    display: none;
  }
  .hero-cloud-5 {
    top: calc(1070 * var(--fu));
    left: calc(35 * var(--fu));
    width: calc(243 * var(--fu));
    height: calc(165 * var(--fu));
  }

  /* Unified mobile cloud cluster on the right side (Group 74).
     Pinned flush to the right edge; carries the same vertical-bob
     floating animation as the other cloud elements. */
  .hero-clouds-right-m {
    display: block;
    position: absolute;
    top: calc(380 * var(--fu));
    right: 0;
    left: auto;
    width: calc(420 * var(--fu));
    height: calc(762 * var(--fu));
    z-index: 1;
    pointer-events: none;
    animation: cloud-float-c 24s ease-in-out infinite;
    animation-delay: -6s;
    will-change: translate;
  }

  /* Single makonis (cloud) sits above the green hill, between the
     horse and the grass-front layer. */
  .hero-makonis-m {
    display: block;
    position: absolute;
    top: calc(900 * var(--fu));
    left: calc(420 * var(--fu));
    width: calc(268 * var(--fu));
    height: calc(169 * var(--fu));
    z-index: 4;
    pointer-events: none;
    animation: cloud-float-b 21s ease-in-out infinite;
    animation-delay: -3s;
    will-change: translate;
  }

  /* makonis 2 — small cloud near the left cliff above headline.
     Figma indicator: 295.28 × 125.06 */
  .hero-makonis-2-m {
    display: block;
    position: absolute;
    top: calc(150 * var(--fu));
    left: calc(220 * var(--fu));
    width: calc(295 * var(--fu));
    height: calc(125 * var(--fu));
    z-index: 1;
    pointer-events: none;
    animation: cloud-float-a 26s ease-in-out infinite;
    animation-delay: -8s;
    will-change: translate;
  }

  /* makonis 3 — wider cloud spanning across the top between cliffs.
     Figma indicator: 449 × 179 (asset natural 449x137).
     Flush against the top of the hero (no padding). */
  .hero-makonis-3-m {
    display: block;
    position: absolute;
    top: 0;
    left: calc(330 * var(--fu));
    width: calc(449 * var(--fu));
    height: calc(179 * var(--fu));
    z-index: 1;
    pointer-events: none;
  }

  /* Hide most of the desktop hero butterflies + petals — they don't
     translate well to portrait phone. Keep just a couple for life. */
  .deco--butterfly { display: none; }
  .deco--butterfly:nth-of-type(1),
  .deco--butterfly:nth-of-type(3) {
    display: block;
    transform: scale(0.4);
    transform-origin: center;
  }
  .deco--petal { display: none; }

  /* ============= WHY-RCHV (mobile) ============= */
  .why-title {
    top: calc(256 * var(--fu));
    left: calc(148 * var(--fu));
    width: calc(780 * var(--fu));
    font-size: calc(85 * var(--fu));
  }

  /* Sparkles */
  .sparkle-1 {
    top: calc(364 * var(--fu));
    left: calc(759 * var(--fu));
    width: calc(169 * var(--fu));
    height: calc(171 * var(--fu));
  }
  .sparkle-2 {
    top: calc(102 * var(--fu));
    left: calc(250 * var(--fu));
    width: calc(167 * var(--fu));
    height: calc(165 * var(--fu));
  }

  /* Clean 1px black border drawn from a stroke-only SVG layered on top
     of each bubble's shape (built-in SVG stroke is sub-pixel at mobile
     scale and disappears). stroke-width 10 in figma units renders as
     ~1.2px on mobile with geometricPrecision rendering — sharp not fuzzy. */
  .why-bubble__shape::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bubble-stroke-img) no-repeat center / 100% 100%;
    pointer-events: none;
  }
  .why-bubble--tl { --bubble-stroke-img: url("../assets/shape-anglu-stroke.svg"); }
  .why-bubble--tr { --bubble-stroke-img: url("../assets/shape-domasana-stroke.svg"); }
  .why-bubble--bl { --bubble-stroke-img: url("../assets/shape-akademiska-stroke.svg"); }
  .why-bubble--br { --bubble-stroke-img: url("../assets/shape-vide-stroke.svg"); }

  /* 4 bubbles stacked alternating left/right — bubble + heading widths
     match Figma exactly. Only the body p widths were widened so the
     longer text wraps to fewer lines without overflowing the bubble. */
  .why-bubble--tl {
    top: calc(462 * var(--fu));
    left: calc(246 * var(--fu));
    width: calc(270 * var(--fu));
    height: calc(357 * var(--fu));
  }
  .why-bubble--tl .heading { top: calc(32 * var(--fu));  width: calc(180 * var(--fu)); font-size: calc(30 * var(--fu)); }
  .why-bubble--tl p        { top: calc(194 * var(--fu)); width: calc(180 * var(--fu)); font-size: calc(22 * var(--fu)); }

  .why-bubble--br {
    top: calc(725 * var(--fu));
    left: calc(551 * var(--fu));
    width: calc(270 * var(--fu));
    height: calc(296 * var(--fu));
  }
  .why-bubble--br .heading { top: calc(31 * var(--fu));  width: calc(170 * var(--fu)); font-size: calc(30 * var(--fu)); }
  .why-bubble--br p        { top: calc(138 * var(--fu)); width: calc(170 * var(--fu)); font-size: calc(22 * var(--fu)); }

  .why-bubble--tr {
    top: calc(1038 * var(--fu));
    left: calc(215 * var(--fu));
    width: calc(336 * var(--fu));
    height: calc(284 * var(--fu));
  }
  .why-bubble--tr .heading { top: calc(23 * var(--fu));  width: calc(261 * var(--fu)); font-size: calc(30 * var(--fu)); }
  .why-bubble--tr p        { top: calc(127 * var(--fu)); width: calc(261 * var(--fu)); font-size: calc(22 * var(--fu)); }

  .why-bubble--bl {
    top: calc(1274 * var(--fu));
    left: calc(509 * var(--fu));
    width: calc(301 * var(--fu));
    height: calc(318 * var(--fu));
  }
  .why-bubble--bl .heading { top: calc(26 * var(--fu));  width: calc(232 * var(--fu)); font-size: calc(30 * var(--fu)); }
  .why-bubble--bl p        { top: calc(135 * var(--fu)); width: calc(209 * var(--fu)); font-size: calc(22 * var(--fu)); }

  /* Wide makonis cloud below ANGLU bubble, next to VIDE bubble.
     Figma indicator: 548 × 232 (asset natural 561x263). */
  .why-makonis-m {
    display: block;
    position: absolute;
    top: calc(830 * var(--fu));
    left: calc(80 * var(--fu));
    width: calc(548 * var(--fu));
    height: calc(232 * var(--fu));
    z-index: 4;
    pointer-events: none;
    animation: cloud-float-a 25s ease-in-out infinite;
    animation-delay: -7s;
    will-change: translate;
  }

  /* Smaller makonis cloud sitting next to DOMĀŠANA UN PATSTĀVĪBA
     (left side, opposite the bubble). */
  .why-makonis-2-m {
    display: block;
    position: absolute;
    top: calc(1080 * var(--fu));
    left: calc(-30 * var(--fu));
    width: calc(258 * var(--fu));
    height: calc(232 * var(--fu));
    z-index: 4;
    pointer-events: none;
    animation: cloud-float-b 22s ease-in-out infinite;
    animation-delay: -4s;
    will-change: translate;
  }

  /* Small cloud at the bottom-right corner of VIDE bubble.
     Figma indicator: 211.91 × 134.34 (asset natural 222x145). */
  .why-makonis-3-m {
    display: block;
    position: absolute;
    top: calc(950 * var(--fu));
    left: calc(770 * var(--fu));
    width: calc(212 * var(--fu));
    height: calc(134 * var(--fu));
    z-index: 5;
    pointer-events: none;
    animation: cloud-float-c 23s ease-in-out infinite;
    animation-delay: -9s;
    will-change: translate;
  }

  /* Small cloud stuck to the right edge of the section, near
     AKADĒMISKA KVALITĀTE bubble. */
  .why-makonis-4-m {
    display: block;
    position: absolute;
    top: calc(1480 * var(--fu));
    right: 0;
    left: auto;
    width: calc(142 * var(--fu));
    height: calc(172 * var(--fu));
    z-index: 4;
    pointer-events: none;
    animation: cloud-float-a 26s ease-in-out infinite;
    animation-delay: -12s;
    will-change: translate;
  }

  /* Why-section grass + clouds + butterflies (mobile positions) */
  .why-grass-l {
    top: calc(1445 * var(--fu));
    left: calc(-256 * var(--fu));
    width: calc(1554 * var(--fu));
    height: calc(618 * var(--fu));
  }
  /* Hide the desktop CSS-built fade band on mobile — mobile uses the
     two pre-rendered gradient PNG assets below instead. */
  .why-fade-band { display: none; }

  .why-grad-1-m {
    display: block;
    position: absolute;
    top: calc(1815 * var(--fu));
    left: 0;
    width: 100%;
    height: calc(247 * var(--fu));
    pointer-events: none;
    z-index: 2;
  }
  .why-grad-2-m {
    display: block;
    position: absolute;
    /* sits flush against the bottom of why-grad-1-m (1815 + 247 = 2062) */
    top: calc(2062 * var(--fu));
    left: 0;
    width: 100%;
    height: calc(258 * var(--fu));
    pointer-events: none;
    z-index: 2;
  }
  .why-cloud-1 {
    top: calc(1204 * var(--fu));
    left: calc(-290 * var(--fu));
    width: calc(548 * var(--fu));
    height: calc(232 * var(--fu));
  }
  .why-cloud-2 {
    top: calc(1468 * var(--fu));
    left: calc(1344 * var(--fu));
    width: calc(406 * var(--fu));
    height: calc(172 * var(--fu));
  }
  .why-cloud-small {
    top: calc(530 * var(--fu));
    left: calc(918 * var(--fu));
    width: calc(272 * var(--fu));
    height: calc(184 * var(--fu));
  }
  .why-butterfly-1 {
    top: calc(1764 * var(--fu));
    left: calc(53 * var(--fu));
    width: calc(77 * var(--fu));
    height: calc(77 * var(--fu));
  }
  .why-butterfly-2 {
    top: calc(1592 * var(--fu));
    left: calc(875 * var(--fu));
    width: calc(77 * var(--fu));
    height: calc(77 * var(--fu));
  }

  /* ============= PROGRAMS (3 cards stacked vertically) ============= */
  .programs {
    top: calc(2543 * var(--fu));
    width: 100%;
    height: calc(3609 * var(--fu));
  }
  .program-card {
    width: calc(443 * var(--fu));
    height: calc(1083 * var(--fu));
    left: calc(319 * var(--fu)); /* centered (1080-443)/2 ≈ 319 */
    /* Match desktop's visual ratio: 105/937 ≈ 11% of card width.
       For 443fu mobile card → 50fu radius. Border kept the same
       hairline thickness as desktop (~1px). */
    border-radius: calc(50 * var(--fu));
    border: 1px solid #00000063;
  }
  .program-pill-solid {
    border-radius: calc(60 * var(--fu));
    border: 1px solid #00000063;
  }
  .program-card[data-n="01"] { top: 0; left: calc(319 * var(--fu)); }
  .program-card[data-n="02"] { top: calc(1265 * var(--fu)); left: calc(319 * var(--fu)); }
  .program-card[data-n="03"] { top: calc(2526 * var(--fu)); left: calc(319 * var(--fu)); }

  /* Internal program-card layout (per Figma 30:520 box_01) */
  .program-num {
    top: calc(67 * var(--fu));
    font-size: calc(144 * var(--fu));
  }
  .program-title {
    top: calc(240 * var(--fu));
    width: calc(370 * var(--fu));
    font-size: calc(33 * var(--fu));
  }
  /* Swap labels on mobile */
  .program-title .title-desk { display: none; }
  .program-title .title-mob { display: inline; }
  /* Glow halo on the big number + title (matches the headlines) */
  .program-num,
  .program-title {
    text-shadow: var(--text-glow);
  }
  .program-rule--top { top: calc(390 * var(--fu)); }
  .program-pill-solid {
    top: calc(409 * var(--fu));
    width: calc(277 * var(--fu));
    height: calc(66 * var(--fu));
    font-size: calc(28 * var(--fu));
  }
  .program-list--core {
    top: calc(520 * var(--fu));
    font-size: calc(28 * var(--fu));
    gap: calc(20 * var(--fu));
  }
  .program-rule--mid { top: calc(733 * var(--fu)); }
  .program-pill-spec {
    top: calc(752 * var(--fu));
    width: calc(277 * var(--fu));
    height: calc(102 * var(--fu));
    font-size: calc(28 * var(--fu));
    padding-top: calc(18 * var(--fu));
    line-height: 1.25;
  }
  .program-list--spec {
    top: calc(900 * var(--fu));
    font-size: calc(28 * var(--fu));
    gap: calc(20 * var(--fu));
  }
  .program-list .item::before {
    width: calc(27 * var(--fu));
    height: calc(18 * var(--fu));
    left: calc(-30 * var(--fu));
    /* Align to first text line (not vertical center of item),
       so multi-line items like bioloģija* keep the arrow on the first line. */
    top: 0.5em;
    transform: translateY(-50%);
  }
  .program-list .item { padding-left: calc(40 * var(--fu)); }
  .program-list .small { font-size: calc(20 * var(--fu)); display: block; }
  /* Card 02's core list grows by an extra line (the (*viens pēc izvēles)
     subtitle), so push the divider/pill/spec list down to make room.
     Spacing matches the gap below the last spec item. */
  .program-card[data-n="02"] .program-rule--mid { top: calc(773 * var(--fu)); }
  .program-card[data-n="02"] .program-pill-spec { top: calc(792 * var(--fu)); }
  .program-card[data-n="02"] .program-list--spec { top: calc(940 * var(--fu)); }
  /* Trim card 03's spec pill ~1px so it sits slightly tighter inside the card. */
  .program-card[data-n="03"] .program-pill-spec {
    width: calc(271 * var(--fu));
    height: calc(99 * var(--fu));
  }

  /* ============= GOALS (4 bubbles + horse) ============= */
  .goals-title {
    top: calc(6522 * var(--fu));
    left: calc(247 * var(--fu));
    width: calc(585 * var(--fu));
    font-size: calc(85 * var(--fu));
  }
  .sparkle-3 { top: calc(6428 * var(--fu)); left: calc(616 * var(--fu)); width: calc(149 * var(--fu)); height: calc(151 * var(--fu)); }
  .sparkle-4 { top: calc(6705 * var(--fu)); left: calc(269 * var(--fu)); width: calc( 96 * var(--fu)); height: calc( 94 * var(--fu)); }
  .sparkle-5 { top: calc(6623 * var(--fu)); left: calc(800 * var(--fu)); width: calc(147 * var(--fu)); height: calc(146 * var(--fu)); }

  /* 4 goal bubbles stacked alternating */
  .goal-merki { /* KULTURA */
    top: calc(6821 * var(--fu));
    left: calc(172 * var(--fu));
    width: calc(359 * var(--fu));
    height: calc(343 * var(--fu));
    z-index: 6;
  }
  .goal-merki .heading { top: calc(28 * var(--fu)); width: calc(213 * var(--fu)); font-size: calc(40 * var(--fu)); }
  .goal-merki p        { top: calc(133 * var(--fu)); width: calc(307 * var(--fu)); font-size: calc(28 * var(--fu)); }

  .goal-skola { /* PERSONIBA */
    top: calc(7097 * var(--fu));
    left: calc(551 * var(--fu));
    width: calc(359 * var(--fu));
    height: calc(298 * var(--fu));
  }
  .goal-skola .heading { top: calc(27 * var(--fu)); width: calc(274 * var(--fu)); font-size: calc(40 * var(--fu)); }
  .goal-skola p        { top: calc(118 * var(--fu)); width: calc(268 * var(--fu)); font-size: calc(28 * var(--fu)); }

  .goal-uzvara { /* ATTISTIBA */
    top: calc(7405 * var(--fu));
    left: calc(157 * var(--fu));
    width: calc(394 * var(--fu));
    height: calc(316 * var(--fu));
  }
  .goal-uzvara .heading { top: calc(27 * var(--fu)); width: calc(247 * var(--fu)); font-size: calc(40 * var(--fu)); }
  .goal-uzvara p        { top: calc(140 * var(--fu)); width: calc(315 * var(--fu)); font-size: calc(28 * var(--fu)); }

  .goal-izaugsme { /* PRIORITATE */
    top: calc(7708 * var(--fu));
    left: calc(403 * var(--fu));
    width: calc(427 * var(--fu));
    height: calc(313 * var(--fu));
  }
  .goal-izaugsme .heading { top: calc(28 * var(--fu)); width: calc(277 * var(--fu)); font-size: calc(40 * var(--fu)); }
  .goal-izaugsme p        { top: calc(138 * var(--fu)); width: calc(338 * var(--fu)); font-size: calc(28 * var(--fu)); }

  /* Dirt + horse area — on mobile the rearing horse should sit ON TOP
     of PRIORITĀTE bubble (which it visually overlaps), so bump z-index
     above the goal-card default (6). */
  .goals-dirt {
    top: calc(7908 * var(--fu));
    left: calc(-500 * var(--fu));
    width: calc(2102 * var(--fu));
    height: calc(1234 * var(--fu));
    z-index: 8;
  }
  /* Mirror the desktop approach: a single CSS linear-gradient band
     (transparent → dirt → transparent) gives a much smoother fade than
     two stacked bitmap PNGs, with no visible seam in the middle. */
  .apply-grad-top-m,
  .apply-grad-bottom-m { display: none; }
  .goals-fade-band {
    display: block;
    position: absolute;
    /* Brown "peak" centered near the dirt image's natural bottom edge
       (~9142fu) so the hard JPG crop is masked by the gradient apex.
       Total band height ≈ 700fu — shorter than desktop's 982fu but
       proportional to the shorter mobile dirt image. */
    top: calc(8790 * var(--fu));
    left: 0;
    width: 100%;
    height: calc(700 * var(--fu));
    background: linear-gradient(
      to bottom,
      rgba(63, 52, 44, 0) 0%,
      var(--c-dirt) 50%,
      rgba(30, 47, 109, 0) 100%
    );
    pointer-events: none;
    z-index: 9;
  }
  .goals-mountain-l {
    /* Mobile design uses Group 61 3 inside the apply section, so hide
       the desktop goals-mountain on mobile. */
    display: none;
  }

  /* ============= APPLY (KAD + KĀ bubbles + button) ============= */
  .apply-title-wrap {
    top: calc(9676 * var(--fu));
    left: calc(270 * var(--fu));
    width: calc(540 * var(--fu));
    height: calc(174 * var(--fu));
  }
  .apply-title {
    top: 0;
    font-size: calc(85 * var(--fu));
  }
  .apply-title-sub {
    display: block;
    /* Sits just under "Pieteikšanās konkursam" (apply-title is 2 lines
       at 85fu × line-height 1.15 ≈ 195fu tall, plus a small gap). */
    top: calc(215 * var(--fu));
    width: 100%;
    font-size: calc(28 * var(--fu));
  }
  /* Two decorative sparkles flanking the apply title on mobile —
     mirroring the design's sparkle pattern in earlier sections. */
  .sparkle-6 {
    display: block;
    /* Lifted ~20px (≈58fu @ mobile scale) and scaled +50%. */
    top: calc(9658 * var(--fu));
    left: calc(140 * var(--fu));
    width: calc(105 * var(--fu));
    height: calc(105 * var(--fu));
    transform: rotate(-15deg);
  }
  .sparkle-7 {
    display: block;
    /* Scaled +50%. */
    top: calc(9885 * var(--fu));
    left: auto;
    right: calc(180 * var(--fu));
    width: calc(120 * var(--fu));
    height: calc(120 * var(--fu));
    transform: rotate(20deg);
  }

  /* Left rocky cliff with climbing figure (Group 61 3 in Figma) —
     mobile-only, sits next to the KAD bubble extending off-screen left. */
  .apply-mountain-l-m {
    display: block;
    position: absolute;
    top: calc(10000 * var(--fu));
    left: calc(-34 * var(--fu));
    width: calc(311 * var(--fu));
    height: calc(818 * var(--fu));
    pointer-events: none;
    z-index: 4;
  }

  /* Mountains framing the apply section */
  .apply-mountain-r {
    /* Repositioned mobile-right (Group 61 4) */
    top: calc(10495 * var(--fu));
    left: auto;
    right: calc(-188 * var(--fu));
    width: calc(501 * var(--fu));
    height: calc(1102 * var(--fu));
  }

  /* Repurpose the desktop goals-mountain-l visibility — but mobile
     wants a left mountain in the apply section instead. We add it
     via the apply-mountain-r styling extended below. */
  .apply-bubble--kad {
    top: calc(10127 * var(--fu));
    left: calc(343 * var(--fu));
    width: calc(395 * var(--fu));
    height: calc(255 * var(--fu));
  }
  .apply-bubble--kad .apply-bubble__heading {
    top: calc(20 * var(--fu));
    font-size: calc(40 * var(--fu));
  }
  .apply-bubble--kad .apply-bubble__body {
    top: calc(132 * var(--fu));
    width: calc(320 * var(--fu));
    font-size: calc(28 * var(--fu));
  }

  .apply-bubble--ka {
    top: calc(10532 * var(--fu));
    left: calc(343 * var(--fu));
    width: calc(395 * var(--fu));
    height: calc(521 * var(--fu));
  }
  .apply-bubble--ka .apply-bubble__heading {
    top: calc(20 * var(--fu));
    font-size: calc(40 * var(--fu));
  }
  .apply-bubble--ka .apply-bubble__body--elek {
    top: calc(168 * var(--fu));
    width: calc(289 * var(--fu));
    font-size: calc(28 * var(--fu));
    line-height: 1.25;
  }
  .apply-bubble--ka .apply-bubble__body--klat {
    top: calc(323 * var(--fu));
    width: calc(289 * var(--fu));
    font-size: calc(28 * var(--fu));
    line-height: 1.25;
  }
  /* Use the same small arrows as the program-list bullets (white).
     Vertically nudge to sit on the cap-height of the underlined word. */
  .apply-bullet {
    width: calc(27 * var(--fu));
    height: calc(18 * var(--fu));
    margin-right: calc(10 * var(--fu));
    vertical-align: calc(2 * var(--fu));
  }

  /* Big main apply button */
  .btn-apply--main {
    top: calc(11307 * var(--fu));
    left: calc(229 * var(--fu));
    width: calc(622 * var(--fu));
    height: calc(136 * var(--fu));
  }
  .btn-apply--main span {
    font-size: calc(80 * var(--fu));
    text-shadow: var(--text-glow);
  }
  /* Mobile-only Makonis 6: large cloud lying around the left edge
     between Piesakies! and Uzņemšanas kārtība, partially cut off-screen. */
  .apply-makonis-6-m {
    display: block;
    position: absolute;
    top: calc(11600 * var(--fu));
    left: calc(-120 * var(--fu));
    width: calc(450 * var(--fu));
    height: calc(389 * var(--fu));
    pointer-events: none;
    z-index: 4;
    animation: cloud-float-b 22s ease-in-out infinite;
  }

  /* ============= ADMISSIONS ============= */
  .apply-admissions-band {
    /* The desktop fade band doesn't fit mobile heights — replace with
       a simple mobile-sized blue area via background only. */
    top: calc(11600 * var(--fu));
    left: 0;
    width: 100vw;
    height: calc(2740 * var(--fu));
    background: linear-gradient(
      to bottom,
      rgba(21, 35, 77, 0) 0%,
      #15234d 15%,
      #3653c3 35%,
      #1a285d 100%
    );
  }
  .adm-title {
    top: calc(12030 * var(--fu));
    left: calc(279 * var(--fu));
    width: calc(545 * var(--fu));
    font-size: calc(85 * var(--fu));
  }
  .adm-criteria {
    top: calc(12397 * var(--fu));
    left: calc(268 * var(--fu));
    width: calc(543 * var(--fu));
    height: calc(435 * var(--fu));
    padding-top: calc(60 * var(--fu));
  }
  .adm-criteria-title {
    font-size: calc(48 * var(--fu));
    width: calc(257 * var(--fu));
    margin-bottom: calc(40 * var(--fu));
  }
  .adm-criteria p {
    font-size: calc(30 * var(--fu));
    width: calc(417 * var(--fu));
    margin-top: calc(29 * var(--fu)); /* ~10px @ mobile scale */
  }
  .adm-label--vairak {
    top: calc(13181 * var(--fu));
    left: calc(157 * var(--fu));
    width: calc(360 * var(--fu));
    font-size: calc(50 * var(--fu));
  }
  .adm-label--phone {
    top: calc(13181 * var(--fu));
    left: calc(571 * var(--fu));
    width: calc(360 * var(--fu));
    font-size: calc(50 * var(--fu));
  }
  .btn-link--web {
    top: calc(13326 * var(--fu));
    left: calc(157 * var(--fu));
    width: calc(360 * var(--fu));
    height: calc(79 * var(--fu));
  }
  .btn-link--phone {
    top: calc(13326 * var(--fu));
    left: calc(571 * var(--fu));
    width: calc(360 * var(--fu));
    height: calc(79 * var(--fu));
  }
  .btn-link span {
    font-size: calc(40 * var(--fu));
  }

  /* Admissions clouds */
  /* Mobile sizing for the new edge cloud assets — keeps natural
     ~1.18 aspect ratio of makonis-edge-l/r. */
  .adm-cloud-l {
    top: calc(12840 * var(--fu));
    left: calc(-180 * var(--fu));
    width: calc(540 * var(--fu));
    height: calc(455 * var(--fu));
  }
  .adm-cloud-r {
    top: calc(12246 * var(--fu));
    left: auto;
    right: calc(-180 * var(--fu));
    width: calc(540 * var(--fu));
    height: calc(458 * var(--fu));
  }
  .adm-cloud-bottom-1 {
    top: calc(14105 * var(--fu));
    left: calc(45 * var(--fu));
    width: calc(237 * var(--fu));
    height: calc(161 * var(--fu));
  }
  .adm-cloud-bottom-2 {
    top: calc(13404 * var(--fu));
    left: calc(1387 * var(--fu));
    width: calc(668 * var(--fu));
    height: calc(454 * var(--fu));
  }

  /* Admissions girl */
  .adm-rope-figure {
    top: calc(13463 * var(--fu)); /* nudged ~10px down from original */
    left: calc(-492 * var(--fu));
    width: calc(1449 * var(--fu));
    height: calc(1127 * var(--fu));
  }
  /* Mobile-only Makonis 10: cloud sitting on the right edge above the
     rope+figure (lady) area, partially cut off-screen. Natural aspect
     ratio of the asset (~0.756) preserved. */
  .adm-makonis-10-m {
    display: block;
    position: absolute;
    top: calc(13320 * var(--fu));
    left: auto;
    right: calc(-42 * var(--fu));
    width: calc(400 * var(--fu));
    height: calc(529 * var(--fu));
    pointer-events: none;
    z-index: 4;
    animation: cloud-float-b 26s ease-in-out infinite;
  }

  /* Admissions sparkles — repositioned per mobile design */
  .adm-sp-1 { top: calc(12172 * var(--fu)); left: calc(842 * var(--fu)); width: calc(108 * var(--fu)); height: calc(106 * var(--fu)); }
  .adm-sp-2 { top: calc(12758 * var(--fu)); left: calc(238 * var(--fu)); width: calc( 80 * var(--fu)); height: calc( 82 * var(--fu)); }
  .adm-sp-3 { top: calc(13434 * var(--fu)); left: calc(165 * var(--fu)); width: calc( 99 * var(--fu)); height: calc(100 * var(--fu)); }
  .adm-sp-4 { top: calc(12848 * var(--fu)); left: calc(858 * var(--fu)); width: calc( 69 * var(--fu)); height: calc( 69 * var(--fu)); }
  .adm-sp-5 { top: calc(12309 * var(--fu)); left: calc(306 * var(--fu)); width: calc( 69 * var(--fu)); height: calc( 69 * var(--fu)); }
  .adm-sp-6 { top: calc(13597 * var(--fu)); left: calc(391 * var(--fu)); width: calc( 69 * var(--fu)); height: calc( 69 * var(--fu)); }
  .adm-sp-7 { top: calc(13084 * var(--fu)); left: calc(748 * var(--fu)); width: calc( 41 * var(--fu)); height: calc( 43 * var(--fu)); }
  .adm-sp-8 { top: calc(12987 * var(--fu)); left: calc(530 * var(--fu)); width: calc( 38 * var(--fu)); height: calc( 39 * var(--fu)); }
  .adm-sp-9 { top: calc(13218 * var(--fu)); left: calc(587 * var(--fu)); width: calc( 69 * var(--fu)); height: calc( 69 * var(--fu)); }
}

/* ============================================================
   Mobile-only: hero-mobile-bg.png bakes in cliffs, horse,
   rope+figure, glowing climbers, grass, butterflies, petals
   AND clouds. Hide every per-element layer on mobile so they
   don't double up on top of the unified bg.
   Placed at the very end so it wins over the per-element
   display rules above (display:block / display:flex set in
   the mobile-only positioning blocks earlier in this file).
   ============================================================ */
@media (max-width: 768px) {
  .hero-klints-l,
  .hero-klints-r,
  .hero-horse-wrap,
  .hero-rope-figure,
  .hero-grass-back-m,
  .hero-grass-front-m,
  .hero-clouds-right-m,
  .hero-makonis-m,
  .hero-makonis-2-m,
  .hero-makonis-3-m,
  .deco--butterfly,
  .deco--petal {
    display: none;
  }
}

/* ============================================================
   Mobile-only: why-bg-mobile.png (Group 81, 1080×1532) bakes in
   grass hill, climbing figure, butterflies AND clouds. Position
   it under the bubbles and hide every per-element layer.
   ============================================================ */
@media (max-width: 768px) {
  .why-bg {
    top: calc(500 * var(--fu));
    height: calc(1532 * var(--fu));
  }
  .why-grass-l,
  .why-fade-band,
  .why-cloud-1,
  .why-cloud-2,
  .why-cloud-small,
  .why-butterfly-1,
  .why-butterfly-2,
  .why-makonis-m,
  .why-makonis-2-m,
  .why-makonis-3-m,
  .why-makonis-4-m,
  .why-grad-1-m,
  .why-grad-2-m {
    display: none;
  }
}


/* Mobile positioning for the two-piece transition. why-bg ends at
   top:500 + height:1532 = 2032fu on mobile.
   Image natural ratios: top 3662×675 → 1080×199, bottom 3662×707 → 1080×209. */
@media (max-width: 768px) {
  .why-fade-top {
    top: calc((2032 - 199) * var(--fu));
    height: calc(199 * var(--fu));
  }
  .why-fade-bottom {
    /* Mobile-specific asset (1080×258 native) — natural aspect at full
       width gives 258fu tall, no stretching. -1px start mirrors the
       desktop overlap that hides the thin blue seam between the two
       fade PNGs (alpha=254 edges, slightly mismatched grass colours). */
    top: calc(2032 * var(--fu) - 1px);
    height: calc(258 * var(--fu));
  }
}