/* =========================================================
   ZAPOWIEDŹ — GLOBALNE UKRYCIE WARIANTÓW (WSZYSTKIE MARKI)
   Plik: dodatkowe-style.css
   ========================================================= */


:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product:has(.product.product_tag-zapowiedz),
:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product:has(.product.product_cat-zapowiedz) {
  /* porządki w layoucie Elementora przy produktach zmiennych */
  /* (nie usuwamy przycisku i ilości — tylko wybór wariantów) */
}

/*:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product:has(.product.product_tag-zapowiedz) form.variations_form .variations,
:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product:has(.product.product_cat-zapowiedz) form.variations_form .variations {
  display: none !important;
  margin: 0 !important; padding: 0 !important; height: 0 !important;
}

:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product:has(.product.product_tag-zapowiedz) form.variations_form :is(.woo-variation-items-wrapper, .variable-items-wrapper, .wvs-variations, .wvs-archive-variations, .wvs-variation-terms, .swatch, .swatches-select, .reset_variations, select[name^="attribute_"]),
:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product:has(.product.product_cat-zapowiedz) form.variations_form :is(.woo-variation-items-wrapper, .variable-items-wrapper, .wvs-variations, .wvs-archive-variations, .wvs-variation-terms, .swatch, .swatches-select, .reset_variations, select[name^="attribute_"]) {
  display: none !important;
}*/

/* Ukryj warianty tylko gdy GŁÓWNY produkt (div.product) jest zapowiedzią */
:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product
  :has(.woocommerce div.product.product_tag-zapowiedz) form.variations_form .variations,
:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product
  :has(.woocommerce div.product.product_cat-zapowiedz) form.variations_form .variations {
  display: none !important;
  margin: 0 !important; padding: 0 !important; height: 0 !important;
}

:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product
  :has(.woocommerce div.product.product_tag-zapowiedz) form.variations_form :is(.woo-variation-items-wrapper, .variable-items-wrapper, .wvs-variations, .wvs-archive-variations, .wvs-variation-terms, .swatch, .swatches-select, .reset_variations, select[name^="attribute_"]),
:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product
  :has(.woocommerce div.product.product_cat-zapowiedz) form.variations_form :is(.woo-variation-items-wrapper, .variable-items-wrapper, .wvs-variations, .wvs-archive-variations, .wvs-variation-terms, .swatch, .swatches-select, .reset_variations, select[name^="attribute_"]) {
  display: none !important;
}






/* Zniweluj luki po flex-gap w widgetach „Dodaj do koszyka” Elementora */
:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product:has(.product.product_tag-zapowiedz) .elementor-add-to-cart.elementor-product-variable,
:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product:has(.product.product_cat-zapowiedz) .elementor-add-to-cart.elementor-product-variable {
  gap: 0 !important;
  row-gap: 0 !important;
  margin-bottom: 0 !important;
}


/* ===== Fallback BEZ :has (gdyby przeglądarka była stara) =====
   Trafiamy sytuację, gdy form.variations_form jednak JEST w potomkach .product_*zapowiedz.
   (Jeśli Elementor wynosi form poza .product, to blok powyżej z :has jest kluczowy.)
*/

:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product .product.product_tag-zapowiedz form.variations_form .variations,
:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product .product.product_cat-zapowiedz form.variations_form .variations {
  display: none !important;
}

:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product .product.product_tag-zapowiedz form.variations_form :is(.woo-variation-items-wrapper, .variable-items-wrapper, .wvs-variations, .wvs-archive-variations, .wvs-variation-terms, .swatch, .swatches-select, .reset_variations, select[name^="attribute_"]),
:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product .product.product_cat-zapowiedz form.variations_form :is(.woo-variation-items-wrapper, .variable-items-wrapper, .wvs-variations, .wvs-archive-variations, .wvs-variation-terms, .swatch, .swatches-select, .reset_variations, select[name^="attribute_"]) {
  display: none !important;
}

:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product .product.product_tag-zapowiedz form.variations_form .single_variation_wrap,
:where(html) body:is(.marka-axis-mundi, .marka-nemezis, .marka-red, .marka-analityka, .marka-starship).single-product .product.product_cat-zapowiedz form.variations_form .single_variation_wrap {
  display: none !important;
}



/* usunięcie "wyczyść" przy wariantach */ 
  .reset_variations,
  a.wyczysc.wyczysc-proxy {
  display: none !important;
}


/* =========================================================
   WYSZUKIWARKA PEŁNOEKRANOWA — STRONA GŁÓWNA AXIS MUNDI 
   ========================================================= */

/* Overlay – pełnoekranowe tło */
.am-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  z-index: 99999;
}
.am-search-overlay.is-open {
  display: grid;
  place-items: center;
}

/* Karta wyszukiwarki */
.am-search-wrap {
  width: min(820px, 90vw);
  background: #008f69; /* zielone tło */
  padding: 24px;
  border-radius: 5px; /* lekko zaokrąglone rogi */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Pole wyszukiwania */
.am-search-wrap input[type="search"]{
  box-sizing: border-box;
  width: calc(90vw - 48px) !important; /* 48px = padding 24px po obu stronach karty */
  max-width: 100%;                     /* nie przekraczaj szerokości zielonej karty */
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Zielona obwódka przy focus */
.am-search-wrap input[type="search"]:focus {
  outline: none !important;        /* usuwa niebieski outline */
  border-color: #008f69 !important;/* zielona ramka */
  box-shadow: 0 0 0 2px #008f69;   /* delikatny zielony glow */
}

/* Placeholder */
.am-search-wrap input[type="search"]::placeholder {
  color: #666;
}

/* Przycisk "Szukaj" */
.am-search-wrap .search-submit {
  margin-top: 5px; /* margines górny */
  padding: 8px 28px;
  border: none;
  border-radius: 5px; /* delikatne zaokrąglenie */
  background: #000;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.am-search-wrap .search-submit:hover {
  background: #111;
}

/* Krzyżyk zamknięcia (biały, bez tła) */
.am-search-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  background: none; /* brak tła */
  color: #fff; /* biały krzyżyk */
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.am-search-toggle i {
  font-size: 20px; /* zmień np. na 32px, 40px, itp. */
}

  .fa-solid.fa-magnifying-glass {
  margin-top: 11px !important;
  }

/* Ikona lupki tylko mobile/tablet */
@media (min-width: 1025px) {
  .am-hdr-search .am-search-toggle {
    display: none !important;
  }

}


/* =========================================================
   KARTA PRODUKTU - szablon Axis Mundi (więc Red i Nemezis też)
   ========================================================= */

@media (max-width: 768px) {
  #zdjecie {
    border-radius: 5px;
    box-shadow: none;
    max-height: 510px !important;
    max-width: 350px !important;
    margin: 0 auto !important;
  }
}


/* =========================================================
   ZMIANY SEO (wszystkie marki):
     Tytuł jako H1
     Tytuł jako H2
   ========================================================= */

h1.product_title.entry-title.elementor-heading-title.elementor-size-default
  {
  display: block;
  font-size: 3.3rem;
  line-height: 1 !important;
}

.marka-analityka h1.product_title.entry-title.elementor-heading-title.elementor-size-default {
  font-size: 40px;
}

.autor h2.autorlink {
  font-size: 3.19rem !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
}

.marka-axis-mundi h2.autorlink a{
  color: var( --e-global-color-primary ) !important;
}

.marka-analityka .autorlink {
  font-size: 21px;
  display: inline !important;
  text-transform: none !important;
}

.marka-analityka h2.autorlink a {
  color: #f26522 !important;
}

.marka-red h2.autorlink a {
  color: #d40a15 !important;
}


.marka-starship h2.autorlink a {
  font-size: 21px;
  color: #cecece !important;
} 

.marka-starship h2.autorlink a:hover {
  color: #cecece !important;
} 

.marka-starship h2.autorlink { 
  display: inline; 
  margin: 0; 
  font-size: 21px; 
  text-transform: none; 
  color: #cecece; 
}
.marka-starship h2.autorlink a { 
  display: inline; 
  color: inherit; 
  text-decoration: none; 
}


/* =========================================================
   ZAZNACZENIA (wszystkie marki)
   ========================================================= */

/* AXIS MUNDI */
.marka-axis-mundi ::selection,
.marka-axis-mundi ::-moz-selection {
    background: #b2ddd2;
    color: #000;
}

/* ANALITYKA */
.marka-analityka ::selection,
.marka-analityka ::-moz-selection {
    background: #f26522;
    color: #fff;
}

/* NEMEZIS */
.marka-nemezis ::selection,
.marka-nemezis ::-moz-selection {
    background: #000;
    color: #ffffff;
}

/* RED */
.marka-red ::selection,
.marka-red ::-moz-selection {
    background: #d40a15;
    color: #ffffff;
}



/* =========================================================
   POPRAWKI (wszystkie marki)
   ========================================================= */


.marka-axis-mundi li.product.product_tag-autograf-autorki.product_tag-zapowiedz.purchasable.product-type-variable.has-default-attributes a.button.product_type_variable{
  font-size: 17px !important;
  padding: .6em 1em !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.wstep strong {
  font-weight: 500 !important;
}


/* Hide Google reCAPTCHA v3 badge – GDPR / role change (2026) */
.grecaptcha-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}





/* =====================================================
   CSS – AUTORZY (Starship + pozostali)
   WooCommerce + Elementor (Hello) – kontenery Flexbox

   Obejmuje:
   A) Lista autorów / kafelki (tylko Starship)
   B) Pojedynczy autor – bio + zdjęcie (wszyscy) + nakładka SVG (tylko Starship)

   WYMAGANE KLASY W ELEMENTORZE:
   - Lista autorów (kafelek): .author-card, .author-mask, .author-img
   - Pojedynczy autor (wrapper bio): .author-bio
   - Pojedynczy autor (wrapper zdjęcia): .author-photo-float
   - (opcjonalnie) wewnętrzny wrapper maski: .author-mask

   Plik SVG (biały): /wp-content/uploads/2026/02/nakladka_autor_white.svg
   ===================================================== */

:root{
  /* Kafelki (lista autorów) */
  --author-size: 240px;
  --img-scale: 1.05;

  /* Nakładka */
  --overlay-bleed: 18%;
  --overlay-size: 100%;
  --overlay-nudge-x: 0px;
  --overlay-nudge-y: 0px;
}

/* =====================================================
   A) LISTA AUTORÓW / KAFELKI (tylko Starship)
   ===================================================== */

body.marka-starship .author-card{
  position: relative;
  width: var(--author-size);
  aspect-ratio: 1;
}

body.marka-starship .author-card .author-mask{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
}

body.marka-starship .author-card .author-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transform: scale(var(--img-scale));
  filter: drop-shadow(0 0 16px rgba(120,180,255,.65));
  transition: transform .25s ease, filter .3s ease;
  display:block;
}

body.marka-starship .author-card:hover .author-img img{
  transform: scale(calc(var(--img-scale) * 1.10));
  filter: drop-shadow(0 0 24px rgba(140,200,255,.95));
}

body.marka-starship .author-card::after{
  content:"";
  position:absolute;
  inset: calc(-1 * var(--overlay-bleed));
  background-image: url('/wp-content/uploads/2026/02/nakladka_autor_white.svg');
  background-repeat: no-repeat;
  background-size: var(--overlay-size);
  background-position:
    calc(50% + var(--overlay-nudge-x))
    calc(50% + var(--overlay-nudge-y));
  pointer-events: none;
  transform-origin: 50% 50%;
}

/* =====================================================
   B) POJEDYNCZY AUTOR – BIO + ZDJĘCIE (wszyscy)

   Dlaczego wcześniej „nic się nie zmieniało”:
   - Elementor Containers są domyślnie display:flex.
   - float NIE działa na flex-itemach.
   - Musimy więc wymusić, aby kontener .author-bio NIE był flexem.

   Uwaga do Elementora:
   - .author-bio to kontener, który zawiera DWA elementy jako rodzeństwo:
     1) kontener .author-photo-float
     2) widget Edytor tekstu (bio)
   ===================================================== */

/* 1) Rozbrojenie flexa Elementora w obrębie bio
   Elementor włącza Flexbox na .e-con. Jeśli Elementor ładuje swoje CSS po Twoim,
   to "display:flex" może wygrywać mimo !important.
   Dlatego:
   - zwiększamy specyficzność selektorów
   - rozbrajamy też wrapper .e-con-inner (gdy istnieje)
   - zdejmujemy ewentualne clear:both z widgetów
*/
body .elementor .elementor-element.author-bio.e-con,
body .elementor .author-bio.e-con,
body .elementor .e-con.author-bio,
body .author-bio.e-con,
body .author-bio{
  display: block !important;
  position: relative;
  z-index: 1;
  /* max-width przeniesione na tekst (author-bio ma być full-width, żeby float miał gdzie „oddychać”) */
  max-width: none !important;
}

body .author-bio > .e-con-inner{
  display: block !important;
}

body .author-bio > .elementor-element,
body .author-bio > .e-con-inner > .elementor-element{
  display: block !important;
}

body .author-bio .elementor-widget,
body .author-bio .elementor-widget-text-editor{
  clear: none !important;
}

/* 2) TYPOGRAFIA – domyślnie (Axis Mundi / reszta)
   Uwaga: nie ustawiamy koloru na siłę, żeby brał z motywu.
*/
body:not(.marka-starship) .author-bio{
  font: 21px 'Roboto', sans-serif;
  line-height: 1.6;
  font-weight: 400;
  color: inherit;
}

body:not(.marka-starship) .author-bio p{ margin: 0 0 1em; }

/* Starship – biały tekst + Lato */
body.marka-starship .author-bio{
  color: #fefefe !important;
  font-family: Lato, sans-serif !important;
  font-size: 1em !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

body.marka-starship .author-bio p{ margin: 0 0 1em; }
body.marka-starship .author-bio a{ text-decoration: underline; text-underline-offset: .15em; }

/* Max szerokość tekstu – tu, a nie na całym kontenerze (żeby zdjęcie mogło być dosunięte do prawej) */
.author-bio .elementor-widget-text-editor{
  max-width: 72ch;
}

.author-bio .elementor-widget-text-editor .elementor-widget-container{
  display: block !important;
}

/* Dodatkowy bezpiecznik: widget tekstu nie może być flexem (bo wtedy float nie opływa) */
.author-bio .elementor-element.elementor-widget-text-editor{
  display: block !important;
}


/* 3) Wrapper zdjęcia: float + rozmiar
   Elementor często narzuca szerokość 100% na kontenerach (.e-con-boxed/.e-con-full).
   Jeśli tak się dzieje, tekst NIE ma miejsca obok i spada pod zdjęcie.

   Dlatego dajemy dwie warstwy:
   - normalny selektor (.author-bio .author-photo-float)
   - „młot” o wyższej specyficzności dla elementor-element[data-element_type="container"]
*/
.author-bio .author-photo-float{
  --photo-size: clamp(170px, 22vw, 260px);

  float: right !important;
  margin: 0 0 20px 28px !important;

  position: relative !important;
  display: block !important;

  width: var(--photo-size) !important;
  max-width: var(--photo-size) !important;
  inline-size: var(--photo-size) !important;

  height: var(--photo-size) !important;
  block-size: var(--photo-size) !important;

  /* Opływanie koła (działa tylko dla float) */
  shape-outside: circle(50%);
  clip-path: circle(50%);
}

/* MŁOT: przebij Elementorowe reguły szerokości na kontenerach */
body .elementor .elementor-element[data-element_type="container"].author-photo-float{
  --photo-size: clamp(170px, 22vw, 260px);

  width: var(--photo-size) !important;
  max-width: var(--photo-size) !important;
  inline-size: var(--photo-size) !important;

  /* wyłącz "rozciąganie" flexa, jeśli Elementor traktuje to jako flex-item */
  flex: 0 0 var(--photo-size) !important;
  flex-basis: var(--photo-size) !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;

  /* czasem pomaga przy boxed */
  min-width: var(--photo-size) !important;
}

/* Jeśli kontener jest boxed, jego .e-con-inner potrafi mieć własne ograniczenia */
body .elementor .elementor-element[data-element_type="container"].author-photo-float > .e-con-inner{
  width: 100% !important;
  max-width: 100% !important;
}

/* 4) Maska koła
   - jeśli masz wewnętrzny kontener .author-mask: super
   - jeśli nie masz: styl złapie bezpośrednio widget obrazka */

/* Wariant A: masz .author-mask */
.author-bio .author-photo-float .author-mask{
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* Wariant B: nie masz .author-mask (awaryjnie) */
.author-bio .author-photo-float .elementor-widget-image .elementor-widget-container{
  border-radius: 50% !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

/* Obrazek zawsze wypełnia kółko */
.author-bio .author-photo-float img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 35% !important;
  display: block !important;
}

/* 5) Clear float po bio */
.author-bio::after{
  content:"";
  display:block;
  clear: both;
}

/* 6) Mobile: bez float */
@media (max-width: 767px){
  .author-bio .author-photo-float{
    float: none !important;
    margin: 0 auto 18px !important;
  }
}

/* =====================================================
   Nakładka (SVG) – tylko Starship, tylko na KONTENERZE zdjęcia
   ===================================================== */

/* Wyłącz stare nakładki, jeśli gdzieś jeszcze istnieją */ (SVG) – tylko Starship, tylko na KONTENERZE zdjęcia
   ===================================================== */

/* Wyłącz stare nakładki, jeśli gdzieś jeszcze istnieją */
body.marka-starship .author-photo::after,
body.marka-starship .author-mask::after,
body.marka-starship .author-img::after{
  content: none !important;
  background: none !important;
}

/* Jedyna właściwa nakładka dla pojedynczego autora */
body.marka-starship .elementor-element[data-element_type="container"].author-photo-float::after{
  content:"";
  position:absolute;
  inset: calc(-1 * var(--overlay-bleed));
  background: center / contain no-repeat url('/wp-content/uploads/2026/02/nakladka_autor_white.svg');
  pointer-events:none;
  z-index: 2;
}

/* =====================================================
   C) NAGŁÓWEK AUTORA (title) – styl per marka
   ===================================================== */

/* Starship – tytuł autora */
body.marka-starship .nazwa-autora .elementor-heading-title{
  font-family: Lato, sans-serif !important;
  font-size: 2.2em;
  color: #53C0D4 !important;
  font-weight: 300;
  line-height: 1.15;
}

/* Reszta – zostawiamy motyw (Axis Mundi), ale pilnujemy Roboto jeśli trzeba */
body:not(.marka-starship) .nazwa-autora .elementor-heading-title{
  font-family: 'Roboto', sans-serif;
}

/* =====================================================
   D) NAGŁÓWEK „Książki…” (z shortcodu)
   ===================================================== */

.author-books-heading.wp-block-heading{
  margin: 1.2em 0 .8em;
}


/* =====================================================
   BRAK ZDJĘCIA AUTORA – shortcode i kod do niego
   ===================================================== */

   /* Wrapper bio */
.author-bio-wrap{
  position: relative;
}

/* Zdjęcie tylko jeśli PHP je wyrenderuje */
.author-bio-wrap .author-photo-float{
  --photo-size: clamp(170px, 22vw, 260px);
  float: right;
  width: var(--photo-size);
  height: var(--photo-size);
  margin: 0 0 20px 28px;
  position: relative;
  shape-outside: circle(50%);
}

/* Kółko */
.author-bio-wrap .author-mask{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.author-bio-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}

/* Clear float */
.author-bio-wrap::after{
  content:"";
  display:block;
  clear: both;
}

/* Overlay tylko wtedy, gdy shortcode oznaczył wpis jako Starship */
/*.author-bio-wrap.is-starship .author-photo-float::after{
  content:"";
  position:absolute;
  inset: -18%;
  background: center / contain no-repeat url('/wp-content/uploads/2026/02/nakladka_autor_white.svg');
  pointer-events:none;
  z-index: 2;
}*/

/* Mobile: bez float */
@media (max-width: 767px){
  .author-bio-wrap .author-photo-float{
    float:none;
    margin: 0 auto 18px;
  }
}

/* Overlay ma prawo wystawać poza kółko (ważne!) */
.author-bio-wrap .author-photo-float{
  overflow: visible !important;
}

/* Tylko maska ucina zdjęcie */
.author-bio-wrap .author-mask{
  overflow: hidden !important;
}

/* Jeśli Elementor/rodzic ucina – zdejmujemy to z najbliższych wrapperów */
.author-bio-wrap,
.author-bio-wrap .elementor-shortcode,
.author-bio-wrap .elementor-widget-container{
  overflow: visible !important;
}


/* =====================================================
   Opis i zdjęcie powyżej lub poniżej książek
   ===================================================== */


/* Rodzic musi być flex */
.author-layout{
  display:flex;
  flex-direction:column;
}

/* BIO nad książkami (domyślnie) */
body.author-bio-above .author-layout .author-bio{
  order:1;
}

body.author-bio-above .author-layout .author-books{
  order:2;
}

/* BIO pod książkami */
body.author-bio-below .author-layout .author-bio{
  order:2;
}

body.author-bio-below .author-layout .author-books{
  order:1;
}


/* =====================================================
   Źródło zdjęcia autora
   ===================================================== */

.author-photo-wrap{
  float: right;
  width: var(--author-photo-size);
  margin: 0 0 20px 28px;
}

.author-photo-wrap .author-photo-float{
  float: none;
  width: 100%;
  height: var(--author-photo-size);
  margin: 0;
}

.author-bio-wrap .author-photo-source{
  margin-top: 8px;
  margin-left: 25px;
  font-size: 12px;
  line-height: 1.4;
  opacity: .75;
  text-align: center;
  width: 100%;
}

@media (max-width: 767px){
  .author-photo-wrap{
    float: none;
    margin: 0 auto 18px;
  }
}

.author-bio-wrap .author-photo-wrap{
  float: right;
  width: var(--author-photo-size);
  margin: 0 0 20px 28px;

  display: flex;
  flex-direction: column;
  align-items: center;
}





/* =====================================================
   SYSTEM BANERÓW — siatka publiczna i podgląd
   ===================================================== */

.ss-banners-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:20px; 
  row-gap:18px;    
  align-items:start;
}

.ss-banner-card{
  position:relative;
}

.ss-banner-link{
  display:block;
  line-height:0;
}

.ss-banner-link img{
  display:block;
  width:100%;
  height:auto;
}

.ss-banners-preview .ss-banner-card.is-inactive{
  opacity:.55;
}

.ss-banners-empty{
  width:100%;
  padding:24px 16px;
  text-align:center;
}

.ss-banners-empty h4{
  margin:0;
}

.ss-banners-empty-zapowiedzi{
  border-radius:18px;
}


/* Mobile */
@media (max-width: 767px){
  .ss-banners-grid{
    grid-template-columns:1fr;
    column-gap:15px;
    row-gap:12px;
  }

  .ss-banner-link img{
    border-radius:18px;
  }
}


/* =====================================================
   HOVER dla banerów — powiększa się cały kafel
   ===================================================== */

.ss-banner-card{
  overflow: visible;
}

.ss-banner-link{
  display:block;
  border-radius:15px;
  overflow:hidden;
  transform: translateZ(0) scale(1);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transition:
    transform .28s ease,
    box-shadow .28s ease;
  will-change: transform;
}

.ss-banner-link img{
  display:block;
  width:100%;
  height:auto;
  border-radius:15px;
  transition:none;
}

/* Hover / focus */
.ss-banner-link:hover,
.ss-banner-link:focus{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}

/* Mobile */
@media (max-width: 767px){
  .ss-banner-link{
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    margin: 0 8px;
  }

  .ss-banner-link:hover,
  .ss-banner-link:focus{
    transform: scale(1.01);
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
  }
}