/* Case study Kortools — tylko wyjątki tego projektu. Wspólne sekcje i komponenty: case-studies/shared/style.css */

.glcs-landing.glcs-project-kortools { --glcs-brand: #edb200; --glcs-hero-bg: #e8e7ea; --glcs-hero-mobile-h: 244px; --glcs-wide-ratio: 1440 / 530; --glcs-wide-mobile-h: 144px; }

/* ---- Rozwiązania: diagram struktury konta (moduł 02) ---- */
.glcs-landing.glcs-project-kortools .kt-diagram { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; }
.glcs-landing.glcs-project-kortools .kt-diagram__root { margin: 0; padding: 14px 24px; background: #000; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.5; text-align: center; }
.glcs-landing.glcs-project-kortools .kt-diagram__stem { width: 2px; height: 24px; background: #be0505; }
.glcs-landing.glcs-project-kortools .kt-diagram__stem--short { height: 16px; }
.glcs-landing.glcs-project-kortools .kt-diagram__lines { width: min(560px, 100%); height: auto; }
.glcs-landing.glcs-project-kortools .kt-diagram__boxes { display: flex; justify-content: space-between; width: min(560px, 100%); }
.glcs-landing.glcs-project-kortools .kt-diagram__boxes li { display: flex; flex-direction: column; gap: 4px; width: 30%; padding: 14px 16px 16px; border: 1px solid #d6d6d6; border-top: 3px solid #be0505; background: #fff; }
.glcs-landing.glcs-project-kortools .kt-diagram__boxes span { color: #6b6b6b; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .88px; text-transform: uppercase; }
.glcs-landing.glcs-project-kortools .kt-diagram__boxes strong { color: #000; font-size: 16px; font-weight: 700; line-height: 1.5; }
.glcs-landing.glcs-project-kortools .kt-diagram__fit { width: min(560px, 100%); margin: 0; padding: 14px 20px; border-left: 4px solid #be0505; background: #f1f1f1; color: #000; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; }

/* ---- Efekty: wykresy ---- */
.glcs-landing.glcs-project-kortools .kt-bars { display: flex; flex-direction: column; }
.glcs-landing.glcs-project-kortools .kt-bars__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.glcs-landing.glcs-project-kortools .kt-bars__row span { color: #d6d6d6; font-size: 15px; font-weight: 500; line-height: 1.5; }
.glcs-landing.glcs-project-kortools .kt-bars__row strong { color: #fff; font-size: 22px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.glcs-landing.glcs-project-kortools .kt-bars__track { height: 32px; background: #2e3433; }
.glcs-landing.glcs-project-kortools .kt-bars__track + .kt-bars__row { margin-top: 26px; }
.glcs-landing.glcs-project-kortools .kt-bars__fill { display: block; width: var(--kt-share); height: 100%; background: #00ae57; }
.glcs-landing.glcs-project-kortools .kt-bars__fill--budget { background: #fff; }
.glcs-landing.glcs-project-kortools .glcs-result:nth-child(2) .glcs-result__proof { gap: 22px; }
.glcs-landing.glcs-project-kortools .kt-ratio { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0; padding-top: 20px; color: #fff; font-weight: 700; line-height: 1.5; }
.glcs-landing.glcs-project-kortools .kt-ratio__from { font-size: 54px; }
.glcs-landing.glcs-project-kortools .kt-ratio__arrow { width: 56px; height: 24px; }
.glcs-landing.glcs-project-kortools .kt-ratio__to { color: #00ae57; font-size: 64px; }
.glcs-landing.glcs-project-kortools .kt-ratio__rule { height: 1px; background: #3a403f; }
.glcs-landing.glcs-project-kortools .kt-ratio__formula { margin: 0; color: #d6d6d6; font-size: 16px; font-weight: 500; line-height: 1.5; }
.glcs-landing.glcs-project-kortools .kt-stack { display: flex; height: 56px; }
.glcs-landing.glcs-project-kortools .kt-stack__google { flex: 87 1 0; background: #00ae57; }
.glcs-landing.glcs-project-kortools .kt-stack__meta { flex: 13 1 0; background: #fff; }
.glcs-landing.glcs-project-kortools .kt-legend { display: flex; flex-direction: column; gap: 26px; }
.glcs-landing.glcs-project-kortools .kt-legend li { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #d6d6d6; font-size: 16px; font-weight: 500; line-height: 1.5; }
.glcs-landing.glcs-project-kortools .kt-legend__name { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; }
.glcs-landing.glcs-project-kortools .kt-legend__dot { flex: none; width: 14px; height: 14px; background: #fff; }
.glcs-landing.glcs-project-kortools .kt-legend__dot--google { background: #00ae57; }

@media (max-width: 1279px) {
    .glcs-landing.glcs-project-kortools .kt-ratio__from { font-size: 44px; }
    .glcs-landing.glcs-project-kortools .kt-ratio__to { font-size: 52px; }
}
@media (max-width: 767px) {
    .glcs-landing.glcs-project-kortools .kt-diagram { padding: 16px 12px; }
    .glcs-landing.glcs-project-kortools .kt-diagram__root { padding: 8px 14px; font-size: 12px; }
    .glcs-landing.glcs-project-kortools .kt-diagram__stem { height: 14px; }
    .glcs-landing.glcs-project-kortools .kt-diagram__stem--short { height: 10px; }
    .glcs-landing.glcs-project-kortools .kt-diagram__boxes li { gap: 2px; padding: 8px 8px 10px; }
    .glcs-landing.glcs-project-kortools .kt-diagram__boxes span { font-size: 9px; letter-spacing: .5px; }
    .glcs-landing.glcs-project-kortools .kt-diagram__boxes strong { font-size: 13px; }
    .glcs-landing.glcs-project-kortools .kt-diagram__fit { padding: 8px 12px; font-size: 12px; }
    .glcs-landing.glcs-project-kortools .kt-bars__row span { font-size: 14px; }
    .glcs-landing.glcs-project-kortools .kt-bars__row strong { font-size: 21px; }
    .glcs-landing.glcs-project-kortools .kt-bars__track + .kt-bars__row span { font-size: 12px; }
    .glcs-landing.glcs-project-kortools .kt-bars__track + .kt-bars__row strong { font-size: 19px; }
    .glcs-landing.glcs-project-kortools .kt-ratio { gap: 12px 18px; }
    .glcs-landing.glcs-project-kortools .kt-ratio__from, .glcs-landing.glcs-project-kortools .kt-ratio__to { font-size: 34px; }
    .glcs-landing.glcs-project-kortools .kt-stack { gap: 10px; }
    .glcs-landing.glcs-project-kortools .kt-legend li { font-size: 14px; }
    .glcs-landing.glcs-project-kortools .kt-legend__name { gap: 12px; font-size: 12px; }
}