/* Breakpoint overrides — plain CSS, linked LAST so it wins by source order. */
* {
  --terracotta: #7f2d1f;
}

/* ── 1025px – 1366px — small desktop / laptop ── */
@media only screen and (min-width: 1025px) and (max-width: 1366px) {
  .title-container {
    gap: 2rem;
  }
  .welcome .welcome-container {
    gap: 2.5rem;
  }
}

/* ── ≤1024px — shared mobile + tablet ── */
@media only screen and (max-width: 1024px) {
  .title-container {
    gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
  }
  .title-container .col.right {
    align-items: flex-start;
  }

  .site-header .nav-toggle {
    display: flex;
  }
  .site-header .site-header-cta {
    display: none;
  }
  .site-header nav .nav-cta-mobile {
    display: inline-flex;
    margin-top: 20px;
  }
  .site-header nav {
    position: fixed;
    inset: 0;
    top: var(--header-h, 79px);
    width: 100%;
    height: calc(100vh - var(--header-h, 79px));
    height: calc(100dvh - var(--header-h, 79px));
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 8px 6vw 2rem;
    background: var(--terracotta);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden; /* keeps the closed drawer's links out of the Tab order */
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    z-index: 55;
  }
  .site-header nav a:not(.btn) {
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffe4d2;
    font-size: 1.05rem;
  }
  .site-header nav a:not(.btn):hover,
  .site-header nav a:not(.btn)[aria-current="page"] {
    color: #edab69;
    border-bottom-color: #edab69;
  }
  body.nav-open .site-header nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* Contact details + social icons inside the mobile drawer. */
  .site-header nav .nav-extras {
    display: block;
    width: 100%;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .site-header nav .nav-contact {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
  }
  .site-header nav .nav-contact a,
  .site-header nav .nav-contact span {
    width: auto;
    padding: 0;
    border-bottom: 0;
    color: #ffe4d2;
    font-size: 0.95rem;
    line-height: 1.4;
    text-decoration: none;
  }
  .site-header nav .nav-contact a:hover {
    color: #edab69;
  }
  .site-header nav .nav-social {
    display: flex;
    gap: 12px;
  }
  .site-header nav .nav-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.34);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffe4d2;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .site-header nav .nav-social a:hover {
    background: #ffe4d2;
    color: #7f2d1f;
    border-color: #ffe4d2;
  }
  .site-header nav .nav-social-icon {
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .site-header nav .nav-social-icon[data-icon="instagram"] {
    -webkit-mask-image: url("../images/instagram.svg");
    mask-image: url("../images/instagram.svg");
  }
  .site-header nav .nav-social-icon[data-icon="linkedin"] {
    -webkit-mask-image: url("../images/linkedin.svg");
    mask-image: url("../images/linkedin.svg");
  }
  .site-header nav .nav-social-icon[data-icon="youtube"] {
    -webkit-mask-image: url("../images/youtube.svg");
    mask-image: url("../images/youtube.svg");
  }
  body.nav-open {
    overflow: hidden;
  }
  /* While the menu is open, pin the header to the viewport as fixed (sticky
     breaks when the scroll container is locked) and drop its backdrop-filter
     so it no longer acts as the containing block for the fixed drawer — the
     drawer and close button then stay on screen regardless of scroll. */
  body.nav-open .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero .hero-inner .hero-inner-wrapper {
    height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .hero .hero-postmark {
    left: auto;
    right: -8px;
    top: -32px;
    transform: rotate(-11deg) scale(0.7);
    transform-origin: top right;
  }
  .hero .hero-search-card {
    grid-template-columns: 1fr 1fr;
    margin-top: -40px;
  }
  .hero .hero-search-card button {
    grid-column: 1 / -1;
  }
  /* Confine the hero card overlay to the media height so it centres within the
     image and never drops onto the search card below it (the media shrinks and
     the stacked search card grows at these widths). */
  .hero .hero-inner {
    top: 0;
    bottom: auto;
    height: clamp(620px, 88vh, 900px);
  }

  .welcome .welcome-container {
    grid-template-columns: 1fr;
  }
  .welcome .welcome-media {
    max-width: 380px;
    margin: 0 auto 60px;
  }

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

  .properties-teaser .embla__slide {
    flex: 0 0 60%;
  }

  .travel-services-teaser .travel-services-teaser-grid {
    grid-template-columns: 1fr;
  }
  .travel-services-teaser .service-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .why-choose-us .why-choose-us-grid,
  .why-choose-us .why-choose-us-grid.why-choose-us-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .kerala-tourism .embla__slide {
    flex: 0 0 400px;
  }

  .final-cta .final-cta-card {
    grid-template-columns: 1fr;
  }
  .final-cta .final-cta-media {
    border-left: 0;
    border-top: 1px dashed var(--terracotta, #7f2d1f);
    min-height: 320px;
  }
  .final-cta .final-cta-media::before,
  .final-cta .final-cta-media::after {
    left: 50%;
    top: -9px;
    bottom: auto;
    transform: translateX(-50%);
  }
  .final-cta .final-cta-media::after {
    left: auto;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
  }
  .final-cta .final-cta-stamp {
    display: none;
  }

  .page-hero .page-hero-inner .page-hero-inner-wrapper {
    height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .page-hero .page-hero-postmark {
    right: -8px;
    top: -32px;
    transform: rotate(-11deg) scale(0.7);
    transform-origin: top right;
  }

  .quick-facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }

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

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
  .stat-item {
    border-right: 0;
    padding: 0 !important;
  }

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

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

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

  .enquiry-layout {
    grid-template-columns: 1fr;
  }

  .mission-vision-grid {
    grid-template-columns: 1fr;
  }
}

/* ── ≤768px — mobile only ── */
@media only screen and (max-width: 768px) {

  .hero .hero-media {
    height: 744px;
  }
  .hero .hero-inner {
    height: 744px;
  }
  .hero .hero-card {
    max-width: 100%;
  }
  .hero .hero-search-card {
    grid-template-columns: 1fr;
  }
  .hero .hero-search-card button {
    grid-column: auto;
  }

  .tourism-teaser .tourism-teaser-grid {
    grid-template-columns: 1fr;
  }

  .properties-teaser .embla__slide {
    flex: 0 0 82%;
  }

  .why-choose-us .why-choose-us-grid,
  .why-choose-us .why-choose-us-grid.why-choose-us-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .kerala-tourism .embla__slide {
    flex: 0 0 85%;
  }

  .testimonials .testimonial-card {
    width: 82vw;
  }

  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
  }

  .final-cta .final-cta-content h2 {
    max-width: 100%;
  }

  .page-hero .page-hero-media {
    height: 460px;
  }
  .page-hero .page-hero-card {
    max-width: 100%;
  }

  .quick-facts {
    grid-template-columns: 1fr 1fr;
  }
  .category-panel-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .values-grid {
    grid-template-columns: 1fr;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
  .info-card-grid {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 600px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }
  .travel-services-teaser .service-card {
    padding: 24px 20px;
  }
  /* Hero CTA pair may wrap on narrow phones where two buttons can't fit */
  .hero .btn-container {
    flex-wrap: wrap;
  }
  /* Single column on phones; tablet keeps the two-column grid */
  .why-choose-us .why-choose-us-grid,
  .why-choose-us .why-choose-us-grid.why-choose-us-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Mobile & tablet refinements
   ========================================================================== */

/* Tablet — Welcome (home) / Our Story (about): image and copy side by side so
   they read as one section; Travel Services teaser cards on one row. */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  .welcome .welcome-container {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
  }
  .welcome .welcome-media {
    max-width: none;
    margin: 0;
  }
  .travel-services-teaser .travel-services-teaser-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* Tablet + mobile — Travel Services teaser photos span the card width. */
@media only screen and (max-width: 1024px) {
  .travel-services-teaser .service-card .service-card-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

@media only screen and (max-width: 768px) {
  /* Breathing room between the home masthead and the search form. */
  .hero .hero-search-card {
    margin-top: 28px;
  }
  /* Inner-page mastheads: room between the top of the image and the card. */
  .page-hero .page-hero-media {
    height: 648px;
  }
  /* Card vertically centred on the masthead (equal top / bottom padding). */
  .page-hero .page-hero-inner .page-hero-inner-wrapper {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  /* Testimonials compass becomes a background element — no space of its own. */
  .testimonials .testimonials-header {
    position: relative;
  }
  .testimonials .testimonials-compass {
    position: absolute;
    top: -22px;
    right: 0;
    z-index: 0;
    opacity: 0.28;
    pointer-events: none;
  }
  .testimonials .testimonials-intro {
    position: relative;
    z-index: 1;
  }
  /* Final CTA buttons stay on one line. */
  .final-cta .btn-container {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .final-cta .btn-container .btn {
    padding-left: 18px;
    padding-right: 18px;
    white-space: nowrap;
  }
}
@media only screen and (max-width: 600px) {
  .final-cta .final-cta-content {
    padding: 32px 22px;
  }
  .final-cta .btn-container .btn {
    height: 46px;
    font-size: 0.875rem;
    padding-left: 14px;
    padding-right: 14px;
  }
  /* Narrower newsletter email box. */
  .site-footer .footer-newsletter input {
    max-width: 280px;
  }
}

@media only screen and (max-width: 600px) {
  /* Destination carousel cards: wider and shorter. */
  .kerala-tourism .wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
  .kerala-tourism .embla__slide {
    flex: 0 0 92%;
    padding-right: 14px;
  }
  .kerala-tourism .destination-photo .destination-photo-inner {
    height: 185px;
  }
}