/* =============================================================
   LinkedIn TV Feed – Design System "Nocturnal Intelligence"
   Charte : DESIGN.md
   ============================================================= */

/* --- Tokens de design ---------------------------------------- */
:root {
    --ltf-bg:               #0a1325;
    --ltf-surface:          #171f32;
    --ltf-surface-high:     #212a3d;
    --ltf-surface-highest:  #2a3450;
    --ltf-primary:          #b4c5ff;
    --ltf-primary-ctn:      #2563eb;
    --ltf-tertiary:         #00dfc1;
    --ltf-on-surface:       #dae2fc;
    --ltf-on-surface-var:   #8b9bc8;
    --ltf-outline-var:      rgba(139, 155, 200, 0.15);
    --ltf-shadow:           rgba(10, 19, 37, 0.8);

    --ltf-radius-sm:  0.5rem;
    --ltf-radius-md:  0.75rem;
    --ltf-radius-lg:  1rem;

    --ltf-font-headline: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --ltf-font-body:     'Inter', 'Segoe UI', system-ui, sans-serif;

    --ltf-linkedin-blue: #0a66c2;
    --ltf-transition:    0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Import Google Fonts ------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&family=Inter:wght@400;500&display=swap');

/* --- Widget racine ------------------------------------------ */
.ltf-widget {
    background:    var(--ltf-surface);
    border-radius: var(--ltf-radius-lg);
    overflow:      hidden;
    display:       flex;
    flex-direction:column;
    width:         100%;
    height:        100%;
    min-height:    360px;
    position:      relative;
    box-shadow:    0 32px 48px var(--ltf-shadow);
    font-family:   var(--ltf-font-body);
}

/* --- En-tête ----------------------------------------------- */
.ltf-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.25rem 0.875rem;
    background:      linear-gradient(180deg, var(--ltf-surface-high) 0%, transparent 100%);
    flex-shrink:     0;
}

.ltf-header-left {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}

.ltf-linkedin-icon {
    width:            36px;
    height:           36px;
    background:       var(--ltf-linkedin-blue);
    border-radius:    var(--ltf-radius-sm);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    box-shadow:       0 0 16px rgba(10, 102, 194, 0.4);
}

.ltf-linkedin-icon svg {
    width:  20px;
    height: 20px;
    color:  #ffffff;
    fill:   #ffffff;
}

.ltf-header-meta {
    display:        flex;
    flex-direction: column;
    gap:            0.1rem;
}

.ltf-company-name {
    font-family:  var(--ltf-font-headline);
    font-size:    0.9rem;
    font-weight:  700;
    color:        var(--ltf-on-surface);
    line-height:  1.2;
    letter-spacing: 0.01em;
}

.ltf-feed-label {
    font-size:  0.6875rem;
    color:      var(--ltf-on-surface-var);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ltf-header-right {
    display:     flex;
    align-items: center;
    gap:         0.375rem;
}

.ltf-live-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--ltf-tertiary);
    animation:     ltf-pulse 2s ease-in-out infinite;
    display:       block;
    box-shadow:    0 0 8px var(--ltf-tertiary);
}

.ltf-live-label {
    font-family:    var(--ltf-font-headline);
    font-size:      0.625rem;
    font-weight:    700;
    color:          var(--ltf-tertiary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@keyframes ltf-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}

/* --- Zone du carrousel ------------------------------------- */
.ltf-carousel-track-wrapper {
    flex:      1 1 auto;
    overflow:  hidden;
    position:  relative;
    min-height: 0;
}

.ltf-carousel-track {
    display:    flex;
    width:      100%;
    height:     100%;
    position:   relative;
}

/* --- Slide ------------------------------------------------- */
.ltf-slide {
    position:   absolute;
    inset:      0;
    opacity:    0;
    transform:  translateX(32px);
    transition: opacity var(--ltf-transition),
                transform var(--ltf-transition);
    pointer-events: none;
    padding:    0.875rem 1.25rem;
    display:    flex;
    flex-direction: column;
}

.ltf-slide--active {
    opacity:        1;
    transform:      translateX(0);
    pointer-events: auto;
}

.ltf-slide--exit {
    opacity:   0;
    transform: translateX(-32px);
}

/* --- Carte de post ----------------------------------------- */
.ltf-post-card {
    display:        flex;
    flex-direction: column;
    gap:            0.875rem;
    height:         100%;
}

.ltf-post-card--has-image {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    grid-template-rows: 1fr auto;
    gap: 0 1rem;
}

.ltf-post-card--has-image .ltf-post-image {
    grid-row: 1 / 3;
}

.ltf-post-card--has-image .ltf-post-body {
    grid-column: 2;
    grid-row: 1;
}

.ltf-post-card--has-image .ltf-post-footer {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
}

/* Image */
.ltf-post-image {
    border-radius: var(--ltf-radius-md);
    overflow:      hidden;
    background:    var(--ltf-surface-high);
    min-height:    160px;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.ltf-post-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* Corps du post */
.ltf-post-body {
    flex:     1;
    display:  flex;
    flex-direction: column;
    gap:      0.5rem;
    min-height: 0;
    overflow:   hidden;
}

.ltf-post-text {
    font-family:  var(--ltf-font-body);
    font-size:    0.875rem;
    line-height:  1.65;
    color:        var(--ltf-on-surface);
    overflow:     hidden;
    display:      -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    flex:         1;
}

/* Texte plus grand quand pas d'image (écran TV) */
.ltf-post-card:not(.ltf-post-card--has-image) .ltf-post-text {
    font-size:          1rem;
    -webkit-line-clamp: 9;
}

.ltf-hashtag {
    color:       var(--ltf-primary);
    font-weight: 500;
}

.ltf-mention {
    color:       var(--ltf-tertiary);
    font-weight: 500;
}

.ltf-url {
    color:            var(--ltf-primary);
    text-decoration:  none;
    opacity:          0.8;
    font-size:        0.8em;
}

/* Article partagé */
.ltf-post-article {
    display:      flex;
    align-items:  center;
    gap:          0.5rem;
    background:   var(--ltf-surface-high);
    border-radius: var(--ltf-radius-sm);
    padding:      0.5rem 0.75rem;
    font-size:    0.8125rem;
    color:        var(--ltf-on-surface-var);
    border:       1px solid var(--ltf-outline-var);
    margin-top:   auto;
}

.ltf-article-icon {
    width:      14px;
    height:     14px;
    flex-shrink: 0;
    color:      var(--ltf-primary);
}

/* Pied du post */
.ltf-post-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-shrink:     0;
    padding-top:     0.5rem;
    border-top:      1px solid var(--ltf-outline-var);
}

.ltf-post-date {
    display:     flex;
    align-items: center;
    gap:         0.3rem;
    font-size:   0.6875rem;
    color:       var(--ltf-on-surface-var);
    letter-spacing: 0.02em;
}

.ltf-post-date svg {
    width:  12px;
    height: 12px;
    stroke: var(--ltf-on-surface-var);
    flex-shrink: 0;
}

.ltf-post-link {
    display:         flex;
    align-items:     center;
    gap:             0.3rem;
    font-family:     var(--ltf-font-headline);
    font-size:       0.6875rem;
    font-weight:     600;
    color:           var(--ltf-primary);
    text-decoration: none;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
    transition:      color 0.2s, opacity 0.2s;
    opacity:         0.8;
}

.ltf-post-link:hover {
    color:   var(--ltf-on-surface);
    opacity: 1;
}

.ltf-post-link svg {
    width:  11px;
    height: 11px;
}

/* --- Indicateurs (dots) ------------------------------------ */
.ltf-dots {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         0.5rem 1.25rem;
    flex-shrink:     0;
}

.ltf-dot {
    width:          6px;
    height:         6px;
    border-radius:  50%;
    background:     var(--ltf-surface-highest);
    border:         none;
    cursor:         pointer;
    padding:        0;
    transition:     background var(--ltf-transition),
                    transform var(--ltf-transition),
                    width var(--ltf-transition);
}

.ltf-dot--active {
    background: var(--ltf-primary);
    width:      20px;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(180, 197, 255, 0.5);
}

.ltf-dot:hover:not(.ltf-dot--active) {
    background: var(--ltf-on-surface-var);
    transform:  scale(1.3);
}

/* --- Barre de progression ---------------------------------- */
.ltf-progress-bar {
    height:     2px;
    background: var(--ltf-surface-highest);
    flex-shrink: 0;
    overflow:   hidden;
}

.ltf-progress-fill {
    height:           100%;
    width:            0%;
    background:       linear-gradient(90deg, var(--ltf-primary-ctn), var(--ltf-primary));
    animation:        ltf-progress linear infinite;
    transform-origin: left;
}

@keyframes ltf-progress {
    0%   { width: 0%; }
    100% { width: 100%; }
}

/* --- État d'erreur ----------------------------------------- */
.ltf-error {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.75rem;
    height:          100%;
    min-height:      200px;
    padding:         2rem;
    text-align:      center;
    color:           var(--ltf-on-surface-var);
    font-family:     var(--ltf-font-body);
    font-size:       0.875rem;
}

.ltf-error-icon {
    width:  40px;
    height: 40px;
    stroke: var(--ltf-on-surface-var);
    opacity: 0.5;
}

.ltf-error p {
    margin:  0;
    color:   var(--ltf-on-surface);
}

.ltf-error small {
    font-size: 0.75rem;
    opacity:   0.6;
}

/* --- État de chargement (skeleton) ------------------------- */
.ltf-skeleton {
    animation: ltf-shimmer 1.5s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        var(--ltf-surface-high)    0%,
        var(--ltf-surface-highest) 50%,
        var(--ltf-surface-high)    100%
    );
    background-size: 200% 100%;
    border-radius:   var(--ltf-radius-sm);
}

@keyframes ltf-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Adaptation écran TV (grandes résolutions) ------------- */
@media (min-width: 1280px) {
    .ltf-post-text {
        font-size:          1.05rem;
        -webkit-line-clamp: 10;
    }

    .ltf-post-card:not(.ltf-post-card--has-image) .ltf-post-text {
        font-size:          1.15rem;
    }

    .ltf-company-name {
        font-size: 1rem;
    }

    .ltf-header {
        padding: 1.125rem 1.5rem 1rem;
    }

    .ltf-slide {
        padding: 1rem 1.5rem;
    }

    .ltf-linkedin-icon {
        width:  42px;
        height: 42px;
    }

    .ltf-linkedin-icon svg {
        width:  24px;
        height: 24px;
    }
}

@media (min-width: 1920px) {
    .ltf-post-text {
        font-size:          1.25rem;
        line-height:        1.7;
        -webkit-line-clamp: 12;
    }

    .ltf-post-date,
    .ltf-post-link {
        font-size: 0.8125rem;
    }

    .ltf-company-name {
        font-size: 1.125rem;
    }

    .ltf-feed-label {
        font-size: 0.75rem;
    }
}