/* ===========================
   UWM Page content - tresc wpisu/strony z karta kontekstowa obok.
   Wzorowane na oryginalnym markupie UWM (examples/content-menu.md
   oraz examples/block-social-media.md).

   Mobile-first: jedna kolumna, karta zwinieta pod przyciskiem w niebieskim
   pasku. Od 992px (breakpoint `lg` z oryginalu) uklad rozjezdza sie na 8/4,
   a karta jest zawsze rozwinieta.
   =========================== */

.uwm-page-content {
  /* Wartosci wprost z oryginalu; zaden krok skali --uwm-spacing-* / --uwm-font-size-*
     w nie trafia, wiec siedza w lokalnych properties zamiast rozsypywac sie
     literalami po regulach - tak samo jak --uwm-breadcrumbs-title-* w blocks/breadcrumbs. */
  --uwm-page-content-bar-height: 4rem;
  --uwm-page-content-bar-accent: 0.5625rem;
  --uwm-page-content-bar-padding-x: 2.24rem;
  --uwm-page-content-item-padding-y: 0.9375rem;
  --uwm-page-content-link-size: 1.0625rem;
  --uwm-page-content-card-padding: 2.625rem;
  --uwm-page-content-socials-gap: 0.875rem;
  --uwm-page-content-socials-icon: 2.3rem;
  --uwm-page-content-rule-width: 4rem;
  /* Wymiary wlasne assets/img/list.svg - geometria grafiki, nie odstep,
     wiec w px i bez skali --uwm-spacing-*. */
  --uwm-page-content-bullet-width: 20px;
  --uwm-page-content-bullet-height: 3px;
  --uwm-page-content-text-size: 0.9rem;
  --uwm-page-content-text-leading: 1.5625rem;
  /* Globalne --uwm-block-padding-y dochodzi do 5rem (80px), co dla bloku
     tresci jest za duzo - stad ten sam plyn ograniczony do 50px. */
  --uwm-page-content-padding-y: min(
    var(--uwm-block-padding-y, clamp(3rem, 5vw, 5rem)),
    50px
  );

  padding-block: var(--uwm-page-content-padding-y);
}

.uwm-page-content__inner {
  display: grid;
  column-gap: var(--uwm-spacing-xl, 3rem);
  max-width: var(--uwm-content-width, 1550px);
  margin-inline: auto;
  padding-inline: var(--uwm-inner-padding-x, 15px);
}
.uwm-page-content__aside{
  padding-bottom: 3rem;
}

/* Typografia tresci. Ustawiona na kolumnie, nie na korzeniu bloku: karty w
   kolumnie bocznej maja wlasne rozmiary wziete z oryginalu i nie moga tego
   dziedziczyc. Bloki wstawione w tresci, ktore same deklaruja font-size
   (naglowki, przyciski), zostaja nietkniete. */
.uwm-page-content__main {
  font-size: var(--uwm-page-content-text-size);
  line-height: var(--uwm-page-content-text-leading);
  order:2
}

.uwm-page-content__main > :first-child {
  margin-block-start: 0;
}

/* Obrazek wyrozniony nad trescia. Proporcja 16/9 z object-fit, tak jak w
   uwm/single-post-layout, zeby wysokosc kolumny nie zalezala od ksztaltu
   wgranego pliku. */
.uwm-page-content__featured {
  margin: 0 0 var(--uwm-spacing-l, 2rem);
}

.uwm-page-content__featured-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.uwm-page-content__main > :last-child {
  margin-block-end: 0;
}

@media (min-width: 992px) {
  .uwm-page-content__inner {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
  .uwm-page-content__main{
    order: 1;
  }
  .uwm-page-content__aside {
    order: 2;
  }

  .uwm-page-content.is-single-column .uwm-page-content__inner {
    grid-template-columns: 1fr;
  }

  .uwm-page-content.is-sidebar-left .uwm-page-content__main {
    order: 2;
  }

  .uwm-page-content.is-sidebar-left .uwm-page-content__aside {
    order: 1;
  }
}

/* ---------------------------------------------------------------------------
   Karta menu sekcji
   ------------------------------------------------------------------------ */

/* Zolta kreska pod karta - w oryginale (.blockstylesmenu::after) pojawia sie
   dopiero na szerokim ukladzie, bo na mobile karta jest zwinieta. */
.uwm-page-content__menu::after {
  content: "";
  display: none;
}

@media (min-width: 992px) {
  .uwm-page-content__menu::after {
    display: block;
    width: 13rem;
    margin-inline-start: auto;
    border-block-start: var(--uwm-section-title-rule-height, 0.3125rem) solid
      var(--uwm-color-secondary, #fbce14);
  }
}

.uwm-page-content__card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uwm-spacing-s, 1rem);
  min-height: var(--uwm-page-content-bar-height);
  margin: 0;
  padding-inline: var(--uwm-page-content-bar-padding-x) var(--uwm-spacing-s, 1rem);
  border-inline-start: var(--uwm-page-content-bar-accent) solid
    var(--uwm-color-secondary, #fbce14);
  background: var(--uwm-color-primary, #2f78c6);
  color: var(--uwm-color-surface, #ffffff);
  font-family: var(--uwm-font-family, "Poppins", Arial, sans-serif);
  font-size: var(--uwm-font-size-s, 0.875rem);
  font-weight: var(--uwm-font-weight-medium, 500);
  line-height: var(--uwm-line-height-snug, 1.3);
  text-transform: uppercase;
}

@media (min-width: 576px) {
  .uwm-page-content__card-title {
    font-size: var(--uwm-font-size-m, 1.125rem);
  }
}

/* Przycisk zwijajacy cala karte - potrzebny tylko na waskim ukladzie. */
.uwm-page-content__card-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.uwm-page-content__card-toggle .uwm-page-content__chevron {
  width: 0.875rem;
  height: auto;
  transition: transform 0.2s ease;
}

.uwm-page-content__menu.is-open .uwm-page-content__card-toggle .uwm-page-content__chevron {
  transform: rotate(180deg);
}

.uwm-page-content__card-body {
  display: none;
  background: #F1F3F7;
  width: 100%;
}

.uwm-page-content__menu.is-open .uwm-page-content__card-body {
  display: block;
}

@media (min-width: 992px) {
  .uwm-page-content__card-toggle {
    display: none;
  }

  .uwm-page-content__card-body {
    display: block;
  }
}

.uwm-page-content__list {
  margin: 0;
  padding-block: 0;
  padding-inline: var(--uwm-page-content-bar-padding-x) var(--uwm-spacing-s, 1rem);
  list-style: none;
  font-size: var(--uwm-page-content-link-size);
  font-weight: var(--uwm-font-weight-medium, 500);
  line-height: var(--uwm-line-height-snug, 1.3);
}

.uwm-page-content__list > .uwm-page-content__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-block: var(--uwm-page-content-item-padding-y);
  border-block-end: 1px solid var(--uwm-color-border, #dee2e6);
}

.uwm-page-content__link {
  color: var(--uwm-color-text, #1f2933);
  text-decoration: none;
}

.uwm-page-content__link:hover,
.uwm-page-content__link:focus-visible {
  text-decoration: underline;
}

.uwm-page-content__item.is-current > .uwm-page-content__link {
  font-weight: var(--uwm-font-weight-bold, 700);
}

/* Daszek rozwijajacy podmenu. Jest rodzenstwem linku, nie jego opakowaniem,
   dzieki czemu pozycja z dziecmi pozostaje zwyklym, klikalnym linkiem. */
.uwm-page-content__submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--uwm-color-primary, #2f78c6);
  cursor: pointer;
}

.uwm-page-content__submenu-toggle .uwm-page-content__chevron {
  width: 0.75rem;
  height: auto;
  transition: transform 0.2s ease;
}

.uwm-page-content__item.is-open > .uwm-page-content__submenu-toggle .uwm-page-content__chevron {
  transform: rotate(180deg);
}

/* Animacja wysokosci na grid-template-rows: 0fr -> 1fr. Nie wymaga zgadywania
   max-height, wiec dziala tak samo dla podmenu o dowolnej dlugosci. */
.uwm-page-content__submenu-wrap {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.uwm-page-content__item.is-open > .uwm-page-content__submenu-wrap {
  grid-template-rows: 1fr;
}

/* `overflow: hidden` przycina zwiniete podmenu, ale samo nie wyjmuje linkow
   z kolejnosci tabulacji - dopiero visibility to robi. Zmiana jest opozniona
   o czas animacji, zeby przy zwijaniu tresc nie znikala przed zamknieciem. */
.uwm-page-content__submenu {
  overflow: hidden;
  visibility: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: visibility 0s linear 0.25s;
}

.uwm-page-content__item.is-open > .uwm-page-content__submenu-wrap .uwm-page-content__submenu {
  visibility: visible;
  transition-delay: 0s;
}

.uwm-page-content__submenu .uwm-page-content__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-block: var(--uwm-page-content-item-padding-y);
}

/* Bez wlasnego font-size: podmenu dziedziczy --uwm-page-content-link-size
   (1.0625rem) z listy, czyli ma ten sam stopien co poziom wyzej - hierarchie
   niesie punktor, nie rozmiar pisma. Odstep kreski od etykiety to 1rem, czyli
   prawy margines punktora z oryginalu. */
.uwm-page-content__submenu .uwm-page-content__link {
  display: flex;
  align-items: flex-start;
  gap: var(--uwm-spacing-s, 1rem);
}

/* Punktor podmenu - ten sam plik co w oryginale (list.svg: kreska 20x3 w kolorze
   #338be9). Sciezka jest wzgledna wobec tego arkusza, tak jak fonty w
   assets/global.css, wiec nie potrzeba adresu podawanego z PHP.

   Oryginal ustawia go przez `content: url(...)`, co daje element zastepowany o
   rozmiarze wlasnym pliku, nie do przeskalowania. Tutaj to tlo w pudelku o
   jawnej szerokosci i wysokosci jednego wiersza: kreska trafia w pierwsza linie
   takze wtedy, gdy etykieta zawija sie na dwie. */
.uwm-page-content__submenu .uwm-page-content__link::before {
  content: "";
  flex: 0 0 auto;
  width: var(--uwm-page-content-bullet-width);
  height: calc(var(--uwm-line-height-snug, 1.3) * 1em);
  background: url("../../assets/img/list.svg") no-repeat center /
    var(--uwm-page-content-bullet-width) var(--uwm-page-content-bullet-height);
}

@media (prefers-reduced-motion: reduce) {
  .uwm-page-content__submenu-wrap,
  .uwm-page-content__chevron {
    transition: none;
  }

  .uwm-page-content__submenu {
    transition-delay: 0s;
  }
}

/* ---------------------------------------------------------------------------
   Karta social media (zamiennik, gdy strony nie ma w menu)
   ------------------------------------------------------------------------ */

.uwm-page-content__socials {
  padding: var(--uwm-page-content-card-padding);
  border: 1px solid var(--uwm-color-border-blue, #b7d1ed);
  background: var(--uwm-color-audience, #eef6ff);
}

.uwm-page-content__socials-title {
  margin: 0;
  color: var(--uwm-color-text, #1f2933);
  font-family: var(--uwm-font-family, "Poppins", Arial, sans-serif);
  font-size: var(--uwm-font-size-m, 1.125rem);
  font-weight: var(--uwm-font-weight-semibold, 600);
  line-height: var(--uwm-line-height-snug, 1.3);
}

.uwm-page-content__socials-rule {
  width: var(--uwm-page-content-rule-width);
  margin: var(--uwm-spacing-s, 1rem) 0;
  border: 0;
  border-block-start: 0.125rem solid var(--uwm-color-primary, #2f78c6);
}

.uwm-page-content__socials-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uwm-page-content-socials-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uwm-page-content__socials-link {
  display: block;
  line-height: 0;
}

.uwm-page-content__socials-icon {
  width: var(--uwm-page-content-socials-icon);
  height: auto;
}