/* core_lifecycle_scroll.css — horizontal-scroll view for the product-lifecycle
   matrix (.lc) on smaller screens.

   The matrix (.lc-wrap) is a percentage-based aspect-ratio layout, so shrinking
   the viewport shrinks the whole box and squeezes/overlaps the (fixed-size) text.
   Below 1100px we instead KEEP the matrix at its full readable width and let the
   container scroll horizontally — with phase buttons above to jump along the
   product lifecycle. At >1100px nothing changes. */

.lc-phasenav { display: none; }
.lc-scroll { position: relative; }

@media (max-width: 1100px) {
  /* keep full size, scroll instead of squeeze */
  .lc-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    padding-bottom: 0.5rem;
  }
  .lc-scroll.is-dragging { cursor: grabbing; }
  /* Render the matrix at the EXACT desktop size (1200x700). The arrow/label boxes
     scale with the matrix width (percentage-based) but the label font-size is fixed
     (~14px); at any width below the 1200px design the boxes shrink while the text
     does not, so longer phase labels (Preclinical Research, …) wrap and overflow the
     fixed arrow height. Pinning to 1200px makes every box exactly desktop-sized, so
     the text fits identically to desktop. Height comes from aspect-ratio (700/1200);
     padding-bottom:% would resolve against the shrunk container and squeeze it flat. */
  .lc-scroll .lc-wrap {
    min-width: 1200px;
    margin: 0;
    padding-bottom: 0;
    /* Slightly taller than the desktop 1200x700: the cell heights scale with the
       box but the label font-size is fixed, so a little extra height gives the
       (otherwise cramped) arrow labels breathing room above/below. Scroll-mode only. */
    aspect-ratio: 1200 / 770;
  }

  .lc-scroll::-webkit-scrollbar { height: 6px; }
  .lc-scroll::-webkit-scrollbar-thumb { background: rgba(201,71,225,0.45); border-radius: 3px; }

  /* phase navigation (jump buttons) above the matrix */
  .lc-phasenav {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    margin: 0 0 1rem;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .lc-phasenav__hint {
    flex: 0 0 auto; align-self: center; margin-right: 0.25rem;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: rgba(20,20,28,0.55); white-space: nowrap;
  }
  .lc-phasenav__btn {
    flex: 0 0 auto;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(20,20,28,0.2);
    background: rgba(255,255,255,0.65);
    color: #14141c;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .lc-phasenav__btn:hover { border-color: var(--brand); }
  .lc-phasenav__btn.is-active {
    background: var(--brand-2);
    color: #fff;
    border-color: transparent;
  }
}

/* Below 640px the lifecycle section header + matrix area run flush to the screen
   edges (the section's inner has no horizontal padding at mobile). Give the whole
   area breathing room left/right. */
@media (max-width: 640px) {
  #lifecycle .s-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
  }
}