/* ==========================================================================
   Rozszerzenia szablonu rozwiązania: warianty, proces, pytania, galeria
   i formularz wyceny (Pracownie językowe, Biurka).

   Podstawowy wygląd strony rozwiązania (hero, atuty, karty) jest w program.css —
   tu wyłącznie sekcje, których strzelnice i legitymacje nie używają.

   Plik ładuje się na KAŻDEJ stronie z szablonem rozwiązania, dlatego reguły
   dotyczące wspólnych elementów (hero, atuty, pytania) są zamknięte pod
   `.avm-rozw--pelna` — tę klasę szablon dodaje tylko stronom z wariantami
   albo formularzem. Gradienty wpisane dosłownie: Critical CSS LiteSpeeda
   gubi `var()` wewnątrz gradientów.
   ========================================================================== */

/* Przyciski „Skonfiguruj” i „Poproś o wycenę” przewijają do formularza —
   płynnie, żeby było widać, że strona nie przeładowała się, tylko zjechała. */
html:has(.avm-rozw--pelna){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html:has(.avm-rozw--pelna){scroll-behavior:auto} }

/* ——— hero: lista zalet i panel „w skrócie” ——— */
.avm-rozw__punkty{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.avm-rozw__punkty li{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:600;line-height:1.45}
.avm-rozw__punkty i{color:var(--avm-ko);margin-top:3px}

.avm-rozw--pelna .avm-rozw__hero .avm-btn i{margin-right:4px}

/* Zdjęcia z realizacji są panoramiczne (1024×458) — kadr 4:3 z program.css
   ucinał po bokach połowę sali. 16:10 zostawia stanowiska w kadrze. */
.avm-rozw--pelna .avm-rozw__foto img{aspect-ratio:16/10}

.avm-rozw__skrot{
  background:linear-gradient(135deg,#2563eb 0%,#1e3a8a 100%);color:#fff;
  border-radius:14px;padding:32px;position:relative;overflow:hidden;
}
/* Delikatny rysunek w tle — bez niego panel wyglądał jak płaski blok koloru. */
.avm-rozw__skrot::after{
  content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 70%);pointer-events:none;
}
.avm-rozw__skrot h2{
  margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#bfdbfe;
}
.avm-rozw__skrot ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.avm-rozw__skrot li{display:flex;align-items:center;gap:14px;font-size:16px;font-weight:600;line-height:1.4}
.avm-rozw__skrot-ikona{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.14);color:#facc15;font-size:17px;
}

/* ——— atuty: trzy kafle na całą szerokość zamiast trzech z czterech kolumn ——— */
@media (min-width:1101px){
  .avm-rozw--pelna .avm-rozw__atuty--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ——— nagłówek sekcji na szarym tle ——— */
.avm-rozw__naglowek{margin:40px 0 18px}
.avm-rozw__naglowek h2{font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.025em;margin:0}

/* ——— warianty ——— */
.avm-rozw__warianty-siatka{display:grid;gap:16px;align-items:stretch}
.avm-rozw__warianty-siatka--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.avm-rozw__warianty-siatka--n3{grid-template-columns:repeat(3,minmax(0,1fr))}

.avm-rozw__wariant{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border-radius:var(--avm-radius);padding:28px;
  border:2px solid transparent;transition:border-color .2s ease, box-shadow .2s ease;
}
.avm-rozw__wariant:hover{border-color:#bfdbfe}
.avm-rozw__wariant--wyr,
.avm-rozw__wariant--wyr:hover{border-color:var(--avm-ko);box-shadow:0 22px 44px -26px rgba(37,99,235,.6)}
.avm-rozw__wariant-wyr{
  position:absolute;top:-13px;left:26px;display:inline-flex;align-items:center;gap:6px;
  background:#facc15;color:#3a2a00;border-radius:999px;padding:5px 12px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.avm-rozw__wariant-wyr i{font-size:10px}

.avm-rozw__wariant-glowa{display:flex;align-items:center;gap:14px}
.avm-rozw__wariant-glowa .avm-rozw__atut-ikona{margin:0;flex:0 0 auto;width:48px;height:48px;font-size:19px}
.avm-rozw__wariant h3{font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin:0}
.avm-rozw__wariant-podpis{
  display:inline-flex;align-items:center;gap:7px;margin-top:8px;
  background:#eff6ff;color:#1e40af;border-radius:999px;padding:4px 11px;font-size:13px;font-weight:700;
}
.avm-rozw__wariant-podpis i{font-size:11px}
.avm-rozw__wariant-opis{margin:16px 0 0;font-size:15px;line-height:1.65;color:#374151}

.avm-rozw__cechy{list-style:none;margin:18px 0 0;padding:0}
.avm-rozw__cechy li{
  display:flex;align-items:flex-start;gap:11px;
  padding:10px 0;border-bottom:1px solid var(--avm-lin);font-size:15px;line-height:1.5;
}
.avm-rozw__cechy li:last-child{border-bottom:0}
.avm-rozw__cechy li > i{color:var(--avm-ko);margin-top:4px;font-size:13px;width:14px;text-align:center}
/* Specyfikacja jako dwie kolumny: nazwa parametru wyszarzona, wartość mocniej —
   oko przebiega po wartościach, a nie po powtarzających się etykietach. */
.avm-rozw__cecha--para{display:grid !important;grid-template-columns:minmax(120px,40%) minmax(0,1fr);gap:14px}
.avm-rozw__cecha--para span{color:var(--avm-mut)}
.avm-rozw__cecha--para b{font-weight:600}

.avm-rozw__wymiary{display:grid;gap:12px;margin-top:18px}
.avm-rozw__wymiar-t{
  display:block;margin-bottom:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--avm-mut);
}
.avm-rozw__wymiar dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.avm-rozw__wymiar dl > div{background:#f3f4f6;border-radius:10px;padding:11px 13px}
.avm-rozw__wymiar dt{font-size:12px;color:var(--avm-mut)}
.avm-rozw__wymiar dd{margin:3px 0 0;font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Przycisk przyklejony do dołu karty — w jednym rzędzie wszystkie na tej samej wysokości. */
.avm-rozw__wariant-stopa{margin-top:auto;padding-top:24px}
.avm-rozw__wariant-stopa .avm-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 20px}
.avm-rozw__wariant-stopa .avm-btn i{font-size:12px;transition:transform .2s ease}
.avm-rozw__wariant:hover .avm-rozw__wariant-stopa .avm-btn i{transform:translateX(3px)}
.avm-rozw__btn-jasny{background:#eff6ff;color:var(--avm-ko)}
.avm-rozw__btn-jasny:hover{background:var(--avm-ko);color:#fff}

.avm-rozw__notka{
  display:flex;align-items:center;gap:12px;margin:16px 0 0;
  background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--avm-radius);
  padding:15px 20px;font-size:15px;font-weight:700;color:#14532d;
}
.avm-rozw__notka i{color:var(--avm-zi);font-size:18px}

/* ——— jak pracujemy ——— */
.avm-rozw__proces{background:#fff;border-radius:var(--avm-radius);padding:32px;margin-top:16px}
.avm-rozw__proces h2{font-size:20px;font-weight:800;margin:0 0 26px;letter-spacing:-.015em}
.avm-rozw__kroki{
  list-style:none;margin:0;padding:0;counter-reset:rozw-krok;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;
}
.avm-rozw__krok{position:relative;counter-increment:rozw-krok}
.avm-rozw__krok::before{
  content:counter(rozw-krok);position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#fff;
  font-size:16px;font-weight:800;box-shadow:0 0 0 6px #eff6ff;
}
/* Łącznik między numerami — czyta się jako ścieżka, a nie cztery luźne kafle. */
.avm-rozw__krok:not(:last-child)::after{
  content:"";position:absolute;top:20px;left:58px;right:-14px;height:2px;
  background:linear-gradient(90deg,#bfdbfe 0%,#e5e7eb 100%);
}
.avm-rozw__krok b{display:block;margin-top:18px;font-size:16px;font-weight:700}
.avm-rozw__krok span{display:block;margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--avm-mut)}

/* ——— formularz ——— */
/* Nagłówek strony jest przypięty (~240 px), więc bez odsunięcia kotwica
   chowałaby tytuł sekcji pod nim. */
.avm-rozw__form{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;
  margin-top:16px;scroll-margin-top:256px;align-items:stretch;
}
.admin-bar .avm-rozw__form{scroll-margin-top:288px}

.avm-rozw__form-info{
  background:linear-gradient(135deg,#2563eb 0%,#1e3a8a 100%);color:#fff;
  border-radius:var(--avm-radius);padding:36px;display:flex;flex-direction:column;
}
.avm-rozw__form-ikona{
  display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;
  background:rgba(255,255,255,.14);color:#facc15;font-size:19px;margin-bottom:18px;
}
.avm-rozw__form-info h2{font-size:clamp(23px,2.4vw,30px);font-weight:800;letter-spacing:-.025em;margin:0}
.avm-rozw__form-info > p{margin:12px 0 0;font-size:16px;line-height:1.65;color:#dbeafe}
.avm-rozw__form-info > p strong{color:#fff}
.avm-rozw__form-info h3{margin:26px 0 12px;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#bfdbfe}
.avm-rozw__otrzymasz{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.avm-rozw__otrzymasz li{display:flex;gap:11px;align-items:flex-start;font-size:15px;font-weight:600;line-height:1.45}
.avm-rozw__otrzymasz i{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#facc15;color:#3a2a00;font-size:11px;margin-top:-1px;
}

.avm-rozw__kontakty{display:grid;gap:10px;margin-top:auto;padding-top:28px}
.avm-rozw__kontakt{
  display:flex;align-items:center;gap:14px;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:11px;padding:13px 16px;
  transition:background .2s ease;
}
.avm-rozw__kontakt:hover{background:rgba(255,255,255,.18);color:#fff}
.avm-rozw__kontakt > i{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:#facc15;color:#3a2a00;font-size:15px;
}
.avm-rozw__kontakt small{display:block;font-size:12.5px;color:#bfdbfe}
.avm-rozw__kontakt b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}

.avm-rozw__form-karta{background:#fff;border-radius:var(--avm-radius);padding:32px;min-width:0}
.avm-rozw__form-brak{margin:0;font-size:15.5px}
.avm-rozw__form-brak a{color:var(--avm-ko);font-weight:700}

/* Formularze wtyczek (pracownia-formularz, biurka-formularz_v2) — ich własny arkusz
   rysuje szarą kartę w stylu Blocksy; tu dopasowanie do motywu. Wszystko zamknięte
   pod kartą sekcji, więc na innych stronach formularze zostają bez zmian. */
.avm-rozw__form-karta .pf-card,
.avm-rozw__form-karta .bf-card{background:transparent;border:0;border-radius:0;padding:0}
.avm-rozw__form-karta .pf-grid,
.avm-rozw__form-karta .bf-grid{gap:12px}
/* Imię na całą szerokość wyrównuje biurka do par (7 pól), a w obu formularzach
   pole wiadomości zajmowało tylko połowę wiersza. */
.avm-rozw__form-karta .bf-grid > :first-child,
.avm-rozw__form-karta .pf-textarea,
.avm-rozw__form-karta .bf-textarea{grid-column:1 / -1}

.avm-rozw__form-karta .pf-input,
.avm-rozw__form-karta .pf-textarea,
.avm-rozw__form-karta .bf-input,
.avm-rozw__form-karta .bf-textarea{
  width:100%;background:#f9fafb;border:1px solid #d1d5db;border-radius:10px;
  padding:13px 15px;font-size:15px;line-height:1.4;color:var(--avm-tx);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.avm-rozw__form-karta .pf-input::placeholder,
.avm-rozw__form-karta .pf-textarea::placeholder,
.avm-rozw__form-karta .bf-input::placeholder,
.avm-rozw__form-karta .bf-textarea::placeholder{color:#6b7280}
.avm-rozw__form-karta .pf-input:hover,
.avm-rozw__form-karta .pf-textarea:hover,
.avm-rozw__form-karta .bf-input:hover,
.avm-rozw__form-karta .bf-textarea:hover{border-color:#9ca3af}
.avm-rozw__form-karta .pf-input:focus,
.avm-rozw__form-karta .pf-textarea:focus,
.avm-rozw__form-karta .bf-input:focus,
.avm-rozw__form-karta .bf-textarea:focus{
  outline:none;background:#fff;border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.15);
}
/* Własna strzałka listy — systemowa różniła się między przeglądarkami i wystawała
   poza zaokrąglenie pola. */
.avm-rozw__form-karta select.pf-input,
.avm-rozw__form-karta select.bf-input{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.avm-rozw__form-karta .pf-textarea,
.avm-rozw__form-karta .bf-textarea{min-height:120px;resize:vertical}

.avm-rozw__form-karta .g-recaptcha{margin-top:16px}

/* Selektor z nazwą elementu i `!important` — arkusz wtyczki wymusza granat
   z `!important`, a paleta wchodzi w `button[type=submit]`. */
.avm-rozw__form-karta form button.pf-button,
.avm-rozw__form-karta form button.bf-button{
  display:flex;align-items:center;justify-content:center;width:100%;margin-top:18px;
  background:#2563eb !important;color:#fff !important;border:0 !important;border-radius:9px !important;
  padding:15px 24px !important;font-size:15.5px;font-weight:700;letter-spacing:-.005em;
  cursor:pointer;transition:background .2s ease;box-shadow:0 12px 24px -14px rgba(37,99,235,.8);
}
.avm-rozw__form-karta form button.pf-button:hover,
.avm-rozw__form-karta form button.bf-button:hover{background:#1d4ed8 !important;opacity:1}

.avm-rozw__form-karta .pf-notice,
.avm-rozw__form-karta .bf-notice{margin:0 0 16px;padding:13px 16px;border-radius:10px;font-size:14.5px;font-weight:600}

/* ——— galeria i pytania obok siebie ——— */
.avm-rozw__duet{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px;align-items:start;
}
.avm-rozw__duet .avm-prog__karta{margin-top:0}
.avm-rozw__duet--jeden{grid-template-columns:1fr}
.avm-rozw__galeria-siatka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.avm-rozw__galeria-siatka figure{margin:0;overflow:hidden;border-radius:10px;background:#f3f4f6}
.avm-rozw__galeria-siatka img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s ease}
.avm-rozw__galeria-siatka figure:hover img{transform:scale(1.04)}

/* Pytania w kolorze sekcji rozwiązań (kobalt), a nie zieleni programów dotacyjnych. */
.avm-rozw--pelna .avm-prog__faq details[open] summary::before{background:var(--avm-ko)}

/* ——— tablet ——— */
@media (max-width:1100px){
  .avm-rozw__warianty-siatka--n3{grid-template-columns:1fr}
  .avm-rozw__kroki{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
  .avm-rozw__krok:nth-child(2n)::after{display:none}
  .avm-rozw__form{grid-template-columns:1fr}
  .avm-rozw__duet{grid-template-columns:1fr}
}
@media (max-width:800px){
  .avm-rozw__warianty-siatka--n2{grid-template-columns:1fr}
  .avm-rozw__skrot{padding:24px}
}

/* ——— telefon ——— */
@media (max-width:640px){
  .avm-rozw__naglowek{margin:28px 0 14px}
  .avm-rozw__naglowek h2{font-size:22px}

  .avm-rozw__skrot{padding:22px 18px}
  .avm-rozw__skrot li{font-size:15px}
  .avm-rozw__skrot-ikona{width:38px;height:38px;font-size:15px}

  .avm-rozw__wariant{padding:26px 18px 20px}
  .avm-rozw__wariant h3{font-size:22px}
  .avm-rozw__warianty-siatka{gap:22px}
  .avm-rozw__cecha--para{grid-template-columns:1fr;gap:1px;padding:8px 0 !important}
  .avm-rozw__cecha--para span{font-size:13px}
  /* Zakres „100–180 cm” łamał się w dwie linie w kafelku ~100 px — bez łamania
     i ciaśniej, żeby liczba i jednostka zostały razem. */
  .avm-rozw__wymiar dl{gap:6px}
  .avm-rozw__wymiar dl > div{padding:9px 8px}
  .avm-rozw__wymiar dd{font-size:14px;white-space:nowrap;letter-spacing:-.03em}
  .avm-rozw__notka{align-items:flex-start;padding:14px 16px;font-size:14.5px}
  .avm-rozw__notka i{margin-top:2px}

  /* Kroki pionowo, łącznik jako linia po lewej. */
  .avm-rozw__proces{padding:22px 18px}
  .avm-rozw__proces h2{font-size:19px;margin-bottom:20px}
  .avm-rozw__kroki{grid-template-columns:1fr;gap:0}
  .avm-rozw__krok{padding:0 0 22px 58px;min-height:42px}
  .avm-rozw__krok:last-child{padding-bottom:0}
  .avm-rozw__krok::before{position:absolute;left:0;top:0;width:38px;height:38px;font-size:15px;box-shadow:0 0 0 5px #eff6ff}
  .avm-rozw__krok:not(:last-child)::after,
  .avm-rozw__krok:nth-child(2n):not(:last-child)::after{
    display:block;top:44px;bottom:2px;left:18px;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,#bfdbfe 0%,#e5e7eb 100%);
  }
  .avm-rozw__krok b{margin-top:8px}

  .avm-rozw__form{scroll-margin-top:246px}
  .avm-rozw__form-info{padding:24px 18px}
  .avm-rozw__form-karta{padding:22px 18px}
  .avm-rozw__form-karta .pf-grid,
  .avm-rozw__form-karta .bf-grid{grid-template-columns:1fr}
  /* 16 px — przy mniejszym iOS przybliża stronę po dotknięciu pola. */
  .avm-rozw__form-karta .pf-input,
  .avm-rozw__form-karta .pf-textarea,
  .avm-rozw__form-karta .bf-input,
  .avm-rozw__form-karta .bf-textarea{font-size:16px}
  /* reCAPTCHA ma sztywne 304 px — przy wąskim ekranie skalujemy, żeby nie wystawała. */
  .avm-rozw__form-karta .g-recaptcha{transform-origin:0 0}

  .avm-rozw__galeria-siatka{grid-template-columns:1fr}
}
@media (max-width:360px){
  .avm-rozw__form-karta .g-recaptcha{transform:scale(.9)}
}