/* ==========================================================================
   ROYAL INDIA JOURNEYS - RESPONSIVE STYLESHEET
   Mobile-First & Breakpoint Specific Layout Rules
   Verified for: 320px, 360px, 375px, 390px, 414px, 768px, 1024px, 1119px, 1120px, 1366px, 1440px, 1920px
   ========================================================================== */

/* Large Desktop / Monitor (> 1280px) */
@media (min-width: 1281px) {
  .container {
    max-width: 1240px;
  }
}

/* Standard Desktop / Laptop (1120px - 1280px) */
@media (max-width: 1280px) and (min-width: 1120px) {
  .nav-menu {
    gap: 0.75rem;
  }
  .nav-link {
    font-size: 0.9rem;
    padding: 0.4rem 0.15rem;
  }
  .dropdown-menu.mega-menu {
    width: 500px;
  }
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 1.5rem;
  }
}

/* Header Breakpoint & Navigation Collapse (<= 1119px) */
@media (max-width: 1119px) {
  .desktop-navigation,
  .desktop-quote-cta {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-menu-button {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    margin-left: auto;
    position: relative;
    z-index: 1302;
  }

  .header-inner {
    min-height: 88px;
  }

  .fleet-grid,
  .service-grid,
  .package-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dest-grid,
  .steps-grid,
  .route-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .footer-about {
    grid-column: span 2;
  }

  .booking-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #homepage-fleet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-vehicle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr);
    gap: 1.5rem;
  }

  .travel-album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 230px;
  }

  .travel-album-item,
  .travel-album-featured {
    grid-column: span 1;
    grid-row: span 1;
  }

  .travel-album-featured {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* Generic utility grids are used across the inner pages too. */
  .grid-3,
  .grid-4,
  .fleet-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fleet-card .fleet-specs {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .grid > *,
  .booking-form-grid > *,
  .footer-grid > * {
    min-width: 0;
  }
}

/* Tablet Portrait & Large Mobile (<= 768px) */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  main,
  section,
  header,
  footer,
  .site-header,
  .site-footer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .container,
  .header-inner {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    min-width: 0;
  }

  /* Prevent long contact details, route names and generated content overflow. */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  p,
  li,
  a,
  span,
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: anywhere;
  }

  iframe,
  video,
  canvas,
  svg,
  table {
    max-width: 100%;
  }

  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .fleet-grid,
  .service-grid,
  .package-grid,
  .dest-grid,
  .steps-grid,
  .route-grid,
  #homepage-fleet-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .grid > *,
  .grid-2 > *,
  .grid-3 > *,
  .grid-4 > *,
  .fleet-grid > *,
  .service-grid > *,
  .package-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  body {
    padding-bottom: 64px; /* Room for mobile fixed bottom bar */
  }

  .section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .section-sm {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .page-header {
    padding: 2.75rem 0 3rem;
  }

  .page-header p {
    font-size: 1rem;
  }

  .section-header {
    margin-bottom: 2rem;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .fleet-grid,
  .service-grid,
  .package-grid,
  .dest-grid,
  .steps-grid,
  .route-grid {
    grid-template-columns: 1fr;
  }

  /* Mobile Hero Optimization */
  .hero-slider-section {
    width: 100%;
    overflow: hidden;
  }

  .hero-slider {
    min-height: clamp(520px, 78svh, 620px);
    width: 100%;
  }

  .hero-vehicle {
    display: none !important;
  }

  .hero-content {
    max-width: 100%;
    width: 100%;
    padding: 56px 20px 110px !important;
    box-sizing: border-box;
  }

  .hero-slide {
    background-position: center;
  }

  .hero-title {
    font-size: clamp(30px, 7.8vw, 42px) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
    max-width: 100% !important;
    word-break: normal;
  }

  .hero-subtitle {
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin-bottom: 22px !important;
    max-width: 100% !important;
  }

  .hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100% !important;
    margin: 0 !important;
  }

  .hero-buttons .btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .slider-arrow {
    display: none; /* Rely on dots and touch swipe on mobile */
  }

  .hero-slider-nav {
    bottom: 24px;
  }

  .tour-category-tabs {
    justify-content: flex-start;
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .package-contact-strip,
  .package-contact-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .package-contact-actions .btn {
    width: 100%;
  }

  .tour-detail-highlights ul { grid-template-columns: minmax(0, 1fr); }
  .dynamic-itinerary article { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .dynamic-quote-card { position: static; }
  .contact-hero { min-height: 560px; }
  .contact-form-card { position: static; padding: 1.35rem !important; }
  .contact-info-stack > div { align-items: flex-start !important; }
  .related-tour-card { grid-template-columns:minmax(0,1fr); }
  .related-tour-image img { min-height:220px; height:220px; }
  .related-tour-action { border-left:0; border-top:1px solid var(--border-warm); }
  .article-layout { grid-template-columns:minmax(0,1fr); }
  .article-quote { position:static; }
  .long-tour-article>section { padding:1.35rem 1.1rem; }
  .long-tour-article h2 { margin-left:2.4rem; font-size:1.35rem; }
  .long-tour-article p { text-align:left; overflow-wrap:anywhere; }
  .family-guide-nav { top:76px; margin-inline:-16px; border-radius:0; }
  .family-guide-grid,.family-testimonial-grid { grid-template-columns:minmax(0,1fr); }
  .family-guide-card { padding:1.25rem; }
  .family-internal-links { padding:1.35rem; }
  .family-internal-links>div,.family-internal-links a { width:100%; }
  .service-compact-hero { padding:2.5rem 0; }
  .service-hero-grid { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
  .service-hero-grid h1 { font-size:clamp(2rem,10vw,3rem); }
  .service-hero-photo { height:240px; order:-1; }
  .service-hero-actions,.service-hero-actions .btn { width:100%; }
  .service-vehicle-grid { grid-template-columns:minmax(0,1fr); }
  .service-vehicle-image { height:220px; }
  .service-guide-nav { top:76px; margin-inline:-16px; border-radius:0; }
  .service-guide-list>article { padding:1.3rem 1.1rem; }
  .service-guide-list>article>p { text-align:left; overflow-wrap:anywhere; }
  .service-standards>div:last-child { grid-template-columns:minmax(0,1fr); }
  .service-book-panel,.service-book-panel>div:last-child { width:100%; flex-direction:column; align-items:stretch; text-align:center; }
  .service-book-panel .btn { width:100%; }
  .service-related-links,.service-related-links a { width:100%; }
  .dest-guide-nav { top:76px; margin-inline:-16px; border-radius:0; }
  .dest-guide-list>article { padding:1.3rem 1.1rem; }
  .dest-guide-list>article>p { text-align:left; overflow-wrap:anywhere; }
  .dest-guide-cta,.dest-guide-cta>div:last-child { width:100%; flex-direction:column; align-items:stretch; text-align:center; }
  .dest-guide-cta .btn,.dest-guide-links,.dest-guide-links a { width:100%; }
  .dest-card::after { opacity:1; transform:none; }

  .tour-guide-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tour-guide-topic {
    padding: 1.25rem 1.1rem;
  }

  .tour-guide-actions,
  .tour-guide-actions .btn {
    width: 100%;
  }

  /* Mobile Quotation Form Card & Header */
  .booking-card {
    width: calc(100% - 32px);
    max-width: 100%;
    margin-inline: auto;
    padding: 24px 18px;
    border-radius: 18px;
    box-sizing: border-box;
  }

  /* Inner-page cards already sit inside a container; don't narrow them twice. */
  .container .booking-card {
    width: 100%;
  }

  .booking-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
  }

  .booking-card-title {
    width: 100%;
    font-size: clamp(24px, 6.5vw, 30px);
    line-height: 1.15;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    word-break: normal;
  }

  .booking-form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
  }
  .form-group.span-2 {
    grid-column: span 1;
  }
  .booking-submit-area {
    flex-direction: column;
    align-items: stretch;
  }
  .booking-submit-area .btn {
    width: 100%;
  }

  .filter-toolbar {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .filter-toolbar::-webkit-scrollbar {
    display: none;
  }

  .desktop-fixed-cta {
    display: none !important;
  }
  .mobile-bottom-bar {
    display: none !important;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-about {
    grid-column: span 1;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }


  /* Some pages wrap footer-bottom content in another container. */
  .footer-bottom > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
  }

  .footer-bottom [style*="display:flex"],
  .footer-bottom [style*="display: flex"] {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Override rigid inline desktop columns used by tour detail pages. */
  .grid.grid-2,
  .grid.grid-3,
  .grid.grid-4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .fleet-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .fleet-card .fleet-specs {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #vehicle-content img {
    height: min(64vw, 320px) !important;
  }

  /* Flexible inline action rows used throughout older inner pages. */
  main [style*="display:flex"],
  main [style*="display: flex"] {
    max-width: 100%;
    flex-wrap: wrap;
  }

  main [style*="justify-content:space-between"],
  main [style*="justify-content: space-between"] {
    align-items: flex-start !important;
    gap: 0.5rem 1rem;
  }

  main [style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }

  .btn {
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }

  .form-control,
  input,
  select,
  textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px; /* avoids unwanted iOS zoom */
  }

  .faq-question {
    padding: 1rem;
    font-size: 0.98rem;
  }

  .faq-answer {
    padding: 0 1rem 1rem;
  }
}

/* Small Mobile (<= 480px) */
@media (max-width: 480px) {
  .container {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
  }

  .header-inner {
    width: calc(100% - 24px);
    gap: 8px;
  }

  .brand {
    gap: 6px;
    max-width: calc(100% - 54px);
  }

  .official-brand-logo {
    width: 150px;
    height: 68px;
    max-width: none;
  }

  .header-inner {
    min-height: 82px;
  }

  /* The compact vehicle-details header has a quote button instead of a drawer. */
  .header-inner > .btn {
    flex: 0 0 auto;
    padding-inline: 0.8rem;
    font-size: 0.82rem;
  }

  .mobile-navigation {
    width: min(340px, 94vw);
  }

  .mobile-menu-links {
    padding: 14px 16px;
  }

  .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .page-header {
    padding: 2.25rem 0 2.5rem;
  }

  .booking-card,
  .container .booking-card,
  .modal-box {
    padding: 1.25rem !important;
    border-radius: 14px;
  }

  .hero-content {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .hero-buttons .btn,
  .tour-guide-actions .btn,
  main .text-center > .btn,
  main .text-center > [style*="display"] .btn {
    width: 100%;
  }

  .travel-album-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 230px;
    gap: 0.8rem;
  }

  .travel-album-item,
  .travel-album-featured {
    grid-column: 1;
    grid-row: span 1;
  }

  .travel-album-featured {
    min-height: 300px;
  }

  .fleet-actions,
  .package-footer {
    grid-template-columns: minmax(0, 1fr);
  }
  .fleet-actions .btn,
  .package-footer .btn {
    width: 100%;
  }

  .footer-grid {
    gap: 1.5rem;
    padding-bottom: 2.5rem;
  }

  .site-footer {
    padding-top: 3rem;
  }
  .footer-bottom,.footer-bottom-links { justify-content:center; text-align:center; }
}

/* Ultra-compact Mobile (<= 360px) */
@media (max-width: 360px) {
  .official-brand-logo {
    width: 145px;
    height: 66px;
    max-width: none;
  }
  .mobile-menu-button {
    width: 40px;
    height: 40px;
    padding: 8px;
  }
}

/* Tour redesign responsive rules */
@media (max-width: 1119px) {
  .tour-detail-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr);
    gap: 1.75rem;
  }

  .package-directory-layout {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 1.25rem;
  }

  .package-directory-layout .package-card {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

  .tour-detail-hero {
    min-height: 510px;
    padding: 4rem 0 3rem;
    background-position: 62% center;
  }

  .tour-detail-hero::before {
    background: linear-gradient(90deg, rgba(20, 7, 23, .96), rgba(27, 11, 31, .72));
  }

  .tour-detail-hero h1 { font-size: clamp(2.1rem, 9vw, 3.25rem); }

  .tour-detail-layout,
  .package-directory-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tour-detail-sidebar .booking-card,
  .package-sidebar {
    position: static !important;
    top: auto !important;
  }

  .package-directory-layout .package-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .package-directory-layout .package-img-wrap { min-height: 240px; }

  .tour-inline-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .tour-inline-actions .btn { flex: 1 1 150px; }

  .floating-cta-group { display: none !important; }
  .mobile-bottom-bar {
    display: block !important;
    height: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 480px) {
  .tour-detail-hero {
    min-height: 540px;
    padding: 3rem 0 2.5rem;
  }

  .tour-hero-actions,
  .tour-hero-actions .btn,
  .tour-inline-actions,
  .tour-inline-actions .btn { width: 100%; }

  .tour-hero-meta { gap: .5rem; }
  .tour-meta-chip { font-size: .78rem; }
}

@media (min-width: 769px) {
  .floating-cta-group { display: flex !important; }
  .mobile-bottom-bar { display: none !important; }
}

.floating-cta > span {
  color: inherit;
  font-family: var(--font-heading);
  font-size: .82rem;
  font-weight: 800;
}

.mobile-bottom-grid-two { grid-template-columns: repeat(2, 1fr); }
.mobile-bar-btn > span { font-size: 1.1rem; line-height: 1; }

@media (max-width: 1119px) {
  .gt-catalogue-layout { grid-template-columns: minmax(0, 1fr) 240px; gap: 1.25rem; }
  .gt-package-row { grid-template-columns: 190px minmax(0, 1fr) 155px; }
  .gt-package-image { min-height: 310px; }
  .gt-package-info { padding: 1rem; }
}

@media (max-width: 900px) {
  .social-section-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; text-align: center; }
  .social-section-copy p { margin-inline: auto; }
  .gt-search-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt-catalogue-layout { grid-template-columns: minmax(0, 1fr); }
  .gt-sidebar { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt-help-card { grid-column: span 2; }
}

@media (max-width: 768px) {
  .home-map-frame,
  .home-map-frame iframe { min-height: 330px; }

  .home-map-footer {
    align-items: stretch;
    flex-direction: column;
    text-align: center;
  }

  .home-map-footer .btn { width: 100%; }

  .tour-detail-hero-compact { min-height: 420px; padding: 3rem 0 2.5rem; }
  .gt-catalogue-section { padding: 2.5rem 0 3rem; }
  .gt-notice { margin-top: -.5rem; }
  .gt-package-row { grid-template-columns: minmax(0, 1fr); }
  .gt-package-image { min-height: 230px; max-height: 290px; }
  .gt-package-price { align-items: flex-start; border-top: 1px solid var(--border-warm); border-left: 0; text-align: left; }
  .gt-package-price .btn { width: auto; }
}

@media (max-width: 480px) {
  .social-section-links { grid-template-columns: minmax(0, 1fr); }
  .tour-detail-hero-compact { min-height: 470px; }
  .gt-search-panel { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .gt-search-panel .btn { width: 100%; }
  .gt-sidebar { grid-template-columns: minmax(0, 1fr); }
  .gt-help-card { grid-column: auto; }
  .gt-package-info h3 { font-size: 1.15rem; }
  .gt-package-facts > div { grid-template-columns: minmax(0, 1fr); gap: .05rem; }
  .gt-package-price, .gt-package-price .btn { width: 100%; }
}