/* faya101.cc notes: cover photos, card / list views, article hero. Loaded after main.css. */

.view-toggle { display: inline-flex; gap: .3rem; margin: 0 0 1rem; padding: .25rem; border-radius: 999px; background: var(--bg-soft); }
.view-toggle button {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 650;
  padding: .38rem 1rem; border-radius: 999px; color: var(--ink-soft); background: transparent;
}
.view-toggle button.on { color: #fff; background: var(--accent); }

.note-list .note-card.has-shot { padding: 0; gap: 0; }
.note-card .note-shot { display: block; overflow: hidden; background: var(--bg-soft); }
.note-card .note-shot img { width: 100%; height: auto; aspect-ratio: 1200 / 750; object-fit: cover; display: block; transition: transform .35s ease; }
.note-card:hover .note-shot img { transform: scale(1.03); }
.note-card .note-body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem 1.15rem; }
.note-card.has-shot .note-body { padding: .95rem 1.1rem 1.15rem; }
.note-card .note-desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* list view: one row per note, small thumbnail on the left */
.note-list.is-list { grid-template-columns: 1fr; gap: .7rem; }
.note-list.is-list .note-card { flex-direction: row; align-items: stretch; }
.note-list.is-list .note-card .note-shot { flex: none; width: 240px; }
.note-list.is-list .note-card .note-shot img { height: 100%; aspect-ratio: auto; min-height: 150px; }
.note-list.is-list .note-card .note-body { justify-content: center; }
.note-list.is-list .note-card .note-desc { -webkit-line-clamp: 2; }

/* article cover */
.note-hero { margin: .4rem 0 1.6rem; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: var(--bg-soft); }
.note-hero img { width: 100%; height: auto; aspect-ratio: 1200 / 750; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .note-list.is-list .note-card .note-shot { width: 180px; }
}
@media (max-width: 640px) {
  .note-list.is-list .note-card .note-shot { width: 120px; }
  .note-list.is-list .note-card .note-shot img { min-height: 110px; }
  .note-list.is-list .note-card .note-desc { display: none; }
}