/* ==========================================================================
   manawaFLOW — STOPKA MARKI (app.manawaflow.pl)

   Jedna definicja wyglądu stopki dla całego serwisu: narzędziownika,
   /21przemiany/ i /portal/. HTML jest w includes/marka_stopka.php. Tak samo
   jak menu (css/marka-naglowek.css) — jeden plik, więc stopka nie może się
   rozjechać między stronami.

   Nazwy klas i wymiary przepisane z coaching.manawaflow.pl: logo 42 px,
   cztery kolumny, dwie środkowe zapakowane w .footer-mobile-group, która na
   telefonie zamienia się w siatkę 2x1 na przygaszonym tle.

   Arkusz jest SAMOWYSTARCZALNY. Strony produktowe mają własne palety
   (styl.css używa --violet/--gold, portal --fiolet/--zloto), więc każdy
   var() ma tu wartość awaryjną — kolory stopki nie zależą od tego, który
   arkusz wczytała strona. Wczytuj go PO arkuszu strony.

   ZASADA MARKI: wszystkie krawędzie są ostre. Zero zaokrągleń.
   ========================================================================== */

.footer {
    background-color: #fff;
    padding-top: 80px;
    border-top: 1px solid var(--line-soft, rgba(15, 18, 25, 0.06));
    font-family: var(--font-body, "Lato", sans-serif);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-dark, #0F1219);
    position: relative;
    z-index: 1;
    text-align: left;
}

/* Szerokość treści stopki. Reguła jest zawężona do .footer, bo strony
   produktowe nie mają klasy .container — mają .wrap i .lp-wrap. Wartości są
   te same (1400 px, margines 5%), więc krawędzie treści pokrywają się przy
   przejściu z narzędziownika na stronę produktu. */
.footer .container {
    box-sizing: border-box;
    width: min(var(--layout-max, 1400px), calc(100% - 2 * var(--layout-gutter, 5%)));
    max-width: var(--layout-max, 1400px);
    margin: 0 auto;
    padding: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 60px;
}

/* Na desktopie wrapper jest przezroczysty dla układu — cztery kolumny w rzędzie.
   Na telefonie zamienia się w siatkę 2x1 (patrz media query niżej). */
.footer-mobile-group { display: contents; }

.footer-brand {
    font-family: var(--font-head, "Poppins", sans-serif);
    font-size: 1.7rem;
    color: var(--color-accent-1, #6A0DAD);
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    font-weight: 700;
    text-transform: lowercase;
}
.footer-brand span { color: var(--color-gold, #FDC500); font-weight: 700; text-transform: uppercase; }

.footer-brand-link { display: inline-block; line-height: 0; text-decoration: none; }
.footer-brand-logo {
    display: block;
    height: 42px;                       /* ta sama wysokość co na coaching */
    width: auto;
    max-width: 200px;
    object-fit: contain;
    margin: 0;
}

.footer-quote {
    font-size: 0.95rem; line-height: 1.6; margin: 0 0 25px;
    color: var(--color-dark, #0F1219); font-style: italic;
}

.footer-socials a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: rgba(106, 13, 173, 0.05);
    color: var(--color-accent-1, #6A0DAD);
    border-radius: 0;
    margin-right: 10px;
    transition: 0.3s;
    text-decoration: none;
    font-family: var(--font-head, "Poppins", sans-serif); font-weight: 700; font-size: 0.8rem;
}
.footer-socials a:hover {
    background: var(--color-accent-2, #0047AB); color: #fff; transform: translateY(-2px);
}

.footer-heading {
    font-family: var(--font-head, "Poppins", sans-serif);
    font-size: 0.9rem; font-weight: 700; text-transform: uppercase;
    color: var(--color-dark, #0F1219);
    margin: 0 0 25px; letter-spacing: 1px; line-height: 1.2;
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { display: inline-block; text-decoration: none; color: var(--color-dark, #0F1219); transition: 0.3s; }
.footer-links a:hover { color: var(--color-accent-1, #6A0DAD); padding-left: 5px; }

.contact-row { margin-bottom: 15px; color: var(--color-dark, #0F1219); font-weight: 400; }
.contact-row a { color: var(--color-accent-2, #0047AB); text-decoration: none; font-weight: 700; }

.footer .gold-text {
    display: block; color: var(--color-gold-ink, #B47E00);
    font-family: var(--font-head, "Poppins", sans-serif); font-weight: 700;
    margin-top: 20px; margin-bottom: 5px;
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;
}
.hours-text { color: var(--color-dark, #0F1219); font-size: 0.9rem; opacity: 0.85; margin-top: 5px; }

.footer-note-small {
    margin-top: 15px; font-size: 0.8rem; color: var(--ink-mut-2, #7C8698);
    text-transform: uppercase; letter-spacing: 0.5px;
}

.footer-bottom {
    border-top: 1px solid var(--line-soft, rgba(15, 18, 25, 0.06));
    padding: 30px 0;
    text-align: center;
    color: var(--color-dark, #0F1219);
    font-size: 0.85rem;
    opacity: 0.85;
}
.footer-bottom-row {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 15px;
}
.footer-disclaimer { color: var(--ink-mut, #5A6472); font-size: 0.8rem; }

/* Wejście prowadzącego. Ma być widoczne dla właściciela i niewidoczne dla
   wzroku klienta — dlatego mikro-rozmiar, wygaszony kolor i żadnego akcentu. */
.footer-admin {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-head, "Poppins", sans-serif);
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-mut-2, #7C8698); text-decoration: none;
    border: 1px solid var(--line-soft, rgba(15, 18, 25, 0.06)); padding: 4px 10px;
    opacity: 0.6; transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.footer-admin:hover, .footer-admin:focus-visible {
    opacity: 1; color: var(--color-accent-1, #6A0DAD);
    border-color: var(--color-accent-1, #6A0DAD); text-decoration: none;
}

/* Linia „Created by” — wspólna dla wszystkich serwisów marki. */
.footer .manawa-creator-credit { color: var(--color-dark, #0F1219); }

/* --- RESPONSYWNOŚĆ ---------------------------------------------------- */

/* Tablet i wąski laptop: stopka schodzi z czterech kolumn na 2x2. Poniżej
   993 px przejmuje ją blok mobilny, dlatego tu jest dolna granica. */
@media (max-width: 1180px) and (min-width: 993px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 50px; }
}

@media (max-width: 992px) {
    /* Stopka na telefonie: jedna kolumna, wyśrodkowana, a dwie kolumny
       linków w zwartej siatce 2x1 na przygaszonym tle. */
    .footer { padding: 40px 20px 0; text-align: center; }

    .footer-grid { display: flex; flex-direction: column; gap: 35px; }

    .footer-brand { font-size: 1.6rem; margin-bottom: 15px; display: block; }
    .footer-brand-logo { margin: 0 auto; }
    .footer-quote { margin: 0 auto 20px; max-width: 320px; font-size: 0.9rem; line-height: 1.5; }
    .footer-socials { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
    .footer-socials a { margin-right: 0; }

    .footer-mobile-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        text-align: left;
        background: #f8fafc;
        padding: 20px;
        border: 1px solid #e2e8f0;
        border-radius: 0;
    }

    .footer-heading {
        font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
        color: var(--ink-mut, #5A6472); margin-bottom: 15px;
        border-bottom: 1px solid #e2e8f0; padding-bottom: 8px;
    }
    .footer-links li { margin-bottom: 10px; }
    .footer-links a { font-size: 0.9rem; }

    .contact-row { justify-content: center; margin-bottom: 8px; font-size: 1.05rem; }
    .footer-note-small { justify-content: center; }

    .footer-bottom-row { flex-direction: column; gap: 12px; text-align: center; }
}