/*
 * Social media (page 14159, template page-social). Concept "מערכת התוכן": an example activity week with the
 * page's formats and platforms, a template kit (static post, carousel, reel) and a profile feed that fills
 * tile by tile. Palette: deep wine ink, blush paper, rose signal, sun accent (fills, or behind ink text only).
 */

:root, .sv-page--social {
	--sv-ink: #2a0e1f;
	--sv-ink-2: #3a1529;
	--sv-ink-3: #57263f;
	--sv-paper: #fcf4f1;
	--sv-paper-2: #f5e4df;
	--sv-card: #fffaf8;
	--sv-line: #ead0ca;
	--sv-line-strong: #b98d93;
	--sv-muted: #694452;
	--sv-signal: #c42a63;
	--sv-signal-deep: #a8204f;
	--sv-signal-soft: #ff9dbd;
	--sv-accent: #ffc94a;
	--sv-alert: #a3341f;
	--sv-on-ink: #fcf4f1;
	--sv-on-ink-muted: #d9bcc6;
	--sv-on-ink-line: #4d2238;
	--sv-on-signal: #ffffff;
	--sv-grid: rgba(42, 14, 31, .045);
	--sv-grid-ink: rgba(252, 244, 241, .045);
	--sv-glow: rgba(196, 42, 99, .18);
	--sv-underline: linear-gradient(90deg, #ffc94a, #c42a63);
	--sv-cta-mark: "#";
}

/* ---------- Hero: the content system ---------- */
.sm-platforms { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-end: .9rem !important; }
.sm-platforms li { padding: .15rem .6rem; font-family: var(--sv-mono); font-size: .75rem; font-weight: 500; border: 1px solid var(--sv-ink); border-radius: 999px; }
.sm-week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.sm-week li { display: grid; gap: .5rem; align-content: start; min-height: 5.6rem; padding: .55rem; background: var(--sv-paper); border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius); }
.sm-week__day { font-family: var(--sv-sans); font-size: .8125rem; font-weight: 700; color: var(--sv-muted); }
.sm-chip { display: block; padding: .5rem .45rem; text-align: center; font-size: .8125rem; font-weight: 700; line-height: 1.2; border-radius: 4px; }
.sm-chip--post { background: var(--sv-signal); color: #fff; }
.sm-chip--reel { background: var(--sv-ink); color: var(--sv-on-ink); }
.sm-chip--story { background: var(--sv-accent); color: var(--sv-ink); }
.sm-chip--carousel { background: var(--sv-card); color: var(--sv-ink); border: 1.5px dashed var(--sv-ink); }
@media (prefers-reduced-motion: no-preference) {
	.sm-week li { animation: sv-pop .4s var(--sv-ease) both; }
	.sm-week li:nth-child(2) { animation-delay: .1s; } .sm-week li:nth-child(3) { animation-delay: .2s; } .sm-week li:nth-child(4) { animation-delay: .3s; }
	.sm-week li:nth-child(5) { animation-delay: .4s; } .sm-week li:nth-child(6) { animation-delay: .5s; }
	.sm-chip { animation: sm-glow 6s ease-in-out infinite; }
	.sm-week li:nth-child(2) .sm-chip { animation-delay: 1s; } .sm-week li:nth-child(3) .sm-chip { animation-delay: 2s; } .sm-week li:nth-child(4) .sm-chip { animation-delay: 3s; }
	.sm-week li:nth-child(5) .sm-chip { animation-delay: 4s; } .sm-week li:nth-child(6) .sm-chip { animation-delay: 5s; }
}
@keyframes sm-glow { 0%, 12%, 100% { box-shadow: none; } 5% { box-shadow: 0 0 0 3px var(--sv-card), 0 0 0 5px var(--sv-signal); } }

/* ---------- Template kit (ink section) ---------- */
.sm-kit__tiles { display: grid; grid-template-columns: 1fr 1fr .72fr; gap: .75rem; align-items: end; }
.sm-kit__tiles li {
	position: relative; display: grid; align-items: end; padding: .6rem; aspect-ratio: 1; border-radius: var(--sv-radius);
	font-size: .8125rem; font-weight: 700; color: var(--sv-ink); overflow: hidden;
}
.sm-kit__post { background: var(--sv-accent); }
.sm-kit__post::before { content: ""; position: absolute; left: 24%; top: 12%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--sv-signal); }
.sm-kit__carousel { background: var(--sv-signal-soft); }
.sm-kit__carousel::before { content: ""; position: absolute; inset: 14% 14% 34%; border-radius: 4px; background: var(--sv-card); box-shadow: -10px 6px 0 -2px rgba(255, 250, 248, .55); }
.sm-kit__carousel::after { content: ""; position: absolute; left: 50%; bottom: 28%; translate: -50% 0; width: 26px; height: 6px; background: radial-gradient(circle, var(--sv-ink) 2px, transparent 2.5px) 0 0 / 10px 6px repeat-x; }
.sm-kit__reel { aspect-ratio: 9 / 16; background: var(--sv-card); }
.sm-kit__reel::before { content: ""; position: absolute; left: 50%; top: 38%; translate: -40% -50%; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--sv-signal); }
.sm-kit__tiles li { position: relative; z-index: 0; }
.sm-kit__tiles li::before, .sm-kit__tiles li::after { z-index: -1; }
@media (prefers-reduced-motion: no-preference) {
	.sv-js .sm-kit:not(.is-in) .sm-kit__tiles li { opacity: 0; translate: 0 14px; }
	.sm-kit__tiles li { transition: opacity .5s var(--sv-ease), translate .5s var(--sv-ease); }
	.sm-kit__tiles li:nth-child(2) { transition-delay: .12s; } .sm-kit__tiles li:nth-child(3) { transition-delay: .24s; }
}

/* ---------- Profile feed (stages) ---------- */
.sm-phone__body { fill: var(--sv-ink); }
.sm-phone__notch { fill: var(--sv-ink-3); }
.sm-phone__avatar { fill: var(--sv-accent); }
.sm-phone__line { fill: var(--sv-on-ink-line); }
.sm-phone .sv-zone__track { fill: var(--sv-ink-2); stroke: var(--sv-on-ink-line); }
.sm-phone .sv-zone__bar { fill: var(--sv-signal); }
.sm-phone .sv-zone.is-pending .sv-zone__bar { opacity: 0; }
.sm-phone .sv-zone.is-pending .sv-zone__dot { fill: var(--sv-ink-2); stroke: var(--sv-on-ink-line); }
.sm-phone .sv-zone.is-pending .sv-zone__num { fill: var(--sv-on-ink-muted); }
.sm-phone .sv-zone__dot { fill: var(--sv-ink); }