/* ===================================================
   ARTICLE / BLOG POST STYLES
   Lawn & Land Marketing — New Build
   =================================================== */

/* ARTICLE HERO
   =================================================== */
.article-hero {
  padding: 120px 0 60px;
  background: var(--black-mid);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-l);
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 24px;
}
.article-breadcrumb a {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 0.2s;
}
.article-breadcrumb a:hover { color: var(--lime); }
.article-breadcrumb span:not(:last-child) { color: rgba(255,255,255,0.25); }

.article-category-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(172,231,29,0.12);
  border: 1px solid rgba(172,231,29,0.3);
  border-radius: 20px;
  font-family: var(--font-l);
  font-size: 12px;
  font-weight: 600;
  color: var(--lime);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}

.article-headline {
  font-family: var(--font-h);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  font-style: italic;
  color: var(--white);
  line-height: 1.1;
  margin: 0 0 32px;
  max-width: 820px;
}
.article-headline em {
  color: var(--lime);
  font-style: italic;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.article-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.article-author-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}
.article-author-name {
  display: block;
  font-family: var(--font-l);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
}
.article-author-title {
  display: block;
  font-family: var(--font-l);
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}
.article-meta-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.article-date, .article-read-time {
  font-family: var(--font-l);
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.article-hero-img {
  border-radius: 12px;
  overflow: hidden;
}
.article-hero-img .img-ph {
  width: 100%;
  height: 420px;
  border-radius: 12px;
}

/* ARTICLE LAYOUT — Sidebar + Content
   =================================================== */
.article-layout {
  padding: 80px 0 120px;
  background: var(--black-deep);
}

.article-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;  /* content LEFT, sidebar RIGHT */
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: start;
}

/* TABLE OF CONTENTS
   =================================================== */
.article-toc {
  position: sticky;
  top: 100px;
}
.toc-inner {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 24px;
}
.toc-label {
  font-family: var(--font-l);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 16px;
}
.toc-list {
  margin: 0;
  padding-left: 20px;
  list-style: decimal;
}
.toc-list li {
  margin-bottom: 8px;
}
.toc-list a {
  font-family: var(--font-l);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.2s;
}
.toc-list a:hover { color: var(--lime); }

/* ARTICLE BODY CONTENT
   =================================================== */
.article-content {
  min-width: 0;
}

.article-lead {
  font-family: var(--font-b);
  font-size: 19px;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.article-content section {
  margin-bottom: 56px;
}

.article-content h2 {
  font-family: var(--font-h);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  font-style: italic;
  color: var(--white);
  margin: 0 0 20px;
  line-height: 1.2;
  padding-top: 12px;
}

.article-content h3 {
  font-family: var(--font-h);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin: 32px 0 12px;
}

.article-content p {
  font-family: var(--font-b);
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
  margin-bottom: 20px;
}

.article-content ul, .article-content ol {
  padding-left: 24px;
  margin-bottom: 20px;
}
.article-content li {
  font-family: var(--font-b);
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  line-height: 1.75;
  margin-bottom: 8px;
}
.article-content a:not(.btn) {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid rgba(172,231,29,0.3);
  transition: border-color 0.2s;
}
.article-content a:not(.btn):hover { border-color: var(--lime); }

/* PULL QUOTE */
.article-content blockquote {
  margin: 36px 0;
  padding: 6px 0 6px 26px;
  border-left: 3px solid var(--lime);
  font-family: var(--font-h);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(18px, 2.3vw, 23px);
  line-height: 1.5;
  color: var(--white);
}

/* CALLOUT BOXES */
.article-callout {
  display: flex;
  gap: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 32px 0;
}
.article-callout.article-callout--lime {
  border-left-color: var(--lime);
  background: rgba(172,231,29,0.05);
  border-color: rgba(172,231,29,0.15);
}
.callout-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1.5;
}
.callout-body {
  font-family: var(--font-b);
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
}
.callout-body strong { color: var(--white); }

/* TIMELINE */
.article-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  margin: 32px 0;
  padding-left: 24px;
  border-left: 2px solid rgba(172,231,29,0.25);
}
.art-step {
  padding: 0 0 32px 24px;
  position: relative;
}
.art-step::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lime);
  border: 2px solid var(--black-deep);
}
.art-step-marker {
  font-family: var(--font-l);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lime);
  margin-bottom: 6px;
}
.art-step-body {
  font-family: var(--font-b);
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
}
.art-step-body strong { color: var(--white); }

/* FAQ */
.article-faq {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  padding: 24px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.faq-item:last-child { border-bottom: none; }
.faq-item h3 {
  font-family: var(--font-h);
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 12px;
}
.faq-item p {
  font-family: var(--font-b);
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  margin: 0;
}

/* ARTICLE CTA BLOCK */
.article-cta-block {
  margin: 64px 0 48px;
}
.article-cta-inner {
  background-color: #0d0b14;
  background-image:
    radial-gradient(120% 200% at 50% -30%, rgba(104,55,239,0.34) 0%, rgba(104,55,239,0.1) 38%, transparent 68%),
    radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1.5px);
  background-size: 100% 100%, 22px 22px;
  background-repeat: no-repeat, repeat;
  background-position: center top, center;
  border: 1px solid rgba(104,55,239,0.22);
  border-radius: 16px;
  padding: 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.article-cta-label {
  font-family: var(--font-l);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lime);
  margin-bottom: 12px;
}
.article-cta-inner h3 {
  font-family: var(--font-h);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  font-style: italic;
  color: var(--white);
  margin: 0 0 16px;
}
.article-cta-inner p {
  font-family: var(--font-b);
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto 32px;
}
.article-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* RELATED ARTICLES */
.article-related {
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.article-related h3 {
  font-family: var(--font-h);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 28px;
}
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.related-card {
  display: block;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  border-bottom: none;
  transition: border-color 0.2s, transform 0.2s;
}
.related-card:hover {
  border-color: rgba(172,231,29,0.25);
  transform: translateY(-2px);
}
.related-card-img {
  width: 100%;
  height: 140px;
  border-radius: 0;
}
.related-card-body {
  padding: 16px;
}
.related-card-cat {
  display: block;
  font-family: var(--font-l);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lime);
  margin-bottom: 8px;
}
.related-card h4 {
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin: 0;
  line-height: 1.4;
}
.related-card:hover h4 { color: var(--lime); }

/* RESPONSIVE
   =================================================== */
@media (max-width: 1024px) {
  .article-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .article-toc {
    position: static;
    order: -1;
  }
  .article-related-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .article-hero { padding: 100px 0 48px; }
  .article-headline { font-size: 28px; }
  .article-meta { flex-direction: column; align-items: flex-start; }
  .article-hero-img .img-ph { height: 240px; }
  .article-cta-inner { padding: 32px 24px; }
  .article-related-grid { grid-template-columns: 1fr; }
  .article-callout { flex-direction: column; gap: 8px; }
}

/* ===================================================
   BLOG SIDEBAR (right rail: author + contact form + related)
   + INDEX LISTING. Added for the live blog build.
   =================================================== */
.article-aside {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  align-self: stretch;   /* span the full article height so the sticky Related card has room to travel */
}
/* Only the short Related-articles card sticks (the long form scrolls normally so it's
   fully readable); it pins once the form has scrolled past the top of the viewport. */
.aside-card--sticky {
  position: sticky;
  top: 96px;
}
.aside-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px;
}
.aside-label {
  font-family: var(--font-l);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.38);
  margin: 0 0 16px;
}

/* About the author */
.aside-author-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.aside-author-photo { width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0; overflow: hidden; }
.aside-author-name { font-family: var(--font-h); font-style: italic; font-weight: 800; font-size: 18px; color: var(--white); line-height: 1.1; }
.aside-author-role { font-family: var(--font-l); font-size: 12px; color: var(--lime); margin-top: 4px; }
.aside-author-bio { font-family: var(--font-b); font-size: 14px; color: rgba(255,255,255,0.66); line-height: 1.7; margin: 0; }

/* Sidebar contact form (same fields as the contact page, stacked for the narrow rail) */
.aside-card .cform-field { display:block; font-family:var(--font-l); font-size:12px; font-weight:700; letter-spacing:0.02em; color:rgba(255,255,255,0.6); margin-bottom:13px; }
.aside-card .cform-field input, .aside-card .cform-field textarea { display:block; width:100%; margin-top:6px; padding:11px 13px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14); border-radius:10px; color:var(--white); font-family:var(--font-b); font-size:14px; transition:border-color .2s, background .2s; box-sizing:border-box; }
.aside-card .cform-field input:focus, .aside-card .cform-field textarea:focus { outline:none; border-color:var(--lime); background:rgba(255,255,255,0.06); }
.aside-card .cform-field textarea { resize:vertical; min-height:86px; }
.aside-card .cform-field input::placeholder, .aside-card .cform-field textarea::placeholder { color:rgba(255,255,255,0.34); }
.aside-card .cform-2col { display:block; }            /* stack email + phone in the rail */
.aside-card .cform-consent { display:flex; gap:9px; align-items:flex-start; margin:2px 0 16px; cursor:pointer; }
.aside-card .cform-consent input { flex-shrink:0; width:16px; height:16px; margin-top:2px; accent-color:var(--lime); cursor:pointer; }
.aside-card .cform-consent span { font-family:var(--font-b); font-size:11.5px; line-height:1.5; color:rgba(255,255,255,0.55); }
.aside-card .cform-consent a { color:var(--lime); text-decoration:underline; text-underline-offset:2px; }
.aside-card .cform-submit { width:100%; justify-content:center; }

/* Sidebar related (vertical mini-cards) */
.aside-related { display:flex; flex-direction:column; gap:16px; }
.aside-rel { display:flex; gap:13px; align-items:center; text-decoration:none; border-bottom:none; }
.aside-rel-thumb { width:68px; height:54px; border-radius:9px; flex-shrink:0; overflow:hidden; }
.aside-rel-title { font-family:var(--font-h); font-style:italic; font-weight:700; font-size:13.5px; color:var(--white); line-height:1.3; transition:color .2s; }
.aside-rel:hover .aside-rel-title { color:var(--lime); }
.aside-rel-date { font-family:var(--font-l); font-size:11px; color:rgba(255,255,255,0.4); margin-top:4px; }

/* Clean image placeholder (no obtrusive label) — used until real images land */
.blog-ph {
  background-color: #0d160f;
  background-image:
    radial-gradient(120% 140% at 28% 0%, rgba(104,55,239,0.20), transparent 60%),
    linear-gradient(135deg, rgba(172,231,29,0.13), rgba(93,202,73,0.03));
  display:flex; align-items:center; justify-content:center;
}
.blog-ph svg { width:32px; height:32px; color:rgba(255,255,255,0.20); }

/* ===================================================
   BLOG INDEX — listing grid
   =================================================== */
.blog-index { max-width: var(--max); margin: 0 auto; padding: clamp(48px,7vw,84px) 24px; }
.blog-filters { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:44px; }
.blog-filter {
  padding:9px 18px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.14); background:transparent;
  font-family:var(--font-l); font-size:13px; font-weight:600;
  color:rgba(255,255,255,0.68); cursor:pointer; transition:all .2s;
}
.blog-filter:hover { border-color:rgba(172,231,29,0.5); color:var(--white); }
.blog-filter.is-active { background:var(--lime); color:var(--black); border-color:var(--lime); }

.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.blog-card {
  display:flex; flex-direction:column;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; overflow:hidden;
  text-decoration:none; border-bottom:none;
  transition:transform .2s, border-color .2s;
}
.blog-card:hover { transform:translateY(-4px); border-color:rgba(172,231,29,0.4); }
.blog-card-img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.blog-card-body { padding:22px 22px 24px; display:flex; flex-direction:column; gap:11px; flex:1; }
.blog-card-cat { align-self:flex-start; font-family:var(--font-l); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--lime); }
.blog-card-title { font-family:var(--font-h); font-style:italic; font-weight:800; font-size:19px; line-height:1.22; color:var(--white); margin:0; transition:color .2s; }
.blog-card:hover .blog-card-title { color:var(--lime); }
.blog-card-excerpt { font-family:var(--font-b); font-size:14px; color:rgba(255,255,255,0.6); line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.blog-card-date { font-family:var(--font-l); font-size:12px; color:rgba(255,255,255,0.4); margin-top:auto; padding-top:4px; }
.blog-card-meta { margin-top:auto; padding-top:6px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.blog-card-meta .blog-card-date { margin-top:0; padding-top:0; }
.blog-card-author { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-l); font-size:12.5px; color:rgba(255,255,255,0.62); }
.blog-card-avatar { width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.blog-card-cta { font-family:var(--font-l); font-size:12.5px; font-weight:700; color:var(--lime); }

@media (max-width: 900px) { .blog-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 1024px) { .aside-card--sticky { position:static; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns:1fr; } }


/* ===================================================
   AUTHOR SYSTEM (EEAT): end-of-article bio block + author page
   =================================================== */
/* End-of-article "About the author" block */
.author-block { margin: 56px 0 4px; padding: 28px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; display: flex; gap: 22px; align-items: flex-start; }
.author-block-photo { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; }
.author-block-label { font-family: var(--font-l); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.38); margin: 0 0 7px; }
.author-block-name { font-family: var(--font-h); font-style: italic; font-weight: 800; font-size: 20px; color: var(--white); text-decoration: none; line-height: 1.1; }
.author-block-name:hover { color: var(--lime); }
.author-block-role { font-family: var(--font-l); font-size: 12.5px; color: var(--lime); margin: 3px 0 12px; }
.author-block-bio { font-family: var(--font-b); font-size: 14.5px; color: rgba(255,255,255,0.66); line-height: 1.7; margin: 0; }
.author-block-bio em { font-style: italic; color: rgba(255,255,255,0.82); }
@media (max-width: 560px){ .author-block { flex-direction: column; gap: 16px; } }

/* Sidebar author teaser link */
.aside-author-more { display:inline-block; margin-top:12px; font-family:var(--font-l); font-size:13px; font-weight:600; color:var(--lime); text-decoration:none; }
.aside-author-more:hover { text-decoration:underline; }

/* Author page (authority hub) */
.author-hero { padding: 116px 0 52px; background: var(--black-mid); border-bottom: 1px solid rgba(255,255,255,0.06); }
.author-hero-inner { max-width: 940px; margin: 0 auto; padding: 0 24px; display: flex; gap: 36px; align-items: center; }
.author-hero-photo { width: 168px; height: 168px; border-radius: 22px; flex-shrink: 0; }
.author-hero h1 { font-family: var(--font-h); font-style: italic; font-weight: 800; font-size: clamp(30px,4.6vw,48px); color: var(--white); line-height: 1.04; margin: 14px 0 0; }
.author-hero-role { font-family: var(--font-l); font-size: 14px; color: var(--lime); margin: 11px 0 20px; letter-spacing: 0.01em; }
.author-links { display: flex; flex-wrap: wrap; gap: 10px; }
.author-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); font-family: var(--font-l); font-size: 13px; color: rgba(255,255,255,0.78); text-decoration: none; transition: border-color .2s, color .2s; }
.author-link:hover { border-color: rgba(172,231,29,0.5); color: var(--white); }
.author-link svg { width: 15px; height: 15px; }
.author-body { max-width: 760px; margin: 0 auto; padding: clamp(48px,6vw,72px) 24px clamp(20px,3vw,32px); }
.author-body p { font-family: var(--font-b); font-size: 16.5px; color: rgba(255,255,255,0.74); line-height: 1.8; margin: 0 0 22px; }
.author-body p:first-child { font-size: 18px; color: rgba(255,255,255,0.84); }
.author-body em { font-style: italic; color: var(--white); }
.author-articles { max-width: var(--max); margin: 0 auto; padding: 8px 24px clamp(56px,8vw,96px); }
.author-articles-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.author-articles-head h2 { font-family: var(--font-h); font-style: italic; font-weight: 800; font-size: clamp(24px,3.4vw,34px); color: var(--white); margin: 0; }
.author-articles-head a { font-family: var(--font-l); font-size: 14px; font-weight: 600; color: var(--lime); text-decoration: none; }
@media (max-width: 700px){ .author-hero-inner { flex-direction: column; text-align: center; align-items: center; gap: 22px; } .author-links { justify-content: center; } }