/* styles.css
   Semantic, responsive, variables at top for easy color changes.
*/

/* ========== Color variables ========== */
:root {
  /* primary palette (you asked to keep in variables) */
  --bg-dark: #3e1e68; /* site background */
  --text-on-dark: #ffacac; /* text on dark backgrounds */
  --text-on-light: #3e1e68; /* text on light backgrounds */
  --accent-1: #5d2f77; /* section / card accent */
  --accent-2: #e45a92; /* secondary accent */
  --white: #ffffff;
  --max-width: 1200px;
  --placeholder-color: color-mix(in srgb, var(--text-on-dark) 50%, transparent);

  /* spacing scale */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;

  /* radius and shadows */
  --radius: 12px;
  --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  /* error color for form validation and important notices */
  --color-error: #d9534f; /* pleasant warm red */
  /* success color for confirmation messages */
  --color-success: #3fb870; /* soft pleasant green */
}

/* Default carousel variables (global) so all carousels inherit consistent sizes */
:root {
  --carousel-arrow-size: 40px;
  --carousel-arrow-font-size: 1.5rem;
  --carousel-arrow-offset: 10px;
  --carousel-horizontal-padding: 20px;
}

/* Responsive overrides for carousel variables so both carousels stay in sync */
@media (max-width: 768px) {
  :root {
    --carousel-arrow-size: 34px;
    --carousel-arrow-font-size: 1.2rem;
    --carousel-arrow-offset: 8px;
    --carousel-horizontal-padding: 18px;
  }
}

@media (max-width: 480px) {
  :root {
    --carousel-arrow-size: 30px;
    --carousel-arrow-font-size: 1rem;
    --carousel-arrow-offset: 6px;
    --carousel-horizontal-padding: 12px;
  }
}
/* --- Christmas Snow Animation Styles --- */
#snow-canvas {
  /* Розміщуємо полотно на весь екран */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Дуже важливо: розміщуємо його позаду всього контенту */
  z-index: -1;

  /* Найважливіша властивість: робить елемент "прозорим" для кліків миші */
  pointer-events: none;
}

/* ========== Base ========== */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
}

/* skip link for accessibility */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: var(--white);
  color: var(--bg-dark);
  border-radius: 6px;
  z-index: 9999;
}

/* layout container */
.container {
  width: calc(100% - 2 * var(--space-md));
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Utility visually-hidden for figcaptions etc. */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Utility to prevent body scroll when mobile menu is open */
.no-scroll {
  overflow: hidden;
}

/* ========== Header ========== */
.site-header {
  padding: var(--space-sm) 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
/* 
.header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  text-align: center;
} */

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* логотип залишається зліва */
  position: relative; /* For mobile nav positioning */
  gap: var(--space-md);
  text-align: left;
}

.logo img {
  display: block;
  border-radius: 8px;
  /* Fallback explicit sizes (used by older browsers like IE11) */
  width: 90px;
  height: auto; /* keep natural aspect ratio */
  max-height: 130px;
  object-fit: contain; /* preserve logo aspect */
  transition: width 260ms ease, height 260ms ease;
}

/* .site-title-wrapper {
  flex: 1;
  text-align: center;
} */
.site-title-wrapper {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Add padding to prevent title from overlapping with the burger button */
  padding-right: 44px;
}

@media (max-width: 768px) {
  .site-title-wrapper {
  }
}

/* Pacifico font for title, larger */
.site-title {
  margin: 0;
  font-family: "Pacifico", "Playfair Display", Georgia, serif;
  color: var(--text-on-dark);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1;
  text-align: left;
}

/* Subtitle under main title */
.site-subtitle {
  margin: 15px 0 0 0;
  /* font-family: "Pacifico", "Playfair Display", Georgia, serif;  */
  color: var(--text-on-dark);
  font-size: clamp(1rem, 3vw, 1.6rem); /* трошки менше за h1 */
  line-height: 1.2;
  text-align: left;
  opacity: 0.9; /* легкий візуальний контраст */
}

@media (max-width: 600px) {
  /* .header-inner {
    flex-direction: column;
    text-align: center;
  } */
  .header-inner {
    flex-direction: row; /* залишається горизонтально */
    align-items: center;
    justify-content: flex-start;
  }

  .site-header .container {
    /* Ensure button doesn't cause overflow on small screens */
    position: relative;
  }

  .logo img {
    margin-bottom: 10px;
    /* slightly larger on small phones for better visibility */
    width: 72px;
    height: 72px;
  }

  .site-title {
    font-size: clamp(1.4rem, 4vw, 2rem);
  }

  .site-subtitle {
    font-size: clamp(1rem, 3vw, 1.4rem);
  }
}

/* ========== Header: Mobile Layout Overrides (<= 768px) ========== */
@media (max-width: 768px) {
  .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto; /* logo | title | burger */
    grid-template-rows: auto auto; /* row for title, row for subtitle */
    align-items: center;
    column-gap: var(--space-sm);
    row-gap: 4px; /* Small gap between title and subtitle */
  }

  .logo {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  /* Make h1 and h2 direct grid items */
  .site-title-wrapper {
    display: contents;
  }

  .site-title {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    padding-right: 0; /* Remove padding needed for flexbox layout */
    /* Fix for very narrow screens: allow title to wrap and shrink */
    word-break: break-word; /* Better word wrapping */
    min-width: 0;
    /*hyphens: auto; /* Allow automatic hyphenation */
    /* text-align: center;  */
  }

  .site-subtitle {
    grid-column: 1 / -1; /* Span across all columns */
    grid-row: 2 / 3;
    text-align: center; /* Center the subtitle */
    margin-top: 0;
    padding: 0 var(--space-sm);
  }

  .mobile-nav-toggle {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    position: static; /* Reset absolute positioning */
    transform: none; /* Reset transform */
  }
}

/* Specific fix for very narrow screens (< 400px) */
@media (max-width: 400px) {
  .site-title {
    font-size: 0; /* Hide original text */
    line-height: 1.2; /* Adjust line height for multi-line layout */
  }

  .site-title::before {
    content: "The Happy\A Craft\A Movement"; /* Add line breaks */
    font-size: 1.2rem; /* Set an appropriate font size */
    white-space: pre-wrap; /* Respect the line breaks in content */
    text-align: center;
  }
}

/* For modern browsers: smooth, responsive size using clamp() */
/* clamp(min, preferred, max): min 72px, preferred 6vw, max 130px */
@supports (width: clamp(1px, 1vw, 1px)) {
  .logo img {
    width: clamp(72px, 6vw, 130px);
    height: auto; /* keep aspect ratio */
    max-height: 130px;
  }
}

/* Note on IE11: it doesn't support clamp() or @supports fully.
   Because explicit fallback sizes are declared above, IE11 will
   use those values. To match current behavior in IE11 across three
   widths, keep the explicit breakpoint rules (these will be the
   fallback when clamp isn't available). */
@media (min-width: 601px) and (max-width: 991px) {
  .logo img {
    width: 96px;
    height: auto;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .logo img {
    width: 110px;
    height: auto;
  }
}

@media (min-width: 1200px) {
  .logo img {
    width: 130px;
    height: auto;
  }
}

/* ========== Main sections ========== */
.site-main {
  padding: var(--space-lg) 0;
  color: var(--text-on-dark);
}

/* When mobile nav is open, overlay main/footer content */
.mobile-nav[data-visible="true"] ~ .site-main,
.mobile-nav[data-visible="true"] ~ .site-footer {
  /* Prevents clicking on content behind the open nav */
  pointer-events: none;
}

/* ========== Mobile Navigation ========== */
.mobile-nav-toggle {
  display: none; /* Hidden by default on desktop */
}

.mobile-nav {
  display: none; /* Hidden by default on desktop */
}

/* Show and style mobile nav on smaller screens */
@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9999;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    width: 44px; /* Good touch target size */
    height: 44px;
  }

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

  /* Burger icon lines */
  .mobile-nav-toggle .burger-line,
  .mobile-nav-toggle::before,
  .mobile-nav-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 24px;
    height: 3px; /* Thicker lines */
    background-color: var(--text-on-dark);
    border-radius: 3px; /* Rounded ends */
    transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
    transform: translateX(-50%);
  }

  .mobile-nav-toggle::before {
    /* Top line */
    top: 14px;
  }

  .mobile-nav-toggle .burger-line {
    /* Middle line */
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .mobile-nav-toggle::after {
    /* Bottom line */
    top: 26px;
  }
  .mobile-nav-toggle::after {
    top: 28px;
  }

  /* Transform burger to 'X' when menu is open */
  .mobile-nav-toggle[aria-expanded="true"]::before {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .mobile-nav-toggle[aria-expanded="true"] .burger-line {
    opacity: 0; /* Hide middle line */
  }
  .mobile-nav-toggle[aria-expanded="true"]::after {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center links vertically */
    align-items: center; /* Center links horizontally */
    gap: var(--space-md);
    position: fixed;
    inset: 0; /* Full screen */
    background: color-mix(
      in srgb,
      var(--bg-dark) 75%,
      transparent
    ); /* More transparent */
    backdrop-filter: blur(10px);
    padding: min(20vh, 10rem) 2rem;
    transform: translateX(100%);
    transition: transform 350ms ease-out;
    z-index: 9998;
  }

  .mobile-nav[data-visible="true"] {
    transform: translateX(0%);
  }

  .mobile-nav a {
    color: var(--text-on-dark);
    text-decoration: none;
    font-size: clamp(1.2rem, 5vw, 1.5rem); /* Responsive font size */
    text-align: center;
    font-weight: 500;
    padding: var(--space-sm);
    border-radius: var(--radius);
    transition: background-color 0.2s ease;
  }

  .mobile-nav a:hover,
  .mobile-nav a:focus {
    background-color: rgba(255, 255, 255, 0.05);
    outline: none;
  }
}

/* Section headings */
section > .container > h2 {
  margin: 0 0 var(--space-md) 0;
  color: var(--text-on-dark);
  font-size: 1.5rem;
  letter-spacing: 0.2px;
}

/* ===== Unified section title style ===== */
.section-title {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 40px;
  color: var(--text-on-dark);
  letter-spacing: 0.3px;
}

/* ========== Instructor Section ========== */
.instructor-section {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  padding: var(--space-lg) 0;
  border-radius: 12px;
  /* margin-bottom: var(--space-lg); */
}

.instructor-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* photo left, text right */
.instructor-photo {
  flex: 0 0 420px;
  max-width: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.instructor-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Bio column */
.instructor-bio {
  flex: 1 1 320px;
  color: var(--text-on-dark);
  background: rgba(255, 255, 255, 0.02);
  padding: var(--space-md);
  border-radius: calc(var(--radius) - 4px);
}

/* ---------- Workshops Section ---------- */
.workshops {
  background-color: var(--color-light);
  color: var(--color-dark);
  padding: 60px 20px;
  text-align: center;
}

.workshops .section-title {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  margin-bottom: 40px;
  color: var(--color-primary-dark);
}

/* .workshops .section-title {
  color: var(--color-primary-dark);
} */

.workshops-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.workshop-card {
  background-color: var(--white);
  color: var(--text-on-light);
  border-radius: 15px;
  padding: 30px;
  width: 300px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

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

.workshop-card h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: var(--text-on-light);
}

.workshop-card p {
  margin: 5px 0;
  font-size: 1rem;
}

/* CTA container inside workshop cards: stack buttons, center them horizontally */
.workshop-ctas {
  display: flex;
  flex-direction: column;
  align-items: center; /* center horizontally */
  justify-content: center;
  gap: 10px; /* vertical spacing between buttons */
  /* margin-top: 12px; */
}

/* Ensure WhatsApp button matches width behavior and centers nicely when stacked */
.workshop-ctas .whatsapp-btn,
.workshop-ctas .download-materials {
  display: inline-flex;
  justify-content: center;
}

/* On very narrow cards allow buttons to wrap but remain centered */
@media (max-width: 360px) {
  .workshop-ctas {
    gap: 8px;
  }
  .workshop-ctas .whatsapp-btn,
  .workshop-ctas .download-materials {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Address link */
/* clickable map link inside address */
.map-link {
  color: var(--accent-1); /* стиль у тон решти тексту */
  font-weight: 600;
  text-decoration: none; /* прибираємо стандартне підкреслення */
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.map-link:hover,
.map-link:focus {
  color: var(--accent-2); /* зміна кольору при наведенні/фокусі */
  text-decoration: underline; /* додаємо підкреслення для UX */
  outline: none; /* прибираємо стандартну рамку браузера */
}

.invite-text {
  font-size: 0.95rem;
  margin-top: 20px;
  color: var(--accent-1);
}

/* WhatsApp Button (same as footer) */
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #25d366;
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 18px;
  border-radius: 30px;
  margin-top: 5px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.whatsapp-btn:hover {
  background-color: #1ebe5c;
  transform: scale(1.05);
}

.whatsapp-btn i {
  font-size: 1.2rem;
}

/* Download materials button - visually similar to .whatsapp-btn but uses an accent color */
.download-materials {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--accent-2); /* use an accent color so it's distinct */
  color: var(--white);
  text-decoration: none;
  font-weight: bold;
  padding: 10px 16px;
  border-radius: 30px;
  margin-top: 12px;
  transition: background-color 0.2s ease, transform 0.15s ease,
    box-shadow 0.15s ease;
}

.download-materials:hover,
.download-materials:focus {
  background-color: color-mix(in srgb, var(--accent-2) 80%, black 20%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  outline: none;
}

.download-materials:focus-visible {
  outline: 3px solid rgba(228, 90, 146, 0.22);
  outline-offset: 3px;
}

/* Small helpers to ensure button wraps nicely on narrow cards */
.workshop-card .download-materials {
  width: auto;
  white-space: nowrap;
}

/* If color-mix isn't supported in older browsers, provide a fallback using a slightly darker accent via filter */
@supports not (color-mix(in srgb, var(--accent-2) 80%, black 20%)) {
  .download-materials:hover,
  .download-materials:focus {
    filter: brightness(0.95);
  }
}

/* ---------- Responsive Design ---------- */
/* ========== Responsive: Instructor photo adjustments ========== */

/* Tablets and smaller (<= 768px) */
@media (max-width: 768px) {
  .instructor-photo {
    flex: 0 0 300px;
    max-width: 300px;
    margin: 0 auto var(--space-md); /* center horizontally + add spacing below */
  }

  .instructor-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .instructor-bio {
    text-align: center;
  }
}

/* Very small screens (<= 480px) */
@media (max-width: 480px) {
  .instructor-photo {
    flex: 0 0 240px;
    max-width: 240px;
  }
}

@media (max-width: 992px) {
  .workshop-card {
    width: 100%;
    max-width: 450px;
  }
}

@media (max-width: 600px) {
  .workshops-container {
    flex-direction: column;
    align-items: center;
  }
}

/* ========== Gallery : horizontal scrollable ========== */
/* .image-gallery {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
} */

/* .gallery-item {
  flex: 0 0 80%;
  max-width: 80%;
  scroll-snap-align: center;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--card-shadow);
} */

/* .gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
} */

/* ========== Testimonials horizontal gallery ========== */
.testimonials-gallery {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  scroll-snap-type: x mandatory;
}

.testimonial {
  flex: 0 0 80%;
  max-width: 80%;
  background: rgba(255, 255, 255, 0.04);
  padding: var(--space-md);
  border-radius: 12px;
  scroll-snap-align: center;
  color: var(--text-on-dark);
  box-shadow: var(--card-shadow);
}

.testimonial blockquote {
  margin: 0 0 var(--space-sm) 0;
  font-style: italic;
}

/* testimonial author */
.testimonial-author {
  margin: 0;
  font-weight: 700;
  color: var(--accent-2);
}
/* Testimonials carousel container */
.testimonials-carousel {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

/* Track container */
.testimonials-carousel .carousel-track-container {
  overflow: hidden;
  position: relative;
}

/* Horizontal track */
.testimonials-carousel .carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  padding: 0 20px;
  /* gap: 20px;  */
}

/* Each testimonial slide */
.testimonials-carousel .carousel-slide {
  min-width: 100%;
  display: flex;
  justify-content: center;
}

/* Keep existing testimonial style inside slides */
.testimonial {
  flex: 0 0 90%;
  max-width: 90%;
  background: rgba(255, 255, 255, 0.04);
  padding: var(--space-md);
  border-radius: 12px;
  color: var(--text-on-dark);
  box-shadow: var(--card-shadow);
  margin: 0 auto;
}

/* Reuse arrow buttons from gallery carousel */
.testimonials-carousel .carousel-btn {
  /* visual styling only; size/position inherited from .carousel variables */
  background: rgba(62, 30, 104, 0.7);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background 0.3s ease;
}

.testimonials-carousel .carousel-btn:hover {
  background: rgba(228, 90, 146, 0.85);
}

.testimonials-carousel .carousel-btn.prev {
  left: var(--carousel-arrow-offset);
}

.testimonials-carousel .carousel-btn.next {
  right: var(--carousel-arrow-offset);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .testimonials-carousel .carousel-btn {
    /* use shared variables so buttons match gallery behavior */
    width: var(--carousel-arrow-size);
    height: var(--carousel-arrow-size);
    font-size: var(--carousel-arrow-font-size);
  }

  .testimonial {
    /* flex: 0 0 95%; */
    /* max-width: 95%; */
    flex: 0 0 90%;
    max-width: 90%;
  }
}

/* ============================
   Testimonials carousel: improved small-screen behaviour
   Scope: affects only .testimonials-carousel and its direct children
   - reduce visible testimonial width on <=768px to avoid arrows overlapping
   - reserve horizontal padding for arrows so they sit outside content
   - slightly shrink arrow buttons and nudge them outward where needed
   ============================ */
@media (max-width: 768px) {
  .testimonials-carousel {
    padding: 0 36px; /* reserve space for arrows */
    box-sizing: border-box;
  }

  .testimonials-carousel .carousel-track {
    padding: 0; /* consistent with the gallery approach */
    gap: 0;
  }

  .testimonials-carousel .carousel-slide {
    min-width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Make the testimonial card a bit narrower than the viewport so arrows don't overlay */
  .testimonials-carousel .testimonial {
    flex: 0 0 88%;
    max-width: 88%;
    margin: 0 auto;
    box-shadow: var(--card-shadow);
  }

  /* Move arrows by changing the container variables so both carousels stay symmetric */
  .testimonials-carousel {
    --carousel-arrow-size: 34px;
    --carousel-arrow-font-size: 1.2rem;
    --carousel-arrow-offset: 8px;
  }
}

/* ============================
   Testimonials: fixed shape + inner scroll
   Keeps visual rectangles and prevents tall items from stretching layout
   ============================ */

/* Make the testimonial a flex column so content can grow/scroll nicely */
.testimonial {
  display: flex;
  flex-direction: column;
  /* Base width: keeps existing visual sizing, center with margin */
  flex: 0 0 90%;
  max-width: 90%;
  margin: 0 auto;

  /* Control the overall block shape (min and max heights) */
  min-height: 240px; /* ensures not too short on mobiles */
  max-height: 380px; /* prevents extremely tall boxes */
  overflow: hidden; /* hide overflow; inner area will scroll */
}

/* The main text area (blockquote) should take available space and be scrollable */
.testimonial blockquote {
  flex: 1 1 auto; /* grow to fill available vertical space */
  margin: 0 0 1rem 0;
  overflow-y: auto; /* scroll if content too tall */
  padding-right: 8px; /* room for scrollbar / breathing space */
  line-height: 1.45;
  -webkit-overflow-scrolling: touch; /* smooth touch scrolling on iOS */
}

/* Make author sit at bottom */
.testimonial .testimonial-author {
  flex: 0 0 auto;
  margin-top: 0.5rem;
  font-weight: 700;
  color: var(--accent-2);
  text-align: right;
}

/* Optional: subtle scrollbar styling for modern browsers */
.testimonial blockquote::-webkit-scrollbar {
  width: 8px;
}
.testimonial blockquote::-webkit-scrollbar-thumb {
  background: rgba(93, 47, 119, 0.35);
  border-radius: 6px;
}
.testimonial blockquote::-webkit-scrollbar-track {
  background: transparent;
}

/* ===== Responsive adjustments to shape (recommended values) ===== */

/* Tablet and up — slightly taller, more rectangular */
@media (min-width: 768px) {
  .testimonial {
    min-height: 280px;
    max-height: 420px;
    flex: 0 0 85%;
    max-width: 85%;
  }
}

/* Laptop and desktop — wider but not too tall (more rectangle) */
@media (min-width: 992px) {
  .testimonial {
    min-height: 320px;
    max-height: 440px;
    flex: 0 0 70%;
    max-width: 70%;
  }
}

/* Large desktop — even wider, less tall (more like rectangle) */
@media (min-width: 1200px) {
  .testimonial {
    min-height: 340px;
    max-height: 460px;
    flex: 0 0 60%;
    max-width: 60%;
  }
}

/* ========== Footer ========== */
.site-footer {
  margin-top: var(--space-lg);
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-on-dark);
}

/* ========== Contact / Feedback form ==========
   Uses existing color variables so it fits the design.
   Responsive: stacks vertically on small screens.
 */
.contact-section {
  padding: var(--space-lg) 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent);
  margin-top: var(--space-lg);
}

.contact-inner {
  max-width: 920px;
  margin: 0 auto;
}

.contact-intro {
  text-align: center;
  color: var(--text-on-dark);
  margin-bottom: var(--space-md);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  background: rgba(255, 255, 255, 0.02);
  padding: var(--space-md);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}

.contact-form .form-row {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-on-dark);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-on-dark);
  font-size: 1rem;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--placeholder-color);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial;
  opacity: 1; /* Firefox applies a lower opacity by default */
}

/* Fallback for older browsers that don't support color-mix */
@supports not (color: color-mix(in srgb, white, black)) {
  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    color: rgba(255, 172, 172, 0.5);
  }
}

/* Ховаємо плейсхолдер при фокусі для полів Phone та Message */
#phone:focus::placeholder,
#message:focus::placeholder {
  color: transparent;
  transition: color 0.2s ease-in-out;
}

.contact-form textarea {
  resize: vertical;
}

.field-error {
  color: var(--color-error);
  font-size: 0.9rem;
  margin-top: 6px;
  min-height: 1.2em;
}

/* Input invalid / error visual state applied by client script via .input-error */
.input-error {
  border-color: color-mix(
    in srgb,
    var(--color-error) 70%,
    rgba(255, 255, 255, 0.06) 30%
  );
  box-shadow: 0 4px 12px rgba(217, 83, 79, 0.12);
}

.input-error:focus {
  outline: 3px solid color-mix(in srgb, var(--color-error) 12%, transparent);
  outline-offset: 2px;
}

/* Success state for the whole form container */
.form-success-highlight {
  /* Adds a green glow around the form, preserving the original shadow */
  box-shadow: 0 0 0 3px
      color-mix(in srgb, var(--color-success) 40%, transparent),
    var(--card-shadow);
  /* Smooth transition for the effect */
  transition: box-shadow 300ms ease-in-out;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.primary-btn {
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: var(--white);
  padding: 12px 24px; /* Збільшено padding для кращого вигляду */
  border-radius: 30px;
  border: none;
  font-weight: 700;
  font-size: 1rem; /* Узгоджено розмір шрифту */
  cursor: pointer;
  width: 100%; /* Займає всю доступну ширину в контейнері */
  max-width: 320px; /* Максимальна ширина на великих екранах */
  transition: background 0.2s ease, transform 0.15s ease;
}

.primary-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.primary-btn:hover:not([disabled]) {
  background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.form-status {
  margin: 0;
  color: var(--text-on-dark);
}

/* Success state for the small inline form status shown after a successful send */
.form-status--success {
  color: var(--color-success);
  font-size: 1.15rem; /* slightly larger */
  font-weight: 700;
  margin-left: 6px;
  transition: color 160ms ease, transform 180ms ease, opacity 180ms ease;
  opacity: 1;
}

/* Responsive: single column on smaller screens */
@media (max-width: 768px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
  .form-actions {
    justify-content: center; /* Центрує кнопку по горизонталі */
  }

  /* Адаптивна ширина кнопки на менших екранах */
  .primary-btn {
    max-width: 280px;
  }
}

.footer-inner {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* keep overflow visible by default; we'll enable hidden when doing transforms below */
  overflow: visible;
}

.contact a {
  color: var(--text-on-dark);
  text-decoration: none;
}

.join-cta {
  /* Use flex column so we can control horizontal alignment precisely */
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* right aligned on desktop/tablet */
  text-align: right;
  max-width: 420px;
  margin-left: auto; /* push it to the right within .footer-inner */
  transition: transform 300ms ease, max-width 220ms ease, align-items 220ms ease;
}

/* Footer responsive behavior
   - >= 760px: keep right alignment (default)
   - 760px -> 600px: progressively move the join-cta toward the left (via translateX)
   - < 520px: stack footer content and left-align everything for mobile
*/

/* Progressive movement: start at large desktop widths and step toward 600px
   Strategy:
   - Keep contact info left aligned at all sizes >600px
   - Keep join-cta visually right-aligned (margin-left:auto / align-items:flex-end)
   - Gradually reduce max-width and apply conservative translateX values so the block
     moves toward the left as the viewport narrows. We keep .footer-inner overflow:hidden
     while transforms are active to avoid visible overflow.
*/

/* Ensure left-aligned contact info always */
.contact {
  text-align: left;
}

/* Movement active: start at large desktop widths (1400px) and progress down to 600px */
@media (max-width: 1400px) {
  .footer-inner {
    overflow: hidden; /* hide any transient overflow while we translate */
  }

  .join-cta {
    max-width: 380px;
    transform: translateX(-3%);
  }
}

@media (max-width: 1200px) {
  .join-cta {
    max-width: 360px;
    transform: translateX(-8%);
  }
}

@media (max-width: 992px) {
  .join-cta {
    max-width: 340px;
    transform: translateX(-12%);
  }
}

@media (max-width: 768px) {
  .join-cta {
    max-width: 320px;
    transform: translateX(-18%);
  }
}

@media (max-width: 640px) {
  .join-cta {
    max-width: 300px;
    transform: translateX(-24%);
  }
}

/* At 600px and below: stack and left-align everything (mobile behaviour requested)
   This ensures all footer blocks sit on the left and the join-cta no longer translates.
*/
@media (max-width: 600px) {
  .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* left align everything */
    gap: var(--space-sm);
    overflow: visible;
  }

  .join-cta {
    transform: none;
    text-align: left; /* left align join CTA on small screens */
    align-items: flex-start;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-top: 0.25rem;
  }

  .whatsapp-link {
    align-self: flex-start; /* make sure the button stays left on mobile */
  }

  .contact {
    width: 100%;
    text-align: left;
  }
}

/* Ensure the footer-bottom text (year/copyright) stays left-aligned on larger screens */
.footer-bottom p {
  text-align: left;
}

/* WhatsApp link */
/* .whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: var(--white);
  margin-top: 0.5rem;
}

.whatsapp-link svg {
  fill: var(--white);
}
.whatsapp-text {
  font-weight: 600;
} */

/* WhatsApp link */
/* .whatsapp-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: var(--white);
  margin-top: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
} */
/* .whatsapp-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 30px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: var(--white);
  font-weight: 600;
  margin-top: 0.5rem;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
} */
.whatsapp-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  transition: all 0.3s ease;
}

/* .whatsapp-link:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
} */
/* .whatsapp-link:hover {
  background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} */
.whatsapp-link:hover {
  background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
  transform: scale(1.05);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

/* Іконка WhatsApp */
/* .whatsapp-icon {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  color: var(--white);
  flex-shrink: 0;
} */
/* .whatsapp-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
} */
.whatsapp-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
  vertical-align: middle;
}

/* .whatsapp-text {
  font-weight: 600;
  line-height: 1;
  display: inline-block;
} */
.whatsapp-text {
  font-size: 0.95rem;
  font-weight: 600;
}

/* bottom footer */
.footer-bottom {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

@media (max-width: 480px) {
  .whatsapp-link {
    padding: 0.5rem 0.8rem;
  }

  .whatsapp-icon {
    width: 18px;
    height: 18px;
  }

  .whatsapp-text {
    font-size: 0.9rem;
  }
}

/* ========== Responsiveness ========== */
/* mobile first - small screens already ok */

/* >= 360px (phones) - default rules handle */
/* >= 768px tablets */
@media (min-width: 768px) {
  .gallery-item,
  .testimonial {
    flex: 0 0 48%;
    max-width: 48%;
  }

  .instructor-inner {
    gap: var(--space-xl);
  }
}

/* >= 992px laptops: make card widths consistent (two per row) */
@media (min-width: 992px) {
  .workshop-card {
    flex: 1 1 calc(50% - var(--space-md));
  }

  .instructor-photo {
    flex: 0 0 360px;
    max-width: 360px;
  }
  .instructor-bio {
    padding: var(--space-lg);
  }
}

/* >= 1200px desktop: larger container and show gallery items bigger */
@media (min-width: 1200px) {
  :root {
    --max-width: 1400px;
  }

  .testimonial {
    flex-basis: 33%;
    max-width: 33%; /* fallback */
  }

  .workshop-card {
    min-height: 220px;
  }
}

/* high contrast adjustments */
@media (prefers-contrast: more) {
  .workshop-card {
    border: 2px solid rgba(255, 255, 255, 0.06);
  }
  .site-title {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  }
}

/* ========== Workshop Gallery Carousel ========== */
/* Wrapper for carousel */
/* .carousel {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  background: var(--bg-dark);
} */

/* ========== Workshop Gallery Carousel (updated for consistency) ========== */

/* Outer wrapper — similar logic as Testimonials Carousel */
.carousel {
  position: relative;
  max-width: 800px; /* same width as testimonials */
  margin: 0 auto;
  overflow: hidden; /* hide parts of other slides */
  /* arrow controls: configurable variables to keep symmetry across carousels */
  --carousel-arrow-size: 40px;
  --carousel-arrow-font-size: 1.5rem;
  --carousel-arrow-offset: 10px; /* horizontal distance from container edge */
  /* horizontal padding reserved for arrows (used by components and responsive adjustments) */
  --carousel-horizontal-padding: 20px;
}

/* Track container */
.carousel-track-container {
  overflow: hidden;
  position: relative;
}

/* Horizontal track for slides */
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  padding: 0 var(--carousel-horizontal-padding);
  gap: 20px; /* додає проміжок між слайдами */
}

/* Each slide — show one per view */
.carousel-slide {
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Remove visible frame/shadow around images */
.carousel-slide img {
  /* width: 100%;
  height: 100%; */
  /*object-fit: cover; /* зображення заповнює весь слайд */
  width: 100%;
  height: auto; /* ✅ головне: дозволяє зображенню пропорційно зменшуватись */
  max-height: 450px;
  object-fit: contain; /* зберігає пропорції */
  display: block;
  transition: max-height 0.4s ease, width 0.4s ease; /* плавна зміна висоти при ресайзі */
  border-radius: 0; /* remove rounded corners */
  box-shadow: none; /* no individual shadow */
  background: transparent; /* no background boxes */
}

/* Carousel navigation buttons (same as testimonials) */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(62, 30, 104, 0.7);
  color: var(--white);
  border: none;
  border-radius: 50%;
  width: var(--carousel-arrow-size);
  height: var(--carousel-arrow-size);
  font-size: var(--carousel-arrow-font-size);
  cursor: pointer;
  z-index: 9999; /* ensure arrows float above other elements */
  overflow: visible; /* allow hover visuals to extend */
  transition: background 0.3s ease;
}

.carousel-btn:hover {
  background: rgba(228, 90, 146, 0.85);
  /* subtle glow that won't be clipped when overflow: visible is set */
  box-shadow: 0 6px 18px rgba(228, 90, 146, 0.18),
    0 0 0 6px rgba(228, 90, 146, 0.08);
}

.carousel-btn.prev {
  left: var(--carousel-arrow-offset);
}

.carousel-btn.next {
  right: var(--carousel-arrow-offset);
}

/* Responsive adjustments for smaller screens */
/* @media (max-width: 600px) { */
@media (max-width: 768px) {
  .carousel-slide {
    min-width: 90%;
  }
  /* smaller arrow variables for medium/smaller screens */
  .carousel {
    --carousel-arrow-size: 34px;
    --carousel-arrow-font-size: 1.2rem;
    --carousel-arrow-offset: 8px;
    --carousel-horizontal-padding: 18px;
  }

  /* .carousel-slide img {
    max-height: 300px;
    min-height: 180px;
  } */
}

/* Track container for horizontal movement */
.carousel-track-container {
  overflow: hidden;
  position: relative;
}

/* Track = the row of slides */
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  padding: 0 var(--carousel-horizontal-padding);
  gap: 20px; /* додає проміжок між слайдами */
}

/* Each slide */
.carousel-slide {
  min-width: 100%;
  overflow: hidden;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .carousel-btn {
    /* keep using variables (will be overridden by the .carousel media block for 600/480 if needed) */
    width: var(--carousel-arrow-size);
    height: var(--carousel-arrow-size);
    font-size: var(--carousel-arrow-font-size);
  }
}

/* ========== Responsive: Carousel arrows fix ========== */

/* For small screens - move arrows slightly outside and reduce overlap */
@media (max-width: 600px) {
  .carousel-btn.prev {
    /* left: -5px; /* трохи виносимо за межу контейнера */
    left: calc(
      var(--carousel-arrow-offset) * -1
    ); /* keep proportional if we want to nudge outside */
  }

  .carousel-btn.next {
    /* right: -5px; /* те саме для правої */
    right: calc(var(--carousel-arrow-offset) * -1);
  }

  .carousel-btn {
    /* use shared variables so sizes match across carousels */
    width: var(--carousel-arrow-size);
    height: var(--carousel-arrow-size);
    font-size: var(--carousel-arrow-font-size);
    background: rgba(62, 30, 104, 0.6); /* трохи м’якше */
    overflow: visible; /* allow hover visuals to extend beyond the button */
  }

  .carousel {
    padding: 0 calc(var(--carousel-horizontal-padding) / 2);
    /* allow arrow hover visuals to show outside the outer container while
       inner .carousel-track-container still hides neighbouring slides */
    overflow: visible;
  }

  /* .carousel-track {
    gap: 20px; 
  } */

  .carousel-slide {
    overflow: hidden; /* ✅ гарантує, що слайди не "виглядають" */
  }

  /* .carousel-slide img {
    object-fit: contain; 
  } */
  .carousel-slide img:hover,
  .carousel-slide img:focus {
    transform: none; /* прибираємо збільшення на мобільних */
  }
}

/* Extra-small devices (phones under 400px wide) */
@media (max-width: 400px) {
  .carousel {
    --carousel-arrow-size: 30px;
    --carousel-arrow-font-size: 1rem;
    --carousel-arrow-offset: 6px;
    --carousel-horizontal-padding: 12px;
  }
}

/* ✅ Unified responsive rule for gallery images */
@media (max-width: 768px) {
  .carousel-slide img {
    max-height: 300px; /* починає зменшуватись з 768px */
    min-height: 180px; /* не стає занадто малим */
    object-fit: contain;
    height: auto; /* ✅ обов’язково, щоб не втрачати адаптивність */
  }
}

/* Для найменших екранів — легке додаткове зменшення стрілок */
@media (max-width: 480px) {
  .carousel {
    --carousel-arrow-size: 30px;
    --carousel-arrow-font-size: 1rem;
    --carousel-arrow-offset: 6px;
  }
}

/* ========== Scroll to Top Button ========== */
#scrollToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Below mobile nav overlay, but above most content */

  /* Visibility transition */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
    background 0.3s ease;
}

#scrollToTopBtn[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#scrollToTopBtn:hover {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-1));
  transform: scale(1.1);
}

#scrollToTopBtn svg {
  transform: scale(1.5); /* Make the arrow icon a bit larger */
}

/* ============================
   Gallery-section specific fixes
   Scoped rules to avoid impacting other carousels (testimonials, etc.)
   - ensure only one slide is visible (no peeking neighbors)
   - provide consistent slide height to avoid layout jumps when images differ
   - move arrows outside the image area on small screens to avoid overlap
   If you prefer images not to be cropped, swap `object-fit: cover` -> `contain`
   and remove the fixed height; I've left a comment where to change that.
   ============================ */
.gallery-section .carousel {
  /* Keep the carousel centered while reserving horizontal space for arrows */
  padding: 0 48px; /* gives room for arrows without overlapping slides */
  box-sizing: border-box;
  max-width: 900px; /* slightly wider option for gallery */
}

.gallery-section .carousel-track {
  /* Remove internal padding/gap so slides sit flush and JS width math matches */
  padding: 0;
  gap: 0;
}

.gallery-section .carousel-slide {
  min-width: 100%; /* always one slide per view */
  padding: 0;
  overflow: hidden; /* hide any overflow from images */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fixed height keeps the carousel height stable even if images differ */
  height: 420px; /* desktop default; adjusted in media queries below */
}

.gallery-section .carousel-slide img {
  width: auto; /* allow image to keep natural width while fitting inside box */
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain; /* show whole image without cropping */
  display: block;
  background: var(--bg-dark); /* pad background same as main site background */
  box-shadow: var(--card-shadow); /* subtle shadow for depth */
  border-radius: 6px;
  padding: 8px; /* small inner padding to create a visual 'cushion' */
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .gallery-section .carousel {
    padding: 0 36px;
  }

  .gallery-section .carousel-slide {
    height: 360px;
  }
}

@media (max-width: 768px) {
  /* On tablets and small desktops arrows sit closer and won't cover image */
  .gallery-section .carousel {
    padding: 0 28px;
  }

  .gallery-section .carousel-slide {
    height: 300px;
    min-width: 100%;
  }

  /* set arrow offset via variable so both carousels behave symmetrically */
  .gallery-section .carousel {
    --carousel-arrow-offset: 8px;
  }
}

@media (max-width: 480px) {
  .gallery-section .carousel {
    padding: 0 12px; /* conserve space on small phones */
  }

  .gallery-section .carousel-slide {
    height: 220px; /* small phone height */
  }
  /* adjust arrow variables for small phones so both carousels match */
  .gallery-section .carousel {
    --carousel-arrow-size: 30px;
    --carousel-arrow-font-size: 1rem;
    --carousel-arrow-offset: 6px;
  }
}

/* ========== Gallery Section: View More Button ========== */
.view-more-container {
  text-align: center;
  /* The h2.section-title already has margin-bottom: 40px.
     This creates a nice gap between the title and the button.
     We add margin-bottom here to space the button from the carousel below. */
  margin-bottom: var(--space-lg);
}

.view-more-btn {
  display: inline-block;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: var(--white);
  padding: 12px 24px;
  border-radius: 30px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  min-width: 280px; /* Match the responsive width of the form button */
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.view-more-btn:hover,
.view-more-btn:focus {
  background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  outline: none;
  color: var(--white);
}

/* Responsive adjustments for the button */
@media (max-width: 480px) {
  .view-more-btn {
    min-width: 240px; /* Slightly smaller on very small screens */
    padding: 10px 20px;
  }
}

/* Add top padding for the gallery page section to match other sections */
.gallery-page-section {
  padding-top: var(--space-lg);
}

/* ========== Gallery Page: Filter Buttons ========== */
.filter-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
  gap: var(--space-sm);
  margin-bottom: var(--space-lg); /* Space before the image grid */
}

.filter-btn {
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  /* Default (inactive) state */
  background: transparent;
  border: 2px solid var(--accent-1);
  color: var(--text-on-dark);
}

.filter-btn:hover {
  background: var(--accent-1);
  color: var(--white);
  transform: translateY(-1px);
}

/* Active state for the selected filter */
.filter-btn.active {
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: var(--white);
  border: 2px solid transparent; /* Keep border width for size consistency */
  /* Crucial fix: Clip the background so it doesn't show under the transparent border */
  background-clip: padding-box;
  -webkit-background-clip: padding-box; /* For older Safari versions */

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-btn.active:hover {
  transform: translateY(-2px); /* Slightly more lift on active button */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========== Gallery Page: Image Grid ========== */
/* --- Flexbox Gallery Styles --- */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* Відступ між зображеннями */
  justify-content: center; /* Центруємо елементи, якщо в ряду є вільне місце */
  max-width: 100%; /* За замовчуванням на всю ширину */
  margin: 0 auto; /* Центрування контейнера */
}

.gallery-item {
  flex: 1 1 100%; /* Мобільний: 1 колонка */
  max-width: 100%;
  max-height: 450px; /* Обмежуємо максимальну висоту плитки */
  box-sizing: border-box;
  overflow: hidden; /* Ensures the image corners are rounded */
  border-radius: 8px; /* Легке заокруглення кутів */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Додано для вертикального центрування зображення */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.1); /* Фон для порожнього простору */
}

.gallery-item:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto; /* Дозволяє зображенню зберігати пропорції */
  object-fit: contain; /* Гарантує, що все зображення буде видно */
  transition: transform 0.4s ease-in-out;
}

.gallery-item:hover img {
  transform: scale(1.05); /* Збільшення зображення при наведенні */
}

/* Responsive adjustments for the gallery grid */
/* Планшетна версія: 2 колонки */
@media (min-width: 768px) {
  .gallery-grid {
    max-width: 1400px; /* Розширюємо секцію */
  }
  .gallery-item {
    /* Розрахунок ширини для 2 колонок з урахуванням відступу */
    flex-basis: calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
}

/* Десктопна версія: 3 колонки */
@media (min-width: 992px) {
  .gallery-item {
    /* Розрахунок ширини для 3 колонок з урахуванням відступу */
    flex-basis: calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
  }
}