/**
 * Kontakt — dopasowanie 1:1 do Canva PDF (1024,5×576 pt → 1366×768 px)
 * Kolory: jasne kafelki #ECECEC, ciemny Showroom #22282C, tekst #22282C / #FFFFFF
 */

.page-key-contact {
  --contact-light-bg: #ececec;
  --contact-dark-bg: #22282c;
  --contact-text-dark: #22282c;
  --contact-text-light: #ffffff;
  --contact-hero-title-size: 40px;
  --contact-hero-title-lh: 2;
  --contact-hero-title-track: 0.115em;
  --contact-cta-font: 'Roboto Mono', monospace;
  --contact-cta-size: 17.333px;
  --contact-cta-track: 0.065em;
  --contact-cta-lh: 0.94;
}

/* Mozaika — bez widocznych „dziur”; tła jak w PDF */
.page-key-contact .contact-mosaic {
  background-color: var(--contact-dark-bg);
}

.page-key-contact .contact-mosaic__cell.split__media {
  background-color: var(--contact-dark-bg);
}

/* === Kafelki tekstowe — tło i kolory (fix: klasy na jednym elemencie) === */
.page-key-contact .contact-mosaic__cell.split__copy.split-light,
.page-key-contact .split-light.split__copy {
  background-color: var(--contact-light-bg) !important;
  color: var(--contact-text-dark);
}

.page-key-contact .contact-mosaic__cell.split__copy.split-dark,
.page-key-contact .split-dark.split__copy {
  background-color: var(--contact-dark-bg) !important;
  color: var(--contact-text-light);
}

/* Nagłówki sekcji */
.page-key-contact .split-light.split__copy h2,
.page-key-contact .contact-mosaic__cell--copy-1 h2,
.page-key-contact .contact-mosaic__cell--copy-3 h2 {
  color: var(--contact-text-dark);
}

.page-key-contact .split-dark.split__copy h2,
.page-key-contact .contact-mosaic__cell--copy-2 h2 {
  color: var(--contact-text-light);
}

/* Akcent pod tytułem kafelka (mozaika — klasy na jednym elemencie) */
.page-key-contact .split__copy.split-light h2::after,
.page-key-contact .contact-mosaic__cell.split__copy.split-light h2::after {
  background: var(--contact-text-dark);
}
.page-key-contact .split__copy.split-dark h2::after,
.page-key-contact .contact-mosaic__cell.split__copy.split-dark h2::after {
  background: color-mix(in srgb, var(--contact-text-light) 42%, transparent);
}

/* Akapity — jasne / ciemne kafelki */
.page-key-contact .split-light.split__copy p,
.page-key-contact .split-light.split__copy .copy-list li,
.page-key-contact .contact-mosaic__cell.split-light.split__copy p,
.page-key-contact .contact-mosaic__cell.split-light.split__copy .copy-list li {
  color: var(--contact-text-dark);
}

.page-key-contact .split-dark.split__copy p,
.page-key-contact .split-dark.split__copy .copy-list li,
.page-key-contact .contact-mosaic__cell.split-dark.split__copy p,
.page-key-contact .contact-mosaic__cell.split-dark.split__copy .copy-list li {
  color: var(--contact-text-light);
}

/* Sekcja 1 — dane kontaktowe na #ECECEC */
.page-key-contact .contact-mosaic__cell--copy-1,
.page-key-contact .contact-detail__intro,
.page-key-contact .contact-detail__label,
.page-key-contact .contact-detail__block p,
.page-key-contact .contact-detail__heading,
.page-key-contact .contact-detail__link {
  color: var(--contact-text-dark);
}

.page-key-contact .contact-detail__icon {
  color: var(--contact-text-dark);
}

.page-key-contact .contact-detail__icon--wa {
  color: var(--brand-green, #448c7b);
}

/* Pogrubienia w kafelkach — czytelność (etykiety, showroom; linki = tile-cta) */
.page-key-contact .contact-detail__label strong {
  font-weight: 500;
}

.page-key-contact .contact-detail__heading {
  font-weight: 700;
}

.page-key-contact .contact-detail__block strong {
  font-weight: 500;
}

.page-key-contact .contact-mosaic__cell--copy-2 .showroom-copy strong,
.page-key-contact .contact-mosaic__cell--copy-2 p strong,
.page-key-contact .contact-mosaic__cell--copy-3 > p strong {
  font-weight: 500;
}

.page-key-contact .split-dark .showroom-copy strong {
  color: #ffffff;
}

/* Hero */
.page-key-contact .hero-inner {
  background-size: cover;
  background-position: var(--hero-bg-position, 24% calc(58% - 5px));
  background-color: var(--contact-dark-bg);
}

.page-key-contact .hero-inner .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.1) 45%,
    rgba(0, 0, 0, 0.32) 100%
  );
}

.page-key-contact .hero-inner h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--contact-hero-title-size);
  font-weight: 400;
  line-height: var(--contact-hero-title-lh);
  letter-spacing: var(--contact-hero-title-track);
  margin: 0;
}

.page-key-contact .hero-row__left {
  padding: 0 0 14px;
}

.page-key-contact .hero-row__right .outline-button {
  font-family: var(--contact-cta-font);
  font-size: var(--contact-cta-size);
  letter-spacing: var(--contact-cta-track);
  line-height: var(--contact-cta-lh);
  min-width: 230px;
  padding: 7px 18px;
  border-color: rgba(255, 255, 255, 0.76);
}

/* Paddingi Canva */
.page-key-contact .contact-mosaic__cell--copy-1 {
  padding: 44px 68px 44px;
}

.page-key-contact .contact-detail__intro,
.page-key-contact .contact-mosaic__cell--copy-1 .contact-detail__intro-group .contact-detail__intro {
  font-family: 'Roboto', sans-serif;
  font-size: 13.333px;
  line-height: 2;
  letter-spacing: 0.091em;
  font-weight: 400;
}

.page-key-contact .contact-detail__intro-group {
  margin-bottom: 18px;
}

.page-key-contact .contact-detail__intro-group .contact-detail__intro + .contact-detail__intro {
  margin-top: 0.5em;
}

.page-key-contact .contact-detail__rows {
  margin-bottom: 30px;
}

.page-key-contact .contact-detail__blocks {
  gap: 14px;
}

.page-key-contact .contact-detail__block p {
  line-height: 1.5;
}

/* Showroom + architekci — typografia i odstępy z PDF (1024,5×576 pt → 1366 px) */
.page-key-contact .contact-mosaic__cell--copy-2 h2,
.page-key-contact .contact-mosaic__cell--copy-3 h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 37.334px;
  font-weight: 400;
  letter-spacing: 0.142em;
  line-height: 1.4;
  margin: 0;
  max-width: none;
}

.page-key-contact .contact-mosaic__cell--copy-3 p,
.page-key-contact .contact-mosaic__cell--copy-3 .copy-list li {
  font-family: 'Roboto', sans-serif;
  font-size: 13.333px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.091em;
}

/* Showroom — 1:1 Canva: Roboto 10→13,333 px, tracking 91, interlinia 2, kotwica góra */
.page-key-contact .contact-mosaic__cell--copy-2 {
  padding: 147px 77px 48px;
  align-items: flex-start;
  justify-content: flex-start;
}

.page-key-contact .contact-mosaic__cell--copy-2 h2 {
  color: #ffffff !important;
  margin: 0 0 55px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 37.334px;
  font-weight: 400;
  letter-spacing: 0.142em;
  line-height: 1.4;
}

.page-key-contact .contact-mosaic__cell--copy-2 .showroom-copy {
  margin: 0;
  max-width: 490.189px;
  font-family: 'Roboto', sans-serif;
  font-size: 13.333px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.091em;
  color: #ffffff !important;
  text-align: left;
  white-space: pre-wrap;
}

.page-key-contact .contact-mosaic__cell--copy-3 {
  padding: 109px 77px 48px;
}

.page-key-contact .contact-mosaic__cell--copy-3 h2 {
  line-height: 1.28;
  margin-bottom: 49px;
}

.page-key-contact .contact-mosaic__cell--copy-3 > p:first-of-type {
  margin-bottom: 37px;
}

.page-key-contact .contact-mosaic__cell--copy-3 > p:nth-of-type(2) {
  margin-bottom: 0;
}

.page-key-contact .contact-mosaic__cell--copy-3 .copy-list {
  list-style: none;
  margin: 11px 0 37px;
  padding: 0;
  max-width: min(100%, 539px);
}

.page-key-contact .contact-mosaic__cell--copy-3 .copy-list li {
  position: relative;
  margin: 0;
  padding: 0 0 0 14px;
  line-height: 1.154;
  color: var(--contact-text-dark);
}

.page-key-contact .contact-mosaic__cell--copy-3 .copy-list li + li {
  margin-top: 11px;
}

.page-key-contact .contact-mosaic__cell--copy-3 .copy-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

.page-key-contact .contact-mosaic__cell--media-1.split__media--contact-media-info img {
  object-position: center 43%;
  transform: none;
}

.page-key-contact .contact-mosaic__cell--media-2.split__media--contact-media-showroom img {
  object-position: 54% 48%;
}

.page-key-contact .contact-mosaic__cell--media-3.split__media--contact-media-architects img {
  object-position: 50% 50%;
  transform: none;
}

@media (min-width: 1366px) {
  .page-key-contact .contact-mosaic__cell--copy-1 {
    padding: 44px 68px 44px;
  }
  .page-key-contact .contact-mosaic__cell--copy-2 {
    padding: 147px 77px 48px;
  }
  .page-key-contact .contact-mosaic__cell--copy-3 {
    padding: 109px 77px 48px;
  }
}

@media (max-width: 1280px) {
  .page-key-contact .contact-mosaic__cell--copy-1 {
    padding: 38px 44px 36px;
  }
  .page-key-contact .contact-mosaic__cell--copy-2 {
    padding: 88px 52px 40px;
  }
  .page-key-contact .contact-mosaic__cell--copy-3 {
    padding: 64px 52px 40px;
  }
}

@media (max-width: 980px) {
  .page-key-contact .hero-inner {
    background-position: 30% 52%;
  }

  .page-key-contact .contact-mosaic__cell--copy-1,
  .page-key-contact .contact-mosaic__cell--copy-2,
  .page-key-contact .contact-mosaic__cell--copy-3 {
    padding: 32px 28px 36px;
  }
  .page-key-contact .contact-mosaic__cell--copy-2 {
    padding-top: 48px;
  }
  .page-key-contact .contact-mosaic__cell--copy-3 {
    padding-top: 40px;
  }
}

@media (max-width: 640px) {
  .page-key-contact .hero-inner h1 {
    font-size: clamp(28px, 7vw, 40px);
  }
  .page-key-contact .contact-mosaic__cell--copy-1,
  .page-key-contact .contact-mosaic__cell--copy-2,
  .page-key-contact .contact-mosaic__cell--copy-3 {
    padding: 24px 20px 28px;
  }
  .page-key-contact .contact-mosaic__cell--copy-2 {
    padding-top: 36px;
  }
}