/**
 * Layout responsive pour la page Publisher Index - Onglet "Page publique"
 * 
 * Optimisation de l'affichage du profil éditeur selon les résolutions :
 * - 8K, 4K, 2K, FHD : profil occupe 50% de la largeur, zone droite 50%
 * - HD, tablette, smartphone : profil occupe 100% de la largeur, zone droite en dessous
 */

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

.page-publisher-typology {
    /* Breakpoints personnalisés */
    --pub-layout-breakpoint-hd: 1366px;
    --pub-layout-breakpoint-fhd: 1920px;
    --pub-layout-breakpoint-2k: 2560px;
    --pub-layout-breakpoint-4k: 3840px;
    
    /* Espacements */
    --pub-layout-gap: 2rem;
    --pub-layout-gap-mobile: 1rem;
}

/* ============================================================================
   CONTENEUR PRINCIPAL DE LA ZONE ONGLETS - LAYOUT FLEX RESPONSIVE
   ============================================================================ */

/* Wrapper pour le layout responsive de la zone onglets */
.cfy-pi-zone-row {
    display: flex;
    flex-direction: column;
    gap: var(--pub-layout-gap-mobile);
    width: 100%;
    margin-top: 2rem; /* Séparation entre les boutons (suivre / liste noire) et la zone des onglets */
}

/* Colonne principale contenant la zone onglets */
.cfy-pi-zone-col {
    width: 100%;
    flex: 1 1 auto;
}

/* ============================================================================
   LAYOUT RESPONSIVE - GRANDES RÉSOLUTIONS (FHD et plus)
   ============================================================================ */

/* À partir de FHD (1920px) : layout en 2 colonnes */
@media (min-width: 1920px) {
    .cfy-pi-zone-row {
        flex-direction: row;
        gap: var(--pub-layout-gap);
        align-items: flex-start;
    }
    
    /* Colonne de gauche : profil éditeur (50%) */
    .cfy-pi-zone-col {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* Colonne de droite : contenu futur (50%) */
    .cfy-pi-zone-col + .cfy-pi-zone-future-content {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ============================================================================
   OPTIMISATIONS SPÉCIFIQUES PAR RÉSOLUTION
   ============================================================================ */

/* 2K (2560px) et plus : espacement plus généreux */
@media (min-width: 2560px) {
    .cfy-pi-zone-row {
        gap: 2.5rem;
    }
    
    .page-publisher-typology .publisher-profile {
        max-width: none; /* Permet au contenu d'utiliser toute la largeur disponible */
    }
    
    .page-publisher-typology .publisher-profile__body {
        max-width: none; /* Retire la limite de 72ch pour les grandes résolutions */
        font-size: 1.125rem; /* Légèrement plus grand sur les grandes résolutions */
    }
}

/* 4K (3840px) et plus : optimisations pour très grandes résolutions */
@media (min-width: 3840px) {
    .cfy-pi-zone-row {
        gap: 3rem;
    }
    
    .page-publisher-typology .publisher-profile__body {
        font-size: 1.1875rem;
        line-height: 1.8;
    }
    
    .page-publisher-typology .publisher-profile__title {
        font-size: 1.75rem;
    }
}

/* ============================================================================
   ZONE ONGLETS - OPTIMISATIONS RESPONSIVE
   ============================================================================ */

/* Amélioration de l'affichage des onglets sur grandes résolutions */
@media (min-width: 1920px) {
    .cfy-pi-zone-tabs {
        padding: 0.5rem 0.5rem 0 0.5rem;
    }
    
    .cfy-pi-zone-tab {
        padding: 1rem 0.75rem;
        font-size: 0.9375rem;
    }
    
    .cfy-pi-zone-tab i {
        font-size: 1.25rem;
        margin-bottom: 0.375rem;
    }
}

/* Optimisations pour 2K et plus */
@media (min-width: 2560px) {
    .cfy-pi-zone-panel {
        padding: 1.5rem;
    }
    
    .cfy-pi-zone-panel-title {
        font-size: 1.375rem;
    }
}

/* ============================================================================
   ZONE FUTURE CONTENT - PLACEHOLDER POUR CONTENU FUTUR
   ============================================================================ */

.cfy-pi-zone-future-content {
    display: none; /* Masqué par défaut */
}

/* Affichage sur grandes résolutions uniquement */
@media (min-width: 1920px) {
    .cfy-pi-zone-future-content {
        display: block;
        /* Zone invisible mais conserve l'espace pour le layout 50/50 */
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        min-height: 0;
    }
    
    .dark-mode .cfy-pi-zone-future-content {
        background: transparent;
        border: none;
        box-shadow: none;
    }
}

/* ============================================================================
   RESPONSIVE - TABLETTES ET MOBILES
   ============================================================================ */

/* Tablettes (768px - 1919px) : layout vertical optimisé */
@media (min-width: 768px) and (max-width: 1919px) {
    .cfy-pi-zone-row {
        gap: 1.5rem;
    }
    
    .page-publisher-typology .publisher-profile {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }
    
    .cfy-pi-zone-tab {
        padding: 0.875rem 0.625rem;
    }
}

/* Smartphones (jusqu'à 767px) : layout compact */
@media (max-width: 767px) {
    .cfy-pi-zone-row {
        gap: 1rem;
    }
    
    .page-publisher-typology .publisher-profile {
        margin-top: 1rem;
        padding-top: 1rem;
    }
    
    .page-publisher-typology .publisher-profile__body {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .cfy-pi-zone-tabs {
        padding: 0.25rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .cfy-pi-zone-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .cfy-pi-zone-tab {
        flex: 0 0 auto;
        min-width: 80px;
        padding: 0.75rem 0.5rem;
        font-size: 0.8125rem;
        white-space: nowrap;
    }
    
    .cfy-pi-zone-tab i {
        font-size: 1rem;
        margin-bottom: 0.125rem;
    }
    
    .cfy-pi-zone-panel {
        padding: 1rem;
    }
}

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

/* Classes utilitaires pour masquer/afficher selon la résolution */
.hide-on-large-screens {
    display: block;
}

.show-on-large-screens {
    display: none;
}

@media (min-width: 1920px) {
    .hide-on-large-screens {
        display: none;
    }
    
    .show-on-large-screens {
        display: block;
    }
}

/* Amélioration de la lisibilité sur très grandes résolutions */
@media (min-width: 3840px) {
    .page-publisher-typology {
        font-size: 1.0625rem;
    }
    
    .cfy-pi-zone {
        font-size: 1rem;
    }
}

/* ============================================================================
   SUPPORT RTL POUR LE LAYOUT RESPONSIVE
   ============================================================================ */

[dir="rtl"] .cfy-pi-zone-row {
    direction: rtl;
}

@media (min-width: 1920px) {
    [dir="rtl"] .cfy-pi-zone-col {
        margin-left: var(--pub-layout-gap);
        margin-right: 0;
    }
    
    [dir="rtl"] .cfy-pi-zone-col + .cfy-pi-zone-future-content {
        margin-right: var(--pub-layout-gap);
        margin-left: 0;
    }
}