/* S12 Rozmowa v3 (04.10): formularz z jednym polem (telefon) + klikalny numer Marka. v2/v1 w archiwum. Wcześniej: S12 Rozmowa v2 (04.10): granatowy kafel (.sek--granat), po lewej nagłówek + trzy kroki + Marek, po prawej biała karta formularza (.na-jasnym).
   Poprzednia forma: strona/archiwum-s12-v1/. */

.s12-uklad { align-items: start; row-gap: 40px; }
.s12-nagl { margin-bottom: 32px; }

/* trzy kroki „co dalej”: kółka z numerem połączone przerywaną linią (jak trasa w „Współpracy”) */
.s12-kroki { display: grid; margin: 0; padding: 0; list-style: none; }
.s12-kroki li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
.s12-kroki li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; border-left: 2px dashed rgba(255, 255, 255, .28); }
.s12-kroki__nr { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--cr-sygnal-ciemne); font-family: var(--cr-f-nagl); font-size: 1.0625rem; font-weight: 700; color: var(--cr-biel); }
.s12-kroki__t { padding-top: 7px; font-family: var(--cr-f-nagl); font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--cr-biel); }
.s12-kroki__o { margin-top: 4px; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .78); max-width: 44ch; }

.s12-marek { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); }
.s12-marek picture { flex: none; }
.s12-marek__foto { width: 64px; height: 64px; flex: none; object-position: 50% 20%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.s12-marek__imie { font-family: var(--cr-f-nagl); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--cr-biel); }
.s12-marek__rola { margin-top: 2px; font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.s12-marek { align-items: flex-start; }
.s12-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; font-family: var(--cr-f-nagl); font-size: 1.375rem; font-weight: 600; text-decoration: none; }
.s12-tel .i { width: 22px; height: 22px; color: var(--cr-sygnal-ciemne); }
.s12-tel { color: var(--cr-biel); }
.s12-tel .kopiuj__stan { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); font-size: .8125rem; }
.s12-tel.kopiuj--ok .kopiuj__stan, .s12-tel.kopiuj--ok:hover .kopiuj__stan { background: var(--cr-st-zatw-tlo); color: var(--cr-st-zatw); }
@media (hover: hover) and (pointer: fine) { .s12-tel:not(.kopiuj--ok):hover .kopiuj__stan { background: rgba(255, 255, 255, .22); color: var(--cr-biel); } .s12-tel:hover .tnum { text-decoration: underline; text-underline-offset: .2em; } }

/* karta: kalendarz (s12.js) + „albo” + jedno pole na numer */
.s12-karta { display: grid; gap: 24px; padding: 22px 16px; border: 0; box-shadow: 0 24px 48px -24px rgba(8, 16, 32, .55); }
@media (min-width: 768px) { .s12-karta { padding: 32px; } }
.s12-albo { display: flex; align-items: center; gap: 14px; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cr-tekst-2); }
.s12-albo::before, .s12-albo::after { content: ""; flex: 1; border-top: 1px solid var(--cr-linia); }
.s12-albo[hidden] { display: none; }
.s12-form { gap: 12px; }
.s12-form-gora { display: grid; gap: 2px; }
.s12-form-tytul { font-size: 1.25rem; line-height: 1.25; }
.s12-form-pod { font-size: 1rem; line-height: 1.5; color: var(--cr-tekst-2); }
/* pole telefonu i przycisk w jednej linii (od 600 px), niżej jedno pod drugim */
.s12-linia { display: grid; gap: 10px; }
.s12-linia .pole__input { min-height: 52px; }
.s12-wyslij { width: 100%; min-height: 52px; }
.s12-karta .btn--drugi { --btn-tlo: var(--cr-tlo); --btn-tekst: var(--cr-marka); --btn-obrys: var(--cr-marka); }
@media (min-width: 600px) {
  .s12-linia { grid-template-columns: minmax(0, 1fr) auto; }
  .s12-wyslij { width: auto; padding-inline: 22px; }
}

/* kalendarz (wzór: rezerwacja daplo.agency, kolory Crew) */
.s12-rez { display: grid; gap: 20px; container-type: inline-size; }
.s12-rez[hidden] { display: none; }
.s12-rez [data-fokus-start]:focus { outline: none; }
.s12-rez .i { width: 18px; height: 18px; flex: none; }
.bk-glowa { display: grid; gap: 10px; }
.bk-tytul { font-size: 1.5rem; line-height: 1.2; color: var(--cr-marka); }
.bk-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--cr-tekst-2); }
.bk-meta li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bk-meta .i { color: var(--cr-marka); }
.bk-termin { display: grid; gap: 20px; }
@container (min-width: 520px) { .bk-termin { grid-template-columns: minmax(0, 1fr) 170px; gap: 0; } .bk-termin > .bk-godz { border-left: 1px solid var(--cr-linia); padding-left: 24px; } .bk-termin > .bk-kal { padding-right: 24px; } }
.bk-kal__g { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bk-kal__mies { font-family: var(--cr-f-nagl); font-size: 1.25rem; font-weight: 600; color: var(--cr-marka); }
.bk-kal__mies span { color: var(--cr-tekst-2); font-weight: 500; }
.bk-kal__nav { display: flex; gap: 6px; }
.bk-kal__nav button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--cr-linia); border-radius: 10px; background: var(--cr-tlo); color: var(--cr-marka); cursor: pointer; }
.bk-kal__nav button:disabled { opacity: .35; cursor: default; }
.bk-kal__siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-kal__dn { text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cr-tekst-2); padding-bottom: 4px; }
.bk-kal__d { position: relative; height: 42px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--cr-papier-2); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cr-marka); cursor: pointer; }
.bk-kal__d:disabled { background: transparent; color: var(--cr-szkielet); font-weight: 400; cursor: default; }
.bk-kal__d--dzis::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--cr-sygnal-ciemne); }
.bk-kal__d[aria-pressed="true"] { background: var(--cr-marka); color: var(--cr-biel); }
.bk-kal__siatka--laduje .bk-kal__d { opacity: .5; }
.bk-godz__dz { min-height: 40px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; font-size: .9375rem; color: var(--cr-tekst-2); }
.bk-godz__dz b { font-family: var(--cr-f-nagl); font-size: 1.25rem; color: var(--cr-marka); }
.bk-sloty { display: grid; gap: 8px; max-height: 312px; overflow-y: auto; padding: 2px; }
@container (max-width: 519px) { .bk-sloty { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; } .bk-slot small { display: none; } }
.bk-slot { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 1px solid var(--cr-linia); border-radius: 10px; background: var(--cr-tlo); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cr-marka); cursor: pointer; }
.bk-slot:disabled { background: var(--cr-papier); color: var(--cr-tekst-2); font-weight: 500; cursor: default; }
.bk-slot small { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bk-pusto { font-size: .9375rem; line-height: 1.5; color: var(--cr-tekst-2); }
.bk-pusto a, .bk-blad a { color: var(--cr-marka); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .bk-kal__d:not(:disabled):not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1.5px var(--cr-marka); }
  .bk-slot:not(:disabled):hover { background: var(--cr-marka); border-color: var(--cr-marka); color: var(--cr-biel); }
  .bk-kal__nav button:not(:disabled):hover { border-color: var(--cr-marka); }
  .bk-wroc:hover { color: var(--cr-marka); }
}
/* krok dane */
.bk-wroc { display: inline-flex; align-items: center; gap: 8px; width: max-content; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--cr-tekst-2); cursor: pointer; }
.bk-kiedy { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 10px; background: var(--cr-papier); font-size: .9375rem; line-height: 1.45; }
.bk-kiedy .i { margin-top: 2px; color: var(--cr-marka); }
.bk-form { display: grid; gap: 16px; }
.bk-rzad { display: grid; gap: 16px; }
@container (min-width: 520px) { .bk-rzad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bk-potwierdz { width: 100%; min-height: 54px; }
.bk-blad:empty { display: none; }
.bk-blad { color: var(--cr-st-brak); font-weight: 600; font-size: .9375rem; }
/* gotowe */
.bk-ok { display: grid; justify-items: center; gap: 12px; padding: 12px 0 4px; text-align: center; }
.bk-ok__kolo { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--cr-st-zatw); color: var(--cr-biel); }
.s12-rez .bk-ok__kolo .i { width: 30px; height: 30px; }
.bk-podsum { padding: 10px 16px; border-radius: 10px; background: var(--cr-papier); font-weight: 600; color: var(--cr-marka); }
.bk-ok__pod { max-width: 46ch; font-size: .9375rem; line-height: 1.5; color: var(--cr-tekst-2); }

.s12-rodo { display: flex; align-items: flex-start; gap: 10px; padding-top: 16px; border-top: 1px solid var(--cr-linia); }
.s12-rodo .i { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--cr-marka); }
.s12-rodo p { font-size: .875rem; line-height: 1.5; color: var(--cr-tekst-2); }
.s12-rodo strong { color: var(--cr-tekst); }

.s12-karta .form-sukces .i { width: 28px; height: 28px; color: var(--cr-marka); }
.s12-karta .form-sukces p { font-size: 1.0625rem; line-height: 1.55; }

@media (min-width: 1024px) {
  .s12-lewa { padding-top: 8px; }
  .s12-nagl { margin-bottom: 40px; }
  .s12-karta { grid-column: 6 / span 7; }  /* jawne położenie karty (połączenie .d-7 + .d-od-6 z crew.css daje jedną kolumnę) */
}