/* ═══════════════════════════════════════════════════════════════
   responsive.css — Teh Tarik Digital · About Us Responsive Overrides
   ═══════════════════════════════════════════════════════════════ */

/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* Tablet: compress 2-col */
@media (max-width: 900px) {
  .origin-layout      { gap: 40px; }
  .tl-content-wrapper { width: 48%; }
  .tl-label           { font-size: 12px; }
  .tl-date            { font-size: 14px; }
}

/* Tablet portrait: stack to single column */
@media (max-width: 768px) {
  nav:not(.nav-lang):not(.footer-col) { padding: 0 20px; }
  .hero      { min-height: 320px; }
  .hero-text { width: 60%; margin-left: 0; padding: 48px 20px 40px; }
  #world-map { width: 65%; }
  .section   { padding: 48px 20px; }
  .site-footer .footer-main { padding: 40px 20px 32px; }

  .nav-links   { gap: 16px; }
  .nav-links a { font-size: 9px; letter-spacing: 1px; }

  .culture-grid  { grid-template-columns: 1fr 1fr; }
  .story-body    { grid-template-columns: 1fr; }
  .origin-left   { position: static; }
}

/* Small mobile */
@media (max-width: 480px) {
  .nav-links    { display: none; }
  .culture-grid { grid-template-columns: 1fr; }
  .hero         { min-height: 260px; }
  .hero-text    { width: 100%; margin-left: 0; padding: 40px 20px 32px; }
  #world-map    { opacity: 0.4; width: 100%; }
}