/* =========================================================
   UI — Termo Garaż
   Tokeny, wrapper sekcji, przyciski, utils.
   Ładowane po style.css, przed modułami sekcji.
   ========================================================= */

:root {
    --adcore-section-max: 1450px;
    --adcore-gutter: clamp(1.25rem, 4vw, 2.75rem);

    --tg-base: var(--wp--preset--color--base, #070707);
    --tg-surface: var(--wp--preset--color--surface, #141418);
    --tg-ink: var(--wp--preset--color--contrast, #f5f5f7);
    --tg-muted: var(--wp--preset--color--secondary, #d6d6d6);
    --tg-faint: var(--wp--preset--color--contrast-muted, #dbdbdb);
    --tg-accent: var(--wp--preset--color--primary, #e11d2e);
    --tg-accent-hover: #f2323f;
    --tg-line: rgba(245, 245, 247, 0.12);
    --tg-line-strong: rgba(245, 245, 247, 0.22);

    --tg-radius: 14px;
    --tg-radius-lg: 26px;
    --tg-pill: 999px;

    --tg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --tg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wrapper treści sekcji — szerokość jak header i footer */
.adcore-wrap {
    width: 100%;
    max-width: var(--adcore-section-max);
    margin-inline: auto;
    padding-inline: var(--adcore-gutter);
}

/* =========================================================
   Przyciski
   Pigułka, hairline, akcentowy chip ze strzałką.
   Hover = zmiana koloru tła lub tekstu.
   ========================================================= */

.tg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-height: 3.25rem;
    padding: 0 1.55rem;
    border: 1px solid transparent;
    border-radius: var(--tg-pill);
    font-family: var(--wp--preset--font-family--montserrat);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 0.3s var(--tg-ease),
        border-color 0.3s var(--tg-ease),
        color 0.3s var(--tg-ease);
}

.tg-btn:has(.tg-btn__chip) {
    padding-right: 0.4rem;
}

.tg-btn__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--tg-pill);
    background-color: var(--tg-accent);
    color: #fff;
    transition: background-color 0.3s var(--tg-ease);
}

.tg-btn__chip svg {
    width: 0.85rem;
    height: 0.85rem;
    display: block;
}

.tg-btn:hover .tg-btn__chip,
.tg-btn:focus-visible .tg-btn__chip {
    background-color: var(--tg-accent-hover);
}

/* Szkło na zdjęciu */
.tg-btn--glass {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--tg-ink);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.tg-btn--glass:hover,
.tg-btn--glass:focus-visible {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* Pełny akcent */
.tg-btn--solid {
    background-color: var(--tg-accent);
    color: #fff;
}

.tg-btn--solid:hover,
.tg-btn--solid:focus-visible {
    background-color: var(--tg-accent-hover);
    color: #fff;
}

.tg-btn--solid .tg-btn__chip {
    background-color: rgba(0, 0, 0, 0.22);
}

.tg-btn:hover .tg-btn--solid .tg-btn__chip {
    background-color: rgba(0, 0, 0, 0.32);
}

/* Obrys */
.tg-btn--ghost {
    background-color: transparent;
    border-color: var(--tg-line-strong);
    color: var(--tg-ink);
}

.tg-btn--ghost:hover,
.tg-btn--ghost:focus-visible {
    background-color: rgba(245, 245, 247, 0.08);
    color: #fff;
}

/* Cichy link tekstowy */
.tg-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.25rem;
    padding-inline: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--tg-muted);
    transition: color 0.3s var(--tg-ease);
}

.tg-link svg {
    width: 0.8rem;
    height: 0.8rem;
}

.tg-link:hover,
.tg-link:focus-visible {
    color: var(--tg-ink);
}

.tg-btn:focus-visible,
.tg-link:focus-visible {
    outline: 2px solid var(--tg-accent);
    outline-offset: 4px;
}

/* =========================================================
   Utils
   ========================================================= */

@keyframes tg-rise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.tg-rise {
    opacity: 0;
    animation: tg-rise 0.8s var(--tg-ease-out) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .tg-rise {
        animation: none;
        opacity: 1;
        transform: none;
    }
}