/* =====================================================
   CORE WEB VITALS CSS OPTIMIZATIONS
   CLS Prevention, Loading States, Performance
   ===================================================== */

/* ===== PREVENT CUMULATIVE LAYOUT SHIFT (CLS) ===== */

/* Image aspect ratio containers - Prevent layout shift */
.hero__bg {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: auto;
  background-color: #2a3f2a; /* Match site colors as placeholder */
}

/* Cabin hero bg must fill container - NOT use auto height */
.cabin-hero__bg {
  object-fit: cover;
  width: 100%;
  height: 100%;
  background-color: #2a3f2a;
}

.cabin-card__image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
  background-color: #f5f5f5;
}

.guide-card__image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  height: auto;
  background-color: #f5f5f5;
}

/* Gallery main image - let styles.css control height (500px), just ensure good object-fit */
.gallery-main img,
.gallery-main__img {
  object-fit: cover;
  width: 100%;
  background-color: #1a1a1a;
  /* Height controlled by styles.css (500px desktop, 280px mobile) - don't override */
}

/* Gallery thumb images - let styles.css control height (70px), just add CLS prevention */
.gallery-thumb img {
  object-fit: cover;
  width: 100%;
  background-color: #333;
  /* Height controlled by styles.css (70px) - don't override with auto */
}

/* Logo sizing - use height-based sizing to let CSS styles.css control display */
.logo__img,
.footer__logo-img {
  /* Let styles.css control height (70px desktop, 50px mobile) */
  /* Width is auto to maintain aspect ratio */
}

/* Reserve space for external content (iframes, embeds) */
.booking-card__widget iframe,
.booking-modal__content iframe {
  min-height: 900px;
  background-color: #fafaf8;
}

/* Font display swap - Prevent FOIT */
@font-face {
  font-display: swap;
}

/* ===== IMAGE LOADING STATES ===== */

/* Blur-up effect for lazy loaded images */
img {
  transition: opacity 0.3s ease, filter 0.3s ease;
}

img:not([src]),
img[data-src] {
  opacity: 0;
}

img.loaded,
img[src]:not([data-src]) {
  opacity: 1;
}

/* Loading placeholder skeleton */
.img-skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Fade-in animation for loaded images */
.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== LCP IMAGE OPTIMIZATION ===== */

/* Ensure LCP images render immediately */
.hero__bg,
.cabin-hero__bg {
  content-visibility: auto;
  contain-intrinsic-size: 100vw 60vh;
}

/* Priority rendering for above-fold content */
.hero {
  content-visibility: auto;
  contain-intrinsic-size: 0 80vh;
}

.cabin-hero {
  content-visibility: visible; /* Must be visible to show absolute positioned children */
}

/* ===== INP OPTIMIZATION - INSTANT FEEDBACK ===== */

/* Instant press feedback */
.btn,
button,
a,
.nav__link,
.accordion__header,
.gallery-thumb,
.cabin-card,
.guide-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Active state feedback (immediate) */
.btn:active,
button:active,
.nav__link:active,
.accordion__header:active,
.gallery-thumb:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* Hardware acceleration for animations */
.btn,
.nav__dropdown,
.gallery-main img,
.gallery-lightbox__image,
.accordion__content {
  will-change: transform, opacity;
}

/* Reduce animation work after initial paint */
.btn,
.gallery-main img {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== REDUCED MOTION PREFERENCES ===== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .img-skeleton {
    animation: none;
    background: #f0f0f0;
  }
}

/* ===== LOW BANDWIDTH MODE ===== */

.low-bandwidth img {
  filter: grayscale(20%);
}

.low-bandwidth .hero__bg,
.low-bandwidth .cabin-hero__bg {
  filter: blur(0);
}

/* ===== CONTENT VISIBILITY FOR BELOW-FOLD ===== */

/* Lazy render below-fold sections */
.testimonials,
.guide-section,
.footer,
.cabin-faq,
.related-cabins {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* ===== SCROLL PERFORMANCE ===== */

/* Gallery thumbs - allow proper grid layout, just optimize scrolling */
.gallery-thumbs {
  -webkit-overflow-scrolling: touch;
  contain: layout style; /* Less strict containment to allow proper sizing */
}

.gallery-thumb {
  /* Removed scroll-snap as gallery is a grid, not a horizontal scroller */
}

/* Smooth scrolling container */
.nav__menu,
.testimonials-slider {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ===== FONT LOADING OPTIMIZATION ===== */

/* Font fallback stack with size adjustment */
.font-loading body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.font-loading h1,
.font-loading h2,
.font-loading h3,
.font-loading h4 {
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -0.01em;
}

/* Fonts loaded */
.fonts-loaded body {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.fonts-loaded h1,
.fonts-loaded h2,
.fonts-loaded h3,
.fonts-loaded h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ===== CRITICAL ABOVE-THE-FOLD STYLES ===== */

/* These styles ensure immediate rendering of hero area */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  contain: layout style;
}

.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Cabin hero uses absolute positioning for children - no flex needed */
.cabin-hero {
  position: relative;
  min-height: 70vh;
  overflow: hidden;
  display: block;
}

/* ===== INTERACTIVE ELEMENT OPTIMIZATION ===== */

/* Ensure clickable areas are large enough (44x44 minimum) */
.nav__link,
.btn--sm {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gallery-nav {
  min-width: 44px;
  min-height: 44px;
}

/* ===== FORM INPUT OPTIMIZATION ===== */

input,
textarea,
select {
  font-size: 16px; /* Prevent iOS zoom */
}

/* Input validation states */
input.valid {
  border-color: var(--forest-green);
}

input.invalid {
  border-color: #dc3545;
}

.form-group.focused label {
  color: var(--forest-green);
}

/* ===== PAINT CONTAINMENT ===== */

/* Isolate sections to prevent full-page repaints */
.section,
.cabin-card,
.guide-card,
.testimonial-card,
.benefit-card {
  contain: content;
}

/* ===== STICKY ELEMENTS OPTIMIZATION ===== */

.sticky-book-bar,
.sticky-contact-btn {
  contain: layout style paint;
  will-change: transform;
}

/* ===== LIGHTBOX OPTIMIZATION ===== */

.gallery-lightbox {
  contain: strict;
}

.gallery-lightbox__image {
  will-change: opacity, transform;
  contain: paint;
}

/* ===== THIRD-PARTY EMBED CONTAINMENT ===== */

iframe {
  contain: strict;
  border: 0;
}

/* ===== ADDITIONAL CLS PREVENTION ===== */

/* Reserve exact space for newsletter form */
.newsletter__form {
  min-height: 56px;
  display: flex;
  gap: 0.5rem;
}

.newsletter__input {
  min-height: 48px;
}

.newsletter__btn {
  min-height: 48px;
  white-space: nowrap;
}

/* Prevent CLS from dynamic content loading */
.hero__content {
  min-height: 300px;
}

.cabin-hero__content {
  min-height: 150px;
}

/* Search widget space reservation */
.search-widget {
  min-height: 70px;
}

.hero__search {
  min-height: 100px;
}

/* Cabin cards consistent sizing */
.cabin-card {
  min-height: 420px;
}

.cabin-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #f0f0f0;
}

.cabin-card__content {
  min-height: 160px;
}

/* Guide cards consistent sizing */
.guide-card {
  min-height: 200px;
}

.guide-card--featured {
  min-height: 350px;
}

/* Testimonials consistent sizing */
.testimonial-card {
  min-height: 280px;
}

/* Benefit cards consistent sizing */
.benefit-card {
  min-height: 200px;
}

/* Amenity cards consistent sizing */
.amenity-card {
  min-height: 80px;
}

/* Navigation dropdown space */
.nav__dropdown {
  min-width: 180px;
}

/* Footer elements - let styles.css control logo sizing */
.footer__logo-img {
  object-fit: contain;
}

/* Button minimum sizes to prevent text reflow */
.btn {
  min-height: 44px;
  padding: 0.75rem 1.5rem;
}

.btn--lg {
  min-height: 52px;
  padding: 1rem 2rem;
}

.btn--sm {
  min-height: 36px;
  padding: 0.5rem 1rem;
}

/* Form elements consistent height */
.form-group input,
.form-group textarea,
.form-group select {
  min-height: 48px;
}

/* Accordion items */
.accordion__header {
  min-height: 60px;
}

/* Sticky bar fixed height */
.sticky-book-bar {
  height: 64px;
}

/* Chat/Contact button - small icon on mobile, larger with text on desktop */
.sticky-contact-btn {
  min-height: 44px; /* Touch target accessibility minimum */
}

/* Gallery consistent sizing */
.gallery-main {
  aspect-ratio: 4 / 3;
  background-color: #1a1a1a;
}

/* Gallery thumbs sizing - match styles.css grid layout expectations */
.gallery-thumbs {
  min-height: 80px;
  /* Allow height to expand based on content - remove fixed height */
}

/* Booking widget container */
.booking-card {
  min-height: 800px;
}

/* Section headers consistent spacing */
.section-header {
  min-height: 120px;
}

/* Breadcrumb space */
.cabin-hero__breadcrumb {
  min-height: 24px;
}

/* Meta items space */
.cabin-hero__meta {
  min-height: 32px;
}

/* Prevent font swap causing CLS */
.section-header__title {
  min-height: 1.2em;
}

h1, .hero__title {
  min-height: 1.1em;
}

h2 {
  min-height: 1.2em;
}

/* Dynamic badge space */
.cabin-card__badge,
.hero__badge,
.section-badge {
  min-height: 24px;
}

/* ===== PRINT OPTIMIZATION ===== */

@media print {
  .header,
  .footer,
  .sticky-book-bar,
  .sticky-contact-btn,
  .booking-modal,
  .gallery-lightbox,
  nav {
    display: none !important;
  }
  
  img {
    break-inside: avoid;
    max-width: 100% !important;
  }
  
  .cabin-gallery {
    break-inside: avoid;
  }
}