/*
 * Study material category cards
 * - prevents a single resource from stretching across the full desktop row
 * - keeps up to four balanced cards per desktop row
 * - switches to a compact horizontal card on phones
 * Scoped to category pages only.
 */

main[data-study-page-category] .study-resource-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 18px !important;
  width: 100%;
}

main[data-study-page-category] .study-resource-card {
  min-width: 0;
  min-height: 100%;
  padding: 16px !important;
  border-radius: 22px !important;
  overflow: hidden;
}

main[data-study-page-category] .study-resource-thumb {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 0 13px !important;
  border-radius: 15px !important;
  object-fit: cover;
  background: #eef5ff;
}

main[data-study-page-category] .study-resource-meta {
  gap: 6px !important;
  margin: 0 0 10px !important;
}

main[data-study-page-category] .study-resource-meta .badge {
  max-width: 100%;
  padding: 5px 9px !important;
  overflow: hidden;
  font-size: 0.72rem !important;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main[data-study-page-category] .study-resource-card h3 {
  display: -webkit-box;
  min-height: 2.7em;
  margin: 0 0 7px !important;
  overflow: hidden;
  font-size: 1rem !important;
  line-height: 1.35 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

main[data-study-page-category] .study-resource-card p {
  display: -webkit-box;
  margin: 0 0 14px !important;
  overflow: hidden;
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

main[data-study-page-category] .study-resource-actions {
  margin-top: auto !important;
}

main[data-study-page-category] .study-resource-actions .primary-btn {
  width: fit-content !important;
  min-height: 38px !important;
  padding: 8px 13px !important;
  border-radius: 11px !important;
  font-size: 0.8rem !important;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  main[data-study-page-category] .study-resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  main[data-study-page-category] .study-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 620px) {
  main[data-study-page-category] .study-toolbar {
    margin-bottom: 14px;
    padding: 12px !important;
    border-radius: 17px !important;
  }

  main[data-study-page-category] .study-toolbar-grid {
    gap: 10px !important;
  }

  main[data-study-page-category] .study-toolbar input,
  main[data-study-page-category] .study-toolbar select {
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 0.88rem;
  }

  main[data-study-page-category] .study-resource-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  main[data-study-page-category] .study-resource-card {
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 11px;
    row-gap: 4px;
    min-height: 132px !important;
    padding: 10px !important;
    border-radius: 17px !important;
  }

  main[data-study-page-category] .study-resource-thumb {
    grid-column: 1;
    grid-row: 1 / 5;
    align-self: stretch;
    width: 108px !important;
    height: 100% !important;
    min-height: 112px;
    max-height: 148px;
    margin: 0 !important;
    border-radius: 12px !important;
    object-fit: cover;
  }

  main[data-study-page-category] .study-resource-meta {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: nowrap !important;
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
  }

  main[data-study-page-category] .study-resource-meta .badge {
    min-width: 0;
    padding: 4px 7px !important;
    font-size: 0.61rem !important;
  }

  main[data-study-page-category] .study-resource-meta .badge:first-child {
    flex: 1 1 auto;
  }

  main[data-study-page-category] .study-resource-meta .badge:last-child {
    flex: 0 0 auto;
  }

  main[data-study-page-category] .study-resource-card h3 {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    margin: 1px 0 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
  }

  main[data-study-page-category] .study-resource-card p {
    grid-column: 2;
    grid-row: 3;
    margin: 0 !important;
    font-size: 0.74rem !important;
    line-height: 1.38 !important;
    -webkit-line-clamp: 2;
  }

  main[data-study-page-category] .study-resource-actions {
    grid-column: 2;
    grid-row: 4;
    margin: 2px 0 0 !important;
  }

  main[data-study-page-category] .study-resource-actions .primary-btn {
    min-height: 32px !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
    font-size: 0.7rem !important;
  }
}

@media (max-width: 380px) {
  main[data-study-page-category] .study-resource-card {
    grid-template-columns: 94px minmax(0, 1fr);
    column-gap: 9px;
  }

  main[data-study-page-category] .study-resource-thumb {
    width: 94px !important;
  }

  main[data-study-page-category] .study-resource-card p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  main[data-study-page-category] .study-resource-card {
    transition: none !important;
  }
}

/* Instant-loading placeholders: shown only until cached/API content paints. */
.study-loading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.study-loading-grid[hidden] { display: none !important; }
.study-skeleton-card { pointer-events: none; min-height: 340px; }
.study-skeleton {
  border-radius: 10px;
  background: linear-gradient(90deg, #eaf1f7 25%, #f7fafc 45%, #eaf1f7 65%);
  background-size: 220% 100%;
  animation: ngs-study-shimmer 1.15s ease-in-out infinite;
}
.study-skeleton-thumb { width: 100%; height: 150px; border-radius: 14px; }
.study-skeleton-pill { width: 42%; height: 22px; margin-top: 14px; }
.study-skeleton-title { width: 78%; height: 24px; margin-top: 14px; }
.study-skeleton-line { width: 94%; height: 16px; margin-top: 12px; }
.study-skeleton-button { width: 118px; height: 42px; margin-top: auto; }
@keyframes ngs-study-shimmer { to { background-position: -220% 0; } }
body.modern-dark .study-skeleton {
  background: linear-gradient(90deg, #152338 25%, #1d3049 45%, #152338 65%);
  background-size: 220% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .study-skeleton { animation: none; }
}