/* ==========================================================================
   LWS Kadence Child — responsive breakpoints (separate file: keeps style.css
   under the 500-line cap). Accessibility floor from style.css :root tokens
   (16px+ text, 1.6 line height, no gray-on-white below #555) applies at
   every breakpoint below - nothing here overrides it.
   ========================================================================== */

/* ---------- Desktop (1024px and up): richer, wider, fuller -------------- */
@media (min-width: 1024px) {
  .lws-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .lws-hero {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .lws-hero h1 {
    font-size: 3rem;
    max-width: 18ch;
  }

  .lws-hero .lws-sub {
    font-size: 1.25rem;
    max-width: 60ch;
  }

  .wp-block-group.lws-section > .wp-block-heading {
    font-size: 2.25rem;
  }

  .lws-cards.wp-block-columns,
  .lws-steps.wp-block-columns {
    gap: 48px;
  }

  .lws-cards .wp-block-column,
  .lws-steps .wp-block-column {
    padding: 8px 4px;
  }
}

/* ---------- Mobile (below 768px): single-column, reduced density -------- */
@media (max-width: 767px) {
  .lws-section {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .lws-hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .lws-hero h1 {
    font-size: 1.75rem;
  }

  .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .wp-block-buttons .wp-block-button {
    width: 100%;
    text-align: center;
  }

  /* Force true single-column stacking regardless of core/theme defaults. */
  .wp-block-columns {
    flex-wrap: wrap;
  }

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

  .lws-cards.wp-block-columns,
  .lws-steps.wp-block-columns {
    gap: 20px;
  }
}

/* ---------- Per-device visibility utilities ------------------------------
   Apply via the block editor: select a block -> Advanced panel ->
   "Additional CSS Class(es)" -> lws-hide-mobile or lws-hide-desktop.
   No Kadence Blocks plugin required.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .lws-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .lws-hide-desktop {
    display: none !important;
  }
}