/*
* WESAC Coming Soon — responsive tweaks
*/

@media (max-width:1100px){
  /* hero stacks to one column (grid already changes in layout.css) */
  .hero-media{ justify-content:center; min-height:320px }
  .hero-img{ max-height:480px }
}

@media (max-width:780px){
  .brand-row{ gap:12px }
  .badge{ font-size:11px; padding:4px 10px }
  .title{ font-size: clamp(30px,5.6vw,46px) }
  .kicker{ font-size:15px }
  .countDownClock .container{ width:520px; max-width:100% }
  .countDownClock .flip{ margin:3px; width:46px; height:64px; font-size:46px; line-height:64px; border-radius:5px }
  .countDownClock .sepr{ margin-right:12px }
  .countDownClock .hourPlay:after,
  .countDownClock .minutePlay:after,
  .countDownClock .secondPlay:after,
  .countDownClock .day-container:after{ font-size:12px }
}

@media (max-width:520px){
  .countDownClock .container{ width:440px; max-width:100% }
  .countDownClock .flip{ width:40px; height:56px; font-size:40px; line-height:56px; margin:2px }
  .countDownClock .sepr{ margin-right:8px }
}

@media (max-width:400px){
  .badge{ display:block; margin-top:6px }
  .countDownClock .container{ width:380px; max-width:100% }
  .countDownClock .flip{ width:36px; height:50px; font-size:36px; line-height:50px }
}