/* Original logos, with presentation adapted to Brainbox's dark background. */
.logo-panel.logo-panel {
  --logo-width: 280px;
  --logo-height: 118px;
  width: 100%;
  height: 194px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #202525;
  border: 1px solid #343d3c;
  color: #f5f7f6;
  isolation: isolate;
  container-type: inline-size;
}
.logo-art {
  position: relative;
  flex: 0 1 auto;
  width: min(100%, var(--logo-width), calc(var(--logo-height) * var(--logo-ratio)));
  aspect-ratio: var(--logo-ratio);
  overflow: hidden;
}
.logo-art > img {
  display: block;
  position: absolute;
  width: var(--image-width);
  max-width: none;
  height: auto;
  left: var(--image-left);
  top: var(--image-top);
}
/* White paper disappears through blending; the source files stay untouched. */
.logo-paper .logo-art {
  filter: contrast(1.08) invert(1) hue-rotate(180deg) brightness(1.4);
  mix-blend-mode: screen;
}
.logo-ink .logo-art { filter: brightness(0) invert(1); }
.logo-panel[data-brand="funer.com.pl"] { --logo-width: 190px; }
.logo-panel[data-brand="qrbox.pl"] { --logo-width: 230px; }
.logo-panel[data-brand="mentor24.pro"] { --logo-width: 250px; }
.logo-panel[data-brand="pilotopinii.pl"] { --logo-width: 264px; }
.logo-panel[data-brand="pozegnaj.pl"] { --logo-width: 242px; }
.logo-panel[data-brand="quicksearch.pl"] { --logo-width: 230px; }
.brand-tile:hover .logo-panel { border-color: #677c78; }
.brand-tile:focus-visible .logo-panel { border-color: var(--accent); }
.brand-tile > .brand-link { margin-top: 19px; }
.brand-description { margin-top: 9px; }
.brands-grid { row-gap: 44px; }
.product-card > .logo-panel { border: 0; border-bottom: 1px solid #36403c; }

/* Native HTML/CSS lockups keep their shapes, typefaces and accent colors. */
.logo-lockup { display: flex; justify-content: center; align-items: center; width: 100%; }
.logo-lockup > [class^="bbl-"] { flex: 0 1 auto; max-width: 100%; }
.logo-panel .bbl-pogrzebowka { --navy: #f5f7f6; --ink: #f5f7f6; --muted: #b7bfbd; }
.logo-panel .bbl-pogrzebowka .bbl-pogrzebowka-brand-name { font-size: clamp(20px, 8cqw, 31px); }
.logo-panel .bbl-pogrzebowka .bbl-pogrzebowka-brand-caption { font-size: 11px; text-align-last: auto; }
.logo-panel .bbl-pogrzebowka .bbl-pogrzebowka-brand-symbol { width: 34px; height: 38px; flex-basis: 34px; }
.logo-panel .bbl-odmiananazwisk { color: #f5f7f6; }
.logo-panel .bbl-odmiananazwisk .bbl-odmiananazwisk-wordmark { font-size: clamp(17px, 6.6cqw, 25px); }
.logo-panel .bbl-odmiananazwisk .bbl-odmiananazwisk-wordmark span { color: #62b9ec; }
.logo-panel .bbl-odmiananazwisk .bbl-odmiananazwisk-wordmark img { width: 36px; height: 36px; filter: brightness(2.8); }
.logo-panel .bbl-mowapogrzebowa .bbl-mowapogrzebowa-brand strong { font-size: clamp(17px, 6.5cqw, 24px); }
.logo-panel .bbl-mowapogrzebowa .bbl-mowapogrzebowa-brand small { font-size: 10px; white-space: normal; }
.logo-panel .bbl-mowapogrzebowa .bbl-mowapogrzebowa-brand-symbol { flex-shrink: 0; }
.logo-panel .bbl-polskiekrematoria { color: #f5f7f6; --ink: #f5f7f6; }
.logo-panel .bbl-polskiekrematoria .bbl-polskiekrematoria-brand { gap: 14px; }
.logo-panel .bbl-polskiekrematoria .bbl-polskiekrematoria-brand strong { font-size: 18px; }
.logo-panel .bbl-polskiekrematoria .bbl-polskiekrematoria-brand b { font-size: clamp(20px, 8cqw, 28px); }
.logo-panel .bbl-polskiekrematoria .bbl-polskiekrematoria-brand-mark { width: 41px; height: 49px; flex-shrink: 0; }
.logo-panel .bbl-statystykipogrzebowe { color: #f5f7f6; --ink: #f5f7f6; --blue: #73a0ff; }
.logo-panel .bbl-statystykipogrzebowe .bbl-statystykipogrzebowe-brand { font-size: clamp(13px, 5.2cqw, 18px); gap: 9px; }
.logo-panel .bbl-statystykipogrzebowe .bbl-statystykipogrzebowe-brand-mark img {
  filter: contrast(1.08) invert(1) hue-rotate(180deg) brightness(1.4);
  mix-blend-mode: screen;
}
.logo-panel .bbl-rankingfuneralny { transform: scale(1.3); }
.logo-panel .bbl-konfiguratorpogrzebu { color: #f5f7f6; }
.logo-panel .bbl-konfiguratorpogrzebu .bbl-konfiguratorpogrzebu-brand strong { font-size: clamp(14px, 5.9cqw, 19px); max-width: none; }
.logo-panel .bbl-konfiguratorpogrzebu .bbl-konfiguratorpogrzebu-brand small { color: #b7bfbd; display: block; font-size: 9px; letter-spacing: .025em; }

/* Actual brand marks on the homepage, using the same presentation everywhere. */
.brand-ribbon { padding: 25px 0; }
.brand-ribbon .wrap { display: grid; grid-template-columns: 170px repeat(4,minmax(0,1fr)); gap: 30px; }
.brand-ribbon .wrap > span { max-width: 170px; }
.brand-ribbon .logo-panel {
  --logo-width: 180px;
  --logo-height: 62px;
  height: 75px;
  padding: 0;
  border: 0;
  background: transparent;
}
.brand-ribbon .logo-panel[data-brand="funer.com.pl"] { --logo-width: 130px; }
.brand-ribbon a { display: block; min-width: 0; }

/* Product identity is integrated into the service card, without a white badge. */
.service-product-identity {
  display: grid;
  grid-template-columns: 260px minmax(0,1fr) auto;
  gap: 36px;
  padding: 34px 36px;
  background: #202525;
}
.service-product-identity > .logo-panel {
  --logo-width: 260px;
  width: 100%;
  height: 80px;
  padding: 0;
  border: 0;
  background: transparent;
  justify-content: flex-start;
}
.service-product-identity .button { margin: 0; }
@media (max-width:1050px) {
  .service-product-identity { grid-template-columns: 250px minmax(0,1fr); }
  .service-product-identity .button { grid-column: 2; justify-self: start; }
  .brand-ribbon .wrap { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 25px; }
  .brand-ribbon .wrap > span { grid-column: 1/-1; max-width: none; }
}
@media (max-width:740px) {
  .brands-grid { grid-template-columns: 1fr; gap: 34px; }
  .brand-tile > .logo-panel { height: 180px; padding: 28px; }
  .product-card > .logo-panel { height: 168px; padding: 25px; }
  .brand-ribbon .wrap { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 30px; }
  .brand-ribbon .logo-panel { height: 58px; --logo-height: 52px; }
  .brand-ribbon .logo-panel[data-brand="funer.com.pl"] { --logo-width: 105px; }
  .service-product-identity { grid-template-columns: 1fr; gap: 23px; padding: 26px; }
  .service-product-identity > .logo-panel { max-width: 290px; height: 68px; }
  .service-product-identity .button { grid-column: auto; justify-self: stretch; }
}
@media (max-width:360px) {
  .brand-tile > .logo-panel { padding-inline: 20px; }
  .service-product-identity { padding: 22px; }
}