/* „Mit vállalunk” blokkok: két hasábos kártyapár részletes felsorolással.
   A bérleti és a licencmodell melletti vállalásokat mutatja, egymás mellett. */

.vallalas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--gap);
  align-items: start;
}

.vallalas__karty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--r-tile);
  background: var(--f-card);
}

.vallalas__karty--sotet {
  background: var(--f-dark);
  color: var(--f-on-dark-strong);
}

@media (prefers-color-scheme: dark) {
  .vallalas__karty--sotet {
    outline: 1px solid var(--f-line);
    outline-offset: -1px;
  }
}

.vallalas__cimke {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.vallalas__karty h3 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
}

.vallalas__karty > p {
  color: var(--f-ink-soft);
  line-height: 1.55;
}

.vallalas__karty--sotet > p {
  color: var(--f-on-dark);
}

.vallalas__karty ul {
  display: grid;
  gap: 10px;
  font-size: 0.9375rem;
}

.vallalas__karty li {
  position: relative;
  padding-inline-start: 22px;
  line-height: 1.5;
  color: var(--f-ink-soft);
}

.vallalas__karty--sotet li {
  color: var(--f-on-dark);
}

.vallalas__karty li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--f-primary);
}

.vallalas__karty--sotet li::before {
  background: var(--f-sky);
}

.vallalas__karty li strong {
  color: var(--f-ink);
}

.vallalas__karty--sotet li strong {
  color: var(--f-on-dark-strong);
}

/* Halk zárómondat a kártya alján (pl. amit nem vállalunk). */
.vallalas__lab {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--f-line);
  font-size: 0.875rem;
  color: var(--f-ink-soft);
}

.vallalas__karty--sotet .vallalas__lab {
  border-top-color: var(--f-line-on-dark);
  color: var(--f-on-dark);
}