/* Platecraft Addons – Posts widget (meta item styles: blog.css). Every size and color is a CSS variable or a direct style
   control, so the defaults below are only a starting point. */

/* ---------- Posts ---------- */
.ppo .ppo__grid {
  display: grid;
  grid-template-columns: repeat(var(--ppo-cols, 3), minmax(0, 1fr));
  gap: var(--ppo-gap-y, var(--ppo-gap, 24px)) var(--ppo-gap, 24px);
  grid-auto-flow: row dense;
}
.ppo .ppo__empty {
  margin: 0;
}

/* Masonry: CSS columns until posts.js switches to a grid of thin rows
   (reading order 1, 2, 3 … left to right). */
.ppo--masonry .ppo__grid {
  display: block;
  column-count: var(--ppo-cols, 3);
  column-gap: var(--ppo-gap, 24px);
}
.ppo--masonry .ppo__grid > .ppo__item {
  break-inside: avoid;
  margin-bottom: var(--ppo-gap-y, var(--ppo-gap, 24px));
}
.ppo--masonry .ppo__grid.is-js-masonry {
  display: grid;
  column-count: auto;
  grid-auto-rows: var(--ppo-mu, 4px);
  row-gap: 0;
  align-items: start;
}
.ppo--masonry .ppo__grid.is-js-masonry > .ppo__item {
  grid-row-end: span var(--ppo-h, 50);
}
.ppo.ppo--masonry .ppo__media .ppo__img {
  aspect-ratio: var(--ppo-ratio, auto);
}

/* ---------- Card ---------- */
.ppo .ppo__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: var(--ppo-card-shadow, 0 4px 18px rgba(0, 0, 0, 0.07));
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.ppo .ppo__card:hover {
  box-shadow: var(--ppo-card-shadow-h, var(--ppo-card-shadow, 0 4px 18px rgba(0, 0, 0, 0.07)));
}
.ppo--grid .ppo__card,
.ppo--carousel .ppo__card {
  height: 100%;
}

/* Image */
.ppo .ppo__media {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 0 solid transparent;
  isolation: isolate;
}
.ppo .ppo__img-link {
  display: block;
  height: 100%;
}
.ppo .ppo__media .ppo__img {
  display: block;
  width: 100%;
  max-width: none;
  height: var(--ppo-img-h, auto);
  aspect-ratio: var(--ppo-ratio, 3 / 2);
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  transition: transform var(--ppo-speed, 500ms) ease, filter var(--ppo-speed, 500ms) ease;
}
.ppo .ppo__card:hover .ppo__img {
  transform: scale(var(--ppo-zoom, 1.06));
}
.ppo .ppo__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.3s ease;
}

/* Elements placed on the image */
.ppo .ppo__zone {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ppo-zone-gap, 8px);
  max-width: calc(100% - 2 * var(--ppo-zone-x, 16px));
}
.ppo .ppo__zone--top-left,
.ppo .ppo__zone--top-center,
.ppo .ppo__zone--top-right { top: var(--ppo-zone-y, 16px); }
.ppo .ppo__zone--bottom-left,
.ppo .ppo__zone--bottom-center,
.ppo .ppo__zone--bottom-right { bottom: var(--ppo-zone-y, 16px); }
.ppo .ppo__zone--top-left,
.ppo .ppo__zone--bottom-left { left: var(--ppo-zone-x, 16px); }
.ppo .ppo__zone--top-right,
.ppo .ppo__zone--bottom-right { right: var(--ppo-zone-x, 16px); justify-content: flex-end; }
.ppo .ppo__zone--top-center,
.ppo .ppo__zone--bottom-center { left: 50%; transform: translateX(-50%); justify-content: center; }
.ppo .ppo__zone--center {
  top: 50%;
  left: 50%;
  justify-content: center;
  transform: translate(-50%, -50%);
}
.ppo .ppo__zone .ppo__part {
  flex: 0 0 auto;
  max-width: 100%;
  padding: 5px 10px;
  border: 0 solid transparent;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: var(--ppo-zone-shadow, none);
  color: #222;
  font-size: 13px;
  line-height: 1.3;
}
.ppo .ppo__zone .ppo__part a {
  color: inherit;
}
.ppo .ppo__zone .ppo__part--badge,
.ppo .ppo__zone .ppo__part--title,
.ppo .ppo__zone .ppo__part--excerpt {
  padding: 0;
  background: none;
  box-shadow: none;
}
.ppo .ppo__zone .ppo__part--title,
.ppo .ppo__zone .ppo__part--excerpt {
  color: #fff;
}
.ppo .ppo__zone .ppo__part--terms .pl-term {
  padding: 0;
  background: none;
}

/* Text area */
.ppo .ppo__body {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: var(--ppo-body-justify, flex-start);
  gap: var(--ppo-part-gy, 10px);
  min-width: 0;
  padding: 20px 22px 22px;
  border: 0 solid transparent;
  box-shadow: var(--ppo-body-shadow, none);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ppo .ppo__card:hover .ppo__body {
  box-shadow: var(--ppo-body-shadow-h, var(--ppo-body-shadow, none));
}
.ppo .ppo__parts,
.ppo .ppo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--ppo-items, center);
  align-content: flex-start;
  gap: var(--ppo-part-gy, 10px) var(--ppo-part-gx, 12px);
  min-width: 0;
}
/* Columns: elements of column 2 / 3 beside those of column 1; "Stick to the Bottom" ends its column. */
.ppo .ppo__cols {
  display: flex;
  flex: 1 1 auto;
  flex-direction: var(--ppo-cols-dir, row);
  align-items: var(--ppo-cols-align, stretch);
  justify-content: var(--ppo-cols-justify, flex-start);
  gap: var(--ppo-col-gap, 20px);
  min-width: 0;
}
.ppo .ppo__col {
  display: flex;
  flex-direction: column;
  gap: var(--ppo-part-gy, 10px);
  min-width: 0;
}
/* Column widths count side by side; one under the other (--ppo-col-stacked) each column takes its content's height. */
.ppo .ppo__col--1 { flex: var(--ppo-col-stacked, var(--ppo-col1, 1 1 0)); }
.ppo .ppo__col--2 { flex: var(--ppo-col-stacked, var(--ppo-col2, 0 1 auto)); }
.ppo .ppo__col--3 { flex: var(--ppo-col-stacked, var(--ppo-col3, 0 1 auto)); }
.ppo .ppo__col-bottom {
  margin-top: auto;
}
.ppo .ppo__foot {
  box-sizing: border-box;
  margin-top: auto;
  border: 0 solid transparent;
  box-shadow: var(--ppo-foot-shadow, none);
}
/* Elements change smoothly when the card is hovered (their own hover colors, background, border, shadow). */
.ppo .ppo__part {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ppo .ppo__body .ppo__part {
  box-sizing: border-box;
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--ppo-justify, flex-start);
}
.ppo .ppo__body .ppo__part--title,
.ppo .ppo__body .ppo__part--excerpt {
  display: block;
}

/* Title, excerpt, divider */
.ppo .ppo__title {
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1.35;
  word-break: break-word;
}
.ppo .ppo__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ppo .ppo__excerpt {
  margin: 0;
  color: color-mix(in srgb, currentColor 85%, transparent);
}
.ppo .ppo__divider {
  display: block;
  width: 100%;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.ppo .ppo__body .ppo__part--divider {
  display: block;
}
/* The featured image as an element among the others */
.ppo .ppo__thumb-link {
  display: block;
  line-height: 0;
}
.ppo .ppo__thumb {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: inherit;
}

/* Meta in cards */
.ppo .ppo__body .pl-meta__item {
  font-size: 14px;
  color: color-mix(in srgb, currentColor 90%, transparent);
}
.ppo .ppo__part--terms .pl-meta__value {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ppo-terms-gap, 6px);
}
.ppo .ppo__part--terms .pl-term {
  display: inline-block;
  border: 0 solid transparent;
  box-shadow: var(--ppo-terms-shadow, none);
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.ppo .ppo__part--terms a.pl-term:hover {
  box-shadow: var(--ppo-terms-shadow-h, var(--ppo-terms-shadow, none));
}

/* Date badge */
.ppo .ppo__date-badge {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 8px 10px;
  border: 0 solid transparent;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: var(--ppo-badge-shadow, 0 2px 10px rgba(0, 0, 0, 0.12));
  color: #222;
  line-height: 1.1;
  text-align: center;
}
.ppo .ppo__date-day {
  font-size: 22px;
  font-weight: 700;
}
.ppo .ppo__date-month {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Read more */
.ppo .ppo__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ppo-btn-gap, 8px);
  border: 0 solid transparent;
  box-shadow: var(--ppo-btn-shadow, none);
  color: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ppo .ppo__btn:hover {
  box-shadow: var(--ppo-btn-shadow-h, var(--ppo-btn-shadow, none));
}
.ppo .ppo__btn--button {
  padding: 10px 18px;
  border-radius: 8px;
  background-color: #222;
  color: #fff;
}
.ppo .ppo__btn--button:hover {
  background-color: #000;
  color: #fff;
}
.ppo .ppo__btn-icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--ppo-btn-box, auto);
  height: var(--ppo-btn-box, auto);
  border-radius: 50%;
  font-size: var(--ppo-btn-icon, 0.9em);
  line-height: 1;
  transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.ppo .ppo__btn-icon > * {
  transition: transform 0.25s ease;
}
.ppo .ppo__btn-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ---------- Card layouts ---------- */
/* Image on the side (left, right, or in turn). */
.ppo .ppo__card--side,
.ppo .ppo__card--right {
  flex-direction: var(--ppo-dir, row);
}
.ppo .ppo__card--right {
  flex-direction: var(--ppo-dir-rev, row-reverse);
}
.ppo .ppo__card--side > .ppo__media,
.ppo .ppo__card--right > .ppo__media {
  flex: 0 0 var(--ppo-media-basis, var(--ppo-side-w, 40%));
  max-width: 100%;
}
.ppo .ppo__card--side > .ppo__media .ppo__img-link,
.ppo .ppo__card--right > .ppo__media .ppo__img-link {
  height: 100%;
}
.ppo .ppo__card--side > .ppo__media .ppo__img,
.ppo .ppo__card--right > .ppo__media .ppo__img {
  height: var(--ppo-img-h, 100%);
  min-height: 100%;
}

/* Text over the image. */
.ppo .ppo__card--overlay {
  min-height: var(--ppo-ov-h, 360px);
  color: #fff;
}
.ppo .ppo__card--overlay > .ppo__media {
  position: absolute;
  inset: 0;
}
.ppo .ppo__card--overlay > .ppo__media .ppo__img {
  height: 100%;
  aspect-ratio: auto;
}
.ppo .ppo__card--overlay .ppo__overlay {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
}
.ppo .ppo__card--overlay > .ppo__body {
  position: relative;
  z-index: 3;
  justify-content: var(--ppo-body-justify, flex-end);
  pointer-events: none;
}
.ppo .ppo__card--overlay > .ppo__body a {
  pointer-events: auto;
}
/* Over the image the footer follows the text (all of it sits at the chosen position). */
.ppo .ppo__card--overlay .ppo__foot {
  margin-top: 0;
}
.ppo .ppo__card--overlay .ppo__title,
.ppo .ppo__card--overlay .pl-meta__item {
  color: inherit;
}
.ppo .ppo__card--overlay .ppo__divider {
  border-top-color: rgba(255, 255, 255, 0.3);
}
.ppo .ppo__card--overlay.ppo__card--no-image {
  background-color: #222;
}

@media (prefers-reduced-motion: reduce) {
  .ppo .ppo__card,
  .ppo .ppo__img {
    transition: none;
  }
}