/* ═══════════════════════════════════════════
   WHY-US.CSS — Pourquoi Nous Section
   The Sisters Offroad Theme
   ═══════════════════════════════════════════ */

.section-why {
  padding: var(--section-padding);
  background: var(--dark);
  position: relative;
  overflow: hidden;
}
.section-why::before {
  content: 'OFFROAD';
  position: absolute;
  font-family: var(--font-display);
  font-size: 20vw;
  color: rgba(255, 255, 255, 0.015);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
}

.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid); margin-top: 60px; }

.why-card { background: var(--mid); padding: 40px 32px; transition: background var(--transition-medium); position: relative; }
.why-card:hover { background: var(--warm); }
.why-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: transparent; transition: background var(--transition-medium); }
.why-card:hover::before { background: var(--sand); }

.why-num { font-family: var(--font-display); font-size: 4rem; color: rgba(232, 200, 122, 0.1); line-height: 1; margin-bottom: 16px; }
.why-icon { font-size: 1.8rem; margin-bottom: 16px; display: block; }
.why-title { font-size: 1rem; font-weight: 700; color: var(--cream); margin-bottom: 12px; }
.why-body { font-size: 0.82rem; color: rgba(245, 237, 216, 0.5); line-height: 1.7; }

@media (max-width: 768px) {
  .section-why {
    padding: 56px 20px 64px;
  }

  .why-grid {
    margin-top: 36px;
    gap: 0;
    grid-template-columns: 1fr;
  }

  .why-card {
    border-top: 1px solid rgba(197, 160, 89, 0.28);
    padding: 32px 8px 32px 4px;
  }

  .why-grid .why-card:first-child {
    border-top: none;
  }

  .why-num {
    font-size: 3.25rem;
    color: rgba(232, 200, 122, 0.14);
    margin-bottom: 12px;
  }

  .why-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sand);
    letter-spacing: 0.02em;
  }

  .why-body {
    color: rgba(245, 237, 216, 0.62);
    font-size: 0.88rem;
  }
}