/* ===== Responsive Breakpoints ===== */

/* ─── Landscape orientation guard (mobile + tablet only) ─────────────────────
   max-width: 1024px excludes desktops that happen to be in landscape.
   The overlay sits above everything at z-index 9999.
   ─────────────────────────────────────────────────────────────────────────── */
.orientation-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 16, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: 32px;
}

.orientation-overlay svg {
  opacity: 0.7;
  animation: rotate-hint 2.5s ease-in-out infinite;
}

@keyframes rotate-hint {
  0%, 60%, 100% { transform: rotate(0deg); }
  30%            { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .orientation-overlay svg { animation: none; }
}

.orientation-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}

.orientation-sub {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

@media (orientation: landscape) and (max-width: 1024px) {
  .orientation-overlay { display: flex; }
}

/* ─── Shared overrides for all non-desktop sizes (≤ 990px) ──────────────── */
@media (max-width: 990px) {
  html, body { overflow-y: auto; overflow-x: hidden; }

  /* Footer: leave fixed position, flow naturally at page bottom */
  .site-footer {
    position: relative;
    bottom: auto; left: auto; right: auto;
    width: 100%;
    margin: 12px 0 28px;
    padding: 0 20px;
    line-height: 1.8;
    pointer-events: auto;
  }

  /* Pill: slightly smaller */
  .status-pill {
    top: 16px;
    left: 16px;
    padding: 8px 14px;
    font-size: 12px;
    gap: 8px;
  }

  /* Bio card: compact horizontal layout */
  .side-panel {
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 20px;
    align-items: flex-start;
  }

  .about-memoji      { width: 70px; height: 70px; margin: 0; flex-shrink: 0; }
  .about-header-text { display: flex; flex-direction: column; gap: 8px; justify-content: center; flex: 1; }
  .about-name        { text-align: left; font-size: 17px; }
  .about-role        { text-align: left; margin-top: 0; }
  .panel-divider     { width: 100%; }
  .about-bio         { width: 100%; font-size: 12px; }
  .about-list        { width: 100%; }
}

/* ─── Tablet / iPad (681px – 990px) ─────────────────────────────────────────
   Left column: bio card + guide card stacked.
   Right column: phone (spans both rows), vertically centered.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 990px) and (min-width: 681px) {
  .layout-wrapper {
    display: grid;
    grid-template-columns: 300px auto;
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: 100vh;
    padding: 80px 32px 32px;
    gap: 20px;
    justify-content: center;
    align-items: start;
  }

  .panel-left    { grid-column: 1; grid-row: 1; width: 300px; }
  .panel-right   { grid-column: 1; grid-row: 2; display: flex; width: 300px;
                   flex-direction: column; gap: 16px; padding: 20px; }
  .phone-wrapper { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: center; }

  /* Guide card content: restore vertical layout */
  .guide-items { flex-direction: column; gap: 18px; }

  /* Floating ? not needed — guide card is visible */
  .mobile-guide-wrap { display: none; }
}

/* ─── Mobile (≤ 680px) ───────────────────────────────────────────────────────
   Phone pinned to the RIGHT edge. overflow-x: hidden kills horizontal page
   scroll, so the left→right slide gesture goes straight to JS — no conflict.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  /* overflow-x: hidden kills horizontal page scroll — slide gesture goes to JS */
  html, body { overflow-x: hidden; }

  .layout-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: 100vh;
    padding: 60px 16px 20px;
    justify-content: center;
  }

  /* Hide both side panels — replaced by floating buttons */
  .panel-right { display: none; }
  .panel-left  { display: none; }

  .phone-wrapper { align-self: center; }
  .phone         { zoom: var(--phone-scale); }

  /* Show floating memoji (top-right) and guide (bottom-right) */
  .mobile-about-btn  { display: block; }
  .mobile-guide-wrap { display: flex; }
}

/* ─── Small phones (< 480px): pill collapses to dot only ─────────────────── */
@media (max-width: 480px) {
  .status-pill-text { display: none; }
  .status-pill      { padding: 10px; }
}

/* ─── Tiny phones (< 420px): dock icon fix only — phone size handled by JS scale ── */
@media (max-width: 420px) {
  .dock           { padding: 8px; gap: 4px; }
  .dock-icon      { width: 40px; height: 40px; }
  .dock-icon img  { width: 40px; height: 40px; }
}