/* ================================================================
   Sync Inn Digital — The Problem Section
   Per-page content via WP meta.  Home page only.

   Also contains: reusable .sid-section-label + .sid-dot classes
   used by every section that has a labelled header with a blinking dot.

   All colours use var(--sid-*) global CSS custom properties.
   ================================================================ */

/* ================================================================
   REUSABLE: Section Label + Blinking Dot
   Usage in any template:
     <div class="sid-section-label">
       <div class="sid-dot" aria-hidden="true">
         <div class="sid-dot__ripple"></div>
         <div class="sid-dot__core"></div>
       </div>
       <span class="sid-section-label__text">THE PROBLEM</span>
     </div>
   ================================================================ */

.sid-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* Dot container: holds both the solid core and the expanding ripple */
.sid-dot {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.sid-dot__core,
.sid-dot__ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--sid-orange, #f97316);
  border-radius: 50%;
  top: 0;
  left: 0;
}

/* Solid dot — blinks */
.sid-dot__core {
  animation: sid-dot-blink 1.5s ease-in-out infinite;
}

/* Ripple ring — expands and fades */
.sid-dot__ripple {
  opacity: 0.4;
  animation: sid-dot-ripple 2s ease-out infinite;
}

@keyframes sid-dot-blink {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.3; }
}

@keyframes sid-dot-ripple {
  0%   { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(3); opacity: 0;   }
}

.sid-section-label__text {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--sid-black, #000);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ================================================================
   THE PROBLEM SECTION
   ================================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */

.sid-prob {
  background-color: var(--sid-light-grayish-blue-bg, #F5F6FA);
  width: 100%;
  padding: 0;
}

/* ── Constrained inner ───────────────────────────────────────── */

.sid-prob__wrap {
  max-width: var(--sid-site-width, 1400px);
  margin: 0 auto;
  padding: 0px 20px;
}

/* ── Main heading ────────────────────────────────────────────── */

.sid-prob__heading {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--sid-black, #000);
  margin: 0 0 24px;
  max-width: 70%;
}

.sid-prob__heading-hi {
  color: var(--sid-highlight-text-color, var(--sid-orange, #f97316));
}

/* ── Italic line ─────────────────────────────────────────────── */

.sid-prob__italic {
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  color: var(--sid-black, #000);
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 70%;
}

/* ── Description ─────────────────────────────────────────────── */

.sid-prob__desc {
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--sid-black, #000);
  margin: 0 0 52px;
  max-width: 50%;
}

/* ── Cards section heading ───────────────────────────────────── */

.sid-prob__cards-heading {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 25px;
  font-weight: 600;
  color: var(--sid-black, #000);
  margin: 0 0 20px;
}

/* ── Cards grid ──────────────────────────────────────────────── */

/*
 * 5 cards → 3 columns: row 1 has 3 cards, row 2 has 2 cards.
 */
.sid-prob__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 60px;
}

/* ── Individual card ─────────────────────────────────────────── */

.sid-prob__card {
  background-color: var(--sid-grey, #F5F6FA);
  border: 1px solid #00000017;
  border-radius: 30px;
  padding: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.sid-prob__card-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sid-prob__card-title {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--sid-black, #000);
  margin: 0;
}

.sid-prob__card-text {
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--sid-black, #000);
  margin: 0;
      font-style: italic;
}

/* Orange pill badge */
.sid-prob__card-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sid-orange, #f97316);
  color: var(--sid-white, #fff);
  font-family: 'Nunito', var(--sid-font-body, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  padding: 6px 16px;
  border-radius: 50px;
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Bottom card (black) ─────────────────────────────────────── */

.sid-prob__bottom {
  background-color: var(--sid-black, #000);
  border-radius: 30px;
  padding: 52px 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  overflow: hidden;
  position: relative;
}

.sid-prob__bottom::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  background-image: var(--sid-prob-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

/* Text side */
.sid-prob__bottom-text {
  flex: 1;
  position: relative;
  z-index: 1;
}

.sid-prob__bottom-line {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--sid-white, #fff);
  margin: 0;
}

/* "is the" — muted grey */
.sid-prob__bottom-mid {
  color: #7E7E81;
}

/* Logo side — low opacity, rounded */
.sid-prob__bottom-logo {
  display: none;
}

.sid-prob__bottom-logo img {
  display: none;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .sid-prob__heading {
    font-size: 52px;
  }

  .sid-prob__bottom-line {
    font-size: 38px;
  }

  .sid-prob__bottom {
    padding: 48px 48px;
  }
}

@media (max-width: 1023px) {
  .sid-prob__heading {
    font-size: 44px;
    max-width: 100%;
  }

  .sid-prob__italic {
    max-width: 100%;
  }

  .sid-prob__desc {
    max-width: 100%;
  }

  .sid-prob__bottom-line {
    font-size: 32px;
  }

  .sid-prob__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .sid-prob {
    padding: 60px 0;
  }

  .sid-prob__heading {
    font-size: 34px;
    margin-bottom: 18px;
  }

  .sid-prob__italic,
  .sid-prob__desc {
    font-size: 17px;
  }

  .sid-prob__bottom {
    flex-direction: column;
    padding: 36px 28px;
    text-align: left;
  }

  .sid-prob__bottom::before {
    display: none;
  }

  .sid-prob__bottom-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .sid-prob__bottom-line {
    font-size: 26px;
  }

  .sid-prob__bottom-logo {
    max-width: 120px;
    opacity: 0.1;
  }

  .sid-prob__card {
    padding: 24px;
    gap: 18px;
  }

  .sid-prob__card-left {
    gap: 6px;
  }

  .sid-prob__card-title {
    font-size: 20px;
  }

  .sid-prob__card-text {
    font-size: 17px;
  }
}

@media (max-width: 479px) {
  .sid-prob {
    padding: 48px 0;
  }

  .sid-prob__heading {
    font-size: 30px;
    line-height: 30px;
  }

  .sid-prob__desc {
    font-size: 16px;
  }

  .sid-prob__cards {
    grid-template-columns: 1fr;
  }

  .sid-prob__card {
    padding: 20px;
    gap: 15px;
  }

  .sid-prob__card-left {
    gap: 2px;
  }

  .sid-prob__card-title {
    font-size: 18px;
  }

  .sid-prob__card-text {
    font-size: 16px;
  }

  .sid-prob__bottom {
    padding: 20px 20px;
  }

  .sid-prob__bottom-line {
    font-size: 20px;
  }
}