/* Рекламные плашки Trely — четыре формата на все продукты.
Собраны из блоков главной trely.io, свои здесь только размеры плашек:
ads-strip — полоса, финальный призыв .entry, собранный в строку;
ads-square — квадрат, карточка продукта .product в пропорции 1:1;
ads-tile — карточка, пропорция плитки направления .route-card 2:3;
большая плашка живёт в соседнем пакете promo-block (.trb).
Общее у всех: песочная плашка --tr-tag, наш завиток с главной
в тёмном песочном (art/vector-swirl.2b4afa1b.webp) и белая кнопка.
Утверждено руководителем на стенде trely.io/dev.reklama.
Имена классов ads-* намеренно без слов promo и ad: блокировщики
рекламы прячут узлы с такими словами в классе, вместе с нашими
собственными продуктами. По той же причине картинки лежат в art/. */
/* ── общее ── */
.ads{position:relative;overflow:hidden;border-radius:var(--r-xl,32px);
background:var(--tr-tag,#EDE4D1);box-shadow:var(--sh-soft,0 4px 24px rgba(39,60,63,.06));
font-family:var(--ff,'Inter Tight',system-ui,sans-serif);color:var(--tr-ink,#0F1014);
text-decoration:none;display:flex;flex-direction:column}
.ads::before,.ads::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.ads > :not(img){position:relative;z-index:1}
.ads img{position:absolute;pointer-events:none;user-select:none;z-index:1}
.ads-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
min-height:48px;padding:0 24px;border-radius:var(--r-pill,999px);background:#fff;
color:var(--tr-ink,#0F1014);font-size:15px;font-weight:600;
box-shadow:var(--sh-btn,0 2px 8px rgba(15,16,20,.10));transition:background .15s}
.ads:hover .ads-btn{background:var(--tr-cream,#F7F6F4)}
.ads:focus-visible{outline:2px solid var(--tr-gold,#C6A064);outline-offset:3px}
/* Метка платного размещения. У своих продуктов её нет. */
.ads-label{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.06em;
text-transform:uppercase;color:var(--tr-gray-40,#A0A4A6);margin-bottom:8px}
/* ── 1. Полоса: под шапкой или перед подвалом ── */
.ads-strip{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;
min-height:76px;padding:16px 24px 16px 62px}
.ads-strip::before{left:0;right:auto;top:-150%;bottom:-150%;width:46%;
transform:scaleX(-1) scaleY(-1) rotate(10deg);transform-origin:center;
background:url("art/vector-swirl.2b4afa1b.webp") right calc(100% - 93px)/auto 76% no-repeat}
.ads-strip::after{left:auto;right:0;top:-150%;bottom:-150%;width:46%;
transform:rotate(10deg);transform-origin:center;
background:url("art/vector-swirl.2b4afa1b.webp") right calc(100% - 108px)/auto 76% no-repeat}
.ads-strip-title{display:block;margin:0;font-size:20px;font-weight:500;line-height:1.25;min-width:0}
/* ── 2. Квадрат: в узкой колонке и в сетках ── */
.ads-square{aspect-ratio:1/1;padding:28px;justify-content:space-between}
.ads-square::before{background:url("art/vector-swirl.2b4afa1b.webp") right -6% bottom -12%/101% auto no-repeat}
.ads-square-title{display:block;margin:0;font-size:clamp(21px,2.3vw,27px);font-weight:500;line-height:1.18;max-width:84%}
.ads-square img{right:-14px;bottom:0;height:68%;width:auto}
.ads-square .ads-btn{width:100%;min-height:52px;position:relative;z-index:2}
/* ── 3. Карточка: пропорция плитки направления, 226×339 в ряду из пяти ── */
.ads-tile{aspect-ratio:2/3;padding:34px 20px 76px}
.ads-tile::before{background:url("art/vector-swirl.2b4afa1b.webp") right -6% bottom -12%/101% auto no-repeat}
.ads-tile-title{display:block;margin:0 0 10px;font-size:24px;font-weight:500;line-height:1.2;max-width:86%}
.ads-tile-text{display:block;margin:0;font-size:15px;line-height:1.5;color:var(--tr-gray-60,#6B6F71);max-width:86%}
.ads-tile img{right:-10px;bottom:0;height:52%;width:auto}
/* Белая плашка снизу — та же, что у плитки направления. */
.ads-tile .ads-bar{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;
border-radius:var(--r-md,16px);padding:11px 11px 11px 16px;font-size:15px;font-weight:500;
letter-spacing:-0.01em;box-shadow:var(--sh-btn,0 2px 8px rgba(15,16,20,.10))}
.ads-tile .ads-bar::after{content:"";flex:0 0 38px;width:34px;height:34px;border-radius:50%;
background:var(--tr-tag,#EDE4D1) url("data:image/svg+xml;utf8,") center/15px no-repeat;
transition:background-color .2s,transform .2s}
.ads-tile:hover .ads-bar::after{background-color:var(--tr-gold,#C6A064);
background-image:url("data:image/svg+xml;utf8,");
transform:translate(2px,-2px)}
/* ── 4. Врезка в колонке: картинка слева, текст и кнопка справа ──
Для мест внутри статьи, где полосы мало, а большая плашка не влезает
по ширине колонки. Покрой — тот же, что у большой плашки promo-block,
только в одну колонку текста и с маленькой картинкой. */
.ads-promo{flex-direction:row;align-items:center;gap:28px;padding:32px 36px}
.ads-promo::before{background:url("art/vector-swirl.2b4afa1b.webp") right -6% bottom 0/60% auto no-repeat}
.ads-promo img{position:static;width:110px;height:110px;flex-shrink:0}
.ads-promo-body{display:block;flex:1;min-width:0}
.ads-promo-title{display:block;margin:0 0 8px;font-size:21px;font-weight:500;line-height:1.3;color:var(--tr-ink,#0F1014)}
.ads-promo-text{display:block;margin:0 0 18px;font-size:15px;line-height:1.55;color:var(--tr-gray-60,#6B6F71)}
/* ── узкие экраны ── */
@media (max-width:760px){
.ads-strip{flex-direction:column;align-items:stretch;padding:18px 20px;gap:12px}
.ads-strip .ads-btn{width:100%}
.ads-strip-title{font-size:18px}
}
@media (max-width:760px){
.ads-promo{flex-direction:column;text-align:center;padding:28px;gap:18px}
.ads-promo img{width:96px;height:96px}
.ads-promo .ads-btn{width:100%}
}
@media (max-width:520px){
.ads-square{padding:22px}
.ads-square-title{max-width:90%}
.ads-tile{padding:24px 18px 72px}
}