/* ============================================================
   ILX BLOG - Landscape Guides index + single post
   Loaded on the blog page, single posts, and archives.
   Uses Coastal Estate tokens.
   ============================================================ */

/* ---- Blog hero -------------------------------------------- */
.blog-page .blog-hero{ padding-top:clamp(26px,3.5vw,46px); padding-bottom:clamp(18px,2vw,30px); }
.blog-hero__inner{ max-width:760px; }
.blog-hero__inner .eyebrow{ margin-bottom:14px; }
.blog-hero__title{
  font-family:var(--ilx-serif);
  font-size:var(--ilx-fs-h1);
  line-height:1.04; letter-spacing:-.015em;
  color:var(--ilx-forest-deep);
  margin:0 0 14px;
}
.blog-hero__lead{ font-size:var(--ilx-fs-lead); color:var(--ilx-muted); line-height:1.65; margin:0; }

.blog-list{ padding-top:0; }

/* ---- Card grid -------------------------------------------- */
.gcard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(18px,2.2vw,28px);
}

/* ---- Post card -------------------------------------------- */
.gcard{
  background:var(--ilx-white);
  border:1px solid var(--ilx-line);
  border-radius:var(--ilx-r-lg);
  overflow:hidden;
  box-shadow:var(--ilx-shadow-sm);
  transition:transform var(--ilx-dur-fast) var(--ilx-ease), box-shadow var(--ilx-dur-fast) var(--ilx-ease), border-color var(--ilx-dur-fast) var(--ilx-ease);
  height:100%;
}
.gcard:hover{ transform:translateY(-4px); box-shadow:var(--ilx-shadow); border-color:var(--ilx-sage); }
.gcard__link{ display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; }

/* Cover (no-image fallback uses a topic gradient + line icon) */
.gcard__cover{
  position:relative;
  aspect-ratio:16 / 10;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--ilx-forest),var(--ilx-forest-deep));
  overflow:hidden;
}
.gcard__cover::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 80% 0%, rgba(255,255,255,.08), transparent 60%);
}
.gcard__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gcard--has-img .gcard__icon{ display:none; }
.gcard__icon{ position:relative; z-index:1; color:rgba(255,255,255,.9); }
.gcard__icon svg{ width:46px; height:46px; }
.gcard__cat{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-size:var(--ilx-fs-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ilx-forest-deep);
  background:rgba(255,255,255,.92);
  border-radius:var(--ilx-pill);
  padding:5px 12px;
}

/* Topic accents (all within the Coastal Estate palette) */
.gcard--lighting .gcard__cover{ background:linear-gradient(135deg,#1d2c1c,#0b1f14); }
.gcard--lighting .gcard__icon{ color:var(--ilx-gold); }
.gcard--design    .gcard__cover{ background:linear-gradient(135deg,#2e6b4c,#143020); }
.gcard--lawn      .gcard__cover{ background:linear-gradient(135deg,#6e9b3d,#2e6b4c); }
.gcard--hardscape .gcard__cover{ background:linear-gradient(135deg,#46402f,#131711); }
.gcard--hardscape .gcard__icon{ color:var(--ilx-orange-mid); }
.gcard--planning  .gcard__cover{ background:linear-gradient(135deg,#2e6b4c,#1f411d); }
.gcard--planting  .gcard__cover{ background:linear-gradient(135deg,#5b8f72,#214b32); }

/* Body */
.gcard__body{ display:flex; flex-direction:column; gap:10px; padding:22px 22px 20px; flex:1; }
.gcard__title{ font-family:var(--ilx-serif); font-size:var(--ilx-fs-h4); line-height:1.22; color:var(--ilx-forest-deep); margin:0; }
.gcard__excerpt{ font-size:var(--ilx-fs-sm); color:var(--ilx-muted); line-height:1.6; margin:0; }
.gcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; }
.gcard__meta{ display:inline-flex; align-items:center; gap:7px; font-size:var(--ilx-fs-xs); color:var(--ilx-muted); }
.gcard__dot{ opacity:.6; }
.gcard__more{ display:inline-flex; align-items:center; gap:6px; font-size:var(--ilx-fs-sm); font-weight:700; color:var(--ilx-orange); white-space:nowrap; }
.gcard__more svg{ width:15px; height:15px; transition:transform var(--ilx-dur-fast) var(--ilx-ease); }
.gcard:hover .gcard__more svg{ transform:translateX(4px); }

/* ---- Featured lead card ----------------------------------- */
.blog-featured{ margin-bottom:clamp(18px,2.2vw,28px); }
.gcard--featured{ height:auto; }
.gcard--featured .gcard__link{ flex-direction:row; align-items:stretch; }
.gcard--featured .gcard__cover{ aspect-ratio:auto; flex:0 0 52%; min-height:330px; }
.gcard--featured .gcard__icon svg{ width:70px; height:70px; }
.gcard--featured .gcard__body{ justify-content:center; padding:clamp(26px,3vw,44px); gap:14px; }
.gcard--featured .gcard__title{ font-size:var(--ilx-fs-h2); line-height:1.1; }
.gcard--featured .gcard__excerpt{ font-size:var(--ilx-fs-base); }

/* ---- Pagination ------------------------------------------- */
.blog-pagination{ margin-top:clamp(28px,3vw,44px); }
.blog-pagination .nav-links,
.blog-pagination > ul{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; list-style:none; margin:0; padding:0; }
.blog-pagination li{ list-style:none; }
.blog-pagination .page-numbers{
  display:inline-grid; place-items:center;
  min-width:42px; height:42px; padding:0 12px;
  border:1px solid var(--ilx-line); border-radius:var(--ilx-r-sm);
  background:var(--ilx-white); color:var(--ilx-forest-deep);
  font-weight:600; font-size:var(--ilx-fs-sm); text-decoration:none;
  transition:background var(--ilx-dur-fast) var(--ilx-ease), color var(--ilx-dur-fast) var(--ilx-ease), border-color var(--ilx-dur-fast) var(--ilx-ease);
}
.blog-pagination .page-numbers:hover{ border-color:var(--ilx-forest-mid); color:var(--ilx-orange); }
.blog-pagination .page-numbers.current{ background:var(--ilx-forest-deep); color:#fff; border-color:var(--ilx-forest-deep); }
.blog-pagination .page-numbers.dots{ border:none; background:transparent; }

.blog-empty{ font-size:var(--ilx-fs-lead); color:var(--ilx-muted); text-align:center; padding:40px 0; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.blog-single .bs-hero{ padding-top:clamp(22px,3vw,40px); padding-bottom:clamp(14px,1.6vw,24px); }
.bs-hero__inner{ max-width:820px; margin-inline:auto; text-align:center; }
.bs-cat{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--ilx-fs-sm); font-weight:700; letter-spacing:.03em;
  color:var(--ilx-forest); text-decoration:none;
  background:var(--ilx-leaf-soft); border:1px solid var(--ilx-line);
  border-radius:var(--ilx-pill); padding:6px 15px; margin-bottom:18px;
}
.bs-cat svg{ width:16px; height:16px; }
.bs-cat:hover{ color:var(--ilx-orange); }
.bs-hero__title{
  font-family:var(--ilx-serif);
  font-size:var(--ilx-fs-h1);
  line-height:1.05; letter-spacing:-.015em;
  color:var(--ilx-forest-deep); margin:0 0 16px;
}
.bs-hero__lead{ font-size:var(--ilx-fs-lead); color:var(--ilx-muted); line-height:1.6; margin:0 auto 18px; max-width:62ch; }
.bs-hero__meta{ display:inline-flex; align-items:center; gap:9px; font-size:var(--ilx-fs-sm); color:var(--ilx-muted); }
.bs-hero__dot{ opacity:.6; }

/* Featured image */
.bs-figure-wrap{ margin-bottom:clamp(8px,1.5vw,18px); }
.bs-figure{ margin:0; border-radius:var(--ilx-r-lg); overflow:hidden; box-shadow:var(--ilx-shadow); max-width:980px; margin-inline:auto; }
.bs-figure img{ width:100%; height:auto; display:block; }

.bs-body{ padding-top:clamp(20px,2.5vw,34px); }

/* Topic accent on the article (subtle: the category chip + copy links) */
.blog-single--lighting .bs-cat{ background:#11271c; color:var(--ilx-gold); border-color:rgba(201,178,126,.3); }
.blog-single--hardscape .bs-cat{ background:var(--ilx-orange-soft); color:var(--ilx-orange-deep); }

/* ---- Related guides --------------------------------------- */
.bs-related{ background:var(--ilx-cream); }
.bs-related__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.bs-related__title{ font-family:var(--ilx-serif); font-size:var(--ilx-fs-h3); color:var(--ilx-forest-deep); margin:0; }
.bs-related__link{ font-size:var(--ilx-fs-sm); font-weight:700; color:var(--ilx-orange); text-decoration:none; white-space:nowrap; }
.bs-related__link:hover{ color:var(--ilx-orange-deep); }

.bs-pagelinks{ max-width:760px; margin:24px auto 0; display:flex; gap:8px; flex-wrap:wrap; }

/* ---- Responsive ------------------------------------------- */
@media (max-width:760px){
  .gcard--featured .gcard__link{ flex-direction:column; }
  .gcard--featured .gcard__cover{ flex:none; aspect-ratio:16 / 10; min-height:0; }
  .gcard--featured .gcard__title{ font-size:var(--ilx-fs-h3); }
}
@media (max-width:420px){
  .gcard__foot{ flex-direction:column; align-items:flex-start; gap:8px; }
}

@media (prefers-reduced-motion:reduce){
  .gcard{ transition:none; }
  .gcard__more svg{ transition:none; }
}