* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;	  
}

h1, h2{
    font-family: 'Roboto';
    font-weight: var(--head-font-weight);
    font-size: var(--head-font-size);
    line-height: var(--head-line-height);
    color: var(--head-text-color);
    -webkit-text-stroke: var(--head-stroke);
}

html{
    height:100%;
}
body{
    min-height: 100vh;
}

/* каждая секция с фоном и высотой на экран */
section{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1.87rem;
    background-image: url('../assets/images/background.jpg');
    background-size: cover;
    background-position: center;
}

.headline{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4.375rem;
    margin: 0 auto;
    margin-bottom: 1.625rem;
    background-image: linear-gradient(to bottom, #e7dbef, #fff3ff);
    padding: 0 3rem;
    box-shadow: var(--header-shadow);
}

.burger {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
}
.burger span {
    display: block; 
    width: 1.875rem;
    height: 0.2rem; 
    background-color: #000; 
    border-radius: 0.1rem;
}
.navbar {
    position: relative; 
    display: flex;
    align-items: center;
	gap: 1.25rem;
}
.menu{
    display: flex;
    gap: 1.25rem;
}
.press {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    background: var(--back-gradient);
    padding: 0.5rem 1rem;
    border-radius: var(--box-radius);
    border: none;
    box-shadow:var(--button-shadow);
    color: var(--head-text-color);
    -webkit-text-stroke: var(--head-stroke);
    font-weight: var(--text-font-weight);
    font-size: var(--text-font-size);
    line-height: var(--button-line-height);
    cursor: pointer;
}
.info-box{
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: var(--text-font-weight);
    font-size: var(--text-font-size);
    line-height: var(--button-line-height);
    color: var(--head-text-color);
    -webkit-text-stroke: var(--head-stroke);
    margin: 1rem auto;
	
}

.near-peole-box{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1rem 1rem;
}

.people-box{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 25rem;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.2rem;
    margin-bottom: 1.88rem;
    background-image: var(--back-gradient);
    padding: 1.25rem 2.5rem;
    box-shadow: var(--header-shadow);
    font-weight: var(--text-font-weight);
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
    color: var(--head-text-color);
    border-radius: var(--box-radius);
}

.person-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.vote-but{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* КАСТОМНЫЕ РАДИОКНОПКИ */

.container {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin: 0.5rem 1.25rem 0.5rem 0;
    cursor: pointer;
}

/* скрываем стандартный radio */
.container input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* внешний круг */
.checkmark {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 0.2rem solid #e7dbeb;
    box-shadow: var(--radio-button-shadow);
    background-color: #fdfdfd;
    position: relative;
	flex-shrink: 0;
}

/* внутренняя точка */
.checkmark::after {
    content: "";
    position: absolute;
    left: 0.20rem;
    top: 0.20rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: var(--head-text-color);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* когда radio отмечен – показываем точку */
.container input[type="radio"]:checked + .checkmark::after {
    opacity: 1;
}

/* подсветка имени делается в JS */

/* ГАЛЕРЕЯ + ИЗБРАННОЕ */
.gallery-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0 2rem 2rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 0;
}
.pages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 2rem 2rem;
}

.pages button {
    min-width: 2rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--box-radius);
    border: none;
    background: #fff;
    box-shadow: var(--button-shadow);
    color: var(--head-text-color);
    -webkit-text-stroke: var(--head-stroke);
    cursor: pointer;
    font: inherit;
}

.pages button.active {
    background: var(--back-gradient);
}	
.gallery-item {
    position: relative;
    border-radius: var(--box-radius);
    overflow: hidden;
    box-shadow: var(--header-shadow);
    background-image: var(--back-gradient);
    padding: 0.6rem;
	max-height: 240px;
}

.gallery-item img {
    width: auto;
    height: 100%;
    border-radius: var(--img-radius);
}

/* Стрелки слева/справа от сетки */
.arrow {
    min-width: 3rem;
    height: 3rem;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}

.favorite-button {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    cursor: pointer;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.35rem;
    box-shadow: var(--fav-shadow);
    background-color: var(--fav-btn-bg);
    border-color: var(--fav-btn-border);
    border-style: solid;
    border-width: 0.25rem;
    border-radius: 35px;
    transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5),
                border-color 400ms ease-in-out,
                background-color 400ms ease-in-out;
    word-spacing: -2px;
}

.favorite-button .filled,
.favorite-button .empty {
    fill: var(--fav-heart-color);
    transition: opacity 100ms ease-in-out;
}

.favorite-button .filled {
    position: absolute;
    opacity: 0;
}

.favorite-button:hover {
    background-color: #eee;
    transform: scale(1.05);
    animation: movingBorders 3s infinite;
}

.favorite-button:hover .empty {
    opacity: 0;
}

.favorite-button:hover .filled {
    opacity: 1;
    animation: beatingHeart 1.2s infinite;
}

.favorite-button svg {
    width: var(--fav-icon-size);
    height: var(--fav-icon-size);
    display: block;
}
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
	display: flex;
    justify-content: center;
    align-items: center;
}

.modal-controls {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;   /* центры по одной вертикали */
    gap: 0.5rem;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
}

.modal-content {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1rem 1rem;
    background: var(--back-gradient);
    border-radius: var(--box-radius);
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    max-width: 95vw;
    max-height: 95vh; 
}

.modal-image-wrapper {
    position: relative;
    max-width: 100%;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-image {
    max-width: 90vw;
    max-height: 70vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    display: block;
}

.modal-close {
    cursor: pointer;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--head-text-color);
    -webkit-text-stroke: var(--head-stroke);
    box-shadow: var(--fav-shadow);
    background-color: var(--fav-btn-bg);
    border-color: var(--fav-btn-border);
    border-style: solid;
    border-width: 0.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
    z-index: 100;
}

.modal-controls .favorite-button {
    position: static;
	z-index:100;
}

.modal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: var(--back-gradient);
    color: var(--head-text-color);
	-webkit-text-stroke: var(--head-stroke);
	box-shadow: var(--button-shadow);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
}

.modal-prev { left: 0.5rem; }
.modal-next { right: 0.5rem; }


/* ПОБЕДИТЕЛЬ */
.victory-item{
    position: relative;
    justify-content: center;
    align-items: center;
    max-height: 40%;
    max-width: 40%;
    margin: 0 auto 1rem;
    border-radius: var(--box-radius);
    overflow: hidden;
    box-shadow: var(--header-shadow);
    background-image: var(--back-gradient);
    padding: 0.6rem;
}
.victory-item img {
    width: 100%;
    height: auto;
    border-radius: var(--img-radius);
}

.victory-info-box{
    text-align: center;
    font-weight: var(--text-font-weight);
    font-size: var(--head-font-size);
    line-height: var(--button-line-height);
    color: var(--head-text-color);
    -webkit-text-stroke: var(--head-stroke);
}

.bottom{
    margin-bottom: 4.5rem;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

@keyframes movingBorders {
    0% { border-color: var(--fav-btn-border); }
    50% { border-color: var(--fav-btn-border-hover); }
    90% { border-color: var(--fav-btn-border); }
}

@keyframes beatingHeart {
    0% { transform: scale(1); }
    15% { transform: scale(1.15); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
}

@media (max-width: 768px) {
    .burger {
        display: flex;
    }

    .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        right: 0;
        width: 12.5rem;
        padding: 1rem;
        border-radius: 1rem;
        box-shadow: var(--header-shadow);
		background-image: var(--back-gradient);
        z-index: 100;
        gap: 0.5rem;
    }

    .menu.active {
        display: flex;
    }
    .menu .press {
        width: 100%;
        justify-content: flex-start;
    }

    .gallery-wrapper {
        margin: 0 1rem 2rem;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
    }

    .pages {
        margin: 0 1rem 1.5rem;
        gap: 0.35rem;
    }

    .pages button {
        min-width: 1.8rem;
        padding: 0.2rem 0.5rem;
    }
	
    .arrow {
        min-width: 2.5rem;
        height: 2.5rem;
    }
    .near-peole-box{
        flex-direction: column;       /* список сверху, кнопка снизу */
        align-items: center;
        gap: 1rem;
        padding: 0 1rem 1.5rem;
    }

    .people-box{
        width: 100%;
        max-width: 18rem;            /* чтобы не растягивалось на весь экран */
        padding: 1rem 1.25rem;
    }

    .vote-but{
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .press{
        width: auto;                 /* кнопки по содержимому, если надо */
    }
    body {
        font-size: 0.9rem;
    }

    .headline h2{
        font-size: 1.2rem;
    }

    .info-box{
        padding: 0.75rem 1rem;
    }
    .modal-content {
        max-width: 95vw;
        margin: 3vh auto;
        padding: 1rem 1rem 2rem;
    }

    .modal-arrow {
        width: 2rem;
        height: 2rem;
    }

    #modal-favorite-btn {
        top: 2.3rem;
        right: 0.5rem;
    }
    .favorite-button {
        top: 0.4rem;
        right: 0.4rem;
        padding: 0.25rem;
        border-width: 0.2rem;
    }	
}
@media (max-width: 480px) {
    .favorite-button {
        top: 0.3rem;
        right: 0.3rem;
        padding: 0.2rem;
        border-width: 0.16rem;
        opacity: 0.85;
    }
}