/* 响应式样式文件 - 高级UI版本 */

/* ========================================
   移动端样式 (320px - 767px)
   ======================================== */

@media (max-width: 767px) {
  .glow-orb { opacity: 0.2; }

  .nav-container { padding: var(--spacing-sm); }
  .nav-logo .logo-link { font-size: 1.2rem; }
  .nav-toggle { display: flex; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(15, 15, 35, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    padding: 0;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal) ease;
  }

  .nav-links.active {
    max-height: 400px;
    opacity: 1;
    visibility: visible;
    padding: var(--spacing-xs) 0;
  }

  .nav-links li { width: 100%; }
  .nav-link {
    padding: var(--spacing-md);
    text-align: center;
    border-bottom: 1px solid var(--glass-border);
  }
  .nav-links li:last-child .nav-link { border-bottom: none; }

  .introduction-section {
    padding: var(--spacing-xl) var(--spacing-sm);
    padding-top: calc(var(--spacing-xl) + 60px);
    min-height: auto;
  }

  .intro-greeting { font-size: 1.8rem; margin-bottom: var(--spacing-md); }
  .intro-text { font-size: 0.95rem; line-height: 1.7; }
  .intro-tags { gap: var(--spacing-xs); margin-top: var(--spacing-lg); }
  .tag { padding: 6px 14px; font-size: 0.8rem; }
  .section-title { font-size: 1.6rem; margin-bottom: var(--spacing-lg); }

  .hobbies-section, .traits-section, .friendship-section {
    padding: var(--spacing-xl) var(--spacing-sm);
  }

  .hobby-categories, .trait-cards { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .hobby-card, .trait-card, .friend-type-card { padding: var(--spacing-md); }
  .hobby-card-icon { width: 56px; height: 56px; font-size: 1.5rem; }
  .hobby-card-title, .trait-title, .friend-type-title { font-size: 1.15rem; }
  .hobby-desc, .trait-description, .friend-type-description { font-size: 0.9rem; }
  .trait-icon, .friend-type-icon { width: 70px; height: 70px; font-size: 2rem; }

  .friend-type-cards { grid-template-columns: 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
  .criteria-list { flex-direction: column; gap: var(--spacing-sm); }
  .criteria-item { min-width: 100%; max-width: 100%; padding: var(--spacing-sm); }
  .criteria-icon { font-size: 1.6rem; }

  .friendship-cta { padding: var(--spacing-md); margin: 0 var(--spacing-xs); }
  .cta-text { font-size: 0.95rem; }
  .cta-button { padding: 12px 24px; font-size: 0.9rem; }

  .site-footer { padding: var(--spacing-lg) var(--spacing-sm); }
  .footer-copyright p { font-size: 0.8rem; }

  /* 联系我板块移动端 */
  .contact-section { padding: var(--spacing-xl) var(--spacing-sm); }
  .contact-wrapper { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .contact-cards { gap: var(--spacing-sm); }
  .contact-card { padding: var(--spacing-sm); }
  .contact-card-icon { width: 50px; height: 50px; font-size: 1.5rem; }
  .contact-card-value { font-size: var(--font-size-base); }
  .contact-form-wrapper { padding: var(--spacing-md); }
  .form-title { font-size: var(--font-size-lg); }
  .wechat-modal-content { padding: var(--spacing-md); }
  .wechat-id { font-size: var(--font-size-xl); }
}

@media (max-width: 374px) {
  .intro-greeting { font-size: 1.5rem; }
  .intro-text { font-size: 0.9rem; }
  .tag { padding: 5px 10px; font-size: 0.75rem; }
  .section-title { font-size: 1.4rem; }
  .hobby-card-title, .trait-title, .friend-type-title { font-size: 1.05rem; }
  .cta-button { padding: 10px 20px; font-size: 0.85rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .nav-toggle { display: none; }
  .nav-links {
    display: flex; position: static; max-height: none; opacity: 1;
    visibility: visible; overflow: visible; background: transparent;
    backdrop-filter: none; border: none; padding: 0; gap: var(--spacing-xs);
  }
  .nav-link { padding: var(--spacing-xs) var(--spacing-sm); font-size: 0.9rem; }
  .introduction-section { padding: var(--spacing-xl) var(--spacing-md); }
  .section-container { max-width: 700px; }
  .intro-greeting { font-size: 2.2rem; }
  .hobby-categories { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
  .hobby-categories .hobby-card:last-child { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
  .trait-cards { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
  .friend-type-cards { grid-template-columns: repeat(2, 1fr); max-width: 800px; }
  .criteria-item { min-width: 240px; max-width: 320px; }

  /* 联系我板块平板端 */
  .contact-wrapper { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .contact-cards { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .contact-card { flex: 1; min-width: 200px; max-width: 280px; }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav-links {
    display: flex; position: static; max-height: none; opacity: 1;
    visibility: visible; overflow: visible; background: transparent;
    backdrop-filter: none; border: none; padding: 0; gap: var(--spacing-sm);
  }
  .nav-container { padding: var(--spacing-sm) var(--spacing-xl); }
  .introduction-section { padding: var(--spacing-2xl) var(--spacing-lg); }
  .section-container { max-width: 900px; }
  .intro-greeting { font-size: var(--font-size-3xl); }
  .hobby-categories { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); }
  .hobby-categories .hobby-card:last-child { grid-column: auto; max-width: none; margin: 0; }
  .trait-cards { grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); }
  .friend-type-cards { max-width: 900px; }
  .criteria-item { min-width: 300px; max-width: 360px; }
  .site-footer { padding: var(--spacing-xl) var(--spacing-lg); }

  /* 联系我板块桌面端 */
  .contact-wrapper { grid-template-columns: 1fr 1.3fr; }
}

@media (min-width: 1440px) {
  .nav-container { max-width: 1600px; }
  .intro-greeting { font-size: 4rem; }
}

@media (min-width: 1920px) {
  .nav-container { max-width: 1800px; }
  .introduction-section { padding: calc(var(--spacing-2xl) * 1.5) var(--spacing-xl); }
  .hobbies-section, .traits-section, .friendship-section, .contact-section { padding: calc(var(--spacing-2xl) * 1.2) var(--spacing-xl); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .glow-orb, .particles-bg { display: none; }
}