/* Standardized resource styles for Blogs / News / Q&A */
:root{
  --resource-bg: #0f172a; /* slate-900 */
  --resource-card-bg: #ffffff;
  --resource-text: #0f172a;
  --resource-accent: #6d28d9; /* purple-600 */
  --resource-muted: #6b7280; /* gray-500 */
}

/* Load Inter from Google Fonts; font-display=swap for better perceived performance */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

body.resource-page {
  background: linear-gradient(180deg,#f8fafc,#eef2ff);
  color: var(--resource-text);
  /* typography baseline for resource pages */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 18px; /* increased base font-size for better readability */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.resource-container{
  max-width:1100px;
  margin:0 auto;
  padding:28px 16px;
}

/* make container full-bleed on very small screens for a more modern feel */
@media (max-width:420px){
  .resource-container{ padding-left:12px; padding-right:12px; }
}

.resource-header{
  text-align:center;
  margin-bottom:22px;
}

.resource-grid{
  display:grid;
  grid-template-columns: repeat(1,1fr);
  gap:18px;
}

@media(min-width:768px){
  .resource-grid{ grid-template-columns: repeat(2,1fr); }
}
@media(min-width:992px){
  /* 3 boxes per row on desktop */
  .resource-grid{ grid-template-columns: repeat(3,1fr); }
}

.resource-card{
  background:var(--resource-card-bg);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(15,23,42,0.06);
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
  border:1px solid rgba(15,23,42,0.04);
 }
.resource-card:hover{ transform: translateY(-6px); box-shadow:0 12px 30px rgba(15,23,42,0.09); }


.resource-card .media{
  width:100%;
  height:auto;
  aspect-ratio: 16/9;
  object-fit:cover;
  background:#e6e9f8;
  display:block;
  max-height:180px; /* restore larger listing hero */
}

/* Very small images on mobile */
@media(max-width:420px){
  .resource-card .media{ max-height:140px; aspect-ratio: 4/3 }
}

/* Small images on tablets */
@media(min-width:768px) and (max-width:991px){
  .resource-card .media{ max-height:160px; aspect-ratio:16/9 }
}

/* make media area look good when SVGs have padding */
.resource-card .media[alt]{
  display:block;
}

.resource-card .body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1 }
.resource-card h3{ margin:0; font-size:1.05rem }
.resource-card .meta{ font-size:0.85rem; color:var(--resource-muted) }
.resource-card .excerpt{ color:#374151; font-size:0.95rem; line-height:1.35 }

/* Clamp excerpt to 3 lines for consistent card heights */
.resource-card .excerpt{
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp: 3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.resource-search{ max-width:640px; margin:12px auto 24px; display:flex; gap:8px }
.resource-search input[type="search"]{ flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(15,23,42,0.08); box-shadow:0 2px 6px rgba(15,23,42,0.03); background:rgba(255,255,255,0.98) }
.resource-search input[type="search"]:focus{ outline:none; box-shadow:0 6px 20px rgba(99,102,241,0.09); border-color:rgba(99,102,241,0.35) }

.no-results{ text-align:center; color:var(--resource-muted); padding:24px }

/* clickable area visual focus */
.resource-card:focus{ outline:3px solid rgba(99,102,241,0.15)}

/* Article / detail page styles */
.resource-article{
  max-width:820px;
  margin:0 auto;
  background:transparent;
  color:var(--resource-text);
  line-height:1.75;
  font-size:1rem; /* 18px from body */
}
.article-header{ text-align:left; margin-bottom:26px }
.article-header h1{ font-size:2.25rem; margin:0 0 10px; line-height:1.08; font-weight:700; letter-spacing:-0.02em }
.byline{ color:var(--resource-muted); font-size:0.95rem; margin-bottom:12px }
.article-hero{ display:block; width:100%; height:auto; max-height:120px; object-fit:cover; object-position:center; border-radius:6px; margin:8px 0 10px }

/* Tiny hero images on article pages */
@media(max-width:768px){
  .article-hero{ max-height:80px; margin:6px 0 8px }
}
@media(max-width:420px){
  .article-hero{ max-height:60px; margin:4px 0 6px }
}

.resource-article section{ margin-bottom:20px; }
.resource-article h2{ font-size:1.6rem; margin:18px 0 10px; font-weight:600 }
.resource-article h3{ font-size:1.25rem; margin:12px 0 8px; font-weight:600 }
.resource-article p{ color:#111827; font-size:1.03rem; margin:0 0 14px }
.resource-article ul, .resource-article ol{ margin:8px 0 12px 1.15rem; color:#374151 }
.resource-article .article-footer{ margin-top:18px; padding-top:12px; border-top:1px solid rgba(15,23,42,0.04); color:var(--resource-muted) }

/* Readability tweaks for long content */
@media(min-width:1200px){
  .resource-article{ max-width:920px }
}

/* Improve spacing for mobile article text */
@media(max-width:520px){
  .resource-article p, .resource-article li{ font-size:1rem }
  .article-header h1{ font-size:1.6rem }
}

/* Improve readable width on very small screens */
@media(max-width:420px){
  .resource-container{ padding:20px 12px }
  .article-header h1{ font-size:1.6rem }
}

/* Ensure the grid/listing still looks good when article page uses same classes */
.resource-grid{ gap:20px }

/* Subtle drop cap for the first paragraph in the article */
/* Small refinement: slightly larger spacing between paragraphs for readability */
.resource-article p + p{ margin-top:10px }