/* ═══════════════════════════════════════════════════════════════════════
   Витрины портала: афиша мероприятий (index.php, event.php), кейсы
   (lk/cases.php), витрина проектов (lk/projects.php, lk/project.php).
   Подключается после admin.css и organizer-kit.css.
   1) значки РОБОСИТИ (.rci) — спрайт static/rc-icons.svg, readfile() в начало страницы;
   2) шапка-«герой» с плитками-итогами (.sx-hero, .sx-stat);
   3) фильтры-чипы (.sx-chip), обложки-заглушки (.sx-art), метки (.sx-pill),
      шкала срока (.sx-progress), аватар-инициалы (.sx-ava), медаль (.sx-medal),
      большая карточка (.sx-feature), заголовок раздела (.sx-sec).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Значки ── */
.rci{width:1.15em;height:1.15em;flex:0 0 auto;display:inline-block;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
.rci--16{width:16px;height:16px;}
.rci--20{width:20px;height:20px;}
.rci--24{width:24px;height:24px;}
/* подсказка (?) нашим значком вместо шрифтового */
.rc-hint .rci{width:20px;height:20px;color:#8a9099;--rci-fill:#eef0f3;vertical-align:-.25em;}
.rc-hint:hover .rci,.rc-hint:focus .rci{color:#E06020;--rci-fill:#FFE2CC;}

/* ── 2. Герой ── */
.sx-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 32px;align-items:center;padding:28px 32px;border-radius:20px;background:#fff;box-shadow:0 1.5px 7px rgba(0,0,0,.06);}
.sx-hero::before{content:"";position:absolute;z-index:-1;right:-120px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,117,56,.20),rgba(255,117,56,.07) 55%,rgba(255,117,56,0));}
.sx-hero::after{content:"";position:absolute;z-index:-1;inset:0 0 0 auto;width:55%;background-image:radial-gradient(rgba(224,96,32,.20) 1.2px,transparent 1.4px);background-size:16px 16px;-webkit-mask-image:linear-gradient(to left,#000 10%,transparent 90%);mask-image:linear-gradient(to left,#000 10%,transparent 90%);}
.sx-hero__main{display:flex;flex-direction:column;gap:14px;min-width:0;}
.sx-kicker{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 12px 6px 8px;border-radius:999px;background:#FFF2EC;color:#B84D18;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.sx-kicker .rci{width:18px;height:18px;--rci-fill:#fff;}
.sx-hero__title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sx-hero__title .ad-head__title{font-size:34px;letter-spacing:-.01em;}
.sx-hero__actions{display:flex;flex-wrap:wrap;gap:8px;}
.sx-hero__actions .ad-btn .rci{width:18px;height:18px;}
.sx-hero__actions .ad-btn--primary .rci{--rci-fill:rgba(255,255,255,.28);}

.sx-stats{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:10px;}
.sx-stats--4{grid-template-columns:repeat(4,minmax(130px,1fr));}
.sx-stat{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.88);border:1px solid #eef1ee;box-shadow:0 1px 3px rgba(0,0,0,.03);}
.sx-stat__ic{flex:0 0 42px;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#FFF2EC;color:#E06020;--rci-fill:#FFD6BF;}
.sx-stat__ic .rci{width:24px;height:24px;}
.sx-stat__v{display:block;font-size:22px;font-weight:700;line-height:1.1;color:#212121;white-space:nowrap;}
.sx-stat__l{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#6b7280;line-height:1.25;}
.sx-tone-green{background:#e7f6ec!important;color:#1d8a4a!important;--rci-fill:#bfe8cc;}
.sx-tone-blue{background:#eef4ff!important;color:#1f6bff!important;--rci-fill:#cddcff;}
.sx-tone-violet{background:#f3eefe!important;color:#6a46c9!important;--rci-fill:#ddd0fb;}
.sx-tone-amber{background:#fff4e0!important;color:#b77800!important;--rci-fill:#ffe0a3;}

/* ── 3. Чипы-фильтры ── */
.sx-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0;}
.sx-chips::-webkit-scrollbar{display:none;}
.sx-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border:1px solid #dfe3e8;border-radius:999px;background:#fff;font-family:inherit;font-size:13px;font-weight:600;color:#4b5260;white-space:nowrap;cursor:pointer;transition:border-color .12s,background .12s,color .12s;}
.sx-chip:hover{border-color:#FF7538;color:#B84D18;}
.sx-chip .rci{width:20px;height:20px;color:#8a9099;--rci-fill:#eef0f3;}
.sx-chip__n{min-width:22px;padding:1px 7px;border-radius:999px;background:#f1f2f4;color:#4b5260;font-size:11px;font-weight:700;text-align:center;}
.sx-chip--active{background:#FFF2EC;border-color:#FF7538;color:#B84D18;}
.sx-chip--active .rci{color:#E06020;--rci-fill:#FFD6BF;}
.sx-chip--active .sx-chip__n{background:#fff;color:#B84D18;}
.sx-chip__dot{width:10px;height:10px;border-radius:50%;background:var(--sx-dot,#FF7538);margin-left:4px;}

/* ── 4. Обложки-заглушки: мягкий градиент, кольца, точки и крупный значок ── */
.sx-art{position:absolute;inset:0;overflow:hidden;background:linear-gradient(135deg,var(--a1),var(--a2));color:var(--ai);}
.sx-art::before{content:"";position:absolute;left:-30%;bottom:-60%;width:90%;aspect-ratio:1;border-radius:50%;border:22px solid rgba(255,255,255,.35);}
.sx-art::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.55) 1.2px,transparent 1.4px);background-size:14px 14px;-webkit-mask-image:linear-gradient(to bottom left,#000,transparent 70%);mask-image:linear-gradient(to bottom left,#000,transparent 70%);}
.sx-art__ic{position:absolute;right:6%;bottom:8%;width:42%;max-width:120px;height:auto;aspect-ratio:1;opacity:.55;stroke-width:1.5;--rci-fill:rgba(255,255,255,.65);}
.sx-art__mono{position:absolute;left:18px;bottom:10px;font-size:64px;font-weight:800;line-height:1;color:rgba(255,255,255,.75);letter-spacing:-.04em;}
.sx-art--0{--a1:#FFE9DC;--a2:#FFC6A3;--ai:#E06020;}
.sx-art--1{--a1:#E6EFFF;--a2:#B9CEFF;--ai:#1f5fe0;}
.sx-art--2{--a1:#E3F6EA;--a2:#AEE3C2;--ai:#1d8a4a;}
.sx-art--3{--a1:#F1EAFE;--a2:#D2C2FA;--ai:#6a46c9;}
.sx-art--4{--a1:#FFF4D8;--a2:#FFD98A;--ai:#b77800;}
.sx-art--5{--a1:#DDF5F2;--a2:#A6E1DA;--ai:#0f857b;}

/* ── 5. Метки, шкала срока, аватары, медаль ── */
.sx-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(0,0,0,.10);font-size:12px;font-weight:700;color:#212121;white-space:nowrap;}
.sx-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sx-pill,#9aa3ad);}
.sx-pill--open{--sx-pill:#2e9e54;color:#1d6b3c;}
.sx-pill--soon{--sx-pill:#f59e0b;color:#8a4b00;}
.sx-pill--closed{--sx-pill:#9aa3ad;color:#4b5260;}
.sx-pill--hot{--sx-pill:#E06020;color:#B84D18;}

.sx-deadline{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:#f8f9fa;}
.sx-deadline__row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#6b7280;}
.sx-deadline__row b{color:#B84D18;font-size:13px;}
.sx-progress{height:6px;border-radius:999px;background:#e9ecef;overflow:hidden;}
.sx-progress > span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#FF9A6B,#E06020);}

.sx-ava{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;background:var(--av,#E06020);box-shadow:0 0 0 2px #fff;}
.sx-ava--0{--av:#E06020;} .sx-ava--1{--av:#1f6bff;} .sx-ava--2{--av:#1d8a4a;} .sx-ava--3{--av:#6a46c9;} .sx-ava--4{--av:#c47f00;} .sx-ava--5{--av:#0f857b;}
.sx-avas{display:flex;align-items:center;}
.sx-avas .sx-ava + .sx-ava{margin-left:-8px;}

.sx-medal{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.18),inset 0 0 0 3px rgba(255,255,255,.55);}
.sx-medal .rci{width:24px;height:24px;stroke-width:2;}
.sx-medal--gold{background:linear-gradient(135deg,#FFE58F,#F5B301);color:#7a4b00;--rci-fill:#FFF3C4;}
.sx-medal--silver{background:linear-gradient(135deg,#F3F5F8,#B6BFCC);color:#374151;--rci-fill:#fff;}
.sx-medal--bronze{background:linear-gradient(135deg,#F9D7B8,#D1844A);color:#6b3410;--rci-fill:#FBE6D3;}

/* ── 6. Большая карточка «главное сейчас» ── */
.sx-feature{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);border-radius:20px;background:#fff;box-shadow:0 1.5px 7px rgba(0,0,0,.06);overflow:hidden;}
.sx-feature__cover{position:relative;min-height:280px;display:block;background:#FFF2EC;text-decoration:none;}
.sx-feature__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.sx-feature__body{display:flex;flex-direction:column;gap:16px;padding:26px 30px;min-width:0;}
.sx-feature__kicker{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#B84D18;}
.sx-feature__kicker .rci{width:20px;height:20px;}
.sx-feature__title{margin:0;font-size:24px;font-weight:700;line-height:1.25;color:#212121;overflow-wrap:anywhere;}
.sx-feature__title a{color:inherit;text-decoration:none;}
.sx-feature__title a:hover{color:#B84D18;}
.sx-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;}
.sx-fact{display:flex;align-items:flex-start;gap:10px;min-width:0;font-size:14px;color:#212121;font-weight:600;overflow-wrap:anywhere;}
.sx-fact .rci{width:22px;height:22px;color:#E06020;margin-top:-1px;}
.sx-fact small{display:block;font-size:11px;font-weight:600;color:#8a9099;text-transform:uppercase;letter-spacing:.04em;}
.sx-feature__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;}

/* ── 7. Заголовок раздела ── */
.sx-sec{display:flex;align-items:center;gap:10px;margin-top:6px;}
.sx-sec__ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#FFF2EC;color:#E06020;--rci-fill:#FFD6BF;}
.sx-sec__ic .rci{width:22px;height:22px;}
.sx-sec h2{margin:0;font-size:19px;font-weight:700;color:#212121;}

/* Картинка обложки: показывается только целиком, пока грузится — мерцающая заглушка.
   Классы is-loaded / is-done ставит static/showcase-kit.js. !important — потому что
   общие стили сайта задают картинкам height:auto и max-width. */
.sx-media{position:absolute;inset:0;overflow:hidden;background:#eef0f3;}
.sx-media::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 70%);background-size:220% 100%;animation:sx-shimmer 1.3s linear infinite;}
.sx-media.is-done{background:transparent;}
.sx-media.is-done::before,.sx-media.is-failed::before{display:none;}
img.sx-img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:cover!important;opacity:0;transition:opacity .35s ease;}
img.sx-img--contain{object-fit:contain!important;}
img.sx-img.is-loaded{opacity:1;}
@keyframes sx-shimmer{from{background-position:120% 0;}to{background-position:-120% 0;}}
@media (prefers-reduced-motion:reduce){.sx-media::before{animation:none;}img.sx-img{transition:none;}}

/* Ровные ряды карточек: заголовок и описание — в заданное число строк */
.sx-clamp-2,.sx-clamp-3{display:-webkit-box!important;-webkit-box-orient:vertical;overflow:hidden;}
.sx-clamp-2{-webkit-line-clamp:2;}
.sx-clamp-3{-webkit-line-clamp:3;}

/* загрузка — своё колесо вместо шрифтового значка */
.sx-spin{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid #FFD6BF;border-top-color:#E06020;vertical-align:-.2em;animation:sx-spin .8s linear infinite;}
@keyframes sx-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.sx-spin{animation-duration:2.4s;}}

/* значки в строках карточек и кнопках */
.sx-meta-ic{width:17px;height:17px;color:#E06020;--rci-fill:#FFE2CC;}
.ad-btn .rci{width:18px;height:18px;}
.ad-search .rci{width:20px;height:20px;color:#8a9099;--rci-fill:#eef0f3;}

@media (max-width:1100px){
  .sx-hero{grid-template-columns:minmax(0,1fr);}
  .sx-stats--4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:991px){
  .sx-feature{grid-template-columns:minmax(0,1fr);}
  .sx-feature__cover{min-height:200px;}
}
@media (max-width:767px){
  .sx-hero{padding:20px 16px;gap:18px;border-radius:16px;}
  .sx-hero__title .ad-head__title{font-size:26px;}
  .sx-hero::after{width:100%;}
  .sx-stats,.sx-stats--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .sx-stat{padding:10px;gap:10px;}
  .sx-stat__ic{flex-basis:36px;width:36px;height:36px;}
  .sx-stat__ic .rci{width:20px;height:20px;}
  .sx-stat__v{font-size:18px;}
  .sx-feature__body{padding:18px 16px;}
  .sx-feature__title{font-size:20px;}
  .sx-facts{grid-template-columns:minmax(0,1fr);}
  .sx-feature__actions > *{flex:1 1 auto;}
}