/* ════════════════════════════════════════════════════════════
   DigiMATA — layout.css
   Lekka warstwa zastępująca używany podzbiór Bootstrapa 5.3
   (siatka, utilities, .btn, .card, .ratio). Bez JS.
   ════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* mini-reboot dla surowego HTML w blokach wp:html (po odpięciu Bootstrap reboot).
   Zerowa specyficzność (:where) + wykluczenie bloków WP — nie rusza bloków natywnych,
   a normalizuje nagłówki/akapity w surowym HTML (karty pobrań, usecase, skill itd.). */
:where(h1:not([class*="wp-"]),h2:not([class*="wp-"]),h3:not([class*="wp-"]),h4:not([class*="wp-"]),h5:not([class*="wp-"]),h6:not([class*="wp-"])) {
  margin-top: 0; margin-bottom: 0.5rem; line-height: 1.2;
}
:where(p:not([class*="wp-"])) { margin-top: 0; margin-bottom: 1rem; }

/* ── Container ── */
.container, .container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ── Grid (row / col) z gutterami jak w Bootstrapie ── */
.row {
  --gx: 1.5rem; --gy: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: stretch;
  row-gap: var(--gy);
  margin-inline: calc(-0.5 * var(--gx));
}
.row > * {
  flex-shrink: 0; width: 100%; max-width: 100%;
  padding-inline: calc(0.5 * var(--gx));
}
.g-0  { --gx: 0;     --gy: 0; }
.g-1  { --gx: .25rem;--gy: .25rem; }
.g-2  { --gx: .5rem; --gy: .5rem; }
.g-3  { --gx: 1rem;  --gy: 1rem; }
.g-4  { --gx: 1.5rem;--gy: 1.5rem; }
.g-5  { --gx: 3rem;  --gy: 3rem; }

.col { flex: 1 0 0%; }
.col-auto { width: auto; flex: 0 0 auto; }
[class*="col-"] { }
.col-12 { width: 100%; } .col-6 { width: 50%; } .col-4 { width: 33.3333%; }
.col-3 { width: 25%; } .col-8 { width: 66.6667%; } .col-9 { width: 75%; }

@media (min-width: 768px) {
  .col-md-3 { width: 25%; } .col-md-4 { width: 33.3333%; }
  .col-md-5 { width: 41.6667%; } .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.3333%; } .col-md-8 { width: 66.6667%; }
}
@media (min-width: 992px) {
  .col-lg-2 { width: 16.6667%; } .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.3333%; } .col-lg-5 { width: 41.6667%; }
  .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.3333%; }
  .col-lg-8 { width: 66.6667%; } .col-lg-10 { width: 83.3333%; }
}
@media (min-width: 1200px) {
  .col-xl-6 { width: 50%; }
}

/* ── Responsywność: gutter g-5 (-1.5rem na stronę) jest większy niż padding
   kontenera (1.25rem) na pełnoekranowym mobile → wiersz wychodził ~4px poza
   ekran (poziomy scroll). Na wąskich ekranach kolumny i tak są w jednej
   kolumnie, więc poziomy gutter zmniejszamy (pion/odstępy bez zmian). ── */
@media (max-width: 767.98px) {
  .row.g-5 { --gx: 2rem; }
}

/* ── Równa wysokość kart w wierszu (odpowiednik Bootstrap .h-100) ──
   Kolumna zawierająca kartę staje się flex-kolumną, a karta wypełnia
   wysokość (flex:1). Unika zawodnego height:100% wewnątrz flex-itemu. */
.row > *:has(> .why-card),
.row > *:has(> .tech-step-card),
.row > *:has(> .download-card),
.row > *:has(> .benefit-list-card),
.row > *:has(> .audience-card),
.row > *:has(> .package-card),
.row > *:has(> .usecase-tab-card) { display: flex; flex-direction: column; }

.row > * > .why-card,
.row > * > .tech-step-card,
.row > * > .download-card,
.row > * > .benefit-list-card,
.row > * > .audience-card,
.row > * > .package-card,
.row > * > .usecase-tab-card { flex: 1 1 auto; }

.justify-content-center  { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end     { justify-content: flex-end; }
.align-items-center      { align-items: center; }
.align-items-start       { align-items: flex-start; }

/* ── Flex / spacing / text utilities ── */
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; } .gap-4 { gap: 1.5rem; }

.text-center { text-align: center; }
.text-end { text-align: right; }
.text-white { color: #fff !important; }
.text-muted { color: #6c757d !important; }
.text-primary { color: #0d6efd !important; }
.text-secondary { color: #6c757d !important; }
.text-success { color: #198754 !important; }
.text-danger { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }
.text-info { color: #0dcaf0 !important; }
.bg-light { background-color: #f8f9fa !important; }
.bg-white { background-color: #fff !important; }
.fw-bold { font-weight: 700; }
.fst-italic { font-style: italic; }
.fs-4 { font-size: 1.5rem; }
.lead { font-size: 1.15rem; font-weight: 400; }
.list-unstyled { list-style: none; padding-left: 0; margin: 0; }
.text-decoration-none { text-decoration: none; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.img-fluid { max-width: 100%; height: auto; }
.rounded { border-radius: .375rem; }
.rounded-1 { border-radius: .25rem; }
.rounded-2 { border-radius: .375rem; }
.rounded-3 { border-radius: .5rem; }
.rounded-4 { border-radius: 1rem; }
.rounded-5 { border-radius: 2rem; }
.rounded-pill { border-radius: 50rem; }
.rounded-circle { border-radius: 50%; }
.badge { display: inline-block; padding: .35em .65em; font-size: .75em; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .375rem; }

/* ── Breadcrumb (jak Bootstrap; kolory dla page-header/blog-hero są w innych plikach) ── */
.breadcrumb { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.breadcrumb-item { display: flex; align-items: center; }
.breadcrumb-item + .breadcrumb-item { padding-left: .5rem; }
.breadcrumb-item + .breadcrumb-item::before { content: var(--bs-breadcrumb-divider, "/"); padding-right: .5rem; color: var(--bs-breadcrumb-divider-color, #6c757d); }
.breadcrumb-item.active { color: #6c757d; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.overflow-hidden { overflow: hidden; }
.visually-hidden, .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* margin / padding helpers (tylko używane warianty) */
.m-0 { margin: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 3rem; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; } .mb-5 { margin-bottom: 3rem; }
.me-1 { margin-right: .25rem; } .me-2 { margin-right: .5rem; }
.ms-1 { margin-left: .25rem; } .ms-2 { margin-left: .5rem; } .ms-auto { margin-left: auto; } .mx-auto { margin-inline: auto; }
.my-3 { margin-block: 1rem; } .py-3 { padding-block: 1rem; }
.px-2 { padding-inline: .5rem; } .px-3 { padding-inline: 1rem; } .px-4 { padding-inline: 1.5rem; } .p-0 { padding: 0; }
.p-1 { padding: .25rem; } .p-2 { padding: .5rem; } .p-3 { padding: 1rem; } .p-4 { padding: 1.5rem; } .p-5 { padding: 3rem; }
.py-1 { padding-block: .25rem; } .py-2 { padding-block: .5rem; } .py-4 { padding-block: 1.5rem; } .py-5 { padding-block: 3rem; }
.pt-1 { padding-top: .25rem; } .pt-2 { padding-top: .5rem; } .pt-3 { padding-top: 1rem; } .pt-4 { padding-top: 1.5rem; } .pt-5 { padding-top: 3rem; }
.pb-1 { padding-bottom: .25rem; } .pb-2 { padding-bottom: .5rem; } .pb-3 { padding-bottom: 1rem; } .pb-4 { padding-bottom: 1.5rem; } .pb-5 { padding-bottom: 3rem; }
@media (min-width: 992px) {
  .text-lg-end { text-align: right; }
  .ms-lg-3 { margin-left: 1rem; }
  .d-lg-block { display: block; }
  .d-lg-flex { display: flex; }
}

/* ── Buttons (baza Bootstrapa; warianty .btn-dm-* są w digimata.css) ── */
.btn {
  display: inline-block; font-weight: 400; line-height: 1.5; text-align: center;
  text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none;
  border: 1px solid transparent; padding: .375rem .75rem; font-size: 1rem; border-radius: .375rem;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.btn:focus { outline: 0; }
.btn-sm { padding: .25rem .5rem; font-size: .875rem; border-radius: .25rem; }
.btn-lg { padding: .5rem 1rem; font-size: 1.25rem; border-radius: .5rem; }
.btn-light { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
.btn-light:hover { background-color: #e2e6ea; }

/* ── Card ── */
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  word-wrap: break-word; background-color: #fff; background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125); border-radius: .375rem;
}
.card-body { flex: 1 1 auto; padding: 1rem; }
.card-title { margin-bottom: .5rem; }
.card-text:last-child { margin-bottom: 0; }
.card-footer { padding: 1rem; background-color: rgba(0,0,0,.03); border-top: 1px solid rgba(0,0,0,.125); }

/* ── Ratio (np. wideo) ── */
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; padding-top: var(--bs-aspect-ratio, 56.25%); content: ""; }
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.ratio-16x9 { --bs-aspect-ratio: 56.25%; }

/* ── Accordion (FAQ) — baza zastępująca Bootstrap, obsługa w theme.js ── */
.accordion-item { background: #fff; }
.accordion-header { margin: 0; }
.accordion-button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; border: 0; background: transparent;
  font: inherit; cursor: pointer;
}
.accordion-button::after {
  content: ""; flex-shrink: 0; width: 0.6em; height: 0.6em; margin-left: 1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s;
}
.accordion-button:not(.collapsed)::after { transform: rotate(-135deg); }
/* płynne rozwijanie (animacja rzeczywistej wysokości 0 ↔ scrollHeight; wysokość ustawia theme.js) */
.accordion-collapse { overflow: hidden; transition: height 0.32s ease; }
.accordion-collapse:not(.show) { height: 0; }
@media (prefers-reduced-motion: reduce) { .accordion-collapse { transition: none; } }

/* ── Drobne ── */
img { vertical-align: middle; }
a { text-decoration: none; }