/* ============================================
   回忆地图 — Home Page Styles
   500px Hero Banner + Stats Cards + Pinterest Grid
   治愈系高级感
   ============================================ */

/* === Hero Banner === */
.home-hero{
  position:relative;
  height:500px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:linear-gradient(180deg, #FFF0F5 0%, #FFF8FA 30%, #FFE4ED 70%, #FFF8FA 100%);
}

/* Decorative blobs */
.home-hero::before{
  content:'';
  position:absolute;
  top:-120px;
  right:-80px;
  width:350px;
  height:350px;
  background:radial-gradient(circle, rgba(255,111,174,0.12) 0%, transparent 70%);
  border-radius:50%;
}
.home-hero::after{
  content:'';
  position:absolute;
  bottom:-80px;
  left:-60px;
  width:280px;
  height:280px;
  background:radial-gradient(circle, rgba(255,199,220,0.15) 0%, transparent 70%);
  border-radius:50%;
}

.home-hero__content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.home-hero__icon{
  font-size:56px;
  margin-bottom:8px;
  animation:floatUpDown 3s ease-in-out infinite;
}

.home-hero__label{
  font-size:var(--font-body-sm);
  font-weight:var(--weight-medium);
  color:var(--color-body);
  letter-spacing:0.04em;
}

.home-hero__days{
  font-size:88px;
  font-weight:var(--weight-bold);
  color:var(--color-primary);
  line-height:1;
  letter-spacing:-0.04em;
  background:linear-gradient(135deg, var(--color-primary), #ff8ec4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.home-hero__subtitle{
  font-size:var(--font-body-md);
  color:var(--color-body);
  margin-top:4px;
  letter-spacing:0.02em;
}

.home-hero__stats{
  display:flex;
  gap:var(--space-xl);
  margin-top:var(--space-lg);
}

.home-hero__stat{
  text-align:center;
}
.home-hero__stat-value{
  font-size:var(--font-display-md);
  font-weight:var(--weight-bold);
  color:var(--color-ink);
  letter-spacing:-0.02em;
}
.home-hero__stat-label{
  font-size:var(--font-caption-sm);
  color:var(--color-muted);
  margin-top:2px;
}

/* CTA buttons */
.home-hero__actions{
  display:flex;
  gap:var(--space-md);
  margin-top:var(--space-xl);
}
.home-hero__actions .btn{
  padding:14px 32px;
  border-radius:var(--radius-full);
  font-size:var(--font-body-md);
}

/* Hero photo background */
.home-hero--with-photo{
  background-size:100% auto;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:var(--radius-2xl);
  overflow:hidden;
}
.home-hero--with-photo::before,
.home-hero--with-photo::after{
  display:none !important;
}
.home-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.5) 100%);
  z-index:0;
  pointer-events:none;
}
.home-hero--with-photo > *:not(.home-hero__overlay){
  position:relative;
  z-index:1;
}
.home-hero--with-photo .home-hero__icon,
.home-hero--with-photo .home-hero__label,
.home-hero--with-photo .home-hero__cd-number,
.home-hero--with-photo .home-hero__cd-label,
.home-hero--with-photo .home-hero__date,
.home-hero--with-photo .home-hero__stats span{
  color:#fff;
  -webkit-text-fill-color:inherit;
}
.home-hero--with-photo .home-hero__days{
  color:#fff;
  background:none;
  -webkit-text-fill-color:#fff;
  text-shadow:0 2px 20px rgba(255,111,174,0.6);
}
.home-hero--with-photo .home-hero__label,
.home-hero--with-photo .home-hero__subtitle,
.home-hero--with-photo .home-hero__stats span{
  color:rgba(255,255,255,0.9);
}

/* === Stats Cards Row === */
.home-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  padding:0 24px;
  max-width:1280px;
  margin:-40px auto 0;
  position:relative;
  z-index:2;
}

/* Individual stat card */
.stat-card{
  background:var(--color-glass-strong);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:var(--glass-border);
  border-radius:var(--radius-xl);
  padding:24px;
  text-align:center;
  box-shadow:var(--shadow-card);
  transition:all var(--transition-normal);
  cursor:default;
}
.stat-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-elevated);
}
.stat-card--clickable{cursor:pointer}
.stat-card__icon{
  font-size:28px;
  margin-bottom:8px;
}
.stat-card__value{
  font-size:var(--font-display-lg);
  font-weight:var(--weight-bold);
  color:var(--color-ink);
  letter-spacing:-0.02em;
  line-height:1.2;
}
.stat-card__label{
  font-size:var(--font-caption-sm);
  color:var(--color-muted);
  margin-top:4px;
}

/* === More Anniversaries === */
.home-anniversaries{
  padding:var(--space-xxl) 24px 0;
  max-width:1040px;
  margin:0 auto;
}

.anniversary-cards-row{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:16px;
}

.anniversary-card{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--color-surface-card);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-card);
  transition:all var(--transition-normal);
  border:1px solid var(--color-hairline-soft);
}
.anniversary-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-elevated);
}
.anniversary-card__icon{font-size:36px;flex-shrink:0}
.anniversary-card__info{flex:1;min-width:0}
.anniversary-card__title{
  font-size:var(--font-title-sm);
  font-weight:var(--weight-semibold);
  color:var(--color-ink);
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.anniversary-card__date{
  font-size:var(--font-caption-sm);
  color:var(--color-muted);
  margin-bottom:4px;
}
.anniversary-card__countdown{
  font-size:var(--font-caption-sm);
  color:var(--color-primary);
  font-weight:var(--weight-medium);
}
.anniversary-card__countdown--today{font-weight:var(--weight-bold)}
.anniversary-card__countdown--past{color:var(--color-muted-soft)}

/* === Recent Memories (Pinterest Masonry) === */
.home-memories{
  padding:var(--space-xxl) 24px 64px;
  max-width:1280px;
  margin:0 auto;
}

/* 晾衣绳挂照片 — 样式已移至 home.js 内联注入（memories-hang-area + rope__line + polaroid） */

/* Memory card */
.memory-card{
  background:var(--color-surface-card);
  border-radius:var(--radius-lg);
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--shadow-card);
  border:1px solid var(--color-hairline-soft);
  transition:all var(--transition-normal);
  display:inline-block;
  width:100%;
}
.memory-card:hover{
  transform:scale(1.03);
  box-shadow:var(--shadow-glow);
  border-color:var(--color-accent);
}

.memory-card__photo{
  position:relative;
  overflow:hidden;
  background:var(--color-surface-soft);
}
.memory-card__photo img{
  width:100%;
  display:block;
  transition:transform 0.5s ease;
  object-fit:cover;
}
.memory-card:hover .memory-card__photo img{
  transform:scale(1.06);
}

/* Gradient overlay on photo */
.memory-card__photo::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:60px;
  background:linear-gradient(to top, rgba(0,0,0,0.35), transparent);
  pointer-events:none;
  opacity:0;
  transition:opacity var(--transition-normal);
}
.memory-card:hover .memory-card__photo::after{opacity:1}

.memory-card__photo-placeholder{
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-muted-soft);
  font-size:40px;
  background:var(--color-surface-soft);
}

/* Photo info overlay */
.memory-card__overlay{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:12px 14px;
  color:#fff;
  opacity:0;
  transform:translateY(8px);
  transition:all var(--transition-normal);
  z-index:1;
}
.memory-card:hover .memory-card__overlay{
  opacity:1;
  transform:translateY(0);
}
.memory-card__overlay-city{
  font-size:var(--font-body-sm);
  font-weight:var(--weight-semibold);
}
.memory-card__overlay-date{
  font-size:var(--font-caption-sm);
  opacity:0.85;
}

/* Bottom meta (non-hover state) */
.memory-card__meta{
  padding:12px 14px;
}
.memory-card__city{
  font-size:var(--font-body-sm);
  font-weight:var(--weight-semibold);
  color:var(--color-ink);
  display:flex;
  align-items:center;
  gap:4px;
}
.memory-card__date{
  font-size:var(--font-caption-sm);
  color:var(--color-muted);
  margin-top:2px;
}

/* === Responsive === */
@media (max-width:744px){
  .home-hero{
    height:400px;
    padding:0 16px;
  }
  .home-hero__days{font-size:64px}
  .home-hero__stats{gap:var(--space-base)}
  .home-hero__stat-value{font-size:var(--font-display-sm)}
  .home-stats{grid-template-columns:repeat(4,1fr);gap:12px}
  .anniversary-cards-row{grid-template-columns:1fr}
}