/* =====================================================================
   KURENAI CODE — mobile + off-canvas navigation
   Mobile-first refinements for the dark-crimson boutique system.
   Goal: full mobile-browser support, perfect fit, native-feeling touch.
   ===================================================================== */

/* Kill the grey iOS/Android tap flash everywhere for a native feel. */
a,
button,
.nav-toggle,
[data-press],
.project-slice-trigger {
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------
   Off-canvas navigation (phones + tablets)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 120;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
  }

  .nav-backdrop.is-visible {
    opacity: 1;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 110;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: min(82vw, 340px);
    height: 100vh;
    height: 100dvh;
    padding: calc(env(safe-area-inset-top, 0px) + 88px) 26px calc(env(safe-area-inset-bottom, 0px) + 32px);
    padding-right: max(26px, env(safe-area-inset-right, 0px));
    background: rgba(8, 8, 8, 0.94);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border-left: 1px solid rgba(217, 26, 42, 0.2);
    transform: translateX(100%);
    transition: transform 0.5s var(--ease-out);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }

  .nav-list a {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    font-size: 1.05rem;
  }

  .lang-switch {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
  }

  .lang-link {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------
   Phones
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  .kc-body {
    font-size: 16px;
  }

  .shell {
    padding-inline: 20px;
  }

  .section {
    padding: 60px 0;
  }

  .page-section {
    padding-top: 88px;
  }

  .hero {
    padding: 64px 0 52px;
  }

  .hero-shell {
    gap: 22px;
  }

  .hero-mark {
    width: 60px;
  }

  .hero-brand {
    font-size: 1.1rem;
  }

  .brand-mark {
    height: 38px;
  }

  /* Section heads stack cleanly; "view all" drops below the title. */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 26px;
  }

  .section-head--center {
    align-items: center;
    text-align: center;
  }

  /* Single-column bento — keep depth + reading order. */
  .bento-card {
    min-height: 0;
  }

  .bento-card-body {
    padding: 22px;
    gap: 12px;
  }

  .bento-card-name {
    font-size: 1.55rem;
  }

  .bento-card-hook {
    font-size: 0.96rem;
  }

  .build-cell {
    padding: 24px 22px;
  }

  .contact-card {
    padding: 20px;
  }

  .contact-field input,
  .contact-field select,
  .contact-field textarea {
    /* 16px min prevents iOS Safari from zooming the viewport on focus. */
    font-size: 16px;
  }

  .project-slice-trigger {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "index meta icon"
      "index badge icon";
    gap: 6px 14px;
    padding: 18px;
  }

  .project-slice-index {
    grid-area: index;
    align-self: start;
  }

  .project-slice-meta {
    grid-area: meta;
  }

  .project-slice-badge {
    grid-area: badge;
    justify-self: start;
    margin-top: 4px;
  }

  .project-slice-icon {
    grid-area: icon;
    align-self: center;
  }

  .project-slice-hook {
    white-space: normal;
  }

  .project-slice-name {
    font-size: 1.3rem;
  }

  .project-slice-detail {
    padding: 0 18px 22px;
  }

  .project-slice-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .project-slice-actions .btn {
    width: 100%;
  }

  .project-shell .project-lead {
    font-size: 1.02rem;
  }

  .wallpaper-preview--portrait {
    max-height: 70vh;
  }

  .wallpaper-body {
    padding: 22px;
  }

  .wallpaper-download {
    width: 100%;
    align-self: stretch;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .cadence-download-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cadence-download-card-actions .btn {
    width: 100%;
  }

  .about-text {
    font-size: 1.05rem;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  /* Lighter grain on mobile to protect performance + readability. */
  .kc-grain {
    opacity: 0.32;
  }

  .kc-glow {
    height: 50vh;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {
  .shell {
    padding-inline: 16px;
  }

  .hero-lockup {
    gap: 12px;
  }

  .bento-card-body {
    padding: 18px;
  }
}

/* ---------------------------------------------------------------------
   Touch devices — remove hover-only behaviour so taps feel native
   --------------------------------------------------------------------- */
@media (hover: none) {
  .bento-card:hover,
  .build-cell:hover,
  .wallpaper-card:hover,
  .btn-crimson:hover,
  .btn-ghost:hover {
    transform: none;
  }

  /* No neighbour-dimming or IDE corner brackets without a real pointer. */
  .bento-grid:hover .bento-card {
    opacity: 1;
    filter: none;
  }

  .bento-card::before,
  .bento-card::after {
    display: none;
  }
}

/* Landscape phones — trim vertical rhythm so content fits. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero {
    padding: 48px 0 36px;
  }

  .section {
    padding: 48px 0;
  }
}