/* Projekt Slider Block - lokal styles (DX prefix + root variables) */

.dx-projekt-slider {
  position: relative;
  overflow: hidden;
}

/* Card meta sizing variables */
.dx-projekt-slider {
  --projekt-meta-height: 3.2rem; /* height of the bottom meta row (year + arrow) */
  --projekt-meta-gap: 1rem;      /* distance from card bottom */
  /* title sizing: number of lines and per-line height (adjust per block if needed) */
  --projekt-title-line-height: 1.2em;
  --projekt-title-lines: 2;
  --projekt-title-height: calc(var(--projekt-title-lines) * var(--projekt-title-line-height));
}

.dx-projekt-slider .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.dx-projekt-slider .swiper-slide {
  width: auto;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.dx-projekt-slider .dx-projekt-card__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition: transform 360ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  transform: scale(1);
}

/* card layout */
.dx-projekt-slider .dx-projekt-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-white);
  border-radius: 0;
  overflow: hidden;
  flex: 1 1 auto;
  height: 100%;
}
.dx-projekt-slider .dx-projekt-card__title{
  font-weight: var(--font-weight-semi-bold);
  display:-webkit-box;
  -webkit-line-clamp: 2;
  overflow:hidden;
  height: 3.7rem;
}
@media (max-width: 1199.98px) {
.dx-projekt-slider .dx-projekt-card__title{
  height: 3rem;
}}


/* media/body visuals and clamping now live in block-level slider styles */
.dx-projekt-slider .dx-projekt-card__media { height: 20rem; background: #f6f6f6; overflow: hidden; }
.dx-projekt-slider .dx-projekt-card__body { padding: var(--space-md); border-left: 1px solid var(--color-secondary-alt); border-right: 1px solid var(--color-secondary-alt); border-bottom: 1px solid var(--color-secondary-alt); display:grid; 
    grid-template-rows: 4rem 1fr; gap: .5rem; }

/* Grid layout for consistent card heights
   - Use grid on the link so image + body form rows
   - body uses flex to push meta-row to the bottom */
.dx-projekt-slider .dx-projekt-card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  text-decoration: none;
}
.dx-projekt-slider .dx-projekt-card__media { grid-row: 1; }
.dx-projekt-slider .dx-projekt-card__body { grid-row: 2; min-height: 0; }

/* Clamp description/meta to avoid exploding card heights */
.dx-projekt-slider .dx-projekt-card__meta {
  color: #777;
  margin: 0 0 0.5rem;
  padding-top: 0.25rem;
  /* meta rows: two fixed-height rows (place + type). Truncate overflow with ellipsis. */
  display: grid;
  grid-template-rows: var(--projekt-meta-row-height, 1.2rem) var(--projekt-meta-row-height, 1.2rem);
  gap: 0.25rem;
  align-items: start;
}
.dx-projekt-slider .dx-projekt-card__excerpt { display:none; }
/* Single-line clamp for place/type inside the meta grid rows */
.dx-projekt-slider .dx-projekt-card__place,
.dx-projekt-slider .dx-projekt-card__type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--projekt-meta-row-height, 1.2rem);
  max-height: var(--projekt-meta-row-height, 1.2rem);
  display: block;
}

/* Absolute footer (year + arrow) pinned to bottom of card. */

.dx-projekt-slider .dx-projekt-card__meta-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--projekt-meta-gap);
  height: var(--projekt-meta-height);
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  box-sizing: border-box;
}

/* Reserve space inside the body so content won't be hidden behind absolute meta */
.dx-projekt-slider .dx-projekt-card__body { padding-bottom: 5rem; }

/* Responsive: on small screens keep meta in flow to avoid overlap */
@media (max-width: 767.98px) {
  .dx-projekt-slider .dx-projekt-card__meta-row { position: static; height: auto; padding: 0; margin-top: 1rem; }
  .dx-projekt-slider .dx-projekt-card__body { padding-bottom: var(--space-md); }
}
.dx-projekt-slider .dx-projekt-card__year { font-weight:700; color:var(--color-text); }

/* CTA arrow on same level as year (no absolute positioning) */
.dx-projekt-slider .dx-projekt-card__cta {
  display:inline-block;
  width: 2.5rem;
  height: 2.5rem;
  background-color: currentColor;
  -webkit-mask-image: url('../../img/slide-next.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('../../img/slide-next.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: transform 0.28s var(--transition-fast), opacity 0.18s var(--transition-fast);
  opacity: 1;
  color: var(--color-primary);
}
.dx-projekt-slider .dx-projekt-card__link:hover .dx-projekt-card__cta,
.dx-projekt-slider .dx-projekt-card__link:focus .dx-projekt-card__cta {
  transform: translateX(8px);
}

/* spacing helpers using layout variable */
.dx-projekt-slider { --dx-slider-gap: var(--layout-flex-gap); }

/* navigation dots and arrows placeholders */
.dx-projekt-slider .swiper-button-next, .dx-projekt-slider .swiper-button-prev{
  color:var(--color-primary);
  width:48px;
  height:48px;
}
.dx-projekt-slider .swiper-button-prev { left: 40px; }
.dx-projekt-slider .swiper-button-next { right: 40px; }
.dx-projekt-slider .swiper-pagination { position: relative; margin-top: 2rem; display:flex; justify-content:center; }

/* Left/right fade overlays to de-emphasize partially visible slides */
/* overlays removed */

/* pagination bullets: primary color and ~20% larger */
.dx-projekt-slider .swiper-pagination-bullet {
  background: var(--color-primary);
  width: 10px;
  height: 10px;
  opacity: 0.6;
  transform: scale(1.2);
  margin: 0 .35rem;
}

/* Hover effects: subtle image zoom and primary borders */
.dx-projekt-slider .dx-projekt-card:hover .dx-projekt-card__media img{
  transform: scale(1.04);
}

.dx-projekt-slider .dx-projekt-card:hover .dx-projekt-card__body{
  border-left-color: var(--color-primary);
  border-right-color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .dx-projekt-slider .dx-projekt-card__media img { transition: none !important; }
}
.dx-projekt-slider .swiper-pagination-bullet-active { opacity: 1; }

@media (max-width: 1199.98px) {
  .dx-projekt-slider .swiper-button-next{ right: 0; }
  .dx-projekt-slider .swiper-button-prev{ left: 0; }
}

@media (max-width: 767.98px) {
  .dx-projekt-slider .swiper-slide { width: 100%; }
  .dx-projekt-slider .dx-projekt-card__title { -webkit-line-clamp: 3; max-height: calc(3 * var(--projekt-title-line-height)); }
  .dx-projekt-slider .dx-projekt-card__media { height: 15rem; }
}


/* Robust CSS-only equal-height fix
   - Ensure swiper, wrapper and slides use stretch alignment
   - Make article/card and link fill slide height so .meta-row can stick to bottom
   - min-height:1px avoids flex min-height bug in some browsers */
.dx-projekt-slider,
.dx-projekt-slider .swiper,
.dx-projekt-slider .swiper-wrapper {
  align-items: stretch;
}
.dx-projekt-slider .swiper-slide {
  min-height: 1px;
}
.dx-projekt-slider .swiper-slide > article,
.dx-projekt-slider .swiper-slide .dx-projekt-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dx-projekt-slider .dx-projekt-card__link { height: 100%; }
.dx-projekt-slider .dx-projekt-card__media { flex: 0 0 auto; }
.dx-projekt-slider .dx-projekt-card__body { flex: 1 1 auto; min-height: 0; }

/* Dim partially visible slides (non-active but visible) to de-emphasize them
   Keep active slide fully opaque and interactive. */
.dx-projekt-slider .swiper-slide {
  transition: opacity 0.28s var(--transition-fast), transform 0.28s var(--transition-fast);
}
.dx-projekt-slider .swiper-slide-active {
  opacity: 1;
  pointer-events: auto;
}