/* Link Preview cards – Hub tokens (--dh-*) via lp-theme-*.css + bridge */

.dlp-item {
  /* --lp-* tokens: lp-theme-*.css + Hub bridge (not :root --dh-*) */
  --dlp-text-pad-x: 12px;
  --dlp-text-pad-top: 12px;
  --dlp-text-pad-bottom: 12px;
  --dlp-text-gap: 8px;
  list-style: none !important;
  list-style-type: none !important;
  border-radius: 5px;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
  background-color: var(--lp-surface, #ffffff) !important;
  color: var(--lp-text, #333333) !important;
  border: 1px solid var(--lp-border, #bbbbbb) !important;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
  max-width: 100%;
}

/* Stelle sicher, dass Bilder keine Margin haben und als Block-Elemente dargestellt werden */
.dlp-item img {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  vertical-align: top;
  max-width: 100%;
  border: none;
  outline: none;
  aspect-ratio: 1200 / 600;
  object-fit: cover;
  object-position: center;
}

/* Separate Regel für generierte Screenshot/OG-Bilder */
.dlp-item .dlp-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 1200 / 600;
  object-fit: cover;
  object-position: center;
}

/* Legacy: top-level link wraps only the image (sites gallery children) */
.dlp-item > a:not(.dlp-card-link) {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  line-height: 0;
  text-decoration: none;
  border: none;
  outline: none;
  width: 100%;
  aspect-ratio: 1200 / 600;
  overflow: hidden;
  flex: 0 0 auto;
}

.dlp-item > a:not(.dlp-card-link) > .dlp-image {
  width: 100%;
  height: 100% !important;
}

/* Custom heading (title attribute) – top + sides, no bottom gap */
.dlp-item .dlp-heading {
  margin: 0 !important;
  padding: var(--dlp-text-pad-top) var(--dlp-text-pad-x) var(--dlp-text-gap) var(--dlp-text-pad-x) !important;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

/* Page title below image */
.dlp-item h3 {
  margin: var(--dlp-text-gap) 0 0 0 !important;
  padding: 0 var(--dlp-text-pad-x) 0 var(--dlp-text-pad-x) !important;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* First text block directly under image (no custom h2) */
.dlp-item > a + h3 {
  margin-top: var(--dlp-text-pad-top) !important;
}

.dlp-item h3 a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--lp-accent) !important;
}

.dlp-item p {
  margin: var(--dlp-text-gap) 0 0 0 !important;
  padding: 0 var(--dlp-text-pad-x) 0 var(--dlp-text-pad-x) !important;
  line-height: 1.5;
}

/* URL-Link mit Ellipsis wenn zu lang */
.dlp-item p.dlp-link {
  margin-top: var(--dlp-text-gap) !important;
  margin-bottom: 0 !important;
  padding: 0 var(--dlp-text-pad-x) var(--dlp-text-pad-bottom) var(--dlp-text-pad-x) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.5;
  color: var(--lp-accent) !important;
}

/* Description as last visible block (no link line) */
.dlp-item p:not(.dlp-link):last-child {
  padding-bottom: var(--dlp-text-pad-bottom) !important;
}

/* Only title + description, no link */
.dlp-item h3:last-child {
  padding-bottom: var(--dlp-text-pad-bottom) !important;
}

/* Only custom heading, no image/text below */
.dlp-item .dlp-heading:only-child {
  padding-bottom: var(--dlp-text-pad-bottom) !important;
}

.dlp-item p.dlp-link a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  color: var(--lp-accent) !important;
}

.dlp-item p.dlp-info {
  margin-top: var(--dlp-text-gap) !important;
  margin-bottom: 0 !important;
  padding: 0 var(--dlp-text-pad-x) var(--dlp-text-pad-bottom) var(--dlp-text-pad-x) !important;
  line-height: 1.5;
}

/* Whole-card link (Reference Hub style): one hit target + image zoom inside media frame */
.dlp-item--card-hit {
  overflow: visible;
  height: 100%;
}

.dlp-item--card-hit .dlp-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  color: inherit !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  width: 100%;
  flex: 1 1 auto;
}

.dlp-item--card-hit .dlp-media {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1200 / 600;
  flex: 0 0 auto;
  line-height: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  contain: paint;
}

.dlp-item--card-hit .dlp-media .dlp-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease-in-out;
  transform: scale(1);
  transform-origin: center center;
}

.dlp-item--card-hit:hover .dlp-media .dlp-image,
.dlp-item--card-hit:focus-within .dlp-media .dlp-image {
  transform: scale(1.05);
}

.dlp-item--card-hit .dlp-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  flex-shrink: 0;
  min-width: 0;
  line-height: 1.5;
}

.dlp-item--card-hit .dlp-card-body h3 {
  margin: calc(var(--dlp-text-pad-top) + 4px) 0 0 0 !important;
  padding: 0 var(--dlp-text-pad-x) 0 var(--dlp-text-pad-x) !important;
  color: var(--lp-text, #333333) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dlp-item--card-hit .dlp-card-body .dlp-card-desc,
.dlp-item--card-hit .dlp-card-body p.dlp-card-desc {
  margin: var(--dlp-text-gap) 0 0 0 !important;
  padding: 0 var(--dlp-text-pad-x) 0 var(--dlp-text-pad-x) !important;
  color: color-mix(in srgb, var(--lp-text, #333333) 72%, transparent) !important;
  white-space: normal !important;
  line-height: 1.5;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  flex: 0 1 auto;
}

/* Optional line clamp via ellipsis="3" / ellipsis="4lines" on gallery or child preview */
.dlp-item--card-hit .dlp-card-body .dlp-card-desc.dlp-card-desc--clamp,
.dlp-item--card-hit .dlp-card-body p.dlp-card-desc.dlp-card-desc--clamp,
.dirschl-lp-list .dlp-list-desc.dlp-card-desc--clamp {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: var(--dlp-desc-lines, 3) !important;
  line-clamp: var(--dlp-desc-lines, 3) !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  flex: 0 0 auto !important;
  max-width: 100%;
}

.dlp-item--card-hit .dlp-card-body p.dlp-link {
  margin: calc(var(--dlp-text-gap) + 4px) 0 0 0 !important;
  padding: 0 var(--dlp-text-pad-x) var(--dlp-text-pad-bottom) var(--dlp-text-pad-x) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--lp-accent) !important;
  font-size: 0.92em;
  line-height: 1.4;
}

.dlp-item--card-hit .dlp-card-body h3:last-child {
  padding-bottom: var(--dlp-text-pad-bottom) !important;
}

/* show=…0 (no URL line): bottom pad on body, not on description text */
.dlp-item--card-hit .dlp-card-body:not(:has(.dlp-link)) {
  padding-bottom: var(--dlp-text-pad-bottom);
}

.dlp-item--card-hit .dlp-card-body .dlp-card-desc:last-child,
.dlp-item--card-hit .dlp-card-body p.dlp-card-desc:last-child {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.dlp-item--card-hit .dlp-heading + .dlp-card-link .dlp-card-body h3 {
  margin-top: var(--dlp-text-gap) !important;
}

/* Container für die Bilder mit festem Seitenverhältnis */
.dlp-img-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1200 / 600;
}

/* Beide Bilder werden absolut positioniert, sodass sie den Container ausfüllen */
.dlp-img-container .dlp-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.3s ease;
}

/* Standard: Main-Image sichtbar, Screenshot unsichtbar */
.dlp-img-container .main-image {
  opacity: 1;
  z-index: 1;
}

.dlp-img-container .screenshot-image {
  opacity: 0;
  z-index: 2;
}

/* Beim Hover: Main-Image ausblenden, Screenshot einblenden */
.dlp-item > a:not(.dlp-card-link):hover .dlp-img-container .main-image,
.dlp-img-container:hover .main-image {
  opacity: 0;
}

.dlp-item > a:not(.dlp-card-link):hover .dlp-img-container .screenshot-image,
.dlp-img-container:hover .screenshot-image {
  opacity: 1;
}

/* Divi/Theme: ul/li padding & bullets inside gallery/carousel (not content lists) */
#left-area .dirschl-lp-gallery-wrapper ul,
#left-area .dirschl-lp-gallery-wrapper ul li,
#left-area .seo-carousel-wrapper ul,
#left-area .seo-carousel-wrapper ul li,
.entry-content .dirschl-lp-gallery-wrapper ul,
.entry-content .dirschl-lp-gallery-wrapper ul li,
.entry-content .seo-carousel-wrapper ul,
.entry-content .seo-carousel-wrapper ul li,
.et-l--body .dirschl-lp-gallery-wrapper ul,
.et-l--body .dirschl-lp-gallery-wrapper ul li,
.et-l--body .seo-carousel-wrapper ul,
.et-l--body .seo-carousel-wrapper ul li,
.et-l--footer .dirschl-lp-gallery-wrapper ul,
.et-l--footer .dirschl-lp-gallery-wrapper ul li,
.et-l--footer .seo-carousel-wrapper ul,
.et-l--footer .seo-carousel-wrapper ul li,
.et-l--header .dirschl-lp-gallery-wrapper ul,
.et-l--header .dirschl-lp-gallery-wrapper ul li,
.et-l--header .seo-carousel-wrapper ul,
.et-l--header .seo-carousel-wrapper ul li,
.et_pb_text .dirschl-lp-gallery-wrapper ul,
.et_pb_text .seo-carousel-wrapper ul,
.et_pb_code_inner .dirschl-lp-gallery-wrapper ul,
.et_pb_code_inner .seo-carousel-wrapper ul {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
}

.dirschl-lp-gallery-wrapper .dirschl-lp-gallery-grid .dlp-item,
.seo-carousel-wrapper .seo-carousel-track .dlp-item {
  /* Card padding stays on .dlp-item; only cancel Divi list indent */
  margin-left: 0 !important;
}

/* Whole-card link: URL line is plain text in p.dlp-link (no nested <a>) */
.dlp-item--card-hit .dlp-card-link .dlp-card-body p.dlp-link,
#left-area .dlp-item--card-hit .dlp-card-link p.dlp-link,
.entry-content .dlp-item--card-hit .dlp-card-link p.dlp-link,
.et-l--body .dlp-item--card-hit .dlp-card-link p.dlp-link,
.et_pb_text .dlp-item--card-hit .dlp-card-link p.dlp-link,
.et_pb_code_inner .dlp-item--card-hit .dlp-card-link p.dlp-link {
  color: var(--lp-accent) !important;
}