/*
Theme Name: Kwadrans Po Czwartej
Theme URI: https://kwadranspoczwartej.pl/
Author: Twoje Imię
Author URI: https://kwadranspoczwartej.pl/
Description: Minimalistyczny motyw portfolio fotograficznego z asymetrycznym układem i dużymi marginesami.
Version: 1.2
Text Domain: kwadrans
*/

/*
Poniżej znajdują się style wspierające nasz minimalistyczny projekt.
UWAGA: Zostaną one prawidłowo zinterpretowane po wczytaniu biblioteki Tailwind CSS.
*/

body {
background-color: #FAFAFA; /* Off-white z Design Systemu */
color: #1A1A1A;
-webkit-font-smoothing: antialiased;
}

/* Płynne powiększanie zdjęcia po najechaniu */
.img-zoom-hover {
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.img-container:hover .img-zoom-hover {
transform: scale(1.03);
}

/* KLASY ASYMETRYCZNEGO UKŁADU (Wymuszane przez ACF) */

/* Typ 1: Duże, centralne (Max 1100px) */
.layout-center-wide { margin: 0 auto; width: 100%; max-width: 1100px; }

/* Typ 2: Wpis tekstowy lub mniejsze, wyśrodkowane zdjęcie (Max 680px) */
.layout-text-narrow { margin: 0 auto; width: 100%; max-width: 680px; }

/* Typ 3: Zdjęcie + Historia (Lewa strona, max 800px) */
.layout-left-medium { margin-right: auto; margin-left: 0; width: 100%; max-width: 800px; }

/* Typ 3 + panorama: szerokie zdjęcie (min. 1.6:1) zajmuje pełną szerokość strony, jak karuzela.
   Tekst pod zdjęciem zostaje w dotychczasowej szerokości 800px. Klasę is-panorama dodaje index.php. */
.layout-left-medium.is-panorama { max-width: none; }
.layout-left-medium.is-panorama .post-text { max-width: 800px; }

/* Typ 4: Zdjęcie pionowe, dosunięte do prawej (Max 600px) */
.layout-right-portrait { margin-left: auto; margin-right: 0; width: 100%; max-width: 600px; }

/* Typ 5: Karuzela zdjęć (pełna szerokość kontenera) */
.layout-carousel { width: 100%; }

/* Inne warianty do wykorzystania w przyszłości */
.layout-center-medium { margin: 0 auto; width: 100%; max-width: 900px; }
.layout-left-portrait { margin-right: auto; margin-left: 0; width: 100%; max-width: 550px; }

/* KARUZELA: ukrycie paska przewijania */
.carousel-track {
scrollbar-width: none;      /* Firefox */
-ms-overflow-style: none;   /* stary Edge */
}
.carousel-track::-webkit-scrollbar { display: none; } /* Chrome, Safari */

/* KARUZELA: kropki pod zdjęciami (mobile) */
.carousel-dot {
display: block;
width: 6px;
height: 6px;
border-radius: 9999px;
background: #D1D5DB;
transition: width 0.3s ease, background-color 0.3s ease;
}
.carousel-dot.is-active {
width: 18px;          /* aktywna kropka zamienia się w krótką "pigułkę" */
background: #1A1A1A;
}

/* KARUZELA: jednorazowe "szturchnięcie" w bok sugerujące swipe (mobile) */
@keyframes carousel-nudge {
0%, 100% { transform: translateX(0); }
30%      { transform: translateX(-40px); }
55%      { transform: translateX(0); }
72%      { transform: translateX(-12px); }
}
.carousel-hint .carousel-slide {
animation: carousel-nudge 1.4s cubic-bezier(0.25, 1, 0.5, 1) 1;
}

@media (prefers-reduced-motion: reduce) {
.carousel-hint .carousel-slide { animation: none; }
}

/* KARUZELA (tylko mobile): wszystkie zdjęcia w tej samej wysokości.
   Szerokość wynika z proporcji zdjęcia. Pionowe kadry pokazują się w całości,
   zdjęcia szersze niż 85% ekranu są lekko przycinane po bokach
   (pełne zdjęcie nadal widać w lightboxie). Desktop bez zmian. */
@media (max-width: 767px) {
.carousel-slide img {
    width: auto;
    height: min(110vw, 62vh);
    max-width: 85vw;
    object-fit: cover;
}
}

/* PAGINACJA */
.kwadrans-pagination-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: 8px;
}
.kwadrans-pagination-status {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #9CA3AF;
}
.kwadrans-pagination-wrap .screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.kwadrans-pagination-wrap .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
}
.kwadrans-pagination-wrap .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 8px;
font-size: 13px;
letter-spacing: 0.08em;
color: #6B7280;
border: 1px solid transparent;
border-radius: 2px;
text-decoration: none;
transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.kwadrans-pagination-wrap a.page-numbers:hover { color: #1A1A1A; border-color: #D1D5DB; }
.kwadrans-pagination-wrap .page-numbers.current { color: #1A1A1A; border-color: #1A1A1A; }
.kwadrans-pagination-wrap .page-numbers.dots { min-width: 24px; }

/* Przyciski "Nowsze" / "Starsze kadry" */
.kwadrans-pagination-wrap .prev.page-numbers,
.kwadrans-pagination-wrap .next.page-numbers {
gap: 12px;
height: 52px;
padding: 0 28px;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #1A1A1A;
border-color: #1A1A1A;
}
.kwadrans-pagination-wrap .next.page-numbers { background: #1A1A1A; color: #FAFAFA; margin-left: 8px; }
.kwadrans-pagination-wrap .prev.page-numbers { margin-right: 8px; }
.kwadrans-pagination-wrap .next.page-numbers:hover { background: #FAFAFA; color: #1A1A1A; border-color: #1A1A1A; }
.kwadrans-pagination-wrap .prev.page-numbers:hover { background: #1A1A1A; color: #FAFAFA; }
.kwadrans-pagination-wrap .pg-arrow { display: inline-block; transition: transform 0.3s ease; }
.kwadrans-pagination-wrap .next:hover .pg-arrow { transform: translateX(4px); }
.kwadrans-pagination-wrap .prev:hover .pg-arrow { transform: translateX(-4px); }

/* Mobile: numery w jednym rzędzie, "Starsze kadry" jako duży przycisk na całą szerokość */
@media (max-width: 767px) {
.kwadrans-pagination-wrap { width: 100%; }
.kwadrans-pagination-wrap .nav-links { width: 100%; }
.kwadrans-pagination-wrap .prev.page-numbers,
.kwadrans-pagination-wrap .next.page-numbers {
    flex: 1 1 100%;
    height: 56px;
    margin: 0;
}
.kwadrans-pagination-wrap .next.page-numbers { order: 2; margin-top: 8px; }
.kwadrans-pagination-wrap .prev.page-numbers { order: 3; }
}