/* Casa Kambanda mobile polish - 5-cycle responsive hardening, 2026-07-07
   Purpose: preserve the cream/tan/dark hospitality identity while making every public page usable on phones.
*/

:root {
  --mobile-gutter: clamp(18px, 5.4vw, 28px);
}

html {
  max-width: 100%;
  overflow-x: hidden;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

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

button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: rgba(26, 25, 22, 0.12);
}

button,
.btn,
.lang,
.burger,
.mobile-burger,
.month-btn,
.day.selectable {
  touch-action: manipulation;
}

.btn,
.lang,
.burger,
.mobile-burger,
.month-btn {
  min-height: 44px;
}

.burger,
.mobile-burger {
  min-width: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

input,
textarea,
select {
  font-size: 16px;
}

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

@media (max-width: 860px) {
  header,
  .nav {
    width: 100%;
  }

  .nav-links:not(.open),
  .nav-cta .btn {
    display: none !important;
  }

  .nav-cta {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 10px !important;
  }

  .burger,
  .mobile-burger {
    display: inline-flex !important;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .nav-links.open {
    z-index: 250;
  }

  .calendar-shell .panel {
    display: block !important;
    grid-template-columns: none !important;
  }

  .calendar-shell .panel > div:first-child {
    padding: 0 !important;
  }

  .calendar-shell .side-card {
    margin-top: 1rem;
  }

  .calendar {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .day {
    min-height: 54px !important;
  }
}

@media (max-width: 700px) {
  :root {
    --pad: var(--mobile-gutter);
  }

  .wrap {
    width: 100%;
    max-width: 100%;
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  header {
    background: rgba(246, 242, 236, .96) !important;
    color: var(--ink) !important;
    box-shadow: 0 1px 0 var(--line) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  header .wrap.nav,
  .wrap.nav,
  .nav {
    min-height: 72px;
    height: 72px;
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .logo {
    min-width: 0;
    max-width: calc(100vw - 160px);
    font-size: clamp(18px, 5.2vw, 21px) !important;
    letter-spacing: .075em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-cta {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px !important;
  }

  .nav-cta .btn {
    display: none !important;
  }

  .lang {
    min-width: 56px;
    height: 42px;
    padding: 0 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px !important;
    letter-spacing: .11em !important;
    background: rgba(246, 242, 236, .76);
  }

  .burger,
  .mobile-burger {
    display: inline-flex !important;
    position: static !important;
    inset: auto !important;
    padding: 0 !important;
    color: inherit !important;
  }

  .burger span,
  .mobile-burger span {
    width: 24px !important;
  }

  .nav-links.open {
    top: 72px !important;
    left: var(--mobile-gutter) !important;
    right: var(--mobile-gutter) !important;
    width: auto !important;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    padding: .35rem 1rem .75rem !important;
    background: rgba(246, 242, 236, .98) !important;
    box-shadow: 0 22px 60px rgba(26, 25, 22, .18) !important;
  }

  .nav-links.open a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: .85rem 0 !important;
    line-height: 1.2;
  }

  .eyebrow {
    font-size: 10px !important;
    letter-spacing: .17em !important;
    gap: 9px !important;
  }

  .eyebrow::before,
  .eyebrow:before {
    width: 22px !important;
  }

  .lead,
  p {
    overflow-wrap: break-word;
  }

  .btn {
    width: 100%;
    justify-content: center;
    padding: .95rem 1.1rem !important;
    letter-spacing: .15em !important;
    line-height: 1.15;
    text-align: center;
  }

  .foot-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    text-align: left;
    gap: .65rem !important;
  }
}

@media (max-width: 540px) {
  body {
    background: var(--cream);
  }

  .page-hero,
  .rooms-intro {
    padding-top: 104px !important;
    padding-bottom: 2.5rem !important;
  }

  .page-hero h1,
  .rooms-intro h1 {
    font-size: clamp(2.25rem, 10.5vw, 3.05rem) !important;
    line-height: 1.02 !important;
    max-width: 10.5ch !important;
  }

  .page-hero p,
  .rooms-intro p,
  .lead {
    font-size: .98rem !important;
    line-height: 1.62 !important;
    max-width: 32ch !important;
  }

  .hero {
    min-height: 100dvh !important;
    align-items: flex-end !important;
  }

  .hero .wrap {
    padding-top: 96px !important;
    padding-bottom: clamp(2rem, 10vh, 4rem) !important;
  }

  .hero h1 {
    font-size: clamp(3.05rem, 16vw, 4.4rem) !important;
    line-height: .98 !important;
    max-width: 9.2ch !important;
    text-wrap: balance;
  }

  .hero p {
    margin-top: 1.05rem !important;
    max-width: 30ch !important;
    font-size: .98rem !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,.88) !important;
  }

  .hero .btn {
    margin-top: 1.35rem !important;
    max-width: 250px;
  }

  .scroll-cue {
    display: none !important;
  }

  .feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
  }

  .feature {
    min-height: 112px;
    padding: 1.2rem .9rem !important;
  }

  .feature strong {
    font-size: 1rem !important;
    line-height: 1.12 !important;
  }

  .feature span {
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  .approach,
  .projects,
  .services,
  .contact,
  .room,
  .room-cta,
  .contact-section {
    padding-block: 3.2rem !important;
  }

  .approach .grid,
  .contact .grid,
  .services .intro,
  .room-inner,
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1.4rem !important;
  }

  .approach h2,
  .proj-head h2,
  .services h2,
  .contact h2,
  .room-text h2,
  .room-cta h2,
  .contact-section h2 {
    font-size: clamp(2rem, 9.2vw, 2.65rem) !important;
    line-height: 1.04 !important;
    max-width: 12ch !important;
  }

  .proj-head {
    display: block !important;
    margin-bottom: 1.7rem !important;
  }

  .proj-head .link {
    margin-top: 1rem;
    display: inline-flex;
  }

  .proj-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .proj-card .frame,
  .room-media .frame,
  .room-media .frame.portrait {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }

  .svc-item {
    grid-template-columns: 1fr !important;
    gap: .7rem !important;
    padding: 1.25rem 0 !important;
  }

  .svc-item p {
    max-width: 34ch !important;
  }

  .foot-top {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  form,
  #contactForm,
  #reserveForm {
    width: 100%;
  }

  .field input,
  .field textarea,
  input,
  textarea,
  select {
    width: 100%;
    min-height: 48px;
    border-radius: 0;
  }

  textarea {
    min-height: 132px;
  }
}

/* Reserve page specific mobile refinement */
@media (max-width: 700px) {
  .page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
  }

  .hero-strip {
    min-height: 212px !important;
  }

  .hero-strip .wrap {
    padding-top: 56px !important;
    padding-bottom: 24px !important;
  }

  .hero-strip h1 {
    font-size: clamp(2.65rem, 12.5vw, 3.6rem) !important;
    line-height: 1 !important;
    max-width: 9.4ch !important;
  }

  .hero-strip .lead {
    display: block !important;
    max-width: 28ch !important;
    margin-top: .9rem;
    font-size: .9rem !important;
    line-height: 1.45 !important;
  }

  .calendar-shell {
    margin-top: -24px !important;
    padding: 0 var(--mobile-gutter) 42px !important;
  }

  .calendar-shell .panel {
    border-radius: 18px;
    overflow: hidden;
  }

  .month-title {
    padding: 18px 16px 12px !important;
  }

  .month-title h2 {
    max-width: calc(100vw - 160px);
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    line-height: 1.04;
    white-space: normal !important;
  }

  .month-controls {
    right: 16px !important;
    top: 16px !important;
  }

  .month-btn {
    width: 40px !important;
    height: 38px !important;
  }

  .calendar {
    margin: 0 10px !important;
    padding: 1px 0 0 1px !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .day-name {
    min-width: 0;
    height: 28px !important;
    font-size: 7px !important;
    letter-spacing: .08em !important;
  }

  .day {
    min-width: 0;
    min-height: 48px !important;
    height: 48px !important;
    padding: 5px !important;
  }

  .day .num {
    font-size: 15px !important;
  }

  .day .note {
    left: 5px !important;
    right: 3px !important;
    bottom: 4px !important;
    font-size: 5.4px !important;
    letter-spacing: .05em !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .side-card {
    margin: 12px 10px 10px !important;
    padding: 16px !important;
    border-radius: 14px;
  }

  .side-card h3 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
  }

  .side-card .lead {
    max-width: none !important;
  }

  .row {
    align-items: flex-start;
  }

  .row .v {
    max-width: 54%;
  }

  .side-card .btn {
    min-height: 48px !important;
  }

  #reserveForm .field,
  #contactForm .field {
    margin-bottom: .95rem;
  }

  #reserveForm label,
  #contactForm label {
    display: grid;
    gap: .42rem;
  }

  #reserveForm input,
  #reserveForm textarea,
  #contactForm input,
  #contactForm textarea {
    border: 1px solid var(--line);
    background: rgba(246,242,236,.72);
    padding: .9rem .95rem;
    color: var(--ink);
  }
}

@media (max-width: 374px) {
  :root {
    --mobile-gutter: 12px;
  }

  .logo {
    max-width: calc(100vw - 142px);
    font-size: 17px !important;
  }

  .lang {
    min-width: 52px;
    padding: 0 8px !important;
  }

  .burger,
  .mobile-burger {
    min-width: 40px;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 15vw, 3.6rem) !important;
  }

  .feature-strip {
    grid-template-columns: 1fr !important;
  }

  .calendar-shell {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .calendar {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .side-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .day-name {
    font-size: 6.5px !important;
  }

  .day {
    min-height: 44px !important;
    height: 44px !important;
  }

  .day .note {
    display: none;
  }
}


/* Cycle 2-4 refinements: nav visibility, mobile hierarchy, reserve calendar and forms */
@media (max-width: 700px) {
  header .wrap.nav,
  .wrap.nav,
  .nav {
    position: relative !important;
    overflow: visible !important;
  }

  .nav-cta {
    padding-right: 0 !important;
  }

  .nav-cta .lang {
    display: none !important;
  }

  .burger,
  .mobile-burger {
    position: absolute !important;
    right: var(--mobile-gutter) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(246, 242, 236, .72) !important;
    border: 1px solid rgba(26,25,22,.16) !important;
    z-index: 3 !important;
  }

  header:not(.scrolled) .burger {
    background: rgba(26,25,22,.22) !important;
    border-color: rgba(255,255,255,.26) !important;
  }

  .logo {
    max-width: calc(100vw - 96px) !important;
  }

  .nav-links.open {
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
  }
}

@media (max-width: 540px) {
  .hero-media img {
    object-position: center top !important;
  }

  .hero-overlay {
    background: linear-gradient(180deg, rgba(10,9,7,.04) 0%, rgba(10,9,7,.14) 34%, rgba(10,9,7,.66) 64%, rgba(10,9,7,.92) 100%) !important;
  }

  .hero h1 {
    letter-spacing: -.025em !important;
  }

  .hero p {
    max-width: 29ch !important;
  }

  .approach .frame,
  .proj-card .frame,
  .room-media .frame,
  .room-media .frame.portrait {
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(26,25,22,.12);
  }

  .rooms-intro h1 {
    max-width: 9.2ch !important;
    font-size: clamp(2.05rem, 9vw, 2.7rem) !important;
  }

  .rooms-intro p {
    max-width: 30ch !important;
  }

  .room {
    padding-block: 2.7rem !important;
  }

  .room-text p,
  .contact-section p,
  .detail,
  .form-note {
    font-size: .96rem !important;
    line-height: 1.58 !important;
  }

  .contact-section .detail {
    display: grid;
    gap: 1rem;
    margin-top: 1.4rem !important;
  }

  .contact-section form {
    margin-top: .3rem;
    padding: 1.1rem !important;
    background: rgba(246,242,236,.46);
    border: 1px solid var(--line);
  }

  .contact-section .btn,
  #reserveForm .btn {
    margin-top: .55rem;
  }

  .calendar-shell .panel {
    box-shadow: 0 18px 45px rgba(26,25,22,.13) !important;
  }

  .calendar {
    gap: 0 !important;
  }

  .day-name {
    display: grid !important;
  }

  .day .note {
    display: none !important;
  }

  .day.selected-start,
  .day.selected-end {
    box-shadow: inset 0 0 0 2px var(--ink), 0 4px 10px rgba(26,25,22,.12) !important;
  }

  .side-card .rows {
    border-top-color: rgba(26,25,22,.18) !important;
  }

  .row {
    min-height: 42px;
  }
}

@media (max-width: 374px) {
  .logo {
    max-width: calc(100vw - 170px) !important;
    font-size: 16px !important;
  }

  .nav-cta {
    padding-right: 0 !important;
  }
}

/* Mobile text-centering pass — public website pages, 2026-07-07.
   Keeps interactive form/calendar controls readable while centering all page copy blocks. */
@media (max-width: 700px) {
  .hero .wrap,
  .page-hero .wrap,
  .rooms-intro .wrap,
  .room-text,
  .room-cta .inner,
  .approach .grid > div:not(.frame),
  .projects .proj-head,
  .projects .proj-head > div,
  .services .intro,
  .services .intro > div,
  .svc,
  .contact .grid > div,
  .contact article,
  .contact-section .wrap,
  .contact-section .grid > div,
  .hero-strip .wrap,
  .side-card,
  footer .foot-top,
  footer .foot-top > div,
  footer .fcol,
  footer .foot-bottom {
    text-align: center !important;
    justify-items: center !important;
  }

  .page-hero .wrap,
  .contact-section .wrap {
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  .hero-strip .wrap {
    display: grid !important;
    justify-content: center !important;
    align-items: end !important;
  }

  .hero-strip h1,
  .hero-strip .lead,
  .page-hero h1,
  .page-hero p,
  .rooms-intro h1,
  .rooms-intro p,
  .room-text h2,
  .room-text p,
  .room-cta h2,
  .room-cta p,
  .approach h2,
  .approach p,
  .approach .house-details,
  .projects h2,
  .services h2,
  .services .intro p,
  .svc h3,
  .svc p,
  .contact h2,
  .contact h3,
  .contact p,
  .contact-section h2,
  .contact-section p,
  .detail,
  .detail .k,
  .detail .v,
  .side-card h3,
  .side-card .lead,
  footer .blurb,
  footer h4,
  footer a,
  footer span {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .eyebrow,
  .link,
  .btn,
  .room-cta .btn,
  .contact .btn,
  .contact-section .btn,
  .side-card .btn,
  footer .logo {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .eyebrow {
    display: inline-flex !important;
  }

  .features,
  .stats {
    text-align: center !important;
  }

  .stat,
  .feature {
    text-align: center !important;
    justify-items: center !important;
  }

  .detail {
    justify-items: center !important;
  }

  .foot-top {
    align-items: center !important;
  }

  .fcol {
    align-items: center !important;
  }

  form,
  form *,
  .field,
  .field *,
  input,
  textarea,
  select,
  label,
  .calendar,
  .calendar *,
  .month-title,
  .month-title *,
  .month-controls,
  .row,
  .row *,
  .room-card,
  .room-card * {
    text-align: initial;
  }

  form .btn,
  #contactForm .btn,
  #reserveForm .btn {
    text-align: center !important;
    justify-content: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Emergency mobile hero correction — the first screen must feel like a warm
   hospitality page, not a black CTA block. The earlier mobile rule used
   object-fit: contain over a dark background, which letterboxed the exterior
   photo and left most of the first viewport black on phones. */
@media (max-width: 540px) {
  .hero {
    min-height: auto !important;
    display: block !important;
    align-items: initial !important;
    color: var(--ink) !important;
    background:
      linear-gradient(180deg, rgba(246, 242, 236, .62), var(--cream) 86%),
      var(--cream) !important;
    overflow: visible !important;
  }

  .hero-media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: clamp(295px, 54svh, 440px) !important;
    min-height: 295px !important;
    z-index: 0 !important;
    background: var(--cream-2) !important;
    overflow: hidden !important;
  }

  .hero-media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 52% center !important;
    background: var(--cream-2) !important;
  }

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

  .hero .wrap {
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    margin: -42px var(--mobile-gutter) 0 !important;
    padding: 1.75rem var(--mobile-gutter) 2.75rem !important;
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
    background: var(--cream) !important;
    border-top: 1px solid rgba(26, 25, 22, .08);
    box-shadow: 0 -18px 38px rgba(26, 25, 22, .08);
  }

  .hero h1 {
    color: var(--ink) !important;
    max-width: 8.8ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    text-shadow: none !important;
  }

  .hero p {
    color: var(--muted) !important;
    max-width: 31ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    text-shadow: none !important;
  }

  .hero .btn,
  .hero .btn--ghost {
    color: var(--ink) !important;
    width: min(100%, 342px) !important;
    max-width: 342px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
    border-color: rgba(26, 25, 22, .34) !important;
    background: transparent !important;
  }

  .hero .btn:hover,
  .hero .btn--ghost:hover {
    color: var(--cream) !important;
    background: var(--ink) !important;
    border-color: var(--ink) !important;
  }
}

@media (max-width: 700px) {
  header .nav-cta {
    display: flex !important;
    position: absolute !important;
    right: var(--mobile-gutter) !important;
    top: 50% !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
  }

  header .nav-cta .lang,
  header .nav-cta .btn {
    display: none !important;
  }

  header .nav-cta .burger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    transform: none !important;
    color: var(--ink) !important;
    background: rgba(246, 242, 236, .82) !important;
    border: 1px solid rgba(26, 25, 22, .18) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(26, 25, 22, .08) !important;
  }

  header .nav-cta .burger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    opacity: 1 !important;
    background: var(--ink) !important;
  }
}