/*
 * Work Promotion — lightweight anonymous public UI.
 *
 * Loaded only for anonymous public placement contexts.
 * Full landing / quick checkout / dashboard / private stats /
 * protected preview UI remains in work-promotion.css.
 */

/* Promotion UI cache-buster: 2026-08-04. */
:root{
  --smysly-promo-accent:#6941c6;
  --smysly-promo-accent-dark:#5330aa;
  --smysly-promo-soft:#f8f5ff;
  --smysly-promo-border:#ded4f6;
  --smysly-promo-text:#17151f;
  --smysly-promo-muted:#68717d;
}

.smysly-promotion-card{
  position:relative;
  border:1px solid var(--smysly-promo-border);
  background:linear-gradient(145deg,#fff 0%,#fff 72%,#faf8ff 100%);
  box-shadow:0 7px 22px rgba(78,51,132,.12);
}
.smysly-promotion-card:hover{
  box-shadow:0 13px 32px rgba(78,51,132,.18);
}
.smysly-promotion-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:25px;
  margin:12px 14px 0;
  padding:4px 9px;
  border:1px solid rgba(105,65,198,.22);
  border-radius:999px;
  color:#5833b1;
  background:rgba(249,246,255,.96);
  box-shadow:0 3px 10px rgba(49,29,87,.12);
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:.02em;
}
.smysly-promotion-card>.work-card__link{margin-top:0}

.smysly-promotion-block{
  grid-column:1 / -1;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  margin:30px 0;
  padding:22px;
  border:1px solid var(--smysly-promo-border);
  border-radius:20px;
  background:linear-gradient(135deg,#f9f6ff 0%,#fff 54%,#fbfcff 100%);
  break-inside:avoid;
}
.art-grid--masonry .smysly-promotion-block{
  column-span:all;
  display:block;
  box-sizing:border-box;
}
.smysly-promotion-block__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 17px;
}
.smysly-promotion-block__head h2{
  margin:0;
  color:var(--smysly-promo-text);
  font-size:24px;
  line-height:1.2;
}
.smysly-promotion-block__head>a{
  flex:0 0 auto;
  color:var(--smysly-promo-accent-dark);
  font-size:13px;
  line-height:1.3;
  font-weight:700;
  text-decoration:none;
}
.smysly-promotion-block__head>a:hover{text-decoration:underline}
.smysly-promotion-block__grid{
  display:grid;
  /* The shelf itself always remains the full-width, four-place block agreed
     for listings. With fewer live campaigns the unused places stay empty;
     a single paid card must not collapse the entire block to card width. */
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.smysly-promotion-block__grid>.work-card{min-width:0;height:100%}
.smysly-promotion-block--home{margin:34px 0 42px}
.smysly-promotion-block--listing{margin:18px 0 22px}
.smysly-promotion-inline-slot{display:none!important}

.smysly-promotion-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 13px;
  border:1px solid var(--smysly-promo-accent);
  border-radius:10px;
  color:var(--smysly-promo-accent-dark);
  background:#fff;
  text-decoration:none;
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  transition:.2s ease;
}
.smysly-promotion-cta:hover{
  color:#fff;
  background:var(--smysly-promo-accent);
}
.smysly-promotion-cta--card{
  width:calc(100% - 24px);
  margin:0 12px 12px;
  box-sizing:border-box;
}
.work-head__actions>.smysly-promotion-cta{margin:0 6px}
.smysly-promotion-thanks{
  margin-top:18px;
  padding:22px;
  border:1px solid var(--smysly-promo-border);
  border-radius:16px;
  background:linear-gradient(135deg,var(--smysly-promo-soft),#fff);
}
.smysly-promotion-thanks>span{display:block;margin-bottom:6px;color:var(--smysly-promo-accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.smysly-promotion-thanks h2{margin:0 0 8px;font-size:20px}
.smysly-promotion-thanks p{margin:0 0 14px;color:var(--smysly-promo-muted);font-size:14px;line-height:1.55}

@media (max-width:1000px){
.smysly-promotion-block__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
.smysly-promotion-block{padding:17px;margin:24px 0;border-radius:17px;overflow:hidden}
  /* На узких контейнерах заголовок и служебная ссылка не должны конкурировать
     за одну строку: раньше ссылка выталкивалась вправо и обрезалась overflow:hidden. */
  .smysly-promotion-block__head{align-items:flex-start;flex-wrap:wrap;gap:4px 10px}
  .smysly-promotion-block__head h2{flex:1 1 100%;min-width:0;font-size:21px}
  .smysly-promotion-block__head>a{flex:0 1 auto;max-width:100%;text-align:left;overflow-wrap:anywhere}
  .smysly-promotion-block__grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    margin-right:-17px;
    padding:2px 17px 12px 1px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .smysly-promotion-block__grid::-webkit-scrollbar{display:none}
  /* Карточка раньше имела ширину от viewport (до 270px), хотя внутренний
     контейнер блока на iPhone может быть уже. Из-за этого правая часть меты
     (в частности дата) физически оказывалась за границей блока. */
  .smysly-promotion-block__grid>.work-card{
    flex:0 0 calc(100% - 18px);
    width:calc(100% - 18px);
    max-width:270px;
    min-width:0;
    scroll-snap-align:start;
  }
  .smysly-promotion-card .work-card__content{min-width:0}
  .smysly-promotion-card .work-card__meta{min-width:0}
  .smysly-promotion-card .work-card__author{flex:1 1 auto;min-width:0;overflow:hidden}
  .smysly-promotion-card .work-card__author-name{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .smysly-promotion-card .work-card__date{flex:0 0 auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}