/* ============================================================
   MOBILE UX — homepage mobile/tablet re-composition
   Loaded after enterprise-overrides.css.
   Desktop (≥992px) is untouched: every rule lives inside
   max-width media queries.
   ============================================================ */

/* ---------- GLOBAL POLISH ---------- */
@media (max-width: 991.98px) {

  html, body {
    overflow-x: hidden !important;
  }

  /* Tighten the theme's oversized section paddings on mobile */
  .py-100 { padding-top: 48px !important; padding-bottom: 48px !important; }
  .pt-100 { padding-top: 48px !important; }
  .pb-100 { padding-bottom: 48px !important; }
  .pt-70  { padding-top: 36px !important; }
  .pt-60  { padding-top: 40px !important; }
  .pb-60  { padding-bottom: 40px !important; }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- MOBILE NAVIGATION — full-screen accordion ---------- */
@media (max-width: 991.98px) {
  /*
   * The theme's original 350px drawer shifts the page and leaves a narrow
   * unreachable sliver beside the menu. Use an intentional full-screen panel
   * instead, with the persistent mobile header as its close affordance.
   */
  .wsmobileheader {
    height: 72px !important;
    margin-right: 0 !important;
    background: rgba(255, 255, 255, .98) !important;
    border-bottom: 1px solid rgba(40, 43, 117, .10);
    box-shadow: 0 2px 14px rgba(40, 43, 117, .08) !important;
  }
  .wsactive .wsmobileheader {
    margin-right: 0 !important;
  }
  .wsmobileheader .smllogo {
    margin-top: 18px !important;
    padding-left: 20px !important;
  }
  .wsmobileheader .smllogo img {
    max-height: 30px;
    width: auto;
  }
  #wsnavtoggle.wsanimated-arrow {
    top: 16px !important;
    right: 18px !important;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(40, 43, 117, .16);
    border-radius: 10px;
    background: #f5f6ff;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #wsnavtoggle.wsanimated-arrow span {
    position: relative;
    width: 22px;
    background: #282b75;
  }
  #wsnavtoggle.wsanimated-arrow span::before,
  #wsnavtoggle.wsanimated-arrow span::after {
    background: #282b75;
  }

  .wsmenu > .wsmenu-list {
    width: 100% !important;
    min-height: 100dvh;
    margin-right: -100% !important;
    padding: 88px 20px 32px !important;
    text-align: left;
    background: #fff !important;
  }
  .wsactive .wsmenu > .wsmenu-list {
    margin-right: 0 !important;
  }
  .wsactive .wsmenucontainer {
    margin-right: 0 !important;
  }
  .overlapblackbg {
    display: none !important;
  }

  .wsmenu > .wsmenu-list > li > a.h-link,
  .wsmenu > .wsmenu-list > li > a {
    padding: 16px 54px 16px 2px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e8eaf3 !important;
  }
  .wsmenu > .wsmenu-list > li > .wsmenu-click {
    width: 52px !important;
    height: 56px !important;
  }
  .wsmenu > .wsmenu-list > li > .wsmegamenu,
  .wsmenu > .wsmenu-list > li > ul.sub-menu {
    width: auto !important;
    margin: 0 -20px !important;
    padding: 4px 20px 10px !important;
    background: #f7f8ff !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .wsmenu > .wsmenu-list > li > .wsmegamenu .container {
    width: 100%;
    padding: 0;
  }
  .wsmenu > .wsmenu-list > li > .wsmegamenu .row {
    margin: 0;
  }
  .wsmenu > .wsmenu-list > li > .wsmegamenu ul.link-list {
    margin: 0;
    padding: 0;
  }
  .wsmenu > .wsmenu-list > li > .wsmegamenu ul.link-list > li > a,
  .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a {
    padding: 11px 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    line-height: 1.4 !important;
  }
  .wsmenu > .wsmenu-list > li > .wsmegamenu ul.link-list > li > a.btn {
    margin: 10px 0 6px !important;
    padding: 13px 18px !important;
    text-align: center;
    color: #fff !important;
  }
  .wsmenu > .wsmenu-list > li > a.btn.last-link {
    display: block;
    margin: 18px 0 0 !important;
    padding: 14px 18px !important;
    text-align: center;
    border: 0 !important;
  }
}

/* ---------- HERO ---------- */
@media (max-width: 767.98px) {

  #hero-7 .hero-7-txt {
    text-align: left;
  }
  #hero-7 h1 {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem) !important;
    line-height: 1.22 !important;
    padding-bottom: 14px !important;
  }
  #hero-7 .p-lg {
    font-size: 1rem !important;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  /* Full-width stacked CTAs */
  #hero-7 .btns-group:not(.cred-tags) {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #hero-7 .btns-group:not(.cred-tags) .btn {
    width: 100%;
    text-align: center;
    margin: 0 !important;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  /* Trust chips: visible again, compact single strip.
     !important needed — enterprise-overrides.css styles .cred-tag and
     .hero-7-txt .btns-group with !important. */
  #hero-7 .btns-group.cred-tags {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }
  #hero-7 .cred-tag {
    font-size: 11.5px !important;
    padding: 5px 12px 5px 10px !important;
    margin-bottom: 0 !important;
  }
  /* Image after copy, contained */
  #hero-7 .hero-7-img {
    margin-top: 26px;
    padding-bottom: 0 !important;
  }
  #hero-7 .hero-7-img img {
    max-height: 340px;
    width: auto;
    max-width: 100%;
  }
}

/* Tablet trust-chip sizing migrated from heroSection.html. The legacy
   enterprise declaration remains authoritative because it is !important. */
@media (min-width: 577px) and (max-width: 991.98px) {
  #hero-7 .cred-tag {
    font-size: 12.5px;
    padding: 7px 14px;
  }
}

/* ---------- CLIENT LOGOS — 2×3 grid ---------- */
@media (max-width: 767.98px) {
  #badges .logo-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 14px !important;
    align-items: center;
    justify-items: center;
    padding: 8px 0;
  }
  #badges .logo-list li {
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #badges .logo-list img {
    height: auto !important;
    max-height: 34px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}
@media (max-width: 419.98px) {
  #badges .logo-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ---------- STATISTICS — compact 3-up row ---------- */
@media (max-width: 767.98px) {
  /* enterprise-overrides.css applies margin-top:-40px / margin-bottom:-20px
     at this breakpoint, pulling the stats bar into adjacent sections. Zero it. */
  #statistic-1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 28px !important;
    padding-bottom: 32px !important;
  }
  #statistic-1 .statistic-1-wrapper .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
  }
  #statistic-1 .statistic-1-wrapper .col {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
  }
  #statistic-1 .statistic-block {
    text-align: center;
    margin-bottom: 0 !important;
  }
  #statistic-1 .statistic-number {
    font-size: 1.75rem !important;
  }
  #statistic-1 .statistic-block-txt p {
    font-size: 12.5px !important;
    line-height: 1.35;
    margin-bottom: 0;
  }
}

/* ---------- CARD GRIDS → SCROLL-SNAP CAROUSELS ----------
   Applies to: Why Institutions Choose (wic2, incl. Compliance),
   Built for Institutions (bfi2). One card ~85% wide, swipe. */
@media (max-width: 767.98px) {

  .wic2-section .row.row-cols-1,
  .bfi2-section .row.row-cols-1 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 4px 14px;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
    scrollbar-width: none;
  }
  .wic2-section .row.row-cols-1::-webkit-scrollbar,
  .bfi2-section .row.row-cols-1::-webkit-scrollbar { display: none; }

  .wic2-section .row.row-cols-1 > .col,
  .bfi2-section .row.row-cols-1 > .col {
    flex: 0 0 82% !important;
    max-width: 82% !important;
    scroll-snap-align: center;
    padding: 0 !important;
  }
  .wic2-section .wic2-card,
  .bfi2-section .bfi2-card {
    height: 100%;
  }
  /* Trust strip under compliance: wrap nicely */
  .cs2-trust-strip {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
  }
  .cs2-trust-sep { display: none; }

  /* FourLevels qualifier grid → carousel.
     enterprise-overrides sets display:grid + grid-template-columns at all
     breakpoints, so we need !important on layout properties to override. */
  .flp2-qual-grid {
    display: flex !important;
    grid-template-columns: unset !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding: 4px 12px 14px !important;
    margin-left: -12px;
    margin-right: -12px;
    scrollbar-width: none !important;
  }
  .flp2-qual-grid::-webkit-scrollbar { display: none; }
  .flp2-qual-grid > .flp2-qual-card {
    flex: 0 0 82% !important;
    min-width: 0 !important;
    scroll-snap-align: center;
    width: auto !important;
  }
  .fl-footer-strip {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* ---------- PRODUCT DETAILS (opd) ---------- */
@media (max-width: 991.98px) {
  .opd-section .opd-shell { margin-bottom: 40px; }
  .opd-section .opd-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .opd-section .opd-batch-row { grid-template-columns: repeat(2, 1fr); }
  .opd-section .opd-brand-grid { grid-template-columns: 1fr; }
  .opd-section .opd-verify-grid { grid-template-columns: 1fr 1fr; }
  .opd-section .opd-panels { min-height: auto; }
  .opd-section .opd-int-footer { flex-wrap: wrap; font-size: 10px; }
}

@media (max-width: 767.98px) {
  .opd-section {
    margin-top: 28px !important;
  }
  .opd-section .section-title {
    margin-bottom: 26px !important;
  }
  .opd-section .section-title h2 {
    font-size: 1.5rem !important;
    line-height: 1.25;
  }
  .opd-shell { margin-bottom: 20px !important; }
  .opd-panel img { max-height: 380px; width: auto !important; max-width: 100%; margin: 0 auto; }
  /* Step list: tighter spacing */
  .opd-section .cbox-2.process-step { margin-bottom: 14px; }
  .opd-section .cbox-2-txt h5 { font-size: 1.05rem !important; }
  .opd-section .cbox-2-txt p { font-size: 14px !important; text-align: left !important; }
}

@media (max-width: 575.98px) {
  .opd-section .opd-chrome { padding: 8px 12px; }
  .opd-section .opd-win-btn { display: none; }
  .opd-section .opd-url { font-size: 10px; }
  .opd-section .opd-panel { padding: 16px 16px 14px; }
  .opd-section .opd-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .opd-section .opd-kpi-val { font-size: 16px; }
  .opd-section .opd-batch-row { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .opd-section .opd-brand-grid { grid-template-columns: 1fr; }
  .opd-section .opd-verify-grid { grid-template-columns: 1fr; }
  .opd-section .opd-int-tier { gap: 7px; }
  .opd-section .opd-int-chip { font-size: 11px; padding: 7px 10px; }
  .opd-section .opd-bars { height: 54px; }
  .opd-section .opd-cred-name { width: 110px; font-size: 11px; }
  .opd-section .opd-verify-badge { font-size: 13px; }
}

/* ---------- SHOWCASE DIRECTORY ---------- */
@media (max-width: 991.98px) {
  #showcase-directory-section .sd-real-shell {
    transform: none;
    margin-bottom: 50px;
  }
  #showcase-directory-section .txt-block.right-column {
    padding-left: 0 !important;
  }
  #showcase-directory-section .sd-learner-grid {
    grid-template-columns: 1fr 1fr;
  }
  #showcase-directory-section .sd-inst-stats { display: none; }
}

@media (max-width: 767.98px) {
  #showcase-directory-section .txt-block {
    padding-left: 0 !important;
  }
  #showcase-directory-section h2 {
    font-size: 1.5rem !important;
  }
  #showcase-directory-section .sd-shot-wrap {
    margin-top: 22px;
  }
  #showcase-directory-section .sd-shot-wrap img {
    max-height: 360px;
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
  }
  #showcase-directory-section .sd-ctas .btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  #showcase-directory-section .sd-real-url { display: none; }
  #showcase-directory-section .sd-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  #showcase-directory-section .sd-float-pill { display: none; }
  #showcase-directory-section .sd-learner-grid {
    grid-template-columns: 1fr 1fr;
  }
  #showcase-directory-section .sd-inst-tagline { display: none; }
}

/* ---------- JOB INTELLIGENCE ---------- */
@media (max-width: 991.98px) {
  #job-intelligence-section .jir-shot-wrap { padding: 36px 0 44px; }
  #job-intelligence-section .jir-two-col { grid-template-columns: 1fr; }
  #job-intelligence-section .jir-col + .jir-col {
    border-left: none;
    border-top: 1px solid #f1f5f9;
  }
  #job-intelligence-section .jir-co-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  #job-intelligence-section .jir-hero-row {
    flex-direction: column;
    align-items: flex-start;
  }
  #job-intelligence-section .jir-hero-divider { display: none; }
}

@media (max-width: 767.98px) {
  #job-intelligence-section .txt-block {
    padding-right: 0 !important;
  }
  #job-intelligence-section h2 {
    font-size: 1.5rem !important;
  }
  #job-intelligence-section .jir-shot-wrap { padding: 24px 0 28px; }
  #job-intelligence-section .jir-shot-wrap img {
    max-height: 400px;
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
  }
  #job-intelligence-section .jir-co-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  #job-intelligence-section .jir-float-pill { display: none; }
  #job-intelligence-section .jir-ctas .btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  #job-intelligence-section .jir-hero-num { font-size: 30px; }
  #job-intelligence-section .jir-report-header {
    flex-direction: column;
    align-items: flex-start;
  }
  #job-intelligence-section .jir-header-right {
    align-items: flex-start;
  }
}

/* ---------- LEARNER WALLET ---------- */
@media (max-width: 991.98px) {
  #learner-wallet-section .lw-browser-shell { margin-bottom: 50px; }
  #learner-wallet-section .txt-block.right-column {
    padding-left: 0 !important;
  }
  #learner-wallet-section .lw-sidebar { width: 120px; }
  #learner-wallet-section .lw-stat-widget { display: none; }
}

@media (max-width: 767.98px) {
  #learner-wallet-section .txt-block {
    padding-left: 0 !important;
  }
  #learner-wallet-section h2 {
    font-size: 1.5rem !important;
  }
  #learner-wallet-section .lw-shot-wrap {
    margin-top: 22px;
    padding: 0 !important;
  }
  #learner-wallet-section .lw-shot-wrap img {
    max-height: 360px;
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
  }
  #learner-wallet-section .lw-ctas .btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  #learner-wallet-section .lw-float-pill { display: none; }
  #learner-wallet-section .lw-sidebar { display: none; }
  #learner-wallet-section .lw-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ---------- LINKEDIN RECOGNITION ---------- */
@media (max-width: 767.98px) {
  .li-recog-h2 { font-size: 1.5rem !important; }
  .li-recog-num { font-size: 36px !important; }
  .li-recog-col-pad { padding: 0 15px !important; }
}

/* ---------- G2 ENTERPRISE ---------- */
@media (max-width: 767.98px) {
  .ct-01 .txt-block { padding-right: 0 !important; }
  .ct-01 h2.s-38 { font-size: 1.5rem !important; }
  .ct-01 .img-block { margin-top: 10px; }
  #rating-1 { padding-top: 24px !important; }
  #rating-1 .rbox-1 { margin-bottom: 22px; }
}

/* ---------- API / INTEGRATIONS BANNER ---------- */
@media (max-width: 767.98px) {
  #banner-13 { padding-top: 44px !important; }
  #banner-13 .banner-13-txt h2 { font-size: 1.5rem !important; }
  #banner-13 .banner-13-txt .btn {
    width: 100%;
    text-align: center;
  }
  #banner-13 .col-md-5 img {
    max-height: 220px;
    width: auto !important;
    max-width: 100%;
    margin: 16px auto 0;
    display: block;
  }
}

/* ---------- CAROUSEL SWIPE HINTS (dots + edge fade) ----------
   The wrapper and dots are static HTML; only active-dot state is updated
   by JS at <768px. Dark variant used inside wic2/bfi2 sections. */
.carousel-dots {
  display: none;
}

@media (max-width: 767.98px) {

  /* Wrapper anchors the right-edge fade */
  .carousel-hint-wrap {
    position: relative;
  }

  /* Right-edge gradient — light sections */
  .carousel-hint-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 28px; /* leaves dots area clear */
    width: 52px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.88));
    pointer-events: none;
    z-index: 2;
  }

  /* Right-edge gradient — dark (indigo) sections */
  .carousel-hint-wrap--dark::after {
    background: linear-gradient(to right, transparent, rgba(30,32,96,0.85));
  }

  /* Dots row */
  .carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding-top: 10px;
    padding-bottom: 2px;
  }

  /* Individual dot — light-section default (dark dots) */
  .carousel-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
    flex-shrink: 0;
  }
  .carousel-dot.is-active {
    background: #4f46e5;
    width: 20px;
    border-radius: 4px;
  }

  /* Dark-section variant (white dots) */
  .carousel-dots--dark .carousel-dot {
    background: rgba(255, 255, 255, 0.30);
  }
  .carousel-dots--dark .carousel-dot.is-active {
    background: #fff;
  }
}

/* ---------- FOOTER ---------- */
@media (max-width: 767.98px) {
  footer .footer-info,
  footer .footer-links {
    margin-bottom: 22px !important;
  }
  footer { padding-top: 44px !important; }
  /* Counter the inline -40px margin which causes the footer divider and
     copyright to overlap the final entries in the longer link column. */
  #footer-3 > .container > .row:first-child {
    margin-bottom: 0 !important;
  }
  #footer-3 > .container > hr {
    margin-top: 8px;
    margin-bottom: 18px;
  }
  #footer-3 .bottom-footer .row {
    row-gap: 6px;
  }
  #footer-3 .bottom-secondary-link {
    text-align: left !important;
  }
}