/* Poetry Site - Landing Page Grid
   Blake-inspired illuminated manuscript aesthetic
*/

/* === SITE HEADER === */
.site-header {
  text-align: center;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  position: relative;
}

.site-title {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.15em;
  text-transform: uppercase;

  /* Etched gold effect */
  text-shadow:
    2px 2px 2px var(--shadow-deep),
    -1px -1px 0 var(--highlight-soft),
    0 0 20px rgba(201, 169, 98, 0.15);

  animation: warmGlow var(--breathe-duration) ease-in-out infinite;
}

.site-subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-top: var(--space-md);
  font-style: italic;
  letter-spacing: 0.1em;
}

/* Decorative line under header */
.site-header::after {
  content: '';
  display: block;
  width: 150px;
  height: 2px;
  margin: var(--space-lg) auto 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--accent-copper) 20%,
    var(--accent-gold) 50%,
    var(--accent-copper) 80%,
    transparent
  );
  animation: flicker var(--flicker-duration) ease-in-out infinite;
}

/* === MAIN GRID === */
.poem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

/* === POEM CARD - Manuscript Page Style === */
.poem-card {
  position: relative;
  background: var(--bg-card);
  border-radius: 0;
  overflow: visible;

  /* Aged paper effect */
  background-image:
    linear-gradient(
      135deg,
      var(--parchment-light) 0%,
      var(--bg-card) 50%,
      var(--parchment-medium) 100%
    );

  /* Manuscript page shadow */
  box-shadow:
    0 2px 4px var(--shadow-soft),
    0 8px 16px rgba(42, 37, 32, 0.08),
    inset 0 0 30px rgba(212, 196, 168, 0.3);

  /* Subtle border like aged paper edge */
  border: 1px solid var(--parchment-aged);

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);

  /* Breathing animation */
  animation: breathe 6s ease-in-out infinite;
}

/* Stagger card animations */
.poem-card:nth-child(2n) { animation-delay: 0.5s; }
.poem-card:nth-child(3n) { animation-delay: 1s; }
.poem-card:nth-child(4n) { animation-delay: 1.5s; }

.poem-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 4px 8px var(--shadow-soft),
    0 16px 32px rgba(42, 37, 32, 0.12),
    inset 0 0 40px rgba(201, 169, 98, 0.15);
}

/* Corner ornaments for cards */
.poem-card::before,
.poem-card::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background-image: url('../assets/borders/hand-drawn-corner.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
  pointer-events: none;
  animation: flicker var(--flicker-duration) ease-in-out infinite;

  /* Copper tint */
  filter:
    brightness(0)
    saturate(100%)
    invert(50%)
    sepia(60%)
    saturate(500%)
    hue-rotate(350deg)
    brightness(90%);
}

.poem-card::before {
  top: -5px;
  left: -5px;
}

.poem-card::after {
  bottom: -5px;
  right: -5px;
  transform: rotate(180deg);
}

/* Card image placeholder */
.poem-card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background-color: var(--parchment-medium);
  border-bottom: 1px solid var(--parchment-aged);
}

/* Card content */
.poem-card-content {
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  position: relative;
  z-index: 1;
}

.poem-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);

  /* Subtle etched effect */
  text-shadow:
    1px 1px 1px var(--shadow-soft),
    -0.5px -0.5px 0 var(--highlight-soft);
}

.poem-card-excerpt {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Link wrapper */
.poem-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--space-sm);
}

.poem-card-link:hover {
  text-decoration: none;
}

.poem-card-link:hover .poem-card-title {
  color: var(--accent-copper);
}

/* === EMPTY STATE === */
.grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
  font-style: italic;
}