/* =========================================================
   now.css — Now page theme v1
   To change the look of the Now page, edit this file only.
   The HTML structure in now.njk stays stable.
   ========================================================= */

/* --- Page header --- */
.now-updated {
  font-size: 0.8rem;
  color: #555;
  margin-bottom: 2rem;
  font-style: italic;
}

/* --- Section --- */
.now-section {
  margin-bottom: 3rem;
}

.now-section__title {
  font-family: 'Orbitron', monospace;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #1C1C1C;
  color: #F1FAEE;
  padding: 0.4rem 0.6rem;
  margin: 0 0 0.75rem 0;
  border-radius: 4px 4px 0 0;
}

/* --- Shared list reset --- */
.now-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: item;
}

/* =========================================================
   MUSIC — horizontal card (art left, meta right)
   ========================================================= */
.now-list--tracks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.now-track__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.now-track__link:hover {
  background: #f1f3e6;
  border-color: #1C1C1C;
}

.now-track__art {
  width: 48px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 2px;
}

.now-track__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.now-track__title {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-track__artist {
  font-size: 0.8rem;
  color: #444;
}

.now-track__album {
  font-size: 0.75rem;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   FILMS — poster grid
   ========================================================= */
.now-list--films {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.75rem;
}

.now-film {
  display: contents;
}

.now-film__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.now-film__link:hover {
  border-color: #1C1C1C;
  transform: translateY(-2px);
}

.now-film__poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

.now-film__meta {
  padding: 0.35rem 0.4rem;
  background: #f1f3e6;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.now-film__title {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.now-film__rating {
  font-size: 0.7rem;
  color: #e63946;
}

.now-film__rewatch {
  font-size: 0.65rem;
  color: #888;
  font-style: italic;
}

/* =========================================================
   BOOKS — horizontal card like music
   ========================================================= */
.now-list--books {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.now-book__link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.now-book__link:hover {
  background: #f1f3e6;
  border-color: #1C1C1C;
}

.now-book__cover {
  width: 40px;
  height: auto;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
}

.now-book__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.now-book__title {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
}

.now-book__author {
  font-size: 0.8rem;
  color: #444;
}

.now-book__rating {
  font-size: 0.8rem;
  color: #e63946;
}

/* =========================================================
   Responsive: single-column film list on small screens
   ========================================================= */
@media (max-width: 500px) {
  .now-list--films {
    grid-template-columns: repeat(3, 1fr);
  }
}