/* =========================================================
   Ecozen — Bloq stilləri (siyahı, kart, məqalə səhifəsi)
   ========================================================= */

/* Kartlar */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }
.post-card { display: flex; flex-direction: column; }
.post-card[hidden] { display: none; }
.post-card__img { aspect-ratio: 16 / 10; margin-bottom: 1.1rem; }
.post-card:hover .art { transform: scale(1.04); }
.post-card h3 { font-size: var(--fs-md); line-height: 1.35; margin-bottom: .45em; }
.post-card h3 a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--leaf), var(--leaf)) 0 100% / 0 2px no-repeat; transition: background-size .3s; }
.post-card h3 a:hover { background-size: 100% 2px; }
.post-card p { color: var(--steel); font-size: .95rem; margin: 0; }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; font-size: var(--fs-sm); color: var(--steel); margin-bottom: .7rem; }
.chip--air { background: var(--leaf-soft); color: var(--leaf-deep); }

/* Seçilmiş yazı */
.post-featured { margin-bottom: 3.5rem; }
.post-card--big { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.post-card--big .post-card__img { margin: 0; aspect-ratio: 16 / 11; border-radius: var(--radius-l); }
.post-card--big h3 { font-size: var(--fs-2xl); line-height: 1.2; }
.post-card--big p { font-size: var(--fs-md); }

/* Alət paneli: filtr + axtarış */
.blog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.blog-toolbar .filters { margin: 0; }
.search { position: relative; display: block; width: min(300px, 100%); }
.search svg { position: absolute; left: 1rem; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--steel); }
.search input { width: 100%; font: inherit; padding: .7rem 1rem .7rem 2.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); }
.search input:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(67,160,71,.2); }
.empty-state { text-align: center; color: var(--steel); padding: 3rem 1rem; margin: 0 auto; }

/* Abunə */
.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.newsletter h2 { font-size: var(--fs-xl); margin-bottom: .3em; }
.newsletter p { margin: 0; color: var(--steel); }
.newsletter__form { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: start; }
.newsletter__form input { border-radius: 999px !important; padding: .85rem 1.2rem !important; }
.newsletter__form .form-success { grid-column: 1 / -1; margin: 0; }

/* Məqalə */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150; }
.read-progress span { display: block; height: 100%; width: 0; background: var(--leaf); }
.article__head { padding: clamp(2rem, 1.5rem + 3vw, 4rem) 0 2.5rem; }
.article__head h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin: .3em 0 .45em; }
.article__lead { font-size: var(--fs-lg); line-height: 1.5; color: var(--steel); max-width: 60ch; }
.author { display: flex; align-items: center; gap: .85rem; margin-top: 1.75rem; }
.author__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--leaf-soft); color: var(--leaf-deep); display: grid; place-items: center; }
.author__avatar svg { width: 22px; height: 22px; }
.author strong { display: block; font-family: var(--font-head); font-weight: 500; color: var(--ink); }
.author span { font-size: var(--fs-sm); color: var(--steel); }
.article__cover { aspect-ratio: 3 / 1; border-radius: var(--radius-l); }

.article__layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; gap: clamp(2rem, 4vw, 4rem); padding-top: 3.5rem; padding-bottom: var(--section); align-items: start; }
.article__toc, .article__side { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.article__toc h2 { font-size: var(--fs-sm); color: var(--steel); font-weight: 500; margin-bottom: .75rem; }
.article__toc ol { list-style: none; padding: 0; margin: 0 0 2rem; border-left: 2px solid var(--line); }
.article__toc a { display: block; padding: .4rem 0 .4rem 1rem; margin-left: -2px; border-left: 2px solid transparent; font-size: .9rem; line-height: 1.4; color: var(--steel); text-decoration: none; }
.article__toc a:hover { color: var(--ink); }
.article__toc a.active { color: var(--leaf-deep); border-left-color: var(--leaf); font-weight: 500; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.share > span:first-child { width: 100%; font-size: var(--fs-sm); color: var(--steel); }
.share a, .share button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); display: grid; place-items: center; color: var(--ink); cursor: pointer; }
.share a:hover, .share button:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.share svg { width: 16px; height: 16px; }
.copy-done { font-size: var(--fs-sm); color: var(--leaf-deep); }

.prose { font-size: 1.075rem; line-height: 1.75; }
.prose h2 { font-size: var(--fs-xl); margin: 2.4rem 0 .7rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose h2:first-child { margin-top: 0; }
.prose p { max-width: 70ch; }
.callout { margin: 2rem 0; padding: 1.4rem 1.6rem; border-radius: var(--radius-m); background: var(--leaf-soft); border-left: 4px solid var(--leaf); }
.callout strong { font-family: var(--font-head); color: var(--leaf-deep); display: block; margin-bottom: .3rem; }
.callout p { margin: 0; color: var(--ink-2); }
.article__end { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--steel); }

/* Responsiv */
@media (max-width: 1100px) {
  .article__layout { grid-template-columns: 200px minmax(0, 1fr); }
  .article__side { display: none; }
}
@media (max-width: 991px) {
  .post-grid { grid-template-columns: 1fr 1fr; }
  .post-card--big, .newsletter { grid-template-columns: 1fr; }
  .article__layout { grid-template-columns: 1fr; padding-top: 2rem; }
  .article__toc { position: static; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.25rem; }
  .article__toc ol { margin-bottom: 1.25rem; }
  .article__cover { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
  .newsletter__form { grid-template-columns: 1fr; }
  .blog-toolbar { flex-direction: column; align-items: stretch; }
  .search { width: 100%; }
}