/* /resources/ in the /newhome palette. Markup: templates/website/guides.html,
   content: dashboards/newhome_articles.py */

.newhome .nh-guides-hero {
  padding: 84px 0 76px;
  background: linear-gradient(160deg, #06398e 0%, #0766d4 100%);
  color: #fff;
}
.newhome .nh-guides-hero h1 {
  max-width: 820px;
  margin: 0;
  font: 700 clamp(40px, 5.4vw, 70px)/1.02 'Space Grotesk', Arial, sans-serif;
  letter-spacing: -.06em;
}
.newhome .nh-guides-hero h1 em { color: #80efff; font-style: normal; }
.newhome .nh-guides-hero p:not(.nh-eyebrow) { max-width: 600px; margin: 22px 0 0; color: #e3f4ff; font-size: 18px; }

.newhome .nh-guides { padding: 56px 0 96px; background: #eef8ff; color: #09254a; }
.newhome .nh-guides .nh-guides__list { margin-top: 40px; }
.newhome .nh-guides__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.newhome .nh-guides__card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #d8f0fc;
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.newhome .nh-guides__card a:hover { transform: translateY(-3px); border-color: #a9dcfb; box-shadow: 0 18px 36px #0a3d7a1f; }
.newhome .nh-guides__card a:focus-visible { outline: 3px solid #0879e8; outline-offset: 4px; }
.newhome .nh-guides__card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.newhome .nh-guides__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.newhome .nh-guides__meta { margin: 0; color: #0674dd; font: 700 12px/1.2 'Space Grotesk', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.newhome .nh-guides__card h3 { margin: 0; color: #09254a; font: 700 21px/1.2 'Space Grotesk', Arial, sans-serif; letter-spacing: -.03em; }
.newhome .nh-guides__read { margin-top: auto; padding-top: 8px; color: #0879e8; font: 700 14px/1.2 Inter, Arial, sans-serif; }
.newhome .nh-guides__empty { margin: 0; color: #4f6e89; font-size: 18px; }
.newhome .nh-guides__empty a { color: #0674dd; }

@media (prefers-reduced-motion: reduce) {
  .newhome .nh-guides__card a { transition: none; }
  .newhome .nh-guides__card a:hover { transform: none; }
}
@media (max-width: 900px) {
  .newhome .nh-guides__list { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 760px) {
  .newhome .nh-guides-hero { padding: 56px 0 52px; }
  .newhome .nh-guides-hero p:not(.nh-eyebrow) { font-size: 16px; }
  .newhome .nh-guides { padding: 40px 0 64px; }
}

/* Free spreadsheet templates (content: dashboards/newhome_templates.py) */
.newhome .nh-templates { padding: 56px 0 96px; background: #eef8ff; color: #09254a; }
.newhome .nh-templates h2, .newhome .nh-guides > .nh-wrap > h2 {
  max-width: 820px;
  margin: 0;
  color: #09254a;
  font: 700 clamp(32px, 3.6vw, 48px)/1.05 'Space Grotesk', Arial, sans-serif;
  letter-spacing: -.06em;
}
.newhome .nh-templates h2 em, .newhome .nh-guides > .nh-wrap > h2 em { color: #0879e8; font-style: normal; }
.newhome .nh-templates__intro { max-width: 620px; margin: 18px 0 0; color: #4f6e89; font: 500 18px/1.45 Inter, Arial, sans-serif; }
.newhome .nh-templates__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.newhome .nh-templates__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d8f0fc;
  border-radius: 18px;
  background: #fff;
}
.newhome .nh-templates__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid #d8f0fc;
  background: #f3f8ff;
}
.newhome .nh-templates__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.newhome .nh-templates__card h3 { margin: 0; color: #09254a; font: 700 21px/1.2 'Space Grotesk', Arial, sans-serif; letter-spacing: -.03em; }
.newhome .nh-templates__card p { margin: 0; color: #4f6e89; font-size: 15px; line-height: 1.5; }
.newhome .nh-templates__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 14px; }
.newhome .nh-templates__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #0879e8;
  border-radius: 999px;
  background: #0879e8;
  color: #fff;
  font: 700 14px/1 Inter, Arial, sans-serif;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.newhome .nh-templates__button:hover { background: #0666c7; border-color: #0666c7; }
.newhome .nh-templates__button--sheets { background: #fff; color: #0674dd; }
.newhome .nh-templates__button--sheets:hover { background: #eef8ff; color: #0666c7; }
.newhome .nh-templates__button:focus-visible { outline: 3px solid #0879e8; outline-offset: 3px; }

.newhome .nh-template-modal .nh-demo-modal__form { grid-template-columns: 1fr; }
.newhome .nh-template-modal__error { margin: 0; color: #ffd2c4; font-size: 14px; font-weight: 600; }
.newhome .nh-template-modal__link { display: inline-flex; justify-content: center; gap: 8px; margin-top: 8px; text-decoration: none; }

@media (max-width: 900px) {
  .newhome .nh-templates__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .newhome .nh-templates { padding: 60px 0 72px; }
  .newhome .nh-templates__intro { font-size: 16px; }
  .newhome .nh-templates__list { grid-template-columns: 1fr; }
}

/* Templates / Blog tabs */
.newhome .nh-resources__bar { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid #d8f0fc; background: #fff; }
.newhome .nh-resources__tabs { display: flex; gap: 8px; padding: 14px 0; }
.newhome .nh-resources__tabs button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #4f6e89;
  font: 700 16px/1 'Space Grotesk', Arial, sans-serif;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.newhome .nh-resources__tabs button:hover { background: #eef8ff; color: #09254a; }
.newhome .nh-resources__tabs button[aria-selected="true"] { border-color: #0879e8; background: #0879e8; color: #fff; }
.newhome .nh-resources__tabs button:focus-visible { outline: 3px solid #0879e8; outline-offset: 3px; }
.newhome .nh-resources__tabs button span {
  min-width: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #0879e81a;
  font-size: 13px;
  text-align: center;
}
.newhome .nh-resources__tabs button[aria-selected="true"] span { background: #ffffff33; }
.newhome [data-panel] { scroll-margin-top: 80px; }