/*!
 * hero-cta.css
 *
 * Mobile hero CTAs: one line, header CTA height, equal width.
 *  - Both hero CTAs show their label on a single line (never wrap, truncate or overflow).
 *  - Same height, corner radius and comparable font size/padding as the header CTAs.
 *  - Side by side they share the row 50/50.
 *  - If the two labels cannot fit side by side, the CTAs stack at full width.
 *  - Filled/outline styling per CTA stays as today (colours/borders are not touched).
 *  - Desktop and tablet (768px and up) are unchanged.
 *
 * Applies to the DiviFlash dual-button module in the first section of the page (the hero),
 * and to any dual-button module that is given the extra CSS class "vb-cta-pair".
 *
 * Usage: <link rel="stylesheet" id="hero-cta-css" href="/dk/css/hero-cta.css">
 * Pair it with hero-cta.js, which decides "side by side" vs "stacked" per screen width.
 * Without the script, the buttons still never wrap: they sit side by side when both
 * labels fit on one row, and stack at full width when they do not.
 */

@media only screen and (max-width: 767px) {

  /* The row of two CTAs */
  body #page-container #main-content .et_pb_section.et_pb_section_0 .difl_dual_button .df_button_container,
  body #page-container #main-content .difl_dual_button.vb-cta-pair .df_button_container {
    --vb-cta-height: 45px;       /* = header CTA height on mobile */
    --vb-cta-gap: 12px;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: var(--vb-cta-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Each CTA's wrapper. Without the script: as wide as its label, growing to share the row. */
  body #page-container #main-content .et_pb_section.et_pb_section_0 .difl_dual_button .df_button_container > div,
  body #page-container #main-content .difl_dual_button.vb-cta-pair .df_button_container > div {
    flex: 1 1 0 !important;
    min-width: max-content !important;
    max-width: 100% !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* With the script: side by side = exact 50/50 ... */
  body #page-container #main-content .et_pb_section.et_pb_section_0 .difl_dual_button .df_button_container[data-vb-cta="row"] > div,
  body #page-container #main-content .difl_dual_button.vb-cta-pair .df_button_container[data-vb-cta="row"] > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* ... or stacked = each CTA full width */
  body #page-container #main-content .et_pb_section.et_pb_section_0 .difl_dual_button .df_button_container[data-vb-cta="stack"] > div,
  body #page-container #main-content .difl_dual_button.vb-cta-pair .df_button_container[data-vb-cta="stack"] > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* The CTA itself: single-line pill at header CTA height */
  body #page-container #main-content .et_pb_section.et_pb_section_0 .difl_dual_button .df_button_container .df_button_left,
  body #page-container #main-content .et_pb_section.et_pb_section_0 .difl_dual_button .df_button_container .df_button_right,
  body #page-container #main-content .difl_dual_button.vb-cta-pair .df_button_container .df_button_left,
  body #page-container #main-content .difl_dual_button.vb-cta-pair .df_button_container .df_button_right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--vb-cta-height, 45px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-width: 3px !important;
    border-radius: 100px !important;
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
}