/* =========================================================================
   EasyStack — Blog & Insights (listing + article pages)
   Builds on the global design tokens defined in css/main.css (:root --es-*).
   Card-based news/blog layout in the site's visual language.
   ========================================================================= */

/* ------------------------------ LISTING: HERO + FILTER ------------------------------ */
.bl-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #f5f7ff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--es-border);
  padding-block: clamp(56px, 8vw, 96px) clamp(36px, 5vw, 56px);
  text-align: center;
}
.bl-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bl-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(67, 56, 202, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 56, 202, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000, transparent 78%);
}
.bl-hero__orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; }
.bl-hero__orb--1 { width: 420px; height: 420px; top: -200px; left: 50%; margin-left: -420px; background: radial-gradient(circle, rgba(67, 56, 202, 0.4), transparent 70%); }
.bl-hero__orb--2 { width: 380px; height: 380px; top: -180px; left: 50%; margin-left: 60px; background: radial-gradient(circle, rgba(34, 211, 238, 0.32), transparent 70%); }
.bl-hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 18px; border-radius: 999px;
  background: rgba(79, 70, 229, 0.1); border: 1px solid rgba(79, 70, 229, 0.28);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--es-primary-ink);
}
.bl-hero__title { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.1; letter-spacing: -0.03em; }
.bl-hero__lead { margin: 18px auto 0; max-width: 640px; font-size: clamp(14.5px, 1.6vw, 17px); line-height: 1.7; color: var(--es-text-dim); }

.bl-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.bl-filter__btn {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--es-border); background: rgba(15, 18, 43, 0.03);
  color: var(--es-text-dim); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.bl-filter__btn:hover { color: var(--es-primary-ink); border-color: rgba(79, 70, 229, 0.5); background: rgba(79, 70, 229, 0.08); transform: translateY(-2px); }
.bl-filter__btn.is-active { color: #fff; background: var(--es-gradient); border-color: transparent; box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3); }

/* ------------------------------ LISTING: FEATURED + GRID ------------------------------ */
.bl-list { padding-block: clamp(48px, 7vw, 84px); background: var(--es-bg); }

.bl-featured {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  border-radius: var(--es-radius-lg); overflow: hidden;
  background: var(--es-surface); border: 1px solid var(--es-border);
  margin-bottom: clamp(28px, 4vw, 44px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.bl-featured:hover { transform: translateY(-6px); box-shadow: var(--es-shadow); border-color: var(--es-border-strong); }
.bl-featured__media { position: relative; min-height: 320px; overflow: hidden; background: var(--es-surface-2); }
.bl-featured__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.bl-featured:hover .bl-featured__thumb { transform: scale(1.05); }
.bl-featured__body { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 40px); }
.bl-featured__title { font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.02em; line-height: 1.25; color: var(--es-text); transition: color 0.25s ease; }
.bl-featured:hover .bl-featured__title { color: var(--es-primary-ink); }
.bl-featured__excerpt { font-size: 14.5px; line-height: 1.7; color: var(--es-text-dim); }

.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bl-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--es-radius); overflow: hidden;
  background: var(--es-surface); border: 1px solid var(--es-border);
  text-decoration: none; color: inherit;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.bl-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(15, 18, 43, 0.12); border-color: var(--es-border-strong); color: inherit; }
.bl-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--es-surface-2); }
.bl-card__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.bl-card:hover .bl-card__thumb { transform: scale(1.06); }
.bl-card__badge {
  position: absolute; top: 12px; left: 12px; padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--es-primary-ink); border: 1px solid rgba(79, 70, 229, 0.25);
}
.bl-card__badge--ai { color: #6d28d9; border-color: rgba(139, 124, 246, 0.4); }
.bl-card__badge--cloud { color: #0369a1; border-color: rgba(56, 189, 248, 0.4); }
.bl-card__badge--company { color: #0f766e; border-color: rgba(45, 212, 191, 0.4); }
.bl-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px; }
.bl-card__meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--es-text-mute); }
.bl-card__meta span + span::before { content: "·"; margin-right: 10px; }
.bl-card__title { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; color: var(--es-text); transition: color 0.25s ease; }
.bl-card:hover .bl-card__title { color: var(--es-primary-ink); }
.bl-card__excerpt { font-size: 13.5px; line-height: 1.65; color: var(--es-text-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card__cta {
  margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--es-primary-ink);
}
.bl-card__cta svg { transition: transform 0.25s ease; }
.bl-card:hover .bl-card__cta svg { transform: translateX(4px); }
.bl-empty { display: none; padding: 48px 20px; text-align: center; font-size: 14.5px; color: var(--es-text-mute); border: 1px dashed var(--es-border-strong); border-radius: var(--es-radius); }

/* ------------------------------ LISTING: NEWSLETTER BAND ------------------------------ */
.bl-news {
  position: relative; overflow: hidden; isolation: isolate;
  --es-text: #eef0fb; --es-text-dim: #aab0d0;
  background:
    radial-gradient(110% 90% at 82% 0%, rgba(79, 70, 229, 0.32), transparent 62%),
    radial-gradient(75% 65% at 0% 100%, rgba(49, 46, 129, 0.38), transparent 60%),
    #05060f;
  padding-block: clamp(56px, 8vw, 92px);
  text-align: center; color: var(--es-text);
}
.bl-news__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000, transparent 80%);
}
.bl-news__title { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -0.03em; }
.bl-news__desc { margin: 14px auto 0; max-width: 560px; font-size: clamp(14.5px, 1.6vw, 16.5px); line-height: 1.7; color: var(--es-text-dim); }
.bl-news__form { display: flex; gap: 10px; max-width: 520px; margin: 28px auto 0; }
.bl-news__input {
  flex: 1; min-width: 0; height: 50px; padding: 0 20px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06); color: var(--es-text);
  font-size: 14.5px; outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bl-news__input::placeholder { color: #8b91b5; }
.bl-news__input:focus { border-color: var(--es-accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18); }
.bl-news__note { margin-top: 14px; font-size: 12.5px; color: #8b91b5; }
.bl-news__done { display: none; margin: 28px auto 0; max-width: 520px; padding: 14px 22px; border-radius: 999px; background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.4); color: #a5f3fc; font-size: 14.5px; font-weight: 600; }

/* ------------------------------ ARTICLE: HERO ------------------------------ */
.post-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #f5f7ff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--es-border);
  padding-block: clamp(48px, 7vw, 84px) clamp(36px, 5vw, 56px);
}
.post-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.post-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(67, 56, 202, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 56, 202, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 20%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 20%, #000, transparent 78%);
}
.post-hero__inner { max-width: 860px; margin: 0 auto; padding-inline: 24px; text-align: center; }
.post-crumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--es-text-mute); margin-bottom: 20px; }
.post-crumbs a { color: var(--es-text-dim); text-decoration: none; transition: color 0.2s ease; }
.post-crumbs a:hover { color: var(--es-primary-ink); }
.post-crumbs span[aria-current] { color: var(--es-primary-ink); font-weight: 600; }
.post-hero__badge {
  display: inline-flex; padding: 5px 13px; margin-bottom: 16px; border-radius: 999px;
  background: rgba(79, 70, 229, 0.1); border: 1px solid rgba(79, 70, 229, 0.28);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--es-primary-ink);
}
.post-title { font-size: clamp(28px, 4.2vw, 46px); line-height: 1.15; letter-spacing: -0.03em; }
.post-deck { margin: 18px auto 0; max-width: 720px; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.7; color: var(--es-text-dim); }
.post-meta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 24px; font-size: 13.5px; color: var(--es-text-mute); }
.post-meta__author { display: inline-flex; align-items: center; gap: 10px; color: var(--es-text); font-weight: 600; }
.post-meta__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--es-gradient); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
}
.post-meta__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--es-border-strong); }
.post-cover { max-width: 1060px; margin: clamp(28px, 4vw, 44px) auto 0; padding-inline: 24px; }
.post-cover img { display: block; width: 100%; border-radius: var(--es-radius-lg); border: 1px solid var(--es-border); box-shadow: var(--es-shadow); }

/* ------------------------------ ARTICLE: LAYOUT (content + sticky aside) ------------------------------ */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 56px); padding-block: clamp(48px, 6vw, 76px); }
.post-main { max-width: 760px; }

.post-content { font-size: 15.5px; line-height: 1.85; color: var(--es-text-dim); }
.post-content > * + * { margin-top: 18px; }
.post-content h2 {
  margin-top: 40px; font-size: clamp(21px, 2.4vw, 26px); letter-spacing: -0.02em;
  color: var(--es-text); scroll-margin-top: calc(var(--es-header-h) + 24px);
}
.post-content h3 { margin-top: 28px; font-size: 18px; color: var(--es-text); scroll-margin-top: calc(var(--es-header-h) + 24px); }
.post-content p strong { color: var(--es-text); }
.post-content a { color: var(--es-primary-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(79, 70, 229, 0.35); text-underline-offset: 3px; }
.post-content ul { padding-left: 22px; }
.post-content li { margin-top: 8px; }
.post-content li::marker { color: var(--es-primary); }
.post-content blockquote {
  position: relative; margin: 28px 0; padding: 18px 24px;
  border-left: 3px solid transparent;
  border-image: var(--es-gradient) 1;
  background: var(--es-bg-alt); border-radius: 0 var(--es-radius-sm) var(--es-radius-sm) 0;
  font-size: 16.5px; font-style: italic; color: var(--es-text);
}
.post-content figure { margin: 28px 0; }
.post-content figure img { display: block; width: 100%; border-radius: var(--es-radius); border: 1px solid var(--es-border); }
.post-content figcaption { margin-top: 10px; font-size: 13px; text-align: center; color: var(--es-text-mute); }

.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.post-tags a {
  padding: 6px 13px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--es-border); background: rgba(15, 18, 43, 0.03);
  font-size: 12.5px; font-weight: 600; color: var(--es-text-dim);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.post-tags a:hover { color: var(--es-primary-ink); border-color: rgba(79, 70, 229, 0.5); background: rgba(79, 70, 229, 0.08); }

.post-author {
  display: flex; gap: 18px; align-items: flex-start;
  margin-top: 36px; padding: 24px;
  border-radius: var(--es-radius); border: 1px solid var(--es-border);
  background: linear-gradient(180deg, var(--es-surface-2), var(--es-surface));
}
.post-author__avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--es-gradient); color: #fff; font-size: 18px; font-weight: 800;
}
.post-author__name { font-size: 16px; font-weight: 700; color: var(--es-text); }
.post-author__role { font-size: 12.5px; color: var(--es-primary-ink); font-weight: 600; margin-top: 2px; }
.post-author__bio { margin-top: 8px; font-size: 13.5px; line-height: 1.65; color: var(--es-text-dim); }

.post-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.post-pager a {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  border-radius: var(--es-radius); border: 1px solid var(--es-border);
  background: var(--es-surface); text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.post-pager a:hover { transform: translateY(-4px); border-color: var(--es-border-strong); box-shadow: var(--es-shadow-sm); }
.post-pager__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--es-text-mute); }
.post-pager__title { font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--es-text); }
.post-pager a:last-child { text-align: right; align-items: flex-end; }

/* Sticky sidebar */
.post-aside { display: flex; flex-direction: column; gap: 20px; }
.post-aside__stick { position: sticky; top: calc(var(--es-header-h) + 24px); display: flex; flex-direction: column; gap: 20px; }
.post-aside__card { padding: 22px; border-radius: var(--es-radius); border: 1px solid var(--es-border); background: var(--es-surface); }
.post-aside__title { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--es-text-mute); margin-bottom: 14px; }
.post-toc { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.post-toc a {
  display: block; padding-left: 12px; border-left: 2px solid var(--es-border);
  font-size: 13.5px; line-height: 1.5; color: var(--es-text-dim); text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.post-toc a:hover { color: var(--es-primary-ink); border-color: var(--es-primary); }
.post-share { display: flex; gap: 8px; }
.post-share a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--es-border); color: var(--es-text-dim);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.post-share a:hover { color: #fff; background: var(--es-gradient); border-color: transparent; transform: translateY(-3px); }
.post-aside__note { font-size: 13px; line-height: 1.6; color: var(--es-text-dim); }
.post-aside__note a { color: var(--es-primary-ink); font-weight: 600; text-decoration: none; }
.post-aside__note a:hover { text-decoration: underline; }

/* Related posts */
.post-related { padding-block: clamp(48px, 6vw, 76px); background: var(--es-bg-alt); border-top: 1px solid var(--es-border); }

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width: 1080px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-layout { grid-template-columns: 1fr; }
  .post-aside__stick { position: static; }
  .post-main { max-width: 100%; }
}
@media (max-width: 900px) {
  .bl-featured { grid-template-columns: 1fr; }
  .bl-featured__media { min-height: 240px; }
}
@media (max-width: 640px) {
  .bl-grid { grid-template-columns: 1fr; }
  .bl-news__form { flex-direction: column; }
  .post-pager { grid-template-columns: 1fr; }
  .post-pager a:last-child { text-align: left; align-items: flex-start; }
}

/* ------------------------------ REDUCED MOTION ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bl-card:hover .bl-card__thumb, .bl-featured:hover .bl-featured__thumb { transform: none; }
  .bl-filter__btn:hover { transform: none; }
}