.d35-card-post {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100%;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--d35-color-border);
  border-radius: var(--d35-radius);
  background: var(--d35-color-dark);
  color: var(--d35-color-surface);
}

.brxe-shortcode:has(> .d35-card-post) {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.brxe-shortcode > .d35-card-post {
  height: 100%;
}

.d35-card-post--clickable {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

/* Kein Lift (der schnitt die Karte in overflow-Slidern ab) — stattdessen färbt
   sich der Rand in der Primärfarbe ein. Der inset-Ring bleibt vollständig
   innerhalb der Karte und wird daher im Slider nie abgeschnitten. */
.d35-card-post--clickable:hover {
  border-color: var(--d35-color-primary);
  box-shadow: inset 0 0 0 2px var(--d35-color-primary);
  background-color: color-mix(in srgb, var(--d35-color-primary) 14%, var(--d35-color-dark));
}

.d35-card-post--layout-inline {
  display: grid;
  grid-template-columns: minmax(15rem, 0.95fr) minmax(0, 1.2fr);
  align-items: stretch;
}

.d35-card-post__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  padding: 0.35rem 0.7rem;
  border-radius: var(--d35-radius-button);
  background: var(--d35-color-text);
  color: var(--d35-color-surface);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.d35-card-post__media {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--d35-color-light);
}

.d35-card-post--ratio-4-3 .d35-card-post__media {
  aspect-ratio: 4 / 3;
}

.d35-card-post--ratio-3-2 .d35-card-post__media {
  aspect-ratio: 3 / 2;
}

.d35-card-post--ratio-2-3 .d35-card-post__media {
  aspect-ratio: 2 / 3;
}

.d35-card-post--ratio-1-1 .d35-card-post__media {
  aspect-ratio: 1 / 1;
}

.d35-card-post--layout-inline .d35-card-post__media {
  aspect-ratio: auto;
  min-height: 100%;
}

.d35-card-post__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.d35-card-post__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  padding: 1.25rem;
}

.d35-card-post__header {
  display: grid;
  gap: 0.35rem;
}

.d35-card-post__preheading {
  color: color-mix(in srgb, var(--d35-color-surface) 62%, transparent);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.d35-card-post__title {
  margin: 0;
  color: inherit;
  font-size: 1.35rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.d35-card-post__body {
  flex: 1 1 auto;
  min-height: 0;
  color: color-mix(in srgb, var(--d35-color-surface) 82%, transparent);
  font-size: 0.98rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.d35-card-post__body:empty {
  display: none;
}

.d35-card-post__body > :first-child {
  margin-top: 0;
}

.d35-card-post__body > :last-child {
  margin-bottom: 0;
}

.d35-card-post__footer {
  display: flex;
  margin-top: auto;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.d35-card-post__hint {
  flex: 1 1 10rem;
  min-width: 0;
  color: color-mix(in srgb, var(--d35-color-surface) 62%, transparent);
  font-size: 0.9rem;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.d35-card-post__link {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(100%, 100%);
  white-space: normal;
  text-align: right;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.d35-card-post__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

.d35-card-post__overlay-link:focus-visible {
  outline: 2px solid var(--d35-color-primary);
  outline-offset: -2px;
}

.d35-card-post--layout-inline .d35-card-post__content {
  min-height: 100%;
}

/* Overlay layout: the preview image fills the whole card as a background, a
   gradient scrim (dark at the bottom, clearing toward the top) keeps the text
   readable, and all content is anchored to the bottom on top of the image.
   Empty fields simply collapse, so shorter cards keep everything low. */
.d35-card-post--layout-overlay {
  min-height: clamp(20rem, 28vw, 26rem);
  justify-content: flex-end;
  background: var(--d35-color-dark);
}

.d35-card-post--layout-overlay .d35-card-post__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  background: var(--d35-color-dark);
}

/* Gradient scrim on the card itself (not the image), so the text stays readable
   even when a hand-picked post has no preview image. */
.d35-card-post--layout-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.55) 38%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

/* Primary-tinted scrim, as an alternative to the plain black one. */
.d35-card-post--layout-overlay.d35-card-post--overlay-primary::before {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--d35-color-primary) 92%, #000) 0%,
    color-mix(in srgb, var(--d35-color-primary) 55%, transparent) 42%,
    transparent 100%
  );
}

.d35-card-post--layout-overlay .d35-card-post__content {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: auto;
  gap: 0.65rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.d35-card-post--layout-overlay .d35-card-post__body {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.92);
}

.d35-card-post--layout-overlay .d35-card-post__preheading,
.d35-card-post--layout-overlay .d35-card-post__hint {
  color: rgba(255, 255, 255, 0.82);
}

.d35-card-post--layout-overlay .d35-card-post__footer {
  margin-top: 0.35rem;
  border-top-color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 640px) {
  .d35-card-post--layout-inline {
    grid-template-columns: minmax(0, 1fr);
  }

  .d35-card-post__content {
    padding: 1rem;
  }

  .d35-card-post__footer {
    align-items: flex-start;
    flex-direction: column;
  }
}