/* Reduce padding on smaller screens */
@media (max-width: 1024px){
  .hero-columns{
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* MOBILE - Stack everything and REMOVE PADDING */
@media (max-width: 768px){
  /* Hero columns (2 columns) */
  .hero-columns{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
  }

  .hero-columns > .wp-block-column{
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Keypoints columns (3 columns) - REMOVE PADDING AND STACK */
  .keypoints-columns{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    display: flex !important;
  }

  .keypoints-columns > .wp-block-column{
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }

  .keypoints-columns .wp-block-group{
    min-width: 0 !important;
    width: 100% !important;
  }

  .keypoints-columns img{
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Desktop - Keep horizontal layout */
@media (min-width: 769px){
  .keypoints-columns{
    flex-wrap: nowrap !important;
    display: flex !important;
    flex-direction: row !important;
  }
  
  .keypoints-columns > .wp-block-column{
    flex-basis: 0 !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}


@media (max-width: 781px){
  .wp-block-navigation__responsive-container.is-menu-open{
    background: #000 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open a,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label{
    color: #fff !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
    color: #fff !important;
  }
}