/* v47 — targeted visual fixes only. */

/* 1) Mobile hero: raise the people layer a bit and keep the bottom crop hidden under the wave. */
@media (max-width: 780px){
  body:not(.vision-mode) .hero-people{
    height:228px !important;
    margin:-20px auto -4px !important;
    transform:translateY(8px) !important;
  }
  body:not(.vision-mode) .hero-people__halo{
    bottom:-76px !important;
  }
  body:not(.vision-mode) .hero-person--one{ --person-bottom:-44px !important; }
  body:not(.vision-mode) .hero-person--two{ --person-bottom:-46px !important; }
  body:not(.vision-mode) .hero-person--three{ --person-bottom:-48px !important; }
  body:not(.vision-mode) .hero-person--four{ --person-bottom:-46px !important; }
  body:not(.vision-mode) .ref-hero::after{
    bottom:-22px !important;
    height:92px !important;
  }
}
@media (max-width: 430px){
  body:not(.vision-mode) .hero-people{
    height:216px !important;
    margin-top:-22px !important;
    transform:translateY(10px) !important;
  }
}

/* 2) Feature wheel on mobile: prevent the central circle from colliding with top card icons. */
@media (max-width: 760px){
  .ref-feature-wheel{
    padding-top:206px !important;
    gap:16px !important;
  }
  .ref-feature-wheel__photo{
    width:168px !important;
    height:168px !important;
    top:4px !important;
  }
  .ref-mini-card{
    padding-top:34px !important;
    min-height:126px !important;
  }
  .ref-mini-card img{
    width:40px !important;
    height:40px !important;
    margin:-26px auto 8px !important;
  }
}
@media (max-width: 760px){
  body.vision-mode .ref-feature-wheel__photo{
    width:210px !important;
    height:210px !important;
    margin-bottom:28px !important;
  }
  body.vision-mode .ref-mini-card{
    padding-top:28px !important;
  }
  body.vision-mode .ref-mini-card img{
    margin:-20px auto 10px !important;
  }
}

/* 3) Shift cards on small screens: center dates and keep all price/date text inside cards. */
@media (max-width: 760px){
  .shared-shifts .ref-shift{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "title"
      "price"
      "dates"
      "status" !important;
    gap:8px !important;
    align-items:start !important;
    padding:18px 16px !important;
    overflow:hidden !important;
    text-align:center !important;
  }
  .shared-shifts .ref-shift > div:first-child{display:contents !important;}
  .shared-shifts .ref-shift h3{
    grid-area:title !important;
    justify-self:center !important;
    text-align:center !important;
  }
  .shared-shifts .ref-shift__price{
    grid-area:price !important;
    justify-self:center !important;
    width:100% !important;
    text-align:center !important;
  }
  .shared-shifts .ref-shift__price strong{
    display:block !important;
    width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    font-size:clamp(18px, 8.8vw, 24px) !important;
    line-height:1.08 !important;
  }
  .shared-shifts .ref-shift__price del{
    display:block !important;
    margin-top:3px !important;
    text-align:center !important;
    font-size:clamp(12px, 4.5vw, 15px) !important;
  }
  .shared-shifts .ref-shift__dates{
    grid-area:dates !important;
    width:100% !important;
    margin:4px 0 0 !important;
    text-align:center !important;
    justify-self:center !important;
    white-space:normal !important;
    font-size:clamp(15px, 4.6vw, 19px) !important;
    line-height:1.25 !important;
  }
  .shared-shifts .status{
    grid-area:status !important;
    justify-self:center !important;
    margin-top:4px !important;
    text-align:center !important;
    max-width:100% !important;
  }
}
@media (max-width: 390px){
  .shared-shifts .ref-shift{
    padding:16px 12px !important;
  }
  .shared-shifts .ref-shift h3{font-size:clamp(16px, 8vw, 22px) !important;}
  .shared-shifts .ref-shift__price strong{font-size:clamp(16px, 8.6vw, 22px) !important;}
  .shared-shifts .ref-shift__dates{font-size:clamp(14px, 4.8vw, 17px) !important;}
  .shared-shifts .status{font-size:clamp(12px, 4vw, 14px) !important;}
}
@media (max-width: 760px){
  body.vision-mode .shared-shifts .ref-shift__price strong{
    font-size:clamp(22px, 8vw, 30px) !important;
  }
  body.vision-mode .shared-shifts .ref-shift__dates{
    font-size:clamp(16px, 4.8vw, 22px) !important;
  }
  body.vision-mode .shared-shifts .status{
    font-size:clamp(14px, 4vw, 18px) !important;
  }
}

/* 4) Program slider mobile dots: cleaner, sharper pagination. */
@media (max-width: 760px){
  .program-mobile-dots{
    gap:10px !important;
    min-height:14px !important;
  }
  .program-mobile-dots button{
    appearance:none !important;
    -webkit-appearance:none !important;
    width:12px !important;
    height:12px !important;
    min-width:12px !important;
    min-height:12px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:999px !important;
    box-shadow:none !important;
    transform:none !important;
    background:#bfc5db !important;
  }
  .program-mobile-dots button:nth-child(even){
    background:#85c883 !important;
  }
  .program-mobile-dots button.is-active{
    width:38px !important;
    min-width:38px !important;
    height:12px !important;
    background:#fff !important;
  }
}

/* 5) Mosaic labels: make sure long words fit instead of being cut off. */
@media (max-width: 760px){
  .ref-mosaic figcaption{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    max-width:calc(100% - 18px) !important;
    width:max-content !important;
    padding:6px 10px !important;
    font-size:12px !important;
    line-height:1.14 !important;
    text-align:center !important;
    justify-content:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
}
@media (max-width: 760px){
  body.vision-mode .ref-mosaic figcaption{
    max-width:calc(100% - 20px) !important;
    padding:6px 10px !important;
    font-size:14px !important;
    line-height:1.14 !important;
  }
}

/* 6) Accessibility mode program slider: show more image, keep only headings. */
body.vision-mode .ref-program-stage__caption p{
  display:none !important;
}
body.vision-mode .ref-program-stage__caption{
  background:rgba(0,0,0,.34) !important;
  border:1px solid rgba(255,255,255,.28) !important;
}
@media (max-width: 760px){
  body.vision-mode .ref-program-stage > img{
    height:320px !important;
  }
  body.vision-mode .ref-program-stage__caption{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    padding:10px 14px !important;
  }
  body.vision-mode .ref-program-stage__caption h3{
    font-size:clamp(21px, 6.2vw, 29px) !important;
    line-height:1.12 !important;
  }
}

/* 7) Contacts page schedule: avoid ugly wrapping on small screens and in accessibility mode. */
.office-details .schedule{
  list-style:none !important;
  padding-left:0 !important;
}
.office-details .schedule li{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:14px !important;
  align-items:start !important;
}
.office-details .schedule li span,
.office-details .schedule li strong{
  min-width:0 !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  hyphens:none !important;
}
@media (max-width: 760px){
  .office-details{
    padding:20px 16px !important;
  }
  .office-details .schedule{
    gap:10px !important;
  }
  .office-details .schedule li span,
  .office-details .schedule li strong{
    font-size:clamp(17px, 5vw, 23px) !important;
    line-height:1.35 !important;
  }
  .office-break{
    font-size:clamp(17px, 4.9vw, 23px) !important;
    line-height:1.4 !important;
    text-align:center !important;
  }
}
@media (max-width: 760px){
  body.vision-mode .office-details h1,
  body.vision-mode .office-details h2{
    line-height:1.1 !important;
  }
  body.vision-mode .office-details .schedule li span,
  body.vision-mode .office-details .schedule li strong{
    font-size:clamp(17px, 4.6vw, 22px) !important;
    line-height:1.35 !important;
  }
  body.vision-mode .office-break{
    font-size:clamp(17px, 4.6vw, 22px) !important;
  }
}