/* Раздел «Площадки РСЯ» (build_ploshchadki.py): вердикт, паспорт площадки, скриншоты
   рекламы в телефонной рамке с метками-пинами, карточки площадок в оглавлении и страница
   «Настройка Яндекс Директа». Подключается после voprosy.css — берёт его переменные. */

/* ---------- вердикт ---------- */
.pl-verdict{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;
  border-radius:24px;padding:clamp(18px,2.4vw,26px);margin:0 0 clamp(22px,3vw,30px);border:1px solid var(--vq-line);background:#fff;
  box-shadow:0 22px 44px -36px rgba(30,52,90,.6);}
.pl-verdict .pl-vmark{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;font:700 30px/1 var(--ui);}
.pl-verdict b.pl-vt{display:block;font:700 clamp(20px,2.2vw,25px)/1.2 var(--ui);letter-spacing:-.02em;color:var(--vq-ink);}
.pl-verdict p{margin:6px 0 0 !important;font:400 16px/1.55 var(--ui) !important;color:var(--vq-ink2);}
.pl-verdict small{display:block;font:600 12px/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--vq-mute);margin-bottom:6px;}
.pl-verdict.t-warn{background:linear-gradient(135deg,#FFFBE3,#FFF 60%);border-color:#F3E2A0;}
.pl-verdict.t-warn .pl-vmark{background:var(--vq-y);color:#5A4700;}
.pl-verdict.t-ok{background:linear-gradient(135deg,#EAF7EF,#FFF 60%);border-color:#BFE3CC;}
.pl-verdict.t-ok .pl-vmark{background:#2E8B57;color:#fff;}
.pl-verdict.t-bad{background:linear-gradient(135deg,#FDEDEC,#FFF 60%);border-color:#F2C4C0;}
.pl-verdict.t-bad .pl-vmark{background:#C8372D;color:#fff;}

/* ---------- паспорт площадки ---------- */
.pl-pass{margin:clamp(22px,3vw,30px) 0;background:#fff;border:1px solid var(--vq-line);border-radius:22px;overflow:hidden;
  box-shadow:0 18px 34px -30px rgba(42,58,77,.5);}
.pl-pass .vq-bt{padding:18px 20px 0;}
.pl-pass dl{margin:0;display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);}
.pl-pass dt,.pl-pass dd{margin:0;padding:12px 20px;border-top:1px solid var(--vq-line);font:500 15px/1.45 var(--ui);}
.pl-pass dt{color:var(--vq-mute);}
.pl-pass dd{color:var(--vq-ink);}
.pl-pass code,.pl-code{font:600 14px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--vq-tint);color:var(--vq-blue-d);
  padding:2px 7px;border-radius:7px;white-space:nowrap;}

/* ---------- скриншоты в телефонной рамке ---------- */
.pl-shots{margin:clamp(24px,3vw,36px) 0;}
.pl-shots .pl-row{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(var(--n,3),minmax(0,1fr));align-items:start;}
.pl-shots.n2 .pl-row{--n:2}.pl-shots.n1 .pl-row{--n:1;max-width:330px;margin:0 auto;}
.pl-shot{margin:0;}
.pl-phone{position:relative;border-radius:30px;padding:7px;background:#17181A;
  box-shadow:0 30px 50px -34px rgba(20,30,50,.75),inset 0 0 0 1px rgba(255,255,255,.08);}
.bl-body .pl-phone img{display:block;width:100%;height:auto;aspect-ratio:540/1200;object-fit:contain;border-radius:24px;background:#F2F4F7;}
.pl-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;background:var(--vq-y);color:#2B2300;font:700 15px/1 var(--ui);
  box-shadow:0 0 0 4px rgba(255,226,74,.35),0 8px 16px -6px rgba(0,0,0,.55);}
.pl-box{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:14px;
  border:3px solid var(--vq-y);box-shadow:0 0 0 999px rgba(15,18,24,0);pointer-events:none;}
.pl-shot figcaption{margin-top:12px;font:400 14px/1.5 var(--ui);color:var(--vq-ink2);}
.pl-shot figcaption b{display:block;color:var(--vq-ink);font-weight:600;margin-bottom:2px;}
.pl-legend{list-style:none;margin:16px 0 0 !important;padding:0 !important;display:grid;gap:8px;}
.pl-legend li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font:400 15px/1.5 var(--ui);color:var(--vq-ink2);padding:0 !important;}
.pl-legend li::before{display:none !important;}
.pl-legend li span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--vq-y);color:#2B2300;font:700 13px/1 var(--ui);margin-top:1px;}
.pl-shots .vq-src{text-align:left;}

/* ---------- таблица (названия блоков, рекламодатели) ---------- */
.pl-table{margin:clamp(22px,3vw,30px) 0 0;overflow-x:auto;border:1px solid var(--vq-line);border-radius:20px;background:#fff;}
.pl-table table{width:100%;border-collapse:collapse;margin:0 !important;font:400 14.5px/1.45 var(--ui);}
.pl-table th,.pl-table td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--vq-line);vertical-align:top;}
.pl-table th{font:600 12.5px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--vq-mute);background:#F7FAFD;}
.pl-table tr:last-child td{border-bottom:0;}

/* ---------- оглавление площадок ---------- */
.pl-legend-v{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(20px,3vw,28px) 0;}
.pl-legend-v div{border-radius:18px;padding:14px 16px;border:1px solid var(--vq-line);background:#fff;font:400 14px/1.45 var(--ui);color:var(--vq-ink2);}
.pl-legend-v b{display:flex;align-items:center;gap:8px;color:var(--vq-ink);font:600 15px/1.3 var(--ui);margin-bottom:4px;}
.pl-dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:0 0 auto;}
.pl-dot.t-ok{background:#2E8B57}.pl-dot.t-warn{background:#F2C514}.pl-dot.t-bad{background:#C8372D}
.pl-search{display:flex;gap:10px;margin:8px 0 18px;}
.pl-search input{flex:1;min-width:0;font:500 16px/1.2 var(--ui);padding:14px 18px;border-radius:999px;border:1px solid #CFDDEE;background:#fff;color:var(--vq-ink);}
.pl-search input:focus{outline:2px solid var(--vq-blue-l);outline-offset:1px;}
.pl-cards{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));}
.pl-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;text-decoration:none !important;color:inherit !important;
  background:#fff;border:1px solid var(--vq-line);border-radius:22px;padding:14px;transition:transform .35s var(--vq-ease),box-shadow .35s var(--vq-ease);}
.pl-card:hover{transform:translateY(-3px);box-shadow:0 24px 40px -30px rgba(42,58,77,.6);}
.bl-body .pl-card img{width:96px;height:auto;aspect-ratio:96/128;object-fit:cover;object-position:top;border-radius:14px;background:#F2F4F7;}
.pl-card code{font:600 13px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--vq-blue-d);}
.pl-card h3{margin:4px 0 6px !important;font:700 18px/1.25 var(--ui) !important;color:var(--vq-ink);}
.pl-card p{margin:0 !important;font:400 14px/1.45 var(--ui) !important;color:var(--vq-ink2);}
.pl-card .pl-tag{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:600 12.5px/1 var(--ui);color:var(--vq-ink);
  background:#F4F6F9;border-radius:999px;padding:6px 10px;}
.pl-card.is-soon{opacity:.6;pointer-events:none;}
.pl-empty{display:none;font:400 15px/1.5 var(--ui);color:var(--vq-mute);}

/* ---------- страница услуги ---------- */
.pl-offer{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin:clamp(22px,3vw,30px) 0;}
.pl-offer div{background:#fff;border:1px solid var(--vq-line);border-radius:22px;padding:18px 18px 16px;box-shadow:0 18px 34px -30px rgba(42,58,77,.5);}
.pl-offer b{display:block;font:700 17px/1.3 var(--ui);color:var(--vq-ink);margin-bottom:6px;}
.pl-offer p{margin:0 !important;font:400 15px/1.5 var(--ui) !important;color:var(--vq-ink2);}
.pl-offer i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--vq-tint);color:var(--vq-blue-d);
  font:700 17px/1 var(--ui);font-style:normal;margin-bottom:12px;}
.pl-offer div:first-child{background:var(--vq-g);border-color:var(--vq-g);}
.pl-offer div:first-child b{color:#fff}.pl-offer div:first-child p{color:rgba(255,255,255,.8)}
.pl-offer div:first-child i{background:var(--vq-y);color:#2B2300;}

@media (max-width:760px){
  .pl-shots .pl-row{--n:2 !important;}
  .pl-shots.n1 .pl-row{--n:1 !important;}
  .pl-legend-v,.pl-cards,.pl-offer{grid-template-columns:minmax(0,1fr);}
  .pl-pass dl{grid-template-columns:minmax(0,1fr);}
  .pl-pass dd{border-top:0;padding-top:0;}
  .pl-verdict{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:420px){
  .pl-shot figcaption{font-size:13px;}
  .pl-pin{width:24px;height:24px;font-size:13px;}
}

/* ---------- вырезки рекламных плиток ---------- */
.pl-tiles{margin:clamp(22px,3vw,32px) 0;}
.pl-trow{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));}
.pl-trow figure{margin:0;}
.bl-body .pl-trow img{display:block;width:100%;height:auto;aspect-ratio:360/637;object-fit:cover;border-radius:18px;background:#F2F4F7;box-shadow:0 18px 30px -24px rgba(20,30,50,.6);}
.pl-trow figcaption{margin-top:8px;font:500 13px/1.4 var(--ui);color:var(--vq-ink2);}
@media (max-width:760px){.pl-trow{grid-template-columns:repeat(2,minmax(0,1fr));}}

.pl-table + .vq-src{margin-bottom:clamp(18px,2.4vw,26px) !important;}