/* =========================================================================
   ACC24 – Banery kontaktowe w topie strony głównej
   Moduł: acc24topbanners · wersja 1.0.1 · 2026-08-26

   CZĘŚĆ 1 — siatka wiersza. Odwzorowuje motyw PRS019_toolpart co do wartości:
   lewa 72,3% / prawa 27,7% + wcięcie 30 px, składanie w słupek poniżej 991 px.
   Punkty łamania i wcięcia przepisane z arkusza motywu, nie zgadywane.

   CZĘŚĆ 2 — sam baner kontaktowy (napisy, przyciski, ikony).
   ========================================================================= */

/* ---------- CZĘŚĆ 1: siatka wiersza ------------------------------------- */

.acc24-topbanners {
  float: left;              /* ten sam zabieg co #basecmsservices: 100% szerokości */
  width: 100%;              /* na float wymusza nowy wiersz pod sliderem          */
  position: relative;
  padding-top: 30px;
}
.acc24-topbanners::after { content: ""; display: table; clear: both; }

.acc24-topbanners__left  { float: left;  width: 72.3%; position: relative; }
.acc24-topbanners__right { float: right; width: 27.7%; padding-left: 30px; text-align: center; }

.acc24-topbanners__kafel { overflow: hidden; border-radius: var(--global-border-radius, 5px); }
.acc24-topbanners__kafel img { max-width: 100%; height: auto; display: block; transition: .6s; }
.acc24-topbanners__kafel:hover img { transform: scale(1.07); }

.acc24-topbanners .acc-cta { border-radius: var(--global-border-radius, 5px); }

@media (max-width: 1359px) { .acc24-topbanners { padding-top: 20px; } }
@media (max-width: 1359px) and (min-width: 1200px) { .acc24-topbanners__right { padding-left: 20px; } }
@media (max-width: 1199px) { .acc24-topbanners__right { padding-left: 15px; } }
@media (max-width: 543px) { .acc24-topbanners { padding-top: 15px; } .acc24-topbanners__right { padding-top: 10px; } }
@media (max-width: 479px) { .acc24-topbanners { padding-top: 10px; } }

/* ---------- CZĘŚĆ 2: baner kontaktowy ----------------------------------- */

.acc24-topbanners__left { container-type: inline-size; }

.acc-cta {
  --design-w: 1658;
  --u: calc(100cqw / var(--design-w));   /* 1 jednostka = 1 px projektu */

  --navy:   #0c1936;
  --ink:    #0e1118;
  --orange: #f4530a;
  --btn-1:  #f9c23c;
  --btn-2:  #f3ac10;
  --sep:    #b2c5d4;
  --sky:    #cce3f5;

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1658 / 322;
  background-color: var(--sky);
  /* WebP dla nowych przeglądarek, JPG jako wersja zapasowa dla starszych */
  background-image: url("../img/baner-nie-znalazles-czesci-ok.jpg");
  background-image: -webkit-image-set(
      url("../img/baner-nie-znalazles-czesci-ok.webp") type("image/webp"),
      url("../img/baner-nie-znalazles-czesci-ok.jpg")  type("image/jpeg"));
  background-image: image-set(
      url("../img/baner-nie-znalazles-czesci-ok.webp") type("image/webp"),
      url("../img/baner-nie-znalazles-czesci-ok.jpg")  type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  overflow: hidden;
  font-family: Inter, Arial, Helvetica, sans-serif;
}

.acc-cta, .acc-cta * { box-sizing: border-box; }

/* --- nagłówek ---------------------------------------------------------- */
.acc-cta__head {
  position: absolute;
  left: calc(62 * var(--u));
  top: calc(44 * var(--u));
  margin: 0;
  font-size: calc(62.5 * var(--u));
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.0164em;
  color: var(--navy);
  white-space: nowrap;
}

/* --- podtytuł ---------------------------------------------------------- */
.acc-cta__sub {
  position: absolute;
  left: calc(62 * var(--u));
  top: calc(122 * var(--u));
  margin: 0;
  font-size: calc(var(--sub-size, 32) * var(--u));
  line-height: 1;
  font-weight: var(--sub-weight, 500);
  letter-spacing: var(--sub-ls, -0.006em);
  color: var(--ink);
  white-space: nowrap;
}

/* --- pasek kontaktu ---------------------------------------------------- */
.acc-cta__row {
  position: absolute;
  left: calc(63 * var(--u));
  top: calc(175 * var(--u));
  height: calc(57 * var(--u));
  display: flex;
  align-items: center;
}

.acc-cta__btn {
  display: inline-flex;
  align-items: center;
  height: calc(57 * var(--u));
  border-radius: calc(8 * var(--u));
  background: linear-gradient(180deg, var(--btn-1) 0%, var(--btn-2) 100%);
  color: var(--navy);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: filter .15s ease;
}
.acc-cta__btn:hover,
.acc-cta__btn:focus-visible { filter: brightness(1.07); }

.acc-cta__btn--tel  { padding: 0 calc(52.5 * var(--u)) 0 calc(24 * var(--u)); font-size: calc(24.8 * var(--u)); font-weight: 700; }
.acc-cta__btn--mail { padding: 0 calc(18 * var(--u)) 0 calc(25 * var(--u)); font-size: calc(23.6 * var(--u)); font-weight: var(--mail-weight, 500); margin-left: calc(27 * var(--u)); }

.acc-cta__btn--tel  svg { width: calc(37.5 * var(--u)); height: calc(37.5 * var(--u)); margin-right: calc(29 * var(--u)); flex: none; }
.acc-cta__btn--mail svg { width: calc(42 * var(--u)); height: calc(33 * var(--u)); margin-right: calc(28 * var(--u)); flex: none; }

.acc-cta__sep {
  width: calc(2 * var(--u));
  height: calc(55 * var(--u));
  margin: 0 calc(23 * var(--u)) 0 calc(27 * var(--u));
  background: var(--sep);
  flex: none;
}

.acc-cta__www {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-size: calc(23.6 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.acc-cta__www svg { width: calc(43.5 * var(--u)); height: calc(43.5 * var(--u)); margin-right: calc(21 * var(--u)); flex: none; }
.acc-cta__www:hover span,
.acc-cta__www:focus-visible span { text-decoration: underline; }

/* --- dolny wiersz ------------------------------------------------------ */
.acc-cta__foot {
  position: absolute;
  left: calc(62 * var(--u));
  top: calc(265 * var(--u));
  margin: 0;
  font-size: calc(29 * var(--u));
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.009em;
  color: var(--ink);
  white-space: nowrap;
}
.acc-cta__foot b { color: var(--orange); font-weight: 600; }

/* =========================================================================
   KOLEJNOŚĆ NA WĄSKICH EKRANACH — poniżej 992 px.
   Motyw układa wtedy banerki prawe pod sliderem (do 991 px dwa obok siebie,
   poniżej 480 px jeden pod drugim). Odwracamy kolejność w naszym wierszu,
   żeby banerek „Głowice" dołączył do grupy małych banerów, a baner kontaktowy
   zamykał całość — tak jak chciał Marcin.
   ========================================================================= */
@media (max-width: 991px) {
  .acc24-topbanners { display: flex; flex-direction: column-reverse; gap: 15px; padding-top: 15px; }
  .acc24-topbanners__left  { width: 100%; }
  .acc24-topbanners__right { width: 100%; padding-left: 0; padding-top: 0; }
}
@media (max-width: 543px) {
  .acc24-topbanners { gap: 10px; padding-top: 10px; }
}

/* =========================================================================
   WĄSKI EKRAN — poniżej 1200 px szerokości okna.
   Zdjęcie doradcy znika, tło zostaje jednolite, treść układa się w słupek,
   a przyciski rosną do rozmiaru, który da się wygodnie dotknąć palcem.
   Punkty łamania zgrane z motywem PRS019_toolpart (1199 / 767 / 479).
   ========================================================================= */
@media (max-width: 1199px) {
  .acc-cta {
    aspect-ratio: auto;
    background-image: none;
    padding: 26px 28px 28px;
  }
  .acc-cta__head,
  .acc-cta__sub,
  .acc-cta__row,
  .acc-cta__foot { position: static; left: auto; top: auto; white-space: normal; }

  .acc-cta__head { font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; }
  .acc-cta__sub  { font-size: 19px; line-height: 1.35; margin-top: 8px; letter-spacing: 0; }

  .acc-cta__row  { flex-wrap: wrap; gap: 12px; height: auto; margin-top: 18px; }
  .acc-cta__btn  { height: auto; padding: 14px 22px; font-size: 18px; border-radius: 6px; }
  .acc-cta__btn--tel,
  .acc-cta__btn--mail { margin-left: 0; }
  .acc-cta__btn--tel  svg { width: 22px; height: 22px; margin-right: 12px; }
  .acc-cta__btn--mail svg { width: 24px; height: 19px; margin-right: 12px; }

  .acc-cta__sep  { display: none; }
  .acc-cta__www  { font-size: 17px; }
  .acc-cta__www svg { width: 24px; height: 24px; margin-right: 10px; }

  .acc-cta__foot { font-size: 17px; line-height: 1.35; margin-top: 16px; }
}

@media (max-width: 767px) {
  .acc-cta       { padding: 22px 20px 24px; }
  .acc-cta__head { font-size: 26px; }
  .acc-cta__sub  { font-size: 17px; }
  .acc-cta__btn  { padding: 13px 18px; font-size: 16px; flex: 1 1 100%; justify-content: center; }
  .acc-cta__www  { flex: 1 1 100%; font-size: 16px; }
  .acc-cta__foot { font-size: 16px; }
}

@media (max-width: 479px) {
  .acc-cta       { padding: 18px 16px 20px; }
  .acc-cta__head { font-size: 22px; }
  .acc-cta__sub  { font-size: 15px; }
  .acc-cta__btn  { padding: 12px 16px; font-size: 15px; }
  .acc-cta__www  { font-size: 15px; }
  .acc-cta__foot { font-size: 14px; }
}