/* Strona kursu: terminy i galeria (widgety M16 OTSS Kursy). */
.m16-terminy__miejsce {
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--headings-color, #181820);
}
/* Terminy jako kafelki: zwykły blok z kafelkami inline-block, żeby obok sidebara
   rząd był krótszy, a pod nim kafelki szły już na całą szerokość. */
.m16-terminy__lista {
  list-style: none;
  margin: 0 -8px 12px 0;
  padding: 0;
  font-size: 0;
}
.m16-termin {
  display: inline-block;
  vertical-align: top;
  width: 196px;
  margin: 0 8px 8px 0;
  font-size: 15px;
}
.m16-termin[hidden] { display: none; }
.m16-termin label {
  display: block;
  margin: 0;
  cursor: pointer;
}
.m16-termin input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.m16-termin__tresc {
  display: block;
  padding: 9px 12px 8px;
  border: 1px solid rgba(18, 18, 18, 0.1);
  border-radius: 6px;
  background: #fff;
  line-height: 1.35;
  transition: border-color .2s, background-color .2s;
}
.m16-termin__data {
  display: block;
  color: var(--headings-color, #181820);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.m16-termin__status {
  display: block;
  margin-top: 2px;
  color: var(--text-color, #6b6b75);
  font-size: 13px;
}
.m16-termin__status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: #2e9d5b;
  vertical-align: middle;
}
.m16-termin.is-malo .m16-termin__status::before { background: #d98a1c; }
.m16-termin.is-pelny .m16-termin__status::before { background: #a5a5ad; }
.m16-termin label:hover .m16-termin__tresc,
.m16-termin input:focus-visible + .m16-termin__tresc {
  border-color: var(--theme-color1, #c8964b);
}
.m16-termin input:focus-visible + .m16-termin__tresc {
  outline: 2px solid var(--theme-color1, #c8964b);
  outline-offset: 2px;
}
.m16-termin input:checked + .m16-termin__tresc {
  border-color: var(--theme-color1, #c8964b);
  background-color: #fbf5ec;
}
.m16-termin.is-pelny label {
  cursor: not-allowed;
}
.m16-termin.is-pelny .m16-termin__tresc {
  background: transparent;
  opacity: .55;
}
.m16-termin.is-pelny .m16-termin__data {
  text-decoration: line-through;
}
.m16-terminy__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 4px;
}
.m16-terminy__wiecej {
  padding: 0;
  border: 0;
  background: none;
  color: var(--headings-color, #181820);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--theme-color1, #c8964b);
  cursor: pointer;
}
.m16-terminy__wiecej:hover { color: var(--theme-color1, #c8964b); }
@media (max-width: 599px) {
  /* Telefon: dwa kafelki w rzędzie. */
  .m16-terminy__lista { margin-right: -6px; }
  .m16-termin { width: calc(50% - 6px); margin: 0 6px 6px 0; font-size: 14px; }
  .m16-termin__tresc { padding: 8px 10px 7px; }
  .m16-termin__data { white-space: normal; }
}

/* Galeria kursu. Wspólne: zaokrąglone kafle, delikatne przybliżenie i ikona powiększenia po najechaniu. */
.m16-galeria {
  --m16-galeria-odstep: 10px;
  --m16-galeria-rogi: 10px;
  --m16-galeria-rzad: clamp(120px, 14vw, 230px);
  position: relative;
}
.m16-galeria__tor {
  display: grid;
  gap: var(--m16-galeria-odstep);
}
.m16-galeria__zdjecie {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--m16-galeria-rogi);
  background: #e9edf3;
  isolation: isolate;
}
.m16-galeria .m16-galeria__zdjecie .m16-galeria__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.m16-galeria a.m16-galeria__zdjecie::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 20, 43, 0) 45%, rgba(0, 20, 43, .45) 100%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.m16-galeria a.m16-galeria__zdjecie:hover .m16-galeria__img,
.m16-galeria a.m16-galeria__zdjecie:focus-visible .m16-galeria__img {
  transform: scale(1.05);
}
.m16-galeria a.m16-galeria__zdjecie:hover::after,
.m16-galeria a.m16-galeria__zdjecie:focus-visible::after {
  opacity: 1;
}
/* Motyw gasi outline na :focus (!important) — pierścień robimy cieniem. */
.m16-galeria a.m16-galeria__zdjecie:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--theme-color1, #c8964b);
}
.m16-galeria__ikona {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 20, 43, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s, transform .3s;
}
.m16-galeria a.m16-galeria__zdjecie:hover .m16-galeria__ikona,
.m16-galeria a.m16-galeria__zdjecie:focus-visible .m16-galeria__ikona {
  opacity: 1;
  transform: none;
}

/* Siatka równych miniatur (dawny układ). */
.m16-galeria--siatka {
  --m16-galeria-odstep: 6px;
  --m16-galeria-rogi: 0px;
}
.m16-galeria--siatka .m16-galeria__tor {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.m16-galeria--siatka .m16-galeria__zdjecie {
  aspect-ratio: 1 / 1;
}

/* Mozaika: siatka 4 kolumn, wzór powtarza się co 7 zdjęć
   (duże 2×2, wysokie 1×2, dwa małe, szerokie 2×1, dwa małe). */
.m16-galeria--mozaika .m16-galeria__tor {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--m16-galeria-rzad);
  grid-auto-flow: dense;
}
.m16-galeria--mozaika .m16-galeria__zdjecie:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
.m16-galeria--mozaika .m16-galeria__zdjecie:nth-child(7n+2) { grid-row: span 2; }
.m16-galeria--mozaika .m16-galeria__zdjecie:nth-child(7n+5) { grid-column: span 2; }
.m16-galeria--mozaika .m16-galeria__zdjecie--poza { display: none; }
/* Mniej zdjęć niż pełny wzór: układy dopasowane, bez dziur. */
.m16-galeria--po-1 .m16-galeria__tor { grid-template-columns: 1fr; grid-auto-rows: calc(var(--m16-galeria-rzad) * 2); }
.m16-galeria--po-2 .m16-galeria__tor { grid-template-columns: 1fr 1fr; grid-auto-rows: calc(var(--m16-galeria-rzad) * 2); }
.m16-galeria--po-1 .m16-galeria__zdjecie,
.m16-galeria--po-2 .m16-galeria__zdjecie { grid-column: auto !important; grid-row: auto !important; }
.m16-galeria--po-3 .m16-galeria__tor { grid-template-columns: 2fr 1fr; }
.m16-galeria--po-4 .m16-galeria__tor { grid-template-columns: 2fr 1fr 1fr; }
.m16-galeria--po-3 .m16-galeria__zdjecie:nth-child(1),
.m16-galeria--po-4 .m16-galeria__zdjecie:nth-child(1) { grid-column: auto; }
.m16-galeria--po-3 .m16-galeria__zdjecie:nth-child(2),
.m16-galeria--po-5 .m16-galeria__zdjecie:nth-child(2) { grid-row: auto; }
.m16-galeria--po-5 .m16-galeria__zdjecie:nth-child(5) { grid-column: auto; }
.m16-galeria--po-6 .m16-galeria__zdjecie:nth-child(6) { grid-column: span 2; }

/* Kafel „+N zdjęć” — otwiera pokaz wszystkich zdjęć. */
.m16-galeria__wiecej {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  font-size: 15px;
  letter-spacing: .02em;
  background: rgba(0, 20, 43, .5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: background .4s;
}
.m16-galeria__wiecej b {
  color: #fff;
  font-family: var(--headings-font-family, inherit);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 500;
  line-height: 1;
}
.m16-galeria a.m16-galeria__zdjecie--wiecej:hover .m16-galeria__wiecej {
  background: rgba(0, 20, 43, .4);
}
.m16-galeria__zdjecie--wiecej .m16-galeria__ikona,
.m16-galeria__zdjecie--wiecej::after { display: none; }

/* Licznik/podpowiedź — tylko w pasku na telefonie. */
.m16-galeria__pasek { display: none; }

/* Pojawianie się kafli przy przewinięciu (włącza galeria.js). */
@media (prefers-reduced-motion: no-preference) {
  .m16-galeria--anim .m16-galeria__zdjecie {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .m16-galeria--anim.m16-galeria--widoczna .m16-galeria__zdjecie {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1024px) {
  .m16-galeria--siatka .m16-galeria__tor { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Telefon: mozaika zamienia się w przesuwany pasek ze wszystkimi zdjęciami. */
@media (max-width: 767px) {
  .m16-galeria--siatka .m16-galeria__tor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m16-galeria--mozaika .m16-galeria__tor {
    grid-template-columns: none;
    grid-auto-rows: auto;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: -20px;
    padding-right: 20px;
    scroll-padding-left: 0;
  }
  .m16-galeria--mozaika .m16-galeria__tor::-webkit-scrollbar { display: none; }
  .m16-galeria--po-1 .m16-galeria__tor { grid-auto-columns: 100%; margin-right: 0; padding-right: 0; }
  .m16-galeria--mozaika .m16-galeria__zdjecie,
  .m16-galeria--mozaika .m16-galeria__zdjecie--poza {
    display: block;
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }
  .m16-galeria--mozaika .m16-galeria__wiecej { display: none; }
  .m16-galeria--mozaika .m16-galeria__pasek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-color, #6b6b75);
  }
  .m16-galeria__licznik b { color: var(--headings-color, #181820); font-weight: 600; }
  .m16-galeria__podpowiedz::after { content: " →"; }
  .m16-galeria--anim .m16-galeria__zdjecie { transition-delay: 0s !important; }
}

/* Lista w dwóch kolumnach („Cena zawiera”): kolumny jak w gazecie — punkty idą jeden pod drugim,
   bez wyrównywania rzędów, więc dłuższy punkt nie robi dziury w drugiej kolumnie. */
.m16-lista-2kol .tm-sc-list {
  columns: 2;
  column-gap: 32px;
}
.m16-lista-2kol .tm-sc-list li {
  break-inside: avoid;
}
.m16-lista-2kol .tm-sc-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.m16-lista-2kol .tm-sc-list li > i { flex: none; margin-right: 0; }
@media (max-width: 767px) {
  .m16-lista-2kol .tm-sc-list { columns: 1; }
}

/* Zdjęcia wstawione w opis kursu (z otss.pl): umiarkowany rozmiar, bez rozpychania strony. */
.m16-kurs-pod .elementor-widget-text-editor img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 8px 0 20px;
  border-radius: 10px;
}

/* Dwie kolumny (Program | Dodatkowo, FAQ): na telefonie jedna pod drugą. */
@media (max-width: 767px) {
  .m16-dwie-kolumny > .e-con { --width: 100% !important; }
}

/* Artykuł pod treścią kursu: nagłówki o skali reszty strony, obrazki bez opływania. */
.m16-artykul h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.25;
  margin: 1.6em 0 .6em;
  clear: both;
}
.m16-artykul h3 {
  font-size: clamp(20px, 1.6vw, 24px);
  margin: 1.4em 0 .5em;
  clear: both;
}
.m16-artykul h2 b, .m16-artykul h3 b { font-weight: inherit; }
.m16-artykul .elementor-widget-text-editor > :first-child,
.m16-artykul .elementor-widget-text-editor h2:first-child { margin-top: 0; }
.m16-artykul img {
  display: block;
  float: none;
  max-width: 100%;
  height: auto;
  margin: 24px 0 8px;
}

/* Referencje: bez awatara, gdy opinia nie ma zdjęcia. */
.m16-referencje img:not([src]),
.m16-referencje img[src=""] { display: none; }
.m16-referencje .client-img:has(img[src=""]) { display: none; }

/* Formularz rezerwacji: pełna treść zgody RODO rozwijana po kliknięciu. */
.m16-zgoda-wiecej {
  margin: 4px 0 0 22px;
  font-size: 12px;
  line-height: 1.5;
}
.m16-zgoda-wiecej summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  color: var(--theme-color1, #c8964b);
  font-weight: 500;
}
.m16-zgoda-wiecej summary::-webkit-details-marker { display: none; }
.m16-zgoda-wiecej summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s;
}
.m16-zgoda-wiecej[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.m16-zgoda-wiecej summary:focus-visible { outline: 2px solid var(--theme-color1, #c8964b) !important; outline-offset: 2px; }
.m16-zgoda-wiecej p {
  margin: 8px 0 0;
  font-weight: 400;
  color: var(--text-color, #6b6b75);
}