/*
 * Paid promotion PPC (page 14170, template page-ppc). Concept "חדר התכנון": the funnel of stage 1 as target rings,
 * an A/B example, and the six stages as an optimisation loop.
 * Palette: deep navy ink, ice paper, azure signal, coral accent (fills, or behind ink text only).
 * Own compositions: target cards (fit), a bento grid (value), "budget leak" rows (issues), the loop (stages).
 */

:root, .sv-page--ppc {
	--sv-ink: #0b1b33;
	--sv-ink-2: #13284a;
	--sv-ink-3: #2a4066;
	--sv-paper: #f2f6fb;
	--sv-paper-2: #e1e9f4;
	--sv-card: #fafcff;
	--sv-line: #c9d6e7;
	--sv-line-strong: #8aa0bf;
	--sv-muted: #44577a;
	--sv-signal: #0b5fc4;
	--sv-signal-deep: #094fa6;
	--sv-signal-soft: #8ec5ff;
	--sv-accent: #ff7a59;
	--sv-alert: #b8321c;
	--sv-on-ink: #f2f6fb;
	--sv-on-ink-muted: #aebfd8;
	--sv-on-ink-line: #2a3f61;
	--sv-on-signal: #ffffff;
	--sv-grid: rgba(11, 27, 51, .05);
	--sv-grid-ink: rgba(242, 246, 251, .045);
	--sv-glow: rgba(11, 95, 196, .2);
	--sv-underline: linear-gradient(90deg, #ff7a59, #0b5fc4);
	--sv-cta-mark: "◎";
}

/* ---------- Hero: funnel as target rings ---------- */
.ppc-rings { position: relative; width: min(100%, 17rem); aspect-ratio: 1; margin: .25rem auto 1.1rem !important; counter-reset: none; }
.ppc-rings li {
	position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; align-content: start;
	border-radius: 50%; font-weight: 700; font-size: .875rem; padding-block-start: .55rem;
}
.ppc-rings li:nth-child(1) { width: 100%; height: 100%; background: var(--sv-paper-2); border: 1.5px solid var(--sv-ink); }
.ppc-rings li:nth-child(2) { width: 66%; height: 66%; background: var(--sv-signal-soft); border: 1.5px solid var(--sv-ink); }
.ppc-rings li:nth-child(3) { width: 36%; height: 36%; background: var(--sv-accent); border: 1.5px solid var(--sv-ink); padding-block-start: .4rem; font-size: .8125rem; }
.ppc-rings::after { /* the arrow hitting the centre */
	content: ""; position: absolute; z-index: 2; width: 46%; height: 3px; background: var(--sv-ink); left: 50%; top: 50%; transform-origin: left center; rotate: 35deg; /* from the lower right, under the labels */
	box-shadow: 0 0 0 1px var(--sv-card);
}
.ppc-rings::before { content: ""; position: absolute; z-index: 3; left: calc(50% - 5px); top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--sv-ink); }
.ppc-platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.ppc-platforms li { padding: .2rem .7rem; font-size: .8125rem; font-weight: 700; border: 1px solid var(--sv-ink); border-radius: 999px; background: var(--sv-card); }
@media (prefers-reduced-motion: no-preference) {
	.ppc-rings li { animation: sv-pop .5s var(--sv-ease) both; }
	.ppc-rings li:nth-child(2) { animation-delay: .2s; } .ppc-rings li:nth-child(3) { animation-delay: .4s; }
	.ppc-rings::after { animation: ppc-hit .7s var(--sv-ease) .9s both; }
}
@keyframes ppc-hit { from { width: 0; opacity: 0; } to { width: 46%; opacity: 1; } }

/* ---------- Fit: target cards ---------- */
.sv-fit--targets .sv-fit__grid { border: 0; gap: 1rem; }
.sv-fit--targets .sv-fit__item { background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: calc(var(--sv-radius) * 2); padding: 1.3rem 1.3rem; }
.sv-fit--targets .sv-fit__item:hover { padding-inline-start: 1.3rem; border-color: var(--sv-signal); box-shadow: 0 10px 30px -18px rgba(11, 95, 196, .6); }
.sv-fit--targets .sv-fit__num { border: 0; color: var(--sv-ink); font-size: .8125rem; background: radial-gradient(circle, var(--sv-accent) 0 26%, var(--sv-card) 27% 44%, var(--sv-signal-soft) 45% 62%, var(--sv-card) 63% 78%, var(--sv-paper-2) 79%); box-shadow: inset 0 0 0 1.5px var(--sv-ink); }
.sv-fit--targets .sv-fit__item:hover .sv-fit__num { background: radial-gradient(circle, var(--sv-accent) 0 30%, var(--sv-signal) 31%); color: #fff; }

/* ---------- Value: bento ---------- */
@media (min-width: 900px) {
	.sv-cards--bento .sv-cards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(10rem, auto); }
	.sv-cards--bento .sv-card:nth-child(1) { grid-column: span 2; }
	.sv-cards--bento .sv-card:nth-child(1) .sv-card__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
	.sv-cards--bento .sv-card:nth-child(6) { grid-column: span 2; }
}
.sv-cards--bento .sv-card { border-radius: calc(var(--sv-radius) * 2); }
.sv-cards--bento .sv-card:nth-child(1) { background: var(--sv-signal); border-color: var(--sv-signal); }
.sv-cards--bento .sv-card:nth-child(1) .sv-card__num { color: #fff; }
.sv-cards--bento .sv-card:nth-child(1)::before { background: var(--sv-accent); transform: scaleX(1); }
.ppc-ab__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ppc-ab__cards li {
	position: relative; display: grid; gap: .5rem; align-content: start; padding: .8rem; min-height: 9rem;
	background: var(--sv-ink-2); border: 1px solid var(--sv-on-ink-line); border-radius: calc(var(--sv-radius) * 2);
}
.ppc-ab__cards li::after { /* the ad body: image block + two lines, drawn */
	content: ""; height: 4.2rem; border-radius: 4px;
	background: linear-gradient(var(--sv-on-ink-line) 0 0) bottom 0 left 0 / 70% 6px no-repeat, linear-gradient(var(--sv-on-ink-line) 0 0) bottom 12px left 0 / 90% 6px no-repeat, linear-gradient(135deg, var(--ab), transparent) top / 100% 2.6rem no-repeat;
}
.ppc-ab__a { --ab: var(--sv-signal-soft); }
.ppc-ab__b { --ab: var(--sv-accent); }
.ppc-ab__label { font-family: var(--sv-sans); font-weight: 700; font-size: .875rem; color: var(--sv-on-ink); }
.ppc-ab__msg { font-size: .8125rem; color: var(--sv-on-ink-muted); }
.ppc-ab__cards li + li::before { content: "VS"; position: absolute; inset-inline-start: -1.15rem; top: 50%; translate: 0 -50%; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--sv-accent); color: var(--sv-ink); font-family: var(--sv-mono); font-size: .625rem; font-weight: 500; z-index: 1; }

/* ---------- Issues: budget leak ---------- */
.sv-issues--leak .sv-issues__box { border: 0; }
.sv-issues--leak .sv-issues__list { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
.sv-issues--leak .sv-issues__list li {
	display: block; padding: 1.1rem 1.25rem; padding-inline-start: 4.4rem; background: var(--sv-card);
	border: 1px solid var(--sv-line); border-radius: calc(var(--sv-radius) * 2);
}
.sv-issues--leak .sv-issues__list li::before { /* a drop: budget leaking */
	inset-inline-start: 1.15rem; top: 50%; translate: 0 -50%; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
	border-radius: 0 50% 50% 50%; background: var(--sv-accent); color: var(--sv-ink); font-size: .8125rem; /* a drop, point up-left: no rotation, so the number stays upright */
}
.sv-issues--leak .sv-issues__list li:hover { border-color: var(--sv-accent); }

/* ---------- Stages: the optimisation loop ---------- */
@media (min-width: 1024px) {
	.sv-build--loop .sv-build__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.sv-build--loop .sv-build__aside > .sv-label { order: 2; }
.sv-build--loop .sv-build__nav { order: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; border: 0; }
.sv-build--loop .sv-build__nav a { border: 1px solid var(--sv-line); border-radius: var(--sv-radius); font-size: .9375rem; background: var(--sv-card); }
.sv-build--loop .sv-build__figure { order: 1; margin: 0; max-width: 24rem; justify-self: center; }
.ppc-loop__ring { fill: none; stroke: var(--sv-ink); stroke-width: 2; stroke-dasharray: 8 8; }
.ppc-loop__inner { fill: var(--sv-paper-2); stroke: var(--sv-line-strong); }
.ppc-loop__label { font-family: var(--sv-sans); font-size: 17px; font-weight: 700; fill: var(--sv-ink); }
.ppc-loop .sv-zone__bar { fill: var(--sv-signal-soft); stroke: var(--sv-ink); stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
	.ppc-loop__ring { animation: ppc-turn 30s linear infinite; transform-origin: 180px 180px; }
}
@keyframes ppc-turn { to { stroke-dashoffset: -160; } }
.sv-build--loop .sv-build__chapters { gap: 1.5rem; }
@media (min-width: 1300px) {
	.sv-build--loop .sv-build__chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.25rem; }
}
.sv-build--loop .sv-chapter { border-radius: calc(var(--sv-radius) * 2); }