/**
 * Fichet Network Styles
 * SEO Internal Linking Component
 *
 * @package PFF_Theme
 * @since 1.2.0
 */

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
    --fichet-primary: #c8102e;
    --fichet-primary-dark: #a00d25;
    --fichet-text: #333333;
    --fichet-text-light: #666666;
    --fichet-border: #e0e0e0;
    --fichet-bg-light: #f8f9fa;
    --fichet-spacing-sm: 0.5rem;
    --fichet-spacing-md: 1rem;
    --fichet-spacing-lg: 1.5rem;
    --fichet-spacing-xl: 2rem;
    --fichet-radius: 8px;
}

/* ==========================================================================
   Main Section Container
   ========================================================================== */

.fichet-reseau-idf {
    margin: var(--fichet-spacing-xl) 0;
    padding: var(--fichet-spacing-xl);
    background: var(--fichet-bg-light);
    border-radius: var(--fichet-radius);
}

.fichet-reseau-header {
    text-align: center;
    margin-bottom: var(--fichet-spacing-xl);
}

.fichet-reseau-header h2 {
    color: var(--fichet-text);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--fichet-spacing-md);
}

.fichet-intro {
    color: var(--fichet-text-light);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.fichet-intro strong {
    color: var(--fichet-primary);
}

/* ==========================================================================
   Department Grid Layout
   ========================================================================== */

.fichet-dept-grid {
    display: grid;
    gap: var(--fichet-spacing-lg);
}

.fichet-dept-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.fichet-dept-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.fichet-dept-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Department Column */
.fichet-dept-col {
    background: #ffffff;
    padding: var(--fichet-spacing-lg);
    border-radius: var(--fichet-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}

.fichet-dept-col:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.fichet-dept-col h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--fichet-text);
    margin-bottom: var(--fichet-spacing-md);
    padding-bottom: var(--fichet-spacing-sm);
    border-bottom: 2px solid var(--fichet-primary);
    display: flex;
    align-items: center;
    gap: var(--fichet-spacing-sm);
}

.dept-num {
    background: var(--fichet-primary);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    line-height: 1;
}

/* City List */
.fichet-city-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fichet-city-list li {
    margin-bottom: var(--fichet-spacing-sm);
}

.fichet-city-list li:last-child {
    margin-bottom: 0;
}

.fichet-city-list a {
    color: var(--fichet-text);
    text-decoration: none;
    font-size: 1.1rem;
    display: inline-block;
    padding: 0.3rem 0;
    transition: color 0.2s ease;
    position: relative;
}

.fichet-city-list a:hover {
    color: var(--fichet-primary);
}

.fichet-city-list a::before {
    content: "→";
    margin-right: 0.5rem;
    color: var(--fichet-primary);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.fichet-city-list a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* More Link */
.fichet-more-link {
    display: inline-block;
    margin-top: var(--fichet-spacing-sm);
    color: var(--fichet-text-light);
    font-size: 0.95rem;
    font-style: italic;
}

/* ==========================================================================
   Pills Style
   ========================================================================== */

.fichet-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fichet-spacing-sm);
    justify-content: center;
}

.fichet-pill-link {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: #ffffff;
    border: 1px solid var(--fichet-border);
    border-radius: 50px;
    color: var(--fichet-text);
    text-decoration: none;
    font-size: 1.05rem;
    transition: all 0.2s ease;
}

.fichet-pill-link:hover {
    background: var(--fichet-primary);
    color: #ffffff;
    border-color: var(--fichet-primary);
}

/* ==========================================================================
   Simple List Style
   ========================================================================== */

.fichet-simple-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: var(--fichet-spacing-lg);
}

.fichet-simple-list li {
    margin-bottom: var(--fichet-spacing-sm);
    break-inside: avoid;
}

.fichet-simple-list a {
    color: var(--fichet-primary);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.2s ease;
}

.fichet-simple-list a:hover {
    color: var(--fichet-primary-dark);
    text-decoration: underline;
}

/* ==========================================================================
   Blog Post Local Box
   ========================================================================== */

.fichet-local-box {
    margin: var(--fichet-spacing-xl) 0;
    padding: var(--fichet-spacing-lg);
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-left: 4px solid var(--fichet-primary);
    border-radius: 0 var(--fichet-radius) var(--fichet-radius) 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.fichet-local-box h4 {
    color: var(--fichet-text);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--fichet-spacing-sm);
}

.fichet-local-box > p {
    color: var(--fichet-text-light);
    font-size: 1.05rem;
    margin-bottom: var(--fichet-spacing-md);
}

.fichet-local-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fichet-spacing-sm);
}

/* ==========================================================================
   Single Department Grid
   ========================================================================== */

.fichet-single-dept-grid {
    background: #ffffff;
    padding: var(--fichet-spacing-lg);
    border-radius: var(--fichet-radius);
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Tablet */
@media (max-width: 992px) {
    .fichet-dept-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .fichet-reseau-header h2 {
        font-size: 1.5rem;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .fichet-reseau-idf {
        padding: var(--fichet-spacing-md);
        margin: var(--fichet-spacing-md) 0;
    }
    
    .fichet-dept-grid.cols-4,
    .fichet-dept-grid.cols-3,
    .fichet-dept-grid.cols-2 {
        grid-template-columns: 1fr;
    }
    
    .fichet-reseau-header h2 {
        font-size: 1.25rem;
    }
    
    .fichet-simple-list {
        columns: 1;
    }
    
    .fichet-local-box {
        padding: var(--fichet-spacing-md);
    }
    
    .fichet-pill-link {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
    
    .fichet-city-list a {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .fichet-reseau-idf {
        background: none;
        border: 1px solid #ccc;
    }
    
    .fichet-dept-col {
        box-shadow: none;
        border: 1px solid #eee;
    }
    
    .fichet-pill-link {
        border: 1px solid #999;
    }
}