/**
 * SkinSquare — PrestaBlog (blog list + single post)
 * Figma: Skin-Square, nodes 3084:474 (list) and 3087:772 (single), frame width 1680px.
 * Loaded only on PrestaBlog pages (theme override of grid-and-slides_page.tpl),
 * every selector is additionally scoped to body#module-prestablog-blog.
 */

#module-prestablog-blog {
  --ssb-blue: #2f86fb;
  --ssb-ink: #1a1a1a;
  --ssb-white: #fff;
  --ssb-gutter: 8.3333%; /* 140px @ 1680px */
}

/* ---------- Page container (Figma: content 140px → 1540px @ 1680px) ---------- */

#module-prestablog-blog #wrapper > .container {
  width: auto;
  max-width: none;
  padding-right: var(--ssb-gutter);
  padding-left: var(--ssb-gutter);
}

#module-prestablog-blog #wrapper > .container > .row {
  margin-right: 0;
  margin-left: 0;
}

#module-prestablog-blog #wrapper > .container > .row > #content-wrapper {
  padding-right: 0;
  padding-left: 0;
}

#module-prestablog-blog .ssb {
  color: var(--ssb-ink);
  font-family: "Lexend", sans-serif;
}

#module-prestablog-blog .ssb *,
#module-prestablog-blog .ssb *::before,
#module-prestablog-blog .ssb *::after {
  box-sizing: border-box;
}

#module-prestablog-blog .ssb a:focus-visible {
  outline: 2px solid var(--ssb-blue);
  outline-offset: 2px;
}

/* ---------- Shared: category badge on images ---------- */

#module-prestablog-blog .ssb-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 42px);
  height: 33px;
  padding: 5px 16px;
  overflow: hidden;
  color: var(--ssb-white);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ssb-white);
  -webkit-backdrop-filter: blur(3.9px);
  backdrop-filter: blur(3.9px);
  transition: background-color 0.2s ease;
}

#module-prestablog-blog .ssb-badge:hover,
#module-prestablog-blog .ssb-badge:focus {
  color: var(--ssb-white);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.2);
}

/* =====================================================================
   LIST (Figma 3084:474)
   ===================================================================== */

#module-prestablog-blog .ssb-list {
  padding-bottom: 57px; /* grid end → footer */
}

#module-prestablog-blog .ssb-list__title {
  margin: 39px 0 0; /* breadcrumb line → title */
  color: var(--ssb-ink);
  font-family: "Lexend", sans-serif;
  font-size: 31px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: -0.62px;
  text-transform: none;
}

/* Toolbar: category pills. Figma "Filtruj" / "Sortuj" are not rendered yet,
   the 44px row height of those buttons is kept so pills and grid stay in place. */
#module-prestablog-blog .ssb-toolbar {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: 26px;
}

#module-prestablog-blog .ssb-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#module-prestablog-blog .ssb-cats li {
  margin: 0;
}

#module-prestablog-blog .ssb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  padding: 5px 16px;
  color: var(--ssb-blue);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--ssb-blue);
  transition: background-color 0.2s ease;
}

#module-prestablog-blog .ssb-pill:hover,
#module-prestablog-blog .ssb-pill:focus,
#module-prestablog-blog .ssb-pill.is-active {
  color: var(--ssb-blue);
  text-decoration: none;
  background: var(--ssb-white);
}

/* Grid: 4 × 350px, no gutter, 1.667px white frame on every card */
#module-prestablog-blog .ssb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: 34px 0 0;
  list-style: none;
}

#module-prestablog-blog .ssb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

#module-prestablog-blog .ssb-card::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  content: "";
  border: 1.667px solid var(--ssb-white);
}

#module-prestablog-blog .ssb-card__media {
  display: block;
  aspect-ratio: 350 / 340;
  overflow: hidden;
  background: var(--ssb-white);
}

#module-prestablog-blog .ssb-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

#module-prestablog-blog .ssb-card__img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

#module-prestablog-blog .ssb-card:hover .ssb-card__img {
  transform: scale(1.03);
}

#module-prestablog-blog .ssb-card__badge {
  top: 17px;
  left: 21px;
}

#module-prestablog-blog .ssb-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  min-height: 180px; /* 520px card − 340px image */
  padding: 16px 17.5px 19.67px 25px;
}

#module-prestablog-blog .ssb-card__date {
  display: block;
  color: var(--ssb-blue);
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
}

#module-prestablog-blog .ssb-card__title {
  margin: 6.83px 0 0;
  color: var(--ssb-ink);
  font-family: "Lexend", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.333px;
  letter-spacing: 0;
  text-transform: none;
}

#module-prestablog-blog .ssb-card__title a {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#module-prestablog-blog .ssb-card__title a:hover,
#module-prestablog-blog .ssb-card__title a:focus {
  color: var(--ssb-blue);
  text-decoration: none;
}

#module-prestablog-blog .ssb-card__desc {
  display: -webkit-box;
  margin: 7px 0 28px;
  overflow: hidden;
  -webkit-line-clamp: 2; /* Figma: short 2-line description, keeps the 520px card */
  -webkit-box-orient: vertical;
  color: var(--ssb-ink);
  font-size: 14px;
  font-weight: 300;
  line-height: 17.5px;
}

#module-prestablog-blog .ssb-more {
  display: inline-flex;
  gap: 3.333px;
  align-items: center;
  justify-content: center;
  height: 27.5px;
  padding: 4.167px 13.333px;
  margin: auto 0 0 -3.83px; /* Figma: CTA starts at 21.17px, text at 25px */
  color: var(--ssb-blue);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  text-decoration: none;
  background: var(--ssb-white);
  border: 0.833px solid var(--ssb-white);
  transition: border-color 0.2s ease;
}

#module-prestablog-blog .ssb-more:hover,
#module-prestablog-blog .ssb-more:focus {
  color: var(--ssb-blue);
  text-decoration: none;
  border-color: var(--ssb-blue);
}

#module-prestablog-blog .ssb-more__icon {
  display: block;
  flex: 0 0 auto;
  width: 13.3333px;
  height: 13.3333px;
}

/* Pagination (native PrestaBlog markup) */
#module-prestablog-blog .ssb-pagination .prestablog_pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0;
  margin: 40px 0 0;
  background: none;
  border: 0;
}

#module-prestablog-blog .ssb-pagination .prestablog_pagination a,
#module-prestablog-blog .ssb-pagination .prestablog_pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 33px;
  height: 33px;
  padding: 5px 10px;
  margin: 0;
  color: var(--ssb-blue);
  font-size: 14px;
  line-height: normal;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--ssb-blue);
  border-radius: 0;
}

#module-prestablog-blog .ssb-pagination .prestablog_pagination .current,
#module-prestablog-blog .ssb-pagination .prestablog_pagination a:hover {
  background: var(--ssb-white);
}

#module-prestablog-blog .ssb-pagination .prestablog_pagination .disabled {
  opacity: 0.4;
}

#module-prestablog-blog .ssb-pagination .prestablog_pagination .more {
  border-color: transparent;
}

#module-prestablog-blog .ssb-empty {
  margin: 34px 0 0;
  font-size: 16px;
  font-weight: 300;
}

/* =====================================================================
   SINGLE POST (Figma 3087:772)
   ===================================================================== */

#module-prestablog-blog .ssb-article {
  padding-bottom: 65px; /* + 28px last paragraph margin = 93px to footer */
}

/* Hero: text column (699px) + image (701 × 677px) @ 1680px */
#module-prestablog-blog .ssb-hero {
  display: grid;
  grid-template-columns: minmax(0, 699fr) minmax(0, 701fr);
  align-items: center;
}

#module-prestablog-blog .ssb-hero--no-image {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 60px;
}

#module-prestablog-blog .ssb-hero__text {
  min-width: 0;
  padding-right: 40px;
}

#module-prestablog-blog .ssb-hero__date {
  display: block;
  color: var(--ssb-blue);
  font-size: 14px;
  font-weight: 400;
  line-height: 17.5px;
}

#module-prestablog-blog .ssb-hero__title {
  margin: 13.5px 0 0;
  color: var(--ssb-ink);
  font-family: "Lexend", sans-serif;
  font-size: 39px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: -0.78px;
  text-transform: none;
}

#module-prestablog-blog .ssb-hero__lead {
  max-width: 521px;
  margin: 20px 0 0;
  color: var(--ssb-ink);
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}

#module-prestablog-blog .ssb-hero__media {
  position: relative;
  min-width: 0;
  aspect-ratio: 701 / 677;
  overflow: hidden;
  background: var(--ssb-white);
}

#module-prestablog-blog .ssb-hero__img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

#module-prestablog-blog .ssb-hero__badge {
  top: 33px;
  left: 30px;
  font-size: 16px;
}

/* Article content: starts at 292px, 1108px wide @ 1680px (152px inside the 1400px container) */
#module-prestablog-blog .ssb-article__body {
  max-width: 1108px;
  margin: 99px 0 0 10.857%;
}

#module-prestablog-blog .ssb-article__body #prestablogfont {
  color: var(--ssb-ink);
  font-family: "Lexend", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  overflow-wrap: break-word;
}

#module-prestablog-blog .ssb-article__body #prestablogfont > :first-child {
  margin-top: 0;
}

#module-prestablog-blog .ssb-article__body #prestablogfont p,
#module-prestablog-blog .ssb-article__body #prestablogfont ul,
#module-prestablog-blog .ssb-article__body #prestablogfont ol,
#module-prestablog-blog .ssb-article__body #prestablogfont blockquote,
#module-prestablog-blog .ssb-article__body #prestablogfont table,
#module-prestablog-blog .ssb-article__body #prestablogfont figure {
  margin: 0 0 28px;
  color: var(--ssb-ink);
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}

#module-prestablog-blog .ssb-article__body #prestablogfont ul,
#module-prestablog-blog .ssb-article__body #prestablogfont ol {
  padding-left: 22px;
}

#module-prestablog-blog .ssb-article__body #prestablogfont ul {
  list-style: disc;
}

#module-prestablog-blog .ssb-article__body #prestablogfont ol {
  list-style: decimal;
}

#module-prestablog-blog .ssb-article__body #prestablogfont li {
  margin: 0;
}

#module-prestablog-blog .ssb-article__body #prestablogfont h1,
#module-prestablog-blog .ssb-article__body #prestablogfont h2 {
  margin: 53px 0 20px; /* collapses with the 28px paragraph margin → 53px (Figma) */
  color: var(--ssb-ink);
  font-family: "Lexend", sans-serif;
  font-size: 39px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: -0.78px;
  text-transform: none;
}

#module-prestablog-blog .ssb-article__body #prestablogfont h3 {
  margin: 43px 0 20px; /* collapses with the 28px paragraph margin → 43px (Figma) */
  color: var(--ssb-ink);
  font-family: "Lexend", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: -0.48px;
  text-transform: none;
}

#module-prestablog-blog .ssb-article__body #prestablogfont h4,
#module-prestablog-blog .ssb-article__body #prestablogfont h5,
#module-prestablog-blog .ssb-article__body #prestablogfont h6 {
  margin: 15px 0 12px;
  color: var(--ssb-ink);
  font-family: "Lexend", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  text-transform: none;
}

#module-prestablog-blog .ssb-article__body #prestablogfont a {
  color: var(--ssb-blue);
  text-decoration: underline;
}

#module-prestablog-blog .ssb-article__body #prestablogfont strong,
#module-prestablog-blog .ssb-article__body #prestablogfont b {
  font-weight: 500;
}

#module-prestablog-blog .ssb-article__body #prestablogfont blockquote {
  padding-left: 20px;
  border-left: 2px solid var(--ssb-blue);
}

#module-prestablog-blog .ssb-article__body #prestablogfont img,
#module-prestablog-blog .ssb-article__body #prestablogfont iframe,
#module-prestablog-blog .ssb-article__body #prestablogfont video {
  max-width: 100%;
  height: auto;
}

#module-prestablog-blog .ssb-article__body #prestablogfont table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* =====================================================================
   RESPONSIVE (Figma has desktop only — same design language, fluid)
   ===================================================================== */

@media (max-width: 1199px) {
  #module-prestablog-blog .ssb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  #module-prestablog-blog .ssb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #module-prestablog-blog .ssb-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 32px;
  }

  #module-prestablog-blog .ssb-hero__media {
    order: -1;
  }

  #module-prestablog-blog .ssb-hero__text {
    padding: 32px 0 0;
  }

  #module-prestablog-blog .ssb-hero--no-image .ssb-hero__text {
    padding-top: 0;
  }

  #module-prestablog-blog .ssb-hero__lead {
    max-width: none;
  }

  #module-prestablog-blog .ssb-article__body {
    max-width: none;
    margin: 64px 0 0;
  }
}

@media (max-width: 767px) {
  #module-prestablog-blog {
    --ssb-gutter: 16px;
  }

  #module-prestablog-blog .ssb-list__title {
    margin-top: 24px;
    line-height: 44px;
  }

  #module-prestablog-blog .ssb-toolbar {
    min-height: 0;
    margin-top: 16px;
  }

  #module-prestablog-blog .ssb-grid {
    margin-top: 24px;
  }

  #module-prestablog-blog .ssb-list {
    padding-bottom: 40px;
  }

  #module-prestablog-blog .ssb-hero {
    padding-top: 16px;
  }

  #module-prestablog-blog .ssb-hero__badge {
    top: 16px;
    left: 16px;
  }

  #module-prestablog-blog .ssb-hero__text {
    padding-top: 24px;
  }

  #module-prestablog-blog .ssb-hero__title {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.6px;
  }

  #module-prestablog-blog .ssb-article__body {
    margin-top: 40px;
  }

  #module-prestablog-blog .ssb-article__body #prestablogfont h1,
  #module-prestablog-blog .ssb-article__body #prestablogfont h2 {
    margin-top: 40px;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.6px;
  }

  #module-prestablog-blog .ssb-article__body #prestablogfont h3 {
    margin-top: 32px;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.44px;
  }

  #module-prestablog-blog .ssb-article {
    padding-bottom: 32px;
  }
}

@media (max-width: 575px) {
  #module-prestablog-blog .ssb-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #module-prestablog-blog .ssb-card__body {
    min-height: 0;
  }
}