/*
 * Section type: Hizmetler — Asimetrik Blok.
 * Loaded only when a "features-bento" section instance is placed on the
 * homepage (see inc/section-library.php). Reuses shared classes from
 * main.css (.sembo-container, .sembo-kicker, .sembo-section-heading,
 * .sembo-text-link) — only section-specific classes are defined here, all
 * scoped under .sembo-features-bento-*.
 */

.sembo-features-bento {
  padding: var(--sembo-section-padding, 96px) 0;
  background: var(--sembo-soft);
}

/* Bento grid: one flagship card spans 2 cols/2 rows, three small cards fill the rest. */
.sembo-features-bento__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.sembo-features-bento__card {
  padding: 32px;
  border-radius: var(--sembo-card-radius);
}

.sembo-features-bento__card--large {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--sembo-gradient);
  color: #fff;
  box-shadow: var(--sembo-shadow);
}

.sembo-features-bento__card--small {
  background: var(--sembo-surface);
  border: 1px solid var(--sembo-line);
}

.sembo-features-bento__title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: var(--sembo-heading-weight, 800);
  line-height: 1.25;
  color: #fff;
}

.sembo-features-bento__title--small {
  font-size: 18px;
  color: var(--sembo-ink);
}

.sembo-features-bento__text {
  margin: 0 0 18px;
  font-size: var(--sembo-font-size-base, 15px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.sembo-features-bento__text--small {
  margin-bottom: 0;
  color: var(--sembo-copy);
}

@media (max-width: 900px) {
  .sembo-features-bento__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .sembo-features-bento__card--large {
    grid-column: span 2;
    grid-row: auto;
  }
}

@media (max-width: 680px) {
  .sembo-features-bento__grid {
    grid-template-columns: 1fr;
  }

  .sembo-features-bento__card--large {
    grid-column: 1;
  }
}