/* =============================================
   LOCATION SECTION — Used on: o-nas
   (karty salonow renderuje markup .contact-salon* z kontakt.css;
    martwy podsystem .location__salon*/__detail*/__map usuniety w v36)
   ============================================= */
.location {
  position: relative;
  background-color: var(--white);
  /* Naglowek i karty salonow wjezdzaja z bokow (`data-reveal="left|right"`,
     system w o-nas.css) — bez przyciecia wysuw z PRAWEJ tworzylby poziome
     przewijanie strony na waskich ekranach. `clip`, a nie `hidden`, celowo:
     `hidden` zrobiloby z sekcji kontener przewijania. */
  overflow-x: clip;
}

/* Karty salonow sa biale juz w regule bazowej `.contact-salon` (kontakt.css v39),
   wiec dawne nadpisanie stad zostalo usuniete — bylo jedynym powodem, dla ktorego
   te same karty mialy inny kolor na /o-nas i na /kontakt. */

.location__container {
  position: relative;
  /* +48px = własny `padding` poziomy (2 × 24px). Bez tego doliczenia gutter
     kontenera i gutter sekcji SUMOWAŁY się na szerokim ekranie i treść stała
     24px za bardzo w prawo względem reszty strony (zmierzone @1920: 284 przy
     260 w hero, „Markach partnerskich" i historii). Teraz box ma 1448px, więc
     jego WNĘTRZE ma dokładnie 1400px i siada na linii treści serwisu, a przy
     oknach węższych niż 1448px padding dalej pełni rolę zwykłego gutteru (v34). */
  max-width: calc(var(--max-width-wide) + 48px);
  width: 100%;
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 80px;
  align-items: start;
}

/* Section label + heading */
.location__label {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--dark-gray);
  border: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  grid-column: 1;
  justify-self: start;
}

.location__label::before { content: "// "; }
.location__label { text-transform: capitalize; }

.location__heading {
  font-family: var(--font-family);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  color: var(--dark-gray);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 0;
  grid-column: 1;
}

.location__heading span {
  color: inherit;
}

.location__text {
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.7;
  max-width: 380px;
  margin: 0;
  grid-column: 2;
  justify-self: end;
  align-self: start;
}

/* Children below the header (salon grid) span both columns */
.location__container > .contact-salons__container {
  grid-column: 1 / -1;
  margin-top: 56px;
}

/* ---- Responsive ---- */
/* === Tablet (≤1024px) === */
@media (max-width: 1024px) {
  .location__container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .location__label {
    grid-column: 1;
    justify-self: start;
  }

  .location__heading {
    font-size: 36px;
    grid-column: 1;
    margin: 0 0 12px;
  }

  .location__text {
    grid-column: 1;
    max-width: none;
    margin: 0;
    justify-self: start;
  }
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
  .location__container {
    padding: 60px 24px;
  }

  .location__heading {
    font-size: 32px;
  }
}

/* === Small mobile (≤600px) === */
@media (max-width: 600px) {
  .location__container {
    padding: 48px 16px;
  }

  .location__heading {
    font-size: 32px;
  }

  .location__text {
    font-size: 15px;
    margin-bottom: 40px;
  }
}