/* ===========================================================
   media.css — "נצח ישראל · מעצבים תודעה לאומית" press/video grid
   Figma netsah node 2239:9866 (3×2 video cards) — added below the
   WhatsApp share, at the bottom of /primaries/.
   Desktop: scaled-stage (1920 canvas, exact Figma px) like cards.css.
   Mobile: single-column stack (.m-media, inside the .m block).
   =========================================================== */

/* =============== ONE CONTINUOUS SKY behind vote + media (Figma 2295:2) ===============
   The vote block and the media grid share a single sky photo (no seam), lightened
   to ~50% like the design. pjvote/media themselves become transparent. */
.pjbottom {
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
    url('../images/sky-bg-full.jpg') center top / cover no-repeat;
}
.pjbottom .pjvote { background: transparent; }
/* keep only a white wash over the top vote area (Figma: white rect over the vote card) */
.pjbottom .pjvote__bg {
  background: linear-gradient(to bottom,
    #ffffff 0%, rgba(255,255,255,0.75) 22%, rgba(255,255,255,0.35) 48%, rgba(255,255,255,0) 78%);
}

/* =============== DESKTOP media grid (scaled 1920 stage) =============== */
.media {
  position: relative;
  width: 100vw; max-width: 100%;
  height: calc(100vw * 1040 / 1920);
  overflow: hidden;
  background: transparent;
}
.media__inner {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1040px;
  transform: scale(calc(100vw / 1920px));
  transform-origin: top left;
}
.media__copyright {
  position: absolute; left: 0; top: 992px; width: 1920px; text-align: center;
  font-family: var(--font-body); color: var(--navy); font-size: 15px; line-height: 20px;
}
.media__copyright a { color: inherit; text-decoration: underline; }
.media__copyright b { font-family: "Gilroy", "Heebo", sans-serif; font-weight: 800; color: #030a11; }

.media__title {
  position: absolute; top: 0; left: 0;
  width: 1920px; text-align: center;
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--navy); font-size: 100px; line-height: 124px;
}

.media__grid {
  position: absolute; top: 180.56px; left: 50%;
  transform: translateX(-50%);
  display: grid; direction: rtl;
  grid-template-columns: repeat(3, 447px);
  column-gap: 31px; row-gap: 63px;
}

/* ---- card ---- */
.mediacard {
  position: relative;
  width: 447px; height: 357.87px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(7, 28, 55, 0.1);
  display: block; color: inherit;
}
.mediacard__thumb {
  position: absolute; top: 11.6px; left: 12.19px;
  width: 424.53px; height: 214.37px;
  border-radius: 4px; overflow: hidden;
  z-index: 1;
}
.mediacard__img { width: 100%; height: 100%; object-fit: cover; }
.mediacard__grad {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 95.13px;
  background: linear-gradient(to top, #071c37 0%, rgba(7, 28, 55, 0) 100%);
  border-radius: 0 0 4px 4px;
}
.mediacard__play {
  position: absolute; z-index: 2;
  width: 103.15px; height: 103.15px;
  left: 172.79px; top: 67.35px;
}
.mediacard__caption {
  position: absolute; top: 246px; left: 23.18px;
  width: 400.63px; z-index: 2;
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--navy); font-size: 44px; line-height: 48px;
  text-align: center;
}
/* logo badge (overhangs the top-left corner) */
.mediacard__badge {
  position: absolute; z-index: 3;
  top: -16.82px; left: 22.52px;
  width: 94.54px; height: 102.33px;
  background: var(--white);
  box-shadow: 0 4px 14px rgba(16, 67, 124, 0.2);
  display: flex; align-items: center; justify-content: center;
}
.mediacard__badge img { display: block; }
.mediacard__badge--netzach img { width: 82px; height: 84px; object-fit: contain; }
.mediacard__badge--now14 img   { width: 91px; height: 91px; object-fit: contain; }
/* gold folded-corner accent, just right of the badge */
.mediacard__corner {
  position: absolute; z-index: 3;
  top: -16.5px; left: 117.29px;
  width: 13.32px; height: 17.01px;
}
.mediacard__corner img { width: 100%; height: 100%; }

a.mediacard { transition: transform .2s ease, box-shadow .2s ease; }
a.mediacard:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(7, 28, 55, 0.18); }

/* hide the desktop stage on mobile (house pattern) */
@media (max-width: 768px) {
  .media { display: none !important; }
}

/* =============== MOBILE (stacked, inside .m) =============== */
/* mobile: one continuous sky behind m-pjvote + m-media */
.m-pjbottom {
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
    url('../images/sky-bg-full.jpg') center top / cover no-repeat;
}
.m-pjbottom .m-pjvote { background: transparent; }
.m-pjbottom .m-pjvote__bg {
  background: linear-gradient(to bottom,
    #ffffff 0%, rgba(255,255,255,0.7) 26%, rgba(255,255,255,0.3) 55%, rgba(255,255,255,0) 85%);
}
.m-media {
  background: transparent;
  padding: 34px 16px 96px;   /* bottom clears the fixed .m-sticky bar */
}
.m-media__copyright {
  margin: 26px 8px 0; text-align: center;
  font-family: var(--font-body); color: var(--navy); font-size: 13px; line-height: 18px;
}
.m-media__copyright a { color: inherit; text-decoration: underline; }
.m-media__copyright b { font-family: "Gilroy", "Heebo", sans-serif; font-weight: 800; color: #030a11; }
.m-media__title {
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--navy); font-size: 32px; line-height: 38px;
  text-align: center; margin: 0 auto 26px; max-width: 320px;
}
.m-media__grid {
  display: flex; flex-direction: column; align-items: center; gap: 30px;
}
.m-mediacard {
  position: relative;
  width: 100%; max-width: 360px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(7, 28, 55, 0.1);
  padding-bottom: 18px;
  display: block; color: inherit;
}
.m-mediacard__thumb {
  position: relative;
  margin: 10px 11px 0;
  border-radius: 4px; overflow: hidden;
  aspect-ratio: 424 / 214;
}
.m-mediacard__img { width: 100%; height: 100%; object-fit: cover; }
.m-mediacard__grad {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 44%;
  background: linear-gradient(to top, #071c37 0%, rgba(7, 28, 55, 0) 100%);
}
.m-mediacard__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
}
.m-mediacard__caption {
  margin: 15px 18px 0;
  font-family: var(--font-display); font-weight: var(--w-regular);
  color: var(--navy); font-size: 24px; line-height: 28px;
  text-align: center;
}
.m-mediacard__badge {
  position: absolute; z-index: 3;
  top: -11px; left: 14px;
  width: 58px; height: 63px;
  background: var(--white);
  box-shadow: 0 4px 14px rgba(16, 67, 124, 0.2);
  display: flex; align-items: center; justify-content: center;
}
.m-mediacard__badge img { display: block; object-fit: contain; }
.m-mediacard__badge--netzach img { width: 48px; height: 50px; }
.m-mediacard__badge--now14 img   { width: 54px; height: 54px; }
.m-mediacard__corner {
  position: absolute; z-index: 3;
  top: -11px; left: 72px;
  width: 9px; height: 11.5px;
}
.m-mediacard__corner img { width: 100%; height: 100%; }

/* =============== YouTube lightbox (play → popup) =============== */
a.mediacard, a.m-mediacard,
.mediacard[data-yt], .m-mediacard[data-yt] { cursor: pointer; }

.pj-yt { position: fixed; inset: 0; z-index: 99999; display: none; }
.pj-yt.is-open { display: block; }
.pj-yt__backdrop { position: absolute; inset: 0; background: rgba(3, 12, 32, 0.86); }
.pj-yt__box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 960px); aspect-ratio: 16 / 9;
}
.pj-yt__frame { width: 100%; height: 100%; }
.pj-yt__frame iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; display: block; }
.pj-yt__close {
  position: absolute; top: -48px; left: 0; width: 40px; height: 40px;
  border-radius: 50%; background: #fff; color: var(--navy);
  font-size: 26px; line-height: 40px; text-align: center; cursor: pointer;
  border: none; font-family: var(--font-body);
}
@media (max-width: 768px) {
  .pj-yt__box { width: 94vw; }
  .pj-yt__close { top: -44px; }
}