/* „Jak wygląda współpraca?” (makieta V7 14; 15.10.2026) — _partials/home/cooperation-v2.tpl. Czarny moduł: 6 kafli kroków
   rozciągniętych do wysokości karty doradcy, karta z wyciętą postacią wychodzącą ponad górną krawędź. */
.co2 { background: #0d0d0d; color: #fff; }
.co2 *, .co2 *::before, .co2 *::after { box-sizing: border-box; }
.co2-in { padding-top: 48px; padding-bottom: 48px; }
.co2-title { margin: 0 0 14px; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.15; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.co2-row { display: grid; grid-template-columns: 1fr minmax(380px, 460px); gap: 20px; align-items: stretch; }
.co2-main { display: flex; flex-direction: column; min-width: 0; }
.co2-steps { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.co2-step { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 16px 14px; border: 1px solid #262626; border-radius: 10px; background: #161616; transition: border-color .2s ease; }
.co2-step:hover { border-color: var(--primary, #d50000); }
.co2-no { display: block; font-size: 22px; line-height: 1; font-weight: 800; letter-spacing: .01em; color: var(--primary, #d50000); }
.co2-ic { width: 30px; height: 30px; margin: 10px 0 auto; fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .85; transition: stroke .2s ease; }
.co2-step:hover .co2-ic { stroke: var(--primary, #d50000); opacity: 1; }
.co2-step-title { font-size: 14px; line-height: 1.25; font-weight: 800; color: #fff; }
.co2-step-desc { font-size: 12.5px; line-height: 1.45; color: #a8a8a8; min-height: 2.9em; }
.co2-arrow { position: absolute; z-index: 2; top: 50%; right: -16px; display: grid; place-items: center; width: 16px; height: 24px; transform: translateY(-50%); }
.co2-arrow svg { width: 16px; height: 16px; fill: none; stroke: #5a5a5a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.co2-card { position: relative; display: flex; padding: 18px 0 18px 22px; border: 1px solid #262626; border-radius: 10px; background: radial-gradient(120% 90% at 85% 100%, rgba(213, 0, 0, .38) 0%, rgba(213, 0, 0, .08) 45%, rgba(22, 22, 22, 0) 70%), #161616; }
.co2-card-txt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; width: 60%; }
.co2-card-title { margin: 0; white-space: nowrap; font-size: 15px; line-height: 1.15; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.co2-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.co2 .co2-bullets li { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0; min-height: 0; font-size: 12.5px; line-height: 1.35; color: #d6d6d6; }
.co2-bullets svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--primary, #d50000); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.co2 .co2-btn { display: inline-flex; justify-content: center; align-self: flex-start; margin-top: 4px; padding: 10px 18px; border-radius: 3px; background: var(--primary, #d50000); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .15s ease; }
.co2 .co2-btn:hover { background: #e81919; color: #fff; }
.co2-photo { position: absolute; z-index: 1; right: 0; bottom: 0; width: auto; height: calc(100% + 16px); max-width: 46%; object-fit: contain; object-position: right bottom; border-bottom-right-radius: 10px; pointer-events: none; }
@media (max-width: 1399.98px) { .co2-steps { gap: 12px; } .co2-step { padding: 14px 12px 12px; } .co2-arrow { right: -12px; width: 12px; } }
@media (max-width: 1199.98px) {
  .co2-row { grid-template-columns: 1fr; gap: 32px; }
  .co2-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .co2-step:nth-child(3n) .co2-arrow { display: none; }
  .co2-card { max-width: 560px; }
}
@media (max-width: 767.98px) {
  .co2-in { padding-top: 40px; padding-bottom: 40px; }
  .co2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .co2-step:nth-child(3n) .co2-arrow { display: grid; }
  .co2-step:nth-child(2n) .co2-arrow { display: none; }
  .co2-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .co2-arrow { right: -10px; width: 10px; }
  .co2-no { font-size: 24px; }
  .co2-ic { width: 30px; height: 30px; margin: 8px 0; }
  .co2-card { padding: 18px 0 18px 16px; }
  .co2-card-txt { width: 60%; }
  .co2-card-title { font-size: 16px; }
  .co2 .co2-bullets li { font-size: 12px; }
  .co2 .co2-btn { padding: 11px 14px; font-size: 11.5px; }
  .co2-photo { max-width: 46%; height: calc(100% + 20px); }
}

/* #5734: logotypy leasingu (EFL, Erste) w jednej linii pod kafelkami kroków, bez napisu (Andrzej 09.11) — białe, przygaszone */
.co2 .co2-leasing { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 16px 0 0; padding: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; }
.co2-leasing img { display: block; width: auto; opacity: .7; transition: opacity .2s ease; }
.co2-leasing img:hover { opacity: 1; }
.co2-leasing img.is-efl { height: 21px; }
.co2-leasing img.is-erste { height: 33px; }