/* Strona Kontakt. Zależy od santier.css (.cta-form, .btn-*) + subpages.css
   (.page-hero, .eyebrow, .section-head). Reguła „kanciaste": radius 0. */

/* Hero skrócone. Treść wycentrowana w pionie (jak bazowe .page-hero), ale stały
   header (103px) zasłania górę. Aby widoczny odstęp górny (pod headerem) == dolny,
   padding-top = padding-bottom + wysokość headera. Równość niezależna od wysokości
   okna. Tylko desktop — mobile ma własny, bottom-aligned hero (subpages.css). */
.page-hero--compact { min-height: 62svh; }
@media (min-width: 1025px) {
  .page-hero--compact .page-hero-inner { padding-top: 183px; padding-bottom: 80px; }
}
/* Brak przycisków CTA → lead sąsiaduje bezpośrednio z pastylką. Zerujemy dolny
   margines leadu, by nie sumował się z margin-top pastylki (jedna luka ~34px). */
.page-hero--compact .lead { margin-bottom: 0; }

/* Pola i select formularza CF7 dziedziczą wspólny styl z santier.css (globalny .cta-form-fields). */

/* Mapa salonu */
.kontakt-map { aspect-ratio: 4 / 3; width: 100%; background: var(--gray-100); border: 1px solid var(--gray-200); }
.kontakt-map iframe { display: block; width: 100%; height: 100%; }

/* Pasek szybkich kontaktów (granatowy strip) */
.quick-contact { background: var(--navy-deep); padding: 56px 48px; }
.quick-contact .section-inner { max-width: 1500px; margin: 0 auto; }
.quick-contact-head { margin-bottom: 28px; text-align: center; }
.quick-contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.qc-tile { display: flex; align-items: center; gap: 16px; padding: 22px 24px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; color: var(--white); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.qc-tile:hover { border-color: var(--accent); background: rgba(255,255,255,0.07); transform: translateY(-3px); }
.qc-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(232,78,27,0.16); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s ease, color .2s ease; }
.qc-icon svg { width: 22px; height: 22px; }
.qc-tile:hover .qc-icon { background: var(--accent); color: #fff; }
.qc-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qc-label { font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.qc-value { font-size: 17px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-arrow { width: 18px; height: 18px; color: rgba(255,255,255,0.28); margin-left: auto; flex-shrink: 0; transition: color .2s ease, transform .2s ease; }
.qc-tile:hover .qc-arrow { color: var(--accent); transform: translateX(3px); }

/* Kontakty pogrupowane w piony (nagłówek grupy + siatka kart) */
.kontakt-dzialy { margin-top: 48px; display: flex; flex-direction: column; gap: 44px; }
.kdz-title { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--navy-deep); margin: 0 0 24px; }
.kdz-title::before { content: ''; width: 28px; height: 2px; background: var(--accent); flex-shrink: 0; }
.kdz-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contact-card { display: flex; flex-direction: column; padding: 28px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.contact-card:hover { border-color: var(--gray-300); box-shadow: 0 22px 48px -26px rgba(10,31,56,0.5); transform: translateY(-4px); }
.cc-name { font-size: 20px; font-weight: 700; color: var(--navy-deep); letter-spacing: -0.4px; }
.cc-role { font-size: 14px; color: var(--gray-700); margin-top: 4px; line-height: 1.45; }
.cc-links { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--gray-200); }
.cc-links a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--gray-700); transition: color .2s ease; }
.cc-links a:hover { color: var(--accent); }
.cc-links svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

/* Dane do faktury (sekcja granatowa) */
.cta-faktura { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14); }
.cta-faktura-label { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.cta-faktura-list { margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.cta-faktura-list div { display: flex; gap: 12px; font-size: 14px; }
.cta-faktura-list dt { min-width: 64px; color: rgba(255,255,255,0.55); font-weight: 600; }
.cta-faktura-list dd { margin: 0; color: var(--white); font-weight: 500; }

/* Responsive */
@media (max-width: 1024px) {
  .quick-contact { padding: 24px 28px; }
  .quick-contact-grid { grid-template-columns: repeat(2, 1fr); }
  .kdz-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .quick-contact { padding: 20px; }
  .quick-contact-grid { grid-template-columns: 1fr; }
  .kdz-cards { grid-template-columns: 1fr; }
  .kontakt-map { aspect-ratio: 4 / 3.4; }
}