/* ============================================================
   Shubham Hotels — mobile corrections
   Loaded last. Everything is inside a max-width query, so the
   desktop layout is untouched.
   ============================================================ */

@media (max-width: 767.98px) {

  /* ---------------------------------------------------------
     1. HERO TYPOGRAPHY
     The clamp() minimums in the release stylesheet are desktop
     sized (4.35rem / 2.75rem), so on a phone the preferred vw
     value never wins and the title locks at 56px — about seven
     characters per line. Rescale with mobile-appropriate bounds.
     --------------------------------------------------------- */
  .sh-group-home .group-hero__title-main,
  .sh-group-home .group-hero__title-line.group-hero__title-main {
    font-size: clamp(1.95rem, 8.6vw, 2.6rem);
    letter-spacing: -0.03em;
    line-height: 1.08;
  }
  .sh-group-home .group-hero__title-sub,
  .sh-group-home .group-hero__title-line.group-hero__title-sub {
    font-size: clamp(1.75rem, 7.6vw, 2.3rem);
    letter-spacing: -0.02em;
    line-height: 1.12;
  }
  .sh-group-home .group-hero__title { line-height: 1.1; }
  .sh-group-home .group-hero__intro {
    font-size: 1rem;
    line-height: 1.7;
  }

  /* ---------------------------------------------------------
     2. MINIMUM READABLE TEXT
     Google flags anything under 12px as "text too small to read".
     The worst offender was the brand sub-line at 9.28px.
     --------------------------------------------------------- */
  .brand-sub,
  .site-footer__wordmark-sub,
  .site-footer__wordmark-sub span { font-size: 0.78rem !important; letter-spacing: 0.2em; }

  .sh-group-home .sh-experience__eyebrow,
  .sh-group-home .sh-why__eyebrow,
  .sh-group-home .faq-section__eyebrow,
  .sh-group-home .reservation-support__eyebrow,
  .sh-group-home .eyebrow,
  .group-hero__eyebrow { font-size: 0.75rem !important; }

  .sh-group-home .reservation-support__helper,
  .site-footer__hotel-link small,
  .site-footer__call-copy small,
  .hotel-card-location span,
  .sh-group-home .faq-section__intro { font-size: 0.78rem !important; }

  /* nothing on a phone should render below 12px */
  .sh-group-home small,
  .site-footer small { font-size: max(0.75rem, 1em); }

  /* ---------------------------------------------------------
     3. TAP TARGETS
     14 controls were under Google's 44x44 minimum; the hotel-card
     gallery dots were 18x6. Grow the hit area without changing
     how any of them look.
     --------------------------------------------------------- */
  .sh-group-home .group-hero__slide-link,
  .sh-group-home #our-hotels .hotel-card h3 a,
  .sh-group-home .hotel-card__title a,
  .sh-group-home .hotel-card-primary,
  .site-footer .site-footer__hotel-link,
  .sh-group-home .faq-section__contact,
  .site-header .brand-mark,
  .mobile-nav .brand-mark,
  .mobile-nav-header .brand-mark {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .site-footer .site-footer__hotel-link { display: flex; }

  /* drawer close button was 42px wide at 320px */
  .mobile-nav .mobile-close,
  .mobile-nav-header .mobile-close {
    min-width: 44px;
    min-height: 44px;
  }

  /* the header hamburger came out 41px wide on wider phones */
  .site-header .mobile-toggle { min-width: 44px; min-height: 44px; }

  /* carousel numerals: keep the type size, widen the hit area.
     The release stylesheet sets min-width:auto at .sh-group-home
     specificity, so this has to match it to win. */
  .sh-group-home .group-hero__dot {
    min-width: 44px;
    min-height: 44px;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* gallery dots were 18x6 — pad the target, keep the dot small */
  .sh-group-home .hotel-card-gallery-dots { gap: 0; }
  .sh-group-home .hotel-card-gallery-dots button {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    background: transparent !important;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sh-group-home .hotel-card-gallery-dots button::after {
    content: "";
    width: 18px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.55);
    transition: background 0.2s ease;
  }
  .sh-group-home .hotel-card-gallery-dots button[aria-pressed="true"]::after,
  .sh-group-home .hotel-card-gallery-dots button.is-active::after {
    background: var(--gold-metallic, #C9A227);
  }

  /* ---------------------------------------------------------
     3b. HOTEL CARD FEATURE LABELS  (pre-existing bug)
     Each feature holds a two-line label, but the label element
     inherits the parent's two-COLUMN grid template. The two lines
     land side by side in 22px and 8px columns and overlap each
     other -- "Business"/"Stays" rendered as "BusinesStays".
     Force a single column so the lines stack, and drop to two
     features per row so each has room to breathe.
     --------------------------------------------------------- */
  /* The release stylesheet already does exactly this -- but only inside
     @media (min-width: 1025px). On phones the label keeps the parent's
     two-COLUMN template, so its two lines sit side by side and collide.
     These selectors carry the #our-hotels id to match that specificity. */
  .sh-group-home #our-hotels .hotel-card-features .hotel-card__feature-label,
  .sh-group-home .hotel-card-features .hotel-card__feature-label {
    display: block;
    grid-template-columns: none;
    min-width: 0;
  }
  .sh-group-home #our-hotels .hotel-card-features .feature-label-line,
  .sh-group-home .hotel-card-features .feature-label-line {
    display: block;
    white-space: normal;
    line-height: 1.3;
  }
  .sh-group-home #our-hotels .hotel-card-features,
  .sh-group-home .hotel-card-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
  .sh-group-home #our-hotels .hotel-card-features > .hotel-card__feature {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
  }

  /* ---------------------------------------------------------
     4. VERTICAL RHYTHM
     The page ran to 17 screens on a 375px phone. Tighten the
     section padding so the content reads as a sequence rather
     than an endless scroll.
     --------------------------------------------------------- */
  .sh-group-home .section,
  .sh-group-home .sh-experience,
  .sh-group-home .sh-why,
  .sh-group-home .reservation-support,
  .sh-group-home .faq-section { padding-block: 3.25rem; }

  .sh-group-home .hotels-section__intro { margin-bottom: 2rem; }
  .sh-group-home .hotel-grid { gap: 1.75rem; }
  .sh-group-home .group-hero__inner { padding-block: 2.5rem 2rem; }

  .site-footer__main { padding-block: 2.75rem 2rem; gap: 2.25rem; }
  .site-footer__brand-copy,
  .site-footer__positioning { margin-bottom: 1.1rem; }
  .site-footer__floral-rule { margin-block: 1.1rem; }

  /* the decorative footer artwork eats a third of a screen */
  .site-footer__art { opacity: 0.35; }
}

/* Very narrow phones (iPhone SE and similar) */
@media (max-width: 360px) {
  .sh-group-home .group-hero__title-main { font-size: 1.85rem; }
  .sh-group-home .group-hero__title-sub  { font-size: 1.65rem; }
  .sh-group-home .section,
  .sh-group-home .sh-experience,
  .sh-group-home .sh-why,
  .sh-group-home .reservation-support,
  .sh-group-home .faq-section { padding-block: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-group-home .hotel-card-gallery-dots button::after { transition: none; }
}

/* ============================================================
   TABLET HEADER OVERFLOW  (pre-existing)
   Between 768px and ~900px the desktop nav is still shown but
   does not fit: nav (598px) + wordmark (217px) = 814px inside a
   768px header. The result is 282px of horizontal scroll on an
   iPad in portrait. Keep the hamburger until the desktop nav
   genuinely fits.
   ============================================================ */
@media (min-width: 768px) and (max-width: 899.98px) {
  .site-header .desktop-nav { display: none !important; }
  /* the hamburger has no sizing at this width because it is normally
     hidden here -- give it real dimensions, not just display */
  .site-header .mobile-toggle {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }
  .site-header .mobile-toggle span[aria-hidden] {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
  }
  .site-header .mobile-reservation-link { display: inline-flex; }

  /* the destinations strip is the other thing that will not fit */
  .utility-bar .utility-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: right;
    max-width: 58%;
  }
  .utility-bar .utility-inner,
  .utility-bar .container { flex-wrap: wrap; }
}

/* Below 768 the utility strip is equally cramped */
@media (max-width: 767.98px) {
  .utility-bar .utility-right { max-width: 100%; flex-wrap: wrap; }
}

/* ============================================================
   Touch targets on tablets too.
   768-900px now uses the hamburger, so it is a touch layout and
   needs the same 44px minimums as the phone breakpoint.
   ============================================================ */
@media (min-width: 768px) and (max-width: 899.98px) {
  .sh-group-home .group-hero__slide-link,
  .sh-group-home #our-hotels .hotel-card h3 a,
  .sh-group-home .hotel-card__title a,
  .sh-group-home .hotel-card-primary,
  .site-footer .site-footer__hotel-link,
  .sh-group-home .faq-section__contact,
  .site-header .brand-mark,
  .mobile-nav .brand-mark {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .site-footer .site-footer__hotel-link { display: flex; }

  .sh-group-home .group-hero__dot {
    min-width: 44px;
    min-height: 44px;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sh-group-home .hotel-card-gallery-dots { gap: 0; }
  .sh-group-home .hotel-card-gallery-dots button {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    background: transparent !important;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sh-group-home .hotel-card-gallery-dots button::after {
    content: "";
    width: 18px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.55);
  }
  .sh-group-home .hotel-card-gallery-dots button[aria-pressed="true"]::after,
  .sh-group-home .hotel-card-gallery-dots button.is-active::after {
    background: var(--gold-metallic, #C9A227);
  }

  .mobile-nav .mobile-close,
  .mobile-nav-header .mobile-close { min-width: 44px; min-height: 44px; }

  .brand-sub,
  .site-footer__wordmark-sub,
  .site-footer__wordmark-sub span { font-size: 0.78rem !important; }

  .site-footer .site-footer__hotel-link small,
  .site-footer .site-footer__call-copy small,
  .sh-group-home .reservation-support__helper { font-size: 0.78rem !important; }
}

/* ============================================================
   Bootstrap g-5 gutters on phones.
   .row.g-5 applies a 3rem gutter via negative margins, making the
   row 399px wide inside a 375px viewport and pushing the document
   12px sideways. Narrow the gutter where the screen cannot take it.
   ============================================================ */
@media (max-width: 767.98px) {
  .row.g-5,
  .row.gx-5 { --bs-gutter-x: 1.5rem; }
  .row.g-5 { --bs-gutter-y: 2rem; }
  .row.g-4,
  .row.gx-4 { --bs-gutter-x: 1.25rem; }
}