/* ============================================================
   U3S ENGITECH — JOURNEY PAGE TIMELINE FIX (mobile only)
   Fixes: timeline content forced into 56px column on mobile,
   causing each character to wrap to its own line.
   Cause: desktop .timeline-item.left/.right rules in main.css
   have higher specificity than mobile @media override, so they
   keep winning even on mobile.
   Solution: match the .left/.right specificity inside the
   mobile media query AND use !important to guarantee the win.
   ============================================================ */

@media (max-width: 768px) {

  /* Force the 2-column mobile grid */
  .timeline-item,
  .timeline-item.left,
  .timeline-item.right {
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    gap: 0.5rem !important;
  }

  /* Marker always in column 1 on mobile */
  .timeline-item .timeline-marker,
  .timeline-item.left .timeline-marker,
  .timeline-item.right .timeline-marker {
    grid-column: 1 !important;
    margin: 0.75rem auto 0 !important;
  }

  /* Content always in column 2 — this is the actual fix */
  .timeline-item .timeline-content,
  .timeline-item.left .timeline-content,
  .timeline-item.right .timeline-content {
    grid-column: 2 !important;
    text-align: left !important;
    /* These two prevent any other narrow-column edge cases */
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  /* Hide spacer on mobile (only used in 3-col desktop layout) */
  .timeline-item .timeline-spacer,
  .timeline-item.left .timeline-spacer,
  .timeline-item.right .timeline-spacer {
    display: none !important;
  }

  /* Reset reveal animations that translate content off-screen */
  .timeline-item.left .timeline-content,
  .timeline-item.right .timeline-content {
    transform: none !important;
  }

  /* Tighten timeline year/title sizing on mobile so they fit */
  .timeline-year { font-size: 1.8rem !important; }
  .timeline-title { font-size: 1rem !important; line-height: 1.3 !important; }
  .timeline-text { font-size: 0.9rem !important; line-height: 1.6 !important; }
}