/*
 * PCN Category Page Styles — pcn-category.css
 * Enqueue from functions.php after pcn-global.css
 */

/* ============================================================
   FILTER BAR
   ============================================================ */

.pcn-cat-filter-bar {
    background: var(--pcn-fog, #F6F7F9);
    border-bottom: 1px solid var(--pcn-silver, #E5E7EB);
    padding: 12px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.pcn-cat-filter-bar__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pcn-cat-filter-bar__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pcn-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.pcn-cat-filter-bar__sort {
    margin-left: auto;
}

/* Filter buttons */
.pcn-network-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.pcn-filter-btn {
    padding: 6px 16px;
    border: 1px solid var(--pcn-silver, #E5E7EB);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #fff;
    color: var(--pcn-muted, #6B7280);
    cursor: pointer;
    transition: all 0.18s ease;
    text-decoration: none !important;
    display: inline-block;
    font-family: var(--font-body, 'Outfit', sans-serif);
}

.pcn-filter-btn:hover {
    border-color: var(--pcn-amber, #F59E0B);
    color: var(--pcn-amber-dk, #D97706);
}

.pcn-filter-btn.active {
    background: var(--pcn-ink, #0C0F14);
    color: #fff !important;
    border-color: var(--pcn-ink, #0C0F14);
}

/* ============================================================
   CATEGORY CONTAINER
   ============================================================ */

.pcn-cat-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.pcn-cat-results-header {
    margin-bottom: 28px;
}

.pcn-cat-section-title {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
    color: var(--pcn-ink, #0C0F14);
    letter-spacing: -0.5px;
    margin: 0;
}

/* ============================================================
   PRODUCT GRID WITHIN CATEGORIES
   Same as main .pcn-grid but with tighter responsive breakpoints
   ============================================================ */

.pcn-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ============================================================
   RELATED CATEGORIES
   ============================================================ */

.pcn-cat-related {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--pcn-silver, #E5E7EB);
}

/* ============================================================
   BUYING GUIDES SECTION
   ============================================================ */

.pcn-cat-guides {
    padding-top: 48px;
    border-top: 1px solid var(--pcn-silver, #E5E7EB);
}

/* ============================================================
   INLINE CATEGORY SHORTCODE (used in page.php)
   When [pcn_category] is inside normal page content
   ============================================================ */

.pcn-page-content .pcn-grid,
.pcn-page-content .pcn-network-filter {
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right: 24px;
}

@media (max-width: 600px) {
    .pcn-page-content .pcn-grid,
    .pcn-page-content .pcn-network-filter {
        margin-left:  -16px;
        margin-right: -16px;
        padding-left:  16px;
        padding-right: 16px;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .pcn-cat-filter-bar { position: static; }
    .pcn-cat-filter-bar__sort { margin-left: 0; width: 100%; }
    .pcn-cat-filter-bar__sort select { width: 100%; }
    .pcn-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 440px) {
    .pcn-cat-grid { grid-template-columns: 1fr; }
}