/* ========================================================================== 
   THE CAPITAL HOTEL — GLOBAL RESPONSIVE LAYER
   Load AFTER style.css on every page.

   Breakpoints covered:
   - Large desktop / ultrawide
   - Laptop / small desktop
   - Tablet landscape
   - Tablet portrait
   - Mobile
   - Small mobile
   - Short landscape devices
   ========================================================================== */

/* ---------- Safe global defaults ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

.container {
  width: min(92%, 1440px);
  margin-inline: auto;
}

/* Prevent long contact/email strings from creating horizontal scroll. */
a,
p,
li,
h1,
h2,
h3,
h4,
span {
  overflow-wrap: break-word;
}

/* ========================================================================== 
   LARGE DESKTOP / ULTRAWIDE — 1441px+
   ========================================================================== */
@media (min-width: 1441px) {
  .container {
    width: min(88%, 1500px);
  }

  .hero-content {
    max-width: 1280px;
  }

  .hero-tagline-main {
    font-size: clamp(4.5rem, 5vw, 5.6rem);
    line-height: 1.08;
  }
}

/* ========================================================================== 
   LAPTOP / SMALL DESKTOP — up to 1200px
   ========================================================================== */
@media (max-width: 1200px) {
  .site-header {
    height: 100px;
  }

  .site-header.scrolled {
    height: 74px;
  }

  .header-left .brand-logo {
    width: 78px;
    height: 54px;
  }

  .brand-logo-text {
    width: 92px;
  }

  .hero-banner-section,
  .aboutus-banner-section,
  .apartment-hero,
  .stay-hero {
    margin-top: 100px;
  }

  .hero-tagline-main {
    font-size: clamp(3rem, 6vw, 4.6rem);
    line-height: 1.08;
  }

  .footer-custom-grid {
    align-items: flex-start;
  }

  .footer-custom-brand {
    flex-basis: 190px;
  }

  .footer-custom-nav-group {
    gap: clamp(30px, 5vw, 60px);
  }

  .aboutus-quote-row,
  .aboutus-block3-grid {
    gap: 42px;
  }

  .room-meta-grid {
    gap: 46px;
  }
}

/* ========================================================================== 
   TABLET LANDSCAPE / SMALL LAPTOP — up to 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  .container {
    width: min(90%, 920px);
  }

  .section-padding {
    padding-block: 72px;
  }

  /* Header / menu */
  .menu-overlay {
    padding: 40px 52px;
  }

  .menu-close-btn {
    right: 52px;
  }

  .menu-nav-links {
    width: min(400px, 60vw);
    gap: 24px;
  }

  .menu-link {
    font-size: clamp(1.7rem, 4vw, 2.45rem);
  }

  /* Home */
  .hero-banner-section,
  .aboutus-banner-section {
    height: 78vh;
    min-height: 590px;
  }

  .hero-content {
    margin-bottom: 20px;
  }

  .about-grid {
    gap: 36px;
  }

  .poetry-section {
    padding-block: 66px 54px;
  }

  .poetry-flower-wrap {
    width: 105px;
  }

  .discover-grid {
    gap: 22px;
  }

  /* Shared footer */
  .site-footer-custom {
    padding: 52px 0 44px;
  }

  .footer-custom-grid {
    flex-direction: column;
    gap: 44px;
  }

  .footer-custom-brand {
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .footer-flower-emblem {
    max-width: 140px;
  }

  .footer-custom-nav-group {
    width: 100%;
    justify-content: space-between;
    gap: 28px;
  }

  /* Stay */
  .stay-shell {
    width: min(88%, 900px);
  }

  .room-meta-grid {
    grid-template-columns: minmax(0, 1fr) 155px;
  }

  /* Booking */
  .booking-page .booking-shell {
    padding-top: 145px;
  }

  .booking-layout {
    width: min(90vw, 920px);
    column-gap: 44px;
  }

  /* Apartment */
  .apartment-page-container {
    width: min(86vw, 920px);
  }
}

/* ========================================================================== 
   TABLET PORTRAIT — up to 820px
   ========================================================================== */
@media (max-width: 820px) {
  .contact-form {
    padding: 0;
  }

  :root {
    --mobile-side-space: 6vw;
  }

  .container {
    width: calc(100% - (var(--mobile-side-space) * 2));
  }

  .site-header {
    height: 84px;
    padding-inline: var(--mobile-side-space);
  }

  .site-header.scrolled {
    height: 70px;
  }

  .header-container {
    width: 100%;
  }

  .header-left .brand-logo {
    width: 64px;
    height: 46px;
  }

  .brand-logo-text {
    width: 80px;
  }

  .menu-trigger-btn,
  .menu-close-btn {
    font-size: .75rem;
    letter-spacing: 2px;
  }

  .menu-overlay {
    align-items: stretch;
    justify-content: center;
    padding: 90px var(--mobile-side-space) 44px;
  }

  .menu-close-btn {
    top: 30px;
    right: var(--mobile-side-space);
  }

  .menu-nav-links {
    width: 100%;
    max-width: none;
    gap: 20px;
  }

  .menu-link {
    font-size: clamp(1.65rem, 6.5vw, 2.3rem);
    letter-spacing: 2px;
  }

  .hero-banner-section,
  .aboutus-banner-section,
  .apartment-hero,
  .stay-hero {
    margin-top: 84px;
  }

  /* Home */
  .hero-banner-section,
  .aboutus-banner-section {
    height: 72svh;
    min-height: 520px;
  }

  .hero-video-bg {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
  }

  .hero-content {
    padding-inline: var(--mobile-side-space);
    margin-bottom: 0;
  }

  .hero-tagline-main {
    font-size: clamp(2.5rem, 8vw, 3.8rem);
    line-height: 1.06;
  }

  .about-section {
    padding-block: 64px;
  }

  .about-grid,
  .aboutus-quote-row,
  .aboutus-block3-grid,
  .testimonials-block-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .about-text-col,
  .aboutus-block3-text-col {
    max-width: 680px;
  }

  .aboutus-banner-heading {
    font-size: clamp(2rem, 6.5vw, 3rem);
    line-height: 1.2;
  }

  .aboutus-quote-section,
  .aboutus-block3-section {
    padding-top: 56px;
  }

  .aboutus-quote-row {
    padding-bottom: 44px;
  }

  .aboutus-dining-caption {
    padding-bottom: 54px;
  }

  .aboutus-block3-img {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .poetry-flower-wrap {
    width: 82px;
    opacity: .55;
  }

  .poetry-text {
    padding-inline: 50px;
  }

  .poetry-text p {
    font-size: 1rem;
    line-height: 1.8;
  }

  .hospitality-section {
    padding-block: 64px;
  }

  .hospitality-text-block {
    max-width: 100%;
  }

  .discover-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 24px;
  }

  .testimonial-cards-track {
    gap: 16px;
  }

  /* Menu */
  .menu-editorial {
    padding-top: 84px;
  }

  .menu-intro-grid,
  .menu-story-grid,
  .menu-story-grid.text-left {
    grid-template-columns: 1fr;
  }

  .menu-story-copy,
  .menu-feature-copy,
  .menu-feature-copy2,
  .menu-intro-copy {
    max-width: none;
  }

  /* Stay */
  .stay-hero {
    height: 62svh;
    min-height: 470px;
  }

  .stay-hero-copy {
    padding-inline: var(--mobile-side-space);
  }

  .stay-intro {
    padding-block: 52px 68px;
  }

  .room-meta-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .room-price-wrap {
    justify-self: start;
    width: min(220px, 100%);
  }

  .room-book-btn {
    margin-top: 18px;
  }

  .room-images {
    gap: 10px;
  }

  /* Apartment */
  .apartment-hero {
    height: 58svh;
    min-height: 430px;
  }

  .section-one-grid,
  .section-three-grid {
    grid-template-columns: 1fr;
  }

  .intro-copy,
  .section-one-copy,
  .section-three-copy {
    width: 100%;
    max-width: none;
  }

  /* Contact */
  .contact-main-section {
    padding-top: 126px;
  }

  .contact-layout {
    width: min(88%, 660px);
    grid-template-columns: 1fr;
    row-gap: 54px;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  /* Booking */
  .booking-page .booking-shell {
    padding-top: 120px;
  }

  .booking-layout {
    width: min(88vw, 650px);
    grid-template-columns: 1fr;
    row-gap: 42px;
  }

  .room-preview-column {
    padding-top: 0;
  }

  .room-preview-card {
    width: 100%;
    max-width: 580px;
    margin-inline: auto;
  }

  .date-card,
  .details-form,
  .payment-form,
  .confirmation-content {
    width: 100%;
  }

  /* Footer */
  .footer-custom-nav-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ========================================================================== 
   MOBILE — up to 576px
   ========================================================================== */
@media (max-width: 576px) {
  :root {
    --mobile-side-space: 22px;
  }

  .site-header {
    height: 76px;
  }

  .site-header.scrolled {
    height: 66px;
  }

  .header-left .brand-logo {
    width: 56px;
    height: 40px;
  }

  .brand-logo-text {
    width: 70px;
  }

  .hero-banner-section,
  .aboutus-banner-section,
  .apartment-hero,
  .stay-hero {
    margin-top: 76px;
  }

  .menu-overlay {
    padding-top: 80px;
  }

  .menu-nav-links {
    gap: 17px;
  }

  .menu-link {
    font-size: clamp(1.45rem, 8vw, 2rem);
    letter-spacing: 1.5px;
  }

  /* Home */
  .hero-banner-section,
  .aboutus-banner-section {
    height: 68svh;
    min-height: 460px;
  }

  .hero-tagline-main {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.08;
  }

  .discover-section {
    padding-block: 0px 40px;
  }

  .about-section,
  .hospitality-section,
  .testimonials-block-section {
    padding-block: 15px;
  }

  .section-title,
  .hospitality-heading,
  .testimonial-block-heading {
    font-size: clamp(1.35rem, 6vw, 1.8rem);
  }

  .about-text,
  .hospitality-desc,
  .aboutus-poetry-lines,
  .aboutus-dining-desc,
  .aboutus-block3-body {
    font-size: .9rem;
    line-height: 1.7;
  }

  .aboutus-banner-heading {
    font-size: clamp(1.8rem, 8vw, 2.45rem);
  }

  .aboutus-quote-section {
    padding-top: 44px;
  }

  .aboutus-pull-quote {
    font-size: 1.6rem;
  }

  .aboutus-dining-caption,
  .aboutus-block3-section {
    padding-bottom: 48px;
  }

  .aboutus-block3-section {
    padding-top: 44px;
  }

  .poetry-section {
    padding: 48px var(--mobile-side-space);
  }

  .poetry-text {
    padding-inline: 18px;
  }

  .poetry-flower-wrap {
    width: 54px;
    opacity: .35;
  }

  .discover-grid {
    grid-template-columns: 1fr;
    gap: 22px 0;
  }

  .discover-img {
    height: 180px;
  }

  .discover-title-card,
  .discover-card {
    min-height: 0;
  }

  .testimonial-slider-controls {
    gap: 12px;
  }

  /* Menu */
  .menu-editorial {
    padding-top: 76px;
  }

  .menu-intro,
  .menu-wide-image-section,
  .menu-story-section,
  .menu-feature-section {
    padding-bottom: 48px;
  }

  .menu-intro {
    padding-top: 42px;
  }

  .menu-wide-figure,
  .menu-feature-figure,
  .menu-story-media {
    aspect-ratio: 4 / 3;
  }

  .menu-intro-title h1,
  .menu-story-copy h2,
  .menu-feature-copy h2 {
    overflow-wrap: normal;
  }

  /* Stay */
  .stay-shell {
    width: calc(100% - 44px);
  }

  .stay-hero {
    height: 56svh;
    min-height: 410px;
  }

  .stay-hero-copy h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
    line-height: 1.08;
  }

  .stay-intro {
    padding-block: 44px 56px;
  }

  .stay-intro-list li,
  .room-feature-list li,
  .room-copy p,
  .stay-small-label {
    font-size: .9rem;
  }

  .room-block {
    padding-bottom: 62px;
  }

  .room-meta-grid {
    margin-bottom: 26px;
  }

  .room-images {
    grid-template-columns: 1fr;
  }

  .room-images img {
    aspect-ratio: 4 / 3;
  }

  .room-price-wrap {
    width: 100%;
  }

  .room-book-btn {
    width: min(220px, 100%);
  }

  /* Apartment */
  .apartment-page-container {
    width: calc(100% - 44px);
  }

  .apartment-hero {
    height: 52svh;
    min-height: 380px;
  }

  .apartment-hero-content h1 {
    font-size: clamp(1.9rem, 9vw, 2.6rem);
  }

  .apartment-intro {
    padding-block: 48px;
  }

  .apartment-editorial-one,
  .apartment-editorial-two,
  .apartment-editorial-three {
    padding-bottom: 52px;
  }

  .apartment-photo-twin,
  .apartment-photo-master,
  .apartment-photo-living {
    aspect-ratio: 4 / 3;
  }

  .apartment-editorial-section p,
  .intro-copy,
  .section-three-copy strong {
    font-size: .9rem;
  }

  /* Contact */
  .contact-main-section {
    padding: 112px 0 52px;
  }

  .contact-layout {
    width: calc(100% - 44px);
    row-gap: 46px;
  }

  .contact-title {
    margin-bottom: 30px;
  }

  .contact-info-list {
    gap: 18px;
  }

  .contact-info-row {
    width: 100%;
    font-size: .84rem;
  }

  .contact-message-field,
  .contact-submit-btn {
    margin-top: 26px;
  }

  .contact-submit-btn {
    width: 100%;
    min-height: 44px;
  }

  .contact-map-section {
    height: 280px;
  }

  /* Booking */
  .booking-page .booking-shell {
    padding: 104px 0 52px;
  }

  .booking-layout {
    width: calc(100% - 36px);
    row-gap: 34px;
  }

  .room-preview-title {
    left: 18px;
    bottom: 16px;
    font-size: 1.75rem;
  }

  .booking-steps {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .booking-steps::-webkit-scrollbar {
    display: none;
  }

  .booking-step {
    min-width: 105px;
    font-size: .62rem;
  }

  .date-card {
    min-height: 60px;
  }

  .date-item {
    padding-inline: 10px;
  }

  .date-value {
    font-size: .82rem;
  }

  .guest-select-grid,
  .payment-two-col {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .payment-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .payment-method {
    width: 100%;
    min-height: 42px;
  }

  .split-actions {
    gap: 10px;
  }

  .booking-primary-btn,
  .booking-secondary-btn {
    min-height: 42px;
  }

  /* Footer */
  .site-footer-custom {
    padding: 44px 0 38px;
  }

  .footer-custom-grid {
    gap: 34px;
  }

  .footer-flower-emblem {
    max-width: 110px;
  }

  .footer-custom-nav-group {
    grid-template-columns: 1fr 1fr;
    row-gap: 34px;
  }

  .footer-custom-col:last-child {
    grid-column: 1 / -1;
  }

  .footer-col-title {
    margin-bottom: 14px;
  }

  .footer-col-links li a {
    font-size: .9rem;
  }
}

/* ========================================================================== 
   SMALL MOBILE — up to 400px
   ========================================================================== */
@media (max-width: 400px) {
  :root {
    --mobile-side-space: 17px;
  }

  .container,
  .stay-shell,
  .apartment-page-container,
  .contact-layout {
    width: calc(100% - 34px);
  }

  .header-left .brand-logo {
    width: 68px;
  }

  .brand-logo-text {
    width: 64px;
  }

  .menu-trigger-btn,
  .menu-close-btn {
    letter-spacing: 1.6px;
  }

  .hero-tagline-main {
    font-size: clamp(1.8rem, 10vw, 2.35rem);
  }

  .aboutus-banner-heading,
  .stay-hero-copy h1,
  .apartment-hero-content h1 {
    font-size: 1.9rem;
  }

  .footer-custom-nav-group {
    grid-template-columns: 1fr;
  }

  .footer-custom-col:last-child {
    grid-column: auto;
  }

  .date-card {
    grid-template-columns: 1fr auto 1fr;
  }

  .date-label {
    font-size: .52rem;
  }

  .date-value {
    font-size: .74rem;
  }

  .split-actions {
    flex-direction: column-reverse;
  }

  .booking-primary-btn,
  .booking-secondary-btn {
    width: 100%;
  }
}

/* ========================================================================== 
   SHORT LANDSCAPE DEVICES
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header {
    height: 64px;
  }

  .hero-banner-section,
  .aboutus-banner-section,
  .apartment-hero,
  .stay-hero {
    margin-top: 64px;
    min-height: 360px;
    height: calc(100svh - 64px);
  }

  .menu-overlay {
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: 70px;
  }

  .menu-nav-links {
    gap: 10px;
  }

  .menu-link {
    font-size: 1.35rem;
  }
}

/* ========================================================================== 
   TOUCH DEVICES
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {

  .menu-trigger-btn,
  .menu-close-btn,
  .room-book-btn,
  .booking-primary-btn,
  .booking-secondary-btn,
  .contact-submit-btn,
  .slider-arrow-btn {
    min-height: 44px;
  }
}

/* ========================================================================== 
   ABOUT PAGE — MOBILE SLIDER SPACING FIX
   Keeps the gallery close to the preceding copy and removes empty image space.
   ========================================================================== */
@media (max-width: 768px) {

  /* This hospitality section is the About page gallery when it follows Block 3. */
  .aboutus-block3-section {
    padding-bottom: 24px;
  }

  .aboutus-block3-section+.hospitality-section {
    padding-top: 0;
    padding-bottom: 48px;
  }

  .aboutus-block3-section+.hospitality-section .aboutus-slider-viewport {
    margin-top: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .aboutus-block3-section+.hospitality-section .aboutus-slider-track {
    gap: 10px;
  }

  .aboutus-block3-section+.hospitality-section .aboutus-slide {
    flex: 0 0 62vw;
    max-width: 62vw;
  }

  .aboutus-block3-section+.hospitality-section .aboutus-slide img {
    width: 100%;
    height: clamp(220px, 58vw, 280px);
    object-fit: cover;
  }
}

@media (max-width: 400px) {
  .aboutus-block3-section {
    padding-bottom: 18px;
  }

  .aboutus-block3-section+.hospitality-section {
    padding-bottom: 40px;
  }

  .aboutus-block3-section+.hospitality-section .aboutus-slider-track {
    gap: 8px;
  }

  .aboutus-block3-section+.hospitality-section .aboutus-slide {
    flex-basis: 68vw;
    max-width: 68vw;
  }

  .aboutus-block3-section+.hospitality-section .aboutus-slide img {
    height: clamp(210px, 66vw, 250px);
  }
}

/* ========================================================================== */
/* DETAILS PAYMENT GATEWAY — RESPONSIVE                                       */
/* ========================================================================== */

@media (max-width: 820px) {
  .rooms-list {
    padding: 0 0 0px;
  }

  .secure-payment-heading {
    margin-bottom: 22px;
  }

  .payment-summary-card {
    padding: 16px 18px;
  }
}

@media (max-width: 520px) {
  .secure-payment-heading {
    gap: 12px;
    margin-bottom: 18px;
  }

  .secure-payment-lock {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .payment-summary-card {
    padding: 14px;
  }

  .payment-summary-row {
    gap: 12px;
    font-size: .68rem;
  }

  .gateway-security-note,
  .payment-status {
    font-size: .66rem;
  }

  .gateway-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .gateway-actions .booking-primary-btn,
  .gateway-actions .booking-secondary-btn {
    width: 100%;
    min-height: 44px;
  }
}