/* =========================================================
   V13 — responsive stability from phones through 1020px.
   Keeps the finished desktop design intact above 1020px.
   ========================================================= */

/* Parents: make the document pack the first thing visitors see. */
@media (min-width:1021px){
  .parents-column--right{order:-1}
}

/* The route control uses a clean map-pin glyph instead of a text symbol. */
.contact-route-button::before{
  content:""!important;
  flex:0 0 auto!important;
  width:34px!important;
  height:34px!important;
  margin-right:11px!important;
  border-radius:11px!important;
  background-color:#4d5dfa!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6-5.1 6-11a6 6 0 1 0-12 0c0 5.9 6 11 6 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.2'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:19px 19px!important;
  color:transparent!important;
  font-size:0!important;
}

/* ---------------------------------------------------------
   Tablet / small laptop: 781–1020px
   --------------------------------------------------------- */
@media (min-width:781px) and (max-width:1020px){
  :root{--tablet-gutter:28px}
  html,body{max-width:100%!important;overflow-x:hidden!important}
  .container{width:calc(100% - (var(--tablet-gutter) * 2))!important;max-width:960px!important;margin-inline:auto!important}

  /* Header becomes a deliberate compact header instead of losing navigation. */
  .site-header{height:72px!important;min-height:72px!important;padding:8px 0!important;background:rgba(255,255,255,.97)!important;box-shadow:0 8px 24px rgba(20,30,76,.13)!important}
  .header-inner{height:56px!important;min-height:56px!important;padding:0 12px!important;border-radius:28px!important;background:#fff!important}
  .brand{display:flex!important;align-items:center!important;flex:1 1 auto!important;height:50px!important;padding:0!important;background:transparent!important}
  .brand img{width:104px!important;height:auto!important}
  .desktop-nav,.header-socials{display:none!important}
  .menu-toggle{display:grid!important;place-content:center!important;gap:5px!important;flex:0 0 46px!important;width:46px!important;height:46px!important;margin-left:auto!important;border-radius:15px!important;background:#fff!important;box-shadow:0 7px 18px rgba(27,38,91,.13)!important}
  .menu-toggle span,.menu-toggle::before,.menu-toggle::after{width:23px!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}
  .mobile-menu{width:min(390px,82vw)!important}

  /* Tablet hero: two balanced columns with every cutout clipped inside the hero. */
  .ref-hero{height:650px!important;min-height:650px!important}
  .ref-hero__inner{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(300px,.78fr)!important;gap:18px!important;height:650px!important;min-height:650px!important;padding:92px 0 58px!important}
  .ref-hero__copy{max-width:510px!important;align-self:center!important}
  .ref-hero h1{font-size:clamp(38px,5vw,48px)!important;line-height:1.02!important}
  .ref-hero p{max-width:500px!important;margin-top:18px!important;font-size:15px!important;line-height:1.48!important}
  .ref-actions{gap:16px!important;margin-top:23px!important}
  .ref-actions .ref-button{min-width:0!important;padding:13px 25px!important;font-size:14px!important}
  .hero-people{position:relative!important;right:auto!important;bottom:auto!important;left:auto!important;height:auto!important;min-height:500px!important;align-self:stretch!important;overflow:hidden!important}
  .hero-people__stage{overflow:hidden!important}
  .hero-people__halo{left:52%!important;right:auto!important;bottom:-56px!important;width:500px!important;transform:translateX(-50%)!important}
  .hero-person--one{--person-width:360px!important;--person-right:calc(50% - 180px)!important;--person-bottom:-46px!important}
  .hero-person--two{--person-width:370px!important;--person-right:calc(50% - 185px)!important;--person-bottom:-49px!important}
  .hero-person--three{--person-width:270px!important;--person-right:calc(50% - 135px)!important;--person-bottom:-50px!important}
  .hero-person--four{--person-width:330px!important;--person-right:calc(50% - 165px)!important;--person-bottom:-50px!important}
  .ref-hero::after{height:105px!important;left:-8%!important;right:-8%!important;bottom:-55px!important}

  /* Welcome wheel: no absolute cards can escape at 800–1000px. */
  .ref-feature-wheel{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;width:100%!important;height:auto!important;margin:24px auto 42px!important;padding-top:225px!important}
  .ref-feature-wheel__photo{top:0!important;left:50%!important;width:195px!important;height:195px!important;transform:translateX(-50%)!important}
  .ref-mini-card,.ref-mini-card--one,.ref-mini-card--two,.ref-mini-card--three,.ref-mini-card--four,.ref-mini-card--five,.ref-mini-card.wow,.ref-mini-card.animated{
    position:relative!important;inset:auto!important;width:auto!important;min-width:0!important;min-height:116px!important;margin:0!important;padding:29px 14px 15px!important;transform:none!important;border-radius:20px!important;text-align:center!important
  }
  .ref-mini-card--one{grid-column:1!important}.ref-mini-card--two{grid-column:2!important}.ref-mini-card--three{grid-column:1!important}.ref-mini-card--four{grid-column:2!important}.ref-mini-card--five{grid-column:1/-1!important;width:calc(50% - 8px)!important;justify-self:center!important}
  .ref-mini-card img{width:46px!important;height:46px!important;margin:-51px auto 9px!important}
  .ref-mini-card h3{font-size:15px!important}.ref-mini-card p{font-size:11.5px!important}

  /* About / photo mosaics remain contained. */
  .ref-about-card{width:100%!important;padding:30px!important}
  .ref-mosaic{grid-template-columns:1.2fr .9fr .9fr!important;grid-template-rows:155px 155px 155px!important;gap:10px!important;margin-top:26px!important}
  .ref-mosaic img{max-width:100%!important}

  /* Shift cards cannot collide around 900px. */
  .ref-shifts-card{width:min(760px,100%)!important;padding:30px 34px!important}
  .ref-shift{grid-template-columns:minmax(0,1fr) minmax(220px,auto)!important;gap:16px!important;padding:18px 10px!important}
  .ref-shift>div:first-child{min-width:0!important}
  .ref-shift h3{font-size:22px!important}
  .ref-shift p{font-size:13px!important}
  .ref-shift__price{min-width:0!important;text-align:right!important}
  .ref-shift__price strong{font-size:clamp(24px,3.5vw,31px)!important;white-space:nowrap!important}
  .ref-shift__price del{font-size:13px!important}

  /* Tablet program tabs fit without sprawling off the card. */
  .ref-program-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;padding:10px!important}
  .ref-program-tab{min-width:0!important;padding:9px 10px!important;font-size:12px!important;white-space:normal!important}
  .ref-program-tab:nth-child(4),.ref-program-tab:nth-child(5){grid-column:auto!important}
  .ref-program-stage>img{height:430px!important;min-height:430px!important}

  /* Main content grids never exceed the viewport. */
  .camp-moments,.territory-community-v9,.contact-social-card,.contact-office-card,.contact-camp-card{max-width:100%!important}
  .camp-moments{grid-template-columns:1fr!important}
  .camp-moments__gallery{min-height:390px!important}
  .territory-community-v9__gallery{grid-template-columns:1.15fr .85fr!important;grid-template-rows:250px 180px!important}

  /* Internal page cards and contacts. */
  body:not(:has(.reference-home)) .page-hero,.trip-body .page-hero,.archive-body .page-hero,.contacts-page .page-hero{padding-top:96px!important}
  .contact-office-card,.contact-camp-card{grid-template-columns:1fr!important}
  .contact-map-wrap,.camp-map-wrap{min-height:360px!important}
  .contact-map{height:360px!important;min-height:360px!important}
  .contact-social-card{grid-template-columns:1fr!important;width:min(760px,100%)!important}
  .contact-social-links{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .contact-social-link{min-width:0!important}
  .contact-social-link img{width:44px!important;height:44px!important}

  /* Parents: document card comes first at tablet widths too. */
  .parents-columns{display:grid!important;grid-template-columns:1fr 1fr!important;gap:22px!important}
  .parents-column{display:contents!important}
  .parents-card--documents{order:1!important}.parents-card--company{order:2!important}.parents-card--arrival{order:3!important}.parents-card--warning{order:4!important}.parents-card--take{order:5!important}.parents-card--listen{order:6!important}
  .parents-card{min-width:0!important;min-height:0!important;padding:25px!important}
}

/* ---------------------------------------------------------
   Phones — refinements on top of V11/V12 mobile composition.
   --------------------------------------------------------- */
@media (max-width:780px){
  /* The hero is shorter and the people begin sooner, removing dead air. */
  .ref-hero{height:615px!important;min-height:615px!important}
  .ref-hero__inner{height:615px!important;min-height:615px!important;padding-top:78px!important}
  .ref-hero__copy{max-width:430px!important}
  .ref-hero h1{font-size:clamp(27px,7.6vw,34px)!important}
  .ref-hero p{margin-top:13px!important;font-size:13px!important;line-height:1.43!important}
  .ref-actions{margin-top:15px!important}
  .hero-people{height:255px!important;bottom:0!important}
  .hero-people__halo{bottom:-72px!important;width:330px!important}
  .hero-person--one{--person-width:270px!important;--person-right:calc(50% - 135px)!important;--person-bottom:-48px!important}
  .hero-person--two{--person-width:278px!important;--person-right:calc(50% - 139px)!important;--person-bottom:-50px!important}
  .hero-person--three{--person-width:194px!important;--person-right:calc(50% - 97px)!important;--person-bottom:-50px!important}
  .hero-person--four{--person-width:238px!important;--person-right:calc(50% - 119px)!important;--person-bottom:-50px!important}
  .ref-hero::after{height:78px!important}

  /* A tighter welcome wheel avoids large blank space between photo and cards. */
  .ref-feature-wheel{margin-top:12px!important;margin-bottom:22px!important;padding-top:124px!important;gap:9px!important}
  .ref-feature-wheel__photo{width:116px!important;height:116px!important}
  .ref-mini-card,.ref-mini-card--one,.ref-mini-card--two,.ref-mini-card--three,.ref-mini-card--four,.ref-mini-card--five{min-height:96px!important;padding:24px 9px 11px!important}
  .ref-mini-card img{width:38px!important;height:38px!important;margin:-43px auto 7px!important}
  .ref-mini-card h3{font-size:13px!important}.ref-mini-card p{font-size:10.5px!important}

  /* Program: bold, obvious brand-colour arrow controls. */
  .program-mobile-controls{grid-template-columns:52px 1fr 52px!important;width:min(330px,100%)!important;gap:12px!important;margin-top:13px!important}
  .program-mobile-arrow{width:52px!important;height:52px!important;border-radius:16px!important;color:#fff!important;font-size:0!important;box-shadow:0 10px 24px rgba(13,21,69,.2)!important}
  .program-mobile-arrow::before{display:block!important;color:#fff!important;font-size:38px!important;font-weight:900!important;line-height:.8!important;transform:translateY(-2px)!important}
  .program-mobile-arrow--prev{background:#4d5dfa!important}.program-mobile-arrow--prev::before{content:"‹"!important}
  .program-mobile-arrow--next{background:#29a71a!important}.program-mobile-arrow--next::before{content:"›"!important}
  .program-mobile-dots{gap:9px!important}
  .program-mobile-dots button{width:10px!important;height:10px!important}.program-mobile-dots button.is-active{width:30px!important}

  /* Shift cards: a clean vertical hierarchy, no title/price collision. */
  .ref-shift{
    display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"title" "price" "dates" "status"!important;
    gap:7px!important;padding:15px 15px!important;min-height:0!important;text-align:center!important
  }
  .ref-shift h3{grid-area:title!important;justify-self:center!important;font-size:18px!important;line-height:1.08!important}
  .ref-shift__price{grid-area:price!important;justify-self:center!important;text-align:center!important}
  .ref-shift__price strong{font-size:clamp(27px,8.2vw,34px)!important;line-height:1!important}
  .ref-shift__price del{margin-top:3px!important;font-size:12px!important}
  .ref-shift__dates{grid-area:dates!important;width:100%!important;margin:2px 0 0!important;padding:8px 10px!important;font-size:11px!important}
  .ref-shift .status{grid-area:status!important;justify-self:center!important;margin-top:2px!important}
  .ref-shift-list{gap:10px!important}

  /* Contact social rows share one exact X coordinate. */
  .contact-social-card{padding:16px!important}
  .contact-social-links{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .contact-social-link{
    display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;align-items:center!important;justify-content:stretch!important;
    gap:14px!important;min-height:88px!important;padding:14px 16px!important;text-align:left!important
  }
  .contact-social-link img{width:46px!important;height:46px!important;margin:0!important;justify-self:start!important}
  .contact-social-link span{min-width:0!important;text-align:left!important}
  .contact-social-link strong,.contact-social-link small{text-align:left!important}

  /* Route button is compact and the icon reads as Yandex Maps / location. */
  .contact-route-button{min-height:56px!important;padding:11px 15px!important;border-width:3px!important;font-size:12.5px!important}
  .contact-route-button::before{width:32px!important;height:32px!important;margin-right:10px!important;background-size:18px 18px!important}

  /* Parents: documents first, then the rest in an intuitive order. */
  .parents-columns{display:grid!important;grid-template-columns:1fr!important;gap:16px!important}
  .parents-column{display:contents!important}
  .parents-card--documents{order:1!important}.parents-card--company{order:2!important}.parents-card--arrival{order:3!important}.parents-card--take{order:4!important}.parents-card--warning{order:5!important}.parents-card--listen{order:6!important}
}

@media (max-width:390px){
  .ref-hero{height:600px!important;min-height:600px!important}.ref-hero__inner{height:600px!important;min-height:600px!important}
  .ref-hero h1{font-size:27px!important}.ref-hero p{font-size:12.4px!important}
  .hero-people{height:242px!important}
  .ref-shift__price strong{font-size:29px!important}
  .contact-social-link{grid-template-columns:44px minmax(0,1fr)!important;padding:13px!important}.contact-social-link img{width:42px!important;height:42px!important}
}