/* Impact360 — blog index (/blog/, /en/blog/) + the post cards reused by post pages (recent posts).
   v2 corporate restraint: the standard film hero, frosted rounded cards on a 3 / 2 / 1 grid, flat navy mats.
   Nothing spins, glows or drifts; reveals and hovers only. */

/* ---------------------------------------------------------------- hero: the standard film window (site.css §8), a little shorter */
.blog-hero .page-hero-window { min-height: clamp(320px, 44vh, 500px); }
.blog-hero .page-title { font-size: clamp(56px, 8vw, 120px); line-height: .96; letter-spacing: -.03em; }

/* ---------------------------------------------------------------- cover frame: 4:3, object-fit cover; odd shapes letterbox on a flat navy mat */
.cb { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--night); }
.cb-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cb--fit .cb-img { inset: 7%; width: 86%; height: 86%; object-fit: contain; }
/* no picture: the flat navy branded panel (the wordmark, decorative) */
.cb--ph { display: grid; place-items: center; container-type: inline-size; }
.cb-mark { font: 800 10.5cqi/1 var(--font-display); letter-spacing: -.03em; color: #fff; }
.cb-mark span { color: var(--lilac); }

/* ---------------------------------------------------------------- the newest post: a frosted feature card */
.bf-sec { padding-block-start: clamp(28px, 4vw, 56px); }
.bf-card {
  --tint-a: rgba(255, 255, 255, .76); --tint-b: rgba(255, 255, 255, .6); --blur: 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); align-items: center;
  gap: clamp(22px, 3.4vw, 52px);
  padding: clamp(16px, 1.8vw, 24px);
  border-radius: var(--r-lg); color: inherit; text-decoration: none;
  transition: transform .5s var(--spring);
}
.bf-card:focus-visible { outline-offset: 4px; }
.bf-card:hover { transform: translateY(-3px); }
.bf-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(8px, 1.6vw, 24px) clamp(6px, 1.6vw, 24px); }
.bf-flag { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1.2 var(--font-body); color: var(--blue); }
.bf-flag::before { content: ""; width: 22px; height: 2px; background: var(--blue); }
.bf-title {
  margin-block: clamp(14px, 1.6vw, 20px) 12px;
  font: 900 clamp(28px, 2.9vw, 42px)/1.16 var(--font-display); letter-spacing: -.012em; color: var(--ink); text-wrap: balance;
}
.bf-excerpt {
  margin-block-start: clamp(12px, 1.4vw, 18px);
  font: 400 clamp(16px, 1.2vw, 17.5px)/1.7 var(--font-body); color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.bf-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; width: 100%; margin-block-start: clamp(20px, 2.4vw, 32px); }
.bf-author .av { width: 36px; height: 36px; }
.bf-author { font-size: 15px; }
.bf-go .glass-button-text { white-space: nowrap; }
.bf-media.cb { border-radius: calc(var(--r-lg) - 10px); box-shadow: 0 0 0 1px rgba(10, 31, 68, .08); }

/* ---------------------------------------------------------------- index heading: label + count over a thin rule */
.bi, .be { padding-block: clamp(48px, 6vw, 88px) var(--sec-y); }
.bi-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-block-end: clamp(18px, 2.4vw, 30px); padding-block-end: 14px; border-block-end: 1px solid rgba(10, 31, 68, .14);
  font: 900 clamp(24px, 2.4vw, 34px)/1.15 var(--font-display); letter-spacing: -.012em; color: var(--ink);
}
.bi-count { font: 500 15px/1 var(--font-body); color: var(--ink-3); }

/* ---------------------------------------------------------------- cards */
.bl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.bl-item { display: grid; min-width: 0; }
.bl-card {
  --tint-a: rgba(255, 255, 255, .76); --tint-b: rgba(255, 255, 255, .6);
  display: flex; flex-direction: column; min-width: 0;
  padding: 10px; border-radius: var(--r-lg); color: inherit; text-decoration: none;
  transition: transform .5s var(--spring), opacity 1s var(--ease) var(--d, 0s);
}
.bl-card:focus-visible { outline-offset: 3px; }
.bl-thumb.cb { border-radius: calc(var(--r-lg) - 8px); box-shadow: 0 0 0 1px rgba(10, 31, 68, .08); }
.bl-body { display: flex; flex-direction: column; flex: 1; gap: 8px; min-width: 0; padding: 16px 10px 8px; }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; font: 500 13.5px/1.4 var(--font-body); color: var(--ink-3); }
.bl-mi + .bl-mi::before { content: "·"; margin-inline: 8px; }
.bl-title { font: 900 clamp(19px, 1.4vw, 21px)/1.32 var(--font-display); color: var(--ink); text-wrap: balance; }
.bl-excerpt { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: auto; padding-block-start: 10px; }
.bl-author { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font: 700 14px/1.2 var(--font-body); color: var(--ink); }
.av { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.bl-go { width: 20px; height: 20px; color: var(--blue); transition: translate .4s var(--spring); }
.bl-card:hover { transform: translateY(-3px); }
.bl-card:hover .bl-go { translate: 3px 0; }
[dir="rtl"] .bl-card:hover .bl-go { translate: -3px 0; }
.js .bl-card.in, .js .bf-card.in { transition: opacity 1s var(--ease) var(--d, 0s), transform .5s var(--spring); }
.bl-list--recent { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- en: the empty state on a calm panel */
.be-stage { padding-block: clamp(8px, 2vw, 24px) 0; }
.be-panel { --tint-a: rgba(255, 255, 255, .76); --tint-b: rgba(255, 255, 255, .6); --blur: 20px; max-width: 40rem; gap: var(--sp-3); }
.page-blog .be-panel .empty-icon { display: none; }   /* site.css draws a gradient disc here — v2: no ornaments */
.be-panel .empty-title { font-size: clamp(26px, 2.6vw, 34px); }
.be-panel .empty-text { font-size: var(--fs-lead); line-height: 1.55; }
.be-panel .empty-actions { margin-block-start: var(--sp-4); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .bl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-list--recent { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* three recent posts stay 3-up to 900px (same specificity: the phone rule below still wins) */
}
@media (max-width: 900px) {
  /* the feature card keeps two columns down to phones (stacked, its 4:3 cover filled a tablet screen) */
  .bf-card { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); gap: 22px; }
  .bf-copy { padding: 6px 4px 6px; }
  .bf-title { font-size: clamp(24px, 3.4vw, 30px); margin-block: 12px 10px; }
  .bf-excerpt { -webkit-line-clamp: 3; margin-block-start: 10px; }
  .bf-foot { margin-block-start: 18px; }
  /* recent posts: three rows at this width (three 4:3 columns would be thumbnails) */
  .bl-list--recent { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bl-list--recent .bl-card { flex-direction: row; align-items: stretch; }
  .bl-list--recent .bl-thumb.cb { flex: none; width: 36%; aspect-ratio: auto; min-height: 150px; }
  .bl-list--recent .bl-body { padding: 10px 6px; }
}
@media (max-width: 640px) {
  .bl-list, .bl-list--recent { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bl-list--recent .bl-card { flex-direction: column; }
  .bl-list--recent .bl-thumb.cb { width: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .bl-list--recent .bl-body { padding: 16px 10px 8px; }
  .bf-card { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 10px; border-radius: 26px; }
  .bf-media { order: -1; }                  /* the picture leads, as on the cards */
  .bf-copy { padding: 8px 6px 10px; }
  .bf-title { font-size: clamp(25px, 7vw, 30px); }
  .bf-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .bf-foot > .cta-pool, .bf-foot > .cta-pool .glass-button-wrap, .bf-foot > .cta-pool .glass-button { display: block; width: 100%; }
  .bl-card, .bl-thumb.cb, .bf-media.cb { border-radius: 22px; }
  .bl-thumb.cb, .bf-media.cb { border-radius: 16px; }
  .bi-head { font-size: 24px; }
  .be-panel { max-width: none; }
}
@media (forced-colors: active) {
  .cb { border: 1px solid CanvasText; }
}

/* client: the English "Blog" title (and its crumbs) sit flush left on the Hebrew page */
[dir="rtl"] .blog-hero .page-hero-inner { justify-content: flex-end; }
[dir="rtl"] .blog-hero .page-hero-copy { text-align: left; }
[dir="rtl"] .blog-hero .crumbs ol { justify-content: flex-end; }