/*
 * "Why" section ("Why leading UK exhibitors choose Booth Exhibits") — static specimen.
 * Values grounded in live computed styles + the real generated per-page CSS
 * (post-2086.css) for container 632d2e6a, not guessed. Cross-checked against
 * tokens.css where an exact match exists (font sizes/weights/letter-spacing);
 * the orange gradient and the section's own #f6fafe background have no
 * existing token, so kept as grounded literals here (same approach Steps
 * took for its own distinctive card gradient).
 *
 * Intro heading note: live has a genuine content bug (real <h2> empty, real
 * text typed into a sibling <p><strong> instead — see the child theme's
 * why-heading-patch.css, dated 2026-09-15). That patch's own intent is
 * font-weight 500 (matching Services/Steps' ink-heading treatment), but the
 * live <strong> wrapper's UA-default bold computes to 700 in practice. This
 * hardcode uses a proper single <h2> (no <strong> artifact), so it follows
 * the patch's documented INTENT (500), not the accidental 700 render.
 *
 * Card gradients confirmed via post-2086.css, 115deg, per card:
 *  01 Fixed budgets:      #D87819 56% -> #DD9423 100%
 *  02 On-time delivery:   #DA831D 56% -> #DFA329 100%
 *  03 Clear communication:#DC9323 56% -> #E0A62A 100%
 *
 * Responsive: grid collapses to a single column at <=1024px (confirmed live
 * — same single-column rule applies at both tablet and mobile, no separate
 * 2-column tablet state).
 */


/* mock of the real Elementor wrapper this section will be swapped into —
   confirmed live: no boxed-width override needed, .e-con-inner is already
   min(100%, 1196px), same pattern as Work/Steps/Services. */

.why-section {
  width: 100%;
  background: #f6fafe; /* live: rgb(246, 250, 254), no existing token matches */
  padding: 100px 20px;
}

.why-section__intro {
  max-width: 748px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.why-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xxxl);
  line-height: var(--line-height-xxxl);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
}

.why-section__body {
  margin: 0;
  max-width: 558px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-ink);
}

.why-section__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1196px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.why-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding: 40px 30px 30px;
  border-radius: 20px 20px 40px 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  color: var(--color-white);
}

.why-card--1 { background: linear-gradient(115deg, #d87819 56%, #dd9423 100%); }
.why-card--2 { background: linear-gradient(115deg, #da831d 56%, #dfa329 100%); }
.why-card--3 { background: linear-gradient(115deg, #dc9323 56%, #e0a62a 100%); }

.why-card__head {
  /* .com 1e76d29d: row, min-height 98px, top border, 15px pad */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 98px;
  border-top: 1px solid var(--color-white);
  padding-top: 15px;
  box-sizing: border-box;
}

.why-card__num {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xxxl); /* 30px */
  line-height: var(--line-height-xxxl); /* 38px */
  text-transform: capitalize;
  color: var(--color-white);
}

.why-card__title {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding-left: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xl); /* 22px */
  line-height: var(--line-height-xl); /* 27px */
  text-transform: capitalize;
  color: var(--color-white);
  overflow-wrap: normal;
  word-break: normal;
}

.why-card__body {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-white);
}

@media (max-width: 1024px) {
  .why-section { padding: 70px 20px; }

  .why-section__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px; /* .com */
  }

  .why-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-height: 0;
  }

  .why-card__num,
  .why-card__title {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
}

/* Responsive polish (ship pass): fluid type/spacing before stack */
.why-section__title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}
@media (max-width: 767px) {
  .why-section { padding: 56px 16px; }
  .why-section__grid { gap: 16px; }
  .why-card { padding: 1.75rem 1.25rem 1.25rem; gap: 1.25rem; }
  .why-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}