/* slideshow */
.theme-slideshow {
    width: 100%;
    height: 100%;
    position: relative;
}

.slideshow__item {
    width: 100%;
    height: 100%;
}

.theme-slideshow__bullets.swiper-pagination {
    --height-bullets: 12px;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    display: inline-flex;
    list-style: none;
    transform: translateX(-50%);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    & .swiper-pagination-bullet {
        background-color: var(--text-color-light-80);
        border: solid 2px var(--primary-50);
        width: var(--height-bullets);
        height: var(--height-bullets);
        border-radius: 50%;
        margin: 0 4px;
        padding: 0;
        outline: none;
        opacity: 1;
        transition: background-color 0.3s ease-out;
        cursor: pointer;

        &:hover {
            background-color: var(--text-color-light);
            border-color: var(--primary-80);
        }

        &.swiper-pagination-bullet-active {
            background-color: var(--secondary);
            border-color: var(--primary);
        }
    }
}

/* separator */
.separator-banner {
    width: 100%;
    height: 100%;
    position: relative;
}

.separator-banner__bg-color {
    width: 100%;
    height: 100%;
    background-color: var(--primary);
}

.separator-banner__bg-color--default {
    background-color: var(--primary);
}

.separator-banner__bg-color--accent-color {
    background-color: var(--accent-1);
}

.separator-banner__bg-color--light-color {
    background-color: var(--text-color-light);
}

.separator-banner__bg-color--light-color-2 {
    background-color: var(--text-color-light-2);
}

.separator-banner__bg-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* section-wrapper background colors */
.section--bg-primary,
.section--bg-accent,
.section--bg-light-color,
.section--bg-light-color-2 {
    padding: 2rem;
}

.section--bg-primary {
    background-color: var(--primary);
    color: var(--text-color-light);
}

.section--bg-accent {
    background-color: var(--accent-1);
    color: var(--text-color-light);
}

.section--bg-light-color {
    background-color: var(--text-color-light);
}

.section--bg-light-color-2 {
    background-color: var(--text-color-light-2);
}

/* feature-content block */
.feature-content {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.feature-content__bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.feature-content__overlay {
    position: absolute;
    inset: 0;
    opacity: 0.82;
}

.feature-content__inner {
    position: relative;
    z-index: 1;
    padding: 4rem 2rem;
}

.feature-content__inner--light-text,
.feature-content__inner--light-text p,
.feature-content__inner--light-text h1,
.feature-content__inner--light-text h2,
.feature-content__inner--light-text h3,
.feature-content__inner--light-text h4 {
    color: var(--text-color-light);
}

/* Background colors (no image) */
.feature-content--bg-primary {
    background-color: var(--primary);
}

.feature-content--bg-accent {
    background-color: var(--accent-1);
}

.feature-content--bg-light-color {
    background-color: var(--text-color-light);
}

.feature-content--bg-light-color-2 {
    background-color: var(--text-color-light-2);
}

/* Overlay colors (with image) */
.feature-content--overlay-primary .feature-content__overlay {
    background-color: var(--primary);
}

.feature-content--overlay-accent .feature-content__overlay {
    background-color: var(--accent-1);
}

.feature-content--overlay-light-color .feature-content__overlay {
    background-color: var(--text-color-light);
}

.feature-content--overlay-light-color-2 .feature-content__overlay {
    background-color: var(--text-color-light-2);
}

/* Content alignment */
.feature-content--align-left .feature-content__inner {
    text-align: left;
}

.feature-content--align-center .feature-content__inner {
    text-align: center;
}

.feature-content--align-right .feature-content__inner {
    text-align: right;
}

/****
icon-card block
****/
.icon-card {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

.icon-card {

    & h2,
    & h3,
    & h4,
    & h5,
    & h6,
    & p {
        margin-top: 0;
        margin-bottom: 0.3rem;
    }
}

.icon-card--size-large {
    width: 100%;
}

.icon-card--size-medium {
    width: 70%;
}

.icon-card--size-small {
    width: 50%;
}

.icon-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.icon-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.icon-card__icon svg,
.icon-card__icon-img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.icon-card--icon-size-large .icon-card__icon svg,
.icon-card--icon-size-large .icon-card__icon-img {
    width: 3rem;
    height: 3rem;
}

.icon-card--icon-size-medium .icon-card__icon svg,
.icon-card--icon-size-medium .icon-card__icon-img {
    width: 2rem;
    height: 2rem;
}

.icon-card--icon-size-small .icon-card__icon svg,
.icon-card--icon-size-small .icon-card__icon-img {
    width: 1rem;
    height: 1rem;
}

/* Icon alignment: top */
.icon-card--icon-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.icon-card--icon-top .icon-card__content {
    align-items: center;
    flex-shrink: 0;
}

/* Icon alignment: left */
.icon-card--icon-left {
    flex-direction: row;
    align-items: center;
    text-align: left;
}

.icon-card--icon-left .icon-card__icon {
    order: -1;
}

/* Icon alignment: right */
.icon-card--icon-right {
    flex-direction: row;
    align-items: center;
    text-align: right;
    justify-content: flex-end;
}

.icon-card--icon-right .icon-card__content {
    align-items: flex-end;
}

.icon-card--icon-right .icon-card__icon {
    order: 1;
}

/* Background colors  */
.icon-card--bg-primary,
.icon-card--bg-accent,
.icon-card--bg-light-color,
.icon-card--bg-light-color-2 {
    padding: 1.5rem;
}

.icon-card--bg-primary {
    background-color: var(--primary);
}

.icon-card--bg-accent {
    background-color: var(--accent-1);
}

.icon-card--bg-primary,
.icon-card--bg-accent {

    & .icon-card__content h2,
    & .icon-card__content h3,
    & .icon-card__content h4,
    & .icon-card__content h5,
    & .icon-card__content h6,
    & .icon-card__content p {
        color: var(--text-color-light);
    }

    & .icon-card__icon svg path,
    & .icon-card__icon svg rect,
    & .icon-card__icon svg circle {
        fill: var(--text-color-light);
    }
}

.icon-card--bg-light-color {
    background-color: var(--text-color-light);
}

.icon-card--bg-light-color-2 {
    background-color: var(--text-color-light-2);
}

.icon-card--bg-light-color,
.icon-card--bg-light-color-2 {
    color: var(--primary);

    & .icon-card__icon svg path,
    & .icon-card__icon svg rect,
    & .icon-card__icon svg circle {
        fill: var(--primary);
    }
}



/****
gallery-grid block
****/
.gallery-grid {
    display: grid;
    gap: 1rem;
}

.gallery-grid__item {
    width: 100%;
}

.gallery-grid--small {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.gallery-grid--medium {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.gallery-grid--large {
    grid-template-columns: repeat(auto-fill, minmax(100vw, 1fr));
}

/* Placeholder */

.our-placeholder-block {
    background-color: var(--primary);
    padding: 1rem;
    border-radius: 0.2rem;
    text-align: center;
    color: var(--text-color-light-80);
    font-size: var(--font-size-medium);
    font-weight: 800;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/* important dates block */
/** important dates **/

.home-important-dates__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.5rem;
    background-color: var(--secondary-light-2);
    padding: 1.5rem;
    z-index: 20;

    & h2,
    & h3 {
        margin: 0;
    }

    & h2 {
        font-size: var(--font-size-large);
        font-weight: 800;
        color: var(--blue-1);
        line-height: 1.1;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        display: grid;
        grid-template-columns: 24px 1fr;
        gap: 0.5rem;

        & svg {
            width: 24px;
            height: 24px;

            & path,
            & circle,
            & rect,
            & polygon {
                fill: var(--light-blue-1);
            }
        }

    }

    & h3 {
        font-size: var(--font-size-large);
        font-weight: 800;
        color: var(--light-blue-1);
        line-height: 1.1;
    }


}

.important-dates__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.1rem;

    & ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.7rem;

        & li {
            font-size: var(--font-size-medium);
            line-height: 1.1;
            margin-bottom: 0.5rem;

            & .important-dates__item-title {
                font-weight: 800;
            }
        }
    }

    &>div:first-of-type ul li:first-child {
        font-size: 1.2rem;
    }
}

/* notices */

.home-notices__container {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    border-top: solid 2px var(--accent-light);

    & h2,
    & h3 {
        margin: 0;
    }

    & h2 {
        font-size: var(--font-size-large);
        font-weight: 800;
        color: var(--blue-1);
        line-height: 1.1;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        display: grid;
        grid-template-columns: 24px 1fr;
        gap: 0.5rem;

        & svg {
            width: 24px;
            height: 24px;

            & path,
            & circle,
            & rect,
            & polygon {
                fill: var(--light-blue-1);
            }
        }
    }

    & h3 {
        font-size: var(--font-size-medium);
        font-weight: 800;
        color: var(--light-blue-1);
        line-height: 1.1;
    }
}

.notices__item {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    border: solid 1px var(--light-blue-1-50);
}

.notices__item:not(:last-child) {
    margin-bottom: 24px;
}

.notices__item:link,
.notices__item:hover {
    text-decoration: none;
}

.notices__item:hover {
    background-color: var(--secondary-light-2-40);
}



/****
gallery-grid block
****/

@media (min-width: 768px) {
    .gallery-grid--small {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .gallery-grid--medium {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .gallery-grid--large {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    /**** important dates ****/
    .home-important-dates__container {
        background-color: var(--text-color-light);
        margin-top: -5rem;
    }


}