/* ============================================================
   NOWE SEKCJE I PODSTRONY
   ============================================================
   Szablon miał tylko hero / projekty / o nas / kontakt. Tutaj żyje
   wszystko, co doszło dla barbershopu: cennik, zespół, opinie,
   galeria, godziny, layout podstron.

   Konwencje przejęte z szablonu:
     - rozmiary skalują się z viewportem przez calc(N / var(--vw-screen) * 100 * 1vw)
     - kolory wyłącznie ze zmiennych z theme.css
   ============================================================ */

/* skrót na powtarzalne przeliczenie px → vw z makiety 1440 */
:root {
  --gap-s: calc(16 / var(--vw-screen) * 100 * 1vw);
  --gap-m: calc(32 / var(--vw-screen) * 100 * 1vw);
  --gap-l: calc(64 / var(--vw-screen) * 100 * 1vw);
  --pad-x: calc(120 / var(--vw-screen) * 100 * 1vw);
}
@media screen and (max-width: 768px) {
  :root { --pad-x: calc(24 / var(--vw-screen) * 100 * 1vw); }
}

/* ------------------------------------------------------------------ *
 *  Wspólny szkielet sekcji
 * ------------------------------------------------------------------ */
.section {
  position: relative;
  padding: calc(120 / var(--vw-screen) * 100 * 1vw) var(--pad-x);
}
.section--tight { padding-block: calc(72 / var(--vw-screen) * 100 * 1vw); }
.section--black { background: var(--brand-black); }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-m);
  margin-bottom: calc(56 / var(--vw-screen) * 100 * 1vw);
}
@media screen and (max-width: 768px) {
  .section__head { flex-direction: column; align-items: flex-start; }
}

.section__title {
  color: var(--text-primary);
  font-family: "Big Shoulders Inline", sans-serif;
  font-weight: 900;
  font-size: calc(72 / var(--vw-screen) * 100 * 1vw);
  line-height: 1;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 768px) {
  .section__title { font-size: calc(44 / var(--vw-screen) * 100 * 1vw); }
}

.section__lead {
  max-width: calc(520 / var(--vw-screen) * 100 * 1vw);
  color: var(--brand-green-200);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 450;
  font-size: calc(20 / var(--vw-screen) * 100 * 1vw);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.eyebrow {
  display: inline-block;
  margin-bottom: calc(12 / var(--vw-screen) * 100 * 1vw);
  color: var(--brand-green-300);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: calc(16 / var(--vw-screen) * 100 * 1vw);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 *  Przycisk / CTA
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: calc(10 / var(--vw-screen) * 100 * 1vw);
  padding: calc(16 / var(--vw-screen) * 100 * 1vw) calc(28 / var(--vw-screen) * 100 * 1vw);
  border-radius: 999px;
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: calc(18 / var(--vw-screen) * 100 * 1vw);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color .3s var(--ease-out-quart), color .3s var(--ease-out-quart),
              transform .3s var(--ease-out-quart);
}
.btn--primary { background: var(--brand-green-300); color: var(--brand-black); }
.btn--primary:hover { background: var(--brand-green-100); transform: translateY(-2px); }
.btn--ghost {
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
}
.btn--ghost:hover { border-color: var(--brand-green-300); color: var(--brand-green-300); }

/* ------------------------------------------------------------------ *
 *  CENNIK
 * ------------------------------------------------------------------ */
.pricing__cat + .pricing__cat { margin-top: calc(72 / var(--vw-screen) * 100 * 1vw); }

.pricing__catHead {
  display: flex;
  align-items: baseline;
  gap: var(--gap-s);
  padding-bottom: calc(16 / var(--vw-screen) * 100 * 1vw);
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: calc(8 / var(--vw-screen) * 100 * 1vw);
}
.pricing__catName {
  color: var(--text-primary);
  font-family: "Big Shoulders Inline", sans-serif;
  font-weight: 900;
  font-size: calc(40 / var(--vw-screen) * 100 * 1vw);
  letter-spacing: 0.08em;
  line-height: 1.12;
}
.pricing__catNote {
  color: var(--brand-green-500);
  font-family: var(--font-body);
  font-size: calc(20 / var(--vw-screen) * 100 * 1vw);
}

.pricing__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--gap-s);
  padding: calc(20 / var(--vw-screen) * 100 * 1vw) 0;
  border-bottom: 1px solid var(--border-primary);
}
.pricing__row:hover .pricing__name { color: var(--brand-green-300); }

.pricing__name {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: calc(22 / var(--vw-screen) * 100 * 1vw);
  letter-spacing: 0.03em;
  transition: color .3s var(--ease-out-quart);
}
.pricing__desc {
  grid-column: 1 / 2;
  margin-top: calc(6 / var(--vw-screen) * 100 * 1vw);
  color: var(--brand-green-500);
  font-family: var(--font-body);
  font-size: calc(20 / var(--vw-screen) * 100 * 1vw);
  line-height: 1.45;
  max-width: calc(640 / var(--vw-screen) * 100 * 1vw);
}
.pricing__time {
  color: var(--brand-green-500);
  font-family: var(--font-body);
  font-size: calc(20 / var(--vw-screen) * 100 * 1vw);
  white-space: nowrap;
}
.pricing__price {
  min-width: calc(90 / var(--vw-screen) * 100 * 1vw);
  color: var(--brand-green-300);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: calc(22 / var(--vw-screen) * 100 * 1vw);
  letter-spacing: 0.03em;
  text-align: right;
  white-space: nowrap;
}
@media screen and (max-width: 480px) {
  .pricing__row { grid-template-columns: 1fr auto; }
  .pricing__time { grid-column: 1 / 2; }
  .pricing__name { font-size: calc(18 / var(--vw-screen) * 100 * 1vw); }
}

/* ------------------------------------------------------------------ *
 *  ZESPÓŁ
 * ------------------------------------------------------------------ */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-m);
}
@media screen and (max-width: 768px) { .team { grid-template-columns: 1fr; } }

.team__card { position: relative; }
.team__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: calc(24 / var(--vw-screen) * 100 * 1vw);
  background: var(--brand-green-700);
}
.team__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out-quart), filter .6s var(--ease-out-quart);
  filter: grayscale(1) contrast(1.05);
}
.team__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease-out-quart);
}
.team__card:hover .team__photo img { transform: scale(1.04); filter: grayscale(0); }
.team__video[data-playing] { opacity: 1; }
@media (hover: none) {
  .team__video { display: none; }
}

.team__name {
  margin-top: calc(18 / var(--vw-screen) * 100 * 1vw);
  color: var(--text-primary);
  font-family: "Big Shoulders Inline", sans-serif;
  font-weight: 900;
  font-size: calc(30 / var(--vw-screen) * 100 * 1vw);
  letter-spacing: 0.08em;
  line-height: 1.12;
}
.team__nick {
  color: var(--brand-green-500);
  font-family: var(--font-body);
  font-size: calc(20 / var(--vw-screen) * 100 * 1vw);
}

/* ------------------------------------------------------------------ *
 *  OPINIE
 * ------------------------------------------------------------------ */
.reviews__score {
  display: flex;
  align-items: baseline;
  gap: calc(14 / var(--vw-screen) * 100 * 1vw);
}
.reviews__value {
  color: var(--brand-green-300);
  font-family: "Big Shoulders Inline", sans-serif;
  font-weight: 900;
  font-size: calc(96 / var(--vw-screen) * 100 * 1vw);
  line-height: 1;
  letter-spacing: 0.08em;
}
.reviews__meta {
  color: var(--brand-green-500);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 450;
  font-size: calc(18 / var(--vw-screen) * 100 * 1vw);
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-m);
}
@media screen and (max-width: 1024px) { .reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 640px)  { .reviews__grid { grid-template-columns: 1fr; } }

.review {
  display: flex;
  flex-direction: column;
  gap: calc(16 / var(--vw-screen) * 100 * 1vw);
  padding: calc(28 / var(--vw-screen) * 100 * 1vw);
  border: 1px solid var(--border-primary);
  border-radius: calc(20 / var(--vw-screen) * 100 * 1vw);
}
.review__stars { color: var(--brand-green-300); font-size: calc(15 / var(--vw-screen) * 100 * 1vw); letter-spacing: .2em; }
.review__text {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 450;
  font-size: calc(18 / var(--vw-screen) * 100 * 1vw);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.review__author {
  margin-top: auto;
  color: var(--brand-green-500);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: calc(14 / var(--vw-screen) * 100 * 1vw);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ *
 *  GALERIA
 * ------------------------------------------------------------------ */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(12 / var(--vw-screen) * 100 * 1vw);
}
@media screen and (max-width: 768px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

.gallery__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: calc(16 / var(--vw-screen) * 100 * 1vw);
  background: var(--brand-green-700);
}
.gallery__item--wide { grid-column: span 2; aspect-ratio: 8 / 5; }
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out-quart);
}
.gallery__item:hover img { transform: scale(1.05); }

.ig-feed,
.fb-feed,
.social-feed {
  width: 100%;
  min-height: 120px;
}
/* Tytuł widgetu — bez inline !important, CSS wystarczy */
.ig-feed .eapps-instagram-feed-title-container,
.ig-feed .eapps-instagram-feed-title,
.fb-feed .eapps-widget-title,
.fb-feed .eui-widget-title,
.social-feed .eapps-instagram-feed-title-container,
.social-feed .eapps-instagram-feed-title,
#eapps-instagram-feed-1 .eapps-instagram-feed-title-container,
#eapps-instagram-feed-1 .eapps-instagram-feed-title {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* Badge free: inline display:!important — chowamy rozmiarem/clipem,
   a js/elfsight-cleanup.js usuwa węzeł całkowicie */
.ig-feed a[href*="elfsight.com"],
.fb-feed a[href*="elfsight.com"],
.social-feed a[href*="elfsight.com"],
a[href*="elfsight.com/instagram-feed-instashow"],
a[href*="elfsight.com/facebook-feed"],
a[href*="utm_campaign=free-widget"] {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border: none !important;
}

/* „Załaduj więcej” — jak .btn--primary */
.ig-feed .eapps-instagram-feed-posts-grid-load-more-container,
.fb-feed .eapps-instagram-feed-posts-grid-load-more-container,
.social-feed [eapps-link="loadMoreContainer"],
.ig-feed .eapps-widget-load-more-container,
.fb-feed .eapps-widget-load-more-container {
  text-align: center;
  margin-top: 8px;
}
.ig-feed .eapps-instagram-feed-posts-grid-load-more,
.ig-feed .es-load-more-button,
.fb-feed .es-load-more-button,
.fb-feed [eapps-link="loadMore"],
.social-feed .es-load-more-button,
.social-feed [eapps-link="loadMore"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 28px auto 0 !important;
  padding: 16px 28px !important;
  min-height: auto !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--brand-green-300) !important;
  color: var(--brand-black) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .3s var(--ease-out-quart), transform .3s var(--ease-out-quart);
}
.ig-feed .eapps-instagram-feed-posts-grid-load-more:hover,
.ig-feed .es-load-more-button:hover,
.fb-feed .es-load-more-button:hover,
.fb-feed [eapps-link="loadMore"]:hover,
.social-feed .es-load-more-button:hover,
.social-feed [eapps-link="loadMore"]:hover {
  background: var(--brand-green-100) !important;
  transform: translateY(-2px);
}
.ig-feed .eapps-instagram-feed-posts-grid-load-more-text,
.fb-feed .eapps-instagram-feed-posts-grid-load-more-text,
.social-feed .eapps-instagram-feed-posts-grid-load-more-text {
  color: inherit !important;
}

/* ------------------------------------------------------------------ *
 *  GODZINY / INFORMACJE
 * ------------------------------------------------------------------ */
.info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-l);
}
@media screen and (max-width: 768px) { .info { grid-template-columns: 1fr; gap: var(--gap-m); } }

.info__label {
  margin-bottom: calc(14 / var(--vw-screen) * 100 * 1vw);
  color: var(--brand-green-500);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(18 / var(--vw-screen) * 100 * 1vw);
  letter-spacing: 0.04em;
}
.info__body {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: calc(24 / var(--vw-screen) * 100 * 1vw);
  line-height: 1.45;
  letter-spacing: 0.04em;
}
.info__body a:hover { color: var(--brand-green-300); }

.hours { width: 100%; }
.hours tr { border-bottom: 1px solid var(--border-primary); }
.hours td {
  padding: calc(12 / var(--vw-screen) * 100 * 1vw) 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: calc(22 / var(--vw-screen) * 100 * 1vw);
}
.hours td:last-child { text-align: right; color: var(--brand-green-200); white-space: nowrap; }
.hours tr[data-today] td { color: var(--brand-green-300); font-weight: 400; }
.hours .is-closed { color: var(--brand-green-500); }

/* ------------------------------------------------------------------ *
 *  STOPKA — graffiti rozrzucone w tle
 * ------------------------------------------------------------------ *
 * Pozycje i animacja wyłaniania zostają z szablonu. Zamiast kwadratowych
 * GIF-ów są napisy odręczne (svg/graffiti/), więc zamiast kadrowania
 * potrzebują `contain`, żeby nie deformować liter, oraz przekrzywienia —
 * bez niego równo ułożone słowa nie wyglądają jak tagi. */
.contact-section_animatedBg__B9g_u img.graffiti {
  height: auto;                 /* wysokość z proporcji SVG, nie z kwadratu */
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ------------------------------------------------------------------ *
 *  PODSTRONY — nagłówek
 * ------------------------------------------------------------------ */
.page {
  padding-top: calc(180 / var(--vw-screen) * 100 * 1vw);
  padding-inline: var(--pad-x);
}
.page__title {
  color: var(--text-primary);
  font-family: "Big Shoulders Inline", sans-serif;
  font-weight: 900;
  font-size: calc(120 / var(--vw-screen) * 100 * 1vw);
  line-height: 1.12;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 768px) {
  .page { padding-top: calc(120 / var(--vw-screen) * 100 * 1vw); }
  .page__title { font-size: calc(56 / var(--vw-screen) * 100 * 1vw); }
}
.page__lead {
  max-width: calc(680 / var(--vw-screen) * 100 * 1vw);
  margin-top: calc(24 / var(--vw-screen) * 100 * 1vw);
  color: var(--brand-green-200);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 450;
  font-size: calc(20 / var(--vw-screen) * 100 * 1vw);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.map {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  border: 0;
  border-radius: 24px;
}
@media screen and (max-width: 768px) {
  .map { aspect-ratio: 16 / 10; }
}
@media screen and (max-width: 480px) {
  .map { aspect-ratio: 1 / 1; }
}

/* pasek z zachętą do rezerwacji */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: calc(48 / var(--vw-screen) * 100 * 1vw) var(--pad-x);
  border-block: 1px solid var(--border-primary);
}
@media screen and (max-width: 768px) { .cta { flex-direction: column; align-items: flex-start; } }
.cta__text {
  color: var(--text-primary);
  font-family: "Big Shoulders Inline", sans-serif;
  font-weight: 900;
  font-size: calc(44 / var(--vw-screen) * 100 * 1vw);
  line-height: 1.12;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 768px) { .cta__text { font-size: calc(30 / var(--vw-screen) * 100 * 1vw); } }