/* ==========================================================================
   TP Marine — mobile layer (phones, 767px and below)
   Loaded after site.css. Everything except the first rule sits inside the
   media query, so tablet and desktop layouts are not affected.
   ========================================================================== */

.mdock { display: none; }

@media (max-width: 767px) {

  /* ---------- Bottom navigation dock ---------- */
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .mdock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
    background: rgba(8, 8, 8, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    transition: transform .3s var(--ease);
  }
  .mdock a {
    min-height: 54px; border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .mdock svg { width: 22px; height: 22px; }
  .mdock a[aria-current] { color: #fff; }
  .mdock a[aria-current] svg { color: var(--orange); }
  .mdock .mdock__cta { background: var(--orange); color: #fff; }
  .mdock .mdock__cta[aria-current] svg { color: #fff; }
  body.kb-open .mdock, body.menu-open .mdock { transform: translateY(110%); }
  .cookie { bottom: calc(80px + env(safe-area-inset-bottom)); left: 10px; width: calc(100% - 20px); max-height: calc(100dvh - 180px); overflow: auto; }

  /* ---------- Touch targets (44px minimum) ---------- */
  .btn, .btn--sm { min-height: 46px; }
  .cookie__actions .btn { flex: 1 1 auto; }
  .footer-col a, .footer-legal a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-col ul { gap: 0; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
  .carousel__nav { display: none; }
  .clip__fs { min-height: 44px; padding: 0 14px; }
  .link-arrow, .footer-touch .tel { display: inline-flex; align-items: center; min-height: 44px; }
  .socials a { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }

  /* ---------- Swipe rows: one card in view, the next one peeking ---------- */
  .stack, .features,
  [data-page="home"] .news, [data-page="home"] .series,
  [data-page="model"] .boat-grid, [data-page="model"] .gallery {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px;
    scrollbar-width: none;
  }
  .stack::-webkit-scrollbar, .features::-webkit-scrollbar, .news::-webkit-scrollbar,
  .series::-webkit-scrollbar, .boat-grid::-webkit-scrollbar, .gallery::-webkit-scrollbar { display: none; }
  .stack > *, .features > *,
  [data-page="home"] .news > *, [data-page="home"] .series > *,
  [data-page="model"] .boat-grid > *, [data-page="model"] .gallery > * {
    flex: 0 0 84%; scroll-snap-align: start; min-width: 0;
  }
  /* Cards beside the screen never cross the scroll-reveal line, so show them straight away */
  .stack .reveal, .features .reveal, .news .reveal, .series .reveal, .boat-grid .reveal { opacity: 1; transform: none; }

  /* Swipe dots, added by site.js under each swipe row */
  .mdots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .mdots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: width .3s, background .3s; }
  .mdots i.is-on { width: 20px; background: var(--orange); }

  /* ---------- Headings: long words (INTERCEPTOR, PROFESSIONALS) must fit a 320–430px screen ---------- */
  :root { --h2: clamp(1.5rem, 7.4vw, 2rem); }
  .page-hero h1.split-lines { font-size: clamp(1.6rem, 8.2vw, 2.6rem); }
  .cap__title, .series__card h3, .feature h3 { --wide: 100; font-stretch: 100%; }   /* narrower letters, same typeface */
  .cap__title { right: 24px; font-size: 1.3rem; }
  .series__card h3 { font-size: 1.4rem; }

  /* ---------- Footer at 320px: let the newsletter form shrink ---------- */
  .footer-top, .block, .split, .model-intro, .form-wrap, .section-head { grid-template-columns: minmax(0, 1fr); }
  .newsletter { min-width: 0; }
  .newsletter input { min-width: 0; flex: 1 1 auto; width: auto; }

  /* ---------- Home page ---------- */
  .hero { min-height: 92svh; }
  .split__sticky p:nth-of-type(2) { display: none; }   /* second heritage paragraph: on the About page */
  .stack { gap: 12px; }
  .cap { aspect-ratio: 4 / 5; }
  .features { background: none; border: 0; border-radius: 0; overflow-x: auto; }
  .feature { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; }
  [data-page="home"] .series__card { min-height: 400px; }
  .sectors { grid-template-columns: 1fr 1fr; }
  .sector { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; }
  .sector svg { width: 26px; height: 26px; }
  .sector b { font-size: .78rem; }
  .funfact__photos { display: none; }                 /* the two clips carry the story on a phone */

  /* ---------- Boat pages ---------- */
  .model-hero .btn { flex: 1 1 100%; }
  [data-page="model"] .gallery { grid-auto-rows: auto; }
  [data-page="model"] .gallery > a { height: 240px; }
  [data-page="model"] .gallery a::after { opacity: 1; transform: none; }
  [data-page="model"] .boat-grid > * { flex-basis: 78%; }

  /* Collapsible spec tables and footer columns (site.js adds the toggles on phones only) */
  .mfold__btn {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 48px; text-align: left; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  }
  .mfold__btn::after { content: "–"; color: var(--orange); font-size: 1.35rem; line-height: 1; font-weight: 400; }
  .is-folded .mfold__btn::after { content: "+"; }
  .spec h3 { padding: 0 20px; }
  .spec.is-folded .table-scroll { display: none; }
  .spec.is-folded h3 { border-bottom-color: transparent; }
  .footer-col { border-bottom: 1px solid var(--line); padding-bottom: 0; }
  .footer-col h4 { margin: 0; display: flex; align-items: center; justify-content: space-between; }
  .footer-col h4 .mfold__btn { width: 48px; justify-content: center; flex: none; }
  .footer-col.is-folded ul { display: none; }
  .footer-col ul { padding-bottom: 12px; }
  .footer-cols { grid-template-columns: 1fr; row-gap: 0; }
}

/* Very small phones (iPhone SE 1st gen, small Androids): narrower display letters, hyphenate as a last resort */
@media (max-width: 360px) {
  h1, h2, h3, h4 { --wide: 104; font-stretch: 104%; hyphens: auto; -webkit-hyphens: auto; }
  .cap__title { font-size: 1.12rem; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mdock { transition: none; }
}