/* BULGARIA24 — Банери. Стилът чете променливите на темата, ако ги има,
   и пада на свои, ако плъгинът е на друг сайт.

   РАЗМЕРИТЕ идват от мястото като променливи БЕЗ мерна единица:
     --b24ban-sh / --b24ban-v        компютър
     --b24ban-sh-t / --b24ban-v-t    таблет
     --b24ban-sh-f / --b24ban-v-f    телефон
   Пишат се от b24ban_razmeri_css() в inc/render.php. */

.b24ban{
  margin: var(--b24-gap, 18px) 0;
  text-align: center;
}

/* Кутията около плочката и банера. Свива се до банера, за да може
   плочката да се закачи за НЕГО, а не за цялата колона. */
.b24ban-hol{
  position:relative;
  display:inline-block;
  max-width:100%;
  text-align:left;
  vertical-align:top;
}

/* ---------------------------------------------------------------
   ПЛОЧКАТА „РЕКЛАМА“

   Лежи В ъгъла на банера, не над него. Дотук беше display:block с
   отстъп отдолу — около 18 пиксела, които буташе банера надолу и
   разваляше равнението с картите до него.

   7 пиксела. Проверено на телефон: „РЕКЛАМА“ се чете от първия поглед.
   Кантът е за тъмните банери — върху тъмночервено бялата плочка свети
   без него.

   ПОГЛЪЩА КЛИКА нарочно. Прозрачна за клик плочка значи, че всеки, който
   бутне надписа с пръст, брои клик на банера — тоест статистиката, която
   се продава, е напомпана. По-добре мъртво поле 50 на 12 пиксела.
   --------------------------------------------------------------- */
.b24ban-nadpis{
  position:absolute; top:0; left:0; z-index:3;
  display:inline-block; width:max-content; max-width:100%;
  background:#fff; color:#000;
  font: 400 7px/1.45 var(--b24-font-sans, 'PT Sans', sans-serif);
  letter-spacing:.04em; text-transform:uppercase;
  padding:2px 4px;
  border-bottom-right-radius:2px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.25);
  cursor:default;
}

.b24ban-kutia{
  display:block; max-width:100%;
  text-decoration:none; color:inherit;
}
.b24ban picture, .b24ban img{ display:block; }
.b24ban img{
  width:100%; max-width:calc(var(--b24ban-sh, 300) * 1px);
  height:auto; margin:0 auto;
  border-radius: var(--b24-r, 6px);
}

/* ---------------------------------------------------------------
   РАМКАТА С HTML БАНЕР

   Пълни кутията си; кутията носи съотношението. Затова HTML банерът,
   който се мери сам и избира оформление, получава кутия на компютър и
   лента на телефон — стига мястото да е описано така в „Местата“.
   --------------------------------------------------------------- */
.b24ban--html_fayl .b24ban-hol{
  width: calc(var(--b24ban-sh, 300) * 1px);
}
.b24ban-ramka{
  display:block; width:100%; height:auto; border:0;
  aspect-ratio: var(--b24ban-sh, 300) / var(--b24ban-v, 250);
  border-radius: var(--b24-r, 6px);
}

/* Текстов банер — няма фиксирана височина, пренарежда се сам. */
.b24ban-t{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px 14px;
  max-width:calc(var(--b24ban-sh, 300) * 1px); margin:0 auto;
  padding:14px 18px;
  background: var(--b24-hartia, #fff);
  border:1px solid var(--b24-border, #e3e3e3);
  border-left:4px solid var(--b24-pr, #CC252E);
  border-radius: var(--b24-r, 6px);
  text-align:left;
  transition: box-shadow .2s ease, transform .2s ease;
}
.b24ban-kutia:hover .b24ban-t{
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transform:translateY(-2px);
}
.b24ban-t-nad{
  font: 700 11px/1 var(--b24-font-sans, 'PT Sans', sans-serif);
  letter-spacing:.8px; text-transform:uppercase;
  color: var(--b24-pr, #CC252E);
  flex:0 0 auto;
}
.b24ban-t-h{
  font: 700 16px/1.35 var(--b24-font-serif, 'Bitter', serif);
  color: var(--b24-mastilo, #1b1b1b);
  flex:1 1 240px;
}
.b24ban-t-b{
  flex:0 0 auto;
  padding:8px 16px; border-radius: var(--b24-r, 6px);
  background: var(--b24-pr, #CC252E); color:#fff;
  font: 700 13px/1 var(--b24-font-sans, 'PT Sans', sans-serif);
  white-space:nowrap;
}

/* ---------------------------------------------------------------
   ТАБЛЕТ — размерите за таблет от „Местата“
   --------------------------------------------------------------- */
@media (max-width:1024px){
  .b24ban--html_fayl .b24ban-hol{
    width: calc(var(--b24ban-sh-t, var(--b24ban-sh, 300)) * 1px);
  }
  .b24ban-ramka{
    aspect-ratio: var(--b24ban-sh-t, var(--b24ban-sh, 300)) / var(--b24ban-v-t, var(--b24ban-v, 250));
  }
  .b24ban img{ max-width:calc(var(--b24ban-sh-t, var(--b24ban-sh, 300)) * 1px); }
}

/* ---------------------------------------------------------------
   ТЕЛЕФОН — размерите за телефон от „Местата“

   Тук висок банер обикновено става лента: описваш мястото като
   320×160 и HTML банерът сам минава в лентов вид, защото мери
   кутията, в която е сложен.
   --------------------------------------------------------------- */
@media (max-width:600px){
  .b24ban--bez-telefon{ display:none; }

  .b24ban--html_fayl .b24ban-hol{
    width: calc(var(--b24ban-sh-f, var(--b24ban-sh, 300)) * 1px);
  }
  .b24ban-ramka{
    aspect-ratio: var(--b24ban-sh-f, var(--b24ban-sh, 300)) / var(--b24ban-v-f, var(--b24ban-v, 250));
  }
  .b24ban img{ max-width:calc(var(--b24ban-sh-f, var(--b24ban-sh, 300)) * 1px); }

  .b24ban-t{ padding:12px 14px; }
  .b24ban-t-h{ font-size:15px; flex-basis:100%; }
  .b24ban-t-b{ width:100%; text-align:center; }
}

/* Който е изключил анимациите в телефона си, да не гледа въртележки. */
@media (prefers-reduced-motion: reduce){
  .b24ban-kutia:hover .b24ban-t{ transform:none; }
  .b24ban-t{ transition:none; }
}