/* ============================================================
 * main.css — Fundament systemu designu Fotogaleria.
 * Kolejność sekcji: reset → base/typografia → layout → siatka → komponenty.
 * Wszystkie wartości pochodzą z tokens.css (ładowany wcześniej).
 * Widoki konkretne (landing, lightbox) dostaną własne pliki w Etapach 4–6.
 * ============================================================ */

/* ============================================================
 * 1. RESET / NORMALIZE (minimalny, nowoczesny)
 * ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

/* Atrybut hidden musi chować element nawet, gdy komponent ustawia własny display
   (np. .btn { display: inline-flex }). Bez tego ukryte przyciski wciąż się pokazują. */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
}

/* Respektuj preferencję ograniczenia ruchu (dostępność) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
 * 2. BASE / TYPOGRAFIA (ciemny motyw)
 * ============================================================ */
body.fotogaleria {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
}

.fotogaleria h1,
.fotogaleria h2,
.fotogaleria h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

.fotogaleria h1 { font-size: var(--text-4xl); }
.fotogaleria h2 { font-size: var(--text-3xl); }
.fotogaleria h3 { font-size: var(--text-2xl); }

.fotogaleria h4,
.fotogaleria h5,
.fotogaleria h6 {
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

.fotogaleria h4 { font-size: var(--text-xl); }
.fotogaleria h5 { font-size: var(--text-lg); }
.fotogaleria h6 {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
}

.fotogaleria p {
    line-height: var(--leading-normal);
    color: var(--color-text);
}

.fotogaleria a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.fotogaleria a:hover {
    color: var(--color-accent);
}

.fotogaleria small {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Focus widoczny tylko przy nawigacji klawiaturą (dostępność) */
.fotogaleria :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Tekst pomocniczy ukryty wizualnie, dostępny dla czytników ekranu */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Etykiety/eyebrow — drobny wersalik nad nagłówkiem */
.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
}

.text-muted  { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }

/* Logo marki — bazowe ustawienia; wysokość dopina każdy kontekst osobno
   (nagłówki w checkout.css/gallery.css, stopka i „nie znaleziono" tu niżej). */
.fg-logo {
    display: block;
    width: auto;
    max-width: 100%;
}
.fg-notfound__logo { height: 14px; }

/* ============================================================
 * 3. LAYOUT (kontener, stack, sekcje)
 * ============================================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container--narrow {
    max-width: var(--container-narrow);
}

/* Pionowy rytm — odstęp między dziećmi bez marginesów ad hoc */
.stack > * + * {
    margin-top: var(--space-md);
}
.stack--lg > * + * { margin-top: var(--space-lg); }
.stack--xl > * + * { margin-top: var(--space-xl); }

/* Sekcja z genereous oddechem (landing) */
.section {
    padding-block: var(--space-3xl);
}

/* Wyśrodkowanie zawartości (landing/okładka/404). Wysokość daje układ sticky-footer
   poniżej (body flex → main rośnie), więc bez sztywnego 100vh, by stopka była widoczna. */
.center-screen {
    display: grid;
    place-items: center;
    text-align: center;
}

/* ============================================================
 * 4. SIATKA GALERII (CSS Grid, auto-fill minmax — responsywna 4→2→1)
 * ============================================================ */
.grid-gallery {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, var(--grid-tile-min)), 1fr)
    );
}

/* Kafelek zdjęcia — bazowa karta (zawartość dochodzi w Etapie 5) */
.tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base),
                border-color var(--transition-base);
}

.tile:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
}

/* Utrzymanie proporcji obrazka w kafelku */
.tile__media {
    aspect-ratio: 4 / 3;
    background-color: var(--color-bg-subtle);
}

.tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
 * 5. KOMPONENTY: przyciski
 * ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.7em 1.4em;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    line-height: 1;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast);
    text-align: center;
    white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

/* Primary — wysoki kontrast (biały na ciemnym) */
.btn--primary {
    background-color: var(--color-text);
    color: var(--color-bg);
}
.btn--primary:hover {
    background-color: #ffffff;
    color: var(--color-bg);
}

/* Akcent — złoty (CTA wyróżnione) */
.btn--accent {
    background-color: var(--color-accent);
    color: #1a1206;
}
.btn--accent:hover {
    background-color: var(--color-accent-hover);
    color: #1a1206;
}

/* Ghost — obrysowany, do akcji drugorzędnych */
.btn--ghost {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.btn--ghost:hover {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

.btn--block { width: 100%; }
.btn--sm { padding: 0.55em 1.1em; font-size: var(--text-xs); }

/* Przyciski-anchory (np. „Pobierz") — utrzymaj kolor tekstu przycisku,
   bo bazowy kolor linków (.fotogaleria a) ma wyższą specyficzność. */
.fotogaleria a.btn--primary,
.fotogaleria a.btn--primary:hover { color: var(--color-bg); }
.fotogaleria a.btn--accent,
.fotogaleria a.btn--accent:hover { color: #1a1206; }
.fotogaleria a.btn--ghost,
.fotogaleria a.btn--ghost:hover { color: var(--color-text); }

/* ============================================================
 * 6. KOMPONENTY: cena, znaczniki
 * ============================================================ */
.price {
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--color-text);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.7em;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-subtle);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

/* Koszyk (nagłówek siatki i stron WooCommerce) — ikona z plakietką liczby w rogu */
.fg-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--color-text);
}
.fg-cart:hover { color: var(--color-accent); }
.fg-cart__icon {
    flex: 0 0 auto;
}
.fg-cart__count {
    position: absolute;
    top: -0.3em;
    right: -0.3em;
    display: inline-grid;
    place-items: center;
    min-width: 1.3em;
    height: 1.3em;
    padding: 0 0.35em;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1;
    color: var(--color-bg);
    background: var(--color-accent);
    border: 2px solid var(--color-bg);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast);
}
.fg-cart__count.is-empty {
    display: none;
}
.fg-cart__count[data-bump] { transform: scale(1.3); }

/* ============================================================
 * 7. KOMPONENTY: pola formularzy (koszyk/checkout — Etap 7)
 * ============================================================ */
.fotogaleria input[type="text"],
.fotogaleria input[type="email"],
.fotogaleria input[type="tel"],
.fotogaleria input[type="password"],
.fotogaleria input[type="search"],
.fotogaleria textarea,
.fotogaleria select {
    width: 100%;
    padding: 0.75em 1em;
    background-color: var(--color-bg-subtle);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.fotogaleria input::placeholder,
.fotogaleria textarea::placeholder {
    color: var(--color-text-subtle);
}

.fotogaleria input:focus,
.fotogaleria textarea:focus,
.fotogaleria select:focus {
    outline: none;
    border-color: var(--color-border-strong);
}

/* ============================================================
 * 8. POMOCNICZE (utility) — wąski zestaw, nie pełny framework
 * ============================================================ */
.flow-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.full-bleed { width: 100%; }
.hidden { display: none !important; }

/* ============================================================
 * 8a. NAGŁÓWEK DOKUMENTÓW (kontakt, strony prawne) — wyśrodkowane
 * logo w rozmiarze ze strony głównej (jak .fg-home__logo w home.css).
 * Koszyk/checkout mają własny, kompaktowy nagłówek (.fg-wc-head, checkout.css).
 * ============================================================ */
.fg-doc-head {
    padding-top: var(--space-xl);
}
.fg-doc-head__brand { display: block; }
.fg-doc-head__logo {
    width: min(100%, 588px); /* ta sama wielkość co .fg-home__logo */
    height: auto;
    margin-inline: auto;
}

/* ============================================================
 * 9. STOPKA SPRZEDAWCY (Etap 7a) — globalna, przez wp_footer
 * ============================================================ */
.fg-site-footer {
    flex-shrink: 0;
    margin-top: 0;
    padding-block: var(--space-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.fg-site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
}
.fg-site-footer__seller {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}
.fg-site-footer__name {
    color: var(--color-text);
    font-family: var(--font-display);
    text-decoration: none;
}
.fg-site-footer__name:hover { color: var(--color-accent); }
.fg-site-footer__logo { height: 18px; }
.fg-site-footer__payment {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-decoration: none;
}
.fg-site-footer__payment-logo {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.fg-site-footer__payment:hover { color: var(--color-accent); }
.fg-site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}
.fg-site-footer__links a { color: var(--color-text-muted); }
.fg-site-footer__links a:hover { color: var(--color-accent); }

/* Galerie mają ciemne, pełnoekranowe widoki — stopka nie powinna na nich krzyczeć. */
.fg-minimal .fg-site-footer { background: transparent; }

/* Układ „sticky footer": treść rośnie, stopka zawsze na dole z jednakowym marginesem.
   Dzięki temu stopka jest widoczna też na landingu i 404, a odstępy są spójne. */
body.fg-minimal {
    display: flex;
    flex-direction: column;
}
body.fg-minimal > main {
    flex: 1 0 auto;
}

/* ============================================================
 * 10. BANER COOKIES (Etap 7a) — informacyjny, tylko cookies niezbędne
 * ============================================================ */
.fg-cookie {
    position: fixed;
    z-index: var(--z-header);
    left: 50%;
    bottom: var(--space-md);
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 2 * var(--space-md)));
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.fg-cookie[hidden] { display: none; }
.fg-cookie__text {
    margin: 0;
    flex: 1 1 auto;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.fg-cookie__text a { color: var(--color-accent); }
.fg-cookie__accept {
    flex: 0 0 auto;
    padding: 0.6em 1.4em;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: #1a1206;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}
.fg-cookie__accept:hover { background: var(--color-accent-hover); }

@media (max-width: 600px) {
    .fg-site-footer__inner { flex-direction: column; align-items: flex-start; }
    .fg-cookie { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ============================================================
 * 11. OPTYMALIZACJA MOBILNA (Dodatek F)
 * ============================================================ */
/* Mniej powietrza w pionie na telefonach — sekcje nie marnują ekranu. */
@media (max-width: 768px) {
    .section { padding-block: var(--space-2xl); }
}
@media (max-width: 480px) {
    .section { padding-block: var(--space-xl); }
}
/* Wygodniejsze cele dotyku i kompaktowa stopka na telefonie. */
@media (max-width: 600px) {
    .btn { min-height: 44px; }
    .fg-cookie__accept { min-height: 44px; }
    .fg-site-footer { padding-block: var(--space-md); }
}

/* ============================================================
 * 12. PAGINACJA (strona główna: 3 galerie/str.; siatka galerii: 12 zdjęć/str.)
 * Wspólny komponent — kontekstowe klasy: .fg-home-pagination / .fg-grid-pagination.
 * ============================================================ */
.fg-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-xl);
}
.fg-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-width: 44px;   /* wygodny cel dotyku (mobile) */
    min-height: 44px;
    padding: 0 var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
a.fg-pagination__link:hover {
    color: var(--color-text);
    border-color: var(--color-border-strong);
    background: var(--color-bg-subtle);
}
.fg-pagination__link.is-current {
    color: var(--color-bg);
    background: var(--color-accent);
    border-color: var(--color-accent);
    font-weight: 600;
}
.fg-pagination__gap {
    color: var(--color-text-subtle);
    padding: 0 var(--space-2xs);
    user-select: none;
}
/* Na wąskich ekranach chowamy słowa „Poprzednia/Następna" — zostają strzałki. */
@media (max-width: 480px) {
    .fg-pagination__prev span,
    .fg-pagination__next span { display: none; }
}