/* ═══════════════════════════════════════════
   Stacked Cards — Healthy Living Tips Visual
   ═══════════════════════════════════════════ */

.tips-stack {
  position: relative;
  width: 100%;
  height: 420px;
  perspective: 800px;
}

.tip-card {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
  width: 220px;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .6s;
}

.tip-card__img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.tip-card__color {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tip-card__color svg {
  width: 32px;
  height: 32px;
  opacity: .5;
}

.tip-card__body {
  padding: 16px;
}

.tip-card__cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tip-card__cat::before {
  content: '';
  width: 12px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
}

.tip-card__title {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 6px;
}

.tip-card__excerpt {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  font-weight: 400;
}

/* Card positions */
.tip-card--1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(2deg);
  z-index: 4;
  width: 240px;
}
.tip-card--1 .tip-card__img {
  height: 140px;
}

.tip-card--2 {
  top: 10%;
  left: 2%;
  transform: rotate(-6deg) scale(.85);
  z-index: 2;
  filter: blur(1.5px);
  opacity: .7;
}

.tip-card--3 {
  top: 0;
  right: 0;
  transform: rotate(4deg) scale(.78);
  z-index: 1;
  filter: blur(2px);
  opacity: .55;
  width: 200px;
}

.tip-card--4 {
  bottom: 8%;
  left: 12%;
  transform: rotate(-3deg) scale(.9);
  z-index: 3;
  filter: blur(.5px);
  opacity: .85;
}

/* Hover effects */
.tips-stack:hover .tip-card--1 {
  transform: translate(-50%, -50%) rotate(0deg) scale(1.02);
}
.tips-stack:hover .tip-card--2 {
  transform: rotate(-4deg) scale(.87);
  opacity: .8;
}
.tips-stack:hover .tip-card--4 {
  transform: rotate(-1deg) scale(.92);
  opacity: .9;
}


/* ═══════════════════════════════════════════
   Responsive — Stacked Cards
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .tips-stack {
    height: 360px;
  }
  .tip-card {
    width: 190px;
  }
  .tip-card--1 {
    width: 210px;
  }
}

@media (max-width: 768px) {
  .tips-stack {
    height: 300px;
  }
  .tip-card {
    width: 160px;
  }
  .tip-card--1 {
    width: 180px;
  }
  .tip-card--1 .tip-card__img {
    height: 100px;
  }
  .tip-card__img {
    height: 90px;
  }
}