/* Sybernetic v3 — price list (/cennik): link tabs, the price table, the rules at the bottom. */

.sy-price-hero { padding-bottom: clamp(20px, 1.5vw + 12px, 36px); }
.sy-prices { padding-top: 0; }

.sy-tabpanel__head { max-width: 46rem; margin-bottom: clamp(18px, 1vw + 12px, 28px); }
.sy-tabpanel__head h2 { font-size: var(--t-xl); }
.sy-tabpanel__head p { margin: 10px 0 0; color: var(--tx-2); }
main[aria-busy="true"] .sy-tabpanel { opacity: .45; transition: opacity var(--dur-1); }
.sy-tabpanel.is-entering { animation: sy-tab-in var(--dur-2) var(--ease-out); }
@keyframes sy-tab-in { from { opacity: 0; transform: translateY(8px); } }

/* Table: name | note | price on wide screens; on phones name and price share a line, the note goes below. */
.sy-ptable { width: 100%; border-collapse: collapse; }
.sy-ptable th, .sy-ptable td { padding: 18px 28px 18px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.sy-ptable thead th { padding-block: 0 12px; color: var(--tx-3); font: 600 var(--t-xs)/1.3 var(--ff-display); border-bottom-color: var(--line-2); }
.sy-ptable tbody th { width: 34%; color: var(--tx); font: 600 var(--t-md)/1.4 var(--ff-display); }
.sy-ptable tbody th a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--tx); text-decoration: underline; text-decoration-color: var(--ac-500); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.sy-ptable tbody th a:hover { color: var(--ac-300); text-decoration-thickness: 2px; }
.sy-ptable__note { color: var(--tx-2); font: 400 var(--t-sm)/1.55 var(--ff-text); }
.sy-ptable .sy-ptable__price { padding-right: 0; text-align: right; white-space: nowrap; }
.sy-ptable tbody .sy-ptable__price { color: var(--ac-300); font: 600 var(--t-lg)/1.3 var(--ff-head); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
    .sy-ptable, .sy-ptable tbody { display: block; }
    .sy-ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .sy-ptable tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
    .sy-ptable tbody th, .sy-ptable tbody td { width: auto; padding: 0; border: 0; }
    .sy-ptable tbody .sy-ptable__price { grid-area: 1 / 2; }
    .sy-ptable tbody .sy-ptable__note { grid-column: 1 / -1; }
    .sy-ptable tbody .sy-ptable__note:empty { display: none; }
}

.sy-price-note { margin: 16px 0 0; color: var(--tx-2); font-size: var(--t-sm); }
.sy-tabpanel__end { display: grid; gap: 28px; margin-top: clamp(28px, 2vw + 16px, 44px); }
.sy-price-more { margin: 0; color: var(--tx-2); font-family: var(--ff-display); }

@media (prefers-reduced-motion: reduce) { .sy-tabpanel.is-entering { animation: none; } }