/* ==========================================================================
   YouTube Gallery - front end
   Colours inherit from the active theme (currentColor); only the red
   "latest" dot is an accent of its own.
   ========================================================================== */

.syg-gallery{
    --syg-accent:#ff2d2d;

    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
    gap:24px;
    align-items:start;
    margin:0 0 2rem;
}

/* "Total Videos Found" line */
h3.syg-count{
    margin:0 0 1.25rem;
    font-size:.95rem;
    font-weight:500;
    line-height:1.4;
    opacity:.65;
}

/* Section headings inside the grid: "Latest video" / "More videos" */
.syg-label{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
    font-size:1.1rem;
    font-weight:700;
    line-height:1.2;
}

.syg-label::after{
    content:"";
    flex:1;
    height:1px;
    background:currentColor;
    opacity:.14;
}

.syg-label--latest::before{
    content:"";
    flex:none;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--syg-accent);
    box-shadow:0 0 0 4px rgba(255,45,45,.18);
}

.syg-featured + .syg-label{
    margin-top:14px;
}

/* Video frame (16:9) */
.syg-video{
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    border-radius:12px;
    box-shadow:
        0 1px 2px rgba(0,0,0,.14),
        0 8px 20px -6px rgba(0,0,0,.28);
    background:#000;
    transition:transform .25s ease, box-shadow .25s ease;
}

.syg-video iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}

@media (hover:hover){
    .syg-video:not(.syg-featured):hover,
    .syg-video:not(.syg-featured):focus-within{
        transform:translateY(-4px);
        box-shadow:
            0 2px 4px rgba(0,0,0,.16),
            0 18px 34px -8px rgba(0,0,0,.4);
    }
}

/* The latest video: full width, larger radius, cinematic shadow */
.syg-video.syg-featured{
    grid-column:1 / -1;
    border-radius:20px;
    box-shadow:
        0 2px 4px rgba(0,0,0,.14),
        0 16px 32px -8px rgba(0,0,0,.3),
        0 44px 90px -24px rgba(0,0,0,.45);
    animation:syg-reveal .6s cubic-bezier(.2,.7,.2,1) both;
}

/* Link card: profile links that cannot be played inline */
.syg-linkcard{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    min-height:170px;
    padding:24px 28px;
    border-radius:12px;
    background:#14161c;
    color:#fff;
    text-decoration:none;
    box-shadow:
        0 1px 2px rgba(0,0,0,.14),
        0 8px 20px -6px rgba(0,0,0,.28);
    transition:transform .25s ease, box-shadow .25s ease;
}

.syg-linkcard:hover,
.syg-linkcard:focus-visible{
    color:#fff;
    transform:translateY(-4px);
    box-shadow:
        0 2px 4px rgba(0,0,0,.16),
        0 18px 34px -8px rgba(0,0,0,.4);
}

.syg-linkcard:focus-visible{
    outline:3px solid var(--syg-accent);
    outline-offset:3px;
}

.syg-linkcard__name{
    font-size:1.5rem;
    font-weight:700;
    line-height:1.2;
    overflow-wrap:anywhere;
}

.syg-linkcard__action{
    font-size:.95rem;
    opacity:.75;
    text-decoration:underline;
    text-underline-offset:3px;
}

.syg-linkcard.syg-featured{
    grid-column:1 / -1;
    min-height:220px;
    border-radius:20px;
}

/* Instagram posts/reels and Facebook posts are tall; Facebook reels are 9:16 */
.syg-video--tall{
    padding-bottom:150%;
    background:#fff;
}

.syg-video--portrait{
    padding-bottom:177.78%;
    background:#000;
}

/* Latest video that is tall: keep a readable width, centred.
   (Percentage padding is based on the full row width, so use aspect-ratio.) */
.syg-video.syg-video--tall.syg-featured,
.syg-video.syg-video--portrait.syg-featured{
    height:auto;
    padding-bottom:0;
    justify-self:center;
}

.syg-video.syg-video--tall.syg-featured{
    width:min(100%,520px);
    aspect-ratio:2 / 3;
}

.syg-video.syg-video--portrait.syg-featured{
    width:min(100%,440px);
    aspect-ratio:9 / 16;
}

@keyframes syg-reveal{
    from{
        opacity:0;
        transform:translateY(10px) scale(.985);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@media (max-width:600px){
    .syg-gallery{
        gap:16px;
    }

    .syg-video.syg-featured{
        border-radius:14px;
    }
}

@media (prefers-reduced-motion:reduce){
    .syg-video,
    .syg-linkcard,
    .syg-video.syg-featured{
        animation:none;
        transition:none;
    }

    .syg-video:not(.syg-featured):hover,
    .syg-video:not(.syg-featured):focus-within,
    .syg-linkcard:hover,
    .syg-linkcard:focus-visible{
        transform:none;
    }
}