/**
 * Styling for News Lists Per Category view
 */

/* This file is likely not being compiled properly with Tailwind's processor.
   We'll use direct overrides in the template instead. */

/* Reset any conflicting font sizes to ensure our direct template classes work */
.news_lists_per_cateogory h3.tw-text-xl {
  display: none;
}

.news_lists_per_cateogory article:first-child h3 {
  font-size: inherit !important;
}

.news_lists_per_cateogory .tw-flex.tw-gap-3 h3 {
  font-size: inherit !important;
}

/* Simple direct CSS overrides */

/* Fix featured article image container - very specific targeting */
.news_lists_per_cateogory article[data-history-node-id] .tw-relative.tw-h-40 {
  height: 220px !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Target inner container */
.news_lists_per_cateogory article[data-history-node-id] .tw-relative.tw-h-40 .tw-absolute.tw-inset-0 {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Fix featured article image - with extremely specific selectors */
.news_lists_per_cateogory article[data-history-node-id] .tw-relative.tw-h-40 img {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  top: 0 !important;
  left: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Override Tailwind Prose styles for images */
.tw-prose :where(img):not(:where([class~="tw-not-prose"],[class~="tw-not-prose"] *)),
.tw-prose img,
.tw-prose .tw-relative.tw-h-40 img {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* Additional override for featured article images */
.news_lists_per_cateogory .tw-prose img,
.news_lists_per_cateogory img {
  margin: 0 !important;
  max-width: none !important;
  height: 100% !important;
  width: 100% !important;
  display: block !important;
}

/* Override Tailwind Prose heading styles */
.views-view--news-lists-per-category--block-1 h2,
.news_lists_per_cateogory h2,
section h2.tw-text-xl {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
}

/* Override specifically for media queries */
@media (min-width: 640px) {
  .sm\:tw-prose-base :where(h2):not(:where([class~="tw-not-prose"],[class~="tw-not-prose"] *)),
  .views-view--news-lists-per-category--block-1 h2,
  .news_lists_per_cateogory h2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 1.25rem !important;
  }
}

/* Fix category tag position */
.news_lists_per_cateogory article:first-child .tw-absolute.tw-top-0.tw-left-0.tw-p-2.tw-z-20 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  padding: 8px !important;
  z-index: 20 !important;
}

/* Fix small image container */
.news_lists_per_cateogory .tw-relative.tw-h-20.tw-w-20 {
  height: 80px !important;
  width: 80px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Fix small image */
.news_lists_per_cateogory .tw-flex.tw-gap-3 img {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}

/* Featured article title - make smaller */
.news_lists_per_cateogory article:first-child h3 a {
  font-size: 16px !important;
  line-height: 1.3 !important;
}

/* Compact article title - make smaller */
.news_lists_per_cateogory .tw-flex.tw-gap-3 h3 a {
  font-size: 13px !important;
  line-height: 1.3 !important;
}

/* Make article descriptions smaller */
.news_lists_per_cateogory article p {
  font-size: 12px !important;
  margin-bottom: 5px !important;
}

/* Make date/time ago text smaller */
.news_lists_per_cateogory .tw-text-gray-400 {
  font-size: 11px !important;
}

/* Add space between compact articles */
.news_lists_per_cateogory .tw-flex.tw-gap-3 {
  margin-bottom: 12px;
}

/* Reduce featured article bottom margin */
.news_lists_per_cateogory article:first-child {
  margin-bottom: 16px;
}