/* ============================================================
   EXA · Subsea Excellence — mobile.css  ·  v1.1
   Phần CSS mobile (≤767px) mà class style Webflow không làm được.
   Desktop/tablet không bị ảnh hưởng: mọi rule nằm trong media query.

   Nạp ở  : head trang /subsea-excellence
            <link rel="stylesheet" href=".../subsea-excellence/mobile.css">

   PHẦN LỚN LAYOUT MOBILE NẰM TRONG WEBFLOW — class style ở breakpoint
   "Mobile landscape" (mobile portrait kế thừa). Sửa layout thì sửa ở
   Designer, không phải ở đây:
     Act 1  subsea-exel_story, _content, _act, _act-top, _timeline,
            _timeline-item, _timeline-year, _timeline-dot, _timeline-label
     Act 2  act2_phase1-grid, act2_phase1-content, a2-chart,
            act2_phase1-wrapper, act2_phase2-text-wrapper
     Act 3  act3-content-wrapper, act3-merge-lines, act3-logo
            (+ is-aquacom, is-right), act3-left-line-dot,
            act3-phase3-para-wrapper, act3-phase3-stat-list-warpper,
            act3-phase3-stat-list
     Act 4  act4-heading-wrapper, act4-component, act4_bg-image-wrapper
            (khung ngang + left theo var(--a4-focus))
     Act 4.2 act4.2-component, act4.2-content-wrapper,
            act4.2-content-block, act4.2-image-list
     Act 5  act5-heading, act5-heading-wrapper.is-absolute.is-cta

   FILE NÀY CHỈ GIỮ:
   · trạng thái / phần tử do JS bật hoặc tạo (is-current,
     exa-m-past-hero, .exa-m-tl-caption) — đi cặp với act1-globe.js
     và mobile.js;
   · class global (heading-style-*, text-size-regular, margin-*) chỉ
     được chỉnh KHI nằm trong một khối của trang này;
   · thẻ không có class (p, h2, svg trong Embed);
   · rule theo CHIỀU CAO màn hình (Webflow không có breakpoint dọc);
   · 2 class tên dính dấu cách cuối ("act3_image-wrapper ",
     "act3-right-line-dot ") — đổi tên trong Designer thì chuyển nốt
     sang class rồi xoá 2 dòng tương ứng ở dưới.

   v1.1 — sửa: chú thích mốc (.exa-m-tl-caption, do mobile.js tạo) lộ
          ra trên desktop thành dòng chữ thừa cạnh timeline. Giờ mặc
          định ẩn, chỉ hiện ở mobile.
   ============================================================ */

/* Phần tử do mobile.js tạo — chỉ dùng ở mobile */
.exa-m-tl-caption {
  display: none;
}

@media (max-width: 767px) {

  /* ---------- Act 1 · chữ ---------- */
  .subsea-exel_act .heading-style-h1 {
    font-size: 2.25rem;
    line-height: 1.08;
  }

  .subsea-exel_act-top .margin-bottom.margin-medium {
    margin-bottom: 1rem;
  }

  .subsea-exel_act-top .text-size-regular {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* ---------- Act 1 · timeline (act1-globe.js bật is-current, mobile.js tạo caption) ---------- */
  .subsea-exel_timeline-item.is-current .subsea-exel_timeline-dot {
    transform: scale(1.7);
  }

  .exa-m-tl-caption {
    display: block;
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    top: 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .exa-m-tl-caption b {
    font-weight: 700;
    margin-right: 0.375rem;
  }

  .exa-m-tl-caption span {
    opacity: 0.72;
  }

  /* ---------- Chung · "Scroll to explore" chỉ hiện ở màn hero (mobile.js) ---------- */
  html.exa-m-past-hero .oa-scroll-indicator {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* ---------- Act 2 · Phase 1 ---------- */
  .act2_phase1-content p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .act2_phase1-wrapper svg {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 15rem;
  }

  /* ---------- Act 3 ---------- */
  .act3_image-wrapper {
    top: -14svh;
  }

  /* tên class dính dấu cách */
  .act3-right-line-dot {
    left: -0.5625rem;
    width: 1.125rem;
  }

  /* tên class dính dấu cách */
  .act3-phase3-para-wrapper .text-size-regular {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .act3-phase3-stat-item .heading-style-h1 {
    font-size: 2rem;
    line-height: 1;
  }

  .act3-phase3-stat-item .heading-style-h6 {
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  /* ---------- Act 4.2 · chữ (h2, p không có class) ---------- */
  .act4-2-content-block h2 {
    font-size: 1.75rem;
    line-height: 1.1;
  }

  .act4-2-content-block p {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

/* ---------- Màn thấp (iPhone SE, 8…) ---------- */
@media (max-width: 767px) and (max-height: 700px) {
  .act2_phase1-content p {
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .act2_phase1-content .heading-style-h2 {
    font-size: 2rem;
  }

  .act4-2-image-list {
    height: 28svh;
  }
}