/**
 * Text Block Styles
 * 
 * Flexible text block with optional gallery or shortcode
 * Supports 3 layouts: text-only, text+images, text+shortcode
 */

/* Text Content */

.text-block-text .text-block-content{
  text-align: left;
}

.text-block-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text-content {
  margin-bottom: 2rem;
}

.text-content ul {
  padding-left: 1.5rem;
  list-style: disc;
}

.text-content ol {
  padding-left: 1.5rem;
  list-style: decimal;
}

.text-content ul li,
.text-content ol li {
  margin-bottom: 0.5rem;
}

/* Link List (Buttons) */
.text .link-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}

.text .link-list .link-list-link{
  padding:15px 25px 18px;
}


/* Image Gallery */
.text-block-gallery {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 500px;
  margin: 0;
}
.text-block-gallery .gallery-item.has-cover:before{
  content: '';
  position: absolute;
  top:0;
  right:30px;
  bottom:0px;
  left:30px;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
  z-index: 4;
  pointer-events: none;
  opacity: 0.5;
}
.text-block-gallery.gallery-count-2 .gallery-item{
  position: relative;
  flex: 0 0 auto;
  width: 50%;
  padding: 0 30px;
}
.text-block-gallery.gallery-count-2 .gallery-item.img-1{
  margin-top:50px;
}
.text-block-gallery.gallery-count-2 .gallery-item.img-2{
  margin-bottom:50px;
}

/* Three or four images layout (advanced grid) */
.text-block-gallery.gallery-count-3 {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 175px;
  gap: 15px;
}

/* 3+ images: Large hero image */
.text-block-gallery .img-1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

/* 3+ images: Bottom right small */
.text-block-gallery .img-2 {
  grid-column: 3 / span 2;
  grid-row: 1 / span 2;
}

/* Image 3: Bottom left small */
.text-block-gallery .img-3 {
  grid-column: 1 / span 4;
  grid-row: 3 / span 2;
}

/* All gallery images */
.text-block-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--bs-border-radius, 0.375rem);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.text-block-gallery .gallery-item .bildunterschrift{
  position: absolute;
  bottom: 25px;
  left: 55px;
  color: var(--white);
  font-size:175%;
  font-weight:700;
  width:75%;
  z-index: 9;
}

/* Shortcode Content */
.text-block-shortcode {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 2rem;
  background-color: var(--bs-light, #f8f9fa);
  border-radius: var(--bs-border-radius-lg, 0.5rem);
}

/* Numbers Content */

.text-block-number .text-block-numbers{
  display: flex;
  flex-wrap: wrap;
}
.text-block-number .text-block-numbers .number-item{
  width:33.33%;
  flex: 0 0 auto;
  padding:0 15px;
}
.text-block-number .text-block-numbers .number-item .number-value{
  font-size: 400%;
  font-weight: 900;
  color: var(--brand-accent-color);
  display:block;
}
.text-block-number .text-block-numbers .number-item .number-description{
  font-size: 100%;
  font-weight: 400;
  color: var(--white);
  display:block;
  width:75%;
}
.text-block-number .text-block-content *{
  color:var(--white);
}

/* Kachel Content */

.text-block-kacheln .row{
  justify-content: center;
}
.text-block-kacheln .text-block-content{
  text-align: center;
}
.text-block-kacheln .text-block-kacheln .row{
  justify-content: space-evenly;
}
.text-block-kacheln .text-block-kacheln .kachel-item{
  text-align: left;
  padding:30px;
  background-color: #fff;
  height: 100%;
}
.text-block-kacheln .text-block-kacheln .kachel-item .headline{
  font-size: 200%;
  color: var(--brand-accent-color);
  font-weight: 800;
  display: block;
  margin-bottom: 1rem;
  word-break: break-word;
  white-space: wrap;
  hyphens: auto;
}
.text-block-kacheln .text-block-kacheln .kachel-item .kachel-description{
  font-size: 125%;
  font-weight: 600;
}
.text-block-kacheln .text-block-kacheln .col-md-3{
  margin-top: 1.5rem;
}

.page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item{
  background-color: unset;
  padding: 25px 0;
  margin: 25px 0;
  height: unset;
}
.page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item.right{
  text-align: right;
  position: relative;
}
.page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item.right:after{
  content: '';
  position: absolute;
  top:0;
  right:-40%;
  display:block;
  width:2px;
  height:100%;
  background: var(--brand-primary-color);
}
.page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item .headline{
  font-size:250%;
  color:var(--brand-accent-color);
  font-weight:800;
  display:block;
  margin-bottom: unset;
  word-break: unset;
  white-space: unset;
  hyphens: unset;
}
.page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item .kachel-description{
  font-size:150%;
  font-weight:600;
}
.page-id-12 .text-block-kacheln .text-block-kacheln .col-md-3{
  margin-top: 0;
}

.text-block-zitat .text-zitat{
  width: 50%;
  margin: 0 auto;
}


/* Responsive Adjustments */
@media (max-width: 991px) {
  .text-block-gallery {
    min-height: 300px;
  }
  
  .text-block-shortcode {
    min-height: 200px;
    padding: 1.5rem;
  }
}

@media (max-width: 767px) {
  .text-block-gallery.gallery-count-3,
  .text-block-gallery.gallery-count-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    min-height: auto;
  }
  
  .text-block-gallery .img-1,
  .text-block-gallery .img-2,
  .text-block-gallery .img-3,
  .text-block-gallery .img-4 {
    grid-column: span 1;
    grid-row: auto;
  }
  
  .link-list {
    gap: 1rem;
  }
  
  .link-list-item {
    padding-bottom: 0.75rem;
  }

  .text .link-list .link-list-link{
    padding: 7px 20px 10px;
  }
}


/* -------------------------------------------------------------------------------------------------------------------------------- */

@media (max-width: 1480px) {

  .text-block-kacheln .col-md-3{width: 33%;}
  .page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item.right::after{right: -22%;}
  
}

@media (max-width: 1199px) {

  .text-block-gallery.gallery-count-2 .gallery-item{padding: 0 10px;}
  .text-block-gallery.gallery-count-2 .gallery-item.has-cover::before{right: 10px;left: 10px;}

  .text-block-number .text-block-numbers .number-item .number-value{font-size: 300%;}
  .text-block-number .text-block-numbers .number-item .number-description{width: 100%;}

}

@media (max-width: 991px) {

  .text-block-gallery .gallery-item .bildunterschrift{bottom: 15px;left: 25px;}
  .text-block-number .text-block-numbers .number-item .number-description{width: 75%;}

  .text-block-kacheln .col-md-3{width: 40%;}
  .text-block-kacheln .text-block-kacheln .kachel-item .headline{font-size: 200%;}
  .text-block-kacheln .text-block-kacheln .kachel-item .kachel-description{font-size: 125%;}

  .page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item .headline{font-size:225%;}
  .page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item.right::after{right: -14%;}

}

@media (max-width: 767px) {

  .text-block-kacheln .col-md-3{width: 100%;}
  .page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item.right, 
  .page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item{text-align: center;padding: 15px 0;margin: 15px 0;}
  .page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item.right::after{top: unset;right: unset;left: 50%;transform: translateX(-50%);bottom: -16%;height: 2px;width: 75%;}
  .page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item .headline{font-size:175%;}
  .page-id-12 .text-block-kacheln .text-block-kacheln .kachel-item .kachel-description{font-size:125%;}


}

@media (max-width: 600px) {

  .text-block-gallery.gallery-count-2{display: grid;}
  .text-block-gallery.gallery-count-2 .gallery-item.img-1{margin: 0 0 1rem;}
  .text-block-gallery.gallery-count-2 .gallery-item{width: 100%;padding: 0;}
  .text-block-gallery.gallery-count-2 .gallery-item.has-cover::before{left: 0;right: 0;}

  .text-block-number .text-block-numbers .number-item{width: 100%;padding: 0;margin: 0.5rem 0;}

  .text-block-kacheln .text-block-kacheln .kachel-item.right::after{width: 90%;}

}

@media (max-width: 400px) {

}