/*
Theme Name: UnderZone
Theme URI: https://underzone.pl
Author: matusiewicz.eu
Author URI: https://matusiewicz.eu
Description: Wierne (1:1) odwzorowanie prerenderowanej strony Under Zone Tattoo Studio (React/Vite build) serwowane przez WordPress. Każda trasa serwuje oryginalny, prerenderowany dokument HTML z katalogu static/, a współdzielone assety (CSS/JS/obrazy) serwuje Apache z web-roota.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: underzone
*/

/* Drobne poprawki wersji CMS (bez JS bundla). */
html { scroll-behavior: smooth; }
body { background:#0a0a0a; }
/* Treść blogów z oryginału używa tych klas — zapewnij czytelność bez JS. */
.uz-prose p { margin-bottom: 1rem; line-height: 1.75; color: #d1d5db; }
.uz-prose h2 { color:#fff; }
.uz-prose img { border-radius: .5rem; margin: 1.5rem 0; }
.uz-prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; color:#d1d5db; }
.uz-prose a { color:#ef4444; }

/* ------------------------------------------------------------------ *
 *  Utility BRAKUJĄCE w skompilowanym Tailwindzie z oryginału.
 *  Oryginalny build „wyczyścił" (purge) klasy nieużywane w kodzie React,
 *  więc klasy potrzebne w naszych szablonach PHP definiujemy tutaj.
 * ------------------------------------------------------------------ */
/* Pozycjonowanie / warstwy */
.right-6 { right: 1.5rem; }
.z-40 { z-index: 40; }
/* Tła i proporcje */
.bg-cover { background-size: cover; }
.bg-center { background-position: center; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
/* Rozmiary arbitralne */
.h-\[45vh\] { height: 45vh; }
.h-\[60vh\] { height: 60vh; }
.min-h-\[300px\] { min-height: 300px; }
.min-h-\[450px\] { min-height: 450px; }
.min-h-\[60vh\] { min-height: 60vh; }
/* Odstępy */
.gap-10 { gap: 2.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-y-4 > * + * { margin-top: 1rem; }
/* Akordeon FAQ (details/summary) */
.list-none { list-style: none; }
summary::-webkit-details-marker { display: none; }
.group-open\:rotate-45 { display: inline-block; transition: transform .2s; }
details[open] .group-open\:rotate-45 { transform: rotate(45deg); }
/* Różne */
.cursor-zoom-in { cursor: zoom-in; }
.opacity-90 { opacity: .9; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }
/* Galeria „masonry" (kolumny) */
.columns-2 { column-count: 2; }
.\[column-fill\:_balance\] { column-fill: balance; }
.break-inside-avoid { break-inside: avoid; }
@media (min-width:768px){ .md\:columns-3 { column-count: 3; } }
@media (min-width:1024px){ .lg\:columns-4 { column-count: 4; } }
/* Gradienty nakładek (konkretne, niezależne od Tailwind var) */
.uz-fade-b { background-image: linear-gradient(to bottom, rgba(10,10,10,.15), rgb(10,10,10)); }
.uz-fade-t { background-image: linear-gradient(to top, rgb(10,10,10), rgba(10,10,10,.45) 40%, transparent); }

/* ------------------------------------------------------------------ *
 *  Uzupełnienie #2 — klasy z oryginalnego home-main.html (strona główna),
 *  wykryte pełnym skanem względem skompilowanego Tailwinda.
 * ------------------------------------------------------------------ */
/* Rozmiary/pozycje arbitralne używane w hero i kartach */
.min-h-\[480px\] { min-height: 480px; }
.h-\[300px\] { height: 300px; }
.h-\[350px\] { height: 350px; }
.h-\[1px\] { height: 1px; }
.w-\[200px\] { width: 200px; }
.max-w-\[240px\] { max-width: 240px; }
.border-x-\[4px\] { border-left-width: 4px; border-right-width: 4px; }
.h-3\.5 { height: .875rem; }
.w-3\.5 { width: .875rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
@media (min-width:640px){
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width:768px){
  .md\:h-16 { height: 4rem; }
  .md\:w-16 { width: 4rem; }
  .md\:h-\[250px\] { height: 250px; }
  .md\:h-\[450px\] { height: 450px; }
  .md\:w-\[280px\] { width: 280px; }
  .md\:opacity-60 { opacity: .6; }
  .md\:px-20 { padding-left: 5rem; padding-right: 5rem; }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
  .md\:text-8xl { font-size: 6rem; line-height: 1; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width:1024px){
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Wyśrodkowanie absolutne (blob-y dekoracyjne, ikony) */
.top-1\/2 { top: 50%; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
/* Tła / kolory z przezroczystością (marka) */
.bg-\[\#0a0a0a\] { background-color: #0a0a0a; }
.bg-brand-red\/10 { background-color: rgb(220 38 38 / .1); }
.bg-brand-red\/20 { background-color: rgb(220 38 38 / .2); }
.border-brand-red\/30 { border-color: rgb(220 38 38 / .3); }
.border-brand-red\/40 { border-color: rgb(220 38 38 / .4); }
.from-brand-dark\/60 { --tw-gradient-from: rgb(10 10 10 / .6); --tw-gradient-to: rgb(10 10 10 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-brand-red\/10 { --tw-gradient-from: rgb(220 38 38 / .1); --tw-gradient-to: rgb(220 38 38 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-brand-red\/20 { --tw-gradient-from: rgb(220 38 38 / .2); --tw-gradient-to: rgb(220 38 38 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-brand-dark\/60 { --tw-gradient-to: rgb(10 10 10 / .6); }
.to-red-900\/20 { --tw-gradient-to: rgb(127 29 29 / .2); }
.via-brand-dark\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgb(10 10 10 / .4), var(--tw-gradient-to); }
.via-brand-red\/30 { --tw-gradient-stops: var(--tw-gradient-from), rgb(220 38 38 / .3), var(--tw-gradient-to); }
/* Blur dekoracyjny (poświata) */
.blur-\[150px\] { filter: blur(150px); }
.blur-\[180px\] { filter: blur(180px); }
.blur-\[200px\] { filter: blur(200px); }
/* Cienie */
.shadow-\[0_0_15px_rgba\(0\,0\,0\,0\.8\)\] { box-shadow: 0 0 15px rgba(0,0,0,.8); }
.shadow-\[0_0_20px_rgba\(220\,38\,38\,0\.3\)\] { box-shadow: 0 0 20px rgba(220,38,38,.3); }
.shadow-\[0_0_20px_rgba\(220\,38\,38\,0\.5\)\] { box-shadow: 0 0 20px rgba(220,38,38,.5); }
.shadow-\[0_0_30px_rgba\(0\,0\,0\,0\.5\)\] { box-shadow: 0 0 30px rgba(0,0,0,.5); }
/* Stany hover / group-hover (interaktywność, drugorzędne wizualnie) */
.hover\:bg-brand-red:hover { background-color: rgb(220 38 38); }
.hover\:bg-red-700:hover { background-color: rgb(185 28 28); }
.hover\:bg-gray-600:hover { background-color: rgb(75 85 99); }
.hover\:border-brand-red:hover { border-color: rgb(220 38 38); }
.hover\:border-brand-red\/50:hover { border-color: rgb(220 38 38 / .5); }
.hover\:text-brand-red:hover { color: rgb(220 38 38); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }
.hover\:from-red-900\/30:hover { --tw-gradient-from: rgb(127 29 29 / .3); }
.hover\:from-purple-700:hover { --tw-gradient-from: rgb(126 34 206); }
.hover\:to-pink-700:hover { --tw-gradient-to: rgb(190 24 93); }
.hover\:from-brand-red\/30:hover { --tw-gradient-from: rgb(220 38 38 / .3); }
.hover\:shadow-\[0_0_30px_rgba\(220\,38\,38\,0\.15\)\]:hover { box-shadow: 0 0 30px rgba(220,38,38,.15); }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:text-brand-red { color: rgb(220 38 38); }
.group:hover .group-hover\:text-white { color: #fff; }
.group:hover .group-hover\:border-brand-red { border-color: rgb(220 38 38); }
.group:hover .group-hover\:border-brand-red\/30 { border-color: rgb(220 38 38 / .3); }
.group:hover .group-hover\:bg-brand-red\/10 { background-color: rgb(220 38 38 / .1); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(.25rem); }
.hover\:-translate-y-2:hover { transform: translateY(-.5rem); }
.mt-0\.5 { margin-top: .125rem; }

/* Ciemny styl map Google (filtr CSS — tak samo jak w oryginale, nie osobny motyw mapy). */
.uz-map-dark { filter: invert(90%) hue-rotate(180deg) saturate(0.9) brightness(0.85); }

/* Ruchoma „klisza" w hero (odtworzenie animacji framer-motion w czystym CSS).
   Kierunek: w prawo (jak w oryginale) — animation-direction: reverse na tych
   samych klatkach kluczowych. Jasność podbita (oryginał był nieco jaśniejszy). */
@keyframes uz-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.uz-marquee { animation: uz-scroll 60s linear infinite reverse; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .uz-marquee { animation: none; } }
.uz-marquee.opacity-50 { opacity: .65; }
@media (min-width:768px){ .uz-marquee.md\:opacity-60 { opacity: .78; } }

/* Klisza „Archiwum Studia" (galeria) — perforacja przez border-dotted, przewijanie w prawo. */
.uz-filmstrip { border-top: 16px dotted #1a1a1a; border-bottom: 16px dotted #1a1a1a; padding: 1rem 0; }
@media (min-width:1280px){ .uz-filmstrip { border-top-width: 24px; border-bottom-width: 24px; padding: 2rem 0; } }
@keyframes uz-scroll-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.uz-marquee-r { animation: uz-scroll-r 70s linear infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .uz-marquee-r { animation: none; } }
.bg-white\/10 { background-color: rgba(255,255,255,.1); }
.border-white\/20 { border-color: rgba(255,255,255,.2); }
.bg-black\/40 { background-color: rgba(0,0,0,.4); }
.bg-brand-gray\/50 { background-color: rgb(23 23 23 / .5); }
.bg-brand-red\/10 { background-color: rgb(220 38 38 / .1); }
.border-brand-red\/30 { border-color: rgb(220 38 38 / .3); }
.from-red-900 { --tw-gradient-from: rgb(127 29 29); --tw-gradient-to: rgb(127 29 29 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.-inset-1 { top: -.25rem; right: -.25rem; bottom: -.25rem; left: -.25rem; }
.blur { filter: blur(8px); }
.group:hover .group-hover\:opacity-50 { opacity: .5; }
.group:hover .group-hover\:duration-200 { transition-duration: .2s; }
.aspect-square { aspect-ratio: 1 / 1; }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.prose { max-width: 65ch; }
.italic { font-style: italic; }
.leading-loose { line-height: 2; }
.prose-invert { color: #d1d5db; }
.space-x-2 > * + * { margin-left: .5rem; }
@media (min-width:1024px){
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-12 { grid-column: span 12 / span 12; }
}
.line-clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* ================================================================== *
 *  WARSTWA MOBILNA (telefony i tablety)
 *  Oryginał był budowany pod desktop; poniższe reguły naprawiają
 *  rozpychanie układu przez nietłamliwą treść (telefony, adresy,
 *  wersaliki z dużym odstępem) oraz zbyt duże odstępy i typografię.
 * ================================================================== */
@media (max-width: 1023px) {
  /* 1) Siatki zawsze jednokolumnowe i wolne od rozpychania.
        `min-width:0` znosi domyślne `auto`, przez które element siatki
        nie może być węższy niż jego najdłuższe słowo. */
  main .grid { grid-template-columns: 1fr !important; }
  main .grid > *, main .flex > * { min-width: 0; }

  /* 2) Łamanie długich ciągów (numery telefonu, adresy, URL-e). */
  main p, main a, main h1, main h2, main h3, main h4, main span, main li, main div {
    overflow-wrap: anywhere;
  }

  /* 3) Media nigdy szersze niż ekran. */
  main img, main iframe, main video { max-width: 100%; }

  /* 4) Rozsądniejsze odstępy (na desktopie były 4rem). */
  main .gap-16 { gap: 2rem; }
  main .gap-12 { gap: 1.75rem; }
  main .gap-10 { gap: 1.5rem; }
  main .space-x-6 > * + * { margin-left: 1rem; }
  main .py-24 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  main .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
  main .mb-16 { margin-bottom: 2.5rem; }
  main .p-8 { padding: 1.25rem; }

  /* 5) Typografia — wersaliki z dużym trackingiem łamały układ. */
  main .text-5xl { font-size: 2.25rem; line-height: 1.1; }
  main .text-6xl { font-size: 2.5rem; line-height: 1.1; }
  main .text-7xl { font-size: 2.75rem; line-height: 1.05; }
  main .text-8xl { font-size: 3rem; line-height: 1; }
  main .tracking-widest { letter-spacing: .08em; }
  main .tracking-\[0\.3em\] { letter-spacing: .18em; }

  /* 6) Przyciski/CTA — pełna szerokość, treść wyśrodkowana. */
  main .inline-flex.px-8, main .inline-flex.px-6 { justify-content: center; }
}

/* Telefony (do 640px) */
@media (max-width: 640px) {
  /* Klisze: mniejsze klatki, żeby było widać więcej i mniej ciągnęło CPU. */
  .uz-filmstrip .flex-none { width: 180px !important; }
  .uz-filmstrip { border-top-width: 10px; border-bottom-width: 10px; padding: .5rem 0; }
  main .uz-marquee .flex-none { width: 150px !important; height: 240px !important; }

  /* Hero niższy — 60vh z minimum 450px zabierało cały ekran telefonu. */
  main > div > div > header.bg-black { height: 62vh !important; min-height: 380px !important; }

  /* Siatki miniatur i kart: pojedyncza kolumna z mniejszym odstępem. */
  main .gap-8 { gap: 1rem; }
  main .gap-6 { gap: .875rem; }

  /* Pływający telefon nie zasłania treści/CTA. */
  a[aria-label="Zadzwoń"] { width: 52px; height: 52px; bottom: 1rem; right: 1rem; }

  /* Karuzela opinii — bez strzałek (są gesty/kropki), luźniejszy tekst. */
  .uz-rev__slide { padding: 20px; }
  .uz-rev__slide p { font-size: 15px; }
}

/* Tablety (641–1023px) — dwie kolumny tam, gdzie desktop ma trzy/cztery. */
@media (min-width: 641px) and (max-width: 1023px) {
  main .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Sekcje jednokolumnowe (kontakt, treść) zostają pełną szerokością. */
  main .max-w-3xl .grid, main .max-w-4xl .grid { grid-template-columns: 1fr !important; }
  .uz-filmstrip .flex-none { width: 220px !important; }
}

/* --- Dostępność dotykowa: minimalne cele 44x44 (WCAG 2.5.5 / Apple HIG) --- */
@media (max-width: 1023px) {
  main .page-numbers, main nav a, main .pagination a, main .pagination span {
    min-width: 44px; min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; padding: 0 10px;
  }
  main a.text-brand-red, main a.hover\:underline { padding-top: 6px; padding-bottom: 6px; display: inline-block; }
}