/* ————— CZCIONKI HOSTOWANE LOKALNIE —————
   Wcześniej ładowane z fonts.googleapis.com. Ten arkusz blokował renderowanie i wymagał
   pełnego nawiązania połączenia z obcym serwerem (DNS + TCP + TLS) — na wolnym łączu
   ok. 750 ms zanim cokolwiek pojawiło się na ekranie. Teraz pliki leżą na naszym serwerze,
   z którym przeglądarka i tak jest już połączona, a deklaracje siedzą w tym arkuszu, więc
   nie dochodzi żadne dodatkowe zapytanie blokujące.

   Zawężone do tego, co realnie używane: alfabet łaciński i rozszerzony (polskie znaki),
   bez cyrylicy i wietnamskiego, oraz bez kursywy — w całym serwisie nie ma ani jednego
   font-style: italic. font-display: swap zachowany, więc tekst pojawia się natychmiast
   w foncie zastępczym i podmienia się po doczytaniu — tak samo jak dotąd. */
@font-face {
  font-family: 'Boldonse';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/boldonse-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Boldonse';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/boldonse-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --reveal-duration: 3.0s;
  --reveal-offset: 240px;
  --reveal-scale: 0.96;
  --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --bg-color: #FAFAFA;
  --text-color: #111111;
  --accent-color: #780419;
  --theme-cat-archi-color: #ffcc00;
  --theme-cat-asp-color: #4e78f2;
  --theme-cat-junior-color: #f9a2c5;
  /* Czcionki — ustawione tutaj jako wartości domyślne, żeby Boldonse i Montserrat
     działały natychmiast bez czekania na odpowiedź API z global-settings */
  --font-headings: 'Boldonse', system-ui;
  --font-main: 'Montserrat', sans-serif;
  /* Faktyczna wysokość navbara — utrzymywana w jednym miejscu, żeby odstępy
     pod nim (contact-main, portfolio-main, hero na mobile itd.) zawsze się zgadzały. */
  --navbar-height: 150px;
}

/* Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

html,
body {
  min-height: 100vh;
  overflow-x: hidden;
}

@media (min-width: 993px) {

  html,
  body {
    height: 100%;
    overflow: hidden;
  }
}

body {
  font-family: var(--font-main, 'Montserrat', sans-serif);
  font-weight: 500;
  background: var(--bg-color);
  color: var(--text-color);
}

/* ===== NAVBAR =====
   Logo wyśrodkowane na górze, menu wyśrodkowane w rzędzie pod nim —
   ten sam układ na komputerze i na telefonie (bez chowanego menu / hamburgera). */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 0.9rem 2rem 1rem;
  background: var(--nav-bg-color, rgba(242, 242, 242, 0.95));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text-color);
}

.logo-mark {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #f0ebe3;
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.logo-text {
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-logo-img {
  height: 64px;
  width: auto;
  object-fit: contain;
  display: block;
}

.nav-right {
  display: flex;
  width: 60%;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 0.4rem;
}

.nav-link {
  color: var(--nav-text-color, rgba(17, 17, 17, 0.6));
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
}

.nav-link:hover {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

/* ===== HERO: 3 columns ===== */
.hero {
  display: flex;
  width: 100%;
  height: 100vh;
}

/* --- Column --- */
/* Rysunek Architektoniczny */
#cat-1 {
  --accent-color: #8b6914;
}

/* Rysunek Studyjny i Malarstwo */
#cat-2 {
  --accent-color: #4a4a5a;
}

/* Junior */
#cat-3 {
  --accent-color: #1a7b6a;
}



.column {
  flex: 1 1 33.333%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  /* Add black background to ensure fade to black */
  /* Krzywa symetryczna (ease-in-out) — ruch rozłożony równomiernie na cały czas trwania,
     zamiast "skoku, a potem czekania" jak przy poprzedniej (0.22,1,0.36,1). */
  transition: flex 0.95s cubic-bezier(0.65, 0, 0.35, 1);
}

.column+.column {
  border-left: 2px solid rgba(255, 255, 255, 0.15);
}

/* Custom active outline overlay to highlight selected profile */
.column::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 0px solid transparent;
  pointer-events: none;
  z-index: 6;
  transition: border-width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.column.active::after {
  border: 4px solid var(--accent-color);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 0, 0, 0.5);
}

/* --- Portrait image (default, visible) --- */
.img-portrait {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  filter: blur(0);
  /* Ten sam czas i krzywa co .column (flex), żeby zdjęcie i rozjeżdżanie/zjeżdżanie
     kolumny poruszały się w idealnym rytmie w obie strony */
  transition: opacity 0.95s cubic-bezier(0.65, 0, 0.35, 1),
    filter 0.95s cubic-bezier(0.65, 0, 0.35, 1);
}

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

/* --- Square image (shown on hover, person from behind) ---
   Jednolite, powolne przenikanie z rozmyciem dla wszystkich kategorii (zamiast
   poprzedniego, szybkiego przełącznika opacity + różnych efektów wycierania per
   kategoria) — zdjęcie "wyostrza się" z rozmycia zamiast pojawiać się gwałtownie. */
.img-square {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  filter: blur(18px);
  transition: opacity 0.95s cubic-bezier(0.65, 0, 0.35, 1),
    filter 0.95s cubic-bezier(0.65, 0, 0.35, 1);
}

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

.column.active .img-square {
  opacity: 1;
  filter: blur(0);
}

/* Active column: portrait gradually darkens and blurs */
.column.active .img-portrait {
  filter: blur(3px) brightness(0.18);
  opacity: 0.18;
}

/* 
   ==========================================================================
   KOLOROWE NAŁOŻENIA (TINTS)
   Aby w prosty sposób całkowicie USUNĄĆ kolorowe nałożenia na zdjęciach,
   wystarczy odkomentować poniższą regułę (usuń znaki komentarza wokół niej):
*/

.tint {
  display: none !important;
}

/* ========================================================================== */

/* --- Color tint overlay --- */
.tint {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: color;
  opacity: 0.55;
  transition: opacity 0.5s ease;
}

/* Stare tint-y (wstecznie kompatybilne) */
.tint-green {
  background-color: #27ae60;
}

.tint-red {
  background-color: #c0392b;
}

.tint-blue {
  background-color: #2980b9;
}

/* Nowe tint-y dla 4 kategorii */
.tint-sepia {
  background-color: #8b6914;
}

.tint-charcoal {
  background-color: #4a4a5a;
}

.tint-burgundy {
  background-color: #7b1a2e;
}

.tint-teal {
  background-color: #1a7b6a;
}

/* When active, reduce tint to show true colors of back photo */
.column.active .tint {
  opacity: 0.15;
}

/* Inactive/shrinking columns: dim slightly */
.column.shrink .img-portrait {
  filter: brightness(0.85);
  transition: filter 0.6s ease;
}

/* ===== INFO OVERLAY (on the ENTIRE square image) ===== */
.info-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  /* Treść zaczyna się od ~40% wysokości - tuż pod badge'em który jest w ~30% */
  align-items: flex-start;
  padding: 38% 2rem 3rem;
  /* backdrop-filter (rozmyte szkło) usunięte — mierzone empirycznie: ten panel wypełnia
     CAŁĄ kolumnę (inset:0), a kolumna zmienia szerokość podczas animacji (flex), więc
     backdrop-filter musiał przeliczać rozmycie od nowa w KAŻDEJ klatce na dużym, wciąż
     zmieniającym się obszarze — to samo w sobie odpowiadało za spadek z ~53fps do ~30fps
     (zmierzone przez wyłączenie/włączenie). Ciemne tło poniżej daje wystarczający kontrast
     bez tego kosztu. */
  background: rgba(0, 0, 0, 0.72);
  color: var(--text-color);
  opacity: 0;
  transition: opacity 0.95s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

.column.active .info-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Static width content wrapper to prevent items/buttons from jumping during column expansion */
.info-content {
  /* Było na sztywno 756px — przy węższych kolumnach na desktopie (np. wąska kolumna obok
     szeroko rozciągniętej aktywnej sąsiadki na 993px) treść była szersza niż sama kolumna
     i wychodziła poza ekran. min() pozwala kurczyć się do 100% dostępnej szerokości,
     zachowując 756px tam, gdzie się mieści. */
  width: min(756px, 100%);
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  /* Dodatkowy odstęp między plakietką a pierwszym tekstem */
  padding-top: 30px;
}

/* Zastąpione przez .category-badge, który pełni rolę nagłówka */
.info-name {
  display: none;
}

/* ===== CATEGORY BADGE (pigułka "Kurs ...") =====
   Widoczna domyślnie na zdjęciu frontowym; po najechaniu na kolumnę TEN SAM element
   przesuwa się i lekko rośnie, stając się nagłówkiem rozwiniętego panelu — nie znika. */
.category-badge {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  /* SZEROKOŚĆ I CZCIONKA SĄ STAŁE — liczone z vw (szerokość VIEWPORTU), NIE z cqw
     (szerokość KOLUMNY). Poprzednie podejście z cqw zmuszało przeglądarkę do przeliczania
     layoutu i przełamywania tekstu w KAŻDEJ klatce animacji .column (flex), bo cqw zależy
     od żywej, animowanej szerokości kolumny — to spadało FPS animacji z ~60 do ~10-15
     (zmierzone przez requestAnimationFrame), co wyglądało jak "zgubiona animacja".
     Teraz szerokość/czcionka są stałe przez całą animację (viewport się nie zmienia
     w trakcie hovera), więc tekst NIGDY się nie przełamuje, a wzrost/zmniejszenie
     plakietki w innych stanach idzie przez transform:scale() — czysto kompozytorowe,
     zero kosztu layoutu, płynne niezależnie od mocy urządzenia. */
  width: clamp(340px, 30vw, 520px);
  font-size: clamp(13px, 1.15vw, 20px);
  padding: 0.7em 1.05em;
  border-radius: 999px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  /* transform I top w transition — obie właściwości animują się w tym samym rytmie */
  transition: top 0.95s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.95s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.6s ease;
}


.badge-line1,
.badge-line2 {
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-weight: 400;
  color: #111;
  text-transform: uppercase;
  /* Luźniejsza interlinia: gdyby tekst jednak się zawinął (dłuższa treść z panelu admina),
     linie mają wyraźny odstęp, a nie sklejają się jedna pod drugą */
  line-height: 1.4;
  /* Obie linie tej samej wielkości — dziedziczą skalowany rozmiar z .category-badge */
  font-size: 1em;
  letter-spacing: 0.02em;
}


#cat-1 .category-badge {
  background: #feca1c;
}

#cat-2 .category-badge {
  background: #8378f2;
}

#cat-3 .category-badge {
  background: #f1a0c5;
}

/* Po najechaniu: badge wędruje wyżej i rośnie (transform:scale, tanie dla GPU) —
   tekst startuje tuż pod nim. Stała szerokość + scale = brak przełamywania tekstu
   w locie i brak spadku FPS podczas animacji. */
.column.active .category-badge {
  top: 30%;
  transform: translate(-50%, -50%) scale(1.3);
}

/* Podczas kurczenia się nieaktywnych kolumn — przygaś i pomniejsz (scale), żeby
   plakietka nadal mieściła się w wyraźnie węższej kolumnie */
.column.shrink .category-badge {
  opacity: 0.85;
  transform: translate(-50%, -50%) scale(0.55);
}

/* .info-specialty (Podtytuł), .info-heading (Nagłówek nad opisem), .info-desc (Treść opisu)
   i .info-tagline mają JEDNOLITĄ czcionkę (Montserrat 500, ten sam rozmiar na każdym
   breakpoincie) — niezależnie od kategorii, żeby treść wpisana w panelu admina zawsze
   wyglądała spójnie, bez ręcznego dostrajania CSS per kategoria. */
/* .info-heading / .info-specialty / .info-desc / .info-tagline były na sztywno 1,35rem —
   na desktopie z NISKĄ wysokością okna (np. inny monitor/skalowanie u znajomego klienta)
   cały stos tekstu + przyciski "Zapisy"/"Kontakt" mógł być wyższy niż kolumna (height:100vh,
   .column ma overflow:hidden), więc przyciski "wędrowały pod ekran" i stawały się
   niedostępne. clamp() z vh skaluje tekst proporcjonalnie do WYSOKOŚCI okna — na typowych
   ekranach (referencyjne 900px wysokości) daje dokładnie te same 1,35rem co dotychczas,
   a na niższych oknach kurczy się, żeby przyciski zawsze zmieściły się na ekranie. */
.info-specialty {
  display: block;
  font-family: var(--font-main, 'Montserrat', sans-serif);
  font-weight: 500;
  font-size: clamp(0.9rem, 2.4vh, 1.35rem);
  letter-spacing: normal;
  text-transform: none;
  color: rgba(240, 235, 227, 0.9);
  margin-bottom: 0.75em;
}

.info-heading {
  font-family: var(--font-main, 'Montserrat', sans-serif);
  font-size: clamp(0.9rem, 2.4vh, 1.35rem);
  font-weight: 500;
  line-height: 1.4;
  color: #f0ebe3;
  margin-bottom: 0.75em;
}

.info-desc {
  text-align: center;
  font-family: var(--font-main, 'Montserrat', sans-serif);
  font-weight: 500;
  font-size: clamp(0.9rem, 2.4vh, 1.35rem);
  line-height: 1.55;
  color: rgba(240, 235, 227, 0.9);
  margin-bottom: 0.75em;
  white-space: pre-line;
  max-width: 1200px;
  /* Slightly wider to allow exact breaks from DB to work */
}

.info-tagline {
  font-family: var(--font-main, 'Montserrat', sans-serif);
  font-weight: 500;
  font-size: clamp(0.9rem, 2.4vh, 1.35rem);
  color: #f0ebe3;
  margin-bottom: 0.75em;
  text-align: center;
}

.info-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.2rem;
  /* Dodatkowy odstęp między końcem tekstu a przyciskami — też skalowany z vh z tego samego
     powodu co teksty wyżej. */
  margin-top: clamp(0.75rem, 5.1vh, calc(1rem + 30px));
}

.info-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Primary actions: prominent buttons */
.info-links a.btn-primary,
.info-links a.btn-secondary {
  background: rgba(240, 235, 227, 0.15);
  color: #f0ebe3;
  border: 1.5px solid rgba(240, 235, 227, 0.4);
  backdrop-filter: blur(4px);
}

/* Hover effects with section colors */
.info-links a:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.column.active .info-links a.btn-primary:hover,
.column.active .info-links a.btn-secondary:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  box-shadow: 0 0 15px var(--accent-color);
}

/* Adjust SVG icon styles inside buttons */
.info-links a svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.info-links a:hover svg {
  transform: scale(1.1);
}

/* ===== CONTACT PAGE STYLES ===== */
body.page-kontakt,
body.page-legal {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
}

.contact-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--navbar-height) + 60px) 2rem 5rem;
  overflow: clip;
  color: var(--text-color);
}

.contact-header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.contact-title {
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-size: 3.5rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-color);
  margin-bottom: 1rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.contact-subtitle {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-color);
  opacity: 0.8;
}

/* ============================================================================
   TYMCZASOWE POMNIEJSZENIE STRONY "O NAS" O 30% — WSZYSTKO OPRÓCZ "ZOSTAŃMY W KONTAKCIE!"
   (sekcje O NAS, CO OFERUJEMY, NASZ ZESPÓŁ: odstępy, zdjęcia, napisy proporcjonalnie mniejsze).
   Żeby COFNĄĆ: zakomentuj albo usuń poniższą regułę — nic więcej nie trzeba zmieniać.
   ============================================================================ */
.about-redesign > .about-block,
.about-redesign > .team-section {
  zoom: 0.7;
}

/* ===== STRONA "O NAS" — bloki O NAS / CO OFERUJEMY z okrągłymi zdjęciami i kształtami ===== */
.about-redesign {
  overflow: visible;
  max-width: 1600px;
}

.about-block {
  max-width: 1400px;
  margin: 0 auto 2.1rem;
  text-align: center;
  position: relative;
}

.about-block:last-of-type {
  margin-bottom: 1.4rem;
}

.about-block-heading {
  position: relative;
  display: inline-block;
  margin: 0 auto 0.55rem;
}

.about-block-heading #about-header-container,
.about-block-heading .contact-title {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}

/* Wszystkie nagłówki strony "O nas" ("O NAS", "CO OFERUJEMY", "NASZ ZESPÓŁ",
   "ZOSTAŃMY W KONTAKCIE!") — 3rem powiększone o 40%. */
.about-block-heading .contact-title {
  font-size: 4.2rem;
  text-transform: uppercase;
  text-shadow: none;
}

/* "Zostańmy w kontakcie!" -30% względem pozostałych nagłówków (4.2rem x 0,7) */
.contact-cta .contact-title {
  font-size: 2.94rem;
}

.about-block-desc {
  max-width: 1360px;
  margin: 0 auto;
  color: var(--text-color);
  opacity: 0.85;
}

/* Wspólna typografia tekstów na stronie "O nas": bloki "O NAS"/"CO OFERUJEMY" oraz opisy
   członków zespołu mają mieć ten sam krój, rozmiar i to samo zachowanie przy zmianie ekranu.
   Trzymamy to w jednej regule, żeby te dwa miejsca nie rozjechały się przy kolejnych zmianach. */
.about-block-desc p,
.team-member-desc,
.contact-cta-body {
  line-height: 1.35;
  /* Skalowane liniowo z szerokością ekranu (nie tylko na mobile), bo przy white-space: nowrap
     czcionka MUSI kurczyć się razem z dostępną szerokością kontenera na każdej szerokości,
     inaczej najdłuższe ręcznie ustalone linie ("#") nachodziłyby/ucinały się zamiast się skalować.
     Współczynnik dobrany tak, by najdłuższa linia (~80 znaków) mieściła się w kontenerze od
     najmniejszych telefonów aż do progu, na którym .about-block-desc osiąga max-width (1360px). */
  font-size: clamp(5px, calc(2.2vw - 1.4px), 1.9375rem);
}

/* Linie w tekście są ustalone ręcznie (znacznik "#" -> twardy <br> po stronie renderowania) —
   white-space: nowrap gwarantuje, że przeglądarka nigdy nie zawinie tekstu gdzie indziej,
   tylko tam gdzie wskazuje autor. Akapity ("$") to osobne <p> z odstępem 3/4 wysokości wiersza.
   Opisów zespołu to NIE dotyczy — tam nie ma znaczników, więc tekst zawija się normalnie. */
.about-block-desc p {
  white-space: nowrap;
  margin: 0 0 1.1625em;
}

.about-block-desc p:last-child {
  margin-bottom: 0;
}

/* Ekran PIONOWY (proporcje węższe niż 1:1 — telefony i tablety trzymane pionowo).
   Tutaj ręcznie ustalone linie ("#") nie mają sensu: przy ~40 znakach szerokości czcionka
   musiałaby zejść do nieczytelnego rozmiaru. Więc chowamy twarde <br> i pozwalamy tekstowi
   zawijać się naturalnie w kontenerze, przy rozmiarze czcionki czytelnym na mobile.
   Podział na akapity ("$") zostaje bez zmian — to nadal osobne <p>.
   Zapis "not all and (min-aspect-ratio: 1/1)" = proporcje MNIEJSZE niż 1:1, więc ekran
   dokładnie kwadratowy i wszystko szersze (desktopy, telefon poziomo) działa jak dotąd. */
@media not all and (min-aspect-ratio: 1/1) {
  .about-block-desc p,
  .team-member-desc,
  .contact-cta-body {
    font-size: clamp(1.05rem, 4vw, 1.45rem);
    line-height: 1.5;
    text-wrap: pretty;
  }

  .about-block-desc p {
    white-space: normal;
  }

  .about-block-desc p br {
    display: none;
  }

  /* Opis kursu w rozwiniętym kaflu na stronie głównej ma ręcznie wstawione złamania linii,
     dobrane pod szeroki ekran. Na telefonie (ekran pionowy) dawały poszarpany, przypadkowy
     układ — chowamy je i pozwalamy tekstowi zawijać się samemu.
     Kolejność ma znaczenie: bazowo .info-desc ma white-space: pre-line, przy którym spacja
     sąsiadująca z ukrytym <br> jest traktowana jako biały znak na końcu linii i znika —
     wyrazy skleiłyby się w "rysunkuarchitektonicznego". Dlatego najpierw wracamy do
     zwykłego zawijania, a dopiero potem chowamy złamania (tak samo jak .about-block-desc). */
  .info-desc {
    white-space: normal;
  }

  .info-desc br {
    display: none;
  }

  /* Teksty na stronie "O nas" (opisy bloków + bio zespołu + tekst "Zostańmy w kontakcie") —
     +20% na życzenie klienta. Scoped do .about-redesign (main tylko strony O nas), żeby NIE
     ruszać tego samego .about-block-desc na Kontakcie (.kontakt-intro) ani w Galerii
     (#portfolio-header-container), które mają własne, osobno strojone rozmiary. */
  .about-redesign .about-block-desc p,
  .about-redesign .team-member-desc,
  .about-redesign .contact-cta-body {
    font-size: clamp(1.26rem, 4.8vw, 1.74rem); /* clamp(1.05rem, 4vw, 1.45rem) x 1,2 */
  }
}

/* --- Dekoracyjne kształty (tło) --- */
.about-shape {
  position: absolute;
  pointer-events: none;
  display: block;
}

.about-shape.about-shape-circle {
  border-radius: 50%;
}

.about-shape.about-shape-purple {
  background: #8378f2;
}

.about-shape.about-shape-pink {
  background: #f9a2c5;
}

.about-shape.about-shape-yellow {
  background: #feca1c;
}

/* --- Rząd dwóch okrągłych zdjęć --- */
.about-photos-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  margin-top: 4.8rem;
  padding: 0 1rem 4.8rem;
}

.about-photo-wrap {
  position: relative;
  flex: 1 1 508px;
  max-width: 595px;
  aspect-ratio: 1 / 1;
}

.about-photo-circle {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Duże półkola "wychodzące" z krawędzi ekranu — pozycjonowane względem wyśrodkowanego .about-photos-row,
   nie względem pojedynczego zdjęcia, żeby nigdy nie chowały się pod zdjęciem */
.about-edge-shape {
  width: 263px;
  height: 263px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}

.about-edge-shape-left {
  left: -166px;
}

.about-edge-shape-right {
  right: -166px;
}

.about-shape.about-shape-square {
  width: 25%;
  height: 25%;
  z-index: 4;
  border-radius: 6px;
}

.about-photo-left .about-shape-square.about-shape-fg {
  left: -18px;
  bottom: -18px;
}

/* ===== SEKCJA "NASZ ZESPÓŁ" — pionowa kolumna: zdjęcie w kole, pigułka z imieniem, opis =====
   Odstępy są w px celowo (nie w rem), bo zostały ustalone jako konkretne wartości:
   wewnątrz jednej osoby i większy między kolejnymi osobami (bazowo 23px i 36px x 1,67). */
.team-section {
  --team-gap: 38.41px;
  --team-gap-between: 60.12px;
}

/* Nagłówek sekcji nie dokłada własnego marginesu — odstęp do pierwszego zdjęcia
   ma wynikać wyłącznie z .team-list, żeby liczba w kodzie zgadzała się z tym na ekranie. */
.team-section .about-block-heading {
  margin-bottom: 0;
}

.team-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--team-gap);
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.team-member + .team-member {
  margin-top: var(--team-gap-between);
}

/* Zdjęcie profilowe: 6x większe niż w poprzednim układzie (80px -> 480px), nadal w kole.
   min() pilnuje, żeby na wąskich ekranach koło nie wyszło poza szerokość strony. */
.team-member-photo {
  width: min(480px, 72vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Zaokrąglona pigułka (grafika z assets) z imieniem wypełniającym jej wnętrze.
   container-type + jednostki cqw sprawiają, że napis skaluje się razem z pigułką
   na każdej szerokości ekranu — bez przeliczania czegokolwiek w JS przy zmianie rozmiaru okna. */
.team-member-badge {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(480px, 72vw);
  aspect-ratio: 581 / 141;
  /* Między zdjęciem a imieniem idzie ten większy odstęp */
  margin-top: var(--team-gap-between);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --name-fit wylicza JS: bierze mniejszy z dwóch limitów — szerokości napisu i jego realnej
   wysokości liter — tak, żeby nad i pod imieniem zawsze został margines wewnątrz pigułki.
   Wartość jest w cqw, więc pozostaje poprawna po każdej zmianie szerokości okna. */
.team-member-badge span {
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  color: #111;
  white-space: nowrap;
  font-size: var(--name-fit, 13cqw);
}

.team-member-desc {
  max-width: 1100px;
  margin: var(--team-gap) 0 0;
  color: var(--text-color);
  opacity: 0.85;
  text-wrap: pretty;
}

/* ===== SEKCJA "ZOSTAŃMY W KONTAKCIE!" ===== */
.contact-cta {
  padding: 3rem 0;
}

/* Maska sekcji "Zostańmy w kontakcie!" — to jedyna sekcja reveal-on-scroll, za którą nie ma
   już żadnej treści (tylko stopka), więc jej animacja wjazdu (translateY) musi być przycięta
   TUTAJ, lokalnie. Przycięcie na .contact-main by się przydało, ale nie zadziała: .about-redesign
   na tym samym <main> ustawia "overflow: visible" (potrzebne dla dekoracyjnych półkoli wyżej
   na stronie) i to nadpisuje clip z .contact-main. Bez tej maski nieprzycięty ruch tej sekcji
   chwilowo powiększał wysokość całej strony podczas wjazdu, a przeglądarka w locie
   doklamrowywała pozycję scrolla — stąd przeskakiwanie i blokowanie scrolla.
   Wysokość maski wynika WYŁĄCZNIE z docelowego (nieprzesuniętego) rozmiaru .contact-cta,
   bo transform nie wpływa na layout — więc strona ma stały rozmiar przez całą animację,
   a sekcja wygląda jakby wyjeżdżała zza dolnej krawędzi ekranu. */
.contact-cta-mask {
  overflow: clip;
}

/* Nagłówek musi być blokiem, inaczej stanąłby w jednej linii z blokiem adresu
   (oba są inline-block) i kulka nachodziłaby na napis. */
.contact-cta .about-block-heading {
  display: block;
}

/* inline-block, żeby szerokość bloku wynikała z najdłuższej linii adresu — dzięki temu
   kulka po lewej trzyma stały odstęp od tekstu, a nie od krawędzi całej sekcji. */
.contact-cta-body {
  position: relative;
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--text-color);
  opacity: 0.85;
}

.contact-cta-lines {
  margin: 0;
}

/* Kulka: średnica 4x rozmiar tekstu (4em względem .contact-cta-body),
   ustawiona 70px na lewo od lewej krawędzi tekstu i wyśrodkowana w pionie. */
.contact-cta-dot {
  width: 4em;
  height: 4em;
  right: calc(100% + 70px);
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 1300px) {
  .about-edge-shape {
    width: 525px;
    height: 525px;
  }

  .about-edge-shape-left {
    left: calc(-50vw + 50% - 262.5px);
  }

  .about-edge-shape-right {
    right: auto;
    left: calc(50vw + 50% - 262.5px);
  }
}

@media (max-width: 768px) {
  .about-block {
    margin-bottom: 1.6rem;
  }

  /* Na telefonie te same nagłówki powiększone o 65% (4.17vw x 1,65) */
  .about-block-heading .contact-title {
    font-size: 6.88vw;
  }

  /* "Nasz zespół" na telefonie dodatkowo +25% względem pozostałych (6.88vw x 1,25) */
  #dynamic-team-title {
    font-size: 8.6vw;
  }

  /* "Zostańmy w kontakcie!" na telefonie -30% względem pozostałych (6.88vw x 0,7) */
  .contact-cta .contact-title {
    font-size: 4.816vw;
  }

  .about-photos-row {
    gap: 1.6rem;
    margin-top: 4.8rem;
  }

  .about-photo-wrap {
    flex-basis: 42%;
    max-width: 385px;
  }

  .about-edge-shape {
    width: 158px;
    height: 158px;
  }

  .about-edge-shape-left {
    left: -88px;
  }

  .about-edge-shape-right {
    right: -88px;
  }

  .about-photo-left .about-shape-square.about-shape-fg {
    left: -12px;
    bottom: -12px;
  }
}

@media (max-width: 480px) {
  .about-photos-row {
    gap: 1.1rem;
    padding: 0 0.5rem 2rem;
  }

  .about-photo-wrap {
    flex-basis: 44%;
    max-width: 298px;
  }

  .about-shape.about-shape-square {
    border-radius: 4px;
  }

  .about-edge-shape {
    width: 112px;
    height: 112px;
  }

  .about-edge-shape-left {
    left: -56px;
  }

  .about-edge-shape-right {
    right: -56px;
  }
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* --- Left Column: Info Cards & Form --- */
.contact-left-col {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.contact-info-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Glassmorphic Contact Card */
.contact-card {
  background: color-mix(in srgb, var(--text-color) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 6%, transparent);
  border-radius: 12px;
  padding: 2.5rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.card-title {
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: var(--text-color);
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  padding-bottom: 0.75rem;
}

.card-detail {
  display: flex;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.card-detail:last-child {
  margin-bottom: 0;
}

.detail-label {
  width: 100px;
  font-weight: 500;
  color: color-mix(in srgb, var(--text-color) 50%, transparent);
  letter-spacing: 0.05em;
}

.detail-link,
.detail-text {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.3s;
}

.detail-link:hover {
  color: var(--highlight-color, #2ecc71);
  /* Accent green as hover indicator */
}

/* Mini Cards for Artists */
.artists-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 1200px) {
  .artists-contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 576px) {
  .artists-contact-grid {
    grid-template-columns: 1fr;
  }
}

.artist-mini-card {
  background: color-mix(in srgb, var(--text-color) 2%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 5%, transparent);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.artist-mini-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--text-color) 20%, transparent);
  background: color-mix(in srgb, var(--text-color) 4%, transparent);
}

/* Active highlighted states for each artist */
.artist-mini-card[data-artist="tomasz"].active {
  border-color: var(--highlight-color, #2ecc71);
  box-shadow: 0 0 15px rgba(46, 204, 113, 0.35);
  background: rgba(46, 204, 113, 0.06);
}

.artist-mini-card[data-artist="anna"].active {
  border-color: #e74c3c;
  box-shadow: 0 0 15px rgba(231, 76, 60, 0.35);
  background: rgba(231, 76, 60, 0.06);
}

.artist-mini-card[data-artist="kasia"].active {
  border-color: #9b59b6;
  box-shadow: 0 0 15px rgba(155, 89, 182, 0.35);
  background: rgba(155, 89, 182, 0.06);
}

/* Highlightable Contact Card (General/Secretariat) */
.highlightable-contact {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.highlightable-contact:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 235, 227, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

.highlightable-contact.active {
  /* Dynamic color applied via inline style in JS, but we set a default border width */
  border-width: 1px;
}

.artist-mini-card[data-artist="marek"].active {
  border-color: #3498db;
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.35);
  background: rgba(52, 152, 219, 0.06);
}

.artist-mini-name {
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-color);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.artist-mini-spec {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color) 40%, transparent);
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
}

.artist-mini-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--text-color) 65%, transparent);
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.artist-mini-link svg.mini-icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.artist-mini-link:hover {
  color: var(--text-color);
  transform: scale(1.02);
}

.artist-mini-link:hover svg.mini-icon {
  opacity: 1;
}

/* Form Styles */
.contact-form-section {
  background: color-mix(in srgb, var(--text-color) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 6%, transparent);
  border-radius: 12px;
  padding: 2.5rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.section-title {
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
  color: var(--text-color);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.form-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: color-mix(in srgb, var(--text-color) 50%, transparent);
}

.form-input,
.form-select,
.form-textarea {
  background: color-mix(in srgb, var(--text-color) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  color: var(--text-color);
  font-family: var(--font-main, 'Montserrat', sans-serif);
  font-weight: 500;
  font-size: 0.95rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  width: 100%;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: color-mix(in srgb, var(--text-color) 30%, transparent);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--text-color) 60%, transparent);
  background: color-mix(in srgb, var(--text-color) 8%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--text-color) 10%, transparent);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0ebe3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.2rem;
  padding-right: 3rem;
  cursor: pointer;
}

/* Custom styling for options to look good in dark mode browsers */
.form-select option {
  background-color: color-mix(in srgb, var(--text-color) 5%, var(--bg-color));
  color: var(--text-color);
}

.form-textarea {
  min-height: 150px;
  resize: vertical;
}

.error-msg {
  font-size: 0.75rem;
  color: #e74c3c;
  display: none;
  margin-top: 0.25rem;
}

.form-group.invalid .form-input,
.form-group.invalid .form-textarea {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.05);
}

.form-group.invalid .error-msg {
  display: block;
}

/* Premium submit button */
.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--text-color) 30%, transparent);
  background: color-mix(in srgb, var(--text-color) 10%, transparent);
  color: var(--text-color);
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-top: 1rem;
}

.submit-btn:hover:not(:disabled) {
  background: #f0ebe3;
  color: #111;
  border-color: var(--text-color);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.submit-btn-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.submit-btn:hover .submit-btn-icon {
  transform: translate(2px, -2px);
}

.form-status {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.85rem 1.25rem;
  border-radius: 6px;
  display: none;
}

.form-status.success {
  display: block;
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.3);
  color: var(--highlight-color, #2ecc71);
}

.form-status.error {
  display: block;
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}

/* --- Right Column: FAQ accordion --- */
.faq-section {
  background: color-mix(in srgb, var(--text-color) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 6%, transparent);
  border-radius: 12px;
  padding: 2.5rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 6%, transparent);
  padding-bottom: 1rem;
}

.faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 1rem 0;
  color: var(--text-color);
  font-family: var(--font-main, 'Montserrat', sans-serif);
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
}

@media (hover: hover) {
  .faq-question:hover {
    color: var(--highlight-color, #2ecc71);
  }
}

.faq-arrow {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: rgba(240, 235, 227, 0.4);
}

@media (hover: hover) {
  .faq-question:hover .faq-arrow {
    color: var(--text-color);
  }
}

.faq-item.active .faq-arrow {
  transform: rotate(180deg);
  color: var(--highlight-color, #2ecc71);
}

.faq-item.active .faq-question {
  color: var(--highlight-color, #2ecc71);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.faq-answer p {
  padding: 0.5rem 0 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
}

/* Nav Active Link style */
.nav-link.active {
  color: var(--text-color);
  border-bottom-color: var(--accent-color);
}

/* ===== BLOG PAGE ===== */
.blog-main {
  max-width: 800px;
  padding: 120px 2rem 4rem;
  margin: 0 auto;
  overflow: clip;
}

.blog-list {
  display: flex;
  flex-direction: column;
}

.blog-list-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: all 0.3s ease;
}

.blog-list-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.blog-list-item:hover {
  padding-left: 1rem;
  background: rgba(255, 255, 255, 0.02);
}

.blog-list-date {
  flex-shrink: 0;
  width: 110px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 235, 227, 0.35);
}

.blog-list-title {
  flex: 1;
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text-color);
  transition: color 0.2s;
}

.blog-list-item:hover .blog-list-title {
  color: var(--highlight-color, #2ecc71);
}

.blog-list-arrow {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: rgba(240, 235, 227, 0.2);
  transition: color 0.2s, transform 0.2s;
}

.blog-list-item:hover .blog-list-arrow {
  color: var(--highlight-color, #2ecc71);
  transform: translateX(4px);
}

/* ===== BLOG POST PAGE ===== */
.blog-post {
  max-width: 780px;
  margin: 0 auto;
}

.blog-post .contact-header {
  margin-bottom: 2.5rem;
}

.blog-post .contact-header .blog-date {
  display: block;
  margin-bottom: 1rem;
}

.blog-post-img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 2.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.blog-post-img img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-post-date {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 235, 227, 0.4);
  margin-bottom: 1rem;
  display: block;
}

.blog-post-content {
  max-width: 700px;
  margin: 0 auto;
}

.blog-post-content p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-color);
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

.blog-post-content h2 {
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-color);
  margin: 2.5rem 0 1rem;
}

.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(240, 235, 227, 0.5);
  text-decoration: none;
  margin-top: 3rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  transition: all 0.3s ease;
}

.blog-back-link:hover {
  color: var(--text-color);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateX(-4px);
}

/* ===== PORTFOLIO PAGE ===== */
body.page-portfolio {
  background: var(--bg-color);
  color: var(--text-color);
  overflow-y: auto;
  min-height: 100vh;
}

.portfolio-main {
  /* 1200px -> 1900px: opis pod "GALERIA" jest teraz o 25% większy (patrz #portfolio-header-container
     niżej) i potrzebuje więcej miejsca, żeby nie wychodzić poza ekran. Przy okazji trochę
     więcej miejsca dostaje też siatka portfolio. */
  max-width: 1900px;
  margin: 0 auto;
  padding: calc(var(--navbar-height) + 60px) 2rem 5rem;
  overflow: clip;
}

/* ===== Nagłówek "GALERIA" — odstępy w px na życzenie klienta, opis pogrubiony i w tym
   samym stylu co tekst na stronie O nas (.about-block-desc, wspólna reguła w style.css). ===== */
#portfolio-header-container {
  max-width: 1900px; /* na tyle szeroki, na ile pozwala .portfolio-main — opis (+25% wielkości) potrzebuje miejsca */
  margin-bottom: 0;   /* odstęp do kolejnych elementów daje margin-bottom opisu, patrz niżej */
}

#portfolio-header-container .contact-title {
  display: inline-block; /* box dokładnie równy tekstowi — potrzebne do pozycjonowania kropki */
  position: relative;
  z-index: 0; /* position+z-index (nawet 0) tworzy nowy kontekst warstwowy, żeby z-index:-1
                 kropki chował ją TYLKO za tym napisem, a nie za całym tłem strony */
  margin-bottom: 40px;
  /* Zrównane z RZECZYWISTYM, wizualnym rozmiarem nagłówka "O nas" na życzenie klienta.
     .about-block-heading .contact-title ma bazowo 4.2rem, ALE sekcje "O nas"/"Co oferujemy"
     (.about-block, .team-section) mają nałożone tymczasowe "zoom: 0.7" (patrz niżej w tym
     pliku) — więc realnie widoczny rozmiar to 4.2rem x 0,7 = 2,94rem, nie 4.2rem wprost. */
  font-size: 2.94rem;
  text-shadow: none;
}

/* Zrównane z RZECZYWISTYM, wizualnym wyglądem opisu na "O nas" (ten sam powód co przy
   nagłówku wyżej — .about-block ma zoom:0.7, więc bazowa formuła czcionki i max-width:1360px
   są tam realnie x0,7 mniejsze niż ich surowe wartości CSS). Stąd czcionka i szerokość
   przeliczone x0,7 tutaj wprost, bez używania zoom (żeby nie ruszać niczego innego na tej
   stronie poza tym konkretnym tekstem). Grubość (waga) zoom nie zmienia, więc zostaje
   dziedziczona z body jak poprzednio. */
#portfolio-header-container .about-block-desc {
  max-width: 992px; /* 952px + 40px na życzenie klienta */
  margin-bottom: 65px;
}

/* Desktop-only — formuła 1,54vw jest skalibrowana pod szerokości desktopowe (993px+);
   bez tego zawężenia ta sama, bezwarunkowa reguła (ID+klasa, wyższa specyficzność niż
   bazowa .about-block-desc p) wygrywałaby TAKŻE na telefonie, gdzie 1,54vw daje ok. 5px
   (realny bug — tekst stawał się "ultra mały" na mobilnych zamiast zostać bez zmian). */
@media (min-aspect-ratio: 1/1) {
  #portfolio-header-container .about-block-desc p {
    font-size: clamp(3.5px, calc(1.54vw - 0.98px), 1.35625rem); /* clamp(5px, calc(2.2vw - 1.4px), 1.9375rem) x 0,7 */
  }
}

/* Żółta kropka: średnica 90px (60px x 1,5), środek pierwotnie 110px w prawo/20px w dół od
   lewego dolnego krańca napisu "GALERIA", przesunięty dwukrotnie o 150px w lewo (razem 300px),
   więc realnie 190px w LEWO od krańca, pionowo bez zmian. top:100% zawsze trafia w dolną
   krawędź .contact-title niezależnie od jego rozmiaru na danej szerokości ekranu — offset
   poprawny wszędzie. z-index:-1 chowa kropkę pod napisem (patrz z-index na .contact-title wyżej). */
.gallery-title-dot {
  position: absolute;
  z-index: -1;
  left: calc(110px - 300px - 45px);
  top: calc(100% + 20px - 45px);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #feca1c;
  pointer-events: none;
}

.portfolio-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(1.75rem + 10px); /* +10px na życzenie klienta */
  margin-bottom: calc(3rem + 20px); /* +20px na życzenie klienta — odstęp do siatki prac */
}

/* Kategorie bez żadnej "formy" (bez tła/obwódki/pigułki) — sam podświetlający się tekst. */
.filter-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-color);
  opacity: 0.55;
  text-transform: uppercase;
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-size: 1.294rem; /* 0.9rem x 1,25 x 1,15 */
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.filter-btn:hover {
  opacity: 0.85;
}

.filter-btn.active {
  color: #feca1c;
  opacity: 1;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.portfolio-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.portfolio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.portfolio-item:hover img {
  transform: scale(1.05);
}

.portfolio-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-item-overlay {
  opacity: 1;
}

.portfolio-item-title {
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-size: 0.9rem; /* 1.5rem x 0,6 (-40%) na życzenie klienta */
  line-height: 2.4; /* "normal" dla tej czcionki/rozmiaru to ok. 1,92 x 1,25 (+25%) */
  font-weight: 400;
  color: #fff;
  margin: 0;
  transform: translateY(10px);
  transition: transform 0.3s ease;
}

.portfolio-item:hover .portfolio-item-title {
  transform: translateY(0);
}

/* ===== LIGHTBOX ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  height: 95vh;
  padding: 0 5rem;
  /* space for arrows */
  box-sizing: border-box;
}

#lightbox-img {
  max-width: 100%;
  min-height: 0;
  flex: 1;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s ease;
}

.lightbox-info {
  margin-top: 1.5rem;
  text-align: center;
  max-width: 800px;
  width: 100%;
  flex-shrink: 0;
  max-height: 25vh;
  overflow-y: auto;
  padding: 0 1rem;
}

#lightbox-title {
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-weight: 400;
  font-size: 2rem;
  color: #fff;
  margin: 0 0 0.5rem 0;
}

#lightbox-desc {
  font-family: var(--font-main, 'Montserrat', sans-serif);
  font-weight: 500;
  font-size: 1rem;
  color: rgba(240, 235, 227, 0.7);
  line-height: 1.6;
  margin: 0;
  white-space: pre-line;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-nav svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.lightbox-prev {
  left: 2rem;
}

.lightbox-next {
  right: 2rem;
}

.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 1001;
}

.lightbox-close:hover {
  transform: scale(1.2);
  color: #e74c3c;
}

.lightbox-close svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/* ===== MAIN TABS — pigułki z naszych wgranych grafik (prostokat-zolty/fioletowy.webp),
   ten sam mechanizm co plakietki z imionami w "Nasz zespół" (container-type + cqw,
   dopasowanie tekstu liczy prace.js -> fitTabPills). Bez linii (obramowania) pod spodem. ===== */
.gallery-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(2rem + 100px); /* +100px na życzenie klienta */
  margin-bottom: 3rem;
}

.gallery-tab-pill {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(157px, 14.3vw, 229px); /* clamp(143px, 13vw, 208px) x 1,10 */
  /* 581/141 x 1,10 szerokości / x 1,30 wysokości — patrz fitTabPills() w prace.js,
     które kompensuje ten wzrost, żeby tekst w pigułkach nie urósł razem z nią. */
  aspect-ratio: 3.4865 / 1;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* "Pracownia" — bez grafiki z assets, bo nie mamy różowego wariantu prostokąta; ta sama
   pigułka odtworzona w czystym CSS tym samym różowym co reszta strony (.about-shape-pink). */
.gallery-tab-pill-pink {
  background-image: none;
  background-color: #f9a2c5;
  border-radius: 999px;
}

.gallery-tab-pill:hover {
  opacity: 0.85;
}

.gallery-tab-pill.active {
  opacity: 1;
  transform: scale(1.05);
}

.gallery-tab-pill span {
  font-family: var(--font-headings, 'Boldonse', system-ui);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  color: #111;
  white-space: nowrap;
  font-size: var(--tab-fit, 9cqw);
  pointer-events: none;
}

/* =========================================================================
   MOBILE RESPONSIVE STYLES
   Nie ruszamy widoku desktopowego — wszystko zamknięte w @media (max-width)
   ========================================================================= */

/* Disable column reveal on desktop so we don't double-animate with hero */
@media (min-width: 993px) {
  .column.reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}

/* ===== TABLET & SMALL DESKTOP (max-width: 992px) ===== */
@media (max-width: 992px) {

  /* Hero columns — make scrollable on touch */
  .hero {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .hero.reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  html,
  body {
    overflow: visible;
    overflow-x: hidden;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .column {
    flex: none !important;
    width: 100%;
    height: 70vh;
    height: 70dvh;
    min-height: 400px;
  }

  .column+.column {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .reveal-left.visible {
    animation-name: revealLeftAnimMobile;
    animation-duration: 1.8s;
  }

  .reveal-right.visible {
    animation-name: revealRightAnimMobile;
    animation-duration: 1.8s;
  }

  .reveal-up.visible,
  .reveal-on-scroll.visible {
    animation-name: revealUpAnimMobile;
    animation-duration: 1.8s;
  }

  /* Info overlay — always show name on mobile, tap to expand */
  .info-content {
    width: 100%;
    max-width: 100%;
    padding: 30px 1rem 0;
  }

  .info-name {
    font-size: 2rem;
  }

  .info-heading {
    font-size: 0.95rem;
  }

  .info-specialty {
    font-size: 0.95rem;
  }

  .info-desc {
    font-size: 0.95rem;
    max-width: 100%;
  }

  .info-tagline {
    font-size: 0.95rem;
  }

  .info-overlay {
    padding: 3rem 1.5rem 2rem;
  }

  /* Subpages */
  .contact-title {
    font-size: 2.5rem;
  }

  #portfolio-header-container .contact-title {
    font-size: 2.3rem; /* 2.5rem x 0,8 x 1,15 */
  }

  .section-title {
    font-size: 1.8rem;
  }

  /* Portfolio */
  .portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
  }

  /* Tabs */
  .gallery-tab-pill {
    width: clamp(129px, 18.6vw, 186px); /* clamp(117px, 16.9vw, 169px) x 1,10 */
  }

  .gallery-tabs {
    gap: 1.25rem;
  }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {
  :root {
    --reveal-duration: 1.8s;
    --reveal-offset: 100px;
  }

  /* --- Navbar: logo i menu zostają w miejscu, wyśrodkowane, bez rozwijania --- */
  :root {
    --navbar-height: 124px;
  }

  .navbar {
    gap: 1.4rem;
    padding: 0.7rem 1.2rem 0.8rem;
  }

  .nav-logo-img {
    height: 49px;
    max-width: 65vw;
    object-fit: contain;
  }

  .logo-text {
    font-size: 0.9rem;
  }

  .nav-right {
    width: 70%;
    row-gap: 0.5rem;
  }

  .nav-link {
    font-size: 0.84rem;
  }

  /* --- Hero --- */
  .hero {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--navbar-height);
  }

  html,
  body {
    overflow: visible;
    overflow-x: hidden;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Wysokość dopasowana do treści (nie sztywne 80dvh) — dzięki temu długi opis
     zawsze mieści się w całości, nic nie jest ucinane ani nie wychodzi poza kafelek. */
  .column {
    flex: none !important;
    width: 100%;
    height: auto;
    min-height: 80dvh;
    /* Plakietka na górze, panel z tekstem na dole, zdjęcie widoczne pomiędzy */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* Na mobile plakietka i panel z tekstem są w NORMALNYM PRZEPŁYWIE (jedno pod drugim),
     a nie pozycjonowane absolutnie jedno na drugim. Dzięki temu plakietka fizycznie nie
     może nachodzić na tekst, a tekst na przyciski — układ sam rezerwuje sobie miejsce. */
  .category-badge {
    /* relative (nie static) — zostaje w przepływie, ale zachowuje z-index,
       więc nie chowa się pod zdjęciem/tintem */
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 1.75rem auto 0;
    /* vw zamiast cqw — kolumna na mobile ma pełną szerokość viewportu i się nie animuje,
       więc to identyczna wartość, bez potrzeby container-type na .column */
    width: min(92vw, 520px);
    font-size: clamp(15px, 5vw, 26px);
  }

  .column.active .category-badge,
  .column.shrink .category-badge {
    position: relative;
    top: auto;
    transform: none;
    opacity: 1;
  }

  .column+.column {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Always show info overlay on mobile */
  .info-overlay {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    /* Panel przylega teraz do treści, więc przyciemnienie musi obejmować cały tekst
       (poprzedni gradient był przezroczysty u góry — pierwsze linie ginęły na jasnym zdjęciu) */
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.84) 65%,
        rgba(0, 0, 0, 0.6) 90%,
        transparent 100%);
    backdrop-filter: none;
    align-items: flex-end;
    justify-content: center;
    padding: 2.5rem 1.5rem 2rem;
  }

  /* Hide the back images on mobile - show only portraits */
  .img-square {
    display: none !important;
  }

  .tint {
    opacity: 0.3;
  }

  .column.active .tint {
    opacity: 0.3;
  }

  .column.active .img-portrait {
    filter: none;
    opacity: 1;
  }

  .column::after {
    display: none;
  }

  .info-content {
    width: 100%;
    max-width: 100%;
  }

  .info-name {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
  }

  .info-specialty {
    font-size: 0.9rem;
  }

  .info-heading {
    font-size: 0.9rem;
  }

  /* Bez -webkit-line-clamp: na mobile opis ma być ZAWSZE widoczny w całości
     (kolumna ma height:auto, więc rośnie tyle, ile trzeba) */
  .info-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 100%;
  }

  .info-tagline {
    font-size: 0.9rem;
  }

  .info-links {
    gap: 0.6rem;
    margin-top: calc(0.5rem + 30px);
  }

  .info-links a {
    font-size: 0.7rem;
    padding: 0.55rem 1rem;
  }

  /* --- Subpages general --- */
  /* Na węższym ekranie padding jest mniejszy niż ujemne przesunięcia dekoracyjnych kulek
     (np. left:-20px) — z overflow:clip z bazowej reguły kulki wyjeżdżające poza padding
     były wizualnie "ucięte" do połowy. Na tej szerokości ten clip nie chroni już przed
     niczym istotnym, więc go zdejmujemy. */
  .contact-main {
    padding: calc(var(--navbar-height) + 30px) 1.2rem 3rem;
    overflow: visible;
  }

  .portfolio-main {
    padding: calc(var(--navbar-height) + 30px) 1.2rem 3rem;
  }

  .contact-header {
    margin-bottom: 2.5rem;
  }

  .contact-title {
    font-size: 2rem;
  }

  #portfolio-header-container .contact-title {
    font-size: 1.84rem; /* 2rem x 0,8 x 1,15 */
  }

  .contact-subtitle {
    font-size: 0.95rem;
  }

  .section-title {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }

  /* --- Contact page --- */
  .contact-card {
    padding: 1.5rem;
    border-radius: 10px;
  }

  .card-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }

  .card-detail {
    flex-direction: column;
    gap: 0.25rem;
  }

  .detail-label {
    width: auto;
  }

  /* --- FAQ --- */
  .faq-section {
    padding: 1.5rem;
  }

  .faq-question {
    font-size: 0.95rem;
    padding: 0.8rem 0;
  }

  .faq-answer p {
    font-size: 0.9rem;
  }

  /* --- Form --- */
  .contact-form-section {
    padding: 1.5rem;
  }

  /* --- Portfolio --- */
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }

  .portfolio-item {
    border-radius: 8px;
  }

  /* Always show overlay on mobile for portfolio */
  .portfolio-item-overlay {
    opacity: 1;
    padding: 1rem;
  }

  .portfolio-item-title {
    font-size: 0.6rem; /* 1rem x 0,6 (-40%) na życzenie klienta */
    transform: none;
  }

  /* Main tabs — +20% na życzenie klienta (7% marginesu dotyczyło w rzeczywistości zdjęć
     na stronie Zajęcia, nie tych pigułek — patrz zajecia/index.html). */
  .gallery-tab-pill {
    width: clamp(128px, 34.3vw, 188px); /* clamp(107px, 28.6vw, 157px) x 1,2 */
  }

  .gallery-tabs {
    gap: 40px;
    margin-bottom: 2.25rem; /* odstęp PRZED filtrami, 3rem x 0,75 (-25%) */
  }

  /* Czcionka kategorii filtrów (Wszystkie / Rysunki architektoniczne / ...) -50%. */
  .filter-btn {
    font-size: 0.647rem; /* 1.294rem x 0,5 */
  }

  /* Odstęp między liniami filtrów po zawinięciu (row-gap) -50% — column-gap (odstęp między
     kategoriami w tej samej linii) zostaje bez zmian, dziedziczony z bazowej reguły "gap". */
  .portfolio-filters {
    row-gap: 19px; /* (1,75rem + 10px) x 0,5 */
    margin-bottom: 51px; /* odstęp PO filtrach, (3rem + 20px) x 0,75 (-25%) */
  }

  /* --- Lightbox --- */
  .lightbox-content {
    padding: 0 1rem;
    height: 90vh;
    /* leave more room for UI on mobile if needed, or keep 95vh */
  }

  .lightbox-nav {
    width: 36px;
    height: 36px;
  }

  .lightbox-prev {
    left: 0.5rem;
  }

  .lightbox-next {
    right: 0.5rem;
  }

  .lightbox-close {
    top: 1rem;
    right: 1rem;
  }

  #lightbox-title {
    font-size: 1.4rem;
  }

  #lightbox-desc {
    font-size: 0.85rem;
  }

  /* --- Blog cards (inline styles override) --- */
  .blog-main {
    max-width: 100%;
  }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
  :root {
    --navbar-height: 112px;
  }

  .navbar {
    padding: 0.6rem 1rem 0.7rem;
    gap: 1.25rem;
  }

  .nav-logo-img {
    height: 43px;
  }

  .nav-right {
    width: 92%;
    row-gap: 0.4rem;
  }

  .nav-link {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
  }

  .logo-mark {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }

  .logo-text {
    font-size: 0.8rem;
  }

  /* height NIE może tu wrócić do sztywnej wartości — na wąskich ekranach tekst jest
     najwyższy i musi zmieścić się w całości (inaczej wychodzi poza kafelek i nachodzi
     na następną kolumnę). Wysokość pozostaje sterowana treścią. */
  .column {
    height: auto;
    min-height: 75vh;
  }

  .info-name {
    font-size: 1.5rem;
  }

  .info-specialty {
    font-size: 0.85rem;
  }

  .info-heading {
    font-size: 0.85rem;
  }

  .info-desc {
    font-size: 0.85rem;
  }

  .info-tagline {
    font-size: 0.85rem;
  }

  .info-links a {
    font-size: 0.65rem;
    padding: 0.5rem 0.8rem;
  }

  .contact-title {
    font-size: 1.7rem;
  }

  #portfolio-header-container .contact-title {
    font-size: 1.564rem; /* 1.7rem x 0,8 x 1,15 */
  }

  .contact-main {
    padding: calc(var(--navbar-height) + 20px) 1rem 2rem;
  }

  .portfolio-main {
    padding: calc(var(--navbar-height) + 20px) 1rem 2rem;
  }

  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .contact-card {
    padding: 1.2rem;
  }

  .faq-section {
    padding: 1.2rem;
  }

  .contact-form-section {
    padding: 1.2rem;
  }

  /* Blog post article — override inline styles */
  .blog-main article {
    flex-direction: column !important;
    height: auto !important;
  }

  .blog-main article>div:first-child {
    flex: none !important;
    height: 200px;
  }

  .blog-main article>div:last-child {
    padding: 1.2rem !important;
  }

  .blog-main article h2 {
    font-size: 1.4rem !important;
  }
}

/* AESTHETIC REVEAL ANIMATIONS GLOBAL */
@keyframes revealUpAnim {
  0% { transform: translateY(240px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes revealLeftAnim {
  0% { transform: translateX(-240px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes revealRightAnim {
  0% { transform: translateX(240px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Mobile keyframes */
@keyframes revealUpAnimMobile {
  0% { transform: translateY(100px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes revealLeftAnimMobile {
  0% { transform: translateX(-100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes revealRightAnimMobile {
  0% { transform: translateX(100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.reveal-on-scroll,
.reveal-up { opacity: 0; will-change: opacity, transform; }
.reveal-left { opacity: 0; will-change: opacity, transform; }
.reveal-right { opacity: 0; will-change: opacity, transform; }

.reveal-left.visible {
  opacity: 1; transform: translateX(0);
  animation-name: revealLeftAnim;
  animation-duration: 3.0s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: backwards;
}

.reveal-right.visible {
  opacity: 1; transform: translateX(0);
  animation-name: revealRightAnim;
  animation-duration: 3.0s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: backwards;
}

.reveal-up.visible,
.reveal-on-scroll.visible {
  opacity: 1; transform: translateY(0);
  animation-name: revealUpAnim;
  animation-duration: 3.0s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: backwards;
}


/* Footer Styles */
.footer {
  padding: 1.5rem 1rem;
  text-align: center;
  background: var(--footer-bg-color, #0e0e0e);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: auto;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.footer-bottom p {
  font-family: var(--font-main, 'Montserrat', sans-serif);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--footer-text-color, rgba(240, 235, 227, 0.2));
  margin: 0;
  letter-spacing: 0.02em;
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.footer-links a {
  font-family: var(--font-main, 'Montserrat', sans-serif);
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--footer-text-color, rgba(240, 235, 227, 0.2));
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.footer-links a:hover {
  font-weight: 700;
}

.footer-links .footer-sep {
  color: var(--footer-text-color, rgba(240, 235, 227, 0.1));
  opacity: 0.5;
  font-size: 0.6rem;
}
/* Nagłówek widoczny wyłącznie dla czytników ekranu i robotów wyszukiwarek.
   Strona główna to układ trzech kafli bez tekstowego tytułu, więc nie miała żadnego <h1> —
   a to jeden z podstawowych sygnałów mówiących wyszukiwarce, czym jest strona. Ten zapis
   NIE ukrywa treści przed użytkownikiem w rozumieniu "ukrytego tekstu" (opisuje dokładnie
   to, co widać na ekranie) i jest standardową techniką dostępności. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}