/* df-flow.dev — sekcje treści (etap 3+): usługi, realizacje */

/* ---------- Szkielet sekcji ---------- */

.section {
  padding-block: var(--space-6);
}

.section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.section__header h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  letter-spacing: -0.01em;
}

.visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ---------- Usługi: karty ---------- */

.cards {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}

.card h3 {
  font-size: 1.1875rem;
  font-weight: 500;
}

.card p {
  color: var(--ink-soft);
}

@media (min-width: 48rem) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Realizacje: projekty ---------- */

.project {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-4) var(--space-5);
}

.project__tag {
  background: var(--green-tint);
  border-radius: 999px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.875rem;
  width: fit-content;
}

.project h3 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.5vw, 1.875rem);
  font-weight: 500;
  line-height: 1.25;
  max-width: 34ch;
}

.project__desc {
  color: var(--ink-soft);
  max-width: 72ch;
}

.project__facts {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* ---------- Realizacje: case studies ---------- */

.cases {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

.case {
  background: var(--navy-card);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.case:hover {
  border-color: var(--lime);
  transform: translateY(-2px);
}

.case h3 {
  color: var(--navy-text);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
}

.case__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.case__body dt {
  color: var(--navy-eyebrow);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-top: var(--space-2);
}

.case__body dt:first-child {
  margin-top: 0;
}

.case__body dd {
  color: var(--navy-text-soft);
  font-size: 0.9375rem;
}

.case__tech {
  border-top: 1px solid var(--navy-muted);
  color: var(--navy-muted-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-top: auto;
  padding-top: var(--space-2);
}

@media (min-width: 64rem) {
  .cases {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Rytm sekcji (§4) ---------- */

main > section {
  /* kotwice nie chowają się pod pływającą pastylką */
  scroll-margin-top: 5rem;
}

#roznica {
  background: var(--bg);
  border-block: 1px solid var(--border);
}

#proces {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

/* ---------- Case studies na granacie (§4) ---------- */

#case-studies {
  background: var(--navy);
}

/* ---------- Usługi na granacie (§4) ---------- */

#uslugi {
  background: var(--navy);
}

#uslugi .eyebrow {
  color: var(--navy-eyebrow);
}

#uslugi .section__header h2 {
  color: var(--navy-text);
}

#uslugi .card {
  background: var(--navy-card);
  border-color: var(--navy-border);
}

#uslugi .card:hover {
  border-color: var(--lime);
}

#uslugi .card h3 {
  color: var(--navy-text);
}

#uslugi .card p {
  color: var(--navy-text-soft);
}