/**
 * Eterno Real Estate - Responsive & Internationalization Styles
 *
 * Breakpoints:
 * - Desktop: > 1280px (default)
 * - Laptop: 1024px - 1280px
 * - Tablet: 768px - 1024px
 * - Mobile: < 768px
 * - Small Mobile: < 480px
 */


/* ═══════════════════════════════════════════════════════════════════════════════
   LARGE DESKTOP (1280px+)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1281px) {
  /* Max width containers for ultra-wide screens */
  .container-luxury {
    max-width: var(--container-2xl);
    margin-left: auto;
    margin-right: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   LAPTOP (1024px - 1280px)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1280px) {
  /* Footer: 2 columns on laptop */
  footer .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Service cards: reduce gap */
  .services-grid {
    gap: var(--spacing-4);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   TABLET (768px - 1024px)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Hero adjustments */
  .hero-title,
  h1.font-display {
    font-size: var(--font-size-5xl);
  }

  /* Service card large: stack vertically */
  .service-card-large,
  .flex.lg\:flex-row {
    flex-direction: column !important;
  }

  .flex.lg\:flex-row-reverse {
    flex-direction: column !important;
  }

  /* Grid adjustments */
  .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr;
  }

  /* Value props: 2 columns on tablet */
  .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stats section */
  .counter-stat .counter-number {
    font-size: var(--font-size-4xl);
  }

  /* Contact page: stack layout */
  .grid.lg\:grid-cols-2.gap-0 {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE (< 768px)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Container padding */
  .max-w-7xl,
  .max-w-6xl,
  .max-w-4xl {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  /* Navigation */
  nav .px-6 {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  /* Hero section */
  .hero-title,
  h1.font-display {
    font-size: var(--font-size-4xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

  /* Hero CTA: stack vertically */
  .hero-cta,
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta a,
  .hero-cta-group a,
  .btn-gold-shine,
  .btn-outline-gold {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Section headers */
  .section-header h2,
  h2.font-display {
    font-size: var(--font-size-3xl);
  }

  /* Gold tag: smaller on mobile */
  .section-tag .tag-line,
  .hero-tag .w-10 {
    width: 24px;
  }

  /* Value cards: single column */
  .grid.md\:grid-cols-2,
  .grid.lg\:grid-cols-4 {
    grid-template-columns: 1fr;
  }

  /* Property grid: single column */
  .grid.md\:grid-cols-2.xl\:grid-cols-3 {
    grid-template-columns: 1fr;
  }

  /* Stats: 2 columns on mobile */
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
  }

  .counter-stat .counter-number {
    font-size: var(--font-size-3xl);
  }

  .counter-stat .counter-suffix {
    font-size: var(--font-size-xl);
  }

  /* Footer: single column */
  footer .grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  footer .footer-brand,
  footer .lg\:col-span-1 {
    max-width: none;
    margin: 0 auto;
  }

  /* Footer social links: centered */
  footer .flex.gap-3 {
    justify-content: center;
  }

  /* Footer newsletter form */
  footer form.flex {
    flex-direction: column;
  }

  /* Contact info cards: stack */
  .contact-info-card,
  .flex.gap-4.items-start {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Filter sidebar: full width modal */
  .filter-sidebar {
    width: 100%;
    max-width: none;
  }

  /* Property card content */
  .property-card .p-6 {
    padding: var(--spacing-4);
  }

  /* Scroll indicator: hide on mobile */
  .scroll-indicator {
    display: none;
  }

  /* Animations: reduce motion distance */
  .reveal {
    transform: translateY(20px);
  }

  .reveal.reveal-left,
  .reveal.reveal-right {
    transform: translateY(20px);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SMALL MOBILE (< 480px)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Hero: tighter spacing */
  .hero-title,
  h1.font-display {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-4);
  }

  /* Section padding */
  section.py-24 {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
  }

  section.py-20 {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
  }

  /* Card padding */
  .p-8,
  .p-10 {
    padding: var(--spacing-6);
  }

  /* Property specs: wrap */
  .property-specs,
  .flex.justify-between.text-sm {
    flex-wrap: wrap;
    gap: var(--spacing-3);
  }

  /* Stats: smaller numbers */
  .counter-stat .counter-number {
    font-size: var(--font-size-2xl);
  }

  .counter-stat .counter-suffix {
    font-size: var(--font-size-lg);
  }

  /* Footer bottom: stack */
  .footer-bottom,
  footer .flex.justify-between {
    flex-direction: column;
    gap: var(--spacing-4);
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE MENU ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Mobile menu transitions */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-out-expo),
              opacity 0.3s var(--ease-out);
  opacity: 0;
}

#mobile-menu:not(.hidden) {
  max-height: 400px;
  opacity: 1;
}

/* Mobile menu link hover */
#mobile-menu a {
  position: relative;
  padding-left: var(--spacing-4);
  border-left: 2px solid transparent;
  transition: all 0.2s var(--ease-out);
}

#mobile-menu a:hover {
  padding-left: var(--spacing-6);
  border-left-color: var(--color-gold-primary);
}

/* RTL mobile menu */
[dir="rtl"] #mobile-menu a {
  padding-left: 0;
  padding-right: var(--spacing-4);
  border-left: none;
  border-right: 2px solid transparent;
}

[dir="rtl"] #mobile-menu a:hover {
  padding-left: 0;
  padding-right: var(--spacing-6);
  border-right-color: var(--color-gold-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   RTL (RIGHT-TO-LEFT) SUPPORT
   For Arabic language
   ═══════════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] {
  /* Text alignment */
  text-align: right;
}

/* Navigation underline animation */
[dir="rtl"] .nav-link span.absolute {
  left: auto;
  right: 0;
  background: linear-gradient(to left, var(--color-gold-primary), var(--color-gold-light));
}

/* Gold tag lines */
[dir="rtl"] .hero-tag,
[dir="rtl"] .section-tag,
[dir="rtl"] .flex.items-center.justify-center.gap-4 {
  flex-direction: row-reverse;
}

/* Arrows and directional icons */
[dir="rtl"] [data-lucide="arrow-right"],
[dir="rtl"] [data-lucide="arrow-up-right"],
[dir="rtl"] .link-arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .group-hover\:translate-x-1:hover {
  transform: scaleX(-1) translateX(4px);
}

/* Card arrow indicator */
[dir="rtl"] .card-arrow,
[dir="rtl"] .absolute.top-8.right-8 {
  right: auto;
  left: var(--spacing-8);
}

/* Property badges */
[dir="rtl"] .property-badges,
[dir="rtl"] .absolute.top-4.left-4 {
  left: auto;
  right: var(--spacing-4);
}

/* Favorite button */
[dir="rtl"] .favorite-btn,
[dir="rtl"] button.absolute.top-4.right-4 {
  right: auto;
  left: var(--spacing-4);
}

/* Form labels */
[dir="rtl"] label {
  text-align: right;
}

/* Input icons */
[dir="rtl"] .flex.items-center.gap-1 {
  flex-direction: row-reverse;
}

/* Footer alignment */
[dir="rtl"] footer .grid {
  text-align: right;
}

[dir="rtl"] footer ul {
  padding-right: 0;
}

/* Service cards: reverse image/content on even items */
[dir="rtl"] .flex.lg\:flex-row-reverse {
  flex-direction: row !important;
}

[dir="rtl"] .flex.lg\:flex-row:not(.lg\:flex-row-reverse) {
  flex-direction: row-reverse !important;
}

@media (max-width: 1024px) {
  [dir="rtl"] .flex.lg\:flex-row,
  [dir="rtl"] .flex.lg\:flex-row-reverse {
    flex-direction: column !important;
  }
}

/* Gold line gradient direction */
[dir="rtl"] .w-16.h-px.bg-gradient-to-r {
  background: linear-gradient(to left, var(--color-gold-primary), transparent);
}

/* Scroll indicator position */
[dir="rtl"] .scroll-indicator {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

/* Spec icons */
[dir="rtl"] .spec,
[dir="rtl"] .flex.items-center.gap-1\.5 {
  flex-direction: row-reverse;
}

/* Contact info cards */
[dir="rtl"] .contact-info-card,
[dir="rtl"] .flex.gap-4.items-start {
  flex-direction: row-reverse;
}

[dir="rtl"] .contact-info-card div:last-child {
  text-align: right;
}

@media (max-width: 768px) {
  [dir="rtl"] .contact-info-card {
    flex-direction: column;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   LANGUAGE-SPECIFIC TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Chinese (zh) */
:lang(zh),
[lang="zh"] {
  /* Disable uppercase for Chinese */
  text-transform: none !important;

  /* Adjusted letter spacing for Chinese */
  letter-spacing: 0 !important;
}

:lang(zh) .uppercase,
[lang="zh"] .uppercase,
:lang(zh) .tracking-wider,
[lang="zh"] .tracking-wider,
:lang(zh) .tracking-widest,
[lang="zh"] .tracking-widest,
:lang(zh) .tracking-wide,
[lang="zh"] .tracking-wide {
  text-transform: none;
  letter-spacing: 0;
}

/* Chinese: adjust button text */
:lang(zh) .btn-gold-shine,
:lang(zh) .btn-outline-gold,
:lang(zh) .nav-cta,
:lang(zh) nav a,
[lang="zh"] .btn-gold-shine,
[lang="zh"] .btn-outline-gold,
[lang="zh"] .nav-cta,
[lang="zh"] nav a {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Chinese: tag text */
:lang(zh) .tag-text,
:lang(zh) .text-xs.font-medium.tracking-\[0\.2em\],
[lang="zh"] .tag-text,
[lang="zh"] .text-xs.font-medium.tracking-\[0\.2em\] {
  letter-spacing: 0.1em;
}


/* Arabic (ar) */
:lang(ar),
[lang="ar"] {
  /* Disable uppercase for Arabic */
  text-transform: none !important;

  /* Natural Arabic letter spacing */
  letter-spacing: 0 !important;

  /* Larger line height for Arabic script */
  line-height: 1.8;
}

:lang(ar) .uppercase,
[lang="ar"] .uppercase,
:lang(ar) .tracking-wider,
[lang="ar"] .tracking-wider,
:lang(ar) .tracking-widest,
[lang="ar"] .tracking-widest {
  text-transform: none;
  letter-spacing: 0;
}

/* Arabic: adjust font sizes slightly for readability */
:lang(ar) .text-xs,
[lang="ar"] .text-xs {
  font-size: 0.8125rem; /* 13px instead of 12px */
}

:lang(ar) .text-sm,
[lang="ar"] .text-sm {
  font-size: 0.9375rem; /* 15px instead of 14px */
}

/* Arabic: tag text */
:lang(ar) .tag-text,
[lang="ar"] .tag-text {
  font-size: 0.8125rem;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

@media print {
  /* Hide navigation, footer, chat widget */
  nav,
  footer,
  .chat-widget,
  .scroll-indicator,
  #mobile-menu-btn {
    display: none !important;
  }

  /* Remove backgrounds for printing */
  body,
  main,
  section {
    background: white !important;
    color: black !important;
  }

  /* Remove shadows and effects */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Full width content */
  .max-w-7xl,
  .max-w-6xl,
  .max-w-4xl {
    max-width: 100%;
  }

  /* Ensure text is visible */
  .text-gold,
  .text-\[var\(--color-gold-primary\)\] {
    color: #8B7355 !important;
  }

  /* Show URLs for links */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-gold-primary);
  outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--spacing-4) var(--spacing-6);
  background: var(--color-gold-primary);
  color: var(--color-bg-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  z-index: 9999;
  transition: top 0.2s var(--ease-out);
}

.skip-to-content:focus {
  top: var(--spacing-4);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --color-border-subtle: rgba(255, 255, 255, 0.3);
    --color-border-gold: var(--color-gold-primary);
    --color-text-secondary: #c0c0c0;
  }
}