/* ════════════════════════════════
   BENTO SECTION — Why Work With Me
════════════════════════════════ */

.section-bento {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
  padding: clamp(60px, 6vw, 88px) clamp(20px, 3.5vw, 50px);
  overflow: hidden;
}

/* ════════════════════════════════
   HEAD — eyebrow pill, heading, CTA (centered)
════════════════════════════════ */

.bento__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
  margin-bottom: clamp(28px, 3vw, 44px);
  text-align: center;
}

.bento__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-white);
  padding: clamp(7px, 0.7vw, 10px) clamp(14px, 1.2vw, 20px);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

.bento__heading {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: var(--weight-medium);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  margin: 0;
  text-transform: uppercase;
  max-width: 18ch;
}

.bento__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(10px, 1vw, 14px) clamp(20px, 1.8vw, 28px);
  background: var(--color-accent);
  color: var(--color-black);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: var(--weight-medium);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  transition: transform 0.3s var(--ease-out), opacity 0.25s ease;
}

.bento__cta:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.bento__cta-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}

.bento__cta:hover .bento__cta-arrow {
  transform: translateX(4px);
}

/* ════════════════════════════════
   GRID — 5 cards (center spans 2 rows)
════════════════════════════════ */

.bento__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "tl center tr"
    "bl center br";
  gap: clamp(14px, 1.3vw, 20px);
}

.bento__card--tl     { grid-area: tl; }
.bento__card--tr     { grid-area: tr; }
.bento__card--center { grid-area: center; }
.bento__card--bl     { grid-area: bl; }
.bento__card--br     { grid-area: br; }

/* ════════════════════════════════
   CARDS
════════════════════════════════ */

.bento__card {
  background: var(--color-bg-surface);
  border-radius: clamp(14px, 1.2vw, 20px);
  padding: clamp(20px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.4vw, 22px);
  min-height: clamp(180px, 17vw, 240px);
  transition: background 0.3s var(--ease-out);
}

.bento__card:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Showcase card — full center, spans 2 rows */
.bento__card--showcase {
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

/* Icon container — placeholder for jitter animation */
.bento__icon {
  width: clamp(40px, 3.4vw, 56px);
  height: clamp(40px, 3.4vw, 56px);
  border-radius: clamp(8px, 0.7vw, 12px);
  background: rgba(240, 238, 232, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.bento__icon svg {
  width: 50%;
  height: 50%;
  display: block;
}

/* Showcase icon = much bigger (centerpiece for jitter) */
.bento__icon--large {
  width: clamp(100px, 10vw, 160px);
  height: clamp(100px, 10vw, 160px);
}

/* Card text */
.bento__card-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  margin: 0;
  margin-top: auto;
}

.bento__card-desc {
  font-family: var(--font-display);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 0;
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */

@media (max-width: 900px) {
  .bento__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "tl tr"
      "center center"
      "bl br";
  }
  .bento__card--showcase {
    min-height: 200px;
  }
}

@media (max-width: 600px) {
  .section-bento {
    padding: 48px 20px;
  }
  .bento__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tl"
      "tr"
      "center"
      "bl"
      "br";
  }
  .bento__card--showcase {
    min-height: 240px;
  }
  .bento__heading {
    font-size: clamp(28px, 8vw, 40px);
  }
}