/*
 * Home grid, filters, pagination
 */

    /* 筛选控件样式 */
    .filter-section {
      background: linear-gradient(135deg, rgba(255,250,240,0.6), rgba(245,240,230,0.4)); backdrop-filter: blur(8px);
      border-radius: 40px;
      padding: 1.5rem 2rem;
      margin: 2rem 0;
      border: 1px solid rgba(255,255,255,0.8);
      box-shadow: 0 4px 16px rgba(140,120,110,0.08);
    }
    .filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
    }
    .filter-header h3 {
      font-size: 1.3rem;
      color: #5d6d5e;
      margin: 0;
    }
    .filter-reset {
      background: rgba(200,180,165,0.3);
      border: 1px solid rgba(180,160,145,0.5);
      border-radius: 24px;
      padding: 0.5rem 1.2rem;
      font-size: 1rem;
      color: #5a4c42;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .filter-reset:hover {
      background: rgba(180,160,145,0.4);
      transform: translateY(-2px);
    }
    .year-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
    }
    .year-filter-btn {
      background: rgba(200,180,165,0.3);
      border: 1px solid rgba(180,160,145,0.5);
      border-radius: 24px;
      padding: 0.6rem 1.2rem;
      font-size: 1rem;
      color: #5a4c42;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: 'Noto Serif SC', '楷体', 'KaiTi', serif;
    }
    .year-filter-btn:hover {
      background: rgba(180,160,145,0.4);
      transform: translateY(-2px);
    }
    .year-filter-btn.active {
      background: #ff69b4;
      color: white;
      border-color: #ff69b4;
      box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
    }

    /* 分页控件 */
    .pagination-container {
      display: flex;
      justify-content: center;
      margin: 2rem 0;
      padding: 1rem;
    }
    .pagination-container.is-hidden {
      display: none;
    }
    .pagination {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      background: linear-gradient(135deg, rgba(255,250,240,0.6), rgba(245,240,230,0.4));
      backdrop-filter: blur(8px);
      border-radius: 60px;
      padding: 0.8rem 1.5rem;
      border: 1px solid rgba(255,255,255,0.8);
      box-shadow: 0 4px 12px rgba(140,120,110,0.1);
    }
    .pagination-btn {
      background: rgba(200,180,165,0.3);
      border: 1px solid rgba(180,160,145,0.5);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      color: #5a4c42;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: 'Noto Serif SC', '楷体', 'KaiTi', serif;
    }
    .pagination-btn__arrow {
      display: inline-block;
      font-size: 1.3rem;
      line-height: 1;
      transform: translateY(-1px);
    }
    .pagination-btn:hover {
      background: rgba(180,160,145,0.4);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(140,120,110,0.15);
    }
    .pagination-btn.active {
      background: #ff69b4;
      color: white;
      border-color: #ff69b4;
      box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
    }
    .pagination-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }
    .pagination-btn:disabled:hover {
      background: rgba(200,180,165,0.3);
      box-shadow: none;
    }
    .pagination-info {
      margin: 0 1rem;
      color: #5a4c42;
      font-size: 1rem;
      font-family: 'Noto Serif SC', '楷体', 'KaiTi', serif;
    }



    /* 墓碑网格 */
    .memorial-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1.5rem;
      margin: 2rem 0;
    }
    .memorial-empty-state {
      grid-column: 1 / -1;
      padding: 2.25rem 1.5rem;
      border-radius: 24px;
      text-align: center;
      background: rgba(255, 250, 245, 0.82);
      border: 1px solid rgba(233, 220, 210, 0.9);
      color: #8f7b6d;
      box-shadow: 0 10px 24px rgba(140, 120, 110, 0.08);
    }
    .memorial-empty-state__icon {
      font-size: 2rem;
      margin-bottom: 0.85rem;
    }
    .memorial-empty-state__title {
      font-size: 1.05rem;
      font-weight: 600;
      color: #6f5e52;
      margin-bottom: 0.45rem;
    }
    .memorial-empty-state__hint {
      font-size: 0.92rem;
      line-height: 1.7;
      color: #9b877a;
    }
    @media (max-width: 1200px) {
      .memorial-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    @media (max-width: 992px) {
      .memorial-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    @media (max-width: 768px) {
      .memorial-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 480px) {
      .memorial-grid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 768px) {
      .container {
        padding: 0 1rem;
      }
    }
    
    .tombstone {
      background: linear-gradient(135deg, rgba(255,250,240,0.6), rgba(245,240,230,0.4)); backdrop-filter: blur(8px);
      width: 100%;
      max-width: none;
      border-radius: 28px;
      padding: 0.75rem;
      cursor: pointer;
      box-shadow: 0 8px 32px rgba(140,120,110,0.1);
      transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
      border: 1px solid rgba(255,255,255,0.8);
      position: relative;
      min-height: 320px;
      display: block;
      overflow: hidden;
    }
    .memorial-grid .tombstone:hover,
    .memorial-grid .tombstone:focus-visible {
      transform: none;
      background: linear-gradient(135deg, rgba(255, 252, 246, 0.72), rgba(247, 242, 236, 0.56));
      border-color: rgba(228, 189, 201, 0.96);
      box-shadow: 0 16px 40px rgba(132, 112, 104, 0.12), 0 0 0 1px rgba(236, 205, 214, 0.38);
      outline: none;
    }
    .memorial-grid .tombstone:hover .tomb-scene,
    .memorial-grid .tombstone:focus-visible .tomb-scene {
      background: linear-gradient(145deg, rgba(255, 252, 248, 0.95), rgba(245, 248, 250, 0.8));
      border-color: rgba(255, 240, 230, 0.8);
      box-shadow: 0 8px 24px rgba(120, 100, 90, 0.05), inset 0 2px 4px rgba(255, 255, 255, 1);
    }
    .tomb-decoration {
      pointer-events: none;
      z-index: 1;
    }
    .detail-decoration {
      pointer-events: none;
      z-index: 1;
    }
    
    /* 首页墓碑卡片样式 - 与详情页统一 */
    .tomb-scene {
      background: rgba(255, 250, 245, 0.9);
      border-radius: 20px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      min-height: 100%;
      padding: 1.3rem 1.2rem 1.15rem;
      border: 1px solid rgba(255, 240, 230, 0.8);
      box-shadow: 0 4px 16px rgba(140, 120, 110, 0.08);
    }
    .tomb-scene::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 20% 30%, rgba(255, 240, 245, 0.3) 0%, transparent 25%),
                  radial-gradient(circle at 80% 70%, rgba(210, 240, 230, 0.2) 0%, transparent 30%);
      pointer-events: none;
    }
    .tomb-card-head {
      display: flex;
      align-items: center;
      gap: 0.95rem;
      position: relative;
      z-index: 2;
    }
    .tomb-head-copy {
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.35rem;
    }
    .tomb-photo {
      position: relative;
      width: 86px;
      height: 86px;
      flex: 0 0 86px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid rgba(255, 255, 255, 0.94);
      background: linear-gradient(135deg, rgba(243, 230, 224, 0.94) 0%, rgba(236, 244, 238, 0.94) 100%);
      box-shadow: 0 16px 34px rgba(88, 69, 60, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }
    .tomb-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: none;
      outline: none;
      background-color: #f8f9fa;
    }
    .tomb-name {
      font-size: 1.6rem;
      font-weight: 600;
      color: #4b413d;
      text-align: left;
      text-shadow: none;
      line-height: 1.08;
      max-width: 100%;
      display: -webkit-box;
      display: box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      overflow-wrap: anywhere;
    }
    .tomb-years {
      font-size: 0.84rem;
      font-weight: 600;
      font-family: 'Nunito', 'Noto Sans SC', sans-serif;
      color: #9a8780;
      padding: 0;
      margin: 0;
      text-align: left;
      letter-spacing: 0.04em;
      text-shadow: none;
      white-space: normal;
      overflow-wrap: anywhere;
      max-width: 100%;
    }
    .tomb-summary {
      font-size: 1rem;
      font-style: normal;
      color: #645d5a;
      font-family: 'Noto Sans SC', sans-serif;
      padding: 0;
      width: 100%;
      text-align: left;
      line-height: 1.72;
      min-height: 5.16em;
      margin: 1rem 0 0;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      overflow: hidden;
      position: relative;
      z-index: 2;
      flex: 1;
    }
    .tomb-summary span {
      display: -webkit-box;
      display: box;
      -webkit-line-clamp: 6;
      line-clamp: 6;
      -webkit-box-orient: vertical;
      box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: 10.32em;
      padding: 0;
      letter-spacing: 0;
      font-weight: 400;
      max-width: none;
    }
    .tomb-summary--empty {
      visibility: hidden;
    }
    .tomb-footer {
      margin-top: 1rem;
      padding-top: 0.9rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.8rem;
      border-top: 1px solid rgba(218, 205, 198, 0.72);
      position: relative;
      z-index: 2;
      flex-wrap: wrap;
    }
    .tomb-footer__meta {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      flex-wrap: wrap;
      min-width: 0;
      color: #85766f;
      font-size: 0.84rem;
      font-weight: 600;
    }
    .tomb-footer__dot {
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: rgba(176, 158, 149, 0.88);
      flex: 0 0 4px;
    }
    .tomb-category {
      color: #675f5b;
    }
    .tomb-memory-count {
      color: #9a8a84;
    }
    .tomb-worship {
      font-size: 0.84rem;
      color: #876e70;
      display: inline-flex;
      align-items: center;
      gap: 0.52rem;
      justify-content: flex-end;
      white-space: nowrap;
      min-width: 7.9rem;
      min-height: 2.45rem;
      max-width: 100%;
      padding: 0.42rem 0.84rem;
      border-radius: 8px;
      background: rgba(255, 251, 248, 0.94);
      border: 1px solid rgba(188, 171, 164, 0.96);
      box-shadow: none;
    }
    .tomb-worship--button {
      appearance: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
      position: relative;
      transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease, opacity 0.22s ease;
      box-shadow: none;
    }
    .tomb-worship--button.is-busy {
      pointer-events: none;
    }
    .tomb-worship--button:hover {
      background: rgba(255, 249, 247, 0.98);
      color: #7a5d65;
      border-color: rgba(204, 169, 180, 0.98);
      box-shadow: 0 0 0 1px rgba(235, 205, 216, 0.24);
    }
    .tomb-worship--button:active {
      background: rgba(255, 248, 247, 0.98);
      color: #734f58;
      border-color: rgba(194, 155, 166, 0.98);
      box-shadow: 0 0 0 1px rgba(233, 199, 211, 0.22);
    }
    .tomb-worship--button:focus-visible {
      outline: none;
      border-color: rgba(204, 169, 180, 0.98);
      box-shadow: 0 0 0 1px rgba(235, 205, 216, 0.24);
    }
    .tomb-worship--button[disabled],
    .tomb-worship--button[aria-disabled="true"] {
      cursor: default;
      opacity: 0.52;
      box-shadow: none;
    }
    .tomb-worship--button.is-lit[disabled],
    .tomb-worship--button.is-lit[aria-disabled="true"] {
      opacity: 1;
      box-shadow: none;
    }
    .tomb-worship--button.is-lit {
      animation: tomb-worship-soft-settle 0.78s ease;
      background: rgba(254, 245, 247, 0.98);
      color: #744654;
      border-color: rgba(188, 138, 152, 0.98);
      box-shadow: 0 0 0 1px rgba(232, 195, 208, 0.22);
    }
    .tomb-worship__lead {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      min-width: 0;
    }
    .tomb-worship__label {
      letter-spacing: 0.02em;
      font-weight: 600;
    }
    .tomb-worship__count {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 3.4ch;
      position: relative;
      overflow: visible;
      color: #9a7d80;
      font-family: 'Nunito', 'Noto Sans SC', sans-serif;
      font-weight: 700;
      border-left: 1px solid rgba(207, 190, 183, 0.9);
      padding-left: 0.5rem;
      line-height: 1;
    }
    .tomb-worship__count-value {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 100%;
    }
    .tomb-worship__count-burst {
      position: absolute;
      left: 50%;
      top: 0;
      font-family: 'Nunito', 'Noto Sans SC', sans-serif;
      font-size: 0.84rem;
      font-weight: 800;
      line-height: 1;
      color: #b67a87;
      white-space: nowrap;
      pointer-events: none;
      animation: tomb-worship-count-burst 0.46s ease-out forwards;
    }
    .tomb-worship--button.is-lit .tomb-worship__count {
      color: #7a4b59;
      border-left-color: rgba(197, 156, 169, 0.92);
    }
    .tomb-worship--button.is-lit .tomb-worship__count-burst {
      color: #ab6b7c;
    }
    .tomb-worship i {
      color: #ab8689;
      font-size: 0.8rem;
    }
    .tomb-worship--button.is-lit i {
      color: #9d6473;
    }
    @keyframes tomb-worship-soft-settle {
      0% {
        color: #876e70;
        border-color: rgba(188, 171, 164, 0.96);
        background: rgba(255, 251, 248, 0.94);
      }
      42% {
        color: #744654;
        border-color: rgba(188, 138, 152, 0.98);
        background: rgba(254, 245, 247, 0.98);
      }
      100% {
        color: #744654;
        border-color: rgba(188, 138, 152, 0.98);
        background: rgba(254, 245, 247, 0.98);
      }
    }
    @keyframes tomb-worship-count-burst {
      0% {
        opacity: 0;
        transform: translate(-50%, 0.14rem);
      }
      20% {
        opacity: 1;
        transform: translate(-50%, -0.42rem);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -1.08rem);
      }
    }