.bl-page {
  background: var(--bg);
}

html:has(.bl-page),
.bl-page,
.bl {
  overflow-x: clip;
}

.bl {
  display: block;
  color: var(--navy);
  background: var(--bg);
}

.bl img {
  display: block;
}

.bl-bar {
  display: none;
}

/* ---------- title + filter ---------- */
.bl-top {
  position: relative;
  padding: 9.4rem 0 0;
}

.bl-crumb,
.bl-head {
  width: 139.6rem;
  max-width: calc(100% - 4rem);
  margin-inline: auto;
}

.bl-crumb {
  display: flex;
  gap: .6rem;
  margin-bottom: 6.4rem;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #8a93a3;
}

.bl-crumb a:hover {
  color: var(--orange);
}

.bl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.bl-title {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--navy);
}

.bl-title>span {
  display: inline-block;
  padding-bottom: .2rem;
  border-bottom: 3px solid var(--navy);
}

.bl-tabs {
  display: flex;
  align-items: center;
  gap: 4.4rem;
  margin-top: -.6rem;
  direction: rtl;
}

.bl-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  color: #b4bac5;
  font: 700 1.2rem/1 var(--fa);
  transition: color .3s var(--ease);
}

.bl-tab svg {
  width: 3rem;
  height: 3rem;
  transition: transform .45s var(--ease);
}

.bl-tab:hover {
  color: var(--navy);
}

.bl-tab:hover svg {
  transform: translateY(-.3rem);
}

.bl-tab.is-on {
  color: var(--navy);
}

.bl-tabs__sep {
  width: 1px;
  height: 5.6rem;
  background: var(--navy);
}

/* ---------- posts ---------- */
.bl-list {
  padding: 7rem 0 13rem;
}

.bl-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 139.6rem;
  max-width: calc(100% - 4rem);
  margin-inline: auto;
  direction: rtl;
}

.bl-row {
  display: flex;
  align-items: flex-start;
  gap: 3.4rem;
}

.bl-stack {
  display: flex;
  flex-direction: column;
  gap: 3.3rem;
  width: 36rem;
  flex: none;
}

.bl-card {
  position: relative;
  flex: none;
  width: 36rem;
  height: 48rem;
  overflow: hidden;
  background: #fff;
  border: 0;
  outline: 0;
}

.bl-card--b {
  width: 27.8rem;
}

.bl-card--c {
  width: 27.9rem;
}

.bl-card--s {
  width: 100%;
  height: 22.5rem;
}

.bl-card__a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  outline: none !important;
}

.bl-card__a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.bl-card__a::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .92) 80%, #fff 100%);
  pointer-events: none;
}

.bl-card--s .bl-card__a::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .92) 78%, #fff 100%);
}

.bl-card__t {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  padding: 0 1.6rem 1.5rem;
  text-align: right;
}

.bl-card h3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 2.4rem;
  color: #0A1D3D;
  transition: color .3s;
}

.bl-card time {
  display: block;
  margin-top: 1rem;
  font: 400 11.5px var(--en);
  direction: ltr;
  text-align: right;
  color: #0A1D3D;
}

.bl-card__a:hover img {
  transform: scale(1.06);
}

.bl-card__a:hover h3 {
  color: var(--orange);
}

.bl-card[hidden] {
  display: none;
}

/* filtered: plain even grid (the free layout only makes sense with every post) */
.bl-grid.is-filtered {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.4rem;
}

.bl-grid.is-filtered .bl-row,
.bl-grid.is-filtered .bl-stack {
  display: contents;
}

.bl-grid.is-filtered .bl-card,
.bl-grid.is-filtered .bl-card--b,
.bl-grid.is-filtered .bl-card--c,
.bl-grid.is-filtered .bl-card--s {
  width: auto;
  height: 40rem;
}

/* ---------- phone / tablet ---------- */
@media (max-width: 999.98px) {
  .bl-bar {
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    height: 76px;
    background: var(--navy);
    pointer-events: none;
  }

  .bl-top {
    padding-top: 100px;
  }

  .bl-crumb {
    display: none;
  }

  .bl-head {
    width: auto;
    max-width: none;
    margin-inline: 2rem;
    align-items: center;
  }

  .bl-title {
    font-size: 2.4rem;
  }

  .bl-tabs {
    gap: 2.4rem;
    margin-top: 0;
  }

  .bl-tab svg {
    width: 2.8rem;
    height: 2.8rem;
  }

  .bl-tabs__sep {
    height: 5rem;
  }

  .bl-list {
    padding: 3.6rem 0 6rem;
  }

  .bl-grid,
  .bl-grid.is-filtered {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    width: auto;
    max-width: none;
    margin-inline: 2rem;
  }

  .bl-row,
  .bl-stack {
    display: contents;
  }

  .bl-card,
  .bl-card--b,
  .bl-card--c,
  .bl-card--s,
  .bl-grid.is-filtered .bl-card {
    order: var(--o);
    width: auto;
    height: 47.5rem;
  }

  .bl-card--c,
  .bl-grid.is-filtered .bl-card--c {
    height: 60rem;
  }

  .bl-card--s,
  .bl-grid.is-filtered .bl-card--s {
    height: 21.8rem;
  }

  .bl-card__t {
    padding: 0 1.6rem 1.6rem;
  }
}

.bl-tab.is-on svg rect {
  fill: #0A1D3D;
}

.t1.is-on svg path {
  fill: #0A1D3D;
}

.site-header[data-theme="dark"].is-scrolled {
  background: #0A1D3D;
}

.site-header[data-theme="dark"].is-scrolled svg path {
  fill: #fff;
}

.site-header[data-theme="dark"].is-scrolled svg line {
  stroke: #fff;
}

.site-header[data-theme="dark"].is-scrolled svg line {
  stroke: #fff;
}

.site-header[data-theme="dark"].is-scrolled .logo-light {
  opacity: 1;
}

.site-header[data-theme="dark"].is-scrolled .logo-dark {
  opacity: 0;
}

.site-header[data-theme="dark"].is-scrolled .lang-switch {
  color: #fff;
}

:root {
  --bg: #f4f5f8;
  --ink: #0b1b3d;
  --muted: #6b7385;
  --accent: #f28c1b;
  --gap: 3rem;
  --ratio: 0.8;
  /* ارتفاع کارت نصفه نسبت به عرض ستون */
}

* {
  box-sizing: border-box;
}

.blog {
  width: 139.6rem;
  max-width: calc(100% - 4rem);
  margin-inline: auto;
  margin: 0 auto;
  margin-bottom: 20px;
}

.blog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.blog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ink);
}

 

.filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  color: var(--muted);
  opacity: .6;
  transition: opacity .2s;
}

/* .filter svg {
 
} */

.filter:hover {
  opacity: 1;
}

.filter.is-active {
  opacity: 1;
  color: var(--ink);
  font-weight: 700;
}
.is-active svg path{fill: #0A1D3D;}
/* ================= گرید ================= */
.grid-wrap {
  container-type: inline-size;
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  grid-auto-flow: row dense;
  /* یک واحد ارتفاع = ارتفاع کارت نصفه */
  grid-auto-rows: calc((100cqw - 3 * var(--gap)) / 4 * var(--ratio));
}

/* پیش‌فرض: کارت کامل = ۲ واحد ارتفاع */
.card {
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  background: #fff;
  min-width: 0;
  isolation: isolate;
  transform: translateZ(0);
}

/*
    الگوی تکرار هر ۱۰ کارت (ستون ۱ سمت راست است چون rtl):
    ردیف فرد : کارت 1,2,3 کامل در ستون 1,2,3  | کارت 4,5 نصفه در ستون 4
    ردیف زوج : کارت 6,7 نصفه در ستون 1        | کارت 8,9,10 کامل در ستون 2,3,4
  */
.card:nth-child(10n+1) {
  grid-column: 1;
}

.card:nth-child(10n+2) {
  grid-column: 2;
}

.card:nth-child(10n+3) {
  grid-column: 3;
}

.card:nth-child(10n+4),
.card:nth-child(10n+5) {
  grid-column: 4;
  grid-row: span 1;
}

.card:nth-child(10n+6),
.card:nth-child(10n+7) {
  grid-column: 1;
  grid-row: span 1;
}

.card:nth-child(10n+8) {
  grid-column: 2;
}

.card:nth-child(10n+9) {
  grid-column: 3;
}

.card:nth-child(10n+10) {
  grid-column: 4;
}

/* ================= محتوای کارت ================= */
.card a {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
  transform: scale(1) translateZ(0);
  backface-visibility: hidden;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.card a:hover img,
.card a:focus-visible img {
  transform: scale(1.1) translateZ(0);
}

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

.card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 60px 10px 8px;
  background: linear-gradient(to bottom, transparent, #ffffffb0, #ffffff 70%);
}

.card-title {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 500;
    color: #000;
}

.card-date {
     display: block;
    font-size: 14px;
    direction: ltr;
    text-align: right;
}

.card a:hover .card-title {
  color: var(--accent);
}

.card a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
@media (max-width: 800px) {
.grid{
grid-template-columns: repeat(3, 1fr);
    gap:1rem;
    grid-auto-flow: row dense;
    grid-auto-rows: calc((100cqw - 3 * var(--gap)) / 3 * var(--ratio));
}



}
@media (max-width: 700px) {
.grid { 
    grid-template-columns: repeat(2, 1fr); 
    grid-auto-rows: calc((100cqw - 2 * var(--gap)) / 2 * var(--ratio));
}
}
/* موبایل: ۲ ستون ساده، همه کارت‌ها کامل */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: calc((100cqw - var(--gap)) / 2 * var(--ratio));
  }

  .card,
  .card:nth-child(n) {
    grid-column: auto;
    grid-row: span 2;
  }
}
@media (max-width: 460px) {
.grid {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: calc((100cqw - var(--gap)) / 1 * var(--ratio));
    }
  }