/* Strona główna – sekcja „Brzmi znajomo?” jako rozmowa: z lewej zdania klientów (dymki do wyboru),
   z prawej odpowiedź Adriana. Wszystkie odpowiedzi leżą w jednej komórce siatki, więc karta ma stałą wysokość
   i nic nie skacze przy zmianie. Bez JS widać wszystkie odpowiedzi jedna pod drugą. Reszta strony: assets/style.css */
.talk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:start}

/* Dymki klienta */
.talk__qs{display:flex;flex-direction:column;gap:10px}
.talk__q{position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  font-family:var(--f-display);font-weight:500;font-size:clamp(17px,1.35vw,20px);line-height:1.3;color:var(--ink);
  background:#fff;border:1px solid var(--mist-line);border-radius:14px 14px 14px 4px;padding:14px 46px 14px 18px;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.talk__q::after{content:"→";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:var(--f-text);color:var(--brass-deep);opacity:0;transition:opacity .2s,transform .2s var(--ease)}
.talk__q:hover{border-color:var(--ink)}
.talk__q:hover::after{opacity:1}
.talk__q[aria-selected="true"]{background:var(--petrol-900);color:var(--mist);border-color:var(--petrol-900)}
.talk__q[aria-selected="true"]::after{opacity:1;color:var(--brass);transform:translate(4px,-50%)}
.talk__q:focus-visible{outline:2px solid var(--brass-deep);outline-offset:3px}

/* Karta z odpowiedzią */
.talk__card{position:sticky;top:110px;background:var(--petrol-900);color:var(--mist);padding:clamp(24px,2.6vw,40px);border-radius:4px 18px 18px 18px;
  box-shadow:0 20px 50px -30px rgba(8,19,26,.55)}
.talk__who{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line-dark-soft)}
.talk__av{width:52px;height:52px;flex:none;border-radius:50%;overflow:hidden;background:#1d3a46;border:1px solid rgba(201,171,112,.55)}
.talk__av img{width:100%;height:auto;display:block;transform:translateY(2px) scale(1.35);transform-origin:50% 18%}
.talk__who b{display:block;font-weight:600;font-size:16px}
.talk__who small{display:block;font-size:13.5px;color:var(--jacket)}
.talk__a > p{margin:0 0 26px;font-size:clamp(18px,1.45vw,21px);line-height:1.55;color:#dfe5e8}
.talk__a:focus-visible{outline:2px solid var(--brass);outline-offset:6px}
.talk__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.talk__act .more-link{color:var(--mist);font-size:15px}
.talk__act .more-link::after{color:var(--brass)}
.talk__tel{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line-dark-soft);font-size:14.5px;color:var(--jacket)}
.talk__tel a{color:var(--mist);font-weight:600;white-space:nowrap;text-underline-offset:4px}

/* Z JS: jedna odpowiedź naraz, w tej samej komórce (karta ma wysokość najdłuższej odpowiedzi) */
.talk.is-js .talk__as{display:grid}
.talk.is-js .talk__a{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .25s var(--ease)}
.talk.is-js .talk__a.is-on{visibility:visible;opacity:1}
.talk:not(.is-js) .talk__a + .talk__a{margin-top:28px;padding-top:28px;border-top:1px solid var(--line-dark-soft)}
@media (prefers-reduced-motion:reduce){.talk__q,.talk.is-js .talk__a{transition:none}}

@media (max-width:1020px){
  .talk{grid-template-columns:1fr}
  .talk__card{position:static}
}
/* Telefon: dymki w jednym przewijanym rzędzie nad odpowiedzią */
@media (max-width:760px){
  .talk.is-js .talk__qs{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 10px;scrollbar-width:none}
  .talk.is-js .talk__qs::-webkit-scrollbar{display:none}
  .talk.is-js .talk__q{flex:0 0 78%;scroll-snap-align:start;font-size:17px;padding:13px 16px}
  .talk.is-js .talk__q::after{display:none}
  .talk__card{padding:22px 20px;border-radius:4px 14px 14px 14px}
  .talk__a > p{font-size:17px}
  .talk__act .btn{flex:1 1 100%}
}

/* Przycisk w ciemnej karcie: mosiężny jak na ciemnych sekcjach */
.talk__card .btn{background:var(--brass);color:var(--petrol-950);border-color:var(--brass)}
.talk__card .btn:hover{background:#d6ba82;border-color:#d6ba82}
/* Komputer: cała sekcja na jednym ekranie */
@media (min-width:1021px){
  .sec:has(> .wrap > .talk){padding:clamp(48px,7vh,96px) 0}
  .sec:has(> .wrap > .talk) .sec__head{margin-bottom:clamp(24px,3.5vh,44px)}
  .talk__qs{gap:8px}
  .talk__q{font-size:clamp(16px,1.25vw,18.5px);padding:12px 44px 12px 18px}
  .talk__who{padding-bottom:14px;margin-bottom:18px}
  .talk__tel{margin-top:20px;padding-top:14px}
}

/* ---------- Zespół – zapowiedź na stronie głównej (9.11.2026) ----------
   Komputer z myszką: rząd wysokich paneli; najechany (lub z fokusem) panel poszerza się i pokazuje imię, rolę i link.
   Pozostałe urządzenia: zwykła siatka kart z podpisem. */
.crew__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.crew__head > div{max-width:640px}
.crew__head h2{margin-bottom:16px}
.crew__head p:not(.mark){color:#cbd2d5;font-size:17px;margin:0}
.crew__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.crew__item{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--petrol-850);color:var(--mist);text-decoration:none;isolation:isolate}
.crew__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;transition:transform .7s var(--ease)}
.crew__item::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(8,19,26,0) 45%,rgba(8,19,26,.85) 100%)}
.crew__pion{display:none}
.crew__info{position:absolute;left:16px;right:16px;bottom:16px;z-index:1;display:flex;flex-direction:column;gap:2px}
.crew__name{font-family:var(--f-display);font-size:20px;line-height:1.2}
.crew__role{font-size:13px;color:#c3cbcf}
.crew__btn{display:none}
.crew__item:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media (min-width:1021px) and (hover:hover) and (pointer:fine){
  .crew__row{display:flex;gap:10px;height:clamp(440px,58vh,540px)}
  .crew__item{flex:1 1 0;aspect-ratio:auto;transition:flex-grow .7s var(--ease)}
  .crew__item:hover,.crew__item:focus-visible{flex-grow:3.2}
  .crew__item:hover img{transform:scale(1.04)}
  .crew__pion{display:block;position:absolute;left:50%;bottom:22px;z-index:1;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
    font-family:var(--f-display);font-size:26px;white-space:nowrap;transition:opacity .2s}
  .crew__info{right:auto;width:min(22rem,calc(100% - 32px));left:24px;bottom:24px;opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .25s ease,transform .4s var(--ease),visibility 0s .25s}
  .crew__name{font-size:30px}
  .crew__role{font-size:14px}
  .crew__btn{display:inline-flex;align-self:flex-start;margin-top:14px;padding:10px 18px;background:var(--brass);color:var(--petrol-950);font-size:14px;font-weight:600}
  .crew__item:hover .crew__pion,.crew__item:focus-visible .crew__pion{opacity:0}
  .crew__item:hover .crew__info,.crew__item:focus-visible .crew__info{opacity:1;visibility:visible;transform:none;transition-delay:.2s}
}
@media (max-width:600px){
  .crew__head .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .crew__item,.crew__item img,.crew__info{transition:none}
}