/* template-nfe-resources.php — styles the page shell only. Whatever the
   resources/downloads plugin renders inside .resources-content-inner gets
   generic typography/button/card styling here so it fits the site even
   though we don't control its exact markup; the PMPro restricted-content
   notice (pmpro_content_message) is already restyled sitewide by
   nfe-pmpro.css, loaded on every page. */

.nfe-scope .resources-intro{padding:150px var(--pad) 30px}
.nfe-scope .resources-intro-inner{max-width:900px;margin:0 auto;padding:0 clamp(22px,5vw,40px)}
.nfe-scope .resources-intro h1{font-size:clamp(32px,3.6vw,50px)}

.nfe-scope .resources-content{padding:0 var(--pad) 60px}
.nfe-scope .resources-content-inner{max-width:900px;margin:0 auto;padding:0 clamp(22px,5vw,40px)}

/* Real markup from the PMPro Downloads add-on
   ([pmpro_download_library template="card" layout="grid" columns="3"]),
   confirmed from the live page source:
   .pmpro_download_library.pmpro_download_library-grid.pmpro_download_library-columns-3
     > .pmpro > .pmpro_card.pmpro_download.pmpro_download-card(.pmpro_download-locked)
       > h2.pmpro_card_title (.pmpro_download-icon, .pmpro_download-title)
       > .pmpro_card_content (description p, p.pmpro_download-levels, a.pmpro_btn "View Membership Levels")
       > .pmpro_card_actions ("Already a member? Log in here")

   nfe-pmpro.css (loaded sitewide) caps .pmpro at max-width:680px for the
   login/checkout/account/levels pages — that would crush this 3-column grid
   onto one narrow column, so it's widened here specifically for this
   template (this file loads with 'nfe-pmpro' as a dependency, so it cascades
   after and wins). */
.nfe-scope .pmpro_download_library .pmpro{
  max-width:var(--max) !important;
  padding:0 !important;
}
.nfe-scope .pmpro_download_library-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(300px,380px)) !important;
  justify-content:center;
  gap:16px;
}
.nfe-scope .pmpro_download-card{
  height:100%;
  display:flex;
  flex-direction:column;
}
.nfe-scope .pmpro_download-card .pmpro_card_title{
  display:flex;
  align-items:center;
  gap:12px;
}
.nfe-scope .pmpro_download-icon{
  flex:none;
  width:38px;height:38px;
  border-radius:50%;
  background:var(--soft);
  color:var(--green-dark);
  display:grid;
  place-items:center;
}
.nfe-scope .pmpro_download-icon svg{width:18px;height:18px}
.nfe-scope .pmpro_download-locked .pmpro_download-icon{
  background:#fbe2e0;
  color:#c65a52;
}
.nfe-scope .pmpro_download-title{font-size:17px}
.nfe-scope .pmpro_download-levels{
  font-size:12.5px;
  color:var(--ink-faint);
  background:var(--soft);
  border-radius:10px;
  padding:18px !important;
  margin:14px 0 !important;
}
.nfe-scope .pmpro_download-card .pmpro_card_content{flex:1;display:flex;flex-direction:column}
.nfe-scope .pmpro_download-card .pmpro_card_actions{
  margin-top:auto;
  font-size:12.5px;
  color:var(--ink-faint);
}
.nfe-scope .pmpro_download-card .pmpro_card_actions a{
  color:var(--green-dark);
  font-weight:700;
}

@media(max-width:1100px){
  .nfe-scope .pmpro_download_library-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nfe-scope .pmpro_download_library-grid{grid-template-columns:1fr}
}

/* Generic content styling for whatever the plugin outputs */
.nfe-scope .resources-content-inner h2{font-size:clamp(24px,2.6vw,32px);margin:36px 0 14px}
.nfe-scope .resources-content-inner h3{font-size:20px;margin:24px 0 10px}
.nfe-scope .resources-content-inner p{font-size:15.5px;line-height:1.7;margin-bottom:14px}
.nfe-scope .resources-content-inner ul,
.nfe-scope .resources-content-inner ol{margin:0 0 16px 20px}
.nfe-scope .resources-content-inner li{font-size:15px;line-height:1.7;color:var(--ink-soft)}
.nfe-scope .resources-content-inner a:not(.pmpro_btn){color:var(--green-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.nfe-scope .resources-content-inner a:not(.pmpro_btn):hover{color:var(--green-deep)}
.nfe-scope .pmpro_download-card .pmpro_btn,
.nfe-scope .pmpro_download-card a.pmpro_btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
  background:var(--green-deep) !important;
  color:#ffffff !important;
  border:0 !important;
  border-radius:999px !important;
  font-weight:700 !important;
  padding:0 26px !important;
  min-height:48px !important;
}
.nfe-scope .pmpro_download-card .pmpro_btn:hover,
.nfe-scope .pmpro_download-card a.pmpro_btn:hover{
  background:var(--green-dark) !important;
  color:#ffffff !important;
}

/* A generic "resource card" wrapper class the future grid/plugin markup can
   opt into (e.g. wrap each downloadable item in <div class="resource-card">)
   so it automatically matches the site's card language without extra CSS. */
.nfe-scope .resource-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:26px;margin-bottom:16px;
}
.nfe-scope .resource-card h3{margin-top:0}
.nfe-scope .resource-card .btn{margin-top:14px}

@media(max-width:760px){
  .nfe-scope .resources-intro{padding:96px 0 20px}
  .nfe-scope .resources-intro-inner{padding:0 18px}
  .nfe-scope .resources-content{padding:0 0 40px}
  .nfe-scope .resources-content-inner{padding:0 18px}
}