/**
 * Israel Vets homepage — G2b-pic "Expandable Chapters" (pictorial emphasis).
 *
 * Ported from the approved prototype (coversheets-work/iv-concepts/
 * gen_expandable.py GCSS + colors_rules, gen_expandable_pic.py EXTRA_CSS).
 * Each topic is a full-width photo band that unfolds a zig-zag timeline; the
 * footer emphasizes the pictorial (photo) history as a filled primary button
 * with the written history as a quiet secondary link.
 *
 * Photo-overlay scrims stay intentionally dark in BOTH themes for text
 * legibility over photographs; everything else reads from the theme tokens.
 * Per-strand accent color is exposed as --c and set per [data-k] below.
 */

.iv-topics { padding: 16px 0 8px; display: flex; flex-direction: column; gap: 0; }

/* ── Teaser band — full-width photo-backed clickable header ── */
.iv-topic { position: relative; }
.iv-topic .teaser {
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: none;
  position: relative;
  display: block;
  min-height: 190px;
  background-size: cover;
  background-position: center;
  color: #f0ece2;
  border-bottom: 2px solid #0a0c10;
}
.iv-topic .teaser:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,12,16,.86) 0%, rgba(10,12,16,.6) 55%, rgba(10,12,16,.28) 100%);
}
.iv-topic .teaser .tin { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 22px 24px; }
.iv-topic .teaser .tk { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-weight: 700; color: #c9a24b; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.iv-topic .teaser .tt { display: block; font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: 30px; font-weight: 900; line-height: 1.04; margin: 3px 0 6px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.iv-topic .teaser .ts { display: block; font-size: 14px; color: #e6e1d5; line-height: 1.5; max-width: 46ch; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.iv-topic .teaser .cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #c9a24b; font-weight: 700; }
.iv-topic .teaser .cta .chev { position: relative; display: inline-flex; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #c9a24b; transition: transform .2s; }
.iv-topic .teaser .cta .chev::before,
.iv-topic .teaser .cta .chev::after { content: ""; position: absolute; top: 50%; left: 50%; background: #c9a24b; }
.iv-topic .teaser .cta .chev::before { width: 10px; height: 1.5px; transform: translate(-50%, -50%); } /* horizontal bar */
.iv-topic .teaser .cta .chev::after  { width: 1.5px; height: 10px; transform: translate(-50%, -50%); } /* vertical bar -> makes + */
.iv-topic.open .teaser .cta .chev { transform: rotate(45deg); } /* + becomes x */
.iv-topic .teaser .cta .lbl-close { display: none; }
.iv-topic.open .teaser .cta .lbl-open { display: none; }
.iv-topic.open .teaser .cta .lbl-close { display: inline; }

/* ── Expandable timeline body ── */
.iv-topic .body { display: none; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.iv-topic.open .body { display: block; padding-top: 18px; padding-bottom: 8px; }

/* ── Mobile-first spine: photo-over-text down a left spine ── */
.iv-topic .spine { position: relative; padding: 8px 4px 8px 34px; }
.iv-topic .spine:before {
  content: "";
  position: absolute;
  left: 17px; top: 10px; bottom: 16px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--c) 6%, var(--c) 94%, transparent);
}
.iv-topic .node { position: relative; margin-bottom: 30px; display: flex; flex-direction: column; }
.iv-topic .node:last-of-type { margin-bottom: 10px; }
.iv-topic .node .dot { position: absolute; left: -24px; top: 8px; width: 13px; height: 13px; border-radius: 50%; background: var(--c); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--c); }
.iv-topic .node .pic { order: 1; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; display: block; filter: sepia(.06); }
.iv-topic .node .txt { order: 2; padding-top: 11px; }
.iv-topic .node .yr { display: block; font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-weight: 700; color: var(--c); font-size: 14px; }
.iv-topic .node .ttl { display: block; font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: 20px; font-weight: 800; margin: 3px 0 6px; line-height: 1.14; color: var(--fg); }
.iv-topic .node .tz { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* ── Footer — pictorial emphasis ── */
.iv-topic .foot { padding: 8px 4px 18px 34px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.iv-topic .foot .primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--c);
  text-decoration: none;
  border-radius: 9px;
  padding: 14px 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: transform .12s, filter .12s;
}
.iv-topic .foot .primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.iv-topic .foot .primary .ar { font-family: sans-serif; font-weight: 400; }
.iv-topic .foot .secondary { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--muted); padding-bottom: 2px; font-weight: 600; }
.iv-topic .foot .secondary:hover { color: var(--c); border-color: var(--c); }

/* ── Desktop: elegant zig-zag around a centered spine ── */
@media (min-width: 900px) {
  .iv-topic .spine { padding: 12px 0 8px; }
  .iv-topic .spine:before { left: 50%; transform: translateX(-50%); }
  .iv-topic .node { display: grid; grid-template-columns: 1fr 52px 1fr; grid-template-rows: auto; align-items: center; margin-bottom: 34px; }
  .iv-topic .node .dot { position: static; }
  .iv-topic .node .mid { grid-column: 2; grid-row: 1; display: flex; justify-content: center; }
  .iv-topic .node .pic { grid-column: 1; grid-row: 1; order: 0; height: 180px; aspect-ratio: auto; }
  .iv-topic .node .txt { grid-column: 3; grid-row: 1; padding: 0 30px; }
  .iv-topic .node .ttl { font-size: 24px; }
  .iv-topic .node .tz { max-width: 360px; }
  .iv-topic .node:nth-child(even) .txt { grid-column: 1; text-align: right; }
  .iv-topic .node:nth-child(even) .txt .tz { margin-left: auto; }
  .iv-topic .node:nth-child(even) .pic { grid-column: 3; }
  .iv-topic .teaser .tt { font-size: 28px; }
  .iv-topic .foot { padding-left: 0; justify-content: center; }
}

/* ── Per-strand accent color (--c): light defaults, dark overrides ── */
.iv-topic[data-k="aliyahbet"]   { --c: #1f7fb0; }
.iv-topic[data-k="army"]        { --c: #a8482a; }
.iv-topic[data-k="air"]         { --c: #2f6fd0; }
.iv-topic[data-k="navy"]        { --c: #1d4e66; }
.iv-topic[data-k="procurement"] { --c: #9a7420; }
.iv-topic[data-k="recruitment"] { --c: #6a52b0; }
.iv-topic[data-k="political"]   { --c: #7a6f52; }
.iv-topic[data-k="military"]    { --c: #5f6c30; }

[data-theme="dark"] .iv-topic[data-k="aliyahbet"]   { --c: #3fa7d6; }
[data-theme="dark"] .iv-topic[data-k="army"]        { --c: #c46a4a; }
[data-theme="dark"] .iv-topic[data-k="air"]         { --c: #7fb3ff; }
[data-theme="dark"] .iv-topic[data-k="navy"]        { --c: #2f6f8f; }
[data-theme="dark"] .iv-topic[data-k="procurement"] { --c: #c9a24b; }
[data-theme="dark"] .iv-topic[data-k="recruitment"] { --c: #9b8bd6; }
[data-theme="dark"] .iv-topic[data-k="political"]   { --c: #d6d1c4; }
[data-theme="dark"] .iv-topic[data-k="military"]    { --c: #8f9c5a; }

/* ══════════════════════════════════════════════════════════════════════════
   OPTION A HERO STACK — dark photo hero + On This Day + Recently Departed +
   Featured Story. Panels are intentionally dark in BOTH themes (they read as a
   cinematic masthead over photography), matching the approved Option A mockup.
   The site header/logo/menu render above this via the theme's sticky header.
   ══════════════════════════════════════════════════════════════════════════ */

.iv-heroA {
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #0c0f14;
  /* Two background layers: [1] the dark gradient scrim (inline style) covers
     the whole band; [2] the Avia S-199 photo. Both layers use `cover` so the
     band is ALWAYS fully bled with no blank gaps at any viewport ratio. The
     photo's focal point is pushed right-of-centre (78% x) so the Star-of-David
     roundel on the aircraft's right wing stays in frame — on a tall/narrow
     mobile band `cover` crops the sides, so anchoring right keeps the roundel;
     vertical focal 55% keeps the fuselage/wing centred. */
  background-size: cover, cover;
  background-position: center, 78% 55%;
  background-repeat: no-repeat;
  color: #f0ece2;
  padding: 48px 20px;
  /* Full-bleed: break out of Astra's constrained #primary container to the
     viewport edges regardless of theme content width. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── Front-page: hero bleeds to the very TOP, translucent nav overlaid on it ──
   The header is rendered as a transparent absolute overlay (default, at scroll
   top); on scroll it goes opaque via nav-styles.css. The hero is pulled up so
   the photo starts at the viewport top and the headline clears the ~70px nav. */
.iv-front #masthead,
.iv-front .site-header,
.iv-front .ast-primary-header-bar,
.iv-front .main-header-bar {
  position: absolute;
  left: 0; right: 0; top: 0;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none !important;
}
/* content area must not add its own top offset above the hero */
.iv-front #primary,
.iv-front .site-content > .ast-container,
.iv-front .site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.iv-front .iv-heroA {
  margin-top: 0;
  min-height: 78vh;              /* tall enough to hold nav + headline comfortably */
  padding-top: 130px;            /* clear the ~70px nav plus breathing room */
  /* keep both layers `cover` (full-bleed, no gaps) and push the photo focal
     point right (78% x) so the right-wing Star-of-David roundel stays in frame;
     55% y keeps the aircraft vertically centred under the headline */
  background-size: cover, cover;
  background-position: center, 78% 55%;
}
/* When the sticky header re-appears on scroll it should be opaque again —
   nav-styles.css already handles .ast-header-sticked/.ast-sticky-active. */
@media (max-width: 921px) {
  /* Size the band to its content and top-align it so the gap ABOVE the text
     (nav bottom -> text top) equals the gap BELOW it (text bottom -> Quick
     Links border). The ~70px translucent nav overlays the top, so
     padding-top = 70 (nav clearance) + 40 (the symmetric gap) and
     padding-bottom = that same 40px. Pushing the text down lets more of the
     image's top show through the translucent nav. No min-height floor, or the
     leftover height would widen the bottom gap and bring back the grass. */
  .iv-front .iv-heroA {
    padding-top: 150px;            /* ~112px actual nav height + ~40px gap above text */
    padding-bottom: 40px;          /* equal ~40px gap below text, before Quick Links */
    min-height: 0;
    justify-content: flex-start;
  }
}
.iv-heroA .k { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.iv-heroA h1 { font-family: 'Oswald', 'Oswald Fallback', Impact, 'Arial Narrow', sans-serif; font-size: 34px; font-weight: 700; line-height: 1.12; max-width: 600px; color: #fff; }
.iv-heroA h1 .sub { display: block; margin-top: 0.5em; font-size: 0.55em; font-weight: 700; letter-spacing: 0.5px; font-family: 'Oswald', 'Oswald Fallback', Impact, 'Arial Narrow', sans-serif; }

.iv-ledger {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
  padding: 20px; background: #1d2735; color: #e6e1d5; border-bottom: 1px solid #2b3749;
  width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.iv-ledger .lbl { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.iv-ledger .item { font-size: 15px; display: inline-flex; align-items: baseline; }
.iv-ledger .item::after { content: "\25CF"; color: var(--gold); font-size: 7px; margin-left: 12px; transform: translateY(-2px); } /* filled circle delimiter trailing each item */
.iv-ledger .item:last-of-type::after { content: none; margin-left: 0; } /* no trailing dot after the last link */
.iv-ledger .item a { color: var(--gold); text-decoration: none; font-weight: 600; }
.iv-ledger .item a:hover { text-decoration: underline; }

.iv-dep {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px;
  padding: 20px; background: #182130; color: #e6e1d5; border-bottom: 1px solid #2b3749;
  width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.iv-dep .lbl { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.iv-dep .person { text-decoration: none; }
.iv-dep .nm { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: 18px; color: #fff; display: block; }
.iv-dep .u { display: block; font-size: 12px; color: #a9b4c4; margin-top: 2px; }

.iv-featured {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: #141c28; color: #e6e1d5;
}
.iv-featured .txt { padding: 28px 20px; }
.iv-featured .fk { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.iv-featured h2 { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: 28px; color: #fff; margin: 8px 0 12px; }
.iv-featured p { color: #c9c3b5; line-height: 1.6; max-width: 520px; }
.iv-featured .more { display: inline-block; margin-top: 16px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold); padding-bottom: 2px; text-decoration: none; }
.iv-featured .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
.iv-featured .grid .cell { background-size: cover; background-position: center; min-height: 120px; filter: grayscale(.15); }

@media (min-width: 768px) {
  .iv-heroA { min-height: 420px; padding: 60px 44px; }
  .iv-heroA h1 { font-size: 48px; }
  .iv-ledger, .iv-dep { padding: 20px 44px; }
  .iv-featured { grid-template-columns: 1fr 420px; }
  .iv-featured .txt { padding: 34px 44px; }
  .iv-featured .grid .cell { min-height: 150px; }
}
@media (min-width: 1100px) {
  .iv-heroA { padding: 70px; min-height: 460px; }
  .iv-heroA h1 { font-size: 54px; }
  .iv-ledger, .iv-dep { padding: 22px 70px; }
  .iv-featured .txt { padding: 40px 70px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LATEST ARTICLES — Instagram-style responsive teaser band (rendered above the
   closing Mickey Marcus quote). Large edge-to-edge imagery, square-ish media on
   mobile, a fluid auto-fit grid on wider screens. Reads from the theme tokens
   so it adapts to light + dark. The number of cards is editor-controlled; the
   grid simply flows however many posts arrive.
   ══════════════════════════════════════════════════════════════════════════ */
.iv-articles {
  padding: 40px 20px 44px;
  max-width: 1180px;
  margin: 0 auto;
}
.iv-articles-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 22px;
}
.iv-articles-head .k {
  width: 100%;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.iv-articles-head .hd {
  font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.08;
  color: var(--fg);
  margin: 2px 0 0;
}
.iv-articles-more {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.iv-articles-more:hover { border-bottom-color: var(--gold); }
.iv-articles-more .ar { font-family: sans-serif; }

/* Mobile-first: a single column of large cards. */
.iv-articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.iv-article {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.iv-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  border-color: var(--gold);
}
.iv-article-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;          /* big Instagram-like image */
  background-size: cover;
  background-position: center;
  background-color: var(--surface2);
  background-image: linear-gradient(135deg, var(--surface2), var(--line));
}
.iv-article-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px 22px;
}
.iv-article-cat {
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.iv-article-title {
  font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.18;
  color: var(--fg);
}
.iv-article-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.iv-article-date {
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--faint);
  margin-top: 2px;
}

/* Two-up from tablet, then a fluid auto-fit grid so 1–12 posts always lay out
   sensibly (min 300px per card, growing to fill the row). */
@media (min-width: 680px) {
  .iv-articles { padding: 52px 44px 56px; }
  .iv-articles-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
  }
  .iv-article-media { aspect-ratio: 16 / 10; }
  .iv-article-title { font-size: 23px; }
}

/* A lone card should not stretch full-bleed; cap its width and centre it. */
.iv-articles-grid[data-count="1"] { grid-template-columns: minmax(0, 560px); justify-content: center; }

@media (min-width: 1100px) {
  .iv-articles { padding: 64px 70px 64px; }
}