/* BUILD: sf-listen.css v1.0 — 2026-03-03
   Scope: LISTEN-only layout fixes extracted from Customizer CSS v9.
   Note: After verifying, you can delete the corresponding LISTEN blocks from the Customizer to avoid duplication.
*/

/* =========================================
   LISTEN: Desktop-only nudge + mobile reset
   ========================================= */

/* Mobile first: NO nudge */
.wp-block-columns.bf-listen{
  left: 0 !important;
  padding-left: 0 !important;
}

/* Desktop (adjust breakpoint if you want) */
@media (min-width: 992px){
  .wp-block-columns.bf-listen{
    position: relative !important;
    left: 155px !important;  /* your working value */
  }
}

/* =========================================
   LISTEN (MOBILE): put green bars under INPUT (not under play button)
   ========================================= */
@media (max-width: 768px){

  .wp-block-sf-listen.listen-shortcode{
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0 !important;
    row-gap: 6px !important;
    align-items: center !important;
  }

  .wp-block-sf-listen.listen-shortcode .audio-player{
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
  }

  .wp-block-sf-listen.listen-shortcode .answer-contaiern{
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    width: 100% !important;
  }

  .wp-block-sf-listen.listen-shortcode .results-block{
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* LISTEN (mobile): pull the green dashes up closer to the input */
@media (max-width: 768px){
  .wp-block-sf-listen.listen-shortcode .results-block{
    margin-top: -7px !important;
    padding-top: 0 !important;
  }
}

/* LISTEN: remove the completion check mark everywhere */
.wp-block-sf-listen.listen-shortcode .results-block.completed::after{
  display: none !important;
  content: none !important;
}

/* =========================================================
   DESKTOP ONLY (>= 769px):
   Make LISTEN use "dashes under input" logic
   ========================================================= */
@media (min-width: 769px){

  .wp-block-sf-listen.listen-shortcode{
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0 !important;
    row-gap: 2px !important;
    align-items: center !important;
  }

  .wp-block-sf-listen.listen-shortcode .audio-player{
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
  }

  .wp-block-sf-listen.listen-shortcode .answer-contaiern{
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .wp-block-sf-listen.listen-shortcode .results-block{
    grid-column: 2;
    grid-row: 2;
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    clear: none !important;
    text-align: left !important;
    justify-self: start !important;
    align-self: start !important;
  }

  .wp-block-sf-listen.listen-shortcode .results-block .mark{
    width: 14px !important;
    height: 5px !important;
    margin: 0 2px 6px 0 !important;
    border-radius: 2px !important;
    float: none !important;
  }

  .wp-block-sf-listen.listen-shortcode .answer-contaiern,
  .wp-block-sf-listen.listen-shortcode .answer-container{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .wp-block-sf-listen.listen-shortcode .answer-contaiern input,
  .wp-block-sf-listen.listen-shortcode .answer-container input{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .wp-block-sf-listen.listen-shortcode .audio-player{
    margin-right: 0 !important;
  }
}