/* Trzy karty uslug — jak w referencji, lecz z kolorami i rytmem Mockupu v2. */

.services__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: end;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.services__intro h2 { margin-top: 14px; max-width: 16ch; }
.services__lede { color: var(--color-muted); max-width: 46ch; padding-bottom: 3px; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.service-card {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid rgba(11,36,57,.08);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.service-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.service-card__media { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.service-card__gallery { position: relative; isolation: isolate; background: var(--color-paper-warm); }
.service-card__media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
}
.service-card__gallery img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 560ms var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.service-card__gallery img.is-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .service-card:hover .service-card__gallery img.is-active { transform: scale(1.02); }
}

.service-card__content { display: flex; flex: 1; min-width: 0; flex-direction: column; padding: 24px 24px 22px; }
.service-card__title { font-size: clamp(1.7rem, 2.35vw, 2.35rem); max-width: 15ch; }
.service-card__summary { display: block; margin-top: 12px; color: var(--color-muted); font-size: .9375rem; line-height: 1.45; }
.service-card__list {
  display: grid;
  gap: 5px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: .8125rem;
  line-height: 1.35;
}
.service-card__list li { position: relative; padding-left: 15px; }
.service-card__list li::before { content: ""; position: absolute; left: 0; top: .48em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-ink); }
.service-card__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 22px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.service-card:hover .service-card__more .arrow { transform: translateX(3px); }
.service-card .arrow { transition: transform var(--dur-fast) var(--ease-out); }

@media (max-width: 899px) {
  .services__intro { grid-template-columns: 1fr; gap: var(--space-4); }
  .services__grid { grid-template-columns: 1fr; gap: 16px; }
  .service-card { display: grid; min-width: 0; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); }
  .service-card__media { aspect-ratio: auto; height: 100%; }
}

@media (max-width: 560px) {
  .service-card { display: flex; }
  .service-card__media { aspect-ratio: 16 / 10; height: auto; }
  .service-card__content { padding: 22px 20px; }
}

/* ==========================================================================
   Pas "Kurzfristig & Einmalig" (Express / jednorazowki) — 21.09.2026.
   Granatowa plaszczyzna jak inne ciemne bloki strony; nie jest czwarta karta,
   wiec nie rusza trojkolumnowej siatki uslug na zadnej szerokosci.
   ========================================================================== */

.express {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--space-6);
  padding: var(--space-7) var(--space-6);
  background: var(--color-ink-surface) url("../../img/express-background-1800.webp") center / cover no-repeat;
  color: var(--color-on-ink);
  border-radius: var(--radius-card);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}
.express::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11, 36, 57, .90), rgba(11, 36, 57, .80));
}
.express > * { position: relative; }

.express .eyebrow--light { color: var(--color-sand); }

.express h3 {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  line-height: 1.08;
  margin: var(--space-2) 0 var(--space-4);
  color: var(--color-on-ink);
}

.express__lede {
  color: var(--color-on-ink-muted);
  max-width: 54ch;
  margin-bottom: var(--space-5);
}

.express__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.express__list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-on-ink-muted);
  font-size: var(--step-small);
  line-height: 1.55;
}

.express__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 10px;
  height: 1px;
  background: var(--color-sand);
}

.express__list strong { color: var(--color-on-ink); font-weight: 600; }

.express__action { display: grid; gap: var(--space-4); justify-items: start; }

.express__action .btn--navy {
  background: var(--color-white);
  color: var(--color-ink);
  border-color: var(--color-white);
}
.express__action .btn--navy:hover { background: var(--color-sand-soft); border-color: var(--color-sand-soft); }

.express__note {
  font-size: var(--step-small);
  color: var(--color-on-ink-muted);
  max-width: 34ch;
}

@media (max-width: 900px) {
  .express {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-5);
  }
  .express { background-image: url("../../img/express-background-1000.webp"); }
  .express__action { justify-items: stretch; }
  .express__action .btn--navy { justify-content: center; }
  .express__note { max-width: none; }
}