/* =========================================================
   SmartD ClickHelp Portal Home (EN-US) — "Portal" Look & Feel
   Targets the blocks you showed:
   - Publications List block: .CHPubsListBlock_*
   Works well for manual Cards list too (partial support added below).
   Design goals:
   - Vertical sections (you'll place 3 blocks: User Guides / App Notes / Product Specs)
   - 3-column "portal" grid on desktop
   - Flat cards (thin border), consistent icon box
   - Optional: subtle background IMAGE per card (with transparency)
   - Hover: #02AF4C background + white text, icons unchanged
   ========================================================= */

.Home_page{
  --sd-green: #02AF4C;
  --sd-text: #242424;
  --sd-muted: #6b7280;
  --sd-border: rgba(0,0,0,.12);

  --sd-maxw: 1240px;

  --sd-radius: 14px;
  --sd-radius-lg: 18px;

  --sd-gap: 16px;
  --sd-card-pad: 16px;

  --sd-icon-box: 52px;
  --sd-icon-radius: 12px;

  --sd-card-minh: 92px;

  /* card background image opacity (adjusted for better visibility) */
  --sd-card-img-opacity: .20;

  /* hover elevation (kept subtle; still feels "flat") */
  --sd-hover-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* --- Keep page content nicely centered --- */
.Home_page :is(main, .main, .content, .pageContent, .Body, .CHBody, .CHContent){
  max-width: var(--sd-maxw);
  margin-inline: auto;
}

/* --- Section headings (use Heading blocks: H2) --- */
.Home_page h2{
  margin: 26px 0 12px;
  padding-left: 12px;
  border-left: 4px solid var(--sd-green);
  line-height: 1.2;
}

/* =========================================================
   HERO / SEARCH (Hero banner block)
   (Selectors are intentionally tolerant; won't break if class differs)
   ========================================================= */
.Home_page :is(.CHHeroBannerBlock, .CHHomeHeroBlock, .HeroBannerBlock, .CHBlock_heroBanner){
  border-radius: var(--sd-radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(2,175,76,.10), rgba(0,0,0,.03));
  padding: 22px 18px;
  margin: 12px 0 18px;
}

/* Search input styling (top search bar) */
.Home_page :is(.CHHeroBannerBlock, .CHHomeHeroBlock, .HeroBannerBlock, .CHBlock_heroBanner)
  :is(input[type="search"], input[type="text"], .CHSearchBox_input){
  width: min(820px, 100%);
  height: 3rem;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  padding: 0 14px;
  background: #fff;
  color: var(--sd-text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.Home_page :is(.CHHeroBannerBlock, .CHHomeHeroBlock, .HeroBannerBlock, .CHBlock_heroBanner)
  :is(input[type="search"], input[type="text"], .CHSearchBox_input):focus{
  border-color: var(--sd-green);
  box-shadow: 0 0 0 3px rgba(2,175,76,.15);
}

.Home_page :is(.CHHeroBannerBlock, .CHHomeHeroBlock, .HeroBannerBlock, .CHBlock_heroBanner)
  :is(input[type="search"], input[type="text"], .CHSearchBox_input)::placeholder{
  color: rgba(36,36,36,.55);
}

/* =========================================================
   PUBLICATIONS LIST BLOCK (your HTML snippet)
   ========================================================= */

/* Space between blocks */
.Home_page .CHPubsListBlock_pubsContainer{
  margin: 0 0 18px;
}

/* Grid container */
.Home_page .CHPubsListBlock_pubsContainer .CHPubsListBlock_pubsList{
  display: grid;
  gap: var(--sd-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* Responsive: 2 columns then 1 */
@media (max-width: 1100px){
  .Home_page .CHPubsListBlock_pubsContainer .CHPubsListBlock_pubsList{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px){
  .Home_page .CHPubsListBlock_pubsContainer .CHPubsListBlock_pubsList{
    grid-template-columns: 1fr;
  }
}

/* Card (anchor) */
.Home_page a.CHPubsListBlock_clickableCard{
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: var(--sd-radius);
  border: 1px solid var(--sd-border);
  background: #fff;
  overflow: hidden;
  transform: translateY(0);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* --- Background image layer (per card) ---
   Uses --sd-card-bg set by selectors in the mapping section below.
*/
.Home_page a.CHPubsListBlock_clickableCard::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--sd-card-bg);
  background-size: cover;
  background-position: center;
  opacity: var(--sd-card-img-opacity);
  z-index: 0;
}

/* Overlay to keep text readable (improved opacity for better image visibility) */
.Home_page a.CHPubsListBlock_clickableCard::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.75));
  z-index: 1;
}

/* Card content sits above overlays */
.Home_page .CHPubsListBlock_cardContent{
  position: relative;
  z-index: 2;
  min-height: var(--sd-card-minh);
  padding: var(--sd-card-pad);
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
}

/* Ensure horizontal layout stays clean */
.Home_page .CHPubsListBlock_cardHorizontal{
  width: 100%;
}

/* Icon box (keeps icons visible on green hover without changing icon colors) */
.Home_page .CHPubsListBlock_iconContainer{
  width: var(--sd-icon-box);
  height: var(--sd-icon-box);
  flex: 0 0 var(--sd-icon-box);
  display: grid;
  place-items: center;
  border-radius: var(--sd-icon-radius);
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  overflow: hidden;
}

/* Remove the internal colored square (inconsistent across cards) */
.Home_page .CHPubsListBlock_iconBackground{
  display: none;
}

/* FontAwesome icon sizing */
.Home_page .CHPubsListBlock_icon{
  font-size: 20px;
  line-height: 1;
}

/* Image icon sizing */
.Home_page .CHPubsListBlock_imgIcon{
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* Title - increased specificity to override inline styles without !important where possible */
.Home_page .CHPubsListBlock_clickableCard .CHPubsListBlock_pubName{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 650;
  line-height: 1.2;
  color: var(--sd-text);
  flex: 1 1 auto;
}

/* Override inline color styles if present */
.Home_page .CHPubsListBlock_clickableCard .CHPubsListBlock_pubName[style*="color"]{
  color: var(--sd-text) !important;
}

/* Description styling (1 line) */
.Home_page :is(.CHPubsListBlock_pubDescription, .CHCardsListBlock_cardDescription, .CHCardsListBlock_desc){
  margin-top: 6px;
  color: var(--sd-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.Home_page .CHPubsListBlock_clickableCard :is(.CHPubsListBlock_pubDescription, .CHCardsListBlock_cardDescription, .CHCardsListBlock_desc)[style*="color"]{
  color: var(--sd-muted) !important;
}

/* Hover: green background, white text; icons unchanged (icon box stays white) */
.Home_page a.CHPubsListBlock_clickableCard:hover{
  border-color: var(--sd-green);
  box-shadow: var(--sd-hover-shadow);
  transform: translateY(-2px);
}

/* Turn overlay into solid green on hover */
.Home_page a.CHPubsListBlock_clickableCard:hover::after{
  background: var(--sd-green);
}

.Home_page a.CHPubsListBlock_clickableCard:hover::before{
  /* keep image subtle behind green */
  opacity: .08;
}

/* White text on hover */
.Home_page a.CHPubsListBlock_clickableCard:hover .CHPubsListBlock_pubName{
  color: #fff !important;
}

.Home_page a.CHPubsListBlock_clickableCard:hover :is(.CHPubsListBlock_pubDescription, .CHCardsListBlock_cardDescription, .CHCardsListBlock_desc){
  color: rgba(255,255,255,.92) !important;
}

/* Keep icon box white on hover so default green icons remain visible */
.Home_page a.CHPubsListBlock_clickableCard:hover .CHPubsListBlock_iconContainer{
  background: #fff;
  border-color: rgba(255,255,255,.70);
}

/* Focus states for keyboard navigation (accessibility) */
.Home_page a.CHPubsListBlock_clickableCard:focus-visible{
  outline: 3px solid var(--sd-green);
  outline-offset: 2px;
}

/* =========================================================
   BACKGROUND IMAGE MAP - CORRECTED URLS
   ========================================================= */

/* --- User Guides card background --- */
.Home_page a.CHPubsListBlock_clickableCard[href="/articles/clean-power-vfd-publication"]{
  --sd-card-bg: url("https://smartd.clickhelp.co/resources/Storage/BG_userguide.png");
}

/* --- All Application Notes (ANxxx...) background --- */
.Home_page a.CHPubsListBlock_clickableCard[href^="/articles/an"]{
  --sd-card-bg: url("https://smartd.clickhelp.co/resources/Storage/BG_applicationnote.jpg");
}

/* --- Product Specs / Datasheets background --- */
.Home_page a.CHPubsListBlock_clickableCard[href="/articles/products-datasheets-publication"]{
  --sd-card-bg: url("https://smartd.clickhelp.co/resources/Storage/BG_productSpec.jpg");
}

/* Example for individual AN backgrounds if needed later:
.Home_page a.CHPubsListBlock_clickableCard[href="/articles/an005_optimize-pump-pressure-control-with-embedded-pid"]{
  --sd-card-bg: url("https://smartd.clickhelp.co/resources/Storage/bg-an005.jpg");
}
*/

/* =========================================================
   OPTIONAL: Manual Cards List block support
   ========================================================= */
.Home_page .CHCardsListBlock_cardsList{
  display: grid;
  gap: var(--sd-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px){
  .Home_page .CHCardsListBlock_cardsList{ 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
}

@media (max-width: 720px){
  .Home_page .CHCardsListBlock_cardsList{ 
    grid-template-columns: 1fr; 
  }
}

.Home_page a.CHCardsListBlock_clickableCard{
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: var(--sd-radius);
  border: 1px solid var(--sd-border);
  background: #fff;
  overflow: hidden;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.Home_page a.CHCardsListBlock_clickableCard:hover{
  border-color: var(--sd-green);
  box-shadow: var(--sd-hover-shadow);
  transform: translateY(-2px);
}

.Home_page a.CHCardsListBlock_clickableCard:focus-visible{
  outline: 3px solid var(--sd-green);
  outline-offset: 2px;
}

/* =========================================================
   REDUCED MOTION SUPPORT (Accessibility)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .Home_page a.CHPubsListBlock_clickableCard,
  .Home_page a.CHCardsListBlock_clickableCard,
  .Home_page :is(input[type="search"], input[type="text"], .CHSearchBox_input) {
    transition: none;
  }
  
  .Home_page a.CHPubsListBlock_clickableCard:hover,
  .Home_page a.CHCardsListBlock_clickableCard:hover {
    transform: none;
  }
}.CHBlock_richTextContent, .CHBlock_container * {font-family: 'Segoe UI',Frutiger,'Frutiger Linotype','Dejavu Sans','Helvetica Neue',Arial,sans-serif;}