@import url('../main.css');

.sr-only
{

    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;

}

.skip-link
{

    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 100;
    padding: 10px 18px;
    background-color: var(--accent);
    color: #1a1305;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 9.5pt;
    border-radius: var(--radius-sm);
    transition: top 0.3s var(--ease);

}

.skip-link:focus { top: 16px; }

:focus-visible
{

    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);

}

.home
{

    max-width: 1320px;
    margin: 0 auto;
    padding: 48px 32px 80px;
    display: flex;
    flex-direction: column;
    gap: 56px;

}

.videos__top
{

    padding-bottom: 18px;
    border-bottom: 1px solid var(--bg-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;

}

.videos__top-headline
{

    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15pt;
    color: var(--text-primary);
    letter-spacing: -0.01em;

}

.videos__top-filter
{

    display: flex;
    gap: 4px;
    padding: 4px;
    background-color: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--radius-pill);

}

.videos__tab
{

    padding: 9px 16px;
    background: none;
    border-radius: var(--radius-pill);
    font-size: 9.5pt;
    font-weight: 500;
    color: var(--text-secondary);
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease);

}

.videos__tab:hover { color: var(--text-primary); }

.videos__tab.is-active { background-color: var(--accent); }

.videos__list { margin-top: 32px; }

.videos__grid
{

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;

}

.videos__pagination
{

    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 44px;

}

.videos__pagination-link
{

    padding: 10px 20px;
    background-color: var(--bg-surface);
    border: 1px solid var(--bg-line);
    border-radius: var(--radius-pill);
    font-size: 9pt;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);

}

.videos__pagination-link i 
{ 
    
    font-size: 8pt; 
    opacity: 0.7; 

}

.videos__pagination-link:hover
{

    background-color: var(--bg-raised);
    color: var(--text-primary);
    border-color: var(--accent);

}

.seo { padding: 0px 25px; }

.seo__area { margin: 20px 0px; }

.seo__area-headline p 
{

    color: var(--text-tertiary);
    font-size: 12pt;

}

.seo__area-text { margin-top: 15px; }

.seo__area-text p 
{

    font-size: 9pt;
    text-align: justify;

}

@media screen and (max-width: 650px)
{

    .home 
    { 
        
        padding: 36px 20px 60px; 
        gap: 40px; 
    
    }

    .videos__top { align-items: flex-start; }

    .videos__grid { grid-template-columns: 1fr; }

}