/* ==========================================================
   Page content components
   ----------------------------------------------------------
   header.css opens with a `* { margin:0; padding:0 }` reset, so any
   content area that isn't .service-content lost every default margin.
   These rules give the standalone pages (testimonials, about, articles,
   editor list, resource vault) their typography back and style the
   components whose class names had no rule anywhere in the CSS.

   Self-contained: no dependency on custom properties declared elsewhere.
   ========================================================== */

.testimonials-page,
.editor-profiles-page,
.article-vault,
.vault-container,
.about-editfast,
.services-container {
  --c-orange: #ff6600;
  --c-orange-dark: #e65c00;
  --c-ink: #1a1a1a;
  --c-body: #333;
  --c-muted: #666;
  --c-line: #e4e4e4;
  --c-tint: #fff6f0;
}

/* ----------------------------------------------------------
   Base typography for content areas that the reset flattened
   ---------------------------------------------------------- */

.testimonials-page,
.editor-profiles-page,
.article-vault,
.vault-container {
  color: var(--c-body);
  line-height: 1.65;
}

.testimonials-page p,
.editor-profiles-page p,
.article-vault p,
.vault-container p {
  margin: 0 0 1em;
}

.testimonials-page h1,
.editor-profiles-page h1,
.article-vault h1,
.vault-container h1 {
  margin: 0 0 .4em;
  font-size: 2em;
  color: var(--c-ink);
}

.testimonials-page h2,
.editor-profiles-page h2,
.article-vault h2,
.vault-container h2 {
  margin: 1.6em 0 .5em;
  font-size: 1.35em;
  color: var(--c-ink);
}

.testimonials-page section > h2:first-child,
.article-vault section > h2:first-child {
  margin-top: 0;
}

.testimonials-page ul,
.editor-profiles-page ul,
.article-vault ul,
.vault-container ul {
  margin: 1em 0 1em 1.5em;
}

.testimonials-page li,
.editor-profiles-page li,
.article-vault li,
.vault-container li {
  margin-bottom: .5em;
}

/* The resource vault sits outside <main>, so it needs its own measure */
.vault-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* ----------------------------------------------------------
   Centred call-to-action buttons
   (.btn / .button already carry the orange styling from styles.css)
   ---------------------------------------------------------- */

.button-wrapper,
.cta-wrap {
  display: flex;
  justify-content: center;
  margin: 1.8em 0;
}

.center-block {
  display: inline-block;
}

.get-started-btn {
  font-size: 1.05rem;
  padding: 14px 28px;
}

/* ----------------------------------------------------------
   Kudo box (home page + about page)
   ---------------------------------------------------------- */

.kudo-section {
  max-width: 640px;
  margin: 1.8em auto;
  padding: 22px 26px;
  background: var(--c-tint, #fff6f0);
  border: 1px solid #ffd8bf;
  border-left: 5px solid #ff6600;
  border-radius: 10px;
  text-align: center;
}

.kudo-section .kudo-quote {
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.6;
  color: #333;
}

.kudo-section .quote-mark {
  color: #ff6600;
  font-size: 1.5em;
  font-style: normal;
  line-height: 0;
  vertical-align: -.15em;
}

.kudo-section .kudo-meta {
  margin-top: 12px;
  font-size: .9rem;
  color: #555;
}

.kudo-section .kudo-name-date {
  font-weight: 700;
  color: #222;
}

.kudo-section .kudo-date {
  font-weight: 400;
  color: #666;
}

.kudo-section .kudo-city {
  color: #666;
}

/* ----------------------------------------------------------
   Short-definition pull quote (service pages)
   ---------------------------------------------------------- */

.short-definition {
  max-width: 760px;
  margin: 1.6em auto;
  padding: 18px 24px;
  background: #fafafa;
  border-left: 5px solid #ff6600;
  border-radius: 0 8px 8px 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

.short-definition .open-quote,
.short-definition .close-quote {
  color: #ff6600;
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -.15em;
}

.short-definition .quote-text {
  font-style: italic;
}

/* ----------------------------------------------------------
   Testimonials page
   ---------------------------------------------------------- */

/* The markup pads the section with stray <br>s around the CTAs; the
   margins below handle that spacing, so the breaks just add dead air. */
.testimonials-page section > br {
  display: none;
}

.testimonials-page article.testimonial {
  margin: 0 0 18px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-orange);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.testimonials-page article.testimonial blockquote {
  margin: 0;
  padding: 0;
}

.testimonials-page article.testimonial blockquote p {
  margin: 0;
  color: var(--c-body);
}

.testimonials-page article.testimonial blockquote p::before {
  content: "\201C";
  color: var(--c-orange);
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -.15em;
  margin-right: 2px;
}

.testimonials-page article.testimonial blockquote p::after {
  content: "\201D";
  color: var(--c-orange);
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -.15em;
  margin-left: 2px;
}

.testimonials-author {
  display: block;
  margin-top: 12px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-muted);
}

.testimonials-author a {
  color: var(--c-orange);
}

/* ----------------------------------------------------------
   Editor list page — built to look right with one editor
   and with twenty
   ---------------------------------------------------------- */

.editor-profiles-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 20px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- intro ---- */

.editors-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 32px;
  text-align: center;
  border-bottom: 1px solid var(--c-line);
}

.editor-profiles-page .editors-intro h1 {
  margin: 0 0 .5em;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  letter-spacing: -.01em;
}

/* Left-aligned inside a centred column — centred body copy of this length
   is noticeably harder to read than the ragged-right version. */
.editors-lede {
  margin: 0 auto 1em;
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: left;
  color: var(--c-body);
}

.editors-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.editors-stats li {
  margin: 0;
  padding: 16px 12px;
  background: var(--c-tint);
  border: 1px solid #ffd8bf;
  border-radius: 10px;
}

.editors-stats strong {
  display: block;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--c-orange);
}

.editors-stats span {
  display: block;
  margin-top: 4px;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--c-muted);
}

/* ---- filter bar ---- */

.editors-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 28px 0 4px;
}

.editors-filter {
  padding: 8px 18px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-body);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.editors-filter:hover,
.editors-filter:focus-visible {
  border-color: var(--c-orange);
  color: var(--c-orange);
}

.editors-filter.is-active {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: #fff;
}

/* ---- card grid ----
   auto-fit with a max track width so a single card keeps a sensible
   size instead of stretching the full page. */

.editors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 340px));
  justify-content: center;
  gap: 24px;
  margin: 32px 0 0;
}

.editor-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-top: 4px solid var(--c-orange);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  transition: box-shadow .2s ease, transform .2s ease;
}

.editor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
}

.editor-card[hidden] {
  display: none;
}

.editor-card-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-tint);
  border-bottom: 1px solid var(--c-line);
}

.editor-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.editor-card-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-orange);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Small factual tag, not a ribbon — states the fact and gets out of the way. */
.editor-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  background: rgba(17, 17, 17, .82);
  border-radius: 999px;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.4;
}

.editor-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px;
}

.editor-profiles-page .editor-card-name {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--c-ink);
}

.editor-card-headline {
  margin: 6px 0 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-orange);
}

.editor-card-meta {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: .85rem;
  color: var(--c-muted);
}

.editor-card-meta li {
  margin: 0 0 3px;
}

.editor-card-meta i {
  width: 14px;
  margin-right: 5px;
  color: var(--c-orange);
}

.editor-card-blurb {
  margin: 14px 0 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--c-body);
  /* Clamp so uneven bio lengths don't make ragged card heights */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editor-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.editor-card-chips li {
  margin: 0;
  padding: 4px 10px;
  background: var(--c-tint);
  border: 1px solid #ffd8bf;
  border-radius: 999px;
  font-size: .76rem;
  line-height: 1.4;
  color: #555;
}

.editor-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;        /* pins the link to the bottom of every card */
  padding-top: 18px;
  color: var(--c-orange);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
}

.editor-card-link i {
  transition: transform .2s ease;
}

.editor-card:hover .editor-card-link i,
.editor-card-link:focus-visible i {
  transform: translateX(4px);
}

.editor-card-link:hover,
.editor-card-link:focus-visible {
  text-decoration: underline;
}

.editors-empty,
.editors-noresults {
  margin: 32px auto;
  max-width: 560px;
  text-align: center;
  color: var(--c-muted);
}

/* ---- closing CTA ---- */

.editors-cta {
  margin: 48px 0 0;
  padding: 36px 24px;
  background: #222;
  border-radius: 14px;
  text-align: center;
  color: #fff;
}

.editor-profiles-page .editors-cta h2 {
  margin: 0 0 .5em;
  font-size: 1.5rem;
  color: #fff;
}

.editors-cta p {
  max-width: 560px;
  margin: 0 auto 1.5em;
  color: #cfcfcf;
}

/* ----------------------------------------------------------
   Articles page
   ---------------------------------------------------------- */

.articles-category {
  margin-top: 2em;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 12px;
}

.articles-coming-soon {
  padding: 14px 18px;
  background: var(--c-tint);
  border: 1px dashed #ffc9a8;
  border-radius: 8px;
  color: #555;
  font-size: .95rem;
}

.articles-preview {
  list-style: none;
  margin: 1.2em 0 0;
  padding: 0;
}

.articles-preview li {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  color: var(--c-body);
}

.articles-preview li:last-child {
  border-bottom: 0;
}

.recent-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  background: var(--c-orange);
  border-radius: 999px;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   Editing resource vault
   ---------------------------------------------------------- */

.vault-header {
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--c-orange);
  text-align: center;
}

.vault-header p {
  margin: 0;
  color: var(--c-muted);
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.category-filters a {
  padding: 7px 16px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-body);
  font-size: .9rem;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.category-filters a:hover,
.category-filters a:focus-visible,
.category-filters a.active {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: #fff;
}

.article-item {
  margin-bottom: 16px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 10px;
}

.article-item h2 {
  margin: 0 0 .5em;
  font-size: 1.2em;
}

.article-item p {
  margin: 0 0 .5em;
}

.article-item p:last-child {
  margin-bottom: 0;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 28px;
}

.pagination a {
  min-width: 38px;
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  color: var(--c-body);
  font-size: .9rem;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.pagination a:hover,
.pagination a:focus-visible,
.pagination a.current {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: #fff;
}

/* ----------------------------------------------------------
   Three-column services block
   ---------------------------------------------------------- */

.services-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 1.8em 0;
}

.service-column {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-top: 4px solid var(--c-orange);
  border-radius: 12px;
}

.service-column h2 {
  margin: 0 0 .6em;
  font-size: 1.2em;
  color: var(--c-ink);
  text-align: left;
  border: 0;
  display: block;
}

.service-column p {
  margin: 0 0 1em;
  font-size: .95rem;
}

.service-column br {
  display: none;   /* markup uses <br> between paragraphs; margins handle it */
}

/* ----------------------------------------------------------
   Misc
   ---------------------------------------------------------- */

.section-divider {
  height: 2px;
  margin: 2.4em auto;
  max-width: 600px;
  border: 0;
  background: linear-gradient(to right,
    rgba(255, 102, 0, 0),
    rgba(255, 102, 0, .6),
    rgba(255, 102, 0, 0));
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media screen and (max-width: 900px) {
  .services-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 700px) {
  .services-container {
    grid-template-columns: minmax(0, 1fr);
  }

  .editors-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .editors-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .editors-cta {
    padding: 28px 18px;
  }

  .testimonials-page article.testimonial,
  .article-item,
  .articles-category {
    padding: 18px;
  }

  .vault-container {
    padding: 18px 16px 36px;
  }
}