/* ============================================================
   „Канали за позитивни новини“: слънце от линии изгрява над хоризонта,
   телефон с профила (лентата тече сама) и пост от Facebook до него.
   --gn: цветът на слънцето и сърцето (полето „Цвят“; иначе цветът на текста).
   ============================================================ */

.pfx.gn { position: relative; padding-block: var(--space, clamp(96px, 13vh, 180px)); overflow: clip; --gn: currentColor; }
.pfx.gn-light { background: #fff; color: var(--ink, #16181B); }
.pfx.gn-dark { background: #0A0A0A; color: #F2F0EB; }
.pfx .gn-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.pfx .gn-art { position: relative; aspect-ratio: 1 / 1.08; }
[data-js] .pfx .gn-art[data-rv='gn'] { opacity: 1; transform: none; }
.pfx .gn-sunart { position: absolute; left: -8%; bottom: 4%; display: block; width: 116%; max-width: none; height: auto; overflow: visible; opacity: .7; }
.pfx .gn-sunart path { fill: none; stroke: var(--gn); stroke-width: calc(1.3 * var(--u, 1)); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pfx .gn-horizon { stroke-opacity: .45; transition: stroke-dashoffset 1.6s var(--ease-io); }
.pfx .gn-sun { transform-box: view-box; transform: translateY(46px); transition: transform 2.4s var(--ease-out) .5s; }
.pfx .gn-disc { transition: stroke-dashoffset 2s var(--ease-io) .6s; }
.pfx .gn-ray { transition: stroke-dashoffset 1.2s var(--ease-out) calc(1.4s + var(--i) * 90ms); }
.pfx .gn-art[data-in] .gn-sunart path { stroke-dashoffset: 0; }
.pfx .gn-art[data-in] .gn-sun { transform: none; animation: gn-breathe 7s ease-in-out 3.5s infinite alternate; }
@keyframes gn-breathe { from { transform: none; } to { transform: translateY(-5px); } }
.pfx .gn-copy > * + * { margin-top: 22px; }
.pfx .gn-t { font-size: clamp(38px, 5.4vw, 92px); line-height: 1; letter-spacing: -.05em; }
.pfx .gn-t .thin { font-weight: 200; }
.pfx .gn-t b { font-weight: 800; }
.pfx .gn-text { max-width: 34em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; opacity: .7; }

/* фийдът: телефон с профила и пост от Facebook до него */
.pfx .gn-feed { position: absolute; inset: 0; }
.pfx .gn-phone { position: absolute; left: 3%; top: 1%; width: 47%; aspect-ratio: 9 / 19; padding: 1.6%; border-radius: 13% / 6.2%; background: #1A1A1A; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -34px rgba(0, 0, 0, .85); opacity: 0; transform: translateY(12%) rotate(-5deg); transition: transform 1.5s var(--ease-out), opacity 1s; }
.pfx .gn-art[data-in] .gn-phone { opacity: 1; transform: rotate(-5deg); animation: gn-sway 9s ease-in-out 1.6s infinite alternate; }
@keyframes gn-sway { from { transform: rotate(-5deg); } to { transform: translateY(-2%) rotate(-3.5deg); } }
.pfx .gn-screen { position: relative; container-type: inline-size; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 11% / 5.3%; background: #fff; color: #111; }
.pfx .gn-screen::before { content: ''; position: absolute; left: 50%; top: 3cqi; z-index: 2; width: 26cqi; height: 7cqi; border-radius: 9cqi; background: #1A1A1A; translate: -50% 0; }
.pfx .gn-prof { display: flex; align-items: center; gap: 4cqi; padding: 15cqi 5cqi 4cqi; }
.pfx .gn-ring { flex: none; display: grid; width: 21cqi; height: 21cqi; padding: 1.4cqi; border-radius: 50%; box-shadow: inset 0 0 0 .8cqi #22C69A; }
.pfx .gn-ring .gn-badge { width: 100%; height: 100%; }
.pfx .gn-who { min-width: 0; line-height: 1.3; }
.pfx .gn-who b { display: block; font-size: 5.2cqi; font-weight: 700; }
.pfx .gn-who span { display: block; font-size: 3.9cqi; opacity: .6; }
.pfx .gn-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2cqi; border-top: 1px solid #ECECEC; }
.pfx .gn-tabs i { height: 7cqi; }
.pfx .gn-tabs i:first-child { box-shadow: inset 0 .7cqi 0 #111; }
.pfx .gn-scroll { position: relative; flex: 1; overflow: hidden; }
.pfx .gn-roll { animation: gn-roll 42s linear infinite paused; }
.pfx .gn-art[data-in] .gn-roll { animation-play-state: running; }
@keyframes gn-roll { to { transform: translateY(-50%); } }
.pfx .gn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6cqi; padding-bottom: .6cqi; }
.pfx .gn-like { position: absolute; right: -7%; top: 30%; display: grid; place-items: center; width: 15%; aspect-ratio: 1; border-radius: 50%; background: var(--gn); color: #fff; font-size: clamp(15px, 1.6vw, 24px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); opacity: 0; }
.pfx .gn-art[data-in] .gn-like { animation: gn-like 5.5s ease-in-out 2.6s infinite; }
@keyframes gn-like { 0% { opacity: 0; transform: scale(0); } 6% { opacity: 1; transform: scale(1.18); } 11%, 44% { opacity: 1; transform: scale(1); } 58%, 100% { opacity: 0; transform: translateY(-70%) scale(.8); } }

/* постът, нарисуван в стила на канала: етикет, икона от линии и бяла кутия със заглавие */
.pfx .gn-post { position: relative; container-type: inline-size; aspect-ratio: 4 / 5; overflow: hidden; background: var(--pb); color: #fff; }
.pfx .gn-post.is-sq { aspect-ratio: 1; border-radius: 1.6cqi; }
.pfx .gn-post.is-shot img, #ajax-content-wrap .pfx .gn-post.is-shot img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; } /* #ajax-content-wrap: Salient слага width: auto на снимки без srcset */
.pfx .gn-mint { --pb: #22C69A; }
.pfx .gn-deep { --pb: #0E4F45; }
.pfx .gn-sand { --pb: #EEE8DA; --pi: #0E4F45; }
.pfx .gn-badge circle:first-child { fill: #22C69A; stroke: #fff; stroke-width: 1.4; }
.pfx .gn-badge-b { fill: #fff; }
.pfx .gn-badge-e { fill: #22C69A; }
.pfx .gn-badge-s { fill: none; stroke: #22C69A; stroke-width: 2; stroke-linecap: round; }
.pfx .gn-post > .gn-badge { position: absolute; left: 6cqi; top: 6cqi; width: 16cqi; height: 16cqi; }
.pfx .gn-tag { position: absolute; left: 25cqi; top: 10.5cqi; padding: 2cqi 3cqi; background: #22C69A; font-size: 5.6cqi; font-weight: 800; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.pfx .gn-mint .gn-tag { background: #0E4F45; }
.pfx .gn-ic { position: absolute; left: 50%; top: 40%; width: 32cqi; translate: -50% -50%; fill: none; stroke: var(--pi, #fff); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.pfx .gn-txt { position: absolute; left: 6cqi; right: 6cqi; bottom: 7cqi; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6cqi; }
.pfx .gn-head { display: -webkit-box; overflow: hidden; padding: 2.6cqi 3.4cqi; background: #fff; color: #12A884; font-size: 7.2cqi; font-weight: 800; line-height: 1.08; letter-spacing: -.01em; text-transform: uppercase; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.pfx .gn-sand .gn-head { background: #0E4F45; color: #fff; }
.pfx .gn-date { padding: 1.8cqi 3cqi; background: #0E4F45; font-size: 5cqi; font-weight: 700; line-height: 1.2; }
.pfx .gn-fb { position: absolute; right: 0; top: 33%; width: 46%; container-type: inline-size; padding: 2.1%; border-radius: clamp(10px, 1.1vw, 16px); background: #fff; color: #1C1E21; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .8); opacity: 0; transform: translate(16%, 12%) rotate(9deg); transition: transform 1.6s var(--ease-out) .5s, opacity 1s .5s; }
.pfx .gn-art[data-in] .gn-fb { opacity: 1; transform: rotate(4deg); animation: gn-float 6.5s ease-in-out 2.2s infinite alternate; }
@keyframes gn-float { from { transform: rotate(4deg); } to { transform: translateY(-4%) rotate(2.5deg); } }
.pfx .gn-fb-top { display: flex; align-items: center; gap: 3cqi; margin-bottom: 3.5cqi; line-height: 1.3; }
.pfx .gn-fb-top .gn-badge { flex: none; width: 13cqi; height: 13cqi; }
.pfx .gn-fb-top b { display: block; font-size: 5cqi; font-weight: 700; }
.pfx .gn-fb-top small { font-size: 4cqi; opacity: .55; }
/* цветът е от картата: Salient прави всеки p в тъмен ред бял (.light p), а картата е бяла */
.pfx .gn-fb-txt { margin: 0 0 3.5cqi; color: inherit; font-size: 4.6cqi; line-height: 1.4; }
.pfx .gn-fb-act { display: flex; justify-content: space-between; margin-top: 3.5cqi; padding-top: 3cqi; border-top: 1px solid #E4E6EB; font-size: 4cqi; font-weight: 600; opacity: .55; }

/* два канала, всеки на свой ред: името вляво, двете връзки една под друга вдясно */
.pfx .gn-chans { display: flex; flex-direction: column; }
.pfx .gn-chan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 16px 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.pfx .gn-chan:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.pfx .gn-handle { font-size: clamp(17px, 1.4vw, 21px); font-weight: 700; letter-spacing: -.01em; }
.pfx .gn-links { display: grid; gap: 10px; }
.pfx .gn-links a { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.2px color-mix(in srgb, currentColor 35%, transparent); font-size: 15px; line-height: 1.4; transition: background-color .35s, color .35s, box-shadow .35s; }
.pfx .gn-links b { font-weight: 800; }
.pfx .gn-links i { font-style: normal; }
.pfx .gn-links a:hover { background: var(--gn); box-shadow: none; color: #fff; }
.pfx.gn-light .gn-links a:hover { color: #fff; background: var(--ink, #16181B); }

@media (max-width: 800px) { .pfx .gn-in { grid-template-columns: minmax(0, 1fr); } .pfx .gn-art { width: 100%; max-width: 520px; } .pfx .gn-like { right: -3%; } }
@media (prefers-reduced-motion: reduce) {
  .pfx .gn-art[data-in] .gn-sun, .pfx .gn-art[data-in] .gn-phone, .pfx .gn-art[data-in] .gn-fb, .pfx .gn-art[data-in] .gn-like { animation: none; }
  .pfx .gn-roll { animation: none; }
  .pfx .gn-sunart path, .pfx .gn-sun, .pfx .gn-phone, .pfx .gn-fb { transition: none; }
}

/* Salient дава на всяка снимка в ред на WPBakery „.row .col img { margin-bottom: 15px }“: тук не */
#ajax-content-wrap .pfx.gn img { margin-bottom: 0; }
