/*
=====================================================
MEDIA PAGE
=====================================================
*/

.media-page{
    padding-top:0px;
}

/*
=====================================================
MEDIA HERO
=====================================================
*/

.media-hero{

    height:550px;

    width:100vw;
    margin-left:calc(50% - 50vw);

    position:relative;

    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.85),
        rgba(0,0,0,.35)
    ),

    url("/image/media.png");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:end;

}


.media-hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:160px;

    background:

    linear-gradient(
        transparent,
        var(--background)
    );

}

.light-theme .media-hero::after{

    height:30px;

    background:
    linear-gradient(
        rgba(245,245,247,0),
        var(--background)
    );

}

.media-hero-overlay{

    position:relative;

    z-index:2;

}


.media-hero-overlay{

    width:100%;

    padding:50px;

    text-align:center;

}

.media-hero h1{

    font-size:
    clamp(55px,7vw,95px);

    text-shadow:
    0 0 35px rgba(138,123,182,.45);

}


.media-hero p{

    color:
    var(--text-secondary);

    font-size:20px;

}

/*
=====================================================
MEDIA LAYOUT
=====================================================
*/
.media-layout{

    width:100%;

    padding:0 30px;
    margin:50px auto 0;
    display:grid;

    grid-template-columns:
    minmax(170px,250px)
    minmax(750px,1000px)
    minmax(190px,280px);

    justify-content:center;

    gap:40px;

    align-items:start;

}

/*
=====================================================
SIDE PANELS
=====================================================
*/


.media-panel{

    background:
    var(--surface);

    border:
    1px solid var(--border);

    border-radius:
    28px;

    padding:25px;

    backdrop-filter:
    blur(15px);

    box-shadow:
    var(--shadow);

}



.media-sidebar-left,
.media-sidebar-right{

    position:sticky;

    top:300px;

}



/*
=====================================================
CATEGORY BLOCK
=====================================================
*/


.media-sidebar-left .media-filters{

    display:flex;

    flex-direction:column;

    gap:12px;

}


.media-sidebar-left .media-filters button{

    width:100%;

    text-align:left;

}



/*
=====================================================
FILTER BUTTON
=====================================================
*/


.media-sidebar-left .media-filter-container{

    margin-top:20px;

}


.media-sidebar-left .filter-button{

    width:100%;

    justify-content:center;

}



/*
=====================================================
SUBSCRIBE
=====================================================
*/


.subscribe-panel h3,
.ad-panel h3{

    font-family:
    "Orbitron",
    sans-serif;

    margin-top:0;

}


.subscribe-panel p,
.ad-panel p{

    color:
    var(--text-secondary);

    line-height:1.6;

}



.subscribe-panel input{

    width:100%;

    box-sizing:border-box;

    padding:14px;

    margin-top:15px;

    border-radius:14px;

    border:
    1px solid var(--border);

    background:
    var(--surface-solid);

    color:
    var(--text);

}



.subscribe-panel button{

    width:100%;

    margin-top:15px;

    padding:14px;

    border-radius:14px;

    border:none;

    background:
    var(--purple);

    color:white;

    cursor:pointer;

    transition:.3s ease;

}



.subscribe-panel button:hover{

    background:
    var(--dark-purple);

}


/*
=====================================================
ADVERTISEMENT
=====================================================
*/


.ad-panel{

    margin-top:25px;

    min-height:180px;

}

/*
=====================================================
MEDIA FEED
=====================================================
*/

.media-feed{
    max-width:900px;
    margin:0px auto;
    padding:0 20px;
    display:flex;
    flex-direction:column;
    gap:45px;
    perspective:1000px;
}


/*
=====================================================
MEDIA CARD
=====================================================
*/

.media-card{

    position:relative;
    overflow:hidden;

    transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .6s ease,
    opacity .6s ease;

    border:1px solid rgba(138,123,182,.18);
    border-radius:28px;
    box-shadow:
    0 0 0 1px rgba(165,110,255,.4),
    0 15px 45px rgba(0,0,0,.45),
    0 0 40px rgba(165,110,255,.5);
}


.media-card::before{
    content:"";
    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at top right,
        rgba(138,123,182,.35),
        transparent 60%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(75,54,105,.25),
        transparent 65%
    );

    pointer-events:none;
}
.media-card img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    display:block;

    transition:transform .45s ease;

}


/*
=====================================================
MEDIA INFO
=====================================================
*/

.media-info{
    position:relative;
    z-index:2;

    padding:30px;
}


.media-info h2{
    font-family:"Orbitron",sans-serif;

    font-size:
    clamp(26px,3vw,38px);

    line-height:1.2;

    margin:
    20px 0;

    letter-spacing:1px;

    color:var(--text);
}


.media-info p{
    color:var(--text-secondary);

    font-size:17px;

    line-height:1.7;
}
.media-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid var(--border);
}

.media-info a{

    display:inline-flex;
    align-items:center;

    margin-top:25px;
    padding:12px 24px;

    border-radius:16px;

    background:
    rgba(138,123,182,.12);

    border:
    1px solid rgba(138,123,182,.35);

    color:
    var(--light-purple);

    text-decoration:none;

    transition:.3s ease;
}


.media-info a:hover{

    background:
    rgba(138,123,182,.25);

    border-color:
    var(--purple);

    transform:
    translateX(5px);

}
 /*
=====================================================
MEDIA TOOLBAR
=====================================================
*/

.media-toolbar{
    max-width:1200px;

    margin:40px auto;

    padding:0 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
}


/*
=====================================================
CATEGORY FILTERS
=====================================================
*/

.media-filters{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}


.media-filters button,
.media-sort button{

    padding:12px 22px;

    border-radius:30px;

    background:
    var(--surface);

    border:
    1px solid var(--border);

    color:
    var(--text);

    cursor:pointer;

    transition:
    .3s ease;

}

.media-filters button:hover{
    border-color:
    var(--purple);

    box-shadow:
    0 0 20px rgba(138,123,182,.45);
}


.media-filters button.active{

    background:
    rgba(138,123,182,.18);

    border-color:
    var(--purple);
}
/*
=====================================================
FILTER BUTTON
=====================================================
*/

.media-filter-container{

    position:relative;

}


.filter-button{

    display:flex;

    align-items:center;

    gap:10px;

    padding:
    12px 22px;

    border-radius:30px;

    background:
    rgba(138,123,182,.15);

    border:
    1px solid rgba(138,123,182,.4);

    color:
    var(--text);

    cursor:pointer;

    transition:.3s ease;

}


.filter-button svg{

    width:20px;
    height:20px;

}


.filter-button:hover{

    border-color:
    var(--purple);

    box-shadow:
    0 0 25px rgba(138,123,182,.25);

}



/*
=====================================================
FILTER PANEL
=====================================================
*/

.filter-panel{

    position:absolute;

    right:0;

    top:60px;

    width:260px;

    padding:20px;

    background:
    var(--surface-solid);

    border:
    1px solid var(--border);

    border-radius:
    22px;

    box-shadow:
    var(--shadow);

    display:none;

    z-index:20;

}


.filter-panel.active{

    display:flex;

    flex-direction:column;

    gap:10px;

}



.filter-panel button{

    padding:
    12px 16px;

    border-radius:
    14px;

    background:
    transparent;

    border:
    1px solid var(--border);

    color:
    var(--text);

    cursor:pointer;

    text-align:left;

    transition:.3s ease;

}
.filter-panel button:hover{
    border-color:
    var(--purple);
    box-shadow:
    0 0 20px rgba(138,123,182,.45);
}


.filter-panel button.active{
    background:
    rgba(138,123,182,.18);

    border-color:
    var(--purple);
}
/*
=====================================================
MEDIA META
=====================================================
*/

.media-meta{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:10px;

}


.media-category{

    padding:
    6px 14px;

    border-radius:
    999px;

    background:
    rgba(138,123,182,.12);

    border:
    1px solid rgba(138,123,182,.35);

    color:
    var(--light-purple);

    font-size:13px;

    letter-spacing:.5px;

}


.media-date{

    color:
    var(--text-secondary);

    font-size:14px;

}
 /*
=====================================================
MEDIA ANIMATION
=====================================================
*/

.media-card.entering{

    opacity:0;

    transform:
    scale(.92)
    translateY(30px);

}
.media-card.show{

    opacity:1;

    transition:
    opacity .6s ease,
    transform .6s ease;

}



/*
=====================================================
LIGHT THEME
=====================================================
*/

.light-theme .media-card{

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.95),
        rgba(245,245,247,.98)
    );

    box-shadow:
    0 0 0 1px rgba(165,110,255,.4),
    0 15px 45px rgba(0,0,0,.45),
    0 0 40px rgba(165,110,255,.5);

}

.light-theme .media-card::before{

    background:

    radial-gradient(
        circle at top right,
        rgba(138,123,182,.2),
        transparent 60%
    );

}

.light-theme .media-card h2{

    color:
    #111111;

}


.light-theme .media-card p{

    color:
    #555555;

}

.light-theme .media-category{

    color:#4B3669;

    background:
    rgba(138,123,182,.12);

}


.light-theme .media-date{

    color:
    #666;

}



/*
=====================================================
MOBILE
=====================================================
*/

@media(max-width:768px){


.media-page{

    padding-top:90px;

}

.media-toolbar{

    flex-direction:column;

    align-items:stretch;

    padding:
    0 20px;

}



.media-filters{

    justify-content:center;

}



.media-filters button{

    padding:
    10px 18px;

    font-size:
    14px;

}



.media-filter-container{

    display:flex;

    justify-content:center;

}



.filter-panel{

    right:auto;

    left:50%;

    transform:
    translateX(-50%);

}



.media-feed{

    margin:
    40px auto;

    padding:
    0 15px;

    gap:
    30px;

}



.media-card{

    border-radius:
    20px;

}

.media-info{

    padding:
    22px;

}



.media-info h2{

    font-size:
    24px;

}



.media-info p{

    font-size:
    15px;

}

.media-info a{

    width:
    100%;

    justify-content:center;

}


}
.media-content{

    margin-top:-90px;

}
/*
=====================================================
LIGHT THEME MEDIA
=====================================================
*/

.light-theme .media-panel{

    background:
    rgba(255,255,255,.85);

    color:
    var(--text);

}

.light-theme .media-stats {
    border-color: rgba(0, 0, 0, 0.12);
}

.light-theme .media-hero{

    filter:none;

}
.light-theme .media-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    rgba(255,255,255,.35);

    z-index:1;

}

.light-theme .filter-button,
.light-theme .media-filters button{

    color:
    #111111;

}


.light-theme .header .brand span{

    color:
    #000000;

}
.light-theme .media-hero h1{

    color:#111111;

}


.light-theme .media-hero p{

    color:#222222;

}
.light-theme .media-info a{

    background:
    rgba(75,54,105,.15);

    border-color:
    rgba(75,54,105,.45);

    color:
    #4B3669;

}
.light-theme .media-info a:hover{

    background:
    rgba(75,54,105,.25);

}
/*
=====================================================
MEDIA MOBILE ADAPTATION
=====================================================
*/


@media(max-width:1200px){


.media-layout{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:25px;

    padding:0 15px;

    margin:40px auto 0;

}


/*
Реклама первая
*/

.media-sidebar-right{

    order:1;

    position:static;

    width:80%;

    align-self:center;

}


.ad-panel{

    min-height:200px;

}



/*
Категории + фильтр вторые
*/

.media-sidebar-left{

    order:2;

    position:static;

    width:100%;

}


.media-panel{

    padding:20px;

}



/*
Категории горизонтально
*/

.media-sidebar-left .media-filters{

    flex-direction:row;

    flex-wrap:wrap;

    justify-content:center;

}


.media-sidebar-left .media-filters button{

    width:auto;

    text-align:center;

}



/*
Фильтр рядом с категориями
*/

.media-filter-container{

    display:flex;

    justify-content:center;

    margin-top:15px;

}


.filter-button{

    width:auto !important;

}



/*
Новости
*/

.media-content{

    order:3;

    width:100%;

    margin-top:0;

}


.media-feed{

    width:100%;

    max-width:none;

    padding:0;

    gap:30px;

}


.media-card{

    border-radius:22px;

}



.media-card img{

    aspect-ratio:16/9;

}


.media-info{

    padding:22px;

}


}



/*
=====================================================
PHONE
=====================================================
*/

@media(max-width:600px){


.media-hero{

    height:400px;

}


.media-hero-overlay{

    padding:30px 20px;

}


.media-hero h1{

    font-size:45px;

}


.media-hero p{

    font-size:16px;

}



/*
Реклама еще меньше
*/

.media-sidebar-right{

    width:70%;

}

.ad-panel{

    min-height:150px;

}

/*
Категории компактнее
*/

.media-panel{

    border-radius:22px;

}


.media-filters button{

    padding:
    9px 14px;

    font-size:13px;

}



/*
Новости почти весь экран
*/

.media-feed{

    padding:
    0 5px;

}


.media-info h2{

    font-size:24px;

}


.media-info p{

    font-size:15px;

}


}


/*
=====================================================
VERY SMALL
=====================================================
*/

@media(max-width:360px){


.media-sidebar-right{

    width:80%;

}


.media-filters{

    gap:8px;

}


.media-filters button{

    padding:
    8px 12px;

}


}