/**
 * Projekt: KamikStudio Theme
 * Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
 * Web: https://kamikstudio.pl
 * Email: biuro@kamikstudio.pl
 * Data: 2026-01-08
 * Wersja: 1.0
 * Opis: Style CSS - narzedzia.css.
 */
/**
 * KamikStudio - Narzędzia
 * @package KamikStudio
 * @version 1.0.2
 */

/* === ZMIENNE === */
.narzedzia-page {--narz-bg: var(--color-bg-light);--narz-bg-alt: var(--color-bg-gray);--narz-text: var(--color-text-primary);--narz-text-muted: var(--color-text-secondary);--narz-primary: var(--color-primary);--narz-primary-light: #1a4a6d;--narz-accent: var(--color-accent);--narz-success: #10b981;--narz-border: var(--color-border);--narz-card-bg: #ffffff;--narz-card-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);--narz-card-shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);--narz-radius: var(--radius-lg);--narz-radius-sm: var(--radius-md)}

/* === HERO === */
.narzedzia-hero {padding: var(--spacing-4xl) 0 var(--spacing-3xl);background: linear-gradient(135deg, var(--narz-primary) 0%, var(--narz-primary-light) 100%);color: #ffffff}
.narzedzia-breadcrumb {display: flex;align-items: center;gap: 0.5rem;font-size: var(--font-size-sm);margin-bottom: var(--spacing-xl);opacity: 0.8}
.narzedzia-breadcrumb a {color: inherit;text-decoration: none;transition: opacity var(--transition-fast)}
.narzedzia-breadcrumb a:hover {opacity: 1;text-decoration: underline}
.narzedzia-breadcrumb__sep {opacity: 0.5}
.narzedzia-hero__content {max-width: 700px}
.narzedzia-hero__badge {display: inline-block;padding: 0.375rem 1rem;background: rgba(255,255,255,0.15);border-radius: var(--radius-full);font-size: var(--font-size-sm);font-weight: var(--font-weight-medium);margin-bottom: var(--spacing-md);backdrop-filter: blur(4px)}
.narzedzia-hero__title {font-size: clamp(2rem, 5vw, 3rem);font-weight: var(--font-weight-bold);line-height: 1.2;margin-bottom: var(--spacing-md);color: #ffffff}
.narzedzia-hero__desc {font-size: var(--font-size-lg);line-height: 1.7;opacity: 0.9;margin-bottom: var(--spacing-xl)}
.narzedzia-hero__actions {display: flex;flex-wrap: wrap;gap: var(--spacing-md)}

/* === SEKCJE === */
.narzedzia-section {padding: var(--spacing-4xl) 0}
.narzedzia-section--alt {background: var(--narz-bg-alt)}
.narzedzia-section__header {text-align: center;max-width: 600px;margin: 0 auto var(--spacing-3xl)}
.narzedzia-section__badge {display: inline-block;padding: 0.25rem 0.75rem;border-radius: var(--radius-full);font-size: var(--font-size-xs);font-weight: var(--font-weight-semibold);text-transform: uppercase;letter-spacing: 0.05em;margin-bottom: var(--spacing-sm)}
.narzedzia-section__badge--free {background: rgba(16,185,129,0.1);color: var(--narz-success)}
.narzedzia-section__badge--ps {background: rgba(223,27,117,0.1);color: #df1b75}
.narzedzia-section__title {font-size: var(--font-size-3xl);font-weight: var(--font-weight-bold);color: var(--narz-text);margin-bottom: var(--spacing-sm)}
.narzedzia-section__desc {font-size: var(--font-size-lg);color: var(--narz-text-muted);line-height: 1.6}

/* === GRID === */
.narzedzia-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));gap: var(--spacing-xl)}
.narzedzia-grid--featured {grid-template-columns: 1fr;max-width: 600px;margin: 0 auto}

/* === KARTY === */
.narzedzia-card {background: var(--narz-card-bg);border-radius: var(--narz-radius);box-shadow: var(--narz-card-shadow);overflow: hidden;display: flex;flex-direction: column;transition: transform var(--transition-base), box-shadow var(--transition-base)}
.narzedzia-card:hover {transform: translateY(-4px);box-shadow: var(--narz-card-shadow-hover)}
.narzedzia-card__header {display: flex;align-items: flex-start;justify-content: space-between;padding: var(--spacing-lg) var(--spacing-lg) 0}
.narzedzia-card__icon {width: 56px;height: 56px;border-radius: var(--narz-radius-sm);display: flex;align-items: center;justify-content: center}
.narzedzia-card__icon svg {width: 28px;height: 28px}
.narzedzia-card__icon--free {background: rgba(16,185,129,0.1);color: var(--narz-success)}
.narzedzia-card__icon--ps {background: rgba(223,27,117,0.1);color: #df1b75}
.narzedzia-card__badge {padding: 0.25rem 0.625rem;border-radius: var(--radius-full);font-size: var(--font-size-xs);font-weight: var(--font-weight-semibold);background: var(--narz-accent);color: #ffffff}
.narzedzia-card__badge--free {background: var(--narz-success)}
.narzedzia-card__body {padding: var(--spacing-lg);flex: 1}
.narzedzia-card__title {font-size: var(--font-size-xl);font-weight: var(--font-weight-bold);color: var(--narz-text);margin-bottom: var(--spacing-sm)}
.narzedzia-card__desc {font-size: var(--font-size-base);color: var(--narz-text-muted);line-height: 1.6;margin-bottom: var(--spacing-md)}
.narzedzia-card__meta {display: flex;flex-wrap: wrap;gap: var(--spacing-md);margin-bottom: var(--spacing-md);padding-bottom: var(--spacing-md);border-bottom: 1px solid var(--narz-border)}
.narzedzia-card__meta-item {display: flex;align-items: center;gap: 0.375rem;font-size: var(--font-size-sm);color: var(--narz-text-muted)}
.narzedzia-card__meta-item svg {width: 16px;height: 16px;opacity: 0.7}
.narzedzia-card__features {list-style: none;padding: 0;margin: 0 0 var(--spacing-md)}
.narzedzia-card__features li {display: flex;align-items: flex-start;gap: 0.5rem;font-size: var(--font-size-sm);color: var(--narz-text);padding: 0.375rem 0}
.narzedzia-card__features li svg {width: 18px;height: 18px;color: var(--narz-success);flex-shrink: 0;margin-top: 1px}
.narzedzia-card__license {display: flex;align-items: center;gap: 0.5rem;font-size: var(--font-size-sm);color: var(--narz-text-muted);padding: var(--spacing-sm);background: var(--narz-bg-alt);border-radius: var(--narz-radius-sm);margin-top: auto}
.narzedzia-card__license svg {width: 16px;height: 16px;opacity: 0.7}
.narzedzia-card__footer {padding: var(--spacing-lg);border-top: 1px solid var(--narz-border);background: var(--narz-bg-alt)}
.narzedzia-card__price {margin-bottom: var(--spacing-md)}
.narzedzia-card__price-value {display: block;font-size: var(--font-size-2xl);font-weight: var(--font-weight-bold);color: var(--narz-text)}
.narzedzia-card__price-info {font-size: var(--font-size-sm);color: var(--narz-text-muted)}
.narzedzia-card__actions {display: flex;gap: var(--spacing-sm)}
.narzedzia-card__actions .btn {flex: 1}

/* === KARTA FEATURED === */
.narzedzia-card--featured {border: 2px solid var(--narz-success)}
.narzedzia-card--featured .narzedzia-card__footer {background: rgba(16,185,129,0.05)}

/* === KARTA COMING SOON (produkt) === */
.narzedzia-card--coming-soon {border: 2px dashed var(--narz-border);background: var(--narz-bg-alt)}
.narzedzia-card--coming-soon:hover {transform: none;box-shadow: var(--narz-card-shadow)}
.narzedzia-card--coming-soon .narzedzia-card__badge {background: var(--narz-text-muted)}
.narzedzia-card--coming-soon .narzedzia-card__title {color: var(--narz-text-muted)}
.narzedzia-card--coming-soon .narzedzia-card__features li svg {color: var(--narz-text-muted);opacity: 0.5}
.narzedzia-card--coming-soon .narzedzia-card__footer {display: flex;flex-direction: column;gap: 0.5rem}

/* === BUTTON DISABLED === */
.btn--disabled {background: var(--narz-border);color: var(--narz-text-muted);cursor: not-allowed;opacity: 0.7}
.btn--disabled:hover {background: var(--narz-border);transform: none}

/* === KARTA PLACEHOLDER === */
.narzedzia-card--coming {background: var(--narz-card-bg);border: 2px dashed var(--narz-border);display: flex;align-items: center;justify-content: center;min-height: 400px}
.narzedzia-card--coming:hover {transform: none;box-shadow: var(--narz-card-shadow)}
.narzedzia-card__coming-content {text-align: center;padding: var(--spacing-xl);max-width: 280px}
.narzedzia-card__coming-content svg {width: 48px;height: 48px;color: var(--narz-text-muted);opacity: 0.5;margin-bottom: var(--spacing-md)}
.narzedzia-card__coming-content h3 {font-size: var(--font-size-lg);font-weight: var(--font-weight-semibold);color: var(--narz-text);margin-bottom: var(--spacing-sm)}
.narzedzia-card__coming-content p {font-size: var(--font-size-sm);color: var(--narz-text-muted);line-height: 1.6;margin-bottom: var(--spacing-md)}

/* === SEKCJA WHY === */
.narzedzia-why {padding: var(--spacing-4xl) 0;background: var(--narz-bg)}
.narzedzia-why__grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: var(--spacing-xl)}
.narzedzia-why__item {text-align: center;padding: var(--spacing-lg)}
.narzedzia-why__icon {width: 64px;height: 64px;margin: 0 auto var(--spacing-md);background: rgba(15,51,84,0.08);border-radius: var(--radius-lg);display: flex;align-items: center;justify-content: center}
.narzedzia-why__icon svg {width: 28px;height: 28px;color: var(--narz-primary)}
.narzedzia-why__item h3 {font-size: var(--font-size-lg);font-weight: var(--font-weight-semibold);color: var(--narz-text);margin-bottom: var(--spacing-sm)}
.narzedzia-why__item p {font-size: var(--font-size-base);color: var(--narz-text-muted);line-height: 1.6}

/* === CTA === */
.narzedzia-cta {padding: var(--spacing-4xl) 0;background: linear-gradient(135deg, var(--narz-primary) 0%, var(--narz-primary-light) 100%);color: #ffffff}
.narzedzia-cta__content {text-align: center;max-width: 600px;margin: 0 auto}
.narzedzia-cta__content h2 {font-size: var(--font-size-3xl);font-weight: var(--font-weight-bold);margin-bottom: var(--spacing-md);color: #ffffff}
.narzedzia-cta__content p {font-size: var(--font-size-lg);opacity: 0.9;line-height: 1.6;margin-bottom: var(--spacing-xl)}
.narzedzia-cta__actions {display: flex;flex-wrap: wrap;justify-content: center;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(--radius-md);font-size: var(--font-size-base);font-weight: var(--font-weight-medium);text-decoration: none;cursor: pointer;border: none;transition: all var(--transition-fast)}
.btn svg {width: 18px;height: 18px}
.btn--primary {background: var(--narz-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--ghost {background: transparent;color: var(--narz-primary);border: 1px solid var(--narz-border)}
.btn--ghost:hover {background: var(--narz-bg-alt);border-color: var(--narz-primary)}
.btn--full {width: 100%}
.btn--sm {padding: 0.5rem 1rem;font-size: var(--font-size-sm)}
.btn--lg {padding: 1rem 2rem;font-size: var(--font-size-lg)}

/* === UTILITY === */
.text-accent {color: var(--narz-accent)}

/* === RESPONSIVE === */
@media (max-width: 768px) {
.narzedzia-hero {padding: var(--spacing-3xl) 0 var(--spacing-2xl)}
.narzedzia-hero__title {font-size: 1.75rem}
.narzedzia-hero__actions {flex-direction: column}
.narzedzia-hero__actions .btn {width: 100%}
.narzedzia-section {padding: var(--spacing-3xl) 0}
.narzedzia-grid {grid-template-columns: 1fr;gap: var(--spacing-lg)}
.narzedzia-why__grid {grid-template-columns: 1fr 1fr;gap: var(--spacing-lg)}
.narzedzia-cta__content h2 {font-size: var(--font-size-2xl)}
.narzedzia-cta__actions {flex-direction: column}
.narzedzia-cta__actions .btn {width: 100%}
}

@media (max-width: 480px) {
.narzedzia-why__grid {grid-template-columns: 1fr}
.narzedzia-card__actions {flex-direction: column}
}