/*
  Home page banners (30.10.2026), between the journey circles and "קצת עליי":
  1. the webinar את העסק (partials/sections/webinar-banner.html), black textured card;
  2. מעצמאית למנכ״לית (partials/sections/program-banner.html), white card with four tiles and a black button.
  Loaded after the other stylesheets in layouts/base.html. Checked at 1440, 1280, 820, 390 and 360 px.
  Mobile: about 60 px between the journey text and the first banner (Hamutal's screenshot, 30.10.2026).
*/
.web-banner-wrap, .prog-banner-wrap { padding: 0 var(--gutter); margin-block-start: calc(-1 * clamp(24px, 4vw, 64px)); }
.web-banner-wrap + .prog-banner-wrap { margin-block-start: 18px; }

/* ---------- Webinar ---------- */
.web-banner {
  position: relative; overflow: hidden; max-inline-size: 1280px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 4vw, 56px); align-items: end;
  padding: clamp(40px, 3.6vw, 52px) clamp(28px, 4vw, 56px);
  border-radius: var(--radius); color: var(--paper);
}
.web-banner__star { position: absolute; inset-block-start: clamp(28px, 3vw, 44px); inset-inline-end: clamp(28px, 4vw, 56px); inline-size: clamp(64px, 7vw, 104px); color: var(--orange); }
.web-banner__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-inline-size: 660px; }
.web-banner__label { font-family: var(--font-display); font-weight: 400; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.2; color: var(--paper); }
.web-banner__title { font-family: var(--font-display); font-weight: 400; letter-spacing: normal; font-size: clamp(36px, 4vw, 58px); line-height: 1; color: var(--paper); }
.web-banner__date { min-inline-size: 0; }
.web-banner__body { max-inline-size: 34em; color: var(--grey-on-dark); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; }
.web-banner__btn { min-inline-size: 240px; }

/* ---------- מעצמאית למנכ״לית ---------- */
.prog-banner {
  position: relative; max-inline-size: 1280px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "text pillars" "cta pillars";
  column-gap: clamp(32px, 4vw, 56px); row-gap: 24px; align-items: center;
  padding: 56px clamp(28px, 4vw, 56px) clamp(40px, 3.6vw, 52px);
  border-radius: var(--radius); background: var(--white);
}
.prog-banner__star { position: absolute; inset-block-start: 18px; inset-inline-end: 20px; inline-size: 32px; color: var(--olive); }
.prog-banner__text { grid-area: text; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.prog-banner .pill { min-inline-size: 0; }
.prog-banner__title { font-family: var(--font-display); font-weight: 400; letter-spacing: normal; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; }
.prog-banner__meta { font-weight: 500; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.3; }
.prog-banner__body { max-inline-size: 30em; color: var(--grey); font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.55; }
.prog-banner__cta { grid-area: cta; align-self: start; }
/* Black button (Hamutal, 30.10.2026: the button should stand out) */
.prog-banner__btn { min-inline-size: 240px; background: var(--dark); color: var(--paper); border-color: var(--dark); }
.prog-banner__btn:is(:hover, :focus-visible) { background: #2b2a2b; border-color: #2b2a2b; color: var(--white); }
.prog-banner__btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.prog-banner__pillars { grid-area: pillars; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.prog-banner__pillar { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-block-size: 112px; padding: 20px 22px 22px; border-radius: 14px; background: var(--paper); }
.prog-banner__n { display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--lime); color: var(--dark); font-weight: 500; font-size: 15px; line-height: 1; }
.prog-banner__pillar:nth-child(2) .prog-banner__n { background: var(--yellow); }
.prog-banner__pillar:nth-child(3) .prog-banner__n { background: #c9cc8f; }
.prog-banner__pillar:nth-child(4) .prog-banner__n { background: #ffb26b; }
.prog-banner__pillar-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.05; color: var(--dark); }

@media (max-width: 860px) {
  .web-banner-wrap, .prog-banner-wrap { margin-block-start: 16px; }
  .web-banner-wrap + .prog-banner-wrap { margin-block-start: 12px; }

  .web-banner { grid-template-columns: minmax(0, 1fr); row-gap: 22px; padding: 26px 20px 22px; }
  .web-banner__star { inset-block-start: 22px; inset-inline-end: 20px; inline-size: 44px; }
  .web-banner__text { gap: 12px; }

  .prog-banner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "pillars" "cta"; row-gap: 20px; padding: 26px 20px 22px; }
  .prog-banner__star { inset-block-start: 22px; inset-inline-end: 20px; inline-size: 30px; }
  .prog-banner__text { gap: 12px; }
  .prog-banner__pillars { gap: 10px; }
  .prog-banner__pillar { min-block-size: 92px; padding: 14px 14px 16px; }
  .prog-banner__n { inline-size: 30px; block-size: 30px; font-size: 14px; }
}
@media (max-width: 560px) {
  .web-banner__btn, .prog-banner__btn { inline-size: 100%; min-inline-size: 0; }
}