/* ===========================================================================
   RONROV — מערכת קידומים (Promotions)
   ---------------------------------------------------------------------------
   Every promo the panel can produce is styled here, by the site, in the site's
   own design language. The editor picks a template and an accent; it never
   writes CSS. That is the whole difference from the feed system this replaces,
   where a pasted <style> block reached the page and took the homepage apart.

   Tokens: the block reads its own --promo-* variables so one rule set serves
   all five skins. The defaults below come from assets/css/style.css; the
   rovblog remap further down is what makes it look native on the live skin.

   Logical properties throughout (margin-inline, inset-inline, text-align:start)
   because the site is RTL and the English pages are not.
   =========================================================================== */

.promo {
  --promo-flow: to left;      /* RTL default; flipped for LTR below */
  --promo-surface:  var(--c-surface, #fff);
  --promo-ink:      var(--c-text, #16181D);
  --promo-muted:    var(--c-text-muted, #61646C);
  --promo-border:   var(--c-border, #E1DFDA);
  --promo-radius:   var(--radius-xl, 16px);
  --promo-shadow:   var(--shadow-md, 0 10px 24px rgba(22,24,29,.10));
  --promo-accent:      #FF3399;
  --promo-accent-ink:  #CC1E77;
  --promo-accent-soft: rgba(255, 51, 153, .10);
  --promo-hairline:    #EEEBE7;
  --promo-band:        #FDF2F8;
  --promo-band-line:   rgba(255, 51, 153, .14);
  --promo-on-accent:   #fff;

  display: block;
  margin-block: 28px;
  color: var(--promo-ink);
  font-family: var(--font-main, 'Heebo', system-ui, sans-serif);

  /* An html_raw promo carries markup of unknown shape. contain traps its
     layout and paint inside this box, and makes the box the containing block
     for a position:fixed descendant, so a pasted full-screen overlay cannot
     cover the site. isolation keeps a pasted z-index under the header.
     The one thing this cannot scope is a pasted <style> element — that is
     warned about in /admin/promos.php, at save time. */
  contain: content;
  isolation: isolate;
}

.promo-inner { position: relative; }

html[dir="ltr"] .promo { --promo-flow: to right; }

/* ── accents ─────────────────────────────────────────────────────────────── */

.promo--accent-ink  { --promo-accent: #16181D; --promo-accent-ink: #16181D; --promo-accent-soft: rgba(22,24,29,.08); }
.promo--accent-sea  { --promo-accent: #0EA5E9; --promo-accent-ink: #0369A1; --promo-accent-soft: rgba(14,165,233,.10); }
.promo--accent-sun  { --promo-accent: #F97316; --promo-accent-ink: #C2410C; --promo-accent-soft: rgba(249,115,22,.10); }
.promo--accent-leaf { --promo-accent: #10B981; --promo-accent-ink: #047857; --promo-accent-soft: rgba(16,185,129,.10); }

/* ── device gate ─────────────────────────────────────────────────────────── */
/* Not server-side: a promo is our own content, so a hidden one costs nothing.
   An ad unit would be different, and inc/ads.php treats it differently. */

@media (max-width: 900px) { .promo--dev-desktop { display: none !important; } }
@media (min-width: 901px) { .promo--dev-mobile  { display: none !important; } }

/* ── the call to action ──────────────────────────────────────────────────── */

.promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--promo-accent);
  color: var(--promo-on-accent);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.promo-cta:hover  { filter: brightness(.93); transform: translateY(-1px); }
.promo-cta:focus-visible { outline: 3px solid var(--promo-accent-soft); outline-offset: 2px; }
.promo-cta-arrow { font-size: 1.1em; line-height: 1; }

.promo-cta--ghost {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(4px);
}

.promo-close {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-start: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  opacity: .55;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.promo-close:hover { opacity: 1; background: rgba(0,0,0,.06); }

/* ── typography shared by the templates ──────────────────────────────────── */

.promo-kicker {
  display: inline-block;
  margin-block-end: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--promo-accent-soft);
  color: var(--promo-accent-ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.promo-title {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  font-weight: 800;
  color: var(--promo-ink);
}
.promo-text {
  margin: 0 0 18px;
  color: var(--promo-muted);
  font-size: 1rem;
  line-height: 1.75;
}

/* ── announcement ────────────────────────────────────────────── */
/*
  Layout only here. The surface comes from one of the three styles below, and
  which one is a choice made per promo in /admin/promo_edit.php — see
  promo_ann_styles() in inc/promo.php. A greeting is a design decision, so it
  belongs in the panel rather than hard-coded in this file.
*/

.promo-ann {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 26px;
}

.promo-ann-icon { font-size: 1.5rem; line-height: 1; }
.promo-ann-text { flex: 1 1 260px; font-size: 1.05rem; font-weight: 600; line-height: 1.5; }
.promo-ann .promo-cta { padding: 9px 18px; font-size: .9rem; }

/* No button and no icon: the words are the whole composition, so they are
   centred and set larger. Centring is justify-content's job alone — an auto
   margin on a flex child silently outranks it, which is how an earlier version
   of this band ended up with its text pinned to the edge. */
.promo-ann--plain { justify-content: center; text-align: center; }
.promo-ann--plain .promo-ann-text {
  flex: 0 1 auto;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .01em;
}
body[data-skin="rovblog"] .promo-ann--plain .promo-ann-text {
  font-family: 'Secular One', var(--font-main);
  font-weight: 400;
}

/* א · hairline — no card. Two rules and the type, with a short accent segment
   sitting ON the top rule. Nothing curves, so nothing can be clipped. */
.promo-ann--hairline {
  background: var(--promo-surface);
  border-block: 1px solid var(--promo-hairline);
  padding-block: 30px;
}
.promo-ann--hairline::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 72px;
  height: 1px;
  background: var(--promo-accent);
}
html[dir="ltr"] .promo-ann--hairline::before { transform: translateX(-50%); }
.promo-ann--hairline .promo-ann-text { color: var(--promo-ink); }

/* ב · ribbon — the skin's own band colour, edge to edge inside the column.
   No radius, no border, no shadow: part of the page, not a component on it. */
.promo-ann--ribbon {
  background: var(--promo-band);
  border-block-end: 1px solid var(--promo-band-line);
  padding-block: 26px;
}
.promo-ann--ribbon .promo-ann-text { color: var(--promo-accent-ink); }

/* ג · plate — the card stays; the accent moves off the edges and into two
   small marks beside the words. */
.promo-ann--plate {
  background: var(--promo-surface);
  border: 1px solid var(--promo-border);
  border-radius: var(--promo-radius);
  box-shadow: var(--promo-shadow);
  padding: 28px 32px;
}
.promo-ann--plate .promo-ann-text { color: var(--promo-ink); }
.promo-ann-mark {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--promo-accent);
  transform: rotate(45deg);
}

/* ── card ────────────────────────────────────────────────────────────────── */

.promo-card {
  border: 1px solid var(--promo-border);
  border-radius: var(--promo-radius);
  background: var(--promo-surface);
  box-shadow: var(--promo-shadow);
  overflow: hidden;
}
.promo-card.has-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: stretch;
}
.promo-card-media { position: relative; min-height: 220px; background: var(--promo-accent-soft); }
.promo-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-card-body { padding: 32px 34px; display: flex; flex-direction: column; justify-content: center; text-align: start; }
.promo-card-body .promo-cta { align-self: start; }
.promo-card--push .promo-card-media { min-height: 180px; }

@media (max-width: 760px) {
  .promo-card.has-media { grid-template-columns: 1fr; }
  .promo-card-media { min-height: 180px; }
  .promo-card-body { padding: 24px 22px; }
}

/* ── image banner ────────────────────────────────────────────────────────── */

.promo-banner {
  position: relative;
  display: block;
  border-radius: var(--promo-radius);
  overflow: hidden;
  box-shadow: var(--promo-shadow);
  text-decoration: none;
}
.promo-banner-img { width: 100%; height: auto; display: block; }
.promo-banner-cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 24px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  color: #fff;
}
.promo-banner-cap .promo-title { color: #fff; margin: 0; }

/* ── newsletter ──────────────────────────────────────────────────────────── */

.promo-news {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 30px 32px;
  border-radius: var(--promo-radius);
  background: var(--promo-accent-soft);
  border: 1px solid var(--promo-border);
}
.promo-news .promo-text { margin-block-end: 0; }
.promo-news-form { display: flex; gap: 10px; flex-wrap: wrap; }
.promo-news-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 11px 16px;
  border: 1px solid var(--promo-border);
  border-radius: 999px;
  background: var(--promo-surface);
  color: var(--promo-ink);
  font: inherit;
}
@media (max-width: 760px) { .promo-news { grid-template-columns: 1fr; padding: 24px 20px; } }

/* ── the escape hatch ────────────────────────────────────────────────────── */

.promo-raw { position: relative; max-width: 100%; }
.promo-raw img,
.promo-raw video,
.promo-raw iframe { max-width: 100%; height: auto; }

/* Google inventory. inc/promo.php adds this class to a raw promo that carries
   an AdSense unit, and it undoes every restriction the box above imposes: a
   creative that expands, or Google's consent message, must not be clipped by
   a container of ours. Nothing here decorates the ad — a border or a
   background around a unit would be restyling an advertiser's work. */
.promo--passthrough { contain: none; isolation: auto; margin-block: 20px; }
.promo--passthrough .promo-inner,
.promo--passthrough .promo-raw { overflow: visible; max-width: none; }
.promo--passthrough .promo-raw img,
.promo--passthrough .promo-raw iframe { max-width: none; }

/* ── formats: strip ──────────────────────────────────────────────────────── */

.promo--fmt-strip {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;               /* below the AdSense consent message on purpose */
  margin: 0;
  border-radius: 0;
  background: var(--promo-accent);
  color: var(--promo-on-accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.promo--fmt-strip .promo-inner { max-width: var(--max-w, 1400px); margin-inline: auto; padding: 10px 48px 10px 20px; }
.promo--fmt-strip .promo-ann {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: inherit;
  justify-content: center;
}
.promo--fmt-strip .promo-ann-text { flex: 0 1 auto; }
.promo--fmt-strip .promo-cta { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.5); }
.promo--fmt-strip .promo-close { inset-block-start: 50%; transform: translateY(-50%); color: #fff; }

/* ── formats: toast ──────────────────────────────────────────────────────── */

.promo--fmt-toast {
  position: fixed;
  inset-inline-end: 20px;
  inset-block-end: 20px;
  z-index: 70;
  width: min(360px, calc(100vw - 40px));
  margin: 0;
  animation: promo-rise .35s ease both;
}
.promo--fmt-toast .promo-card-body { padding: 20px; }
.promo--fmt-toast .promo-card.has-media { grid-template-columns: 1fr; }
.promo--fmt-toast .promo-title { font-size: 1.1rem; }
.promo--fmt-toast .promo-text { font-size: .92rem; margin-block-end: 14px; }

@keyframes promo-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── formats: popup ──────────────────────────────────────────────────────── */

.promo--fmt-popup {
  position: fixed;
  inset: 0;
  z-index: 80;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  contain: none;             /* a dialog must be able to fill the viewport */
}
.promo-backdrop { position: absolute; inset: 0; background: rgba(10,11,14,.62); backdrop-filter: blur(2px); }
.promo--fmt-popup .promo-inner {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow: auto;
  border-radius: var(--promo-radius);
  background: var(--promo-surface);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  animation: promo-pop .25s ease both;
}
.promo--fmt-popup .promo-card { border: 0; box-shadow: none; }

@keyframes promo-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .promo--fmt-toast,
  .promo--fmt-popup .promo-inner { animation: none; }
  .promo-cta:hover { transform: none; }
}

/* ── skin remaps ─────────────────────────────────────────────────────────── */

body[data-skin="rovblog"] .promo {
  --promo-surface: var(--rb-surface);
  --promo-ink:     var(--rb-ink);
  --promo-muted:   var(--rb-muted);
  --promo-border:  var(--rb-border);
  --promo-radius:  var(--rb-r-xl);
  --promo-shadow:  var(--rb-sh-2);
}
body[data-skin="rovblog"] .promo--accent-brand {
  --promo-accent:      var(--rb-accent-solid);
  --promo-accent-ink:  var(--rb-accent-ink);
  --promo-accent-soft: var(--rb-accent-soft);
}
body[data-skin="rovblog"] .promo-title { font-family: 'Secular One', var(--font-main); font-weight: 400; }

body[data-skin="noir"] .promo,
body[data-skin="immersive"] .promo {
  --promo-surface: rgba(255,255,255,.04);
  --promo-ink:     #F2F3F5;
  --promo-muted:   #A7ABB3;
  --promo-border:  rgba(255,255,255,.10);
  --promo-shadow:  0 12px 30px rgba(0,0,0,.45);
  --promo-hairline: rgba(255,255,255,.10);
  --promo-band:     rgba(255, 51, 153, .10);
  --promo-band-line: rgba(255, 51, 153, .22);
}

body[data-skin="silver"] .promo {
  --promo-accent:      #16181D;
  --promo-accent-ink:  #16181D;
  --promo-accent-soft: rgba(22,24,29,.07);
}

/* In the photo grid a promo takes a whole row rather than pretending to be a
   tile — the grid is a wall of images and a card between two of them at tile
   size reads as a broken photo. */
.gallery-grid > .promo { grid-column: 1 / -1; margin-block: 8px; }