/**
 * Single Location Styles (single-lokalizacja.php)
 * Prefix: loc- (lokalizacja)
 *
 * BREAKPOINTS:
 * - Mobile: 0-599px
 * - Tablet: 600-1023px
 * - Desktop: 1024px+
 *
 * Uses the same CSS custom properties as taxonomy-kategoria-uslug.css / single-usluga.css
 * (--background, --accent, --primary-light, --navy, --primary, --primary-medium,
 * --primary-foreground, --primary-original, --coral, --muted, --muted-foreground,
 * --foreground, --card, --border, --radius, --shadow-sm/md/lg, --section-padding,
 * --container-max, --font-heading, --transition-fast/normal)
 */

/* ========== PAGE WRAPPER ========== */

.loc-page {
    overflow-x: hidden;
}

/* ========== BREADCRUMBS ========== */

.loc-breadcrumbs {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border);
}

.loc-breadcrumbs__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    flex-wrap: wrap;
}

.loc-breadcrumbs__container a {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.loc-breadcrumbs__container a:hover {
    color: var(--primary);
}

.loc-breadcrumbs__container [aria-current="page"] {
    color: var(--navy);
    font-weight: 600;
}

/* ========== HERO ========== */

.loc-hero {
    padding: clamp(2rem, 6vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem);
    background: linear-gradient(135deg, var(--background) 0%, var(--accent) 55%, var(--primary-light) 100%);
}

.loc-hero__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.loc-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

.loc-hero__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.875rem, 5vw, 2.75rem);
    font-weight: 700;
    color: var(--navy);
    line-height: 1.15;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

.loc-hero__heading-accent {
    display: block;
    color: var(--primary);
    margin-top: 0.25rem;
}

.loc-hero__description {
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    color: var(--muted-foreground);
    line-height: 1.7;
    margin: 0 0 1.75rem;
    max-width: 40rem;
}

.loc-hero__cta {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 2rem;
}

.loc-hero__stats {
    list-style: none;
    margin: 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.5rem;
}

.loc-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.loc-hero__stat-value {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

.loc-hero__stat-label {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.loc-hero__image-wrapper {
    position: relative;
}

.loc-hero__image {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 3;
}

.loc-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* No-image variant: single column, content only */
.loc-hero__grid--no-image {
    grid-template-columns: 1fr;
}

.loc-hero__grid--no-image .loc-hero__description {
    max-width: 44rem;
}

/* ========== SOCIAL PROOF BAR ========== */

.loc-social {
    padding: 1.25rem 0;
    background: var(--muted);
    border-bottom: 1px solid var(--border);
}

.loc-social__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.loc-social__reviews {
    display: flex;
    align-items: center;
}

.loc-social__divider {
    width: 1px;
    height: 1.5rem;
    background: var(--border);
    display: none;
}

.loc-social__clients {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    font-weight: 500;
}

/* ========== O MIEŚCIE ========== */

.loc-about {
    padding: var(--section-padding) 0;
    background: var(--background);
}

.loc-about__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.loc-about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

.loc-about__content {
    font-size: 1rem;
    color: var(--foreground);
    line-height: 1.75;
}

.loc-about__content p {
    margin: 0 0 1rem;
}

.loc-about__content p:last-child {
    margin-bottom: 0;
}

.loc-about__image {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 3;
}

.loc-about__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.loc-about__grid--no-image .loc-about__text {
    max-width: 48rem;
}

/* ========== SERVICES GRID ========== */

.loc-services {
    padding: var(--section-padding) 0;
    background: var(--muted);
}

.loc-services__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.loc-services__header {
    margin-bottom: 2.5rem;
    max-width: 40rem;
}

.loc-services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.loc-service-card {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    cursor: pointer;
}

.loc-service-card:hover,
.loc-service-card:focus-visible {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.loc-service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: calc(var(--radius) - 0.125rem);
    background: var(--primary-light);
    color: var(--primary);
    margin-bottom: 1rem;
}

.loc-service-card__icon svg {
    width: 24px;
    height: 24px;
}

.loc-service-card__title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 0.5rem;
}

.loc-service-card__desc {
    font-size: 0.9rem;
    color: var(--muted-foreground);
    line-height: 1.6;
    margin: 0;
}

/* ========== PROCES WSPÓŁPRACY ========== */

.loc-process {
    padding: var(--section-padding) 0;
    background: var(--background);
}

.loc-process__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.loc-process__header {
    margin-bottom: 2.5rem;
    max-width: 40rem;
}

.loc-process__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    position: relative;
}

.loc-process__step {
    position: relative;
}

.loc-process__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--navy);
    color: var(--primary-foreground);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.875rem;
}

.loc-process__step-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 0.375rem;
}

.loc-process__step-text {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.6;
    margin: 0;
}

/* ========== MAPA + OBSZAR ========== */

.loc-map {
    padding: var(--section-padding) 0;
    background: linear-gradient(315deg, var(--background) 0%, var(--accent) 40%, var(--primary-light) 100%);
}

.loc-map__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.loc-map__container > .section-heading {
    margin-bottom: 1.75rem;
}

.loc-map__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.loc-map__embed {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 3;
}

.loc-map__description {
    font-size: 0.9375rem;
    color: var(--foreground);
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

.loc-map__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.loc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 0.25rem);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.loc-chip:hover,
.loc-chip:focus-visible {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* ========== REALIZACJA ========== */

.loc-case {
    padding: var(--section-padding) 0;
    background: var(--background);
}

.loc-case__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.loc-case__container > .section-heading {
    margin-bottom: 1.75rem;
}

.loc-case__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: center;
}

.loc-case__image {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 16 / 10;
}

.loc-case__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.loc-case__desc {
    font-size: 1rem;
    color: var(--foreground);
    line-height: 1.75;
    margin: 0;
}

.loc-case__grid--no-image {
    grid-template-columns: 1fr;
}

/* ========== FAQ ========== */

.loc-faq {
    padding: var(--section-padding) 0;
    background: var(--muted);
}

.loc-faq__container {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.loc-faq__container > .section-heading {
    margin-bottom: 1.75rem;
    text-align: center;
}

.loc-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.loc-faq__item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition-normal);
}

.loc-faq__item[open] {
    box-shadow: var(--shadow-md);
}

.loc-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--navy);
    list-style: none;
    user-select: none;
}

.loc-faq__question::-webkit-details-marker {
    display: none;
}

.loc-faq__chevron {
    flex-shrink: 0;
    color: var(--muted-foreground);
    transition: transform var(--transition-normal);
}

.loc-faq__item[open] .loc-faq__chevron {
    transform: rotate(180deg);
}

.loc-faq__answer {
    padding: 0 1.375rem 1.375rem;
    font-size: 0.9375rem;
    color: var(--foreground);
    line-height: 1.7;
}

.loc-faq__answer p {
    margin: 0 0 0.75rem;
}

.loc-faq__answer p:last-child {
    margin-bottom: 0;
}

/* ========== CTA KOŃCOWE ========== */

.loc-cta-final {
    padding: var(--section-padding) 0;
    background: var(--background);
}

.loc-cta-final__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.loc-cta-final__header {
    margin-bottom: 2rem;
    max-width: 40rem;
}

.loc-cta-final__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.loc-cta-final__form {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}

.loc-cta-final__info {
    background: var(--navy);
    border-radius: var(--radius);
    padding: 1.75rem;
    color: var(--primary-foreground);
}

.loc-cta-final__info-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-original);
    margin: 0 0 0.5rem;
}

.loc-cta-final__phone {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-foreground);
    text-decoration: none;
    margin: 0 0 1.25rem;
}

.loc-cta-final__meta {
    list-style: none;
    margin: 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.loc-cta-final__meta li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: rgba(255, 255, 255, 0.85);
}

.loc-cta-final__meta a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.loc-cta-final__meta a:hover {
    color: var(--primary-original);
}

/* ========== RESPONSIVE — TABLET (600px+) ========== */

@media (min-width: 600px) {
    .loc-hero__cta {
        flex-direction: row;
    }

    .loc-hero__stats {
        grid-template-columns: repeat(4, auto);
        gap: 2rem;
    }

    .loc-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .loc-process__steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .loc-social__divider {
        display: block;
    }
}

/* ========== RESPONSIVE — DESKTOP (1024px+) ========== */

@media (min-width: 1024px) {
    .loc-hero__grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 4rem;
    }

    .loc-about__grid {
        grid-template-columns: 3fr 2fr;
        gap: 3rem;
    }

    .loc-about__grid--no-image {
        grid-template-columns: 1fr;
    }

    .loc-services__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .loc-process__steps {
        grid-template-columns: repeat(4, 1fr);
    }

    .loc-map__grid {
        grid-template-columns: 3fr 2fr;
        gap: 3rem;
    }

    .loc-case__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .loc-case__grid--no-image {
        grid-template-columns: 1fr;
        max-width: 48rem;
    }

    .loc-cta-final__grid {
        grid-template-columns: 1.6fr 1fr;
        gap: 2.5rem;
    }
}

/* ========== RESPONSIVE — LARGE (1280px+) ========== */

@media (min-width: 1280px) {
    .loc-hero__container,
    .loc-social__container,
    .loc-about__container,
    .loc-services__container,
    .loc-process__container,
    .loc-map__container,
    .loc-case__container,
    .loc-faq__container,
    .loc-cta-final__container {
        padding: 0 2rem;
    }
}