/* =========================================================
   V12 — mobile-first polish. Desktop styles intentionally unchanged.
   ========================================================= */

.ref-shift__dates-mobile{display:none}
.program-mobile-controls{display:none}

@media (max-width:780px){
  :root{--mobile-gutter:18px;--mobile-max:520px}

  /* One consistent content rail on every mobile page. */
  .container{
    width:min(calc(100% - (var(--mobile-gutter) * 2)),var(--mobile-max))!important;
    max-width:var(--mobile-max)!important;
    margin-inline:auto!important;
  }
  .ref-hero__inner{width:min(calc(100% - (var(--mobile-gutter) * 2)),var(--mobile-max))!important}

  /* Three equal rounded bars: blue / green / blue. */
  .menu-toggle{display:grid!important;place-content:center!important;gap:4px!important}
  .menu-toggle span,.menu-toggle::before,.menu-toggle::after{
    width:22px!important;height:3px!important;margin:0 auto!important;border-radius:999px!important;
  }
  .menu-toggle::before,.menu-toggle::after{background:#4d5dfa!important}
  .menu-toggle span{background:#29a71a!important}
  .menu-toggle[aria-expanded="true"]::before{transform:translateY(7px) rotate(45deg)!important}
  .menu-toggle[aria-expanded="true"]::after{transform:translateY(-7px) rotate(-45deg)!important}

  /* Mobile hero: centered message, one action, smaller photo composition. */
  .ref-hero{height:660px!important;min-height:660px!important}
  .ref-hero__inner{height:660px!important;min-height:660px!important;padding:84px 0 0!important}
  .ref-hero__copy{max-width:450px!important;margin-inline:auto!important;text-align:center!important}
  .ref-hero h1{max-width:430px!important;margin-inline:auto!important;font-size:clamp(29px,8vw,35px)!important;line-height:1.04!important;text-align:center!important}
  .ref-hero p{max-width:410px!important;margin:15px auto 0!important;font-size:13.5px!important;line-height:1.48!important;text-align:center!important}
  .ref-actions{display:flex!important;justify-content:center!important;margin-top:18px!important}
  .ref-actions .ref-button--mobile-hidden{display:none!important}
  .ref-actions .ref-button--primary-cta{width:min(235px,78vw)!important;min-height:48px!important;font-size:14px!important}
  .hero-people{height:272px!important;bottom:-4px!important}
  .hero-people__halo{left:50%!important;right:auto!important;bottom:-84px!important;width:340px!important;transform:translateX(-50%)!important}
  .hero-people[data-active="1"] .hero-people__halo,
  .hero-people[data-active="2"] .hero-people__halo,
  .hero-people[data-active="3"] .hero-people__halo,
  .hero-people[data-active="4"] .hero-people__halo{left:50%!important;width:340px!important}
  .hero-person--one{--person-width:278px!important;--person-right:calc(50% - 139px)!important;--person-bottom:-50px!important}
  .hero-person--two{--person-width:292px!important;--person-right:calc(50% - 146px)!important;--person-bottom:-52px!important}
  .hero-person--three{--person-width:203px!important;--person-right:calc(50% - 101px)!important;--person-bottom:-53px!important}
  .hero-person--four{--person-width:252px!important;--person-right:calc(50% - 126px)!important;--person-bottom:-52px!important}
  .ref-hero::after{height:86px!important}

  /* Photo labels alternate brand colors and sit in the visual center. */
  .ref-mosaic figcaption{
    left:50%!important;right:auto!important;bottom:10px!important;transform:translateX(-50%)!important;
    min-width:max-content!important;justify-content:center!important;text-align:center!important;
  }
  .ref-mosaic figure:nth-child(odd) figcaption{background:rgba(77,93,250,.92)!important}
  .ref-mosaic figure:nth-child(even) figcaption{background:rgba(41,167,26,.92)!important}

  /* Shift cards: title and price first, dates as one clean full-width line. */
  .ref-shift{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"title price" "dates dates" "status status"!important;
    gap:8px 12px!important;align-items:center!important;padding:17px 16px!important;
  }
  .ref-shift>div:first-child{display:contents!important}
  .ref-shift h3{grid-area:title!important;margin:0!important;font-size:18px!important;line-height:1.12!important}
  .ref-shift__dates{grid-area:dates!important;margin:1px 0 0!important;padding:8px 10px!important;border-radius:12px!important;background:#f5f6fb!important;font-size:11.5px!important;font-weight:900!important;letter-spacing:.01em!important;white-space:nowrap!important;text-align:center!important}
  .ref-shift__dates-desktop{display:none!important}.ref-shift__dates-mobile{display:block!important}
  .ref-shift .status{grid-area:status!important;justify-self:start!important;margin:1px 0 0!important}
  .ref-shift__price{grid-area:price!important;text-align:right!important;align-self:start!important}
  .ref-shift__price strong{font-size:clamp(19px,5.8vw,25px)!important;line-height:1.05!important}
  .ref-shift__price del{margin-top:5px!important;font-size:11px!important}

  /* Mobile program becomes a classic image slider. Desktop tabs stay intact. */
  .ref-program-tabs{display:none!important}
  .ref-program-card{padding:8px!important}
  .ref-program-stage>img{height:300px!important;min-height:300px!important}
  .ref-program-stage__caption{padding:14px 15px!important}
  .program-mobile-controls{
    display:grid!important;grid-template-columns:44px 1fr 44px!important;align-items:center!important;gap:12px!important;
    width:min(300px,100%)!important;margin:14px auto 3px!important;
  }
  .program-mobile-arrow{
    display:grid!important;place-items:center!important;width:44px!important;height:44px!important;padding:0!important;border:0!important;border-radius:15px!important;
    background:#fff!important;color:#15171d!important;box-shadow:0 9px 22px rgba(13,21,69,.18)!important;font:900 23px/1 'Nunito',sans-serif!important;cursor:pointer!important;
  }
  .program-mobile-arrow--next{color:#29a71a!important}.program-mobile-arrow--prev{color:#4d5dfa!important}
  .program-mobile-dots{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
  .program-mobile-dots button{
    width:9px!important;height:9px!important;padding:0!important;border:0!important;border-radius:999px!important;background:rgba(255,255,255,.5)!important;box-shadow:0 0 0 1px rgba(255,255,255,.3)!important;transition:width .22s ease,background .22s ease!important;
  }
  .program-mobile-dots button:nth-child(even){background:rgba(126,224,118,.75)!important}
  .program-mobile-dots button.is-active{width:28px!important;background:#fff!important}

  /* Contacts: information first, route action second, socials next. */
  .contact-section>.container{display:flex!important;flex-direction:column!important;gap:16px!important}
  .contact-office-card{order:1!important;display:flex!important;flex-direction:column!important;padding:0!important;background:transparent!important;box-shadow:none!important}
  .office-details{order:1!important;padding:22px 18px!important;border-radius:24px!important;background:#fff!important;box-shadow:0 14px 35px rgba(22,31,85,.1)!important;text-align:center!important}
  .office-details h1,.office-details h2{text-align:center!important}
  .office-details>p{text-align:center!important}
  .office-details .schedule{max-width:360px!important;margin-inline:auto!important;text-align:left!important}
  .contact-map-wrap{order:2!important;min-height:0!important;margin-top:12px!important;padding:0!important;background:transparent!important;box-shadow:none!important}
  .contact-map-wrap .contact-map{display:none!important}
  .contact-route-button{
    display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:58px!important;margin:0!important;padding:13px 18px!important;
    border:3px solid transparent!important;border-radius:19px!important;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#4d5dfa,#29a71a) border-box!important;
    color:#15171d!important;box-shadow:0 12px 28px rgba(35,52,130,.12)!important;font-size:13px!important;font-weight:900!important;text-align:center!important;
  }
  .contact-route-button::before{content:"⌖";display:grid;place-items:center;width:32px;height:32px;margin-right:10px;border-radius:11px;background:#4d5dfa;color:#fff;font-size:20px}
  .contact-social-card{order:2!important;text-align:center!important}
  .contact-social-copy{text-align:center!important}.contact-social-copy p{margin-inline:auto!important}
  .contact-camp-card{order:3!important}

  /* Mobile menu contacts: readable rows and clear MAX/VK actions. */
  .mobile-menu-contact{padding-top:18px!important}
  .mobile-menu-contact>strong{margin-bottom:10px!important;font-size:14px!important}
  .mobile-menu-contact__row{display:flex!important;align-items:center!important;gap:9px!important;margin-top:8px!important;color:#4d5dfa!important;font-size:13px!important;font-weight:900!important}
  .mobile-menu-contact__row img{width:19px!important;height:19px!important;object-fit:contain!important}
  .mobile-menu-contact__actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin-top:15px!important}
  .mobile-menu-contact__action{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:46px!important;margin:0!important;padding:9px 8px!important;border-radius:15px!important;font-size:11px!important;font-weight:900!important;text-align:center!important}
  .mobile-menu-contact__action img{width:23px!important;height:23px!important;object-fit:contain!important}
  .mobile-menu-contact__action--max{background:#4d5dfa!important;color:#fff!important}
  .mobile-menu-contact__action--vk{background:#eef2ff!important;color:#315bef!important}

  /* Cards and controls always respect the same mobile rail. */
  .ref-large-card,.ref-program-card,.contact-social-card,.contact-camp-card,.parents-card,.album-card,.faq-item{max-width:100%!important}
}

@media (max-width:390px){
  :root{--mobile-gutter:15px}
  .ref-hero{height:650px!important;min-height:650px!important}.ref-hero__inner{height:650px!important;min-height:650px!important}
  .ref-hero h1{font-size:28px!important}.ref-hero p{font-size:12.8px!important}
  .hero-people{height:260px!important}
  .ref-shift{grid-template-columns:1fr!important;grid-template-areas:"title" "price" "dates" "status"!important}
  .ref-shift__price{text-align:left!important}
  .ref-shift__dates{text-align:left!important}
}