/* ======================================================
   DESKOP (>=1024px)
====================================================== */

@media (min-width: 1024px) {

	.grid-3 {
    grid-template-columns: repeat(3, 1fr);
	}

	.section {
    padding: 64px 24px;
	}

	.section:last-of-type {
    padding-bottom: 100px;
	}



    .about-text {
        font-size: 1.65rem;
        line-height: 1.7;
        margin-bottom: 16px;
        color: #0f172a;
        font-weight: 300;
    }


/* ======================================================
   KANON WSPÓLNY BUTTON LINKOWY
====================================================== */

	.hero-cta-wrap .link-button {
	  margin-left: 0;
	  margin-right: 0;
	}

/* ======================================================
   KANON WSPÓLNY BUTTON LINKOWY
====================================================== */
.link-button::after {
  content: "→";
  margin-left: 10px;
  font-size: 1.1em;
  transition: transform 0.2s ease;
}


.link-button__text {
  line-height: 1;          /* 🔑 stabilniejsza linia (na span) */
  display: inline-block;     /* 🔑 żeby line-height działało przewidywalnie */
  vertical-align: middle;
  font-size: 1.05rem;
  position: relative;
  top: 0px;
}

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

.section-hero {
  padding: calc(84px + var(--menu-h, 64px)) 0 80px;
  position: relative;

    background:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.55) 40%,
        rgba(0, 0, 0, 0.35) 100%
      ),
      url("/img/backgrounds/tlo_elektronika_granatowe_deskop_2.webp")
      right center / cover no-repeat;
  }



  .section-hero {
    background-position: right 35%;
  }
    .section-hero {
    background-blend-mode: multiply;
  }
  
.hero-strip {
  width: 100%;
  padding: 15px 0;

  background:
    linear-gradient(
      to bottom,
      rgba(11, 19, 32, 0.88),
      rgba(11, 19, 32, 0.65)
    );

  backdrop-filter: blur(2px);
}


.hero-cta {
  display: inline-flex;
  margin: 32px 100px;
}



.hero-cta-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 32px;
}







/* ======================================================
   PROCES 
====================================================== */

  .process-cta {
    min-height: 260px;
  }

	.process-contact__person {
		font-size: 1.35rem;
	}


	.process-contact__list {
		font-size: 0.95rem;
	}








.process-cta__phone {

}

.process-cta .process-cta__phone {
  margin-left: auto;
  margin-right: 0;   /* 🔑 ZABIJA CENTROWANIE */
}

/* ======================================================
	serwis
====================================================== */


  .services-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 🔑 DWIE KOLUMNY */
    gap: 32px 48px; /* row / column */
  }

  .services-cta {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end; /* 🔑 CTA po prawej */
  }

  .services-cta .link-button__text {

  }

  /* typografia */
  .service-content h3 {
    font-size: 1.3rem;   /* ~21–22px */
    font-weight: 300;
	letter-spacing: 0.05em;
  }

    .service-content p {
        font-size: 1.05rem;
        line-height: 1.5;
    }



/* ======================================================
   KONTAKT — DESKTOP (KANON)
====================================================== */

.page-home .section:last-of-type {
  padding-bottom: 48px;
}


  .section-contact {
    padding: 112px 48px;
  }

  .contact {
    max-width: 1100px;
  }

  .contact-title {
    font-size: 1.35rem;
    margin-bottom: 40px;
  }

  .contact-list {
    max-width: 560px;
    margin-left: auto;   /* prawa kolumna, jak ustalaliśmy */
    margin-right: 0;
    gap: 22px;
  }

  .contact-item {
    padding: 26px 30px;
    border-radius: 18px;
	column-gap: 18px;
	row-gap: 0px;
  }

    .contact-text {
        font-size: 1.20rem;
        line-height: 1.25;
    }

  /* ===== PERSON ===== */

  .contact-item--person {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    column-gap: 18px;
    align-items: start;
  }

  .contact-item--person .contact-icon {
    grid-row: 1 / span 3;
    align-self: center;
    font-size: 1.6rem;
  }

  .contact-item--person .contact-meta--name {
    font-size: 1rem;
    font-weight: 100;
  }

  .contact-item--person .contact-text {
    font-size: 1.15rem;
    line-height: 1.35;
	font-weight: 200;
  }

  .contact-item--person .contact-meta--desc {
    font-size: 1.05rem;
    line-height: 1.4;
    opacity: 0.75;
	font-weight: 200;
  }



/* ======================================================
   MAPA — FOOTER MAP
====================================================== */
  .container.contact-map {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 64px;
    align-items: stretch; /* 🔑 TO JEST KLUCZ */
  }

  .contact-col {
    grid-column: 1;
	
  }

  .map-col {
    grid-column: 2;

    margin-left: 0;
    margin-right: 0;
  }

  .map-wrap {
    height: 100%;
    min-height: 420px;
	margin: 12px 0 0;
    border-radius: 0;
  }

  .map-iframe {
    width: 100%;
    height: 100%;
    border-radius: 12px;
  }


 


  .section-contact-form .contact-form {
    display: grid;
    grid-template-columns: 640px 360px;
    justify-content: center;
    align-items: stretch; /* 🔑 globalnie */
    gap: 48px;
  }


  .section-contact-form .contact-col {
    grid-column: auto;
  }

/* ============================================== */
}