/* Phones. Linked from every page except the stay pages (accommodation.html,
 * accommodation/*) by scripts/sync-includes.mjs, after every other stylesheet
 * and inline <style>, so a rule here wins on equal specificity. See
 * scripts/lib/mobile.mjs.
 *
 * Nothing here changes a screen wider than 767 px, except the first rule.
 * Checked at 360, 375 and 412 px on 5 Oct 2026. Touch targets are at least
 * 44 px high, 40 px for links in a dense list.
 */

/* iOS enlarges text when a phone is turned sideways; the layout already
   fits, so keep the sizes as designed. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --- Homepage: "Comfortable boats" band ------------------------------------
   background-attachment: fixed does not work on touch screens: iOS draws the
   photo blown up to the height of the whole page, Android repaints it on
   every scroll frame. */
@media (hover: none), (max-width: 767px) {
  .tc-boats.bg-fixed {
    background-attachment: scroll;
  }
}

@media (max-width: 767px) {
  /* A phone only sees the middle of the 1600 x 737 photo: this is that middle
     (x 487-1113), the same pixels at less than half the bytes. Grows with
     its text instead of a fixed 700 px, for longer translations. */
  .tc-boats.bg-cover {
    background-image: url("../images/home/kapal-parallax-phone.jpg");
    height: auto;
    min-height: 700px;
  }

  /* --- Page gutters --------------------------------------------------------
     The snapshot pages (home sections, cruises, charter, blog) use 32 px a
     side; 24 px, as on the guide pages, gives text and photos room. */
  .max-w-6xl.mx-auto.p-8 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* --- Small print ------------------------------------------------------ */
  .tc-hero__eyebrow,
  .tc-rv__translated,
  .tc-card__kicker,
  .tc-facts dt,
  .tc-quote strong {
    font-size: 0.75rem;
  }

  /* Slider dots made by the snapshot's carousel script (data-shim-dot) are
     8 px across: a bigger, invisible area to tap. */
  button[data-shim-dot] {
    position: relative;
  }
  button[data-shim-dot]::after {
    content: "";
    position: absolute;
    inset: -14px -3px;
  }

  /* --- Breadcrumbs ------------------------------------------------------ */
  .tc-crumbs a,
  ol.break-words.text-muted-foreground a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
  }
  .tc-crumbs {
    margin-bottom: 0.5rem;
  }

  /* --- Guide pages ------------------------------------------------------ */
  .tc-hero__body {
    padding: 1.25rem;
  }
  .tc-bar a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
  }
  .tc-related {
    padding: 1.5rem 1.25rem;
  }
  .tc-related__group li {
    margin: 0;
  }
  .tc-related__group a {
    display: inline-block;
    padding: 0.55rem 0;
  }
  .tc-related__note {
    margin: -0.35rem 0 0.35rem;
  }
  /* "Per person" columns can wrap, so the first column is not squeezed to
     one word per line. */
  .tc-table {
    font-size: 0.875rem;
  }
  .tc-table th,
  .tc-table td {
    padding: 0.6rem 0.4rem;
  }
  .tc-table th:first-child,
  .tc-table td:first-child {
    padding-left: 0;
  }
  .tc-table th:last-child,
  .tc-table td:last-child {
    padding-right: 0;
    white-space: normal;
  }

  /* --- Footer ----------------------------------------------------------- */
  .tc-footer__top {
    gap: 2rem 1.25rem;
  }
  .tc-footer__links a {
    padding: 0.7rem 0;
  }
  .tc-footer__langs {
    gap: 0 0.25rem;
  }
  .tc-footer__langs a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 0.45rem;
  }
  .tc-footer__cookies {
    min-height: 2.75rem;
    margin-top: 0;
    padding: 0 0.75rem;
  }
  .tc-footer__map iframe {
    min-height: 13rem;
  }

  /* --- Homepage --------------------------------------------------------- */
  /* "Every day on board is different": 120 px of empty space above it. */
  .tc-discover__lead {
    margin-top: 2.5rem;
    padding-top: 0;
  }
  /* Questions: the speech-bubble icon and the padding cost 100 px a card. */
  .tc-discover__qcard {
    padding: 1.15rem 1.25rem 0.35rem;
  }
  .tc-discover__qicon {
    display: none;
  }
  .tc-discover__ask {
    margin-top: 0.75rem;
    padding-top: 0;
  }

  /* --- Trip pages (detail/*) and the departures page -------------------- */
  /* "Open all days" sits in the heading row: a taller tap area, same layout. */
  .tc-tp__expand {
    padding: 0.65rem 0;
    margin: -0.65rem 0;
  }
  .tc-tp__mail,
  .tc-dep__mail {
    padding: 0.65rem 0.5rem;
  }

  /* --- Charter ---------------------------------------------------------- */
  /* One field per line: two columns left 120 px a field. */
  form .grid.grid-cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .bg-slate-50.p-6,
  .bg-slate-50 > .p-6 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* --- Gallery ---------------------------------------------------------- */
  /* The slide dots were white on white, 12 px across, under 96 px of
     padding. */
  .pb-24 > .absolute.bottom-4 {
    bottom: 0.25rem;
  }
  .relative.w-full.mx-auto.pb-24 {
    padding-bottom: 3.25rem;
  }
  .pb-24 > .absolute.bottom-4 button {
    position: relative;
    margin: 0 0.35rem;
    background-color: rgba(15, 31, 99, 0.25);
  }
  .pb-24 > .absolute.bottom-4 button.bg-white {
    background-color: #0f1f63;
  }
  .pb-24 > .absolute.bottom-4 button::after {
    content: "";
    position: absolute;
    inset: -16px -8px;
  }
  .tc-page-extra {
    margin-top: 1.5rem;
  }

  /* --- Blog list -------------------------------------------------------- */
  .grid.grid-cols-1.gap-12 {
    gap: 1.5rem;
  }
  article.p-7 {
    padding: 1.25rem;
  }
}