/* Sun Gate Tours — responsive.css */

@media(max-width:1050px) {
  .features {
    grid-template-columns:repeat(2,1fr);
  }
  .trip-page {
    grid-template-columns:1fr;
  }
  .trip-side {
    display:none;
  }
  .review-list {
    grid-template-columns:repeat(2,1fr);
  }
  .trip-card {
    flex-basis:calc((100% - 20px)/2);
  }
  .similar-card {
    flex-basis:calc((100% - 40px)/3);
  }
}


@media(max-width:900px) {
  .topbar-right {
    display:none;
  }
  .desktop-nav {
    display:none;
  }
  .menu-toggle {
    display:block;
  }
  .mobile-menu.open {
    display:flex;
    position:fixed;
    top:78px;
    left:0;
    right:0;
    background:#fff;
    padding:16px 20px;
    z-index:49;
    flex-direction:column;
    gap:2px;
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 25px rgba(0,0,0,.1);
  }
  .mobile-menu a {
    padding:13px;
  }
  .menu-contact {
    border-top:1px solid var(--line);
    margin-top:8px;
    padding-top:8px;
  }
  .icon-link {
    display:flex!important;
    align-items:center;
    gap:9px;
  }
  .mobile-menu .whatsapp i {
    color:var(--green);
  }
  .mobile-menu .email i {
    color:#2697ef;
  }
  .mobile-menu .instagram i {
    color:#ee4f98;
  }
  .trip-facts {
    grid-template-columns:repeat(2,1fr);
  }
  .trip-facts>div:nth-child(2) {
    border-right:0;
  }
  .trip-facts>div:nth-child(-n+2) {
    border-bottom:1px solid var(--line);
  }
  .two-column-detail {
    grid-template-columns:1fr;
  }
  .footer {
    grid-template-columns:1fr 1fr;
  }
}


@media(max-width:600px) {
  .topbar {
    display:none;
  }
  .site-header {
    height:70px;
  }
  .logo-frame {
    width:52px;
    height:52px;
  }
  .mobile-menu.open {
    top:70px;
  }
  .hero {
    min-height:680px;
  }
  .hero-slices {
    grid-template-columns:repeat(6,1fr);
  }
  .hero-slice {
    background-position:center;
  }
  .hero-content {
    padding:45px 20px 60px;
    justify-content:end;
  }
  .hero h1 {
    font-size:45px;
  }
  .hero p {
    font-size:15px;
    line-height:1.65;
  }
  .section {
    padding:62px 18px;
  }
  .features,.review-list,.footer,.form-grid,.booking-choice-grid,.contact-action-grid {
    grid-template-columns:1fr;
  }
  .feature {
    padding:22px;
  }
  .group-title {
    align-items:start;
  }
  .trip-card {
    flex-basis:82%;
    min-width:270px;
  }
  .carousel-arrow {
    width:40px;
    height:40px;
  }
  .carousel-arrow.prev {
    left:-7px;
  }
  .carousel-arrow.next {
    right:-7px;
  }
  .all-trip-grid {
    display:grid;
    grid-template-columns:1fr;
    overflow:visible;
  }
  .all-trip-grid .trip-card {
    min-width:0;
  }
  .trip-image {
    height:205px;
  }
  .about {
    grid-template-columns:1fr;
    gap:35px;
  }
  .about-card {
    min-height:330px;
  }
  .about-card strong {
    font-size:34px;
  }
  .about-card span {
    font-size:23px;
  }
  .rating-summary {
    align-items:flex-start;
  }
  .trip-hero {
    min-height:600px;
  }
  .trip-hero-content {
    padding:80px 20px 42px;
  }
  .trip-hero h1 {
    font-size:43px;
  }
  .hero-meta {
    gap:10px;
  }
  .trip-page {
    padding:30px 18px 70px;
  }
  .trip-facts {
    grid-template-columns:1fr 1fr;
    margin-bottom:40px;
  }
  .trip-facts>div {
    border-right:0!important;
  }
  .trip-facts>div:nth-child(odd) {
    border-right:1px solid var(--line)!important;
  }
  .trip-facts>div:nth-child(3),.trip-facts>div:nth-child(4) {
    border-bottom:0;
  }
  .detail-section {
    margin-bottom:42px;
  }
  .detail-section h2 {
    font-size:31px;
  }
  .gallery-grid {
    grid-template-columns:1fr 1fr;
  }
  .gallery-photo-large {
    grid-column:1/-1;
    grid-row:auto;
    min-height:240px;
  }
  .itinerary-day summary {
    grid-template-columns:44px 1fr 20px;
    padding:15px 0;
  }
  .day-content {
    padding:0 8px 17px 55px;
  }
  .similar-card {
    flex-basis:82%;
    min-width:260px;
  }
  .modal-card {
    padding:25px 18px;
    border-radius:22px;
    max-height:94svh;
  }
  .modal-card h2 {
    font-size:28px;
  }
  .field input,.field textarea,.field select {
    font-size:16px;
  }
  .floating-wa {
    right:16px;
    bottom:16px;
    width:54px;
    height:54px;
  }
  .floating-wa span {
    display:none;
  }
  .admin-wrap {
    padding:20px 14px;
  }
  .admin-grid {
    grid-template-columns:1fr;
  }
  .admin-table {
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
  .page-hero {
    padding:60px 20px;
  }
  .page-hero h1 {
    font-size:43px;
  }
}


/* Mobile stability pass */
@media(max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden;}
  .site-header,.mobile-menu,.page-hero,.trip-hero,.trip-page,.section,.footer{max-width:100%;}
  .trip-page{width:100%;min-width:0;}
  .trip-main{min-width:0;width:100%;}
  .trip-hero-content{min-width:0;width:100%;}
  .hero-meta span,.trip-facts strong,.day-title,.trip-body h4{min-width:0;overflow-wrap:anywhere;word-break:normal;}
  .all-trips-page{width:100%;overflow:hidden;}
  .all-trip-grid{width:100%;min-width:0;}
  .all-trip-grid .trip-card{width:100%;min-width:0;}
}
@media(max-width:600px){
  .trip-facts{grid-template-columns:1fr;}
  .trip-facts>div,.trip-facts>div:nth-child(odd){border-right:0!important;border-bottom:1px solid var(--line)!important;}
  .trip-facts>div:last-child{border-bottom:0!important;}
  .all-trip-grid{grid-template-columns:1fr;}
  .trip-hero{min-height:500px;}
  .trip-hero-content{padding:75px 18px 36px;}
}

/* Compact persistent mobile navigation */
@media(max-width:900px){
  body{padding-top:62px;}
  .site-header{height:62px;padding:0 14px;box-shadow:0 5px 18px rgba(10,49,85,.08);}
  .logo-frame{width:44px;height:44px;}
  .menu-toggle{display:grid;place-items:center;width:40px;height:40px;font-size:20px;border-radius:12px;background:#f4f7fa;}
  .mobile-menu.open{top:62px;max-height:calc(100dvh - 62px);overflow-y:auto;padding:10px 14px 14px;z-index:999;}
  .mobile-menu a{padding:10px 12px;}
}
@media(max-width:600px){
  body{padding-top:58px;}
  .site-header{height:58px;padding:0 12px;}
  .logo-frame{width:40px;height:40px;}
  .menu-toggle{width:38px;height:38px;font-size:19px;}
  .mobile-menu.open{top:58px;max-height:calc(100dvh - 58px);}
}

@media(max-width:600px) {
  .modal { padding:10px; }
  .modal-card { width:100%; max-height:95svh; padding:22px 15px; border-radius:20px; }
  .booking-form-heading { gap:10px; }
  .form-mini-icon { flex-basis:42px; width:42px; height:42px; border-radius:13px; }
  .booking-form-heading h2 { font-size:25px; }
  .country-dropdown { position:fixed; left:12px; right:12px; top:50%; transform:translateY(-50%); max-height:70svh; }
  .country-options { max-height:48svh; }
  .guest-btn { width:42px; height:42px; }
}

/* Mobile hero: show five slices; desktop keeps all six original hero images untouched. */
@media (max-width: 600px) {
  .hero-slices { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hero-slice-6 { display: none; }
}
@media(max-width:600px) {
  .gallery-grid { min-height:285px; grid-template-rows:142px 142px; padding-right:7px; margin-top:16px; }
  .gallery-photo-large { min-height:285px; }
  .gallery-photo { border-width:3px; border-radius:15px; }
  .gallery-photo-float:nth-child(2) { transform:translate(-8px,12px); }
  .gallery-photo-float:nth-child(3) { transform:translate(-8px,-5px); }
  .gallery-photo-float:nth-child(4) { transform:translate(5px,35px); }
  .lightbox { padding:14px; gap:8px; }
  .lightbox-stage { max-width:100%; max-height:88vh; }
  .lightbox img { max-width:100%; max-height:78vh; border-radius:10px; }
  .lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; background:rgba(3,22,39,.58); }
  .lightbox-nav:hover { transform:translateY(-50%); }
  .lightbox-prev { left:10px; }
  .lightbox-next { right:10px; }
  .lightbox-counter { left:10px; top:10px; }
  .lightbox-hint { bottom:8px; font-size:10px; }
  .trip-link { padding:9px 11px 9px 14px; font-size:12px; }
}

/* Final image layout overrides */
@media (max-width: 600px) {
  .trip-image { height: 190px; }
  .trip-image-half + .trip-image-half { border-left-width: 2px; }
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    min-height: 0;
  }
  .gallery-photo,
  .gallery-photo-large,
  .gallery-photo-float {
    width: 100%;
    height: 165px;
    min-height: 165px;
    transform: none !important;
  }
}

/* Final mobile booking modal/header spacing fix — affects booking popups only */
@media (max-width: 900px) {
  .modal {
    align-items: flex-start;
    padding: 72px 10px 12px;
  }
  .modal-card {
    width: calc(100vw - 20px);
    max-width: 720px;
    max-height: calc(100dvh - 84px);
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .modal {
    padding: 68px 10px 10px;
  }
  .modal-card {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 78px);
    border-radius: 20px;
  }
}

/* Premium reviews + preloader — mobile refinement */
@media(max-width:900px){
  .reviews {
    grid-template-columns:1fr;
    gap:20px;
  }
  .reviews > .rating-summary,
  .reviews > .review-form,
  .reviews .review-list {
    grid-column:1;
  }
  .reviews > .rating-summary {
    min-height:0;
  }
  .reviews .review-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:0;
  }
}

@media(max-width:600px){
  .reviews {
    gap:16px;
  }
  .reviews > .rating-summary {
    padding:19px 20px;
    border-radius:20px;
  }
  .reviews .rating-score {
    font-size:42px;
  }
  .reviews > .review-form {
    padding:19px 16px;
    border-radius:20px;
  }
  .reviews .review-list {
    grid-template-columns:1fr;
    gap:12px;
  }
  .reviews .review {
    padding:19px;
    border-radius:19px;
  }
  .reviews .review p {
    font-size:13.5px;
    line-height:1.75;
  }
  .reviews .star-picker {
    width:100%;
    justify-content:center;
  }
  .reviews .star-picker button {
    width:38px;
    height:38px;
  }

  #preloader::before {
    inset:12px;
    border-radius:22px;
  }
  .loader-orbit {
    width:164px;
    height:164px;
  }
  .loader-orbit::before {
    inset:-15px;
  }
  .loader-orbit img {
    width:86px;
    height:86px;
  }
  .loader-plane {
    width:30px;
    height:30px;
    font-size:17px;
  }
  .loader-text {
    margin-top:25px;
    font-size:9.5px;
    letter-spacing:.20em;
  }
  .loader-wrap::after {
    margin-top:15px;
  }
}