/* GOBO responsive overrides (Phase 4) — desktop-first base, mobile overrides.
   Breakpoints mirror gobo_responsive.36: portrait <=767px, landscape <=956px. */

/* 8. smartphone landscape (up to 956px) */
@media only screen and (max-width: 956px) and (orientation: landscape) {
  .menu ul { gap: 1.25rem; }
  .hero { min-height: 62vh; }
}

/* 7. smartphone portrait (up to 767px) */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  .site-header__row { flex-direction: column; gap: .5rem; padding-top: .75rem; }
  .menu ul { gap: 1rem; justify-content: center; }
  .hero { min-height: 58vh; }
  .portfolio-grid,
  .ramblings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .inside { padding: var(--space-lg) 0; }
  .quote-block { margin-top: 1.5rem; }
  .heading-body {
    padding: 2.25rem 1.25rem;
    /* height comes from --band-dark-h (set on .quote-block) so the empty bar
       stays the same height as the panel that holds a project body. Was a
       hardcoded 3rem, which left a 48px sliver against a 72px panel. */
    border-bottom-width: var(--band-dark-h, 6.25rem);
  }
  .home-grid {
    grid-template-columns: 1fr;     /* stack to a single column */
    gap: 0;                         /* no gap between the stacked blocks */
  }
  .home-grid__col + .home-grid__col { margin-top: 2.5rem; }
}

/* reduced motion companions */
@media only screen and (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    /* delay zeroed too: with animation-fill-mode:both an element holds its
       `from` state (opacity 0) for the whole delay, so a reduced-motion user
       would sit watching a blank space before the logo appeared */
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__rain { display: none; }
  /* belt and braces — a reveal block can never be left invisible */
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; }
}