/* NBCA mobile header compact */
@media (max-width: 600px){

  /* Target the actual logo file */
  img[src*="NBCA-Logo-Website"]{
    max-width:56px !important;   /* try 48px if you want even smaller */
    height:auto !important;
  }

  /* Make the big site title tiny on phones */
  header h1,
  .waHeader h1,
  .branding .sitename,
  .site-title,
  h1.site-name{
    font-size:12px !important;
    line-height:1.15 !important;
    margin:4px 0 !important;
    letter-spacing:0 !important;
  }

  /* Tighten vertical space in the header */
  header, .waHeader, .header { padding:6px 0 !important; }
}
/* --- NBCA: kill the forced square on the slideshow for phones --- */
@media (max-width: 600px){

  /* 1) Nuke any fixed heights the widget adds */
  .waSlideshow,
  .waSlideshow .slides,
  .waSlideshow .slide,
  .waPhotoGallerySlideshow,
  .waPhotoGallerySlideshow .slides,
  .waPhotoGallerySlideshow .slide {
    height: auto !important;
    min-height: 0 !important;
  }

  /* 2) If the widget forces square via padding-bottom:100%, override to 16:9 */
  .waSlideshow [style*="padding-bottom: 100%"],
  .waSlideshow [style*="padding-bottom:100%"],
  .waPhotoGallerySlideshow [style*="padding-bottom: 100%"],
  .waPhotoGallerySlideshow [style*="padding-bottom:100%"]{
    padding-bottom: 56.25% !important;   /* 16:9 */
  }
  /* Some variants use padding-top instead */
  .waSlideshow [style*="padding-top: 100%"],
  .waSlideshow [style*="padding-top:100%"],
  .waPhotoGallerySlideshow [style*="padding-top: 100%"],
  .waPhotoGallerySlideshow [style*="padding-top:100%"]{
    padding-top: 0 !important;
  }

  /* 3) If slides are background-image DIVs, size them cleanly */
  .waSlideshow [style*="background-image"],
  .waPhotoGallerySlideshow [style*="background-image"]{
    background-size: cover !important;      /* use 'contain' if you prefer no crop */
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* 4) If your variant uses <img> tags, keep them responsive */
  .waSlideshow img,
  .waPhotoGallerySlideshow img{
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;           /* swap to 'contain' for no crop */
  }
}
