/**
 * Case study (CPT portfolio_item) — single.css
 *
 * Utilities-first: reuse .th-container / .th-label / .th-btn / .th-card /
 * .th-card--shadow / .th-tag / .th-section--purple + global h1-h4/p (typografia).
 * Nowe .th-cs-* TYLKO dla layoutu i wzorców bez odpowiednika w style.css
 * (stat from→to, tabele danych, kroki, callout, FAQ <details>, before/after).
 *
 * Ładowane warunkowo: inc/enqueue.php → is_singular('portfolio_item').
 * Tokeny: assets/css/style.css :root. BEM. Desktop-first (max-width:768px = mobile).
 *
 * @package TopHat
 */

/* ─────────────────────────────────────────
   LOCAL TOKENS
   ───────────────────────────────────────── */
.th-cs {
    --cs-measure: 58rem; /* czytelna kolumna treści (≈928px); akapity i tak limit 65ch globalnie */
    display: block;
}

/* ─────────────────────────────────────────
   HERO (header.th-cs__hero) — body ma już padding-top:nav-height
   ───────────────────────────────────────── */
.th-cs__hero {
    padding-block: var(--space-3xl) var(--space-xl);
}

.th-cs__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--type-small);
    color: var(--gray-mid);
    margin-bottom: var(--space-lg);
}
.th-cs__breadcrumb a {
    color: var(--gray-mid);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out-expo);
}
.th-cs__breadcrumb a:hover { color: var(--purple); }

.th-cs__hero h1 {
    max-width: 18ch;
    margin: var(--space-xs) 0 0;
}

.th-cs__hero-cta {
    margin-top: var(--space-lg);
}

.th-cs__hero-media {
    margin-top: var(--space-2xl);
    border: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-offset-l);
    overflow: hidden;
}
.th-cs__hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ─────────────────────────────────────────
   BODY / CONTENT — jedna kolumna, gołe h2/h3/p z globalnej typografii
   ───────────────────────────────────────── */
.th-cs__body {
    padding-block: var(--space-2xl) var(--section-py);
}
.th-cs__content {
    max-width: var(--cs-measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* rytm pionowy między blokami treści */
.th-cs__content > * + * { margin-top: var(--space-lg); }
.th-cs__content > h2 { margin-top: var(--space-3xl); } /* powietrze przed nagłówkiem sekcji */
.th-cs__content > h2 + * { margin-top: var(--space-md); }
.th-cs__content > :first-child { margin-top: 0; }

/* lighthouse template-part wstrzyknięty przez [tophat_lighthouse] — neutralizuj
   zagnieżdżony .th-container (rodzic już daje gutter + measure) */
.th-cs__content .th-playground-n-lighthouse {
    margin-block: var(--space-2xl);
}
.th-cs__content .th-playground-n-lighthouse > .th-container {
    max-width: none;
    padding-inline: 0;
}

/* ─────────────────────────────────────────
   STATS — 3 liczby headline (kompozycja na .th-card .th-card--shadow)
   ───────────────────────────────────────── */
.th-cs-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}
.th-cs-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    border-radius: var(--radius-lg); /* radius-auto wymaga container — tu wprost */
}
.th-cs-stat__from {
    font-size: var(--type-small);
    color: var(--gray-mid);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--gray-mid), transparent 40%);
}
.th-cs-stat__to {
    font-size: var(--type-h2);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-heading);
    letter-spacing: var(--letter-spacing-m);
    color: var(--purple);
}
.th-cs-stat__label {
    font-size: var(--type-small);
    line-height: var(--lh-snug);
    color: var(--gray-dark);
}
@media (max-width: 768px) {
    .th-cs-stats { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   TABLES — porównania (co było / czym groziło) + wyniki
   ───────────────────────────────────────── */
.th-cs-table {
    width: 100%;
    border-collapse: collapse;
    border: var(--border-card);
    font-size: var(--type-body);
}
.th-cs-table th,
.th-cs-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid color-mix(in srgb, var(--black), transparent 88%);
}
.th-cs-table thead th {
    font-weight: var(--font-weight-medium);
    color: var(--black);
    background: var(--yellow);
    border-bottom: var(--border-card);
}
.th-cs-table tbody tr:last-child td { border-bottom: 0; }
.th-cs-table td { color: var(--gray-dark); }

/* wyniki — ostatnia kolumna „Zmiana" wyróżniona */
.th-cs-table--results td:last-child {
    font-weight: var(--font-weight-bold);
    color: var(--purple);
    white-space: nowrap;
}
@media (max-width: 768px) {
    .th-cs-table th,
    .th-cs-table td { padding: var(--space-xs) var(--space-sm); }
    .th-cs-table { font-size: var(--type-small); }
}

/* ─────────────────────────────────────────
   LISTY — global reset to list-style:none, więc przywracamy markery
   ───────────────────────────────────────── */
.th-cs-steps {
    counter-reset: th-cs-step;
    display: grid;
    gap: var(--space-md);
}
.th-cs-steps > li {
    counter-increment: th-cs-step;
    position: relative;
    padding-left: calc(var(--space-lg) + var(--space-xs));
    color: var(--gray-dark);
    line-height: var(--lh-body);
}
.th-cs-steps > li::before {
    content: counter(th-cs-step);
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-lg);
    height: var(--space-lg);
    font-size: var(--type-small);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--white);
    background: var(--purple);
    border: var(--border-card);
    border-radius: var(--radius-full);
}

.th-cs-craft {
    display: grid;
    gap: var(--space-sm);
}
.th-cs-craft > li {
    position: relative;
    padding-left: var(--space-md);
    color: var(--gray-dark);
    line-height: var(--lh-body);
}
.th-cs-craft > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: var(--space-xs);
    height: var(--space-xs);
    background: var(--purple);
    border-radius: var(--radius-bar);
}

/* ─────────────────────────────────────────
   CALLOUT — kompozycja na .th-card--shadow + akcent
   ───────────────────────────────────────── */
.th-cs-callout {
    border-left: var(--space-2xs) solid var(--purple);
    border-radius: var(--radius-md);
}
.th-cs-callout > * + * { margin-top: var(--space-sm); }
.th-cs-callout p { max-width: none; }

/* ─────────────────────────────────────────
   FAQ — natywne <details> (zero JS, lekko — w duchu case study)
   ───────────────────────────────────────── */
.th-cs-faq {
    display: grid;
    gap: var(--space-sm);
}
.th-cs-faq details {
    border: var(--border-card);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-offset-m);
}
.th-cs-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    line-height: var(--lh-snug);
    list-style: none;
}
.th-cs-faq summary::-webkit-details-marker { display: none; }
.th-cs-faq summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: var(--type-h3);
    font-weight: var(--font-weight-light);
    line-height: 1;
    color: var(--purple);
    transition: transform var(--duration-fast) var(--ease-out-expo);
}
.th-cs-faq details[open] summary::after { transform: rotate(45deg); }
.th-cs-faq details > p {
    margin: 0;
    padding: 0 var(--space-md) var(--space-md);
    color: var(--gray-dark);
    line-height: var(--lh-body);
}
.th-cs-faq summary:focus-visible {
    outline: var(--space-2xs) solid var(--purple);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────
   OUTLINK — link do żywej strony + usług
   ───────────────────────────────────────── */
.th-cs-outlink {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid color-mix(in srgb, var(--black), transparent 85%);
    font-size: var(--type-small);
    color: var(--gray-mid);
}
.th-cs-outlink a { color: var(--purple); }

/* ─────────────────────────────────────────
   QUOTE — cytat klienta (iteracja, w treści zakomentowany)
   ───────────────────────────────────────── */
.th-cs-quote {
    margin: 0;
    padding-left: var(--space-md);
    border-left: var(--space-2xs) solid var(--yellow);
}
.th-cs-quote p {
    font-size: var(--type-h3);
    font-weight: var(--font-weight-light);
    font-style: italic;
    color: var(--black);
}
.th-cs-quote cite {
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--type-small);
    font-style: normal;
    color: var(--gray-mid);
}

/* ─────────────────────────────────────────
   BEFORE / AFTER — pary PRZED/PO (iteracja: CSS gotowy, blok w treści zakomentowany)
   Tagi: kompozycja .th-tag + modyfikator koloru (utilities-first).
   ───────────────────────────────────────── */
.th-cs-ba-group {
    display: grid;
    gap: var(--space-2xl);
}
.th-cs-ba {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
.th-cs-ba__col {
    position: relative;
    border: var(--border-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
}
.th-cs-ba__col img {
    display: block;
    width: 100%;
    height: auto;
}
.th-cs-ba__tag {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 2;
}
.th-cs-ba__tag--before { color: var(--gray-dark); }
.th-cs-ba__tag--after { color: var(--purple); }
.th-cs-ba figcaption {
    grid-column: 1 / -1;
    margin-top: var(--space-xs);
    font-size: var(--type-small);
    color: var(--gray-mid);
}
@media (max-width: 768px) {
    .th-cs-ba { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   CTA KOŃCOWE — .th-section--purple daje kolory + flip przycisków
   ───────────────────────────────────────── */
.th-cs-cta {
    padding-block: var(--section-py);
    text-align: center;
}
.th-cs-cta .th-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}
.th-cs-cta p {
    max-width: 52ch;
    margin: 0;
}
.th-cs-cta .th-btn { margin-top: var(--space-xs); }