@import "variables.css";
@import "navigation.css";
@import "sections.css";
@import "gallery.css";

/* --- Bi-directional (RTL) Adjustments --- */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .form-label {
  right: 0;
  left: auto;
}

[dir="rtl"] .stone-spec-row {
  flex-direction: row-reverse;
}

[dir="rtl"] .step-item {
  flex-direction: row; /* Flex items naturally flow, but let's be explicit */
}

/* Custom fonts for Hebrew readability */
[dir="rtl"] {
  --font-display: 'Assistant', sans-serif;
  --font-body: 'Assistant', sans-serif;
  --font-mono: 'Assistant', sans-serif;
}

[dir="rtl"] .display-xl,
[dir="rtl"] .display-lg,
[dir="rtl"] .display-md,
[dir="rtl"] .display-sm,
[dir="rtl"] .stone-name,
[dir="rtl"] .step-title,
[dir="rtl"] .team-name,
[dir="rtl"] .footer-brand {
  font-weight: 700;
}

/* --- Responsive Media Queries (Mobile & Tablet) --- */
@media (max-width: 1024px) {
  .about-grid, .contact-grid, .bespoke-grid {
    gap: 48px;
  }
  
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .about-grid, .contact-grid, .bespoke-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .bespoke-image-container {
    max-width: 500px;
    margin: 0 auto;
  }
  
  .team-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 400px;
    margin: 40px auto 0;
  }
  
  .team-card {
    padding: 32px 20px;
  }
  
  .catalog-tabs {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 8px;
    gap: 8px;
  }
  
  .catalog-tabs::-webkit-scrollbar {
    height: 3px;
  }
  
  .catalog-tabs::-webkit-scrollbar-thumb {
    background-color: var(--color-hairline-strong);
  }
  
  .review-slide {
    padding: 0 16px;
  }
  
  .review-text {
    font-size: 1.25rem;
  }
}

/* --- Thin Scrollbar (Desktop only, visible only on scroll) --- */
@media (min-width: 1025px) {
  ::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
  }
  
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 9999px;
    transition: background-color 0.3s ease;
  }
  
  body.is-scrolling ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
  }
  
  body.is-scrolling ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.45);
  }
}