/* ==========================================================================
   Podstrona Kontakt / sekcja 2: godziny
   Sekcja swiadomie NIE pokazuje sztywnego grafiku - godziny sa danymi zywymi
   (Facebook / CMS) i az do podpiecia zrodla kazda tabela byloby zmyslona.
   Dlatego i naglowek nie obiecuje grafiku: mowi, jak dzialamy ("podajemy na
   biezaco"), a nie co jest w tabelce, ktorej nie ma.

   Uklad: dwie osie pionowe - naglowek i microcopy na kolumnach 1-6, stan zywy
   i dwie drogi do sprawdzenia od kolumny 7. Obie kolumny niosa tresc, wiec
   pod CTA nie zostaje puste pole.
   ========================================================================== */

.kontakt-godziny {
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
  scroll-margin-top: 4.5rem;
}

.kontakt-godziny__in {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  min-width: 0;
}

@media (max-width: 1023px) {
  /* .marked spada ponizej 1024 do poziomego labela nad naglowkiem - zostaje,
     bo tu jest jedynym micro-labelem sekcji. */
  .kontakt-godziny .marked > .label { margin-bottom: -0.5rem; }
}

@media (min-width: 1024px) {
  /* .marked daje etykiecie height:100%, wiec rotate(180deg) zrzuca tekst na
     sam dol sekcji. Skracamy ja do wysokosci tresci, zeby start napisu
     wrocil pod gorna krawedz - tak jak w sekcjach strony glownej. */
  .kontakt-godziny .marked > .label { height: auto; }

  .kontakt-godziny__in {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 0;
    align-items: start;
  }

  .kontakt-godziny__side { grid-column: 1 / 7; padding-inline-end: clamp(1.5rem, 3vw, 3.5rem); }
  .kontakt-godziny__body { grid-column: 7 / -1; }
}

/* Gardlem jest linia sans ("Godziny podajemy", 16 znakow) na polowie
   dwunastu kolumn - stad stopien wyraznie nizszy niz w naglowkach
   pelnej szerokosci. */
.kontakt-godziny__h {
  font-size: clamp(2.1rem, 7vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .kontakt-godziny__h { font-size: clamp(2.1rem, 3.1vw, 3.5rem); }
}

.kontakt-godziny__h .line { display: block; }

.kontakt-godziny__note {
  margin-top: clamp(1.25rem, 2.4vw, 1.9rem);
  max-width: 48ch;
  font-size: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}

/* --- Stan grafiku ------------------------------------------------------- */
/* Slot na dane. Otwiera go hairline, a nie ramka - kiedy przyjda prawdziwe
   godziny, wiersze dnia wejda tu jako .rule-row bez zmiany kompozycji. */
.kontakt-godziny__slot {
  padding-block: clamp(1.15rem, 2vw, 1.6rem);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.kontakt-godziny__slot-p {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.35rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* Jedyny fiolet w sekcji - sygnal "to jest informacja zywa, nie tabelka". */
.kontakt-godziny__dot {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--purple);
  transform: translateY(-0.15em);
}

/* Druga linia stanu wisi w tej samej osi co pierwsza, pod kropka. */
.kontakt-godziny__slot-s {
  margin-top: 0.5rem;
  padding-left: 1.3rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}

/* --- Akcje -------------------------------------------------------------- */
.kontakt-godziny__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
  margin-top: clamp(1.5rem, 2.8vw, 2.25rem);
}

@media (max-width: 559px) {
  .kontakt-godziny__act { align-items: stretch; flex-direction: column; }
  .kontakt-godziny__call { width: 100%; }
}