/* ═══════════════════════════════════════════════════════════

   BLOG PAGE — Minimal · Live search · Infinite scroll

   ═══════════════════════════════════════════════════════════ */



body.page-blog {

  background: var(--color-surface);

}



body.page-blog .main-content {

  padding-top: calc(var(--header-height) + var(--space-4));

}



body.page-blog .container {

  width: min(100% - clamp(1rem, 4vw, 2rem), var(--container-max));

}



.page-blog .reveal {

  opacity: 1;

  transform: none;

}



/* ── Intro ──────────────────────────────────────────────── */

.blog-intro__head {

  display: flex;

  align-items: flex-start;

  gap: var(--space-4);

  margin-bottom: var(--space-4);

}



.blog-intro__badge {

  flex-shrink: 0;

  width: 3rem;

  height: 3rem;

  display: grid;

  place-items: center;

  color: var(--color-primary);

  background: var(--color-primary-soft);

  border-radius: var(--radius-md);

}



.blog-perks {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-3);

  margin: var(--space-6) 0 0;

  padding: 0;

  list-style: none;

}



.blog-perks li {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--chip-padding-block) var(--chip-padding-inline);

  font-size: var(--text-sm);

  font-weight: 600;

  color: var(--color-text-muted);

  background: var(--color-accent);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-full);

}



.blog-perks__icon {

  display: grid;

  place-items: center;

  color: var(--color-primary);

}



/* ── Section ────────────────────────────────────────────── */

.blog-section {

  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 5rem);

}



/* ── Toolbar ────────────────────────────────────────────── */

.blog-toolbar {

  display: grid;

  gap: var(--space-4);

  margin-bottom: var(--space-6);

}



.blog-search {

  position: relative;

}



.blog-search__icon {

  position: absolute;

  inset-inline-start: var(--space-4);

  top: 50%;

  transform: translateY(-50%);

  display: grid;

  place-items: center;

  color: var(--color-text-muted);

  pointer-events: none;

}



.blog-search__input {

  width: 100%;

  min-height: 3rem;

  padding-inline: calc(var(--space-4) + 1.5rem) var(--space-4);

  background: var(--color-secondary);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-xs);

  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);

}



.blog-search__input:focus {

  border-color: rgba(194, 24, 91, 0.28);

  box-shadow: 0 0 0 3px var(--color-primary-soft);

}



.blog-filters {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-2);

}



.blog-filter {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--chip-padding-block) var(--chip-padding-inline);

  font-family: inherit;

  font-size: var(--text-sm);

  font-weight: 600;

  color: var(--color-text-muted);

  background: var(--color-secondary);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-full);

  cursor: pointer;

  transition:

    background var(--duration-fast),

    border-color var(--duration-fast),

    color var(--duration-fast),

    box-shadow var(--duration-fast);

}



.blog-filter:hover {

  border-color: rgba(194, 24, 91, 0.2);

  color: var(--color-text);

}



.blog-filter.is-active {

  background: var(--color-primary-soft);

  border-color: rgba(194, 24, 91, 0.22);

  color: var(--color-primary);

  box-shadow: var(--shadow-xs);

}



.blog-filter__count {

  display: inline-grid;

  place-items: center;

  min-width: 1.375rem;

  height: 1.375rem;

  padding-inline: 0.35rem;

  font-size: var(--text-xs);

  font-weight: 700;

  color: inherit;

  background: rgba(255, 255, 255, 0.72);

  border-radius: var(--radius-full);

}



.blog-filter.is-active .blog-filter__count {

  background: rgba(255, 255, 255, 0.85);

}



/* ── Status & trust ─────────────────────────────────────── */

.blog-status {

  margin: 0 0 var(--space-4);

  font-size: var(--text-sm);

  font-weight: 600;

  color: var(--color-text-muted);

}



.blog-trust {

  margin: 0 0 var(--space-8);

  padding: var(--space-4) var(--space-5);

  font-size: var(--text-sm);

  line-height: 1.7;

  color: var(--color-text-muted);

  text-align: center;

  background: var(--color-secondary);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

}



/* ── Grid & cards ───────────────────────────────────────── */

.blog-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: clamp(1rem, 2.5vw, 1.5rem);

}



.blog-card {

  min-width: 0;

}



.blog-card__link {

  display: flex;

  flex-direction: column;

  height: 100%;

  color: inherit;

  text-decoration: none;

  background: var(--color-secondary);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-xl);

  overflow: hidden;

  transition:

    transform var(--duration-normal) var(--ease-out-expo),

    box-shadow var(--duration-normal);

}



.blog-card__link:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-md);

}



.blog-card__media {

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: var(--color-accent);

}



.blog-card__media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.blog-card__body {

  display: flex;

  flex-direction: column;

  flex: 1;

  gap: var(--space-3);

  padding: var(--space-5) var(--space-6) var(--space-6);

}



.blog-card__category {

  align-self: flex-start;

  padding: 0.25rem 0.625rem;

  font-size: var(--text-xs);

  font-weight: 700;

  letter-spacing: 0.04em;

  color: var(--color-primary);

  background: var(--color-primary-soft);

  border-radius: var(--radius-full);

}



.blog-card__title {

  margin: 0;

  font-size: clamp(1rem, 1.6vw, 1.125rem);

  font-weight: 800;

  line-height: 1.45;

  letter-spacing: -0.02em;

  color: var(--color-text);

  transition: color var(--duration-fast);

}



.blog-card__link:hover .blog-card__title {

  color: var(--color-primary);

}



.blog-card__excerpt {

  margin: 0;

  font-size: var(--text-sm);

  line-height: 1.75;

  color: var(--color-text-muted);

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.blog-card__meta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-3);

  margin-top: auto;

  padding-top: var(--space-3);

  border-top: 1px solid var(--color-border);

  font-size: var(--text-xs);

  font-weight: 600;

  color: var(--color-text-muted);

}



.blog-card__read {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

  color: var(--color-primary);

  transition: gap var(--duration-fast);

}



.blog-card__link:hover .blog-card__read {

  gap: var(--space-2);

}



.blog-empty {

  grid-column: 1 / -1;

  margin: 0;

  padding: var(--space-12) var(--space-6);

  text-align: center;

  font-size: var(--text-base);

  font-weight: 600;

  color: var(--color-text-muted);

  background: var(--color-secondary);

  border: 1px dashed var(--color-border);

  border-radius: var(--radius-xl);

}



/* ── Loader & sentinel ──────────────────────────────────── */

.blog-loader {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-3);

  margin-top: var(--space-8);

  font-size: var(--text-sm);

  font-weight: 600;

  color: var(--color-text-muted);

}



.blog-loader[hidden] {

  display: none;

}



.blog-loader__spinner {

  width: 1.25rem;

  height: 1.25rem;

  border: 2px solid var(--color-border);

  border-top-color: var(--color-primary);

  border-radius: 50%;

  animation: blogSpin 0.8s linear infinite;

}



@keyframes blogSpin {

  to { transform: rotate(360deg); }

}



.blog-sentinel {

  height: 1px;

  margin-top: var(--space-4);

}



/* ── Pagination ─────────────────────────────────────────── */

.blog-pagination {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: var(--space-3);

  margin-top: var(--space-10);

  padding-top: var(--space-6);

  border-top: 1px solid var(--color-border);

}



.blog-pagination[hidden] {

  display: none;

}



.blog-pagination__pages {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: var(--space-2);

}



.blog-pagination__btn,

.blog-pagination__page {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-2);

  min-width: 2.5rem;

  min-height: 2.5rem;

  padding: 0.375rem 0.875rem;

  font-family: inherit;

  font-size: var(--text-sm);

  font-weight: 600;

  color: var(--color-text-muted);

  background: var(--color-secondary);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  cursor: pointer;

  transition:

    border-color var(--duration-fast),

    color var(--duration-fast),

    background var(--duration-fast),

    box-shadow var(--duration-fast);

}



.blog-pagination__btn:hover,

.blog-pagination__page:hover {

  border-color: rgba(194, 24, 91, 0.22);

  color: var(--color-primary);

  box-shadow: var(--shadow-xs);

}



.blog-pagination__page.is-active {

  color: var(--color-secondary);

  background: var(--gradient-primary);

  border-color: transparent;

  box-shadow: 0 4px 16px rgba(194, 24, 91, 0.24);

  cursor: default;

}



.blog-pagination__ellipsis {

  padding-inline: var(--space-1);

  font-size: var(--text-sm);

  color: var(--color-text-muted);

}



/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 960px) {

  .blog-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



@media (max-width: 640px) {

  body.page-blog .main-content {

    padding-top: calc(var(--header-height) + var(--space-2));

  }



  .blog-grid {

    grid-template-columns: 1fr;

  }



  .blog-card__body {

    padding: var(--space-5);

  }



  .blog-filters {

    flex-wrap: nowrap;

    overflow-x: auto;

    padding-bottom: var(--space-2);

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

  }



  .blog-filters::-webkit-scrollbar {

    display: none;

  }



  .blog-filter {

    flex-shrink: 0;

  }



  .blog-pagination {

    gap: var(--space-2);

  }



  .blog-pagination__btn {

    padding-inline: var(--space-3);

  }



  .blog-perks {

    flex-direction: column;

    align-items: stretch;

  }



  .blog-perks li {

    justify-content: center;

  }

}



@media (prefers-reduced-motion: reduce) {

  .blog-card__link,

  .blog-filter,

  .blog-pagination__btn,

  .blog-pagination__page,

  .blog-search__input {

    transition: none;

  }



  .blog-card__link:hover {

    transform: none;

  }



  .blog-loader__spinner {

    animation: none;

  }

}



/* ═══════════════════════════════════════════════════════════
   ARTICLE DETAIL — Image first · Title below · Bottom fade
   ═══════════════════════════════════════════════════════════ */

body.page-article {
  background: var(--color-surface);
  overflow-x: clip;
}

body.page-article .main-content {
  padding-top: calc(var(--header-height) + var(--space-4));
}

body.page-article .container {
  width: min(100% - clamp(1rem, 4vw, 2rem), var(--container-max));
}

.page-article .reveal {
  opacity: 1;
  transform: none;
}

.article-page {
  overflow-x: clip;
}

/* ── Hero ──────────────────────────────────────────────── */
.article-hero {
  padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--space-6);
}

.article-hero__crumb {
  margin-bottom: var(--space-6);
}

.article-hero__cover {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-accent);
  aspect-ratio: 21 / 9;
  max-height: clamp(14rem, 42vw, 26rem);
  box-shadow: var(--shadow-soft);
}

.article-hero__cover img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.article-hero__fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(250, 250, 250, 0.25) 30%,
    rgba(250, 250, 250, 0.78) 72%,
    var(--color-surface) 100%
  );
  pointer-events: none;
}

.article-hero__head {
  width: 100%;
  max-width: 100%;
  margin-top: clamp(var(--space-6), 3vw, var(--space-8));
  padding-inline: clamp(0rem, 1vw, var(--space-2));
}

.article-hero__category {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 0.3rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-full);
}

.article-hero__title {
  margin: 0 0 var(--space-4);
  width: 100%;
  max-width: 100%;
  font-size: clamp(1.0625rem, 1.85vw, 1.4375rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.article-hero__lead {
  margin: 0 0 var(--space-6);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.8;
  color: var(--color-text-muted);
  max-width: 42ch;
}

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
  padding: 0.55rem 1rem;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-muted);
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.article-hero__meta-icon {
  display: grid;
  place-items: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ── Body ──────────────────────────────────────────────── */
.article-body {
  padding-block: clamp(var(--space-6), 4vw, var(--space-10)) clamp(var(--space-10), 6vw, var(--space-16));
}

.article-body__inner {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

.article-body__inner.prose {
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  line-height: 1.9;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.article-body__inner.prose p {
  margin: 0;
  padding-inline: 0.125rem;
}

.article-body__inner.prose p + p {
  margin-top: var(--space-4);
}

.article-body__inner.prose img,
.article-body__inner.prose video,
.article-body__inner.prose iframe {
  display: block;
  max-width: 100%;
  height: auto;
  margin-block: var(--space-6);
  border-radius: var(--radius-lg);
}

.article-body__inner.prose iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* ── Related ───────────────────────────────────────────── */
.article-related {
  margin-top: clamp(var(--space-8), 5vw, var(--space-12));
  padding-block: clamp(var(--space-10), 6vw, var(--space-16));
  background: var(--color-accent);
  border-top: 1px solid var(--color-border);
}

.article-related__head {
  max-width: 36rem;
  margin-bottom: var(--space-10);
  padding-top: var(--space-2);
}

.article-related__desc {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-text-muted);
}

.article-related__grid {
  margin-top: 0;
}

/* ── Footer ────────────────────────────────────────────── */
.article-footer {
  padding-block: 0 clamp(var(--space-10), 6vw, var(--space-16));
  background: var(--color-accent);
}

.article-footer__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition:
    border-color var(--duration-fast),
    box-shadow var(--duration-fast),
    gap var(--duration-fast);
}

.article-footer__back:hover {
  border-color: rgba(194, 24, 91, 0.22);
  box-shadow: var(--shadow-xs);
  gap: var(--space-3);
}

.article-footer__back .icon {
  flex-shrink: 0;
}

/* ── Article responsive ────────────────────────────────── */
@media (max-width: 640px) {
  body.page-article .main-content {
    padding-top: calc(var(--header-height) + var(--space-2));
  }

  .article-hero__cover {
    aspect-ratio: 16 / 10;
    max-height: none;
    border-radius: var(--radius-lg);
  }

  .article-hero__head {
    padding-inline: 0;
  }

  .article-hero__meta {
    flex-direction: column;
    align-items: stretch;
  }

  .article-hero__meta li {
    justify-content: flex-start;
  }

  .article-body__inner {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }

  .article-body__inner.prose p {
    padding-inline: 0.25rem;
  }

  .article-related {
    margin-top: var(--space-8);
  }

  .article-related__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-footer__back {
    transition: none;
  }

  .article-footer__back:hover {
    gap: var(--space-2);
  }
}