/**
 * Image Block Styles
 * 
 * Flexible image block with 3 variants:
 * - 2 images + text
 * - 1-4 images gallery
 * - 2 images + shortcode
 */

/* Main Image */
.image-block-main img {
  max-height: 600px;
  object-fit: cover;
}

/* Secondary Image (smaller, in sidebar) */
.image-block-secondary {
  min-height: 200px;
}

.image-block-secondary img {
  max-height: 400px;
}

/* Content Section */
.image-block-content {
  padding: 1.5rem 15px;
}

.image-block-content .text-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.image-block-content .text-content ul li {
  list-style-type: disc;
  margin-bottom: 0.5rem;
}

.image-block-content .text-content ul li::marker {
  color: var(--brand-secondary-color, var(--bs-primary, #0d6efd));
}

/* Gallery Items (picture variant) */
.image-block-gallery-item img {
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Single image gets more height */
.row > .col-12 .image-block-gallery-item img {
  aspect-ratio: 16/9;
  max-height: 600px;
}

/* Shortcode Container */
.image-block-shortcode {
  padding: 1.5rem 0;
}

.personen {
  display:flex;
  flex-direction:row;
  gap:30px;
}
.personen .person{
  padding-top:15px;
  margin-top:15px;
  position: relative;
}
.personen .person:before{
  content:'';
  display:block;
  width:100%;
  height:2px;
  background:#e6ece8;
  border-radius:5px;
  transition:all .3s ease;
  position:absolute;
  top:0;
  left:0;
}
.personen .person:hover:before{
  background:var(--brand-accent-color);
  transition:all .3s ease;
}
.personen .person .name{
  display:block;
  font-size:100%;
  font-weight:700;
  color:var(--brand-primary-color);
}
.personen .person .position{
  display:block;
  text-transform:uppercase;
  color:var(--brand-accent-color);
  font-weight:700;
  font-size:80%;
}
.personen .person .beschreibung{
  display:block;
  font-size:80%;
}

.bildergrid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 16px;
  grid-auto-flow: dense;
  grid-auto-rows: 275px;
}
.bildergrid .griditem{grid-column: span 4;grid-row: span 1;--h: 1;grid-row: span var(--h);overflow: hidden;}
.bildergrid .griditem img{width: 100%;height: 100%;object-fit: cover;display: block;border-radius:15px;}
.bildergrid .griditem:nth-child(7n + 1){grid-column: span 6;--h:2}
.bildergrid .griditem:nth-child(7n + 2){grid-column: span 3;}
.bildergrid .griditem:nth-child(7n + 3){grid-column: span 3;}
.bildergrid .griditem:nth-child(7n + 4){grid-column: span 6;}
.bildergrid .griditem:nth-child(7n + 5){grid-column: span 6;}
.bildergrid .griditem:nth-child(7n + 6){grid-column: span 3;}
.bildergrid .griditem:nth-child(7n + 7){grid-column: span 3;}


/* Responsive Adjustments */
@media(max-width:1199px){
  .personen{flex-direction:unset;gap:unset;flex-wrap: wrap;}
  .personen .person{width:33.33%;flex:0 0 auto;padding:15px;}

  .bildergrid{grid-auto-rows:150px;}
}
@media (max-width: 991px) {
  .image-block-main img,
  .image-block-secondary img {
    max-height: 400px;
  }
  
  .image-block-secondary {
    min-height: auto;
  }
}

@media (max-width: 767px) {
  .image-block-gallery-item img {
    aspect-ratio: 1/1;
  }
  .personen .person{width:50%;}
}

@media(max-width:575px){
  .personen .person{
    width:100%;
  }

  .bildergrid .griditem:nth-child(7n+1){
    grid-column: span 12;
  }
  .bildergrid .griditem:nth-child(7n+2){
    grid-column: span 6;
  }
  .bildergrid .griditem:nth-child(7n+3){
    grid-column: span 6;
  }
  .bildergrid .griditem:nth-child(7n+4){
    grid-column: span 12;
  }
  .bildergrid .griditem:nth-child(7n+5){
    grid-column: span 12;
  }
  .bildergrid .griditem:nth-child(7n+6){
    grid-column: span 6;
  }
  .bildergrid .griditem:nth-child(7n+7){
    grid-column: span 6;
  }
}