/* ========================================================================== 
   PROJECT 365 — Editorial month covers
   Monthly cards use restrained visual motifs instead of random placeholder art.
   ========================================================================== */

.folder-card__cover {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 22px 18px;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 20%, rgba(192, 138, 70, 0.16), transparent 34%),
    linear-gradient(135deg, var(--surface-raised), var(--ink));
}

.folder-card__cover::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.72;
}

.folder-card__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 14, 16, 0.02), rgba(14, 14, 16, 0.72));
  pointer-events: none;
}

.folder-card__cover-number,
.folder-card__cover-title,
.folder-card__cover-tagline {
  position: relative;
  z-index: 2;
}

.folder-card__cover-number {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent-strong);
}

.folder-card__cover-title {
  margin-top: auto;
  padding-top: 38px;
  font-family: var(--font-display);
  font-size: clamp(27px, 3vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text);
  max-width: 90%;
}

.folder-card__cover-tagline {
  margin-top: 28px;
  font-size: 10.5px;
  line-height: 1.45;
  color: rgba(241, 237, 230, 0.68);
  max-width: 28ch;
}

.folder-card__cover-motif {
  position: absolute;
  right: -10px;
  top: -12px;
  width: 58%;
  height: 100%;
  z-index: 0;
  opacity: 0.45;
  pointer-events: none;
}

/* New Beginnings: opening arc */
.folder-card__cover[data-motif="beginnings"]::before {
  background: radial-gradient(ellipse at 100% 100%, transparent 0 38%, rgba(217,164,98,.35) 38.5% 39%, transparent 39.5% 50%, rgba(217,164,98,.18) 50.5% 51%, transparent 51.5%);
}

/* Love: two overlapping circles */
.folder-card__cover[data-motif="love"]::before {
  background: radial-gradient(circle at 48% 42%, transparent 0 22%, rgba(217,164,98,.28) 22.5% 23.5%, transparent 24%), radial-gradient(circle at 68% 42%, transparent 0 22%, rgba(217,164,98,.22) 22.5% 23.5%, transparent 24%);
}

/* Growth: ascending lines */
.folder-card__cover[data-motif="growth"]::before {
  background: repeating-linear-gradient(155deg, transparent 0 18px, rgba(217,164,98,.17) 19px 20px, transparent 21px 36px);
  transform: translateY(20px) rotate(-4deg) scale(1.25);
}

/* Healing: soft concentric rings */
.folder-card__cover[data-motif="healing"]::before {
  background: repeating-radial-gradient(circle at 72% 42%, transparent 0 15px, rgba(217,164,98,.18) 16px 17px, transparent 18px 31px);
}

/* Purpose: target / focus */
.folder-card__cover[data-motif="purpose"]::before {
  background: repeating-radial-gradient(circle at 75% 42%, transparent 0 12px, rgba(217,164,98,.22) 13px 14px, transparent 15px 27px);
}

/* Reflection: mirrored vertical bands */
.folder-card__cover[data-motif="reflection"]::before {
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(217,164,98,.12) 13px 14px, transparent 15px 27px);
  transform: skewY(-12deg) scale(1.3);
}

/* Relationships: linked paths */
.folder-card__cover[data-motif="relationships"]::before {
  background: radial-gradient(circle at 35% 35%, rgba(217,164,98,.26) 0 3px, transparent 4px), radial-gradient(circle at 70% 62%, rgba(217,164,98,.22) 0 3px, transparent 4px), linear-gradient(35deg, transparent 47%, rgba(217,164,98,.18) 48% 49%, transparent 50%);
}

/* Knowing Yourself: mirror split */
.folder-card__cover[data-motif="knowing"]::before {
  background: linear-gradient(90deg, transparent 0 47%, rgba(217,164,98,.22) 48% 49%, transparent 50%), linear-gradient(165deg, transparent 0 35%, rgba(217,164,98,.12) 36% 37%, transparent 38%);
}

/* Discipline: repeated ticks */
.folder-card__cover[data-motif="discipline"]::before {
  background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(217,164,98,.17) 11px 12px, transparent 13px 30px);
  transform: rotate(-8deg) scale(1.2);
}

/* Work: architectural grid */
.folder-card__cover[data-motif="work"]::before {
  background: linear-gradient(rgba(217,164,98,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(217,164,98,.12) 1px, transparent 1px);
  background-size: 18px 18px;
  transform: perspective(300px) rotateY(-12deg) scale(1.3);
}

/* Emotions: flowing waves */
.folder-card__cover[data-motif="emotions"]::before {
  background: repeating-radial-gradient(ellipse at 20% 90%, transparent 0 18px, rgba(217,164,98,.16) 19px 20px, transparent 21px 38px);
  transform: rotate(-12deg) scale(1.3);
}

/* Home: frame / window */
.folder-card__cover[data-motif="home"]::before {
  background: linear-gradient(90deg, transparent 0 34%, rgba(217,164,98,.16) 35% 36%, transparent 37% 64%, rgba(217,164,98,.16) 65% 66%, transparent 67%), linear-gradient(0deg, transparent 0 47%, rgba(217,164,98,.16) 48% 49%, transparent 50%);
  transform: scale(1.2);
}

@media (max-width: 700px) {
  .folder-card__cover {
    aspect-ratio: 16 / 10;
    padding: 18px 20px 16px;
  }

  .folder-card__cover-title {
    font-size: 28px;
  }
}