/* Testimonials page styles migrated from testimonials.html */

/* ── TESTIMONIALS PAGE HERO ── */
      .testi-hero {
        background: var(--bg-dark);
        min-height: 92vh;
        position: relative;
        overflow: visible;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 80px;
        padding-bottom: 8rem;
      }
      @media (min-width: 1024px) {
        .testi-hero { padding-top: 112px; }
      }
      .testi-hero-bg {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(120deg, rgba(5, 14, 23, 0.92) 0%, rgba(5, 14, 23, 0.78) 48%, rgba(7, 28, 58, 0.72) 100%),
          url("../images/hero%20bg.png") center / cover no-repeat;
        pointer-events: none;
        z-index: 0;
      }
      .testi-hero-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(ellipse 60% 80% at 100% 50%, rgba(10,40,120,0.35) 0%, transparent 65%),
          radial-gradient(ellipse 40% 60% at 70% 30%, rgba(5,20,80,0.25) 0%, transparent 55%);
        pointer-events: none;
      }

      /* Photo collage grid */
      .testi-collage {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 180px);
        gap: 10px;
        width: 100%;
        max-width: 500px;
        position: relative;
        z-index: 1;
      }
      .testi-collage img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
      }

      /*
       * WPBakery/theme wrappers clip negative-margin overlap — force visible
       * so the stats cards sit on the hero edge (same pattern as contact page).
       */
      body.page-slug-testimonials #primary,
      body.page-slug-testimonials .site-main,
      body.page-slug-testimonials .entry-content,
      body.page-slug-testimonials .wpb-content-wrapper,
      body.page-slug-testimonials .vc_row,
      body.page-slug-testimonials .vc_row-fluid,
      body.page-slug-testimonials .wpb_row,
      body.page-slug-testimonials .vc_column_container,
      body.page-slug-testimonials .vc_column-inner,
      body.page-slug-testimonials .wpb_wrapper,
      body.page-slug-testimonials .raw-vc-section-row,
      body.page-slug-testimonials .raw-vc-element,
      body.page-slug-testimonials .testi-hero,
      body.page-template-page-testimonials-php #primary,
      body.page-template-page-testimonials-php .site-main,
      body.page-template-page-testimonials-php .entry-content,
      body.page-template-page-testimonials-php .wpb-content-wrapper,
      body.page-template-page-testimonials-php .vc_row,
      body.page-template-page-testimonials-php .vc_column-inner,
      body.page-template-page-testimonials-php .wpb_wrapper,
      body.page-template-page-testimonials-php .testi-hero {
        overflow: visible !important;
      }

      .testi-stats-wrap {
        position: relative;
        z-index: 30;
        margin-top: -4rem;
      }
      .testi-stats-bar {
        position: relative;
        z-index: 31;
        background: white;
        border-radius: 16px;
        box-shadow: 0 8px 40px rgba(0,0,0,0.18);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        overflow: hidden;
      }
      /* Mobile: 2×2 grid */
      @media (max-width: 639px) {
        .testi-stats-bar {
          grid-template-columns: repeat(2, 1fr);
          border-radius: 12px;
        }
        .testi-stat-item:nth-child(2) { border-right: none; }
        .testi-stat-item:nth-child(1),
        .testi-stat-item:nth-child(2) {
          border-bottom: 1px solid rgba(0,0,0,0.07);
        }
      }
      .testi-stat-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 1.25rem 1.25rem;
        border-right: 1px solid rgba(0,0,0,0.07);
      }
      .testi-stat-item:last-child { border-right: none; }
      @media (max-width: 639px) {
        .testi-stat-item { padding: 1rem 1rem; gap: 10px; }
      }
      .testi-stat-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 16px;
      }
      @media (max-width: 639px) {
        .testi-stat-icon { width: 36px; height: 36px; font-size: 13px; }
      }
      .testi-stat-num {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--text-primary);
        line-height: 1.1;
        white-space: nowrap;
      }
      @media (max-width: 639px) {
        .testi-stat-num { font-size: 1.1rem; }
      }
      .testi-stat-label {
        font-size: 0.7rem;
        color: #6b7280;
        font-weight: 500;
        margin-top: 2px;
        white-space: nowrap;
      }
      @media (max-width: 380px) {
        .testi-stat-label { font-size: 0.62rem; white-space: normal; }
      }

      /* ── Testimonial slider cards ── */
      .testi-card {
        flex-shrink: 0;
        background: white;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 16px;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        /* width set by JS via --card-width */
        width: var(--card-width, calc(25% - 15px));
      }

      /* ── Featured story grid ── */
      .featured-story-grid {
        border-radius: 16px;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        min-height: 240px;
      }
      @media (max-width: 767px) {
        .featured-story-grid {
          grid-template-columns: 1fr;
          min-height: auto;
        }
        .featured-story-img {
          height: 220px;
        }
      }

      /* ── Dark mode overrides ── */
      .dark .testi-stats-bar {
        background: #0f1f35;
        box-shadow: 0 4px 32px rgba(0,0,0,0.3);
      }
      .dark .testi-stat-num { color: white; }
      .dark .testi-stat-label { color: rgba(255,255,255,0.5); }
      .dark .testi-stat-item { border-color: rgba(255,255,255,0.07); }
      .dark .testi-card {
        background: #0f1f35;
        border-color: rgba(255,255,255,0.08);
        box-shadow: 0 2px 12px rgba(0,0,0,0.3);
      }
      .dark .testi-card p { color: rgba(255,255,255,0.75); }
      .dark .testi-card .testi-name { color: white; }
      .dark .testi-card .testi-location { color: rgba(255,255,255,0.45); }
      .dark .testi-card .testi-divider { border-color: rgba(255,255,255,0.07); }
      .dark #testiPrev,
      .dark #testiNext {
        background: #0f1f35;
        border-color: rgba(255,255,255,0.12);
        color: rgba(255,255,255,0.7);
      }
      .dark #testiDots .testi-dot[style*="rgba(0,0,0,0.15)"] {
        background: rgba(255,255,255,0.2) !important;
      }
      /* Voice of Success section dark mode */
      .dark section[style*="background:var(--bg-secondary)"] {
        background: var(--bg-secondary);
      }
      /* CTA banner dark mode — already dark, stays same */