/*
 * Local Firm Ranker — frontend styles
 * Uzupełnienie do motywu CityPress.
 */

/* ============================================================
   0. DROBNE OVERRIDES KLAS MOTYWU
   ============================================================ */

/* archive.css ustawia margin:0 — dodajemy odstęp pod opisem nagłówka */
.archive-header__desc {
    margin-bottom: var(--sp-4) !important;
}

/*
 * Używa custom properties zdefiniowanych w motywie (--cp-red, --color-*, --fs-*, --sp-*, itd.)
 * NIE redefiniuje klas, które motyw już dostarcza (.archive-header, .container, .section-head,
 * .business-row, .firm-contact, .firm-map, .breadcrumbs, .btn, .badge, .card-link, itd.)
 */

/* ============================================================
   1. KARTY KATEGORII (firm-cat-card, firm-cats-grid)
   Używane w archive + city hub + shortcode city hub
   ============================================================ */

.firm-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.firm-cat-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--ease-base), box-shadow var(--ease-base), border-color var(--ease-base);
}

.firm-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--cp-red);
}

.firm-cat-card__count {
    font-size: var(--fs-13);
    font-weight: 700;
    color: var(--cp-red);
}

.firm-cat-card__name {
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--color-text);
}

.firm-cat-card__desc {
    font-size: var(--fs-13);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}

/* ============================================================
   2. SEKCJA GRUP KATEGORII (używana w city hub)
   ============================================================ */

.firm-section-group {
    margin-bottom: var(--sp-8);
}

.firm-section-group__title {
    font-family: var(--font-heading);
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid var(--color-border);
}

/* ============================================================
   3. PODIUM — TOP firmy w rankingu (karty)
   ============================================================ */

.firm-podium-section {
    margin-bottom: var(--sp-8);
}

/* .firm-podium z firm.css już daje grid 1/2/3 kolumn — nie duplikujemy */

.firm-podium-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: box-shadow var(--ease-base), transform var(--ease-base);
    overflow: hidden;
}

.firm-podium-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

/* ── Pozycja 1: ZŁOTO ── */
.firm-podium-card--pos1 {
    --medal-bg:     #fffbeb;
    --medal-border: #fbbf24;
    --medal-badge:  #b45309;
    border-color: var(--medal-border);
    background:   var(--medal-bg);
}
[data-theme="dark"] .firm-podium-card--pos1 {
    --medal-bg:     rgba(251,191,36,.08);
    --medal-border: #d97706;
    --medal-badge:  #f59e0b;
}

/* ── Pozycja 2: SREBRO ── */
.firm-podium-card--pos2 {
    --medal-bg:     #f8fafc;
    --medal-border: #94a3b8;
    --medal-badge:  #475569;
    border-color: var(--medal-border);
    background:   var(--medal-bg);
}
[data-theme="dark"] .firm-podium-card--pos2 {
    --medal-bg:     rgba(148,163,184,.06);
    --medal-border: #64748b;
    --medal-badge:  #94a3b8;
}

/* ── Pozycja 3: BRĄZ ── */
.firm-podium-card--pos3 {
    --medal-bg:     #fff7ed;
    --medal-border: #fb923c;
    --medal-badge:  #9a3412;
    border-color: var(--medal-border);
    background:   var(--medal-bg);
}
[data-theme="dark"] .firm-podium-card--pos3 {
    --medal-bg:     rgba(251,146,60,.07);
    --medal-border: #c2410c;
    --medal-badge:  #fb923c;
}


.firm-podium-card__badge {
    background: var(--medal-badge, var(--cp-red));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--fs-14);
    font-weight: 700;
    flex-shrink: 0;
    align-self: flex-start;
    line-height: 1;
}

/* Miniatura firmy */
.firm-podium-card__thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-faint);
    flex-shrink: 0;
    overflow: hidden;
}

.firm-podium-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dane firmy */
.firm-podium-card__body {
    flex: 1;
}

.firm-podium-card__name {
    font-family: var(--font-heading);
    font-size: var(--fs-18);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--sp-1);
    line-height: var(--lh-snug);
}

.firm-podium-card__name a {
    color: inherit;
    text-decoration: none;
}

.firm-podium-card__name a:hover {
    color: var(--cp-red);
}

.firm-podium-card__addr {
    font-size: var(--fs-13);
    color: var(--color-text-muted);
    margin: 0 0 var(--sp-2);
}

.firm-podium-card__stars {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.firm-podium-card__score {
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--color-text);
}

.firm-podium-card__count {
    font-size: var(--fs-12);
    color: var(--color-text-muted);
}

/* Przycisk CTA */
.firm-podium-card__cta {
    align-self: flex-start;
    margin-top: auto;
    position: relative;
    z-index: 1;
}


/* ============================================================
   4. SHORTCODE EMBEDS (w treści stron WP)
   ============================================================ */

.lfr-shortcode-cityhub,
.lfr-shortcode-ranking {
    margin: var(--sp-6) 0;
}

.lfr-shortcode-cityhub .firm-seo__title {
    margin-bottom: var(--sp-4);
}

/* ============================================================
   5. LAYOUT ARCHIWUM + SIDEBARU
   Uzupełnienie — layout jest w firm.css motywu, ale dodajemy
   brakujące selektory dla kontekstu wtyczki
   ============================================================ */

/* Jeśli motyw nie ma firm-archive-layout */
.firm-archive-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--sp-8);
    align-items: start;
    padding: var(--sp-6) 0 var(--sp-12);
}

.firm-archive-main {
    min-width: 0;
}

.firm-archive-sidebar {
    position: sticky;
    top: var(--sp-4);
}

/* Karty sidebaru */
.firm-cta-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
    margin-bottom: var(--sp-4);
}

.firm-cta-box__desc {
    font-size: var(--fs-14);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
    margin: var(--sp-3) 0;
}

.firm-cta-box__list {
    list-style: none;
    padding: 0;
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-13);
    color: var(--color-text-muted);
}

.firm-cta-box__list li {
    padding: var(--sp-1) 0;
}

/* Sidebar kategorie */
.firm-sidebar-cats {
    list-style: none;
    padding: 0;
    margin: 0;
}

.firm-sidebar-cats__item {
    border-bottom: 1px solid var(--color-border);
}

.firm-sidebar-cats__item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) 0;
    font-size: var(--fs-14);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--ease-base);
}

.firm-sidebar-cats__item a:hover,
.firm-sidebar-cats__item.is-active a {
    color: var(--cp-red);
}

.firm-sidebar-cats__count {
    font-size: var(--fs-12);
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border-radius: 99px;
    padding: 2px var(--sp-2);
}

/* ============================================================
   6. BLOK SEO (firm-seo)
   Override paddingu z firm.css który daje padding:X 0 (zero poziomy)
   ============================================================ */

.firm-seo {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--sp-6) !important;  /* override firm.css: padding: var(--sp-8) 0 */
    margin-top: var(--sp-6);
}

.firm-seo__title {
    font-family: var(--font-heading);
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--sp-3);
}

.firm-seo__body {
    font-size: var(--fs-15);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
    margin: 0;
}

/* ============================================================
   7. ATRYBUCJA (Google Places API)
   ============================================================ */

.firm-attribution {
    margin-top: var(--sp-6);
    font-size: var(--fs-12);
    color: var(--color-text-faint);
}

/* ============================================================
   7. MAPA (firm-map)
   Uzupełnienie — w przypadku gdy firm.css nie załadowany
   ============================================================ */

.firm-map {
    margin: var(--sp-6) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.firm-map iframe {
    display: block;
    width: 100%;
    height: 360px;
    border: 0;
}

/* ============================================================
   8. GWIAZDKI (star-icon)
   Jeśli nie zdefiniowane w motywie
   ============================================================ */

.star-icon {
    color: #f59e0b;
    font-size: var(--fs-15);
}

.star-icon--empty {
    color: var(--color-border);
}

/* ============================================================
   10. GWIAZDKI OCENY FIRMY (statyczne, read-only)
   Używa tej samej klasy .single-rating__interactive co motyw,
   ale zamiast radio+label mamy <span> z klasą .single-rating__star
   ============================================================ */

.single-rating__interactive {
    display: inline-flex;
    flex-direction: row-reverse; /* motyw renderuje od 5 do 1 */
    gap: 2px;
    pointer-events: none; /* read-only dla firm */
}

.single-rating__star {
    display: inline-flex;
    color: var(--color-border);
}

.single-rating__star svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.single-rating__star.is-active {
    color: #f59e0b; /* amber-400 */
}


@media (max-width: 1024px) {
    .firm-archive-layout {
        grid-template-columns: 1fr;
    }

    .firm-archive-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .firm-cats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 400px) {
    .firm-cats-grid {
        grid-template-columns: 1fr;
    }
}