/* ==========================================================================
   Mobile/tablet-only refinements for the static copy of lokaal16.nl.
   Everything is inside a <=980px media query, so the DESKTOP layout (>980px)
   is never affected.
   ========================================================================== */
@media (max-width: 980px) {

  /* ---- Content boxes: show ALL text and keep it off the edges/border ------- */
  .lokbox,
  .lokbox_big {
    max-height: none !important;
    height: auto !important;
    padding: 26px 24px !important;
  }

  /* ---- Header slider (hero image): quarter of the screen height ------------
     The theme runs the SmartSlider in full-screen (100vh) mode on small
     screens, making the top image very tall. Cap it to a quarter of the
     viewport. Class-based so it applies to the slider on both pages. */
  .n2-section-smartslider,
  .n2-ss-align,
  .n2-ss-slider,
  .n2-ss-slider-1 {
    height: 25vh !important;
    min-height: 0 !important;
    max-height: 25vh !important;
  }

  /* ---- Footer contact blocks: use the full width on tablet ----------------
     The contact column is meant to be full-width (col-md-12) but renders at
     50% between ~576-980px, cramping the black/white boxes. Force full width
     so the boxes are wide enough for their text. */
  .sppb-col-md-12:has(.ccb-box) {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  /* ---- Roughly half-height logo bar --------------------------------------- */
  #logo-bar .sppb-row { align-items: center !important; }

  #logo-bar img[src*="logo.png"] {
    max-height: 42px !important;
    width: auto !important;
    height: auto !important;
  }

  #logo-bar .sppb-divider {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #logo-bar .sppb-icon-inner {
    width: 38px !important;
    height: 38px !important;
    font-size: 38px !important;
    line-height: 38px !important;
  }

  #logo-bar .sppb-icon,
  #logo-bar .sppb-addon-wrapper,
  #logo-bar .sppb-column-addons {
    margin: 0 !important;
    padding: 0 !important;
  }
}