/* ==========================================================================
   mobile.css — phone layout polish (screens up to 640px wide).
   Loaded after style.css. Nothing here affects tablets or computers.
     1. Tighter section spacing so pages don't feel stretched
     2. Hero buttons full width and side by side
     3. Service cards become a swipeable row (with a peek of the
        next card) instead of a very long single column
     4. Mission / Vision cards: less inner padding, more room for text
     5. How It Works: wider steps that snap into place, titles never cut off
     6. One slim "Request a Quote" bar at the bottom replaces the two round
        floating buttons that used to sit on top of the text
   ========================================================================== */
@media (max-width: 640px) {

  /* 1. Spacing */
  section { padding: 60px 0; }
  .container { padding: 0 20px; }
  .section-title { margin-bottom: 14px; }
  .section-lead { font-size: 1rem; }

  /* 2. Hero buttons */
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .hero-actions .btn { width: 100%; padding-left: 8px; padding-right: 8px; text-align: center; justify-content: center; font-size: 0.78rem; }

  /* 3. Swipeable card rows */
  .activity-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    margin: 0 -20px;            /* run edge to edge… */
    padding: 4px 20px 18px;     /* …but start aligned with the text */
    scrollbar-width: none;
  }
  .activity-grid::-webkit-scrollbar { display: none; }
  .activity-card { scroll-snap-align: start; }
  .activity-card-img { height: 170px; }
  .activity-card-body { padding: 20px 20px 22px; }
  .activity-card-body h3 { margin-top: 0; }

  .swipe-dots { display: flex; justify-content: center; gap: 7px; margin-top: 4px; }
  .swipe-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(10, 31, 51, 0.18); transition: width 0.25s, background-color 0.25s; }
  .swipe-dots i.on { width: 20px; border-radius: 4px; background: var(--teal-deep); }

  /* 4. Mission / Vision */
  .mv-grid { gap: 16px; }
  .mv-card { padding: 26px 22px; }

  /* 5. How It Works */
  .process-steps {
    grid-template-columns: repeat(4, 64vw);
    min-width: 0;
    gap: 18px;
  }
  /* Less empty space ABOVE the steps on phones: the section's top padding
     matches the other sections (style.css's .process-section 120px would
     otherwise win over "section" above) and the extra 64px before the step
     circles goes. The space below the steps is unchanged. */
  .process-section { padding-top: 60px; }
  .process-steps { margin-top: 0; }
  .process-scroll { scroll-snap-type: x proximity; margin: 0 -20px; padding: 0 20px 8px; scrollbar-width: none; }
  .process-scroll::-webkit-scrollbar { display: none; }
  .process-step { scroll-snap-align: center; }
  .process-step h3 { font-size: 0.98rem; }

  /* 6. Bottom quote bar replaces the floating round buttons */
  .scroll-toggle { display: none !important; }
  .floating-cta {
    left: 12px !important;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: 50px !important;
    justify-content: center;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(7, 22, 38, 0.35);
  }
  .floating-cta .floating-cta-text { display: inline !important; font-weight: 700; letter-spacing: 0.04em; }
  .floating-cta .floating-cta-icon { display: block; margin-right: 8px; }
  /* No extra space under the page: it showed as a white strip below the
     dark footer. The footer's own bottom padding (96px, style.css) already
     keeps its icons clear of the quote bar. */
  .cookie-notice { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* 7. Phone held sideways (touch screen, wide but short). The phone rules
   above only cover screens up to 640px WIDE, so a sideways phone (~844x390)
   got the computer overlays — header + voyage strip + big round "Request a
   Quote" + arrow button covered ~28% of the screen and sat on top of the
   How It Works text. Here: slimmer header, no voyage strip, no arrow
   button, and a small quote button in the corner (~13% covered). */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .site-header, .site-header.scrolled { padding: 8px 0; }
  .logo img, .site-header.scrolled .logo img { height: 28px; }
  .voyage-bar { display: none !important; }
  body.voyage-bar-on .site-header.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15); }
  html { scroll-padding-top: 60px; }
  .scroll-toggle { display: none !important; }
  .floating-cta {
    left: auto !important;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 9px 16px;
    font-size: 0.82rem;
  }
}

/* 8. Phone tweaks approved 29 Sep (previewed first) */
@media (max-width: 640px) {
  /* Weather board: 3 short lines per port instead of 3 tall ones
     (224px -> 178px). Name + status, then sky, then the numbers. The small
     "Normal/Low/High" pressure word is dropped; the hPa value stays. */
  .cond-row.cond-cols {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.15fr) minmax(0, 0.75fr) minmax(0, 0.95fr);
    grid-template-areas:
      "port port status status"
      "sky sky sky sky"
      "wind force air press";
    gap: 8px 8px;
    padding: 16px 14px;
  }
  .cond-row .cond-sky { font-size: 0.8rem; gap: 5px; justify-self: start; }
  .cond-row .cond-sky svg { width: 20px; height: 20px; }
  .cond-row .cond-status { justify-self: end; }
  .cond-row .cond-wind { gap: 6px; }
  .cond-row .cond-compass { width: 30px; height: 30px; }
  .cond-row .cond-kn { font-size: 1.15rem; }
  .cond-row .cond-dir { white-space: nowrap; }
  .cond-row .cond-force b { font-size: 0.85rem; }
  .cond-row .bft { max-width: 80px; margin-top: 5px; }
  .cond-row .cond-val { font-size: 0.9rem; }
  .cond-row .cond-press { justify-self: end; text-align: right; }
  .cond-row .cond-sub { display: none; }
  .cond-skel { min-height: 178px; }        /* = real row height, measured */
  .conditions-grid { min-height: 890px; }  /* 5 rows, so nothing jumps */

  /* Phone numbers + email: bigger invisible tap area, same look */
  .office-links a, .contact-info-item a { position: relative; }
  .office-links a::after, .contact-info-item a::after { content: ''; position: absolute; inset: -10px -4px; }

  /* Less empty space under the route map (below "China") */
  .network-hub { margin-bottom: -80px; }
}
/* Narrow phones (under 390px): compass above the wind speed so it fits. */
@media (max-width: 389px) {
  .cond-row.cond-cols { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 1.03fr); }
  .cond-row .cond-wind { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* 9. Short phone screens only (e.g. 320x568, 360x640, 375x667): the hero
   had a fixed height with its text centred, so when the text was taller
   than the box it slid up under the logo. Here the hero grows to fit and
   the title always starts below the top bar. Taller phones (e.g. 390x844,
   360x780), tablets and computers don't match this rule and are unchanged. */
@media (max-width: 640px) and (max-height: 700px) {
  .hero { height: auto; min-height: max(480px, 82vh); padding: 108px 0 36px; }
}