/* --- swiper --- */

.swiper,
.swiper .swiper-slide {
    width: 100%;
    height: calc(100dvh - 70px); 
    overflow: hidden;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-button-prev,
.swiper-button-next {
    color: var(--secondary-color);
}

/* --- index --- */

.lang-nav,
.min-h-400-only,
.min-h-500-only {
    display: none !important;
}

.slide-flex {
    height: 100%; /* parent container should define total height */
}

/* On small screens, just stack and use a more natural image size */
.square-container {
    position: relative;
    width: 100%;
    max-width: 300px; /* Reasonable max size for mobile */
    aspect-ratio: 1 / 1;
    margin: 1rem auto;
    overflow: hidden;
    border-radius: 0.5rem;
}

.square-container img {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 0.5rem;
}

.text-truncate-paragraph {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Number of lines to show */
    -webkit-box-orient: vertical;
}

.image-col {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

@media (min-width: 768px) {
    .slide-flex {
        padding: 0 60px; 
        width: 100%;
    }
    .slide-flex > .col-half {
        flex: 0 0 50%;
        width: 50%;
    }

    .image-col {
        display: flex;
    }

    /* Fixed-size square container relative to parent height */
    .square-container {
        width: 80%;           /* the square’s width relative to its column */
        max-width: none;      /* Remove mobile max-width constraint */
        aspect-ratio: 1 / 1;  /* ensures square shape */
        height: 80%;          /* fallback for browsers w/o aspect-ratio */
        max-height: 80%;
        margin: 10% auto;     /* top/bottom = 10%, centers the square */
    }
}

@media (min-height: 600px) {
    .lang-nav {display: flex;}
}

@media (min-height: 700px) {
    .image-col {display: flex;}
}

@media (min-height: 400px) {
  .min-h-400-only {
    display: flex !important;
  }
}

@media (min-width: 768px) and (min-height: 500px) {
  .min-h-500-only {
    display: block !important;
  }
}