/* ======================================================
   page-serwis.php
   MOBILE-FIRST (KANON)
====================================================== */



/* ===============================
   HERO
=============================== */

.hero-cta-wrap {
  text-align: center;
}

#kontakt {
  scroll-margin-top: 0px; /* wysokość headera */
}

/* ======================================================
   SECTION SERVICES – TŁO
====================================================== */

.page-serwis .section-services {
  background: #ffffff;
  color: #0f172a;
}

.page-serwis .section-services::before,
.page-serwis .section-services::after {
  display: none;
}

/* ======================================================
   TYTUŁ + PROCESS
====================================================== */

.page-serwis .section-process__inner {
  padding: 64px 0;
  margin-top: 0;
}

.page-serwis .section-process__title {
  text-align: center;
  margin-top: 0;
  margin-bottom: 30px;
}

.page-serwis .services-title {
  color: #0f172a;
}


/* ======================================================
   KARTY USŁUG
====================================================== */

.page-serwis .service-card {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.page-serwis .service-card:hover {
  background: rgba(15, 23, 42, 0.06);
}

/* ======================================================
   IKONY CHIP
====================================================== 

.page-serwis .icon-chip {
  background: rgba(15, 23, 42, 0.12);
}*/

/* ======================================================
   PROCESS – KONTAKT
   MOBILE (BASE)
====================================================== */

.page-serwis .process-cta {
  display: flex;
  flex-direction: column;          /* 🔑 MOBILE-FIRST */
  align-items: center;
  gap: 28px;
  max-width: 720px;
  margin: 0 auto;
}

.page-serwis .process-contact {
  width: 100%;
  max-width: 260px;                /* MOBILE */
  text-align: center;
}

.page-serwis .process-contact__list {
  text-align: left;
  margin-top: 34px;
  padding-left: 18px;
}

/* ======================================================
   TEKSTY W KARTACH USŁUG
====================================================== */

.page-serwis .service-content h3 {
  color: #0b1320;
}

.page-serwis .service-content p {
  color: rgba(15, 23, 42, 0.75);
}

/* ======================================================
   SECTION CONTENT – JASNA
====================================================== */

.page-serwis .section-content {
  background-color: #ffffff;
  color: #0b1320;
}

/* =========================================
   SERWIS — HEADINGS DECORATION
   section-content only
========================================= */

.page-serwis .section-content h2 {
  position: relative;
  display: inline-block;   /* 🔑 KLUCZ */
  margin-bottom: 24px;
}

/* linia dekoracyjna */
.page-serwis .section-content h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--section-title-line-color, #347cb3);
  margin: 10px 0 0;
}


/* ======================================================
   TABLET (≥768px)
====================================================== */

@media (min-width: 768px) {

  .page-serwis .process-cta {
    flex-direction: row;            /* 🔑 przejście na poziom */
    justify-content: center;
    gap: 40px;
  }

  .page-serwis .process-contact {
    max-width: 330px;               /* 🔑 POSZERZENIE */
  }

.page-serwis .section-process__title {
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
}

}

/* ======================================================
   DESKTOP (≥1024px)
====================================================== */



@media (min-width: 1024px) {

  .page-serwis .container {
    max-width: 960px;
  }
  /* ==================================================
     FORMULARZ – 2 KOLUMNY
  ================================================== */

  .page-serwis .section-contact-form .contact-form {
    grid-template-columns: 640px 360px;
    justify-content: center;
    align-items: center;
    gap: 48px;
  }

  /* 🔑 RESET globalnego .contact-col */
  .page-serwis .section-contact-form .contact-col {
    grid-column: auto;
  }

  /* LEWA – FORMULARZ */
  .page-serwis .section-contact-form .form-col {
    width: 640px;
    max-width: 640px;
    margin: 0;
  }

  /* PRAWA – MINI KONTAKT */
  .page-serwis .section-contact-form .contact-col.contact-col--mini {
    width: 360px;
    max-width: 360px;
    margin: 0;
  }
	
.page-serwis .process-cta {
  align-items: flex-start;
}

.page-serwis .process-contact {
  align-self: flex-start;
}
 
}