/**
 * AI Agents — Solutions Widget
 * Intro panel + tinted agent cards with illustrations.
 * Prefix: .nwaa-solutions / .nwaa-solution
 */

.nwaa-solutions {
  --nwaa-sol-title:    #14101A;
  --nwaa-sol-body:     #4B4256;
  --nwaa-sol-accent:   #7C4DD6;
  --nwaa-sol-panel:    #ffffff;
  --nwaa-sol-shadow:   0 14px 36px rgba(20, 16, 26, 0.07);
  --nwaa-sol-shadow-h: 0 22px 50px rgba(20, 16, 26, 0.11);

  background: linear-gradient(115deg, #F3E9FF 0%, #FAF6FF 48%, #EEF4FF 100%);
  color: var(--nwaa-sol-title);
  padding: 110px 0;
}

.nwaa-solutions__layout {
  display: grid;
  /* Ratio is driven by --nwaa-solutions-ratio (percentage of the intro column). */
  grid-template-columns: calc(var(--nwaa-solutions-ratio, 31) * 1%) 1fr;
  gap: 56px;
  align-items: center;
}

/* Cards take the full width when the intro panel is switched off. */
.nwaa-solutions__layout--single { grid-template-columns: 1fr; }

/* ========================================
   INTRO PANEL
   ======================================== */
.nwaa-solutions__spark {
  display: block;
  color: var(--nwaa-sol-accent);
  margin-bottom: 20px;
  line-height: 1;
}

.nwaa-solutions__spark svg { width: 30px; height: 30px; fill: currentColor; }
.nwaa-solutions__spark i   { font-size: 26px; }

.nwaa-section .nwaa-solutions__heading {
  display: block;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--nwaa-sol-title);
  margin: 0 0 20px;
}

.nwaa-solutions__heading em,
.nwaa-solutions__heading-accent {
  font-style: normal;
  color: var(--nwaa-sol-accent);
}

.nwaa-section .nwaa-solutions__tagline {
  font-size: 15px;
  font-weight: 600;
  color: var(--nwaa-sol-title);
  margin: 0 0 14px;
}

.nwaa-section .nwaa-solutions__lede {
  font-size: 15px;
  line-height: 1.65;
  color: var(--nwaa-sol-body);
  margin: 0;
  max-width: 340px;
}

.nwaa-section .nwaa-solutions__benefits {
  margin-top: 30px;
  padding: 22px 24px;
  max-width: 340px;
  background: var(--nwaa-sol-panel);
  border-radius: 18px;
  box-shadow: var(--nwaa-sol-shadow);
  display: grid;
  gap: 15px;
}

.nwaa-section .nwaa-solutions__benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--nwaa-sol-title);
}

.nwaa-solutions__benefit-icon {
  width: 20px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--nwaa-sol-accent);
}

.nwaa-solutions__benefit-icon svg { width: 18px; height: 18px; fill: currentColor; }
.nwaa-solutions__benefit-icon i   { font-size: 15px; }

/* ========================================
   AGENT CARDS
   ======================================== */
.nwaa-solutions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.nwaa-solution {
  /* Per-card palette. Overridden per repeater item from the widget panel. */
  --nwaa-solution-accent: #6D4BC0;
  --nwaa-solution-bg:     #F4EEFF;
  --nwaa-solution-pill:   #EBE2FF;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 22px 28px;
  border-radius: 22px;
  background: var(--nwaa-solution-bg);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--nwaa-sol-shadow);
  transition: transform var(--nwaa-ease), box-shadow var(--nwaa-ease);
}

/*
 * Rotating tints for cards 2 and 3. Wrapped in :where() so these carry no
 * specificity — the per-card colour controls always win once they are set.
 */
.nwaa-solutions__grid > :where(.nwaa-solution:nth-child(3n + 2)) {
  --nwaa-solution-accent: #27754E;
  --nwaa-solution-bg:     #EFF9F2;
  --nwaa-solution-pill:   #DFF3E7;
}

.nwaa-solutions__grid > :where(.nwaa-solution:nth-child(3n + 3)) {
  --nwaa-solution-accent: #2563C9;
  --nwaa-solution-bg:     #EDF3FF;
  --nwaa-solution-pill:   #DEEAFF;
}

.nwaa-solution--raised {
  transform: translateY(-20px);
  box-shadow: var(--nwaa-sol-shadow-h);
}

.nwaa-solution:hover {
  transform: translateY(-6px);
  box-shadow: var(--nwaa-sol-shadow-h);
}

.nwaa-solution--raised:hover { transform: translateY(-26px); }

.nwaa-solution__media {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.nwaa-solution__media img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 180px;
  object-fit: contain;
}

.nwaa-section .nwaa-solution__title {
  font-size: 19px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--nwaa-solution-accent);
  margin: 0 0 12px;
}

.nwaa-section .nwaa-solution__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--nwaa-sol-body);
  margin: 0 0 22px;
}

.nwaa-solution__pill {
  margin-top: var(--nwaa-solution-pill-push, auto);
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: var(--nwaa-radius-pill);
  background: var(--nwaa-solution-pill);
  color: var(--nwaa-solution-accent);
  font-size: 12px;
  font-weight: 600;
}

/* ========================================
   RESPONSIVE
   ======================================== */
/* Breakpoints match Elementor's tablet (1024) and mobile (767) so the
   stylesheet fallback and the widget's per-device controls agree. */
@media (max-width: 1024px) {
  .nwaa-solutions__layout {
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: start;
  }
  .nwaa-solutions__lede,
  .nwaa-section .nwaa-solutions__benefits { max-width: none; }
  .nwaa-solutions__grid { grid-template-columns: repeat(2, 1fr); }
  /* No room to overlap the row once the panel stacks above it. */
  .nwaa-solution--raised       { transform: none; }
  .nwaa-solution--raised:hover { transform: translateY(-6px); }
}

@media (max-width: 767px) {
  .nwaa-solutions       { padding: 80px 0; }
  .nwaa-solutions__grid { grid-template-columns: 1fr; }
  .nwaa-solution__media img { height: 150px; }
}