/* 响应式布局样式 */

/* 根变量定义 - 用于响应式设计 */
:root {
  /* 移动端字体大小调整 */
  --font-size-xs: 0.75rem;  /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem;   /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem;  /* 20px */
  --font-size-2xl: 1.5rem;  /* 24px */
  --font-size-3xl: 2rem;    /* 32px */
  
  /* 移动端间距调整 */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  
  /* 移动端触摸目标尺寸 */
  --touch-target: 44px;
  
  /* 容器宽度 */
  --container-width: 1200px;
  --container-padding: 0 var(--spacing-md);
}

/* 大屏幕设备 (1200px及以上) */
@media (min-width: 1200px) {
  :root {
    --container-width: 1200px;
  }
  
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .footer-links {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 中等屏幕设备 (992px到1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  :root {
    --container-width: 960px;
  }
  
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .footer-links {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .hero-title {
    font-size: 2.2rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
}

/* 平板设备 (768px到991px) */
@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --container-width: 720px;
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .section-title {
    font-size: 1.6rem;
  }
  
  .filter-options {
    flex-wrap: wrap;
  }
  
  .filter-option {
    flex: 0 0 calc(50% - 10px);
  }
  
  /* 日历组件平板适配 */
  .calendar-header {
    flex-wrap: wrap;
  }
  
  .month-navigation {
    width: 100%;
    justify-content: space-between;
    margin-top: var(--spacing-sm);
  }
  
  .event-types {
    flex-wrap: wrap;
  }
  
  .event-type {
    flex: 0 0 calc(33.333% - 10px);
  }
  
  .day {
    min-height: 80px;
  }
}

/* 手机设备 (576px到767px) */
@media (min-width: 576px) and (max-width: 767px) {
  :root {
    --container-width: 540px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-links {
    grid-template-columns: 1fr;
  }
  
  .hero-title {
    font-size: 1.8rem;
  }
  
  .hero-subtitle {
    font-size: 0.9rem;
  }
  
  .section-title {
    font-size: 1.4rem;
  }
  
  .filter-options {
    flex-direction: column;
  }
  
  .filter-option {
    width: 100%;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 10px;
  }
  
  .hero-button {
    width: 100%;
  }
  
  /* 日历组件手机适配 */
  .calendar-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .month-navigation {
    width: 100%;
    justify-content: space-between;
  }
  
  .today-button {
    width: 100%;
  }
  
  .event-types {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .event-type {
    width: 100%;
  }
  
  .weekdays div {
    font-size: 0.8rem;
    padding: 5px;
  }
  
  .day {
    min-height: 70px;
    padding: 3px;
  }
  
  .day-number {
    font-size: 0.8rem;
  }
  
  .lunar-date {
    font-size: 0.7rem;
  }
  
  .event-item {
    padding: 2px 4px;
    font-size: 0.7rem;
  }
  
  .more-events {
    font-size: 0.7rem;
  }
}

/* 小型手机设备 (575px及以下) */
@media (max-width: 575px) {
  :root {
    --container-width: 100%;
    --container-padding: 0 15px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-links {
    grid-template-columns: 1fr;
  }
  
  .hero-title {
    font-size: 1.6rem;
  }
  
  .hero-subtitle {
    font-size: 0.9rem;
  }
  
  .section-title {
    font-size: 1.3rem;
  }
  
  .filter-options {
    flex-direction: column;
  }
  
  .filter-option {
    width: 100%;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 10px;
  }
  
  .hero-button {
    width: 100%;
  }
  
  /* 日历组件小型手机适配 */
  .calendar-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .month-navigation {
    width: 100%;
    justify-content: space-between;
  }
  
  .today-button {
    width: 100%;
  }
  
  .event-types {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .event-type {
    width: 100%;
  }
  
  .weekdays div {
    font-size: 0.75rem;
    padding: 3px;
  }
  
  .day {
    min-height: 60px;
    padding: 2px;
  }
  
  .day-number {
    font-size: 0.75rem;
  }
  
  .lunar-date {
    font-size: 0.65rem;
  }
  
  .event-item {
    padding: 1px 3px;
    font-size: 0.65rem;
  }
  
  .more-events {
    font-size: 0.65rem;
  }
  
  /* 模态框适配 */
  .modal-content {
    width: 95%;
    margin: 10px;
  }
  
  .modal-header {
    padding: 10px 15px;
  }
  
  .modal-body {
    padding: 15px;
  }
  
  .modal-footer {
    padding: 10px 15px;
  }
  
  /* 事件详情页适配 */
  .event-header {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .event-name {
    font-size: 1.4rem;
  }
  
  .event-meta {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  
  .event-actions {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .event-actions .btn {
    width: 100%;
  }
  
  .marketing-tips {
    grid-template-columns: 1fr;
  }
  
  .asset-grid {
    grid-template-columns: 1fr;
  }
  
  .sidebar-section {
    margin-bottom: var(--spacing-md);
  }
}

/* 导航栏响应式 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  nav ul {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-sm);
  }
  
  nav a {
    display: block;
    padding: var(--spacing-sm) 0;
    text-align: center;
  }
  
  .language-switch {
    margin-top: var(--spacing-sm);
    width: 100%;
    justify-content: center;
  }
}

/* 筛选器响应式 */
@media (max-width: 768px) {
  .filter-section {
    margin-bottom: var(--spacing-sm);
  }
  
  .filter-section.collapsed .filter-title,
  .filter-section.expanded .filter-title {
    padding: var(--spacing-sm);
    cursor: pointer;
  }
  
  .filter-section.expanded .filter-title {
    border-bottom: 1px solid var(--border-color);
  }
  
  .filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-sm);
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
  }
  
  .filter-toggle:hover {
    background-color: var(--bg-hover);
  }
  
  .filter-toggle i {
    transition: transform 0.3s ease;
  }
  
  .filter-section .filter-title {
    margin-bottom: 0;
  }
  
  .reset-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-sm);
    margin-top: var(--spacing-md);
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
  }
  
  .reset-filters i {
    font-size: var(--font-size-sm);
  }
  
  .reset-filters:hover {
    background-color: var(--bg-hover);
  }
}

/* 桌面端筛选器显示 */
@media (min-width: 769px) {
  .filter-toggle {
    display: none;
  }
  
  .reset-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-md);
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
  }
  
  .reset-filters i {
    font-size: var(--font-size-sm);
  }
  
  .reset-filters:hover {
    background-color: var(--bg-hover);
  }
  
  .filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
}

/* 打印样式 */
@media print {
  header, 
  footer,
  .filter-section,
  .month-navigation,
  .event-types,
  .hero-section,
  .features-section,
  .cta-section {
    display: none !important;
  }
  
  .calendar {
    border: 1px solid #000;
    box-shadow: none;
  }
  
  .calendar-header {
    border-bottom: 1px solid #000;
  }
  
  .month-navigation button,
  .today-button {
    display: none;
  }
  
  .event-types {
    display: none;
  }
  
  .weekdays {
    border-bottom: 1px solid #000;
  }
  
  .day {
    border: 1px solid #000;
    min-height: auto;
    page-break-inside: avoid;
  }
  
  .day.other-month {
    background-color: #f5f5f5;
  }
  
  .event-item {
    border: 1px solid #000;
    background-color: #fff;
    color: #000;
  }
  
  .more-events {
    color: #000;
    text-decoration: underline;
  }
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-light: #2a2a2a;
    --bg-hover: #3a3a3a;
    --border-color: #444;
    --text-color: #e0e0e0;
    --text-muted: #aaa;
    --shadow-color: rgba(0, 0, 0, 0.3);
  }
  
  body {
    background-color: #1a1a1a;
  }
  
  .calendar,
  .event-modal .modal-content,
  .filter-section,
  .filter-toggle,
  .reset-filters {
    background-color: var(--bg-light);
    border-color: var(--border-color);
  }
  
  .day {
    background-color: var(--bg-light);
    border-color: var(--border-color);
  }
  
  .day.other-month {
    background-color: #222;
  }
  
  .weekdays,
  .month-title {
    color: var(--text-color);
  }
  
  .event-detail-tips {
    background-color: var(--bg-light);
    border-color: var(--border-color);
  }
  
  .modal-button.secondary {
    background-color: var(--bg-light);
    border-color: var(--border-color);
  }
  
  .close-button {
    color: var(--text-color);
  }
  
  .close-button:hover {
    color: var(--primary-color);
  }
  
  .filter-toggle,
  .filter-section .filter-title {
    background-color: var(--bg-light);
    border-color: var(--border-color);
  }
  
  .filter-toggle:hover,
  .filter-section.expanded .filter-title {
    background-color: var(--bg-hover);
  }
  
  .filter-option {
    background-color: var(--bg-light);
    border-color: var(--border-color);
  }
  
  .filter-option:hover, 
  .filter-option.active {
    background-color: var(--bg-hover);
  }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .event-item:hover,
  .hero-button:hover,
  .filter-toggle:hover,
  .reset-filters:hover,
  .close-button:hover {
    transform: none !important;
  }
  
  .event-modal .modal-content {
    animation: none !important;
  }
}

/* 高对比度模式 */
@media (forced-colors: active) {
  .event-item {
    border: 1px solid CanvasText;
  }
  
  .event-type-dot {
    border: 1px solid CanvasText;
  }
  
  .modal-button,
  .hero-button,
  .today-button,
  .filter-toggle,
  .reset-filters {
    border: 1px solid CanvasText;
  }
}

/* 为小屏幕设备上的日历格子添加额外调整 */
@media (max-width: 768px) {
  .weekdays div {
    font-size: 0.85rem;
    padding: 6px 2px;
  }
  
  .day {
    padding: 4px;
    min-height: 70px; /* 减小高度 */
  }
  
  .day-number {
    font-size: 0.95rem;
    margin-bottom: 1px;
  }
  
  .lunar-day {
    font-size: 0.7rem;
    margin-bottom: 2px;
  }
  
  .event {
    font-size: 11px;
    padding: 2px 4px;
    margin-bottom: 3px;
  }
  
  /* 长文本事件在移动端应用更严格的裁剪 */
  .event.long-text {
    font-size: 10px;
    max-height: 1.5em;
    -webkit-line-clamp: 1;
  }
}

/* 手机屏幕上的额外调整 */
@media (max-width: 480px) {
  .days {
    gap: 0; /* 移除网格间隙，最大化有效空间 */
  }
  
  .weekdays div {
    font-size: 0.8rem;
    padding: 4px 1px;
  }
  
  .day {
    padding: 2px;
    min-height: 60px;
  }
  
  .day-number {
    font-size: 0.85rem;
  }
  
  .lunar-day {
    font-size: 0.6rem;
  }
  
  .event {
    font-size: 10px;
    padding: 1px 3px;
    margin-bottom: 2px;
  }
  
  /* 长事件在极小屏幕上显示一个省略号图标 */
  .event.long-text {
    font-size: 9px;
  }
  
  /* 当多个事件时，考虑只显示前两个事件 */
  .events-list > div:nth-child(n+3) {
    display: none;
  }
  
  /* 如果有隐藏的事件，显示一个计数器 */
  .events-list.has-more::after {
    content: "+更多";
    font-size: 9px;
    color: var(--text-secondary);
    text-align: center;
    display: block;
    padding: 1px 0;
  }
}