/* Tablet + down: shrink the "Live training" countdown bento.
   Targets the bento with id `live-webinar-bento` and the countdown shortcode output inside it.
*/

@media (max-width: 1024px) {
  /* Reduce orange bento padding so it doesn't eat vertical space */
  body.home #live-webinar-bento {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  /* Layout: keep title + timer on one row */
  body.home #live-webinar-bento .ds-live-webinar-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.65rem !important;
  }

  /* Title: force "Live Training" onto one line */
  body.home #live-webinar-bento h2 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.25rem !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  body.home #live-webinar-bento .ds-live-webinar-title-top,
  body.home #live-webinar-bento .ds-live-webinar-title-bottom {
    display: inline !important;
    font-size: 1.15rem !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  body.home #live-webinar-bento .ds-live-webinar-timer {
    flex: 0 0 auto;
    width: auto !important;
  }

  /* Hide the shortcode title (it adds height on some templates) */
  body.home #live-webinar-bento .countdown-title {
    display: none !important;
  }

  /* Remove default wrapper margins from the shortcode */
  body.home #live-webinar-bento .countdown-wrapper {
    margin: 0 !important;
  }

  /* Tighten timer layout */
  body.home #live-webinar-bento .countdown-timer {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 0.4rem !important;
  }

  body.home #live-webinar-bento .countdown-segment {
    min-width: 48px !important;
    padding: 0.18rem 0.28rem !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  body.home #live-webinar-bento .countdown-segment .value {
    display: block !important;
    font-size: 15px !important;
    line-height: 0.95 !important;
    height: auto !important;
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
  }

  body.home #live-webinar-bento .countdown-segment .label {
    display: block !important;
    font-size: 9px !important;
    line-height: 0.95 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* Live state pill (when the meeting is live) */
  body.home #live-webinar-bento .live-indicator {
    padding: 10px 14px !important;
    border-radius: 9999px !important;
  }
  body.home #live-webinar-bento .live-text {
    font-size: 0.95rem !important;
    letter-spacing: 0.3px !important;
  }
}

/* Mobile: shrink a bit further */
@media (max-width: 768px) {
  body.home #live-webinar-bento .countdown-timer {
    gap: 0.35rem !important;
  }

  body.home #live-webinar-bento .countdown-segment {
    min-width: 44px !important;
    padding: 0.16rem 0.24rem !important;
  }

  body.home #live-webinar-bento .countdown-segment .value {
    font-size: 14px !important;
    margin-bottom: 3px !important;
  }

  body.home #live-webinar-bento .countdown-segment .label {
    font-size: 9px !important;
  }
}

/* Very small phones: keep it compact without wrapping */
@media (max-width: 420px) {
  body.home #live-webinar-bento {
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
  }

  body.home #live-webinar-bento .ds-live-webinar-title-top,
  body.home #live-webinar-bento .ds-live-webinar-title-bottom {
    font-size: 1.05rem !important;
  }

  body.home #live-webinar-bento .countdown-segment {
    min-width: 42px !important;
  }
}