/* =====================================================================
   Library view switcher (library-view.js): Grid / List / Compact.
   Grid = the page's normal layout (no rules here). List = one card per
   row, picture on the left. Compact = a dense title list, no pictures.
   !important where the Scholar's Desk design (desk.css) or the video
   size settings set card sizes with !important.
   ===================================================================== */

/* ---- the buttons ---- */
.lv-switch {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid rgba(149, 115, 56, 0.45);
  border-radius: 999px;
  background: #fbf8f2;
  padding: 3px;
  gap: 2px;
}
.lv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: #5a5248;
  font: 600 0.85rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lv-btn:hover { background: rgba(162, 125, 61, 0.12); color: #2e2a26; }
.lv-btn[aria-pressed="true"] { background: #2e2a26; color: #f4efe4; }
.lv-btn:focus-visible { outline: 2px solid #a27d3d; outline-offset: 2px; }
.lv-has-switch { display: flex !important; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.lv-has-switch > label:first-child, .lv-has-switch > .topic-page-search { flex: 1 1 260px; }
.lv-bar { display: flex; justify-content: flex-end; max-width: 1520px; margin: 0 auto 1rem; padding: 0 1rem; }
.lv-bar:has(+ [data-lv]:empty) { display: none; }
@media (max-width: 520px) {
  .lv-btn-text { display: none; }
  .lv-btn { padding: 0.5rem 0.7rem; }
}

/* ---- List and Compact: one column ---- */
html [data-lv="list"],
html [data-lv="compact"] {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0.9rem !important;
}
html [data-lv="compact"] { gap: 0 !important; }
html [data-lv="list"] > *,
html [data-lv="compact"] > * { max-width: none !important; width: 100%; margin: 0 !important; }
html [data-lv] > .empty-state { text-align: center; }

/* ---- List: picture left, text right ---- */
html [data-lv="list"] .entry-card-shell,
html [data-lv="list"] .infographics-card,
html [data-lv="list"] .pp-card,
html [data-lv="list"] .video-card-link {
  flex-direction: row !important;
  align-items: stretch;
  gap: 1.25rem;
}
html [data-lv="list"] .entry-visual,
html [data-lv="list"] .infographics-card-image,
html [data-lv="list"] .pp-card-cover,
html [data-lv="list"] .video-card-visual {
  flex: 0 0 240px !important;
  width: 240px !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 2 !important;
  margin: 0 !important;
  object-fit: cover;
  align-self: flex-start;
}
html [data-lv="list"] .video-card-visual { aspect-ratio: 16 / 9 !important; }
html [data-lv="list"] .infographics-card-image { border-bottom: 0; border-right: 1px solid rgba(74, 67, 60, 0.12); align-self: stretch; aspect-ratio: auto !important; min-height: 150px !important; }
html [data-lv="list"] .infographics-card-body,
html [data-lv="list"] .video-card-body,
html [data-lv="list"] .pp-card-body { flex: 1 1 auto; min-width: 0; }
html [data-lv="list"] .infographics-card:hover,
html [data-lv="list"] .content-entry-card:hover { transform: none; }
@media (max-width: 640px) {
  html [data-lv="list"] .entry-card-shell,
  html [data-lv="list"] .infographics-card,
  html [data-lv="list"] .pp-card,
  html [data-lv="list"] .video-card-link { gap: 0.8rem; }
  html [data-lv="list"] .entry-visual,
  html [data-lv="list"] .infographics-card-image,
  html [data-lv="list"] .pp-card-cover,
  html [data-lv="list"] .video-card-visual { flex-basis: 108px !important; width: 108px !important; aspect-ratio: 1 / 1 !important; min-height: 0 !important; }
  html [data-lv="list"] .video-card-play { width: 2.2rem; height: 2.2rem; }
  html [data-lv="list"] :is(.article-body-preview, .infographics-card-description, .pp-card-summary, .video-card-body p) { -webkit-line-clamp: 2 !important; }
  html [data-lv="list"] :is(.entry-read-link, .infographics-card-footer, .infographics-card-tags, .pp-card-cta) { display: none !important; }
  html [data-lv="list"] :is(.content-entry-card h3, .infographics-card-title, .pp-card-title) { font-size: 1.05rem !important; line-height: 1.25 !important; }
}

/* ---- Compact: titles only, ruled rows ---- */
html [data-lv="compact"] :is(.entry-visual, .infographics-card-image, .pp-card-cover, .video-card-visual,
  .article-body-preview, .infographics-card-description, .infographics-card-tags, .infographics-card-footer,
  .pp-card-summary, .pp-card-cta, .entry-read-link, .video-card-body p, .video-card-body > span,
  .qa-library-card-excerpt, .qa-library-card-cta, .qa-library-objection-badge, .blog-card-excerpt) { display: none !important; }
html [data-lv="compact"] :is(.content-entry-card, .infographics-card, .pp-card, .video-card-link, .qa-library-card) {
  border: 0 !important;
  border-bottom: 1px solid rgba(149, 115, 56, 0.28) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  transform: none !important;
  min-height: 0 !important;
}
html [data-lv="compact"] > :first-child { border-top: 1px solid rgba(149, 115, 56, 0.28) !important; }
html [data-lv="compact"] :is(.entry-content, .infographics-card-body, .pp-card-body, .video-card-body) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.8rem 0.5rem !important;
}
html [data-lv="compact"] .qa-library-card { padding: 0.8rem 0.5rem !important; }
html [data-lv="compact"] :is(.entry-content > div, .infographics-card-meta, .video-card-body > div) {
  margin: 0 !important;
  order: 1;
  flex: 0 0 auto;
}
html [data-lv="compact"] :is(.content-entry-card h3, .infographics-card-title, .pp-card-title, .qa-library-card-question) {
  font-size: 1.08rem !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  flex: 1 1 320px;
  min-width: 0;
}
html [data-lv="compact"] .pp-card-kind { margin: 0; order: 1; }
html [data-lv="compact"] :is(.content-entry-card, .infographics-card, .pp-card, .video-card-link, .qa-library-card):hover {
  background: rgba(162, 125, 61, 0.07) !important;
}
html [data-lv="compact"] :is(.content-entry-card, .infographics-card, .pp-card, .video-card-link, .qa-library-card):hover :is(h3) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Topic pages (/topic/<id>): grouped by sub-topic, each section has
   its own inner grid, so the sections stay stacked and the inner grids
   take the list / compact layout. ---- */
html #topic-page-grid.is-grouped[data-lv] { display: block !important; }
html #topic-page-grid.is-grouped[data-lv] > .topic-subtopic-group { margin: 0 0 2.75rem !important; border-top: 0 !important; }
html #topic-page-grid.is-grouped[data-lv] > .topic-subtopic-group:last-child { margin-bottom: 0 !important; }
html [data-lv="list"] .topic-subtopic-grid,
html [data-lv="compact"] .topic-subtopic-grid {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0.9rem !important;
}
html [data-lv="compact"] .topic-subtopic-grid { gap: 0 !important; }
html [data-lv] .topic-subtopic-grid > * { max-width: none !important; margin: 0 !important; }
html [data-lv="list"] .topic-subtopic-grid > *,
html [data-lv="compact"] .topic-subtopic-grid > * { width: 100%; }
html [data-lv="compact"] .topic-subtopic-grid > :first-child { border-top: 1px solid rgba(149, 115, 56, 0.28) !important; }
html [data-lv="list"] #topic-page-grid .entry-visual,
html [data-lv="list"] .topic-page-grid .entry-visual { border-radius: 1rem 0 0 1rem !important; }
html [data-lv="compact"] .topic-page-card-byline { display: none !important; }
html [data-lv="compact"] .topic-page-grid .entry-content { gap: 0.25rem 1rem !important; }

/* ---- /topics index: topic cards ---- */
html [data-lv="list"] .topic-card { flex-direction: row !important; align-items: stretch; }
html [data-lv="list"] .topic-card-visual {
  flex: 0 0 240px !important;
  width: 240px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  min-height: 150px;
}
html [data-lv="list"] .topic-card-body { flex: 1 1 auto; min-width: 0; }
html [data-lv="list"] .topic-card:hover { transform: none; }
@media (max-width: 640px) {
  html [data-lv="list"] .topic-card-visual { flex-basis: 108px !important; width: 108px !important; min-height: 108px; }
  html [data-lv="list"] .topic-card-icon { transform: scale(0.8); }
  html [data-lv="list"] .topic-card-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html [data-lv="list"] .topic-card-cta { display: none !important; }
}
html [data-lv="compact"] :is(.topic-card-visual, .topic-card-description, .topic-card-cta) { display: none !important; }
html [data-lv="compact"] .topic-card {
  border: 0 !important;
  border-bottom: 1px solid rgba(149, 115, 56, 0.28) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
}
html [data-lv="compact"] .topic-card-body {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.8rem 0.5rem !important;
}
html [data-lv="compact"] .topic-card-meta { order: 1; margin: 0 !important; }
html [data-lv="compact"] .topic-card-title { margin: 0 !important; font-size: 1.12rem !important; flex: 1 1 320px; min-width: 0; }
html [data-lv="compact"] .topic-card:hover { background: rgba(162, 125, 61, 0.07) !important; }
html [data-lv="compact"] .topic-card:hover .topic-card-title { text-decoration: underline; text-underline-offset: 3px; }

/* ---- /articles: topic + sort filters and the count (articles-public.js) ---- */
.articles-toolbar--full { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.articles-toolbar--full > .topic-page-search { flex: 1 1 300px; }
.articles-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.articles-filter { display: inline-flex; align-items: center; gap: 0.45rem; }
.articles-filter-label { font: 600 0.78rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6358; }
.articles-filter-select {
  border: 1px solid rgba(149, 115, 56, 0.45);
  border-radius: 10px;
  background: #fbf8f2;
  color: #2e2a26;
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
  max-width: 260px;
}
.articles-filter-select:focus-visible { outline: 2px solid #a27d3d; outline-offset: 2px; }
.articles-count { margin: 0.25rem 0 1rem; color: #6b6358; font-size: 0.92rem; }
.articles-count:empty { display: none; }
@media (max-width: 640px) {
  .articles-filters { width: 100%; }
  .articles-filter { flex: 1 1 140px; flex-direction: column; align-items: stretch; gap: 0.3rem; }
  .articles-filter-select { width: 100%; max-width: none; }
}