/* ============================================================
   Compatibility layer: Maps HTML class names to BEM CSS styles
   ============================================================ */

/* ── Navigation ── */
.nav-container { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; flex-direction: column; text-decoration: none; gap: 0; }
.logo-text { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-white); letter-spacing: 0.15em; line-height: 1; }
.logo-sub { font-family: var(--font-body); font-size: 0.6rem; color: var(--color-gold); letter-spacing: 0.4em; text-transform: uppercase; }
.navbar.scrolled .logo-text { color: var(--color-white); }
.nav-links { display: flex; list-style: none; gap: 2rem; margin: 0; padding: 0; align-items: center; }
.nav-links li a { color: rgba(255,255,255,0.85); text-decoration: none; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.03em; transition: color 0.3s; position: relative; }
.nav-links li a:hover, .nav-links li a.active { color: var(--color-gold); }
.nav-links li a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--color-gold); transition: width 0.3s; }
.nav-links li a:hover::after, .nav-links li a.active::after { width: 100%; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--color-white); margin: 5px 0; transition: all 0.3s; }
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Hero ── */
.hero-slides { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease-in-out; }
.slide.active { opacity: 1; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(26,60,52,0.3) 0%, rgba(26,60,52,0.55) 50%, rgba(26,26,26,0.7) 100%); z-index: 2; }
.hero-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 3; padding: 0 var(--space-xl); }
.hero-label { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-gold); letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: var(--space-md); }
.hero-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 8vw, 5.5rem); color: var(--color-white); font-weight: 700; letter-spacing: 0.05em; margin-bottom: var(--space-md); line-height: 1.1; }
.hero-subtitle { font-family: var(--font-subheading); font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: rgba(255,255,255,0.9); font-weight: 300; letter-spacing: 0.1em; margin-bottom: var(--space-sm); }
.hero-desc { font-family: var(--font-body); font-size: 1rem; color: rgba(255,255,255,0.7); max-width: 600px; margin-bottom: var(--space-xl); line-height: 1.6; }
.hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; }
.hero-scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-scroll-indicator span { font-family: var(--font-body); font-size: 0.7rem; color: rgba(255,255,255,0.5); letter-spacing: 0.2em; text-transform: uppercase; }
.scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--color-gold), transparent); animation: pulse 2s infinite; }
.slide-indicators { position: absolute; bottom: 2rem; right: 2rem; z-index: 3; display: flex; gap: 8px; }
.slide-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); background: transparent; cursor: pointer; transition: all 0.3s; padding: 0; }
.slide-dot.active { background: var(--color-gold); border-color: var(--color-gold); width: 24px; border-radius: 5px; }

/* ── About Section ── */
.about-section { position: relative; }
.about-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3xl); align-items: center; }
.about-image { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.about-image img { width: 100%; height: auto; border-radius: var(--radius-lg); object-fit: cover; }
.about-experience-badge { position: absolute; bottom: var(--space-lg); right: var(--space-lg); background: var(--color-green-deep); color: var(--color-white); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-lg); }
.badge-number { display: block; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--color-gold); }
.badge-text { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.about-content { }
.about-text { font-size: 1rem; line-height: 1.8; color: var(--color-text); margin-bottom: var(--space-md); }
.about-features { list-style: none; padding: 0; margin-top: var(--space-xl); }
.about-features li { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); align-items: flex-start; }
.feature-icon { color: var(--color-gold); font-size: 0.5rem; margin-top: 6px; }
.about-features li strong { display: block; font-size: 1rem; color: var(--color-heading); margin-bottom: 2px; }
.about-features li span { font-size: 0.875rem; color: var(--color-text-light); }

/* ── Stats Section ── */
.stats-section { background: var(--color-green-deep); padding: var(--space-3xl) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); text-align: center; }
.stat-item { }
.stat-number { display: block; font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--color-gold); }
.stat-label { font-family: var(--font-body); font-size: 0.875rem; color: rgba(255,255,255,0.7); letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Communities Section ── */
.communities-section { background: var(--color-bg-warm); }
.section-header { text-align: center; margin-bottom: var(--space-3xl); }
.section-desc { font-size: 1.05rem; color: var(--color-text-light); max-width: 600px; margin: var(--space-md) auto 0; line-height: 1.7; }
.communities-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
.community-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: transform 0.4s, box-shadow 0.4s; }
.community-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.community-card-image { position: relative; overflow: hidden; height: 260px; }
.community-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.community-card:hover .community-card-image img { transform: scale(1.08); }
.community-card-location { position: absolute; bottom: var(--space-md); left: var(--space-md); background: rgba(26,60,52,0.8); backdrop-filter: blur(8px); color: var(--color-white); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 0.8rem; display: flex; align-items: center; gap: 6px; }
.community-card-content { padding: var(--space-xl); }
.community-card-content h3 { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-heading); margin-bottom: var(--space-sm); }
.community-card-content p { font-size: 0.95rem; color: var(--color-text-light); line-height: 1.6; margin-bottom: var(--space-md); }
.community-card-stats { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.community-card-stats span { font-size: 0.8rem; color: var(--color-green-deep); background: var(--color-green-pale); padding: 4px 10px; border-radius: var(--radius-full); font-weight: 500; }
.community-card-link { display: inline-flex; align-items: center; gap: 8px; color: var(--color-gold-dark); font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: gap 0.3s, color 0.3s; }
.community-card-link:hover { gap: 12px; color: var(--color-green-deep); }

/* ── Villa Cards (simple class names) ── */
.villa-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
.villa-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: transform 0.4s, box-shadow 0.4s; }
.villa-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.villa-card-link { text-decoration: none; color: inherit; display: block; }
.villa-card-image { position: relative; overflow: hidden; height: 220px; }
.villa-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.villa-card:hover .villa-card-image img { transform: scale(1.06); }
.villa-card-badge { position: absolute; top: var(--space-md); left: var(--space-md); background: var(--color-green-deep); color: var(--color-gold); padding: 4px 12px; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; }
.villa-card-content { padding: var(--space-lg); }
.villa-card-location { font-size: 0.8rem; color: var(--color-gold-dark); font-weight: 500; letter-spacing: 0.05em; margin-bottom: 4px; }
.villa-card-title { font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-heading); margin-bottom: 6px; }
.villa-card-desc { font-size: 0.875rem; color: var(--color-text-light); line-height: 1.5; margin-bottom: var(--space-md); }
.villa-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.villa-card-rating { display: flex; align-items: center; gap: 6px; }
.villa-card-rating .stars { color: var(--color-gold); font-size: 0.8rem; }
.rating-text { font-size: 0.8rem; color: var(--color-text-light); }
.villa-card-beds { font-size: 0.8rem; color: var(--color-text-light); font-weight: 500; }

/* ── Featured Section ── */
.featured-section { background: var(--color-white); }

/* ── Gallery Section ── */
.gallery-section { background: var(--color-bg-warm); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.gallery-item { border-radius: var(--radius-md); overflow: hidden; cursor: pointer; position: relative; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; display: block; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item--large { grid-column: span 2; }
.gallery-item--large img { height: 300px; }
.gallery-img { aspect-ratio: 4/3; }

/* ── Testimonials Section ── */
.testimonials-section { background: var(--color-green-deep); padding: var(--space-4xl) 0; position: relative; overflow: hidden; }
.testimonials-section::before { content: ''; position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(201,169,110,0.08) 0%, transparent 70%); border-radius: 50%; }
.testimonial-slider { position: relative; max-width: 700px; margin: 0 auto; }
.testimonial-track { position: relative; overflow: hidden; }
.testimonial-slide { display: none; text-align: center; padding: var(--space-xl) 0; }
.testimonial-slide.active { display: block; }
.testimonial-quote { font-family: var(--font-heading); font-size: 4rem; color: var(--color-gold); line-height: 1; margin-bottom: var(--space-sm); }
.testimonial-text { font-family: var(--font-subheading); font-size: 1.15rem; color: rgba(255,255,255,0.85); line-height: 1.8; font-style: italic; margin-bottom: var(--space-xl); }
.testimonial-author { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); }
.testimonial-author-info { text-align: left; }
.testimonial-author-info strong { color: var(--color-white); font-size: 1rem; display: block; }
.testimonial-author-info span { color: rgba(255,255,255,0.5); font-size: 0.85rem; }
.testimonial-rating { color: var(--color-gold); }
.testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-xl); }
.testimonial-dots button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; cursor: pointer; transition: all 0.3s; padding: 0; }
.testimonial-dots button.active { background: var(--color-gold); border-color: var(--color-gold); width: 24px; border-radius: 5px; }

/* ── Host Section ── */
.host-section { background: var(--color-bg-warm); }
.host-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3xl); align-items: center; }
.host-image { position: relative; text-align: center; }
.host-avatar { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 4px solid var(--color-gold); box-shadow: var(--shadow-xl); }
.host-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--color-green-deep); color: var(--color-gold); padding: 6px 16px; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600; margin-top: var(--space-md); }
.host-content p { font-size: 1rem; line-height: 1.8; color: var(--color-text); margin-bottom: var(--space-md); }
.host-stats { display: flex; gap: var(--space-xl); margin-top: var(--space-xl); }
.host-stat { text-align: center; }
.host-stat strong { display: block; font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-green-deep); }
.host-stat span { font-size: 0.8rem; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.1em; }

/* ── Footer (simple class names) ── */
.footer { background: var(--color-green-deep); color: rgba(255,255,255,0.8); padding-top: 4px; }
.footer-accent { height: 4px; background: linear-gradient(90deg, var(--color-green-medium), var(--color-gold), var(--color-ocean)); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); padding: var(--space-3xl) 0; }
.footer-col h4 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-white); margin-bottom: var(--space-lg); position: relative; padding-bottom: var(--space-sm); }
.footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: var(--color-gold); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: var(--space-sm); }
.footer-col ul li a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.9rem; transition: color 0.3s; }
.footer-col ul li a:hover { color: var(--color-gold); }
.footer-logo { margin-bottom: var(--space-md); }
.footer-logo .logo-text { font-size: 1.8rem; }
.footer-logo .logo-sub { font-size: 0.7rem; }
.footer-desc { font-size: 0.9rem; line-height: 1.7; color: rgba(255,255,255,0.6); }
.footer-contact li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.footer-contact svg { flex-shrink: 0; opacity: 0.6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: var(--space-lg) 0; text-align: center; }
.footer-bottom p { font-size: 0.85rem; color: rgba(255,255,255,0.4); margin: 0; }

/* ── Community Hero (for sub pages) ── */
.community-hero { position: relative; height: 60vh; min-height: 400px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.community-hero__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.community-hero__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(26,60,52,0.3) 0%, rgba(26,60,52,0.6) 50%, rgba(26,26,26,0.75) 100%); z-index: 1; }
.community-hero__content { position: relative; z-index: 2; text-align: center; color: white; padding: 0 var(--space-xl); }
.community-hero__breadcrumb { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-bottom: var(--space-md); }
.community-hero__breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.community-hero__breadcrumb a:hover { color: var(--color-gold); }
.community-hero__breadcrumb .separator { margin: 0 8px; }
.community-hero__title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.5rem); color: var(--color-white); letter-spacing: 0.05em; margin-bottom: var(--space-sm); }
.community-hero__tagline { font-family: var(--font-subheading); font-size: 1.2rem; color: var(--color-gold); letter-spacing: 0.1em; }

/* ── Community Description ── */
.community-description { }
.community-description__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3xl); }
.community-description__text p { font-size: 1rem; line-height: 1.8; color: var(--color-text); }
.community-description__highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.community-highlight { background: var(--color-white); padding: var(--space-lg); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align: center; transition: transform 0.3s, box-shadow 0.3s; }
.community-highlight:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.community-highlight__icon { width: 48px; height: 48px; background: var(--color-green-pale); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-sm); }
.community-highlight__icon svg { color: var(--color-green-deep); }
.community-highlight__text { font-size: 0.9rem; font-weight: 500; color: var(--color-heading); }

/* ── Back to Top ── */
.back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; background: var(--color-green-deep); color: var(--color-white); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 999; box-shadow: var(--shadow-md); }
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--color-gold); transform: translateY(-3px); }

/* ── Animations for fade-in / slide-up ── */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in.animate { opacity: 1; transform: translateY(0); }
.slide-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.slide-up.animate { opacity: 1; transform: translateY(0); }

/* ── Lightbox ── */
.lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 10000; display: none; align-items: center; justify-content: center; }
.lightbox-overlay.active { display: flex; }
.lightbox-overlay img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius-md); }
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: rgba(255,255,255,0.15); border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 12px 16px; border-radius: var(--radius-sm); transition: background 0.3s; }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.3); }

/* ── Language Switcher ── */
.lang-switch { background: rgba(255,255,255,0.15); padding: 4px 12px !important; border-radius: var(--radius-full); font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.05em; backdrop-filter: blur(4px); transition: all 0.3s; }
.lang-switch:hover { background: var(--color-gold) !important; color: var(--color-white) !important; }
.navbar.scrolled .lang-switch { background: rgba(26,60,52,0.1); }
.navbar.scrolled .lang-switch:hover { background: var(--color-gold); }
a.navbar__link.lang-switch { background: rgba(255,255,255,0.15); padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; }
a.navbar__link.lang-switch:hover { background: var(--color-gold); color: var(--color-white); }

/* ── Responsive ── */
@media (min-width: 768px) {
  .about-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .communities-grid { grid-template-columns: repeat(2, 1fr); }
  .villa-grid { grid-template-columns: repeat(2, 1fr); }
  .host-grid { grid-template-columns: 250px 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .community-description__grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery-item--large { grid-column: span 2; }
}

@media (min-width: 1024px) {
  .communities-grid { grid-template-columns: repeat(3, 1fr); }
  .villa-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .community-description__highlights { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1023px) {
  .nav-links { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26,60,52,0.97); flex-direction: column; align-items: center; justify-content: center; gap: 2rem; z-index: 1000; }
  .nav-links.active { display: flex; }
  .nav-links li a { font-size: 1.2rem; color: var(--color-white); }
  .menu-toggle { display: block; }
}