/* ================= BASE ================= */

body{
margin:0;
font-family:'Philosopher', serif;
background:#f4f7fd;
color:#1c2745;
scroll-behavior:smooth;
}


/* ================= SAFE SECTION ANIMATION ================= */

.fade-in{
opacity:0;
transform:translateY(40px);
animation:fadeUp .9s ease forwards;
}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

html {
scroll-behavior: smooth;
}
/* ================= ACCESSIBLE MODE ================= */

.accessible{
background:#ffffff!important;
color:#000!important;
font-size:20px!important;
}

.accessible *{
animation:none!important;
transition:none!important;
}

.accessible .hero{
background:#ffffff!important;
color:#000!important;
}

.accessible .divider{
background:#000!important;
}

.accessible .btn{
background:#fff!important;
color:#000!important;
border:2px solid #000!important;
box-shadow:none!important;
}

.accessible .btn-primary{
background:#000!important;
color:#fff!important;
}

.accessible .lang-panel button{
background:#fff!important;
color:#000!important;
border:2px solid #000!important;
}

.accessible .accessible-panel button{
background:#000!important;
color:#fff!important;
border:2px solid #000!important;
}


/* ================= TOP PANEL ================= */

.top-panel{
position:absolute;
top:20px;
left:40px;
right:40px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:5;
}


/* accessibility button */

.accessible-panel button{
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.35);
color:white;
padding:8px 18px;
border-radius:22px;
cursor:pointer;
transition:.3s;
}

.accessible-panel button:hover{
background:white;
color:#1d3f86;
}


/* language buttons */

.lang-panel button{
background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.3);
color:white;
padding:6px 14px;
border-radius:20px;
cursor:pointer;
margin-left:6px;
transition:.3s;
}

.lang-panel button:hover{
background:white;
color:#1d3f86;
}


/* ACTIVE LANGUAGE */

.lang-panel button.active{
background:white;
color:#1d3f86;
border:1px solid white;
font-weight:700;
box-shadow:0 4px 14px rgba(0,0,0,.25);
}


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

.hero{
position:relative;
background:linear-gradient(120deg,#081734,#1d3f86);
color:white;
text-align:center;
padding:120px 20px 150px;
overflow:hidden;
animation:heroFade 1.2s ease forwards;
}

@keyframes heroFade{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}


/* glow справа */

.hero::before{
content:"";
position:absolute;
width:520px;
height:520px;
background:radial-gradient(circle,#4b7dff33,transparent);
top:-150px;
right:-120px;
filter:blur(80px);
animation:heroGlow 6s ease-in-out infinite alternate;
}

@keyframes heroGlow{
0%{opacity:.6}
100%{opacity:1}
}


/* нижняя волна */

.hero::after{
content:"";
position:absolute;
bottom:-120px;
left:-10%;
width:120%;
height:200px;
background:#f4f7fd;
border-radius:50%;
}


/* ================= LOGOS ================= */

.logos{
display:flex;
flex-direction:column;
align-items:center;
gap:28px;
margin-bottom:30px;
}

.org-logos{
display:flex;
align-items:center;
gap:28px;
}

.atu-logo {
height: 60px;
width: auto;
filter: none;
}

body.accessible .atu-logo {
filter: invert(1);
height: 60px;
width: auto;
}

.lib-logo{
height:95px;
transition:.3s;
}

.org-logos img:hover{
transform:translateY(-4px) scale(1.05);
}

.logo-divider{
width:1px;
height:50px;
background:rgba(255,255,255,.35);
}


/* ================= CLUB LOGO ================= */

.club-logo-wrapper{
position:relative;
display:flex;
justify-content:center;
}

.club-logo-wrapper::before{
content:"";
position:absolute;
width:260px;
height:260px;
background:radial-gradient(circle,#ffffff22,transparent);
filter:blur(60px);
animation:haloPulse 5s ease-in-out infinite alternate;
}

@keyframes haloPulse{
0%{opacity:.5; transform:scale(.95);}
100%{opacity:1; transform:scale(1.05);}
}

.club-logo{
height:200px;
position:relative;
z-index:2;
transition:.4s ease;
filter:drop-shadow(0 8px 24px rgba(0,0,0,.25));
}

.club-logo:hover{
transform:translateY(-6px) scale(1.06);
filter:drop-shadow(0 16px 32px rgba(0,0,0,.35));
}


/* ================= TEXT ================= */

.hero h1{
font-size:52px;
margin-bottom:12px;
letter-spacing:.6px;
}

.hero p{
font-size:22px;
max-width:720px;
margin:auto;
opacity:.92;
letter-spacing:.3px;
}

.divider{
width:70px;
height:3px;
background:#8fb8ff;
margin:25px auto 35px;
border-radius:2px;
}


/* ================= BUTTONS ================= */

.hero-buttons{
margin-top:22px;
}

.btn{
display:inline-block;
padding:13px 30px;
margin:8px;
border-radius:30px;
background:rgba(255,255,255,.15);
color:white;
text-decoration:none;
border:1px solid rgba(255,255,255,.25);
cursor:pointer;
transition:.35s;
backdrop-filter:blur(6px);
}

.btn:hover{
background:white;
color:#1d3f86;
transform:translateY(-4px) scale(1.04);
}
.club-logo {
    filter:
        drop-shadow(0 0 2px #ffffff)
        drop-shadow(0 0 4px #ffffff)
        drop-shadow(0 0 6px #ffffff);

    max-width: 260px;
}

.btn:active{
transform:scale(.96);
}


/* PRIMARY BUTTON */

.btn-primary{
background:white;
color:#1d3f86;
font-weight:700;
border:2px solid white;
box-shadow:0 10px 26px rgba(0,0,0,.25);
}

.btn-primary:hover{
background:#ffd24d;
border-color:#ffd24d;
color:#1d3f86;
transform:translateY(-5px) scale(1.07);
box-shadow:0 18px 34px rgba(0,0,0,.3);
}


/* ================= SECTIONS ================= */

.section{
padding:90px 12%;
}

.section-light{
background:white;
}

.section-dark{
background:linear-gradient(120deg,#12285e,#2e5fb2);
color:white;
}

.section-accent{
background:linear-gradient(120deg,#2e5fb2,#7fb0dc);
color:white;
}

.section h2{
text-align:center;
font-size:36px;
margin-bottom:20px;
}


/* ================= ABOUT ================= */

.about {
    white-space: pre-line;
    line-height: 1.45;
    max-width: 780px;
    margin: 0 auto;
    text-align: justify;
    hyphens: auto;
}


/* ================= EVENT CARD ================= */

.section-accent {
    background:
        linear-gradient(
            rgba(20,40,80,0.45),
            rgba(40,70,120,0.45)
        ),
        url("https://resizer.mail.ru/p/d54ad339-1827-5c01-bcdc-651fcba18c86/AAACFjEmA0aVBPNtFjmrBv1Wo8usjgFp8PsGRRh1GZcsYOrSbrq9Cm7ACjwoWtViQ1DC5gzV8bJW8D_2uKiJneQ6CzM.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: 90px 20px;
    text-align: center;
}

/* карточка письма из Хогвартса */

.event-card {
    background:
        url("https://www.transparenttextures.com/patterns/aged-paper.png"),
        linear-gradient(145deg, #f5ecd8, #efe2c2);

    border: 2px solid #c9a44c;
    border-radius: 18px;
    padding: 30px 40px;
    max-width: 620px;
    margin: 30px auto 0;

    box-shadow:
        0 18px 45px rgba(0,0,0,0.35),
        inset 0 0 14px rgba(120,90,20,0.18);

    font-family: "Philosopher", serif;
    position: relative;

    backdrop-filter: blur(2px);
}

/* золотая линия сверху */

.event-card::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 40px;
    right: 40px;
    height: 4px;
    background: linear-gradient(to right, #c9a44c, #f6e27a, #c9a44c);
    border-radius: 4px;
}

/* заголовок встречи */

.event-card h3 {
    color: #2d2a4a;
    font-size: 22px;
    margin-bottom: 12px;
}

/* описание */

.event-card p {
    color: #4a3f2a;
    font-size: 16px;
}

/* заголовок секции */

.section-accent h2 {
    color: #ffffff;
    text-shadow:
        0 4px 16px rgba(0,0,0,0.7),
        0 0 10px rgba(120,160,255,0.35);
}
/* =============================
INSTAGRAM SMART GRID
============================= */

.instagram-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
margin-top: 25px;
}

.instagram-grid iframe {
width: 100%;
min-height: 620px;
border: none;
border-radius: 18px;
box-shadow: 0 10px 28px rgba(0,0,0,0.08);
transition: transform 0.3s ease;
}

.instagram-grid iframe:hover {
transform: translateY(-6px);
}

/* скрытые посты */

.hidden-post {
display: none;
}
/* =============================
SMART INSTAGRAM BUTTON
============================= */

.btn-toggle-posts {

display: inline-flex;
align-items: center;
gap: 10px;

padding: 12px 26px;

border-radius: 999px;
border: none;

font-size: 15px;
font-weight: 600;

cursor: pointer;

background: linear-gradient(135deg, #f5f7fa, #e4e9f2);
color: #333;

box-shadow:
0 6px 18px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.6);

transition: all 0.35s ease;
}

/* hover эффект */
/* =============================
MEDIA COLLAGE (MASONRY STYLE)
============================= */

.media-collage {

column-count: 3;
column-gap: 18px;

}

@media (max-width: 1100px) {

.media-collage {
column-count: 2;
}

}

@media (max-width: 600px) {

.media-collage {
column-count: 1;
}

}


/* элемент коллажа */

.media-item {

break-inside: avoid;
margin-bottom: 18px;

border-radius: 18px;
overflow: hidden;

box-shadow: 0 8px 22px rgba(0,0,0,0.08);

transition: transform 0.3s ease;

}


/* hover эффект */

.media-item:hover {

transform: translateY(-4px);

}
/* =============================
УЗКИЕ INSTAGRAM КАРТОЧКИ
============================= */

.media-item iframe {

max-width: 420px;
margin: auto;
display: block;

border-radius: 16px;
min-height: 520px;

}

/* картинки */

.media-item img {

width: 100%;
display: block;

}


/* instagram iframe */

.media-item iframe {

width: 100%;
min-height: 520px;
border: none;

}
.btn-toggle-posts:hover {

transform: translateY(-2px);

box-shadow:
0 10px 24px rgba(0,0,0,0.12),
inset 0 1px 0 rgba(255,255,255,0.8);
}

/* стрелка */

.btn-icon {

font-size: 18px;
transition: transform 0.4s ease;
}

/* поворот стрелки */

.btn-toggle-posts.active .btn-icon {

transform: rotate(180deg);
}
/* кнопка перехода */

.gallery-footer {
text-align: center;
margin-top: 30px;
}
/* ================= FOOTER ================= */

footer{
background:#0b1a3a;
color:white;
text-align:center;
padding:30px;
font-size:14px;
letter-spacing:.4px;
}

.instagram-grid {

display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;

}

.insta-card iframe {

width: 100%;
height: 480px;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);

}



.gallery {

display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;

}

.gallery img {

width: 100%;
height: 220px;
object-fit: cover;
border-radius: 16px;
transition: transform .4s ease, box-shadow .4s ease;

}

.gallery img:hover {

transform: scale(1.05);
box-shadow: 0 12px 40px rgba(0,0,0,0.25);

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

@media(max-width:768px){

.hero{
padding:100px 20px 120px;
}

.hero h1{
font-size:34px;
}

.hero p{
font-size:18px;
}

.club-logo{
height:120px;
}

.atu-logo{
height:40px;
}

.lib-logo{
height:65px;
}

.section{
padding:70px 8%;
}

.top-panel{
left:20px;
right:20px;
}

}