/**
 * Projekt: KamikStudio Theme
 * Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
 * Web: https://kamikstudio.pl
 * Email: biuro@kamikstudio.pl
 * Data: 2026-01-27
 * Wersja: 3.0
 * Opis: Style CSS - casestudy.css - Strona case study (wzorowane na dokumentacja.css)
 */

/* === ZMIENNE === */
.cs-page {--cs-bg: #ffffff;--cs-bg-alt: #f8fafc;--cs-bg-code: #1e293b;--cs-text: #1e293b;--cs-text-muted: #64748b;--cs-primary: var(--color-primary);--cs-primary-light: #1a4a6d;--cs-accent: var(--color-accent);--cs-success: #10b981;--cs-warning: #f59e0b;--cs-danger: #ef4444;--cs-border: #e2e8f0;--cs-radius: 8px;--cs-radius-lg: 12px}

/* === HERO === */
.cs-hero {padding: var(--spacing-4xl) 0 var(--spacing-3xl);background: linear-gradient(135deg, var(--cs-primary) 0%, var(--cs-primary-light) 100%);color: #ffffff}
.cs-breadcrumb {display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem;font-size: var(--font-size-sm);margin-bottom: var(--spacing-xl);opacity: 0.85}
.cs-breadcrumb a {color: inherit;text-decoration: none}
.cs-breadcrumb a:hover {text-decoration: underline}
.cs-breadcrumb span {opacity: 0.6}
.cs-hero__content {max-width: 800px}
.cs-hero__badge {display: inline-flex;gap: 0.5rem;margin-bottom: var(--spacing-md)}
.cs-hero__badge-cat, .cs-hero__badge-year {padding: 0.25rem 0.75rem;background: rgba(255,255,255,0.15);border-radius: var(--radius-full);font-size: var(--font-size-sm);font-weight: var(--font-weight-medium)}
.cs-hero__title {font-size: clamp(2rem, 5vw, 2.75rem);font-weight: var(--font-weight-bold);margin-bottom: var(--spacing-sm)}
.cs-hero__desc {font-size: var(--font-size-lg);opacity: 0.9;margin-bottom: var(--spacing-lg);line-height: 1.6}
.cs-hero__meta {display: flex;flex-wrap: wrap;gap: var(--spacing-lg);margin-bottom: var(--spacing-xl)}
.cs-hero__meta-item {display: flex;align-items: center;gap: 0.5rem;font-size: var(--font-size-sm);opacity: 0.85}
.cs-hero__meta-item svg {width: 18px;height: 18px;opacity: 0.7}
.cs-hero__actions {display: flex;flex-wrap: wrap;gap: var(--spacing-md)}

/* === LAYOUT === */
.cs-layout {padding: var(--spacing-3xl) 0}
.cs-layout__grid {display: grid;grid-template-columns: 260px 1fr;gap: var(--spacing-3xl)}

/* === SIDEBAR === */
.cs-sidebar {position: relative}
.cs-sidebar__sticky {position: sticky;top: calc(var(--nav-height) + 24px)}
.cs-sidebar__logo {padding: var(--spacing-lg);background: var(--cs-bg);border: 1px solid var(--cs-border);border-radius: var(--cs-radius-lg);margin-bottom: var(--spacing-md);text-align: center}
.cs-sidebar__logo img {max-width: 100%;max-height: 80px;width: auto;height: auto}
.cs-sidebar__title {font-size: var(--font-size-sm);font-weight: var(--font-weight-semibold);text-transform: uppercase;letter-spacing: 0.05em;color: var(--cs-text-muted);margin-bottom: var(--spacing-md)}
.cs-sidebar__details {background: var(--cs-bg);border: 1px solid var(--cs-border);border-radius: var(--cs-radius-lg);overflow: hidden}
.cs-sidebar__item {padding: 0.875rem 1rem;border-bottom: 1px solid var(--cs-border);display: flex;flex-direction: column;gap: 0.25rem}
.cs-sidebar__item:last-child {border-bottom: none}
.cs-sidebar__label {font-size: var(--font-size-xs);font-weight: var(--font-weight-semibold);text-transform: uppercase;letter-spacing: 0.04em;color: var(--cs-text-muted)}
.cs-sidebar__value {font-size: var(--font-size-sm);color: var(--cs-text);font-weight: var(--font-weight-medium);line-height: 1.4}
.cs-sidebar__cta {margin-top: var(--spacing-lg);padding: var(--spacing-md);background: var(--cs-bg-alt);border-radius: var(--cs-radius);text-align: center}
.cs-sidebar__cta p {font-size: var(--font-size-sm);color: var(--cs-text-muted);margin-bottom: 0.5rem}
.cs-sidebar__cta a {font-size: var(--font-size-sm);font-weight: var(--font-weight-medium);color: var(--cs-primary)}

/* === CONTENT === */
.cs-content {min-width: 0}

/* Hero Image */
.cs-content__hero-image {margin-bottom: var(--spacing-2xl);border-radius: var(--cs-radius-lg);overflow: hidden;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}
.cs-content__hero-image img {width: 100%;height: auto;display: block}

/* Sections */
.cs-section {margin-bottom: var(--spacing-3xl);padding-bottom: var(--spacing-3xl);border-bottom: 1px solid var(--cs-border)}
.cs-section:last-of-type {border-bottom: none}
.cs-section h2 {font-size: var(--font-size-2xl);font-weight: var(--font-weight-bold);color: var(--cs-text);margin-bottom: var(--spacing-lg);padding-top: var(--spacing-md)}
.cs-section h3 {font-size: var(--font-size-lg);font-weight: var(--font-weight-semibold);color: var(--cs-text);margin: var(--spacing-xl) 0 var(--spacing-md)}
.cs-section h4 {font-size: var(--font-size-base);font-weight: var(--font-weight-semibold);color: var(--cs-text);margin: var(--spacing-lg) 0 var(--spacing-sm)}
.cs-section p {color: var(--cs-text);line-height: 1.7;margin-bottom: var(--spacing-md)}
.cs-section ul, .cs-section ol {color: var(--cs-text);line-height: 1.7;margin-bottom: var(--spacing-md);padding-left: 1.5rem}
.cs-section li {margin-bottom: 0.5rem}
.cs-section code {padding: 0.125rem 0.375rem;background: var(--cs-bg-alt);border-radius: 4px;font-size: 0.875em;color: var(--cs-primary)}

/* Content Body (WordPress content) */
.cs-content__body h2 {font-size: var(--font-size-2xl);font-weight: var(--font-weight-bold);color: var(--cs-text);margin: var(--spacing-2xl) 0 var(--spacing-lg);padding-top: var(--spacing-md);border-top: 1px solid var(--cs-border)}
.cs-content__body h2:first-child {margin-top: 0;padding-top: 0;border-top: none}
.cs-content__body h3 {font-size: var(--font-size-lg);font-weight: var(--font-weight-semibold);color: var(--cs-text);margin: var(--spacing-xl) 0 var(--spacing-md)}
.cs-content__body h4 {font-size: var(--font-size-base);font-weight: var(--font-weight-semibold);color: var(--cs-text);margin: var(--spacing-lg) 0 var(--spacing-sm)}
.cs-content__body p {color: var(--cs-text);line-height: 1.7;margin-bottom: var(--spacing-md)}
.cs-content__body ul, .cs-content__body ol {color: var(--cs-text);line-height: 1.7;margin-bottom: var(--spacing-md);padding-left: 1.5rem}
.cs-content__body li {margin-bottom: 0.5rem}
.cs-content__body code {padding: 0.125rem 0.375rem;background: var(--cs-bg-alt);border-radius: 4px;font-size: 0.875em;color: var(--cs-primary)}
.cs-content__body strong {font-weight: var(--font-weight-semibold);color: var(--cs-text)}
.cs-content__body img {max-width: 100%;height: auto;border-radius: var(--cs-radius);margin: var(--spacing-lg) 0}

/* === COMPARISON (Before/After) === */
.cs-comparison {display: grid;grid-template-columns: 1fr 1fr;gap: var(--spacing-md);margin: var(--spacing-lg) 0}
.cs-comparison__item {padding: var(--spacing-lg);border-radius: var(--cs-radius-lg);display: flex;flex-direction: column;gap: 0.75rem}
.cs-comparison__item--before {background: rgba(239,68,68,0.05);border: 1px solid rgba(239,68,68,0.2)}
.cs-comparison__item--after {background: rgba(16,185,129,0.05);border: 1px solid rgba(16,185,129,0.2)}
.cs-comparison__label {font-size: var(--font-size-xs);font-weight: var(--font-weight-semibold);text-transform: uppercase;letter-spacing: 0.05em;margin-bottom: 0.5rem}
.cs-comparison__item--before .cs-comparison__label {color: var(--cs-danger)}
.cs-comparison__item--after .cs-comparison__label {color: var(--cs-success)}
.cs-comparison__item p {margin: 0;font-size: var(--font-size-sm);line-height: 1.6}

/* === TABLE === */
.cs-table-wrapper {overflow-x: auto;margin: var(--spacing-md) 0}
.cs-table {width: 100%;border-collapse: collapse;font-size: var(--font-size-sm)}
.cs-table th, .cs-table td {padding: 0.75rem 1rem;text-align: left;border-bottom: 1px solid var(--cs-border)}
.cs-table th {background: var(--cs-bg-alt);font-weight: var(--font-weight-semibold);color: var(--cs-text)}
.cs-table td {color: var(--cs-text)}
.cs-content__body table {width: 100%;border-collapse: collapse;font-size: var(--font-size-sm);margin: var(--spacing-md) 0}
.cs-content__body th, .cs-content__body td {padding: 0.75rem 1rem;text-align: left;border-bottom: 1px solid var(--cs-border)}
.cs-content__body th {background: var(--cs-bg-alt);font-weight: var(--font-weight-semibold);color: var(--cs-text)}

/* === FEATURES LIST === */
.cs-features {list-style: none;padding: 0;margin: var(--spacing-lg) 0}
.cs-features li {display: flex;align-items: flex-start;gap: 0.75rem;padding: 0.75rem 0;border-bottom: 1px solid var(--cs-border)}
.cs-features li:last-child {border-bottom: none}
.cs-features li svg {width: 20px;height: 20px;color: var(--cs-success);flex-shrink: 0;margin-top: 2px}
.cs-features li div {flex: 1}
.cs-features li strong {display: block;color: var(--cs-text);margin-bottom: 0.25rem}
.cs-features li span {font-size: var(--font-size-sm);color: var(--cs-text-muted)}

/* === STATS GRID === */
.cs-stats {display: grid;grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));gap: var(--spacing-md);margin: var(--spacing-lg) 0}
.cs-stat {padding: var(--spacing-lg);background: var(--cs-bg-alt);border-radius: var(--cs-radius-lg);text-align: center}
.cs-stat__value {font-size: var(--font-size-2xl);font-weight: var(--font-weight-bold);color: var(--cs-primary);margin-bottom: 0.25rem}
.cs-stat__label {font-size: var(--font-size-sm);color: var(--cs-text-muted)}

/* === CODE BLOCK === */
.cs-code {margin: var(--spacing-md) 0;border-radius: var(--cs-radius-lg);overflow: hidden;background: var(--cs-bg-code)}
.cs-code__header {padding: 0.5rem 1rem;background: rgba(255,255,255,0.05);border-bottom: 1px solid rgba(255,255,255,0.1)}
.cs-code__header span {font-size: var(--font-size-xs);font-weight: var(--font-weight-medium);color: rgba(255,255,255,0.6);text-transform: uppercase;letter-spacing: 0.05em}
.cs-code pre {margin: 0;padding: 1rem;overflow-x: auto}
.cs-code code {font-family: 'SF Mono', 'Fira Code', Consolas, monospace;font-size: 0.8125rem;line-height: 1.6;color: #e2e8f0;background: transparent;padding: 0}
.cs-content__body pre {margin: var(--spacing-md) 0;border-radius: var(--cs-radius-lg);overflow: hidden;background: var(--cs-bg-code);padding: 1rem}
.cs-content__body pre code {font-family: 'SF Mono', 'Fira Code', Consolas, monospace;font-size: 0.8125rem;line-height: 1.6;color: #e2e8f0;background: transparent;padding: 0}

/* === NOTICE === */
.cs-notice {display: flex;gap: 0.75rem;padding: var(--spacing-md);border-radius: var(--cs-radius);margin: var(--spacing-lg) 0}
.cs-notice svg {width: 20px;height: 20px;flex-shrink: 0;margin-top: 2px}
.cs-notice div {flex: 1}
.cs-notice strong {display: block;margin-bottom: 0.25rem}
.cs-notice p {margin: 0;font-size: var(--font-size-sm);line-height: 1.6}
.cs-notice--info {background: rgba(59,130,246,0.08);border: 1px solid rgba(59,130,246,0.2)}
.cs-notice--info svg {color: #3b82f6}
.cs-notice--success {background: rgba(16,185,129,0.08);border: 1px solid rgba(16,185,129,0.2)}
.cs-notice--success svg {color: var(--cs-success)}
.cs-notice--warning {background: rgba(245,158,11,0.08);border: 1px solid rgba(245,158,11,0.2)}
.cs-notice--warning svg {color: var(--cs-warning)}

/* === STEPS === */
.cs-steps {margin: var(--spacing-lg) 0}
.cs-step {display: flex;gap: var(--spacing-lg);padding: var(--spacing-lg) 0;border-bottom: 1px solid var(--cs-border)}
.cs-step:last-child {border-bottom: none}
.cs-step__number {width: 36px;height: 36px;background: var(--cs-primary);color: #ffffff;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: var(--font-weight-bold);font-size: var(--font-size-sm);flex-shrink: 0}
.cs-step__content {flex: 1;min-width: 0}
.cs-step__content h4 {font-size: var(--font-size-base);font-weight: var(--font-weight-semibold);color: var(--cs-text);margin: 0 0 0.5rem}
.cs-step__content p {font-size: var(--font-size-sm);color: var(--cs-text-muted);margin: 0}

/* === GALLERY === */
.cs-gallery {display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--spacing-md);margin: var(--spacing-lg) 0}
.cs-gallery--3col {grid-template-columns: repeat(3, 1fr)}
.cs-gallery__item {border-radius: var(--cs-radius-lg);overflow: hidden;border: 1px solid var(--cs-border)}
.cs-gallery__item img {width: 100%;height: auto;display: block}
.cs-gallery__caption {padding: 0.75rem;background: var(--cs-bg-alt);font-size: var(--font-size-sm);color: var(--cs-text-muted);text-align: center}

/* === QUOTE === */
.cs-quote {margin: var(--spacing-xl) 0;padding: var(--spacing-xl);background: var(--cs-bg-alt);border-radius: var(--cs-radius-lg);border-left: 4px solid var(--cs-primary)}
.cs-quote__text {font-size: var(--font-size-lg);font-style: italic;color: var(--cs-text);line-height: 1.7;margin-bottom: var(--spacing-md)}
.cs-quote__author {font-size: var(--font-size-sm);color: var(--cs-text-muted)}
.cs-quote__author strong {color: var(--cs-text);font-weight: var(--font-weight-semibold)}

/* === TECH STACK === */
.cs-tech {display: flex;flex-wrap: wrap;gap: 0.5rem;margin: var(--spacing-md) 0}
.cs-tech__item {padding: 0.5rem 1rem;background: var(--cs-bg-alt);border: 1px solid var(--cs-border);border-radius: var(--radius-full);font-size: var(--font-size-sm);font-weight: var(--font-weight-medium);color: var(--cs-text)}

/* === TIMELINE === */
.cs-timeline {margin: var(--spacing-lg) 0;padding-left: var(--spacing-lg);border-left: 2px solid var(--cs-border)}
.cs-timeline__item {position: relative;padding-bottom: var(--spacing-lg)}
.cs-timeline__item:last-child {padding-bottom: 0}
.cs-timeline__item::before {content: '';position: absolute;left: calc(-1 * var(--spacing-lg) - 5px);top: 4px;width: 10px;height: 10px;background: var(--cs-primary);border-radius: 50%}
.cs-timeline__date {font-size: var(--font-size-sm);font-weight: var(--font-weight-semibold);color: var(--cs-primary);margin-bottom: 0.25rem}
.cs-timeline__title {font-size: var(--font-size-base);font-weight: var(--font-weight-semibold);color: var(--cs-text);margin-bottom: 0.25rem}
.cs-timeline__desc {font-size: var(--font-size-sm);color: var(--cs-text-muted);line-height: 1.6}

/* === RESULTS GRID === */
.cs-results {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: var(--spacing-lg);margin: var(--spacing-lg) 0}
.cs-result {padding: var(--spacing-lg);background: var(--cs-bg);border: 1px solid var(--cs-border);border-radius: var(--cs-radius-lg)}
.cs-result__icon {width: 40px;height: 40px;background: rgba(16,185,129,0.1);border-radius: var(--cs-radius);display: flex;align-items: center;justify-content: center;margin-bottom: var(--spacing-sm)}
.cs-result__icon svg {width: 20px;height: 20px;color: var(--cs-success)}
.cs-result__title {font-size: var(--font-size-base);font-weight: var(--font-weight-semibold);color: var(--cs-text);margin-bottom: 0.25rem}
.cs-result__value {font-size: var(--font-size-sm);color: var(--cs-text-muted)}

/* === CONTENT FOOTER === */
.cs-content__footer {margin-top: var(--spacing-2xl);padding-top: var(--spacing-xl);border-top: 1px solid var(--cs-border);text-align: center}
.cs-content__footer p {font-size: var(--font-size-sm);color: var(--cs-text-muted);margin: 0}

/* === RELATED PROJECTS === */
.cs-related {padding: var(--spacing-3xl) 0;background: var(--cs-bg-alt)}
.cs-related__header {text-align: center;margin-bottom: var(--spacing-2xl)}
.cs-related__header h2 {font-size: var(--font-size-2xl);font-weight: var(--font-weight-bold);color: var(--cs-text);margin: 0 0 0.5rem}
.cs-related__header p {color: var(--cs-text-muted);margin: 0}
.cs-related__grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: var(--spacing-xl)}
.cs-related__card {background: var(--cs-bg);border: 1px solid var(--cs-border);border-radius: var(--cs-radius-lg);overflow: hidden;text-decoration: none;color: inherit;transition: all 0.2s ease}
.cs-related__card:hover {transform: translateY(-4px);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);border-color: var(--cs-primary)}
.cs-related__image {aspect-ratio: 16/10;overflow: hidden}
.cs-related__image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease}
.cs-related__card:hover .cs-related__image img {transform: scale(1.05)}
.cs-related__content {padding: var(--spacing-lg)}
.cs-related__content h3 {font-size: var(--font-size-lg);font-weight: var(--font-weight-semibold);color: var(--cs-text);margin: 0 0 var(--spacing-sm)}
.cs-related__link {display: inline-flex;align-items: center;gap: 0.5rem;font-size: var(--font-size-sm);font-weight: var(--font-weight-medium);color: var(--cs-primary)}
.cs-related__card:hover .cs-related__link {color: var(--cs-accent)}
.cs-related__link svg {transition: transform 0.15s ease}
.cs-related__card:hover .cs-related__link svg {transform: translateX(4px)}

/* === CTA SECTION === */
.cs-cta {padding: var(--spacing-3xl) 0;background: var(--cs-bg)}
.cs-cta__box {padding: var(--spacing-2xl);background: linear-gradient(135deg, var(--cs-primary) 0%, var(--cs-primary-light) 100%);border-radius: var(--cs-radius-lg);color: #ffffff;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: var(--spacing-xl)}
.cs-cta__content h2 {font-size: var(--font-size-xl);font-weight: var(--font-weight-bold);margin: 0 0 0.5rem}
.cs-cta__content p {margin: 0;opacity: 0.9}
.cs-cta__actions {display: flex;flex-wrap: wrap;gap: var(--spacing-md)}

/* === BUTTONS === */
.btn {display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.75rem 1.5rem;border-radius: var(--cs-radius);font-size: var(--font-size-base);font-weight: var(--font-weight-medium);text-decoration: none;cursor: pointer;border: none;transition: all 0.15s ease}
.btn--primary {background: var(--cs-accent);color: #ffffff}
.btn--primary:hover {background: #e55a2b;transform: translateY(-1px)}
.btn--outline {background: transparent;color: #ffffff;border: 2px solid rgba(255,255,255,0.3)}
.btn--outline:hover {background: rgba(255,255,255,0.1);border-color: rgba(255,255,255,0.5)}
.btn-outline-light {display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.75rem 1.5rem;background: transparent;color: #ffffff;border: 2px solid rgba(255,255,255,0.3);border-radius: var(--cs-radius);font-size: var(--font-size-base);font-weight: var(--font-weight-medium);text-decoration: none;transition: all 0.15s ease}
.btn-outline-light:hover {background: rgba(255,255,255,0.1);border-color: rgba(255,255,255,0.5)}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
.cs-layout__grid {grid-template-columns: 1fr}
.cs-sidebar {order: 2;margin-top: var(--spacing-2xl)}
.cs-sidebar__sticky {position: static}
.cs-content {order: 1}
.cs-related__grid {grid-template-columns: repeat(2, 1fr)}
.cs-gallery--3col {grid-template-columns: repeat(2, 1fr)}
}

@media (max-width: 768px) {
.cs-hero {padding: var(--spacing-3xl) 0 var(--spacing-2xl)}
.cs-hero__title {font-size: 1.75rem}
.cs-hero__meta {flex-direction: column;gap: var(--spacing-sm)}
.cs-hero__actions {flex-direction: column}
.cs-hero__actions .btn, .cs-hero__actions .btn--primary, .cs-hero__actions .btn--outline {width: 100%}
.cs-comparison {grid-template-columns: 1fr}
.cs-gallery, .cs-gallery--3col {grid-template-columns: 1fr}
.cs-step {flex-direction: column;gap: var(--spacing-md)}
.cs-related__grid {grid-template-columns: 1fr}
.cs-cta__box {flex-direction: column;text-align: center}
.cs-cta__actions {width: 100%;flex-direction: column}
.cs-cta__actions .btn, .cs-cta__actions .btn-outline-light {width: 100%}
}

@media (max-width: 480px) {
.cs-stats {grid-template-columns: repeat(2, 1fr)}
.cs-results {grid-template-columns: 1fr}
}