/* ============================================================
   YJ Bluesky — Front-end
   Charte : vert deep #1B5E3D + terracotta #C75D3A + crème #FAF7EE
   Roboto (titres 900) + Poppins (corps)
============================================================ */

.yj-bsky{
    --yjb-green:        #2D7A4F;
    --yjb-green-deep:   #1B5E3D;
    --yjb-terracotta:   #C75D3A;
    --yjb-cream:        #FAF7EE;
    --yjb-ink:          #1A2620;
    --yjb-muted:        #5C6B5F;
    --yjb-line:         rgba(45,122,79,.15);
    --yjb-bluesky:      #0085FF;   /* Bluesky brand blue for the corner accent */
    --yjb-display:      'Roboto', system-ui, sans-serif;
    --yjb-body:         'Poppins', system-ui, sans-serif;
    --yjb-ease:         cubic-bezier(.22,.61,.36,1);
    --yjb-ease-out:     cubic-bezier(.16,1,.3,1);

    position:relative;
    width:100%;
    font-family:var(--yjb-body);
    color:var(--yjb-ink);
    box-sizing:border-box;
}
.yj-bsky *,
.yj-bsky *::before,
.yj-bsky *::after{ box-sizing:border-box; }

/* ============ GRID ============ */
.yj-bsky__grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:22px;
}
.yj-bsky--cols-2 .yj-bsky__grid{ grid-template-columns:repeat(2, 1fr); }
.yj-bsky--cols-3 .yj-bsky__grid{ grid-template-columns:repeat(3, 1fr); }
.yj-bsky--cols-4 .yj-bsky__grid{ grid-template-columns:repeat(4, 1fr); }

/* ============ CARD ============ */
.yj-bsky-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid var(--yjb-line);
    border-radius:8px;
    overflow:hidden;
    box-shadow:
        0 14px 28px -18px rgba(27,94,61,.22),
        0 8px 16px -12px rgba(0,0,0,.08);
    transition:transform .45s var(--yjb-ease),
               box-shadow .45s var(--yjb-ease),
               border-color .45s var(--yjb-ease);
    opacity:0;
    transform:translateY(18px);
    animation:yjBskyIn .65s var(--yjb-ease-out) forwards;
}
@keyframes yjBskyIn{
    to{ opacity:1; transform:translateY(0); }
}
.yj-bsky-card:hover{
    transform:translateY(-6px);
    border-color:var(--yjb-green-deep);
    box-shadow:
        0 32px 56px -22px rgba(27,94,61,.4),
        0 16px 28px -14px rgba(0,0,0,.16);
}

/* ============ BADGES (top of card) ============ */
.yj-bsky-card__badges{
    position:absolute;
    top:12px; left:12px; right:12px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    pointer-events:none;
    z-index:5;
    gap:8px;
}
.yj-bsky-card__badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:4px;
    font-family:var(--yjb-body);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    pointer-events:auto;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 4px 12px -4px rgba(0,0,0,.25);
}
.yj-bsky-card__badge--repost{
    background:rgba(27,94,61,.92);
    color:#fff;
}
.yj-bsky-card__badge--video{
    background:rgba(199,93,58,.92);
    color:#fff;
    margin-left:auto;
}
.yj-bsky-card__badge svg{
    width:11px; height:11px;
}

/* ============ MEDIA (image or video thumb) ============ */
.yj-bsky-card__media{
    position:relative;
    display:block;
    aspect-ratio:16/9;
    overflow:hidden;
    background:linear-gradient(135deg, #E8F0E5, #D5E5D0);
    text-decoration:none;
    cursor:pointer;
}
.yj-bsky-card__media-link{
    /* When the media is an image, the whole area links to the bsky post */
    display:block;
    width:100%; height:100%;
    text-decoration:none;
}
.yj-bsky-card__media img{
    display:block;
    width:100%; height:100%;
    object-fit:cover;
    transition:transform 1s var(--yjb-ease), filter .5s var(--yjb-ease);
    filter:saturate(1.04) contrast(1.03);
}
.yj-bsky-card:hover .yj-bsky-card__media img{
    transform:scale(1.06);
}
.yj-bsky-card__media-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, transparent 55%, rgba(199,93,58,.18));
    opacity:0;
    transition:opacity .5s var(--yjb-ease);
    pointer-events:none;
}
.yj-bsky-card:hover .yj-bsky-card__media-overlay{ opacity:1; }

/* PLAY button (only on video cards) */
.yj-bsky-card__play{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:64px; height:64px;
    border-radius:50%;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:4;
    box-shadow:0 14px 28px -8px rgba(0,0,0,.5);
    transition:transform .35s var(--yjb-ease), background .35s var(--yjb-ease);
    animation:yjBskyPulse 2s ease-in-out infinite;
}
@keyframes yjBskyPulse{
    0%,100%{ box-shadow:0 14px 28px -8px rgba(0,0,0,.5), 0 0 0 0 rgba(199,93,58,.6); }
    50%{ box-shadow:0 14px 28px -8px rgba(0,0,0,.5), 0 0 0 14px rgba(199,93,58,0); }
}
.yj-bsky-card__play svg{
    width:24px; height:24px;
    fill:var(--yjb-terracotta);
    margin-left:3px; /* visual centering of triangle */
    transition:fill .35s var(--yjb-ease), transform .35s var(--yjb-ease);
}
.yj-bsky-card__play:hover{
    transform:translate(-50%, -50%) scale(1.1);
    background:var(--yjb-terracotta);
}
.yj-bsky-card__play:hover svg{
    fill:#fff;
    transform:scale(1.08);
}

/* ============ BODY ============ */
.yj-bsky-card__body{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:20px 22px;
    gap:10px;
}

/* Author row */
.yj-bsky-card__author{
    display:flex;
    align-items:center;
    gap:10px;
}
.yj-bsky-card__avatar{
    width:36px; height:36px;
    border-radius:50%;
    overflow:hidden;
    background:#E8F0E5;
    flex-shrink:0;
    border:2px solid #fff;
    box-shadow:0 2px 6px -1px rgba(0,0,0,.15);
}
.yj-bsky-card__avatar img{
    display:block;
    width:100%; height:100%;
    object-fit:cover;
}
.yj-bsky-card__author-meta{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:1;
}
.yj-bsky-card__name{
    font-family:var(--yjb-body);
    font-size:13.5px;
    font-weight:600;
    color:var(--yjb-ink);
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:color .35s var(--yjb-ease);
}
.yj-bsky-card:hover .yj-bsky-card__name{ color:var(--yjb-green-deep); }

.yj-bsky-card__handle{
    font-family:var(--yjb-body);
    font-size:11.5px;
    font-weight:400;
    color:var(--yjb-muted);
    line-height:1.2;
    margin-top:1px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Bluesky logo corner */
.yj-bsky-card__platform{
    width:22px; height:22px;
    flex-shrink:0;
    color:var(--yjb-bluesky);
    opacity:.45;
    transition:opacity .35s var(--yjb-ease), transform .4s var(--yjb-ease);
}
.yj-bsky-card:hover .yj-bsky-card__platform{
    opacity:1;
    transform:rotate(-6deg) scale(1.1);
}
.yj-bsky-card__platform svg{
    width:100%; height:100%;
    fill:currentColor;
}

/* Reposted-by line */
.yj-bsky-card__reposted{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--yjb-body);
    font-size:11.5px;
    font-weight:500;
    color:var(--yjb-green-deep);
    margin-bottom:2px;
}
.yj-bsky-card__reposted svg{ width:11px; height:11px; }

/* Date */
.yj-bsky-card__date{
    font-family:var(--yjb-body);
    font-size:11.5px;
    font-weight:500;
    letter-spacing:.02em;
    color:var(--yjb-muted);
}

/* Text */
.yj-bsky-card__text{
    font-family:var(--yjb-body);
    font-size:14px;
    line-height:1.6;
    color:var(--yjb-ink);
    margin:4px 0 0;
    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;
    flex:1;
    word-wrap:break-word;
}
/* Tag links inside text */
.yj-bsky-card__text a{
    color:var(--yjb-green-deep);
    text-decoration:none;
    font-weight:500;
    transition:color .3s var(--yjb-ease);
}
.yj-bsky-card__text a:hover{ color:var(--yjb-terracotta); }

/* Stats */
.yj-bsky-card__stats{
    display:flex;
    align-items:center;
    gap:18px;
    padding-top:14px;
    margin-top:auto;
    border-top:1px solid var(--yjb-line);
    transition:border-color .35s var(--yjb-ease);
}
.yj-bsky-card:hover .yj-bsky-card__stats{ border-color:rgba(199,93,58,.3); }
.yj-bsky-card__stat{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-family:var(--yjb-body);
    font-size:12px;
    font-weight:500;
    color:var(--yjb-muted);
    transition:color .35s var(--yjb-ease);
}
.yj-bsky-card__stat svg{
    width:13px; height:13px;
}
.yj-bsky-card__stat:nth-child(1){ color:var(--yjb-terracotta); } /* heart */
.yj-bsky-card__stat:nth-child(2){ color:var(--yjb-green-deep); } /* repost */
.yj-bsky-card__stat:nth-child(3){ color:var(--yjb-muted); }      /* reply */

.yj-bsky-card__stats-spacer{ flex:1; }

.yj-bsky-card__link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--yjb-body);
    font-size:12px;
    font-weight:600;
    color:var(--yjb-green-deep);
    text-decoration:none;
    transition:color .35s var(--yjb-ease), gap .35s var(--yjb-ease);
    margin-left:auto;
}
.yj-bsky-card__link svg{
    width:12px; height:12px;
    transition:transform .35s var(--yjb-ease);
}
.yj-bsky-card:hover .yj-bsky-card__link{
    color:var(--yjb-terracotta);
    gap:9px;
}
.yj-bsky-card:hover .yj-bsky-card__link svg{
    transform:translate(3px,-3px);
}

/* ============ SKELETONS ============ */
.yj-bsky__skeletons{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:22px;
    transition:opacity .35s var(--yjb-ease), max-height .35s var(--yjb-ease);
}
.yj-bsky--cols-2 .yj-bsky__skeletons{ grid-template-columns:repeat(2, 1fr); }
.yj-bsky--cols-3 .yj-bsky__skeletons{ grid-template-columns:repeat(3, 1fr); }
.yj-bsky--cols-4 .yj-bsky__skeletons{ grid-template-columns:repeat(4, 1fr); }

.yj-bsky__skeletons.is-hidden{
    opacity:0;
    max-height:0;
    overflow:hidden;
    pointer-events:none;
    margin-bottom:-22px;
}
.yj-bsky__skeleton{
    background:#fff;
    border:1px solid var(--yjb-line);
    border-radius:8px;
    overflow:hidden;
}
.yj-bsky__skeleton-media{
    width:100%;
    aspect-ratio:16/9;
    background:linear-gradient(90deg, rgba(45,122,79,.06), rgba(45,122,79,.12), rgba(45,122,79,.06));
    background-size:200% 100%;
    animation:yjBskyShimmer 1.4s linear infinite;
}
.yj-bsky__skeleton-body{
    padding:18px 22px 22px;
}
.yj-bsky__skeleton-line{
    height:12px;
    margin-top:12px;
    border-radius:3px;
    background:linear-gradient(90deg, rgba(45,122,79,.06), rgba(45,122,79,.12), rgba(45,122,79,.06));
    background-size:200% 100%;
    animation:yjBskyShimmer 1.4s linear infinite;
}
.yj-bsky__skeleton-line.short{ width:55%; }
@keyframes yjBskyShimmer{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
}

/* ============ LOAD MORE ============ */
.yj-bsky__loadmore-wrap{
    display:flex;
    justify-content:center;
    margin-top:40px;
}
.yj-bsky__loadmore{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 26px;
    background:transparent;
    border:1.5px solid var(--yjb-ink);
    border-radius:4px;
    font-family:var(--yjb-body);
    font-size:13.5px;
    font-weight:600;
    color:var(--yjb-ink);
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:color .35s var(--yjb-ease),
               transform .35s var(--yjb-ease),
               box-shadow .35s var(--yjb-ease);
}
.yj-bsky__loadmore::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--yjb-ink);
    transform:translateX(-100%);
    transition:transform .45s var(--yjb-ease-out);
    z-index:0;
}
.yj-bsky__loadmore > *{ position:relative; z-index:1; }
.yj-bsky__loadmore:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 14px 24px -10px rgba(0,0,0,.3);
}
.yj-bsky__loadmore:hover::before{ transform:translateX(0); }
.yj-bsky__loadmore svg{
    width:14px; height:14px;
    transition:transform .35s var(--yjb-ease);
}
.yj-bsky__loadmore:hover svg{ transform:translateY(2px); }

.yj-bsky__loadmore.is-loading{
    pointer-events:none; opacity:.7;
}
.yj-bsky__loadmore.is-loading svg{
    animation:yjBskySpin 1s linear infinite;
}
@keyframes yjBskySpin{
    100%{ transform:rotate(360deg); }
}
.yj-bsky__loadmore.is-hidden{ display:none; }

/* ============ EMPTY ============ */
.yj-bsky__empty{
    padding:40px 30px;
    text-align:center;
    background:rgba(255,255,255,.5);
    border:2px dashed var(--yjb-line);
    border-radius:8px;
    font-size:14px;
    color:var(--yjb-muted);
}

/* ============ MODAL (video player) ============ */
.yj-bsky-modal{
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    inset:0;
    width:100vw;
    height:100vh;
    height:100dvh;     /* dynamic viewport for mobile */
    z-index:2147483600; /* near-top of stacking order, beat overlays/sticky headers */
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s var(--yjb-ease), visibility .35s var(--yjb-ease);
    padding:24px;
    box-sizing:border-box;
}
.yj-bsky-modal.is-open{
    pointer-events:auto;
    opacity:1;
    visibility:visible;
}
.yj-bsky-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(14,59,42,.85);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    cursor:pointer;
}
.yj-bsky-modal__inner{
    position:relative;
    z-index:1;
    max-width:min(92vw, 900px);
    max-height:90vh;
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:center;
}
.yj-bsky-modal__close{
    position:absolute;
    top:-44px; right:-4px;
    width:36px; height:36px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .3s var(--yjb-ease);
    z-index:2;
}
.yj-bsky-modal__close:hover{
    background:var(--yjb-terracotta);
    border-color:var(--yjb-terracotta);
    transform:rotate(90deg);
}
.yj-bsky-modal__close svg{ width:18px; height:18px; }

.yj-bsky-modal video{
    width:100%;
    max-width:900px;
    max-height:75vh;
    aspect-ratio:16/9;
    background:#000;
    border-radius:8px;
    box-shadow:
        0 50px 100px -20px rgba(0,0,0,.7),
        0 30px 50px -20px rgba(0,0,0,.5);
    object-fit:contain;
}
.yj-bsky-modal__caption{
    font-family:var(--yjb-body);
    font-size:13px;
    color:rgba(255,255,255,.85);
}
.yj-bsky-modal__caption a{
    color:#fff;
    text-decoration:none;
    padding-bottom:2px;
    border-bottom:1px solid var(--yjb-terracotta);
    transition:color .3s var(--yjb-ease);
}
.yj-bsky-modal__caption a:hover{
    color:var(--yjb-terracotta);
}

/* Lock body scroll when modal is open */
body.yj-bsky-modal-open{
    overflow:hidden;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
    .yj-bsky--cols-3 .yj-bsky__grid,
    .yj-bsky--cols-4 .yj-bsky__grid,
    .yj-bsky--cols-3 .yj-bsky__skeletons,
    .yj-bsky--cols-4 .yj-bsky__skeletons{
        grid-template-columns:repeat(2, 1fr);
    }
}
@media (max-width: 600px){
    .yj-bsky__grid,
    .yj-bsky__skeletons,
    .yj-bsky--cols-2 .yj-bsky__grid,
    .yj-bsky--cols-2 .yj-bsky__skeletons,
    .yj-bsky--cols-3 .yj-bsky__grid,
    .yj-bsky--cols-3 .yj-bsky__skeletons,
    .yj-bsky--cols-4 .yj-bsky__grid,
    .yj-bsky--cols-4 .yj-bsky__skeletons{
        grid-template-columns:1fr;
        gap:18px;
    }
    .yj-bsky-card__body{ padding:18px; }
    .yj-bsky__loadmore{ width:100%; justify-content:center; }
    .yj-bsky-modal__inner{ max-width:96vw; }
    .yj-bsky-modal__close{
        top:8px; right:8px;
        background:rgba(0,0,0,.5);
    }
}