/* css/index.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- GRID LAYOUT --- */
.comic-grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 col */
  gap: 1.5rem;
  width: 100%;
  align-items: start; /* Prevents stretching */
}

/* Tablet: 2 Columns */
@media (min-width: 768px) {
  .comic-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 4 Columns (The "3 Rows of 4" Pattern) */
@media (min-width: 1024px) {
  .comic-grid { 
    grid-template-columns: repeat(4, 1fr); 
    gap: 2rem; /* More space for rotations */
  }

  /* --- THE REPEATING 9-ITEM CYCLE --- */
  
  /* ROW 1: [Wide 2x1] [1x1] [1x1] */
  .comic-panel:nth-child(9n + 1) {
    grid-column: span 2;
    transform: rotate(-1deg);
  }
  .comic-panel:nth-child(9n + 2) { transform: rotate(1.5deg); margin-top: 12px; }
  .comic-panel:nth-child(9n + 3) { transform: rotate(-0.5deg); }

  /* ROW 2: [1x1] [Wide 2x1] [1x1] */
  .comic-panel:nth-child(9n + 4) { transform: rotate(0.5deg); margin-top: -8px; }
  .comic-panel:nth-child(9n + 5) {
    grid-column: span 2;
    transform: rotate(1deg);
  }
  .comic-panel:nth-child(9n + 6) { transform: rotate(-1.5deg); margin-top: 10px; }

  /* ROW 3: [1x1] [1x1] [Wide 2x1] */
  .comic-panel:nth-child(9n + 7) { transform: rotate(-1deg); }
  .comic-panel:nth-child(9n + 8) { transform: rotate(0.8deg); margin-top: -5px; }
  .comic-panel:nth-child(9n + 9) {
    grid-column: span 2;
    transform: rotate(-0.5deg);
  }

  /* --- WIDE CARD STYLING --- */
  /* Give the wide cards slightly shorter images so they feel like "Strips" */
  .comic-panel:nth-child(9n + 1) .article-cover,
  .comic-panel:nth-child(9n + 5) .article-cover,
  .comic-panel:nth-child(9n + 9) .article-cover {
    height: 260px !important; /* Cinematic aspect ratio */
  }
  
  /* Make the Title slightly bigger on wide cards */
  .comic-panel:nth-child(9n + 1) h2,
  .comic-panel:nth-child(9n + 5) h2,
  .comic-panel:nth-child(9n + 9) h2 {
    font-size: 1.5rem;
  }
}

/* --- ARTICLE CARD BASE --- */
.comic-panel {
  position: relative;
  background: rgba(30, 41, 59, 0.6);
  
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transform: translateZ(0); 
  transition: border-color 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* HOVER STATE */
.comic-panel:hover {
  border-color: #6366f1;
  transform: translateY(-6px) scale(1.02) rotate(0deg) !important; 
  box-shadow: none; 
  z-index: 10;
}

/* --- TEXT STYLES --- */
.comic-panel h2 {
  line-height: 1.3;
}

/* --- TAGS --- */
.tags-float {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-badge {
  background: linear-gradient(135deg, rgba(15, 21, 51, 0.6), rgba(34, 14, 37, 0.6));
  backdrop-filter: blur(2px);
  border-radius: 12px;
  color: #a5b4fc;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}