/* ==========================================================================
   Sekcja: Kontakt, godziny, mapa
   Kompozycja: naglowek w kontenerze .wrap, pod nim slab na pelna szerokosc
   ekranu - lewa kolumna na --panel (adres + wiersze kontaktowe na
   hairline'ach), prawa na --paper (godziny + placeholder mapy).
   Miedzy kolumnami zero marginesu: to jedna plyta rozcieta kolorem.

   Wyrownanie: --edge liczy padding zewnetrzny tak, zeby tresc w slabie
   (ktory jest full-bleed) stala w tej samej pionowej linii co naglowek
   w .wrap, rowniez powyzej 1440px, gdzie .wrap dostaje boczne marginesy.
   ========================================================================== */

.kontakt-strip {
  --edge: max(var(--gutter), calc((100vw - var(--measure)) / 2 + var(--gutter)));
  padding-top: var(--section);
}

/* --- Naglowek ----------------------------------------------------------- */
.kontakt-strip__head { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.kontakt-strip__eyebrow {
  display: block;
  margin-bottom: clamp(1.3rem, 2.8vw, 2.25rem);
}

/* Naglowek ma cala szerokosc kontenera, wiec moze isc w skale display.
   Gardlem jest linia sans (14 znakow) - stad zapas ~10% na kazdej szerokosci. */
.kontakt-strip__h {
  font-size: clamp(2.4rem, 8.4vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

@media (min-width: 1024px) {
  .kontakt-strip__h { font-size: clamp(2.4rem, 5.2vw, 5.5rem); }
}

/* --- Slab --------------------------------------------------------------- */
.kontakt-strip__split { display: grid; }

@media (min-width: 1024px) {
  /* Panel nie jest liczony procentem, tylko od tresci: --edge (wyrownanie do
     .wrap) + szyna etykiety + paddingi + 21rem na wiersz "etykieta ---- wartosc".
     Sam procent zawodzil w obie strony - powyzej 1440 --edge rosnie i zjadal
     kolumne od srodka, ponizej 1280 wartosc "/CentrumOptyczneMichalowska"
     przestawala sie miescic. 38% jest sufitem, zeby panel nie zdominowal slaba. */
  .kontakt-strip__split {
    grid-template-columns: minmax(23rem, min(38%, calc(var(--edge) + 28rem))) 1fr;
  }
}

/* --- Lewa kolumna: panel ------------------------------------------------ */
/* Hairline z base.css jest kalibrowany na --paper. Na ciemniejszym --panel
   ginie, wiec podmieniamy sam token lokalnie - dzieki temu .rule-row
   dostaje wlasciwa linie bez redefiniowania komponentu. */
.kontakt-strip__panel {
  --hairline: color-mix(in srgb, var(--ink) 14%, transparent);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(2.5rem, 5vw, 4rem) var(--edge);
  background: var(--panel);
}

@media (min-width: 1024px) {
  .kontakt-strip__panel {
    grid-template-columns: 2.75rem 1fr;
    gap: 0;
    padding-block: clamp(3rem, 5vw, 4.5rem) clamp(3rem, 5vw, 4.5rem);
    padding-right: clamp(1.25rem, 2vw, 2.25rem);
  }

  /* Rotacja o 180deg sprawia, ze etykieta czyta sie z dolu do gory,
     ale start tekstu zostaje pod gorna krawedzia bloku. */
  .kontakt-strip__rail {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-self: start;
    justify-self: start;
  }

  /* Pionowa linia biegnie przez cala wysokosc tresci, nie tylko przy etykiecie */
  .kontakt-strip__panel-in {
    padding-left: clamp(1.25rem, 2vw, 2rem);
    border-left: 1px solid var(--hairline);
  }
}

.kontakt-strip__panel-in {
  display: flex;
  flex-direction: column;
  gap: clamp(2.75rem, 6vw, 5rem);
  min-width: 0;
  container-type: inline-size;
}

.kontakt-strip__name {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.kontakt-strip__lines {
  margin-top: 0.9rem;
  font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  line-height: 1.75;
  color: var(--muted);
}

/* Wiersze doklejamy do dolu panelu - gorna partia zostaje z powietrzem,
   tak jak w kolumnie kontaktowej Kisty. */
.kontakt-strip__rows { margin-top: auto; }

.kontakt-strip__val {
  font-size: clamp(0.88rem, 0.82rem + 0.24vw, 0.95rem);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  text-decoration-color: color-mix(in srgb, var(--ink) 32%, transparent);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

.kontakt-strip__rows a:hover .kontakt-strip__val,
.kontakt-strip__rows a:focus-visible .kontakt-strip__val { text-decoration-color: currentColor; }

/* Uklad "etykieta ---- wartosc" potrzebuje okolo 19rem tresci panelu
   (etykieta 4.25rem + odstep 1.5rem + najdluzsza wartosc ~12rem). Ponizej tego
   - waski panel miedzy 1024 a 1280 i telefony 320px - wartosc schodzi pod
   etykiete, bo to lepsze niz lamanie adresu w polowie slowa. Pytamy o szerokosc
   panelu, nie viewportu, bo to ona o tym decyduje. */
@container (max-width: 19rem) {
  .kontakt-strip__rows .rule-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .kontakt-strip__val { text-align: left; white-space: normal; overflow-wrap: anywhere; }
}

/* --- Prawa kolumna ------------------------------------------------------ */
/* --in to wewnetrzny padding kolumny. Ponizej 1024 slab jest jednokolumnowy,
   wiec tresc musi trzymac sie gutteru strony; od 1024 dostaje wlasny oddech
   od granicy z panelem. */
.kontakt-strip__main {
  --in: var(--edge);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--paper);
}

@media (min-width: 1024px) {
  .kontakt-strip__main { --in: clamp(2.25rem, 4vw, 4.5rem); }
}

.kontakt-strip__hours {
  padding: clamp(2.75rem, 5vw, 4.5rem) var(--edge) clamp(2.5rem, 4.5vw, 4rem) var(--in);
}

.kontakt-strip__hours-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}

.kontakt-strip__hours-h {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Jedyny fiolet w tej kolumnie poza pinezka - sygnal "to jest zywa informacja" */
.kontakt-strip__dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.75rem;
  border-radius: 50%;
  background: var(--purple);
  transform: translateY(-0.22em);
}

.kontakt-strip__hours-cta { flex: none; }

.kontakt-strip__hours-p {
  margin-top: clamp(1.1rem, 2.2vw, 1.75rem);
  max-width: 56ch;
  font-size: clamp(1rem, 0.94rem + 0.24vw, 1.1rem);
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- Interaktywna mapa i osobny pas adresowy ---------------------------- */
.kontakt-strip__map {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  background: var(--panel-soft);
}
.kontakt-strip__map .salon-map { flex: 1 0 24rem; }

.kontakt-strip__map-foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--edge) clamp(1.5rem, 3vw, 2.5rem) var(--in);
}

.kontakt-strip__map-adr {
  font-size: clamp(0.92rem, 0.88rem + 0.18vw, 1.02rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 559px) {
  .kontakt-strip__map-foot { flex-direction: column; align-items: flex-start; }
  .kontakt-strip__map-btn { width: 100%; }
}

/* Kadr salonu w panelu. Sekcja szla przez 931px bez jednego zdjecia, a to
   ostatni ekran przed stopka - moment, w ktorym ktos decyduje, czy tu przyjsc.
   Wnetrze salonu robi tu wiecej niz kolejna linia tekstu. */
.kontakt-strip__fig {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--panel-soft);
}
.kontakt-strip__fig img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
  .kontakt-strip__fig { aspect-ratio: 4 / 3; }
}