/**
 * Hello DC Academy Helper — card-specific positioning + housekeeping only.
 * The overlay, play button, and modal visuals come from the theme's
 * learndash.css (.bb-course-video-overlay / .bb_course_video_details), and the
 * grid/card layout from the academy-cards inline CSS — both load site-wide.
 */

/* The shortcode wraps each poster image in this box; it is the overlay's
   positioning context, so the overlay covers only the image, not the card. */
.dc-card-preview-box {
  position: relative !important;
  display: block !important;
  line-height: 0;
}

/* Self-contained preview overlay + play button (mirrors the theme's
   learndash.css so the look doesn't depend on that stylesheet). Fills the box
   via inset:0; width/height auto so the inset governs even if the theme base
   rule sets width/height:100%. */
.dc-card-preview-overlay {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 2;
  display: flex;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: all linear 0.2s;
}
.dc-card-preview-overlay > div {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 3;
  margin: auto !important; /* center in the short card poster */
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.dc-card-preview-label {
  font-family: "Raleway", sans-serif !important;
  font-size: 1.5em !important;
  letter-spacing: 2px !important;
}
.dc-card-preview-overlay .bb-course-play-btn-wrapper {
  width: 60px;
  height: 60px;
  margin: auto;
  display: flex;
  align-items: center;
}
.dc-card-preview-overlay .bb-course-play-btn {
  display: flex;
  align-items: center;
  width: 50px;
  height: 50px;
  margin: auto;
  background-color: rgba(248, 248, 248, 0.7);
  border-radius: 100%;
  transition: all linear 0.2s;
}
.dc-card-preview-overlay .bb-course-play-btn:after {
  content: "";
  display: inline-block;
  position: relative;
  left: 2px;
  margin: auto;
  width: 10px;
  height: 10px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #4d5c6d;
  transition: all linear 0.2s;
}
.dc-card-preview-overlay:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.dc-card-preview-overlay:hover .bb-course-play-btn {
  width: 60px;
  height: 60px;
  background-color: rgba(248, 248, 248, 0.9);
}
.dc-card-preview-overlay:hover .bb-course-play-btn:after {
  border-color: transparent transparent transparent #007cff;
}

/* Magnific hides inline content via the .mfp-hide class and REMOVES that class
   from the one modal it opens (re-adding on close). We hide with a selector
   that's both specific enough to win AND keyed on .mfp-hide, so the clicked
   modal (which loses mfp-hide) shows while the rest stay hidden. */
.dc-card-video-modal.mfp-hide {
  display: none !important;
}
.dc-card-video-modal {
  position: relative;
  background: #fff;
  padding: 10px;
  max-width: 900px;
  margin: 20px auto;
  border-radius: 4px;
}

/* Housekeeping: hide these on the card grid. */
div.course-progress-wrap,
div.course-tag,
div.new-course-tag {
  display: none !important;
}

/* Kill the featured-course-card hover "jump" (translate(8px,-8px)) on this
   page only. Defined globally in mu-plugins/featured-course-card.php. */
div.a-card-container:hover {
  transform: none !important;
}

/* ==========================================================================
   Self-contained grid + card layout.
   Copied from mu-plugins/academy-cards.php so page 25016 doesn't depend on that
   plugin's global CSS. Selectors match the [hello_academy_cards] markup.
   ========================================================================== */

.academy-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 50px;
}
/* Tablet band: 2 columns (three 320px cards + gaps need ~1024px, so below that
   the third card overflows). */
@media (max-width: 1023px) {
  .academy-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Phones: single column. */
@media (max-width: 680px) {
  .academy-cards-grid { grid-template-columns: 1fr; }
}

.academy-card-item {
  display: flex;
  justify-content: center;
}

.a-card-container {
  position: relative;
  width: 100%;
  max-width: 320px;
  min-width: fit-content;
  border-radius: 6px;
  border: 3px solid #000000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: fit-content;
  background-color: #ffffff;
  height: 489px;
}

.a-card-image {
  width: 100%;
}

.a-card-header {
  color: black;
  font-size: 20px !important;
  margin-top: 16px;
  margin-left: 20px !important;
  width: 280px !important;
  line-height: 1.25 !important;
  margin-bottom: 0px !important;
  height: 72px !important;
  font-weight: 800;
  font-family: "Raleway", sans-serif;
}
.a-card-header a {
  text-decoration: none;
  color: black;
}
.a-card-link a {
  color: black !important;
}
.a-card-link a:hover {
  color: black !important;
}

.a-card-body {
  font-size: 14px !important;
  margin-left: 20px !important;
  line-height: 1.25 !important;
  color: black;
  width: 280px !important;
  height: 100px;
  margin-bottom: 8px;
}
.course-body,
.a-card-body-special {
  margin-top: 8px !important;
}

.a-card-tag-container {
  display: flex;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: -20px;
}
.a-card-tag {
  font-size: 14px;
  color: #828282;
  margin-right: 8px;
}
.a-card-tag-content.a-card-teacher {
  font-size: 14px !important;
  color: black;
  height: 56px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0 0 0px !important;
}

.course-progress-wrap-placeholder img {
  width: 100%;
  margin-top: 0px !important;
  vertical-align: top !important;
}

.a-card-tag-container2 {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 8px;
  margin-bottom: 0px;
  display: flex;
  gap: 20px;
}
.a-level-tag {
  display: flex;
  gap: 8px;
}
.a-lessons-container {
  display: flex;
  margin-bottom: -24px;
  margin-left: auto;
}

/* ==========================================================================
   [hello_playalongs_row] — full-width black promo row, text+CTA left / image
   right, responsive (one column on mobile). Replaces the three breakpoint
   WPBakery rows (playalongs-row-d/t/m) with a single responsive version.
   ========================================================================== */

.hello-playalongs {
  /* Fill the container width. For edge-to-edge black, put the shortcode in a
     WPBakery row set to "Stretch row and content" (full width) — the viewport
     "full-bleed" hack (margin: calc(50% - 50vw)) breaks inside WPBakery columns
     whose center isn't the viewport center, shoving the row off-screen. */
  width: 100%;
  background: #000;
  color: #fff;
  padding: 90px 20px;
  box-sizing: border-box;
}

/* Remove WPBakery's default 15px .vc_column-inner gutter on the column holding
   the playalongs shortcode (add the "playalongs-column-1" extra class to that
   column) so the black reaches both viewport edges. */
.playalongs-column-1 > .vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.hello-playalongs__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  /* Give the text column more room on large screens so the headline fits in
     3 lines; collapses to one column on mobile below. */
  grid-template-columns: 1.55fr 1fr;
  gap: 40px;
  align-items: center;
}
.hello-playalongs__eyebrow {
  margin: 0 0 16px;
  color: #ffc634;
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hello-playalongs__heading {
  margin: 0 0 20px;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
}
.hello-playalongs__intro {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}
.hello-playalongs__text {
  text-align: center;
}
.hello-playalongs__list {
  /* Two content-width columns, items left-aligned, whole block centered
     under the heading. */
  display: grid;
  grid-template-columns: auto auto;
  gap: 12px 40px;
  width: fit-content;
  margin: 0 auto 32px;
  padding: 0;
  list-style: none;
  text-align: left;
}
.hello-playalongs__list li {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.hello-playalongs__list li::before {
  content: "\2713"; /* ✓ */
  margin-right: 8px;
  color: #df173b;
  font-weight: 700;
}
.hello-playalongs__cta {
  display: inline-block;
  padding: 15px 40px;
  background: #df173b;
  color: #fff !important;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s linear;
}
.hello-playalongs__cta:hover {
  background: #b91230;
  color: #fff !important;
}
.hello-playalongs__media {
  text-align: center;
}
.hello-playalongs__media img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .hello-playalongs {
    padding: 48px 20px;
  }
  .hello-playalongs__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hello-playalongs__list {
    grid-template-columns: auto;
  }
}

/* ==========================================================================
   dc-flex-row — collapse a breakpoint-duplicated WPBakery row (the -d / -t-m
   pattern) into ONE responsive row, so you don't need two rows toggled with
   "hide on breakpoint".

   Usage: add the class "dc-flex-row" to the row's Extra Class Name (Row
   settings → General). Columns sit side-by-side on desktop and stack in DOM
   order (e.g. text above slider) at/below 991px. Add "dc-flex-row--reverse"
   as well if you want the stacked order flipped (slider above text).

   Works by converting WPBakery's float-based grid to flexbox, which — unlike
   floats — lets the columns be reordered/stacked responsively.
   ========================================================================== */
.vc_row.dc-flex-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center; /* vertically center text vs. slider; use flex-start for top-align */
}
.dc-flex-row > .wpb_column {
  float: none !important;
}
@media (max-width: 991px) {
  .vc_row.dc-flex-row {
    flex-direction: column;
  }
  .vc_row.dc-flex-row.dc-flex-row--reverse {
    flex-direction: column-reverse;
  }
  .dc-flex-row > .wpb_column {
    width: 100% !important;
  }
}

/* Hero fixes below 992px:
   1. Heading is a fixed 68px/68px line-height — scale it fluidly.
   2. The left column's .vc_column-inner carries a desktop margin-left:-64px
      (WPBakery Design Options) that drags the text off the left edge on mobile
      — reset it so the content stays on screen. */
@media (max-width: 991px) {
  #hero-left-clmn h1,
  #hero-left-clmn h1 span {
    font-size: clamp(30px, 6vw, 56px) !important;
    line-height: 1.15 !important;
  }
  #hero-left-clmn > .vc_column-inner {
    margin-left: 0 !important;
  }
}