/* Modal overflow and message positioning fixes */

/* Submit button shadow enhancement for modal forms */
.modal-content .submit-button:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure modal content is scrollable when it overflows */
.modal-content {
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Keep form block from growing beyond container */
.modal-content .form-block {
  flex-shrink: 0;
}

/* Position success and error messages properly */
.modal-content .success-message,
.modal-content .error-message {
  position: relative;
  margin-top: 1.5em;
  z-index: 10;
  flex-shrink: 0;
}

/* Ensure messages are visible and not behind button */
.modal-content .w-form {
  position: relative;
}

/* Add some bottom padding to modal content to prevent cutoff */
.modal-content {
  padding-bottom: 2em !important;
}

/* Mobile optimizations for smaller viewports */
@media screen and (max-height: 700px) {
  .modal-content {
    max-height: 95vh;
  }
  
  .modal-content .textarea {
    height: 80px !important;
    min-height: 80px !important;
  }
  
  .modal-header h2 {
    margin-bottom: 0.5em;
  }
}

/* Very short viewports */
@media screen and (max-height: 600px) {
  .modal-content {
    max-height: 98vh;
    padding-top: 1.5em !important;
    padding-bottom: 1.5em !important;
  }
  
  .modal-content .textarea {
    height: 60px !important;
    min-height: 60px !important;
  }
  
  .modal-header {
    margin-bottom: 0.5em;
  }
  
  .modal-header h2 {
    font-size: 1.6em !important;
    margin-bottom: 0.25em;
  }
  
  .field-block {
    margin-bottom: 1em;
  }
}

/* Smooth scrolling for modal */
.modal-content {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar while keeping scroll functionality */
.modal-content {
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.modal-content::-webkit-scrollbar {
  display: none;
}

/* Normalize button sizes on webdev and marketing hero sections */
.page-webdev .block-buttons-hero .button.large,
.page-marketing .block-buttons-hero .button.large {
  padding: 1em 2em;
  font-size: 1rem;
}

.page-webdev .block-buttons-hero .button.large .button-text,
.page-marketing .block-buttons-hero .button.large .button-text {
  font-size: 1rem;
}

/* About page: biography image tweaks */
.photo-about .biography-photo {
  border-radius: 8px !important;
  overflow: hidden !important;
}

.photo-about .biography-photo .biography-image {
  border-radius: 8px !important;
  display: block;
}

/* About page: biography section redesign */
.photo-about .biography-section {
  gap: 1.25em;
  margin-top: 2.25em;
}

.photo-about .biography-item {
  position: relative;
  gap: 2.25em;
  padding: 2.25em;
  border: 1px solid rgba(14, 14, 14, 0.08) !important;
  border-radius: 6px !important;
  background: #f2f2f2 !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease, background-color 240ms ease, background 240ms ease;
}

.photo-about .biography-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.02));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
}

.photo-about .biography-item:hover {
  transform: translateY(-3px);
  background: #ffffff !important;
  box-shadow: -8px 0 20px -14px rgba(0, 0, 0, 0.35), 8px 0 20px -14px rgba(0, 0, 0, 0.35), 0 26px 44px -18px rgba(0, 0, 0, 0.38);
  border-color: rgba(14, 14, 14, 0.14) !important;
}

.photo-about .biography-photo {
  width: 230px;
  height: 290px;
  border: 1px solid rgba(14, 14, 14, 0.10);
  background-color: rgba(14, 14, 14, 0.10);
  box-sizing: border-box;
  padding: 2px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

/* Suit-matching photo frames */
.photo-about .biography-item.bio-franky .biography-photo {
  border-color: #4b4e56 !important; /* deep neutral grey */
  background-color: #4b4e56 !important;
}

.photo-about .biography-item.bio-fabio .biography-photo {
  border-color: #45607a !important; /* slightly bluer grey-blue */
  background-color: #45607a !important;
}

.photo-about .biography-text {
  gap: 0.75em;
}

.photo-about .biography-name {
  font-family: var(--accent-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
  font-size: 1.155em;
  line-height: 1.1;
  color: var(--heading);
   margin-top: 0.2em;
   margin-bottom: 0.2em;
}

.photo-about .biography-content {
  font-size: 1.1em;
  line-height: 1.75;
  color: rgba(14, 14, 14, 0.78);
}

@media (max-width: 991px) {
  .photo-about .biography-item {
    padding: 2.25em 1.75em 2em;
    gap: 1.5em;
  }

  .photo-about .biography-photo {
    width: 200px;
    height: 260px;
  }

  .photo-about .biography-name {
    font-size: 1.1em;
  }
}

@media (max-width: 766px) {
  .photo-about .biography-item {
    padding: 2.25em 1.5em 2em;
    border-radius: 6px !important;
  }

  .photo-about .biography-photo {
    width: min(240px, 100%);
    height: 280px;
  }

  .photo-about .biography-text {
    text-align: center;
    align-items: center;
  }
}

/* About page: section title spacing on non-desktop viewports */
@media (max-width: 991px) {
  .photo-about .rich-text-block h4[data-i18n="about_page.section_title"] {
    margin-bottom: 1em !important;
  }
}

/* About page: section title spacing on desktop viewports */
@media (min-width: 992px) {
  .photo-about .rich-text-block h4[data-i18n="about_page.section_title"] {
    margin-top: -0.6em !important;
  }
}

/* About page: "Why choose Vizion Studio?" card background transparency (30%) */
.photo-about [data-w-id="402cdc94-10db-ea3b-9a7f-42fb24a6ff4f"].block-page {
  background-color: rgba(255, 255, 255, 0.7) !important;
}