/* =============================================
   KONTAKT — PAGE HERO
   Used on: hero.html, o-nas.html, kontakt.html
   ============================================= */
/* Typograficzny hero (bez zdjecia): duzy naglowek po lewej, maly opis po
   prawej, wyrownany do dolnej linii naglowka. Gorny padding jest FUNKCJONALNY
   (navbar w stanie --home-top stoi nad kremem — patrz gotcha o morphie). */
.contact-hero {
  padding: 132px 24px 8px;
  background: var(--white);
  text-align: left;
  /* Poziomy wjazd naglowka/opisu nie moze robic przewijania w bok.
     `clip`, nie `hidden` — hidden zrobiloby z sekcji kontener przewijania */
  overflow-x: clip;
}

.contact-hero__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  column-gap: clamp(48px, 6vw, 96px);
  align-items: start;
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.contact-hero__heading {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-family);
  font-size: 66px;
  font-weight: 500;
  color: var(--dark-gray);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0;
  /* Wjazd BEZ opacity:0 (od 2026-08-17): naglowek i subheading to kandydaci LCP,
     a LCP liczy sie od pierwszego NIEprzezroczystego piksela — start z opacity:0
     + delay 0.35/0.55s dawal obserwowane opoznienie renderu ~1,4s, ktore symulacja
     mobile Lighthouse rozciagala do LCP 11,4s. Sam ruch zostaje (fill `both` =
     w czasie delay element stoi przesuniety, ale WIDOCZNY od pierwszej klatki). */
  animation: contact-hero-slide-left 0.9s var(--reveal-ease) 0.35s both;
}

@keyframes contact-hero-slide-left {
  from { transform: translateX(-30px); }
  to   { transform: translateX(0); }
}

@keyframes contact-hero-slide-right {
  from { transform: translateX(30px); }
  to   { transform: translateX(0); }
}

.contact-hero__accent {
  color: inherit;
}

.contact-hero__subheading {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.6;
  margin: 0;
  /* Bez opacity:0 — patrz komentarz przy .contact-hero__heading (LCP). */
  animation: contact-hero-slide-right 0.9s var(--reveal-ease) 0.55s both;
}

/* =============================================
   SCROLL REVEAL — Staggered Directional
   ============================================= */
.sr-hidden {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
}

.sr-hidden.sr-from-left {
  transform: translateX(-28px) translateY(0);
}

.sr-hidden.sr-from-right {
  transform: translateX(28px) translateY(0);
}

.sr-hidden.sr-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* Stagger delays via data-attribute.
   Tightened when the reveal duration went 1.2s → 0.9s: delay and duration ADD UP,
   so the old 0.85s step meant the fifth element was still moving 2.05s after the
   section came into view, which reads as lag rather than as a cascade. At 0.08s
   steps the whole group is settled by ~1.22s and the offset is still clearly
   legible as a sequence. Keep steps in the 60–90ms range if you retune. */
.sr-hidden[data-sr-delay="1"] { transition-delay: 0.08s; }
.sr-hidden[data-sr-delay="2"] { transition-delay: 0.16s; }
.sr-hidden[data-sr-delay="3"] { transition-delay: 0.24s; }
.sr-hidden[data-sr-delay="4"] { transition-delay: 0.32s; }
.sr-hidden[data-sr-delay="5"] { transition-delay: 0.4s; }

/* =============================================
   CONTACT MAIN — Two Column Layout
   ============================================= */
.contact-main {
  background: var(--white);
  padding: 40px 24px 0;
}

.contact-main__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.contact-main__left {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* =============================================
   CONTACT CARD — Info (phone, email)
   ============================================= */
/* Tlo kart: #ffffff, a NIE var(--white) — token to krem #FAF9F4, wiec na
   kremowym tle sekcji karta bylaby niewidoczna (patrz gotcha „--white to NIE bialy") */
.contact-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 1px solid #ECE8DF;
  padding: 36px 36px;
  box-shadow:
    0 4px 24px rgba(var(--orange-rgb), 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

.contact-card__title {
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 600;
  color: var(--dark-gray);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-card__title::before {
  content: '';
  width: 4px;
  height: 24px;
  background: var(--orange-gradient);
  border-radius: 2px;
  flex-shrink: 0;
}

.contact-card__items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-card__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  text-decoration: none;
  color: var(--dark-gray);
}

.contact-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--orange-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-card__icon svg {
  width: 22px;
  height: 22px;
  color: var(--white);
}

.contact-card__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-card__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-card__value {
  font-size: 18px;
  font-weight: 600;
  color: var(--dark-gray);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

a.contact-card__value:hover {
  color: var(--orange);
}

.contact-card__value .copy-btn {
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.contact-card__value .copy-btn:hover {
  color: var(--orange);
  transform: scale(1.1);
}

.contact-card__value .copy-btn:active {
  transform: scale(0.95);
}

/* =============================================
   SERVICE AREA MAP CARD
   ============================================= */
.contact-map-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 1px solid #ECE8DF;
  padding: 32px;
  box-shadow:
    0 4px 24px rgba(var(--orange-rgb), 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-map-card__title {
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 600;
  color: var(--dark-gray);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-map-card__title::before {
  content: '';
  width: 4px;
  height: 22px;
  background: var(--orange-gradient);
  border-radius: 2px;
  flex-shrink: 0;
}

.contact-map-card__desc {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 20px;
}

.contact-map-card__map {
  width: 100%;
  flex: 1;
  min-height: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

/* Google Maps container */
#service-area-map {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

/* =============================================
   CONTACT FORM CARD — Inline form-popup override
   ============================================= */
.contact-form-card.form-popup--inline {
  position: relative;
  max-width: none;
  width: 100%;
  /* Nadpisuje kremowe var(--white) z .form-popup (0,1,0) — ta regula ma (0,3,0),
     wiec MODAL na pozostalych 22 stronach zostaje nietkniety */
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 1px solid #ECE8DF;
  box-shadow:
    0 4px 24px rgba(var(--orange-rgb), 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: visible;
  flex-shrink: unset;
  /* Reset .form-popup modal defaults — let sr-hidden system control animation */
  opacity: unset;
  transform: none;
  transition: none;
}

/* Scroll reveal takes over opacity + transform — must match sr-hidden system exactly */
.contact-form-card.form-popup--inline.sr-hidden {
  opacity: 0;
  transform: translateX(28px) translateY(0);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.16s,
              transform var(--reveal-duration) var(--reveal-ease) 0.16s;
}

.contact-form-card.form-popup--inline.sr-hidden.sr-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* =============================================
   CONTACT SALONS — Stacked with photos
   ============================================= */
.contact-salons {
  background: var(--white);
  padding: 32px 24px 80px;
}

/* Cel kotwicy #salon-chrosla — przycisk "Odwiedź nasz salon" z sekcji
   .cta-banner--dark (hero + 8 stron oferty). Odstęp od góry musi zmieścić
   PRZYKLEJONY navbar (~76px), inaczej etykieta "// Nasze salony" ląduje pod nim. */
#salon-chrosla { scroll-margin-top: 96px; }

.contact-salons__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Individual salon — 2 column: info left, photo right, single card */
.contact-salon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 1px solid #ECE8DF;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.contact-salon--reverse {
  direction: rtl;
}

.contact-salon--reverse > * {
  direction: ltr;
}

/* Salon info side */
.contact-salon__info {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-salon__title {
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 600;
  color: var(--dark-gray);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-salon__title::before {
  content: '';
  width: 4px;
  height: 22px;
  background: var(--orange);
  border-radius: 2px;
  flex-shrink: 0;
}

.contact-salon__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-salon__detail {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-salon__detail-icon {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-salon__detail-icon svg {
  width: 18px;
  height: 18px;
  color: var(--white);
}

.contact-salon__detail-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-salon__detail-label {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-salon__detail-value {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 500;
  color: var(--dark-gray);
}

/* Godziny otwarcia sa rozbite na trzy czesci (tydzien / separator / sobota),
   zeby ponizej 769px sobota mogla stanac na WLASNEJ linii — na desktopie
   wszystko zostaje w jednej linii i renderuje sie identycznie jak wczesniej.
   Przelaczenie: blok @media (max-width: 768px) nizej w tym pliku. */
.contact-salon__hours-week,
.contact-salon__hours-sat {
  white-space: nowrap;
}

.contact-salon__detail-value a {
  color: var(--dark-gray);
  text-decoration: none;
  transition: color 0.25s ease;
}

.contact-salon__detail-value a:hover {
  color: var(--orange);
}

.contact-salon__detail-value a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Salon map */
.contact-salon__map {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.05);
  aspect-ratio: 16 / 9;
  margin-top: auto;
}

.contact-salon__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Wczytywanie mapy Google (klasy nadaje modul „Salon Map Embeds" w common.js).
   Stan ukryty iframe'u zyje WYLACZNIE pod bramka `.map-embed--js` — bez JS
   (albo przy zbuforowanym starym common.js) mapa renderuje sie jak wczesniej,
   zamiast zostac niewidoczna. Fade to sam `opacity`, wiec nie wymaga guardu
   reduced-motion (brak ruchu). */
.map-embed--js {
  background: #E9E5DE;
}

.map-embed--js iframe {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.map-embed--js.map-embed--loaded iframe {
  opacity: 1;
}

/* Salon photo side */
.contact-salon__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  /* WebKit/Safari: element gridu z `aspect-ratio`, ktorego jedyna tresc ma
     `width/height: 100%`, zapada sie do 0x0 przy `grid-template-columns: 1fr`
     (czyli na CALYM mobile i tablecie <=1024px) — zdjecia salonow nie
     renderowaly sie tam wcale. Chromium tego NIE pokazuje.
     `min-width` (a NIE `width`) jest tu wymogiem: na desktopie zdjecie
     CELOWO wystaje poza karte i przycina je jej `overflow` — `width: 100%`
     zwezilby je z 827 do 695px i zmienil kadr. Patrz kontakt.css v40. */
  min-width: 100%;
}

.contact-salon__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-salon__photo-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* =============================================
   KEYFRAMES
   ============================================= */
/* fadeInUp keyframe lives in base.css */

/* =============================================
   RESPONSIVE — KONTAKT
   ============================================= */
/* === Tablet (≤1024px) === */
@media (max-width: 1024px) {
  .contact-hero {
    padding: 112px 24px 8px;
  }

  .contact-hero__container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    column-gap: 40px;
  }

  .contact-hero__heading {
    font-size: 44px;
  }

  .contact-hero__subheading {
    font-size: 16px;
  }

  .contact-main__container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .contact-form-card.form-popup--inline {
    height: auto;
  }

  .contact-salon {
    grid-template-columns: 1fr;
  }

  .contact-salon--reverse {
    direction: ltr;
  }

  .contact-salon__photo {
    aspect-ratio: 5 / 4;
    order: -1;
  }

  .contact-salon__info {
    padding: 32px 28px;
  }
}

/* === Mobile (≤768px) — hero & layout === */
@media (max-width: 768px) {
  .contact-hero {
    /* .contact-main ma na mobile zerowy gorny padding — oddech robi hero */
    padding: 96px 16px 28px;
  }

  .contact-hero__container {
    grid-template-columns: 1fr;
  }

  .contact-hero__heading {
    font-size: 38px;
    font-weight: 500;
  }

  .contact-hero__subheading {
    grid-column: 1;
    grid-row: 3;
    font-size: 16px;
    max-width: 480px;
    margin-top: 16px;
    padding-bottom: 0;
  }

  .contact-main {
    padding: 0 16px 0;
  }

  .contact-form-card.form-popup--inline {
    padding: 0;
  }

  .contact-salons {
    padding: 32px 16px 60px;
  }

  .contact-salons__container {
    gap: 32px;
  }

  .contact-salon__info {
    padding: 24px 20px;
  }

  /* Sobota schodzi do drugiej linii — na waskim ekranie caly ciag
     "Pon – Pt … | Sob …" lamal sie w przypadkowym miejscu (godzina zostawala
     sama). Pipe znika, bo miedzy liniami nie ma juz czego rozdzielac. */
  .contact-salon__hours-sep {
    display: none;
  }

  .contact-salon__hours-week,
  .contact-salon__hours-sat {
    display: block;
  }

  .contact-salon__photo {
    aspect-ratio: 5 / 4;
  }

  .contact-card {
    padding: 28px 24px;
  }

  .contact-map-card {
    padding: 24px 20px;
  }
}

/* === Narrow mobile (≤480px) === */
@media (max-width: 480px) {
  .contact-hero {
    padding: 92px 12px 24px;
  }

  .contact-main {
    padding: 0 12px 0;
  }

  .contact-salons {
    padding: 32px 12px 48px;
  }

  .contact-form-card {
    padding: 24px 18px;
  }

  .contact-card__value {
    font-size: 16px;
  }

  .contact-salon__map {
    aspect-ratio: 16 / 12;
  }
}

/* =============================================
   REDUCED MOTION — hero
   Ruch znika, samo pojawienie sie zostaje (reduced motion = mniej ruchu,
   nie brak przejscia — ta sama zasada co globalny blok w base.css)
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  /* Lokalny keyframe bez transformu — base.css nie ma czystego fadeIn */
  @keyframes contact-hero-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .contact-hero__heading,
  .contact-hero__subheading {
    animation-duration: 0.2s;
    animation-delay: 0.1s;
    animation-name: contact-hero-fade;
  }
}