/* PixelLoom Landing — mobile responsiveness layer.
   Handles the pieces that pure clamp()/var() spacing can't: nav swap
   (desktop NavBar <-> mobile hamburger), the bento grid becoming a
   swipeable snap-carousel, button stacking, tap feedback for touch
   devices, and footer polish at small widths. */

/* Bound DS Footer sets width:100% + inline padding but content-box sizing,
   so it overflows its siblings by its own horizontal padding. Not
   overridable via a prop, so patched here. */
footer { box-sizing: border-box; }

/* ---- Nav swap ---- */
.pl-mobile-nav { display: none; }

@media (max-width: 768px) {
  .pl-desktop-nav { display: none; }
  .pl-mobile-nav { display: block; }
}

/* Mobile menu slide-down panel */
.pl-mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease-mech, cubic-bezier(0.4,0,0.2,1));
}
.pl-mobile-menu.is-open {
  max-height: 520px;
}
.pl-mobile-menu-link {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.pl-mobile-menu.is-open .pl-mobile-menu-link {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Swipe hint (bento) ---- */
.bento-swipe-hint {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--brand-accent-soft);
  opacity: 0.75;
  margin: 14px 0 0;
}

@media (max-width: 700px) {
  .bento-swipe-hint { display: block; }

  /* Bento grid -> swipeable snap carousel. display/grid-template-columns
     are set inline by AppsBento.jsx, so overriding the container's mode
     needs !important; nothing else here does. */
  .bento-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 4px 20px 12px !important;
  }
  .bento-grid::-webkit-scrollbar { display: none; }

  .bento-tile {
    flex: 0 0 84%;
    scroll-snap-align: center;
    min-height: 430px !important;
  }
}

/* ---- Tap feedback for touch devices (no :hover available) ---- */
@media (hover: none) {
  .bento-tile:active {
    transform: scale(0.98);
    transition: transform 0.15s ease;
  }
  button:active, .hero-cta-row a:active {
    transform: scale(0.96);
  }
}

/* ---- Hero / Contact CTA buttons: full-width stack on narrow phones ---- */
@media (max-width: 480px) {
  .hero-cta-row,
  .cta-btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta-row button,
  .hero-cta-row a,
  .cta-btn-row button {
    width: 100%;
    justify-content: center;
  }
}