/* ==========================================================================
   CasaLuma — Responsive Stylesheet
   ========================================================================== */

/* ===== Large Desktop (1400px+) ===== */
@media (max-width:1400px){:root{--space-2xl:6rem}}

/* ===== Desktop (1200px) ===== */
@media (max-width:1200px){
  :root{--space-2xl:5rem;--space-xl:4rem}
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .facilities-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:2fr 1fr 1fr;gap:2rem}
}

/* ===== Laptop (1024px) ===== */
@media (max-width:1024px){
  :root{--space-2xl:4rem;--space-xl:3rem}
  .nav-menu{display:none}
  .hamburger{display:flex}
  .nav-actions .btn{display:none}
  .about-grid{grid-template-columns:1fr;gap:var(--space-lg)}
  .about-images{max-width:700px;margin:0 auto}
  .about-images .img-main{height:450px}
  .about-images .img-sub{height:220px}
  .experience-row{grid-template-columns:1fr;gap:var(--space-md)}
  .experience-row.reverse .experience-image{order:0}
  .experience-image img{height:350px}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .room-card{flex:0 0 calc(50% - 1rem);min-width:280px;max-width:400px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .video-grid{grid-template-columns:repeat(3,1fr)}
  .location-grid{grid-template-columns:1fr}
  .location-map{min-height:350px}
  .room-detail-grid{grid-template-columns:1fr}
  .room-sidebar{position:static}
  .room-gallery-grid{grid-template-columns:repeat(2,1fr)}
  .room-gallery-grid .gallery-item:first-child{grid-column:span 2;grid-row:span 1}
  .other-rooms-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:2fr 1fr 1fr;gap:2rem}
}

/* ===== Tablet (768px) ===== */
@media (max-width:768px){
  :root{--space-2xl:3.5rem;--space-xl:2.5rem;--space-lg:2rem}
  h1{font-size:clamp(2rem,8vw,3rem)}
  h2{font-size:clamp(1.75rem,6vw,2.5rem)}

  /* ── Full-width Header: logo left, hamburger right ── */
  .header{padding:.5rem 0}
  .nav-wrapper{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0 1.25rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
    height:56px;
  }
  .logo{display:flex;align-items:center}
  .logo-img{height:78px}
  .nav-menu{display:none}
  /* hide Book Now button, keep hamburger visible */
  .nav-actions .btn{display:none}
  .nav-actions{display:flex;align-items:center;flex-shrink:0}
  .hamburger{
    display:flex;
    width:36px;
    height:36px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    flex-shrink:0;
  }

  /* Shorter hero on mobile */
  .hero{height:100vh;min-height:420px}
  .hero-subtitle{font-size:.85rem;letter-spacing:.2em}
  .hero-buttons{flex-direction:column;align-items:center}
  .hero-buttons .btn{width:100%;max-width:280px}

  /* Taller video cards on mobile */
  .video-card{aspect-ratio:9/18}

  .about-features{grid-template-columns:1fr;gap:1rem}
  .why-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .why-card{padding:2rem 1rem}
  .facilities-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .reviews-grid{grid-template-columns:1fr}
  .room-card{flex:0 0 100%;max-width:400px}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:250px}
  .gallery-item.tall,.gallery-item.wide{grid-row:span 1;grid-column:span 1}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .booking-form{grid-template-columns:1fr}
  .form-group.full,.booking-submit{grid-column:span 1}
  .contact-info{grid-template-columns:1fr;gap:1.5rem}
  .faq-question{padding:1.25rem 1.5rem;font-size:1.1rem}
  .faq-answer p{padding:0 1.5rem 1.25rem}
  /* Menu + Tarrif: tablet */
  .menu-hero-content h1{font-size:2.5rem}
  .menu-section{padding:60px 0}
  .menu-section-header h2{font-size:2rem}
  .menu-grid{grid-template-columns:1fr;max-width:500px}
  .menu-subcategory-title{font-size:1.4rem}
  .menu-download-content h2{font-size:2rem}
  .tarrif-hero-content h1{font-size:2.5rem}
  .tarrif-hero-content p{font-size:1rem}
  .tarrif-section{padding:60px 0}
  .tarrif-cards-double{flex-direction:column;align-items:center}
  /* Activities: tablet horizontal scroll */
  .accessibility-grid{grid-template-columns:1fr;gap:1.5rem}
  .accessibility-card{padding:2rem 1.5rem}
  .accessibility-cta{padding:2.5rem 1.5rem}
  .accessibility-cta h3{font-size:1.8rem}
  .activities{padding:80px 0}
  .activities-cards{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;height:auto}
  .activity-card{flex:0 0 80%;scroll-snap-align:start;height:400px;border-radius:10px}
  .activity-card+.activity-card{margin-left:1rem}
  .activity-card.active{flex:0 0 80%}
  .activity-card-collapsed{display:none}
  .activity-card-content{opacity:1;transform:translateY(0);position:relative;height:auto;padding:2rem 1.5rem}
  .activity-title{font-size:1.5rem}
  .activity-desc{font-size:.9rem}
  /* Footer: logo centered, quick links + villas side by side */
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-brand{text-align:center;display:flex;flex-direction:column;align-items:center}
  .footer-brand .logo{margin:0 auto}
  .footer-brand p{text-align:center}
  .footer-brand .footer-social{justify-content:center}
  .footer-links-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
  .footer-bottom{flex-direction:column;text-align:center}
  .room-gallery-grid{grid-template-columns:1fr;grid-auto-rows:250px}
  .room-gallery-grid .gallery-item:first-child{grid-column:span 1;grid-row:span 1}
  .other-rooms-grid{grid-template-columns:1fr}
  .room-amenities-list{grid-template-columns:1fr}
  .lightbox-close{top:1rem;right:1rem}
  .lightbox-nav{width:40px;height:40px;font-size:1.2rem}
  .lightbox-prev{left:.5rem}.lightbox-next{right:.5rem}
}

/* ===== Mobile Large (480px) ===== */
@media (max-width:480px){
  :root{--space-2xl:3rem;--space-xl:2rem;--space-lg:1.5rem}
  .container{width:92%}
  h1{font-size:2rem}
  h2{font-size:1.75rem}
  .hero{height:60vh;min-height:360px}
  .hero-content h1{font-size:1.75rem}
  .hero-subtitle{font-size:.75rem}
  .btn{padding:.8rem 1.8rem;font-size:.75rem}
  .about-images{grid-template-columns:1fr}
  .about-images .img-main{grid-row:span 1;height:250px}
  .about-images .img-sub{height:200px}
  .why-grid{grid-template-columns:1fr}
  .facilities-grid{grid-template-columns:1fr}
  .gallery-filters{gap:.5rem}
  .gallery-filter{padding:.4rem 1rem;font-size:.72rem}
  .booking-card{padding:1.5rem}
  .room-hero{height:50vh;min-height:350px}
  .room-info-card{padding:1.5rem}
  .room-price .price-value{font-size:2rem}
  .mobile-nav{width:280px}
  /* Menu + Tarrif: mobile */
  .menu-hero{height:40vh;min-height:280px}
  .menu-hero-content h1{font-size:2rem}
  .menu-hero-content p{font-size:.95rem}
  .menu-section{padding:50px 0}
  .menu-section-header h2{font-size:1.8rem}
  .menu-section-number{font-size:.85rem}
  .menu-item-name{font-size:.85rem}
  .menu-subcategory-title{font-size:1.3rem}
  .menu-download{padding:60px 0}
  .menu-download-content h2{font-size:1.8rem}
  .tarrif-hero{height:45vh;min-height:300px}
  .tarrif-hero-content h1{font-size:2rem}
  .tarrif-hero-content p{font-size:.9rem}
  .tarrif-hero-content{padding:0 1.5rem 2rem 1.5rem}
  .tarrif-section{padding:50px 0}
  .tarrif-table{display:block}
  .tarrif-table thead{display:none}
  .tarrif-table tbody tr{display:block;margin-bottom:1rem;border:1px solid rgba(200,169,106,.2);border-radius:8px}
  .tarrif-table tbody td{display:flex;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #222}
  .tarrif-table tbody td:last-child{border-bottom:none}
  .tarrif-table tbody td::before{content:attr(data-label);font-family:var(--font-body);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#888}
  .tarrif-card{max-width:none;width:100%}
  .tarrif-time-value{font-size:1.6rem}
  .tarrif-cta{flex-direction:column;align-items:center}
  .tarrif-cta .btn{width:100%;max-width:280px}
  /* Activities: mobile one card per row */
  .accessibility-card{flex-direction:column;gap:1rem;padding:1.75rem 1.25rem}
  .accessibility-icon{width:48px;height:48px}
  .accessibility-icon svg{width:24px;height:24px}
  .accessibility-card-body h3{font-size:1.3rem}
  .accessibility-cta h3{font-size:1.5rem}
  .accessibility-tagline{font-size:1rem}
  .activities-cards{flex-direction:column;gap:1rem;height:auto}
  .activity-card{flex:0 0 auto;width:100%;height:300px;border-radius:10px}
  .activity-card.active{flex:0 0 auto}
  .activity-card-collapsed{display:none}
  .activity-card-content{opacity:1;transform:translateY(0);position:relative;height:auto;padding:2rem 1.5rem}
  .activity-title{font-size:1.4rem}
  .activity-desc{font-size:.9rem}
  /* keep 2 columns on medium phones */
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .video-card{aspect-ratio:9/18}
}

/* ===== Mobile Small (375px) ===== */
@media (max-width:375px){
  .container{width:94%}
  h1{font-size:1.6rem}
  h2{font-size:1.5rem}
  .hero-content h1{font-size:1.5rem}
  .hero-subtitle{font-size:.7rem;letter-spacing:.15em}
  .btn{padding:.7rem 1.5rem;font-size:.7rem}
  .section-header .eyebrow{font-size:.72rem}
  .faq-question{font-size:1rem;padding:1rem 1.25rem}
  .video-grid{grid-template-columns:1fr}
  .video-card{aspect-ratio:9/18}
}

/* ===== Landscape Mobile ===== */
@media (max-height:500px) and (orientation:landscape){
  .hero{height:100vh;min-height:400px}
  .hero-content{padding:1rem}
  .hero-content h1{font-size:1.5rem}
  .hero-subtitle{font-size:.7rem;margin-bottom:1rem}
  .hero-buttons{gap:.5rem}
}

/* ===== Print ===== */
@media print{
  .header,.hamburger,.mobile-nav,.overlay,.hero-video,.room-hero-video,.video-card video,.preloader{display:none!important}
  body{color:#000;background:#fff}
}