/* ===== Responsive hardening layer =====
   Loaded LAST so it overrides base.css / animations.css via source order.
   Every rule is scoped to a max-width query (or is a width-agnostic value fix),
   so the ≥1024px desktop layout stays untouched.
   Breakpoints mirror tokens.css: 1024 / 768 / 640, plus a 480 small-phone tier.
   !important is used ONLY where it must beat an inline style= attribute
   (gallery tile spans, hero headline font-size). */

/* ---------- Photo gallery mosaic (#thu-vien) ----------
   Desktop tiles carry inline grid spans tuned for a 12-col grid. On the narrow
   grids those spans collide (a span-5 + span-5 can't share a 6-col row), leaving
   empty slivers and a staircase. Below tablet we drop the spans entirely and use
   a clean 2-col (then 1-col) grid driven by aspect-ratio. Inline spans require
   !important to override. */
@media (max-width: 768px) {
  .grid-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
  }
  .grid-mosaic .tile {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 3;
  }
  /* feature the aerial shot and balance the trailing tile across both columns
     so the 6-tile set never leaves a lone half-row */
  .grid-mosaic .tile:first-child,
  .grid-mosaic .tile:last-child {
    grid-column: 1 / -1 !important;
    aspect-ratio: 16 / 10;
  }
  /* keep tile captions readable at all times on touch (no hover to reveal) */
  .grid-mosaic .tile .cap { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .grid-mosaic {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .grid-mosaic .tile { aspect-ratio: 16 / 11; }
}

/* ---------- Oversized quote mark (#11 Sứ mệnh) ----------
   Width-agnostic: was a fixed 140px that crowded the blockquote on phones.
   Desktop max stays 140px → no desktop change; shrinks on small viewports. */
.q-mark { font-size: clamp(72px, 12vw, 140px); }

/* ---------- Timeline as a vertical rail on phones (#10 Lộ trình) ----------
   The horizontal dot-to-dot connector only renders at ≥1024px; on phones the
   9 nodes were a plain 2-col grid with no sense of progression. Below 640px we
   stack them single-column and draw a real vertical rail (teal for completed
   segments, matching desktop semantics). 640–1023px keeps the existing grid. */
@media (max-width: 640px) {
  .tl-wrap > .grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .tl-node {
    padding-left: 30px;
    padding-bottom: 24px;
    gap: 6px;
  }
  .tl-node .t-dot {
    position: absolute;
    left: 0;
    top: 4px;
  }
  /* repurpose the connector pseudo as a vertical rail down to the next node */
  .tl-node::before {
    display: block;
    top: 6px;
    left: 5px;
    width: 2px;
    height: 100%;
    transform: none !important;            /* skip the horizontal grow-in animation */
    background: var(--border-strong);
  }
  .tl-node:last-child::before { display: none; }
  .tl-node.tl-done::before { background: var(--teal); }
}

/* ---------- Comparison table scroll affordance (#9 Bảng so sánh) ----------
   The table is min-width:640px inside an overflow-x scroller; on phones it looks
   clipped with no hint that it scrolls. A right-edge fade signals more content.
   Wrapper element added in index.html. */
@media (max-width: 768px) {
  .table-scroll-hint { position: relative; }
  .table-scroll-hint::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 44px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 82%);
    pointer-events: none;
    z-index: 2;
  }
}

/* ---------- Touch targets ----------
   Footer social pills were ~34px tall; raise to the 44px minimum on touch sizes. */
@media (max-width: 1024px) {
  footer a.rounded-full {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}