/*
Theme Name: stage-studio-four
Template: twentytwentyfour

Theme URI: https://co20505-wordpress-1i6kg.tw1.ru/
Description: Дочерняя тема для темы twentytwentytwo
Author: Goncharenko Aleksandr Victorovich
Author URI: 
Version: 1.0
*/
@import url("../twentytwentyfour/style.css");

/* Мои стили */

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

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* Кнопки общие стили */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  column-gap: 10px;
}


/* Кнопки hover */
.wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.6) !important;
  color: #800020 !important;
  outline: 1px solid #800020;
  padding-top: 12px;
  padding-bottom: 12px;
  transition: all 0.5s ease;
}

/* Разделитель */
.separator {
  width: 18vw;
  height: 2px;
}

.header {
  background-color: rgba(0, 0, 0, 0.40);
}

.logo a:hover {
  color: #800020;
}

/*Стили для ссылок*/
/*Фон меню на мобильных*/
.main-menu:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  background-color: rgba(86, 86, 86, 0.99) !important;
}

/* Увеличиваем гамбургер кнопку */
.wp-block-navigation__responsive-container-open svg {
  width: 40px !important;
  height: 40px !important;
  transition: all 1s;
}

.wp-block-navigation__responsive-container-open:hover svg {
  fill: #800020;
}

/* Увеличиваем кнопку закрытие меню */
.wp-block-navigation__responsive-container-close svg {
  width: 40px !important;
  height: 40px !important;
  transition: all 1s;
}

.wp-block-navigation__responsive-container-close:hover svg {
  fill: #800020;
}

/* Анимация пунктов */
.wp-block-navigation-item__content {
  transition: all 0.3s ease;
  position: relative;
}

.wp-block-navigation-item__content:hover {
  color: #800020 !important;
  text-decoration: none !important;
}

/* Подчеркивание при наведении */
.wp-block-navigation-item__content:hover::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #800020;
  animation: underline 0.3s forwards;
}

/* Убираем обводку при фокусе */
.main-menu__item:focus,
.main-menu__item:focus-visible,
.main-menu__item a:focus,
.main-menu__item a:focus-visible,
.title a:focus,
.title a:focus-visible {
  scale: 1.1;
  outline: none;
}


@keyframes underline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Активный пункт */
.current-menu-item > a {
  color: #800020 !important;
  text-decoration: none !important;
}

.header__title--center {
  font-family: 'DRUZHOK';
}

.header__title--last {
  display: block;
  position: relative;
  top: -20px;
  text-align: right;
}

/* Медиа запросы блок header */
@media screen and (max-width: 400px) {
/*   .header__title {
    font-size: 2em !important;
  }
  .header__title--center {
    font-size: 2.5rem !important;
  }
  .header__title--last {
    top: -24px !important;
  } */
  .header__text {
    font-size: 1.8em !important;
  }
}

@media screen and (max-width: 520px) {
  .main-menu__item a {
    font-size: 22px;
  }
	
  .header__title {
    font-size: 1.6em !important;
  }
	
  .header__title--first {
	margin-right: -10px !important;  
  }
	
  .header__title--center {
    font-size: 3rem !important;
  }
	
  .header__wrap-button {
    flex-direction: column;
    align-items: stretch !important;
    row-gap: 20px;
  }
  .header__button a {
    font-size: 22px;
    justify-content: center;
  }

  .header__button a svg {
    width: 32px;
    height: 32px;
  }
}

@media screen and (min-width: 521px) and (max-width: 620px) {
/*   .header__title {
    font-size: 3em !important;
  }
  .header__title--center {
    font-size: 3.2rem !important;
  }
  .header__title--last {
    top: -34px !important;
  } */
  .header__text {
    font-size: 2.2em !important;
  }
}

/* @media screen and (min-width: 621px) and (max-width: 786px) {
  .header__title {
    font-size: 3.6em !important;
  }
  .header__title--center {
    font-size: 4rem !important;
  }
  .header__title--last {
    top: -34px !important;
  }
} */

@media screen and (min-width: 521px) and (max-width: 920px) {
  .header__title {
    max-width: 500px !important;
  }
  .header__title--center {
    font-size: 3.4rem !important;
  }
}

@media screen and (min-width: 921px) {
	.header__title--center {
	  font-size: 4.4rem;
	}

	.header__title--last {
	  top: -30px;
	}
}

/* @media screen and (min-width: 921px) and (max-width: 1024px) {
  .header__title {
    font-size: 5em !important;
  }
  .header__title--first {
    margin-right: -20px;
  }
  .header__title--center {
    font-size: 6rem !important;
  }
} */

@media screen and (max-width: 885px) {
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
  .wp-block-navigation__container {
    display: none;
  }
  .main-menu__item:first-child {
    margin-right: 3px;
  }
}

@media screen and (max-width: 1024px) {
   .main-menu__item {
     font-size: 18px !important;
   }
}

/* @media screen and (min-width: 1024px) and (max-width: 1220px) {
  .header__title {
    font-size: 5.4em !important;
  }
  .header__title--center {
    font-size: 6.4rem !important;
  }
  .header__text {
    font-size: 2em !important;
  }
} */

/* @media screen and (min-width: 1221px) and (max-width: 1340px) {
  .header__title {
    font-size: 6.4em !important;
  }
  .header__title--first {
    margin-right: -28px;
  }
  .header__title--center {
    font-size: 7.4rem !important;
  }
} */

/* @media screen and (min-width: 1341px) and (max-width: 1440px) {
  .header__title--first {
    margin-right: -28px;
  }
} */

.title a:hover {
  text-decoration: none;
}


/*Стили блока о студии*/
.about-studio__image-wrap {
  position: relative;
}

.about-studio__video video {
  border-radius: 10px;
}

.about-studio__badge {
  position: absolute !important;
  right: -14px !important;
  bottom: -20px !important;
  transition: opacity 0.5s ease, transform 0.5s ease; /* Плавные анимации */
  opacity: 1; /* По умолчанию видим */
  transform: scale(1); /* Нормальный размер */
}

/* Дрожание перед исчезновением */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.about-studio__image-wrap:hover .about-studio__badge {
  animation: shake 0.5s ease;
  transform: scale(0);
  opacity: 0.2;
}

/* Анимация ссылки в секции о студии */
.about-studio__button {
  position: relative;
}

.about-studio__button .wp-block-button__link:hover svg {
  transition: all 0.5s ease;
}


@media screen and (max-width: 850px) {
  .about-studio__content {
    grid-template-columns: auto !important;
    row-gap: 50px;
  }

  .about-studio__text {
    text-align: justify;
  }
}

@media screen and (max-width: 600px) {
  .about-studio__text {
    font-size: 18px !important;
  }
}

/* Стили для блока расписание групп */
.schedule-slider .gutslider-content-inner {
	min-height: 100%;
}
.schedule-slider .swiper-container-outer {
  border-radius: 10px;
}
.schedule-card__video-wrap video {
  border-radius: 10px;
}

.schedule-card__list {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  list-style: none;
}

.schedule-card__item {
  position: relative;
  text-align: left;
}

.schedule-card__item::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-image: url(https://stagestudio.ru/wp-content/uploads/2025/09/check-circle.svg);
  background-repeat: no-repeat;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 0;
}

.schedule-slider .swiper-pagination {
  display: none;
}

@media screen and (max-width: 499px) {
	.schedule-slider .gutslider-content-inner {
		padding-top: 15px !important;
		padding-bottom: 15px !important;
	}
	
	.schedule-slider .gutslider-prev {
		left: 44px !important;
	}
	
	.schedule-slider .gutslider-next {
		right: 44px !important;
	}

}

@media screen and (min-width: 500px) and (max-width: 599px) {
	.schedule-slider {
		padding: 18px 100px !important;
	}
	
	.schedule-slider .gutslider-prev {
		left: 92px !important;
	}
	
	.schedule-slider .gutslider-next {
		right: 92px !important;
	}
}

@media screen and (min-width: 600px) and (max-width: 767px) {
	.schedule-slider {
		padding-left: 130px !important;
		padding-right: 130px !important;
	}
	
	.schedule-slider .gutslider-prev {
		left: 90px !important;
	}
	
	.schedule-slider .gutslider-next {
		right: 90px !important;
	}
}

@media screen and (min-width: 768px) and (max-width: 860px) {
	.schedule-slider {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
	.schedule-slider .wp-block-gutsliders-slide {
		height: 41em;
	}
}

/* Стили для блока наши услуги */
.services__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.5s ease;
}

.services__card:hover {
  background: rgb(255, 255, 255, 0.5);
  transform: scale(1.06);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}


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

/* Стили блока кнопок фильтра */
.portfolio__buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  grid-template-columns: auto max-content max-content max-content auto;
}

.portfolio__button {
    padding: 10px 20px;
    color: #800020;
    border: 1px solid #800020;
    font-family: 'Involve-Regular';
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
} 

.portfolio__button:hover {
  opacity: 0.4;
  background-color: #800020;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.portfolio__button.active {
  background-color: #800020;
  color: #ffffff;
  border: 1px solid #ffffff;
}

/* Блок с видео и попап */
.portfolio-hero__wrap {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  position: relative;
  transition: min-height 0.5s ease;
}

.portfolio-hero__wrap.filtering-active {
    overflow: hidden;
}

.portfolio-hero__card {
    position: relative;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center center;
    backface-visibility: hidden;
}


.portfolio-hero {
  position: relative;
  overflow: hidden;
}

.portfolio-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
}

/* Стили для текста и кнопки */
.portfolio-hero__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 1s;
  
}

.portfolio-hero:hover .portfolio-hero__content {
  opacity: 1;
}

/* Стили модального окна */
.modal-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
	visibility: hidden;
  opacity: 0;
	transition: 1s;
}

.modal-video--show {
	visibility: visible;
	opacity: 1;
}

.modal-video__content {
  width: 100%;
  max-width: 1200px;
	height: 90%;
	display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
	top: 20px;
}

.modal-video__fullscreen {
	width: 100%;
	max-height: 92vh;
}

.modal-video__close {
  position: absolute;
  top: -10px;
  right: 8px;
  color: white;
  font-size: 50px;
  cursor: pointer;
	z-index: 5;
  transition: all 0.3s ease;
}

.modal-video__close:hover {
  color: #800020;
}

@media screen and (max-width: 620px) {
  .slider__portfolio .swiper-button-prev,
  .slider__portfolio .swiper-button-next {
    width: 2.2em;
    height: 2.2em;
  }
}

@media screen and (max-width: 620px) {
  .portfolio__buttons {
    grid-template-columns: max-content;
  }

  .portfolio__buttons .wp-block-spacer {
    display: none;
  }
}


/* Стили для блока наша команда */
.team-slider .swiper-container-outer {
  justify-content: space-between;
  border-radius: 10px;
}

.team-slider .gutslider-content-inner {
  height: 100%;
}

.team-slider .swiper-pagination {
  display: none;
}

@media screen and (max-width: 500px) {
  .team-slider {
    padding: 0 !important;
  }
}

/* @media screen and (min-width: 601px) {
  .team-slider__content {
    grid-template-columns: 1fr;
    /* margin-left: 25px;
    margin-right: 25px; */
  /*}
}*/

@media screen and (min-width: 602px) and (max-width: 767px) {
  .team-slider {
    padding: 0 !important;
  }

  .team-slider .wp-block-gutsliders-slide {
    height: 28em;
  }
}

@media screen and (max-width: 767px) and (max-width: 1200px) {
  .team-slider .wp-block-gutsliders-slide {
    height: 33em;
  }
}

/* Блок отзывы */
.reviews {
  display: none;
}

/* Блок контакты и форма */
/* Контактная форма */
.contacts-form {
  font-family: "Montserrat";
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}

.contacts-form p:last-child {
  display: flex !important;
  flex-direction: row;
  align-items: center;
}

.contacts-form__label {
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}

.contacts-form__input,
.contacts-form__textarea {
  width: 100%;
  max-width: 100%;
  padding: 6px 5px;
  font-size: 1.2em;
  border-radius: 6px;
  border: 2px solid #800020;
  box-sizing: border-box;
}


.contacts-form__input:focus,
.contacts-form__textarea:focus {
  outline-color: #800020;
}

.contacts-form__btn {
  font-family: "Involve";
  font-size: 1.2em;
  padding: 12px 26px;
  border-radius: 10px;
  color: #F5F5DC;
  background-color: #800020;
}

.contacts-card__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
}
.contacts-card__text {
  margin: 0;
}

.contacts-card__text svg,
.contacts-card__link svg {
  margin-right: 10px;
}

.contacts-card__link {
  color: #800020 !important;
}

.contacts-card__link:hover {
  color: #000000 !important;
}

@media screen and (max-width: 768px) {
  .contacts__content {
    grid-template-columns: auto;
  }

  .contacts-form__input::placeholder,
  .contacts-form__textarea::placeholder {
    font-size: 0.6em;
  }
}


/* Footer */
.logo--footer {
  display: block;
}

.socials {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
}

.socials__item {
    display: inline-block;
}

.socials__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    text-decoration: none;
}

.socials__img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 600px) {
  .footer__top-wrap {
    flex-direction: row;
    justify-content: center;
  }

  .footer__bottom-wrap {
    flex-direction: column-reverse;
    row-gap: 6px;
  }
}

@media screen and (max-width: 885px) {
    .footer__instructions-menu.wp-block-navigation__container {
        display: grid !important;
    }
}

/* Страница политика конфеденциальности */

.privacy-policy-subtitle {
  position: relative;
}

.privacy-policy-subtitle::after {
  content: "";
  display: block;
  width: 14px;
  height: 2px;
  background-color: #333333;
  position: absolute;
  top: 50%;
  left: 0;
}

/* Страница портфолио */
.portfolio__link-text:hover {
  transition: all 0.3s ease;
  position: relative;
} 

.portfolio__link-text:hover::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #800020;
  animation: underline 0.3s forwards;
}

/* Карточки */
.video-production__card {
	width: 100%;
	position: relative;
}

.video-production__video {
	width: 100%;
	vertical-align: middle;
	border-radius: 10px;
}

.video-production__button-wrap {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: 1s;
    opacity: 0;
}

.video-production__card:hover .video-production__button-wrap {
	opacity: 1;
}

/* Стили для страницы с отзывами */

/* Стили для карточек отзывов */
.review-card {
    background: #fafafa;
    transition: transform 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
}

/* Стили для формы */
.review-input, .review-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
}

.review-input:focus, .review-textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent-3);
}

.form-field {
    margin-bottom: 20px;
}

.submit-review-btn .wp-block-button__link {
    background-color: var(--wp--preset--color--accent-3);
    padding: 15px 40px;
}

/*Блок комментарием*/
.template-comments__text {
    margin-top: 6px !important;
}
/*Форма комментариев*/
.form-comments .comment-reply-title {
    font-family: 'Involve';
}

.form-comments .comment-form p {
   margin-bottom: 10px;
   font-family: 'Montserrat', sans-serif;
}

.form-comments .logged-in-as {
    margin-bottom: 20px;
}

.form-comments .required-field-message {
   display: block;
   color: #ff0000e6;
   font-size: 0.8em;
}

.form-comments textarea {
    margin-bottom: 20px;
}

.form-comments textarea:active {
 outline-color: #800020;
}

.form-comments .comment-form .comment-form-url {
    margin-bottom: 20px;
}

.form-comments .comment-form .comment-form-cookies-consent {
    margin-bottom: 20px;
}

.form-comments .comment-form .comment-form-cookies-consent input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	white-space: nowrap;
	-webkit-clip-path: inset(100%);
	clip-path: inset(100%);
	clip: rect(0 0 0 0);
	overflow: hidden;
}

.form-comments .comment-form .comment-form-cookies-consent input[type="checkbox"] + label {
    position: relative;
    cursor: pointer;
    line-height: 30px;
	padding: 4px 10px 4px 40px;
}

.form-comments .comment-form .comment-form-cookies-consent input[type="checkbox"] + label:hover {
	opacity: 0.8;
}

.form-comments .comment-form .comment-form-cookies-consent input[type="checkbox"] + label:before {
	content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #ffffff;
    border: 1px solid #949494;
    border-radius: 4px;
    transform: translateY(-50%);
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}

.form-comments .comment-form .comment-form-cookies-consent input[type="checkbox"]:checked + label:after {
	content: "";
    width: 28px;
    height: 30px;
    position: absolute;
	top: 50%;
    left: 2px;
    background-image: url(https://stagestudio.ru/wp-content/uploads/2025/11/yes-deep-red.svg);
	background-position: 50%;
    background-repeat: no-repeat;
	transform: translateY(-50%);
    transition: .2s;
}