/* ECRworlds — the phone experience.
 *
 * Not a shrunken desktop. The organising idea of this site is a 151 km road
 * with stays pinned to kilometre markers; on a wide screen that reads left to
 * right, and on a phone it reads top to bottom, which is the direction a thumb
 * already moves. The vertical road below is the same data as the horizontal
 * one, spaced by real distance, and it is the better of the two on a phone.
 */

/* ── the road, vertically ─────────────────────────────────────────────────── */

.road-v { display: none; }

@media (max-width: 860px) {
  .road { display: none; }                 /* the horizontal track */
  .road-v { display: block; position: relative; padding: 4px 0 8px; }

  /* The road itself: one continuous dashed line down the left. */
  .road-v::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 26px;
    bottom: 26px;
    width: 5px;
    border-radius: 3px;
    background: var(--ink);
  }
  .road-v::after {
    content: "";
    position: absolute;
    left: 29px;
    top: 26px;
    bottom: 26px;
    width: 1px;
    background: repeating-linear-gradient(180deg, var(--accent) 0 11px, transparent 11px 22px);
  }

  .rv-end {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    font: 500 10.5px/1 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-left: 58px;
    min-height: 26px;
  }
  .rv-end::before {
    content: "";
    position: absolute;
    left: 22px;
    width: 15px;
    height: 3px;
    border-radius: 2px;
    background: var(--ink);
  }

  .rv-stop {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 62px;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  /* The marker dot, sitting on the line. */
  .rv-stop .rv-dot {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--paper);
    box-shadow: 0 0 0 1px var(--ink);
    transition: transform .15s;
  }
  .rv-stop:active .rv-dot { transform: translateY(-50%) scale(1.25); }

  .rv-km {
    text-align: right;
    padding-right: 4px;
    font: 500 10px/1 var(--f-mono);
    color: var(--ink-3);
    letter-spacing: .06em;
  }
  .rv-km b {
    display: block;
    font: 400 21px/1 var(--f-display);
    color: var(--ink);
    margin-bottom: 2px;
  }

  .rv-body { min-width: 0; }
  .rv-body h3 {
    font-size: 17px;
    line-height: 1.2;
    /* Two lines maximum, so one long name cannot shove the road about. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* A span is inline, and text-overflow needs a block box — without this the
     place name slides under the thumbnail instead of ellipsising. */
  .rv-place {
    display: block;
    font-size: 12.5px;
    color: var(--ink-2);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rv-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font: 500 11px/1 var(--f-mono);
    color: var(--ink-3);
    white-space: nowrap;
  }
  .rv-meta .score { font-size: 10.5px; padding: 4px 6px; }

  .rv-thumb {
    width: 62px;
    aspect-ratio: 1;
    border-radius: 9px;
    overflow: hidden;
    background: var(--paper-2);
  }
  .rv-thumb img { width: 100%; height: 100%; object-fit: cover; }

  .rv-price {
    grid-column: 2 / -1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: -4px;
    font-size: 12px;
    color: var(--ink-3);
  }
  .rv-price b { font-size: 15px; color: var(--ink); font-weight: 600; }

  /* Empty road where the real distance is large, so the shape of the drive
     survives: Alamparai to Marakkanam really is a long quiet stretch. These
     are milestones on the line itself, not text in the content column. */
  /* These take real vertical space — that is what makes a long stretch of
     road feel long when you scroll it. */
  .rv-gap {
    position: relative;
  }
  .rv-gap span {
    display: block;
    position: relative;
    height: 15px;
    font-size: 0;
  }
  .rv-gap span::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--ink-3);
    opacity: .5;
  }
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* The fixed-height hero clipped its own copy once the type got large.
     Let it size to its content instead, with the image behind. */
  .hero-img {
    height: auto;
    min-height: 420px;
    display: flex;
  }
  .hero-copy {
    position: relative;
    inset: auto;
    background: linear-gradient(180deg, rgba(20, 18, 45, .55) 0%, rgba(20, 18, 45, .72) 100%);
    align-items: flex-end;
  }
  .hero-copy .wrap {
    padding-top: 34px;
    padding-bottom: 58px;   /* room for the search card to overlap into */
  }
  .hero h1 {
    font-size: clamp(31px, 8.6vw, 40px);
    max-width: 15ch;
  }
  .hero-sub {
    font-size: 15px;
    margin-top: 12px;
    max-width: 38ch;
  }
  .hero-route {
    margin-top: 16px;
    font-size: 10.5px;
    gap: 8px;
  }
  .hero-route i { width: 28px; }

  /* The search card: full-width fields, nothing orphaned. */
  .search {
    margin-top: -40px;
    grid-template-columns: 1fr 1fr;
    border-radius: 12px;
  }
  .search .f { padding: 13px 15px; }
  .search .f:first-child { grid-column: 1 / -1; border-right: 0; }
  .search .f:nth-child(2) { border-right: 1px solid var(--line); }
  .search .f:nth-child(3) { border-right: 0; }
  /* Guests spanned half a row and left a dead gap beside it. */
  .search .f:nth-child(4) { grid-column: 1 / -1; border-right: 0; }
  .search .go { grid-column: 1 / -1; padding: 12px; }
  .search .go .btn { width: 100%; padding-block: 15px; font-size: 15px; }
  .search select,
  .search input { font-size: 16px; }   /* 16px stops iOS zooming the page */
}

/* ── timetable ────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .tt-row {
    grid-template-columns: 46px 68px minmax(0, 1fr) auto;
    gap: 13px;
    padding: 13px 2px;
    align-items: center;
  }
  .tt-km { font-size: 10px; }
  .tt-km b { font-size: 19px; margin-bottom: 1px; }
  .tt-img { border-radius: 8px; }
  .tt-name h3 {
    font-size: 15.5px;
    line-height: 1.2;
    /* Names were wrapping to three lines and tearing the row apart. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tt-name p { font-size: 12px; margin-top: 2px; }
  .tt-price b { font-size: 15px; }
  .tt-price span { font-size: 10.5px; margin-top: 2px; }
}

@media (max-width: 420px) {
  .tt-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .tt-img { display: none; }
}

/* ── sections and headings ────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* 15px is a desktop reading size; on a phone held at arm's length 16px is
     the comfortable floor, and it also stops iOS zooming on input focus. */
  body { font-size: 16px; }

  .sec { padding-block: 44px 0; }
  .sec-head { margin-bottom: 18px; gap: 12px; }
  .sec-head p { font-size: 14.5px; }
  .wrap { padding-inline: 18px; }
  h1 { font-size: clamp(28px, 7.6vw, 38px); line-height: 1.1; }
  /* Never below 23px, which is where Gloock starts to look thin. */
  h2 { font-size: clamp(23px, 5.6vw, 26px); line-height: 1.18; }

  /* On a phone, Gloock appears only at display sizes and on numerals. The
     card and panel titles that are large enough to carry it on a desktop land
     at 19–21px here, which is exactly where it goes spindly — so they use the
     text face instead. */
  .card-top h3,
  .str h3,
  .summary h3,
  .dlg-sheet h3,
  .empty-t {
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -.003em;
    line-height: 1.28;
  }
  .card-top h3 { font-size: 18.5px; }
  .empty-t { font-size: 17px; }
  .promise { gap: 26px; }
  .foot { padding-block: 40px 24px; margin-top: 56px; }
  .foot-base { flex-direction: column; gap: 9px; align-items: flex-start; }
}

/* ── hotel page ───────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  /* Milestone above the title rather than beside it: the h1 was being squeezed
     into a narrow column and breaking in odd places. */
  .h-head {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 14px 18px;
  }
  .h-head .milestone { width: 56px; }
  .h-head .milestone .kmv { font-size: 22px; }
  .h-title h1 { font-size: clamp(27px, 7.6vw, 36px); }
  .h-meta { gap: 8px; font-size: 13px; }
  /* A trailing separator with nothing after it looked like a mistake. */
  .h-meta .dotsep:last-child { display: none; }

  .crumbs { font-size: 12px; padding-top: 16px; }
  .crumbs a { white-space: nowrap; }

  .gallery { gap: 5px; border-radius: 12px; }
  .block { padding-top: 28px; }
  .about { font-size: 15px; }
  .room { padding: 12px; gap: 13px; }
  .room h3 { font-size: 17px; }
  .bookbox { padding: 18px; border-radius: 12px; }
  .bb-price b { font-size: 26px; }
  .fld input, .fld select, .fld textarea { font-size: 16px; }
}

/* ── forms everywhere: never let iOS zoom on focus ───────────────────────── */

@media (max-width: 860px) {
  .inp, .sel2, textarea.inp, .chat-inp,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="date"], input[type="search"],
  input[type="number"], select, textarea {
    font-size: 16px;
  }
  /* Comfortable thumb targets. */
  .btn { min-height: 44px; }
  .btn-xs, .btn-sm { min-height: 38px; }
  .chip { min-height: 36px; display: inline-flex; align-items: center; }
}

/* ── the chat button ──────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* It was sitting on top of headings and the booking bar. Smaller, tucked
     into the corner, and lifted above whatever bar is on the page. */
  .chat-fab {
    width: 48px;
    height: 48px;
    right: 14px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 6px 18px -6px rgba(16, 35, 42, .55);
  }
  .chat-fab svg { width: 22px; height: 22px; }
  body[data-page="hotel"] .chat-fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .chat-fab { bottom: calc(var(--tabbar-h) + 12px); }

  /* Full-height sheet, which is what a phone conversation wants. */
  .chat-panel { max-height: 88vh; }
  .chat-log { padding: 15px; }
  .cb { max-width: 92%; font-size: 15px; }
}

/* ── stays listing ────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .page-head { padding-block: 24px 18px; }
  .toolbar { gap: 10px; }
  .toolbar .count { font-size: 12px; }
  .grid { gap: 24px 16px; }
  .card-img { border-radius: 10px; }
  .filters { padding: 16px; }
  /* The filter panel is a sheet, so it needs to be dismissible by scroll. */
  .filters.open { max-height: 70vh; overflow-y: auto; }
}

/* ── account and console ──────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .dash-head { margin-bottom: 18px; }
  .dash-head h1 { font-size: clamp(24px, 6.4vw, 30px); }
  .dash-head p { font-size: 14px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .tile { padding: 14px; }
  .tile-v { font-size: 25px; }
  .tile-k { font-size: 9.5px; }
  .panel-h { padding: 14px 15px; }
  .panel-b { padding: 15px; }
  .trip { padding: 14px; }
  .bd-hero { aspect-ratio: 16/9; }
  .dlg-sheet { padding: 20px; border-radius: 14px; }
  .dlg-back { padding: 12px; align-items: flex-end; }
  /* Dialogs as bottom sheets, which is the phone idiom. */
  .dlg-sheet { width: 100%; max-height: 90vh; overflow-y: auto; }
  .drawer-r { width: 100%; }
}

@media (max-width: 420px) {
  .tiles { grid-template-columns: 1fr; }
}

/* ── landscape on a phone ─────────────────────────────────────────────────── */

@media (max-height: 460px) and (orientation: landscape) {
  .hero-img { min-height: 300px; }
  .chat-panel { max-height: 94vh; }
  .tabbar { display: none; }
  body.has-tabbar { padding-bottom: 0; }
}

/* ── respect the notch and the home indicator ─────────────────────────────── */

@supports (padding: max(0px)) {
  @media (max-width: 860px) {
    .wrap { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
    .mbar { padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom))); }
  }
}