/* Mobile / tablet adjustments for case-study pages */
@media (max-width: 900px){
  nav ul{display:none !important;}
  nav{padding:14px 20px !important;grid-template-columns:1fr auto !important;}
}

@media (max-width: 768px){
  /* Section rhythm */
  section{padding-left:20px !important;padding-right:20px !important;}
  section[style*="padding:50px 52px"]{padding-top:34px !important;padding-bottom:34px !important;}
  section[style*="padding:20px 52px 50px"]{padding-top:16px !important;padding-bottom:40px !important;}
  section[style*="padding:120px 52px 0"]{padding-top:92px !important;}
  section[style*="padding:56px 52px 0"]{padding-top:40px !important;}

  /* Type */
  h2[style*="font-size:36px"]{font-size:26px !important;margin-bottom:28px !important;}
  p[style*="font-size:24px"]{font-size:20px !important;}
  p[style*="font-size:18px"], ul[style*="font-size:18px"]{font-size:18px !important;}
  p[style*="font-size:22px"]{font-size:18px !important;}

  /* Image frames */
  div[style*="border-radius:8px"][style*="padding:40px"],
  div[style*="border-radius:8px"][style*="padding:48px"],
  div[style*="border-radius:8px"][style*="padding:32px"],
  div[style*="border-radius:8px"][style*="padding:24px"]{padding:0 !important;background:transparent !important;border:none !important;box-shadow:none !important;border-radius:0 !important;margin-bottom:10px !important;}
  p[style*="margin:42px 0 0"],p[style*="margin-top:42px"]{margin-top:18px !important;}

  /* Prev / next footer */
  .cs-pn{padding:24px 20px !important;gap:6px !important;}
  .cs-pn-title{font-size:20px !important;}

  /* Grouped images become a swipeable carousel */
  .cs-carousel{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    gap:20px !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cs-carousel::-webkit-scrollbar{display:none;}
  .cs-carousel > *{
    flex:0 0 62% !important;
    width:62% !important;
    max-width:62% !important;
    min-width:0 !important;
    scroll-snap-align:center;
  }
  .cs-carousel > img,
  .cs-carousel > * img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    display:block !important;
    margin:0 !important;
    border:none !important;
  }
  .cs-carousel > * p{
    font-size:16px !important;
    line-height:1.5 !important;
    text-align:left !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .cs-carousel > *{text-align:left !important;}
  .cs-carousel > * img{margin-left:0 !important;margin-right:0 !important;}
  .cs-swipe-hint{
    font-family:Barlow,sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(17,17,17,0.4);
    text-align:center;
    margin:8px 0 0;
  }
}

@media (max-width: 1024px){
  .mhr-card-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width: 640px){
  .mhr-card-grid{grid-template-columns:1fr !important;row-gap:10px !important;column-gap:10px !important;}
}
@media (max-width: 768px){
  .cs-carousel{background:transparent !important;padding:0 0 22px !important;}
  div[style*="border-radius:8px"][style*="padding:40px"].cs-carousel{background:transparent !important;padding:0 0 22px !important;}
}

@media (min-width: 769px){
  .cs-swipe-hint{display:none;}
}

/* Headlines: hard-coded line breaks are set for desktop measure. On a phone they
   land mid-phrase, so let the text flow and balance the lines instead. */
@media (max-width: 768px){
  h1 br.hl-br, h2 br.hl-br, h3 br.hl-br{display:none;}
  h1, h2{text-wrap:balance;}
}

/* Video: while paused on a phone, put the play control in the middle of the
   poster frame where it reads as an invitation; it returns to the corner
   once playing so it isn't sitting over the picture. */
@media (max-width: 900px){
  #wb-play-btn.wb-paused{
    top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;
    transform:translate(-50%,-50%) !important;
    width:64px !important;height:64px !important;
    background:rgba(0,0,0,0.55) !important;
  }
  #wb-play-btn.wb-paused svg{width:22px !important;height:22px !important;}
}