/* styles.css */

@keyframes glow-text {

  0%,
  100% {
    text-shadow: none;
  }

  50% {
    text-shadow: 0 0 8px #6422B8, 0 0 12px #6422B8;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  /* Header Font Sizes */
  --font-size-header-caption-title: 28px;
  --font-size-header-caption-subtitle: 16px;
  --font-size-header-block-title: 18px;
  --font-size-header-block-list: 14px;
  --font-size-header-contacts-list: 20px;

  /* Main Content Font Sizes */
  --font-size-section-heading: 28px;
  --font-size-section-list: 20px;
  --font-size-action-button: 20px;

  /* FAQ Section Font Sizes */
  --font-size-faq-heading: 36px;
  --font-size-faq-summary: 18px;

  --video-height: 570px;

  margin: 0;
  font-family: 'Arial', sans-serif;
  background-color: #ffd636;
  color: #000;
  line-height: 1.6;
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet font sizes */
  body {
    --font-size-header-caption-title: 24px;
    --font-size-header-caption-subtitle: 14px;
    --font-size-header-block-title: 16px;
    --font-size-header-block-list: 13px;
    --font-size-header-contacts-list: 18px;
    --font-size-section-heading: 28px;
    --font-size-section-list: 20px;
    --font-size-action-button: 20px;
    --font-size-faq-heading: 28px;
    --font-size-faq-summary: 16px;
  }
}

/* Mobile font sizes */
@media (max-width: 767px) {
  body {
    /* Header Font Sizes */
    --font-size-header-caption-title: 24px;
    --font-size-header-caption-subtitle: 16px;
    --font-size-header-block-title: 18px;
    --font-size-header-block-list: 15px;

    /* FAQ Section Font Sizes */
    --font-size-faq-heading: 24px;
    --font-size-faq-summary: 15px;

    --video-height: 570px;

    --font-size-section-heading: 22px;
    --font-size-section-list: 15px;
    --font-size-action-button: 16px;
  }
}

header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  background-color: #ffd636;
  color: #000;
  position: relative;
  z-index: 100;
}

.intro-video {
  width: 100%;
  height: var(--video-height);
  max-height: var(--video-height);
  /* Keep this for responsive video size */
  object-fit: cover;
  /* This is the key property */
  object-position: center;
  /* Optional: centers the image */
}

.header-left {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background-color: #ffd636;
  padding: 0;
}

.header-left video {
  width: 100%;
  display: block;
}

.header-caption {
  background-color: #ffd636;
  text-align: center;
  padding: 15px 10px;
  color: #6422B8;
}

.header-caption h1 {
  font-size: var(--font-size-header-caption-title);
  font-weight: bold;
  margin: 0;
  text-transform: uppercase;
}

.header-caption .subtitle {
  font-size: var(--font-size-header-caption-subtitle);
  font-weight: bold;
  margin-top: 5px;
  text-transform: uppercase;
}

.header-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  font-weight: bold;
}

.header-block:not(.contacts) {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  min-height: 100px;
}

.header-block h2 {
  display: flex;
  align-items: center;
  font-size: var(--font-size-header-block-title);
  text-transform: uppercase;
  width: 47%;
  /* Pin the title width so a longer list can't squeeze it and shift
     that block's bullets out of line with the others */
  flex-shrink: 0;
}

.header-block ul {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding-left: 20px;
  font-size: var(--font-size-header-block-list);
}

.header-block.education {
  background-color: #6422B8;
  color: #FFD93B;
}

.header-block.experience {
  background-color: #FFFFFF;
  color: #6422B8;
}

.header-block.offers {
  background-color: #FF73CB;
  color: #FFFFFF;
}

.header-block.offers li a {
  color: #FFFFFF;
}

.header-block.results {
  background-color: #6422B8;
  color: #FFD93B;
}

.header-block.results a {
  color: #FFD93B;
}

.header-block.faq {
  background-color: #FFFFFF;
  color: #6422B8;
}

.header-block.contacts {
  background-color: #FF73CB;
  color: #FFFFFF;
}

.header-block.contacts .text {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  min-height: 100px;
  animation: glow-text 2s ease-in-out infinite;
}

.header-block.contacts .text ul {
  font-size: var(--font-size-header-contacts-list);
}

/* Between the mobile breakpoint and ~1340px the info column is too
   narrow to keep the title beside the list without the bullets
   wrapping raggedly. Stack the title above the list so it always
   has the full column width and lines up cleanly. */
@media (min-width: 768px) and (max-width: 1339px) {
  .header-block:not(.contacts),
  .header-block.contacts .text {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
  }

  .header-block h2 {
    width: auto;
  }

  .header-block ul {
    padding-left: 18px;
  }
}

main {
  padding: 20px;
  /* Extra bottom space so the fixed "Записаться" pill never
     covers the final section's content */
  padding-bottom: 100px;
}

section {
  background: #fff9c4;
  margin: 20px auto;
  padding: 30px 20px;
  box-sizing: border-box;
  border-radius: 10px;
  color: #6422B8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.offer-reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

section h1 {
  font-size: var(--font-size-section-heading);
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 0 10px;
  text-align: center;
  max-width: 60%;
}

section>ul {
  list-style: none;
  padding-left: 0;
  font-weight: bold;
  font-size: var(--font-size-section-list);
  padding: 0 60px;
}

section>ul>li::before {
  content: "– ";
  color: #6422B8;
  /* Optional: make the dash purple */
  margin-right: 4px;
}

.price {
  background: #FF73CB;
  color: #fff;
  padding: 6px 12px;
  margin: 10px 0 30px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-action-button);
  text-decoration: none;
}

.price:last-child {
  margin-bottom: 0;
}

.reviews {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* "Смотреть отзывы" carousel button. Content-width: it is a direct
   child of the flex-centered .offer-reviews, so width:auto shrinks it
   to its label and centers it. Hidden by default; shown <=900px. */
.open-carousel-btn {
  display: none;
  width: auto;
  margin: 10px 0 20px;
  padding: 8px 16px;
  background: #FF73CB;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px #FF73CB33;
  transition: background 0.2s;
  font-size: var(--font-size-action-button);
}

.open-carousel-btn:hover,
.open-carousel-btn:focus {
  background: #e65bb8;
  outline: none;
}

/* Up to 900px the masonry only gets 1–2 shrunken columns, so swap it
   for the carousel button (same treatment as phones). */
@media (max-width: 900px) {
  .reviews {
    display: none;
  }

  .open-carousel-btn {
    display: block;
  }
}

/* >=901px: lay the varying-height review screenshots out as a
   balanced masonry (CSS columns) so they reflow into 2–3 tidy
   columns instead of a ragged flex-wrap. */
@media (min-width: 901px) {
  .reviews {
    display: block;
    width: 100%;
    column-width: 250px;
    column-gap: 10px;
    max-width: 810px;
    margin-left: auto;
    margin-right: auto;
  }

  .reviews > * {
    break-inside: avoid;
    margin: 0 0 10px;
  }

  .reviews > img {
    display: block;
  }
}

.reviews-couple {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.reviews img {
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.reviews img:hover {
  transform: scale(1.05);
}

.exam-reviews img {
  width: 250px;
}

.general-reviews img {
  width: 250px;
}

.general-reviews .reviews-couple img {
  height: 250px;
}

.general-reviews .reviews-couple img.taller-in-couple {
  height: 450px;
}

section.faq {
  padding-left: 40px;
  padding-right: 40px;
}

section.faq h1 {
  font-size: var(--font-size-faq-heading);
}

section.faq details {
  width: 100%;
}

section.faq details:not(:last-of-type) {
  margin-bottom: 10px;
}

section.faq details summary {
  background: #FF73CB;
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-faq-summary);
  cursor: pointer;
}

section.faq details p {
  cursor: default;
  font-weight: 700;
  font-size: var(--font-size-faq-summary);
}

section.contacts {
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 100;
}

section.contacts img {
  width: 350px;
  height: 300px;
  border-radius: 8px;
  border: 1px solid #000;
}

.contact-list {
  display: flex;
  gap: 50px;
}

.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.contact-icon {
  width: 64px;
  height: 64px;
}

.telegram-icon {
  color: #29A9EA;
}

.whatsapp-icon {
  color: #0CC143;
}

/* Hide QR codes on mobile */
@media (max-width: 767px) {
  section.contacts img {
    display: none;
  }

  /* Mobile Header Layout */
  header {
    flex-direction: column;
  }

  .header-left {
    width: 100%;
    order: 1;
  }

  .header-right {
    width: 100%;
    order: 2;
  }

  /* Hide desktop header blocks on mobile */
  .header-right {
    display: none;
  }

  /* Mobile Information Blocks */
  .mobile-info-blocks {
    display: block;
    padding: 20px;
  }

  .mobile-info-blocks details {
    width: 100%;
    margin-bottom: 10px;
  }

  .mobile-info-blocks details summary {
    background: #FF73CB;
    color: #fff;
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    padding-left: 2.5em;
    list-style: none;
  }

  .mobile-info-blocks details summary::marker {
    display: none;
  }

  .mobile-info-blocks details summary::-webkit-details-marker {
    display: none;
  }

  .mobile-info-blocks details summary::before {
    content: '';
    background-image: url('./finger.svg');
    color: white;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    animation-delay: var(--finger-delay, 0s);
  }
  
  @keyframes finger-slide-abs {
    0%, 100% {
      transform: translateY(-50%) translateX(0);
    }
    50% {
      transform: translateY(-50%) translateX(3px);
    }
  }
  
  /* Apply finger sliding animation to finger icons */
  .mobile-info-blocks details summary::before,
  .mobile-nav-button-link::before {
    animation: finger-slide-abs 2s ease-in-out infinite;
  }
  
  .mobile-nav-button-link::before {
    content: '';
    background-image: url('./finger.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    animation-delay: var(--finger-delay, 0s);
  }

  .mobile-info-blocks details ul {
    list-style: none;
    padding-left: 0;
    font-weight: bold;
    font-size: 14px;
    padding: 0 20px;
    margin-top: 8px;
    color: #6422B8;
  }

  .mobile-info-blocks details ul li {
    color: #6422B8;
    position: relative;
    font-size: var(--font-size-header-block-list);
  }
  .mobile-info-blocks details ul li::before {
    content: none !important;
  }
  .mobile-info-blocks details ul li a {
    position: relative;
    padding-left: 1.3em;
    display: inline-block;
  }
  .mobile-info-blocks details ul li:not(:first-child) {
    margin-top: 4px;
  }
  .mobile-info-blocks details ul li a::before {
    content: '\2794';
    color: #FF73CB;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;
    font-weight: bold;
    vertical-align: middle;
  }

  /* Mobile main content adjustments */
  main {
    padding: 10px;
    padding-bottom: 90px;
  }

  section {
    margin: 10px auto;
    padding: 20px 15px;
  }

  section h1 {
    max-width: 100%;
  }

  section>ul {
    padding: 0 20px;
  }

  .price {
    padding: 8px 16px;
  }

  /* Mobile FAQ */
  section.faq {
    padding-left: 15px;
    padding-right: 15px;
  }

  section.faq details summary {
    padding: 8px 12px;
  }

  /* Mobile Reviews: grid hidden / carousel button shown is handled
     by the shared <=900px rules below */

  .exam-reviews img,
  .general-reviews img {
    width: 200px;
  }

  .general-reviews .reviews-couple img {
    height: 200px;
  }

  .general-reviews .reviews-couple img.taller-in-couple {
    height: 350px;
  }

  /* Mobile Contacts */
  .contact-list {
    gap: 30px;
  }

  .contact-icon {
    width: 48px;
    height: 48px;
  }

  .intro-video {
    max-height: 70vh;
  }

  /* Header links in mobile layout */
  .header-right a,
  .mobile-info-blocks a {
    text-decoration: none;
    color: #6422B8;
    font-weight: normal;
    text-shadow: 0 1px 0 #FF73CB, 0 0 2px #FF73CB33;
    position: relative;
    padding-right: 0;
  }

  .header-right a:active,
  .header-right a:focus,
  .header-right a:hover,
  .mobile-info-blocks a:active,
  .mobile-info-blocks a:focus,
  .mobile-info-blocks a:hover {
    color: #e65bb8;
    text-decoration: underline;
    text-shadow: 0 2px 2px #FF73CB66;
  }

  .mobile-info-blocks details ul li::before {
    content: '\2794 '; /* fat right arrow */
    color: #FF73CB;
    margin-right: 4px;
    font-size: 1.1em;
    font-weight: bold;
    vertical-align: middle;
  }

  /* Mobile navigation button links */
  .mobile-nav-button-link {
    display: block;
    width: 100%;
    background: #FF73CB;
    color: #fff;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    margin-bottom: 10px;
    box-sizing: border-box;
    position: relative;
    padding-left: 2.5em;
  }

  .mobile-nav-button-link::before {
    content: '';
    background-image: url('./finger.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
  }

  .mobile-info-blocks a.mobile-nav-button-link {
    font-weight: bold;
  }

  .mobile-info-blocks a.mobile-nav-button-link:visited {
    color: #fff;
  }

  .mobile-info-blocks a.mobile-nav-button-link:active,
  .mobile-info-blocks a.mobile-nav-button-link:focus,
  .mobile-info-blocks a.mobile-nav-button-link:hover {
    background: #e65bb8;
    color: #fff;
    outline: none;
  }

  .mobile-info-blocks a.mobile-nav-button-link:last-child {
    margin-bottom: 0;
  }

  .mobile-info-blocks-wrapper {
    position: relative;
    z-index: 100;
    background: #ffd636;
  }

  .offer-reviews h1 {
    display: none;
  }

  .carousel-image {
    max-height: 100%;
    width: 100%;
  }

  /* Touch-friendly carousel interactions */
  .carousel-container {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  .overlay.active .carousel-container {
    transition: transform 0.1s ease-out;
  }
}

/* Desktop - hide mobile info blocks */
@media (min-width: 768px) {
  .mobile-info-blocks {
    display: none;
  }

  /* Let the hero video fill the left column so it matches the
     (taller) right column instead of leaving a blank yellow gap */
  .intro-video {
    height: 100%;
    max-height: none;
    min-height: var(--video-height);
    flex: 1;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  section.contacts img {
    width: 300px;
  }
}

/* Overlay and Carousel Styles */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.overlay.active {
  display: flex;
}

.carousel-container {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
  .carousel-image {
    width: 400px;
    height: auto;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
  } 
}

.carousel-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.carousel-button {
  background: #FF73CB;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  transition: background-color 0.2s ease;
}

.carousel-button:hover {
  background: #e65bb8;
}

.carousel-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.carousel-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: #FF73CB;
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.carousel-close:hover {
  background: #e65bb8;
}

.carousel-counter {
  color: #6422B8;
  font-weight: bold;
  font-size: 14px;
}

/* Sticky Contact Button */
.sticky-contact {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #FF73CB;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 15px 25px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 50;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.sticky-contact:hover {
  background: #e65bb8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.sticky-contact-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Animation for the sticky button */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.sticky-contact {
  animation: pulse 2s ease-in-out infinite;
}

.sticky-contact:hover {
  animation: none;
}

@media (min-width: 520px) and (max-width: 767px) {
  .intro-video {
    max-height: 75vh;
  }
}