/* ─────────────────────────────────────────
   Blue Marine Line — Mobile Overrides
   All breakpoints ≤ 768px
   ───────────────────────────────────────── */

@media (max-width: 768px) {

  /* ══ NAV ════════════════════════════════ */

  .nav-portal-btn { display: none; }

  /* Push lang toggle flush against hamburger */
  .nav-left { flex: 1; }
  .nav-cta  { margin-right: 4px; }

  /* Mobile dropdown — animated */
  #mobile-nav {
    display: flex !important;
    padding-bottom: 8px;
    border-radius: 0 0 16px 16px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  #mobile-nav.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
  }
  #mobile-nav a:last-child { border-bottom: none; }

  /* ══ HERO ══════════════════════════════ */

  /* Hero becomes a column: image area on top, widget section below */
  #hero {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    overflow: visible;
  }

  /* Image and overlay only cover the top 65vh */
  .hero-img,
  .hero-overlay {
    bottom: auto !important;
    height: 65vh;
  }

  /* Content fills the image area */
  .hero-content {
    width: 100%;
    min-height: 65vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-right: clamp(24px, 6vw, 48px);
  }

  /* Widget sits below hero image as a white section */
  .hero-tracking-widget {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    background: #ffffff;
    border: none;
    border-top: 1px solid rgba(3,39,65,.08);
    border-radius: 0;
    padding: 24px clamp(20px, 5vw, 40px);
  }

  /* Force white styling on all widget elements */
  .hero-tracking-widget .tracking-title {
    color: var(--navy) !important;
  }
  .hero-tracking-widget .tracking-input {
    background: var(--off-white) !important;
    border-color: rgba(3,39,65,.15) !important;
    color: var(--navy) !important;
  }
  .hero-tracking-widget .tracking-input::placeholder {
    color: #7A96B2 !important;
  }
  .hero-tracking-widget .tracking-btn {
    background: var(--navy) !important;
    border: none !important;
    color: #fff !important;
  }
  .hero-tracking-widget .tracking-btn:hover {
    background: var(--navy-mid) !important;
  }

  /* ══ PAGE BANNER ════════════════════════ */

  .page-banner { min-height: 260px; }
  .page-banner h1 { font-size: clamp(32px, 8vw, 48px); }

  /* ══ ABOUT SECTION (index) ══════════════ */

  .about-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  /* ══ TWO-COLUMN GRIDS (all pages) ═══════ */

  .two-col-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* Image blocks inside two-col-grid: full width, reasonable height */
  .two-col-grid > div[style*="aspect-ratio"],
  .two-col-grid > div[style*="border-radius"] {
    width: 100% !important;
    min-height: 240px;
  }

  /* ══ CTA ROWS (all pages) ═══════════════ */

  .cta-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  .cta-row .btn,
  .cta-row a[class*="btn"] {
    width: 100%;
    justify-content: center;
  }

  /* ══ ROUTE CARDS (index) ════════════════ */

  .route-card-inner {
    padding: 20px !important;
    gap: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* ══ WHY SECTION ════════════════════════ */

  .why-stat-card { padding: 16px 0; }
  .why-stat-big  { font-size: 2rem; }

  /* ══ PILLAR GRID ════════════════════════ */

  .pillar {
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 20px 0;
  }

  /* ══ PORTAL ══════════════════════════════ */

  .portal-mockup {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  /* Reset the desktop overflow trick */
  .portal-mockup img {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Keep only the button — hide icon, title, subtitle */
  .portal-cta-icon,
  .portal-cta-title,
  .portal-cta-sub {
    display: none;
  }

  .portal-cta-card {
    padding: 0;
    min-width: 0;
    margin-left: 0;
    text-align: left;
  }

  /* ══ SECTIONS — general spacing ════════ */

  .section-pad { padding: clamp(48px, 10vw, 80px) 0; }

  /* ══ BUTTONS ════════════════════════════ */

  .btn-lg {
    padding: 14px 24px;
    font-size: 0.875rem;
  }

  /* ══ FOOTER ══════════════════════════════ */

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    align-items: center;
  }

  .footer-legal {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  /* ══ FORMS (contacto) ═══════════════════ */

  .category-selector {
    grid-template-columns: 1fr !important;
  }

  /* ══ CONTACT INFO ════════════════════════ */

  .contact-detail { align-items: flex-start; }

}

/* Phones only (≤ 480px) — extra tightening */
@media (max-width: 480px) {

  .display-xl { font-size: clamp(40px, 12vw, 60px); }

  .hero-tracking-widget { padding: 16px; }

  .route-card-inner { padding: 16px !important; }

  .quote-form { padding: 24px 16px !important; }

  .cargo-modal-box { padding: 32px 16px 24px !important; }

  .cargo-modal-cards { grid-template-columns: 1fr !important; }

}