/* =========================================================================
   Barek Ogrodowy — sekcja Kontakt
   --------------------------------------------------------------------
   Eyebrow → heading (Inter bold) → lead, pod nim dwa kompaktowe pillsy
   (e-mail / telefon). Wszystko na tokenach.
   ========================================================================= */

.barek-contact {
    padding: var(--barek-section-py) 0;
    background: var(--barek-cream);
    color: var(--barek-text);
    font-family: var(--barek-font-body);
}

.barek-contact__inner {
    /* max-width / margin / padding-x — w main.css (shared container 1400 px) */
    text-align: center;
}

/* Wewnętrzne elementy dostają węższy max-width dla czytelności tekstu —
   kontener jest 1400 px, ale samo serce sekcji centruje się w 720 px. */
.barek-contact__header,
.barek-contact__items {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Nagłówek sekcji (eyebrow / heading / lead) ---------- */
.barek-contact__header {
    margin-bottom: var(--barek-space-6);
}

.barek-contact__eyebrow {
    margin: 0 0 var(--barek-space-3);
    font-size: var(--barek-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: var(--barek-orange);
}

.barek-contact__heading {
    margin: 0 0 var(--barek-space-3);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-2xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: var(--barek-dark);
}

.barek-contact__lead {
    margin: 0;
    font-size: var(--barek-text-base);
    line-height: 1.6;
    color: var(--barek-muted);
}

/* ---------- Linki kontaktowe (kompaktowe pigułki) ---------- */
.barek-contact__items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--barek-space-3);
}

.barek-contact__item {
    display: inline-flex;
    align-items: center;
    gap: var(--barek-space-2);
    padding: var(--barek-space-3) var(--barek-space-4) var(--barek-space-3) var(--barek-space-3);
    background: var(--barek-white);
    border: 1px solid var(--barek-line);
    border-radius: var(--barek-radius-pill);
    text-decoration: none;
    color: var(--barek-text);
    font-size: var(--barek-text-sm);
    font-weight: 500;
    transition:
        border-color var(--barek-duration) var(--barek-ease),
        color var(--barek-duration) var(--barek-ease),
        transform var(--barek-duration-fast) var(--barek-ease);
}

.barek-contact__item:hover,
.barek-contact__item:focus-visible {
    border-color: var(--barek-orange);
    color: var(--barek-orange);
    transform: translateY(-1px);
}

.barek-contact__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--barek-orange-soft);
    color: var(--barek-orange);
    flex-shrink: 0;
    transition: background var(--barek-duration) var(--barek-ease);
}

.barek-contact__item:hover .barek-contact__item-icon {
    background: rgba(232, 101, 28, 0.22);
}

.barek-contact__item-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.barek-contact__item-value {
    line-height: 1;
}

/* ============================================================
   BREAKPOINTY
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .barek-contact {
        padding: var(--barek-section-py-tablet) 0;
    }
    /* .barek-contact__inner padding-x — w main.css */
}

/* Mobile */
@media (max-width: 640px) {
    .barek-contact {
        padding: var(--barek-section-py-mobile) 0;
    }
    /* .barek-contact__inner padding-x — w main.css */
    .barek-contact__header {
        margin-bottom: var(--barek-space-6);
    }
    .barek-contact__heading {
        font-size: var(--barek-text-xl);
    }
    .barek-contact__items {
        flex-direction: column;
        gap: var(--barek-space-3);
    }
    .barek-contact__item {
        width: 100%;
        max-width: 320px;
        justify-content: flex-start;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .barek-contact__item,
    .barek-contact__item-icon {
        transition: none;
    }
}