/* =========================================
   BENTO GRID — bento.css
   ========================================= */

/* ── SECTION ─────────────────────────────── */

.bento-section {
  padding: 96px 48px 120px;
}

/* ── HEADER ──────────────────────────────── */

.bento-header {
  margin-bottom: 48px;
}

.bento-kicker {
  display:        flex;
  align-items:    center;
  gap:            10px;
  font-size:      11px;
  color:          var(--blue);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom:  16px;
}

.bento-kicker::before {
  content:       "";
  width:         20px;
  height:        1.5px;
  background:    var(--blue);
  border-radius: 2px;
}

.bento-title {
  font-size:      clamp(2.8rem, 4.2vw, 4.4rem);
  line-height:    1.00;
  letter-spacing: -0.06em;
  font-weight:    300;
  color:          var(--text-primary);
}

.bento-title span {
  color: var(--blue);
}

/* ── GRID ────────────────────────────────── */

.bento-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows:    auto;
  gap:                   12px;
}

/* ── BASE CARD ───────────────────────────── */

.bento-card {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  padding:         24px;
  border-radius:   20px;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  font-family:     var(--font-primary);
  overflow:        hidden;
  transition:
    transform   0.4s var(--ease-out),
    box-shadow  0.4s ease;
  min-height:      180px;
}

.bento-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.bento-card:hover .bento-card__arrow {
  transform: translate(3px, -3px);
  opacity:   1;
}

/* ── GRID PLACEMENT — Row 1 ──────────────── */

/* Col 1: tall — spans 2 rows */
.bento-card--tall {
  grid-column: 1;
  grid-row:    1 / 3;
  min-height:  400px;
}

/* Col 2: wide — single tall row */
.bento-card--wide {
  grid-column: 2;
  grid-row:    1 / 3;
  min-height:  400px;
}

/* Col 3 top: small */
.bento-card--small {
  grid-column: 3;
  grid-row:    1;
  min-height:  190px;
}

/* Col 3 bottom: small */
.bento-card--small:nth-of-type(4) {
  grid-column: 3;
  grid-row:    2;
}

/* Col 4: tall-wide — spans 2 rows */
.bento-card--tall-wide {
  grid-column: 4;
  grid-row:    1 / 3;
  min-height:  400px;
}

/* ── Row 2 ───────────────────────────────── */

/* Col 1: medium-left tall */
.bento-card--medium-left {
  grid-column: 1;
  grid-row:    3 / 5;
  min-height:  360px;
}

/* Col 2-3: wide center */
.bento-card--wide-center {
  grid-column: 2 / 4;
  grid-row:    3 / 5;
  min-height:  360px;
}

/* Col 4: tall right (reuse tall-wide slot row 3-4) */
/* handled by profile card above */

/* ── Row 3 ───────────────────────────────── */

/* Col 1 bottom small */
.bento-card--small-bottom-left {
  grid-column: 1;
  grid-row:    5;
  min-height:  160px;
}

/* Col 2: medium-center */
.bento-card--medium-center {
  grid-column: 2;
  grid-row:    5;
  min-height:  160px;
}

/* Col 3: medium-center-2 */
.bento-card--medium-center-2 {
  grid-column: 3;
  grid-row:    5;
  min-height:  160px;
}

/* Col 4 top small */
.bento-card--small-br-1 {
  grid-column: 4;
  grid-row:    3;
  min-height:  160px;
}

/* Col 4 bottom small */
.bento-card--small-br-2 {
  grid-column: 4;
  grid-row:    4 / 6;
  min-height:  180px;
}

/* ── BACKGROUNDS ─────────────────────────── */

.bento-card--bg-dark-blue {
  background: linear-gradient(145deg, #1a3fa8 0%, #0d2880 100%);
  color:      #ffffff;
}

.bento-card--bg-light-blue {
  background: rgba(26,70,201,0.06);
  color:      var(--text-primary);
  border:     1px solid rgba(26,70,201,0.10);
}

.bento-card--bg-white {
  background: #ffffff;
  color:      var(--text-primary);
  border:     1px solid var(--border);
}

.bento-card--bg-purple-dark {
  background: linear-gradient(145deg, #3730a3 0%, #1e1b6b 100%);
  color:      #ffffff;
}

.bento-card--bg-gradient-art {
  background: linear-gradient(145deg, #1a46c9 0%, #0891b2 60%, #059669 100%);
  color:      #ffffff;
}

.bento-card--bg-gradient-blue {
  background: linear-gradient(145deg, #2563eb 0%, #7c3aed 100%);
  color:      #ffffff;
}

/* ── TOP ROW ─────────────────────────────── */

.bento-card__top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   auto;
}

.bento-card__category {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity:        0.60;
}

.bento-card--bg-light-blue .bento-card__category,
.bento-card--bg-white .bento-card__category {
  color: var(--blue);
  opacity: 0.8;
}

.bento-card__arrow {
  font-size:  16px;
  opacity:    0;
  transition:
    transform var(--t-fast) ease,
    opacity   var(--t-fast) ease;
}

/* ── ICON ────────────────────────────────── */

.bento-card__icon {
  font-size:   2.4rem;
  line-height: 1;
  margin:      auto 0 16px;
  opacity:     0.30;
}

.bento-card--bg-light-blue .bento-card__icon,
.bento-card--bg-white .bento-card__icon {
  color:   var(--blue);
  opacity: 0.25;
}

/* ── CONTENT ─────────────────────────────── */

.bento-card__content {
  margin-bottom: 16px;
}

.bento-card__title {
  font-size:      clamp(1rem, 1.6vw, 1.4rem);
  font-weight:    500;
  letter-spacing: -0.02em;
  line-height:    1.20;
  margin-bottom:  4px;
}

.bento-card--bg-light-blue .bento-card__title,
.bento-card--bg-white .bento-card__title {
  color: var(--text-primary);
}

.bento-card__sub {
  font-size:   12px;
  opacity:     0.55;
  line-height: 1.4;
}

/* ── STAT ────────────────────────────────── */

.bento-card__stat {
  display:        flex;
  align-items:    baseline;
  gap:            6px;
  padding-top:    12px;
  border-top:     1px solid rgba(255,255,255,0.14);
}

.bento-card--bg-light-blue .bento-card__stat,
.bento-card--bg-white .bento-card__stat {
  border-top-color: rgba(0,0,0,0.07);
}

.bento-card__stat-value {
  font-size:      1.5rem;
  font-weight:    700;
  letter-spacing: -0.04em;
  line-height:    1;
}

.bento-card--bg-light-blue .bento-card__stat-value,
.bento-card--bg-white .bento-card__stat-value {
  color: var(--blue);
}

.bento-card__stat-label {
  font-size:   11px;
  opacity:     0.65;
  line-height: 1.3;
}

/* ── SHIMMER ON HOVER ────────────────────── */

.bento-card::after {
  content:    "";
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.06) 0%,
    transparent 60%
  );
  opacity:    0;
  transition: opacity var(--t-base) ease;
  pointer-events: none;
  border-radius: inherit;
}

.bento-card:hover::after {
  opacity: 1;
}

/* ── RESPONSIVE — 1024px — TABLET ───────── */

@media (max-width: 1024px) {

  .bento-section {
    padding: 80px 40px 100px;
  }

  /* reset ALL grid placement — stack as 2 cols */
  .bento-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    none;
    gap:                   10px;
  }

  .bento-card {
    grid-column: auto !important;
    grid-row:    auto !important;
    min-height:  220px !important;
  }

  /* featured wide cards span full width */
  .bento-card--wide-center,
  .bento-card--tall,
  .bento-card--wide {
    grid-column: span 2 !important;
    min-height:  280px !important;
  }

}

/* ── RESPONSIVE — 768px — MOBILE ─────────── */

@media (max-width: 768px) {

  .bento-section {
    padding: 64px 20px 80px;
  }

  /* single column — everything stacks */
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .bento-card {
    grid-column: 1 !important;
    grid-row:    auto !important;
    min-height:  180px !important;
    padding:     20px;
    border-radius: 16px;
  }

  .bento-card__title {
    font-size:   1rem;
    line-height: 1.3;
  }

  .bento-card__sub {
    font-size: 12px;
  }

  .bento-card__stat-value {
    font-size: 1.4rem;
  }

  .bento-card__stat-label {
    font-size: 11px;
  }

  .bento-card__icon {
    font-size:     2rem;
    margin-bottom: 12px;
  }

  .bento-card__category {
    font-size: 10px;
  }

}