/* stylelint-disable indentation */
/* stylelint-enable indentation */
.c-building-spec-block {
    --tabs-color: var(--wp--preset--color--orange);
    --swiper-navigation-color: var(--wp--preset--color--grey);
    padding: 40 20;
    color: var(--wp--preset--color--grey);
}
@media (max-width: 1023px) {
    .c-building-spec-block {
        padding: 1rem;
        background: var(--wp--preset--color--light--green);
    }
}
@media (min-width: 1024px) {
    .c-building-spec-block {
        padding: 80 40;
    }
}
.c-building-spec-block .swiper-slide {
    display: flex;
    align-items: stretch;
    height: unset;
}
@media (min-width: 1024px) {
    .c-building-spec-block .swiper-slide {
        padding: 0 7rem;
    }
}
.c-building-spec-block .swiper-wrapper {
    height: auto;
}
.c-building-spec-block__desktop {
    display: none;
}
@media (min-width: 1024px) {
    .c-building-spec-block__desktop {
        display: block;
    }
}

.c-building-spec-block__nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
@media (min-width: 1024px) {
    .c-building-spec-block__nav {
        padding: 0 7rem;
    }
}

.c-building-spec-block__tab {
    font-family: "Fraunces", serif;
    font-size: 1.125rem;
    line-height: 2rem;
    font-weight: 600;
    flex: 1;
    min-width: 7.5rem;
    padding: 0.5rem 2rem;
    background: transparent;
    border: none;
    border-bottom: 2px dotted currentColor;
    border-top: 2px dotted currentColor;
    color: var(--tab-title__color, var(--wp--preset--color--grey));
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}
.c-building-spec-block__tab:hover {
    opacity: 1;
    --tab-title__color: var(--tabs-color);
}
.c-building-spec-block__tab.is-active {
    opacity: 1;
    --tab-title__color: var(--tabs-color);
}

.c-building-spec-block__swiper {
    position: relative;
    --swiper-navigation-sides-offset: 16px;
    --swiper-navigation-size: 32px;
}

.c-building-spec-block__content {
    display: grid;
    gap: 2.5rem;
    width: 100%;
    align-items: center;
    min-width: 0;
    padding: 1.5rem 0;
}
@media (min-width: 1024px) {
    .c-building-spec-block__content {
        grid-template-columns: 45fr 55fr;
        gap: 0;
        padding: 4.6875rem 0;
    }
}
.c-building-spec-block__content > * {
    min-width: 0;
}
.c-building-spec-block__content_facts {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .c-building-spec-block__content_facts {
        grid-template-columns: 45fr 55fr;
        gap: 2.5rem;
    }
}
.c-building-spec-block__content_spec {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .c-building-spec-block__content_spec {
        grid-template-columns: repeat(3, 1fr);
        gap: 4rem 1.5rem;
    }
}

.c-building-spec-block__text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    min-height: 30%;
    max-width: 80%;
    margin-right: auto;
}

.c-building-spec-block__heading {
    font-family: "Fraunces", serif;
    color: var(--wp--preset--color--grey);
    margin: 0;
}

.c-building-spec-block__wysiwyg {
    font-family: "Montserrat", sans-serif;
    color: var(--wp--preset--color--grey);
}

.c-building-spec-block__image-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
@media (max-width: 1023px) {
    .c-building-spec-block__image-wrapper {
        margin-top: 1.5rem;
    }
}

.c-building-spec-block__image {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.c-building-spec-block__arrow {
    aspect-ratio: 1;
    z-index: 10;
    color: var(--swiper-navigation-color, var(--wp--preset--color--grey));
}
.c-building-spec-block__arrow::after {
    content: none;
}
.c-building-spec-block__arrow--prev {
    background: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="15.25" transform="rotate(-180 16 16)" stroke="%235A5A60" stroke-width="1.5"/><path d="M9.86967 15.4697C9.57678 15.7626 9.57678 16.2374 9.86967 16.5303L14.6426 21.3033C14.9355 21.5962 15.4104 21.5962 15.7033 21.3033C15.9962 21.0104 15.9962 20.5355 15.7033 20.2426L11.4607 16L15.7033 11.7574C15.9962 11.4645 15.9962 10.9896 15.7033 10.6967C15.4104 10.4038 14.9355 10.4038 14.6426 10.6967L9.86967 15.4697ZM21.6 16V15.25H10.4V16V16.75H21.6V16Z" fill="%235A5A60"/></svg>') no-repeat center center !important;
    background-size: contain !important;
}
.c-building-spec-block__arrow--next {
    background: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="15.25" stroke="%235A5A60" stroke-width="1.5"/><path d="M22.1304 16.5303C22.4232 16.2374 22.4232 15.7626 22.1304 15.4697L17.3574 10.6967C17.0645 10.4038 16.5896 10.4038 16.2967 10.6967C16.0038 10.9896 16.0038 11.4645 16.2967 11.7574L20.5394 16L16.2967 20.2426C16.0038 20.5355 16.0038 21.0104 16.2967 21.3033C16.5896 21.5962 17.0645 21.5962 17.3574 21.3033L22.1304 16.5303ZM10.4 16L10.4 16.75L21.6 16.75L21.6 16L21.6 15.25L10.4 15.25L10.4 16Z" fill="%235A5A60"/></svg>') no-repeat center center !important;
    background-size: contain !important;
}
.c-building-spec-block__arrow * {
    opacity: 0;
}
.c-building-spec-block__arrow.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.c-building-spec-block__mobile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .c-building-spec-block__mobile {
        display: none;
    }
}

.c-building-spec-block__accordion-trigger {
    font-family: "Fraunces", serif;
    font-size: 1.125rem;
    line-height: 2rem;
    font-weight: 600;
    width: 100%;
    padding: 0.3125rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px dotted currentColor;
    border-top: 2px dotted currentColor;
    color: var(--tab-title__color, var(--wp--preset--color--grey));
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    transition: all 0.3s ease;
}
.c-building-spec-block__accordion-trigger:hover {
    --tab-title__color: var(--tabs-color);
}
.is-active .c-building-spec-block__accordion-trigger {
    --tab-title__color: var(--tabs-color);
}

.c-building-spec-block__accordion-icon {
    display: block;
    width: 1.25rem;
    height: 0.75rem;
    flex-shrink: 0;
    margin-left: 1rem;
    transition: transform 0.3s ease;
}
.is-active .c-building-spec-block__accordion-icon {
    transform: rotate(180deg);
}

.c-building-spec-block__accordion-content {
    display: none;
    padding-top: 1.5rem;
}
.is-active .c-building-spec-block__accordion-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: accordionSlideDown 0.3s ease;
}
.c-building-spec-block__accordion-content .c-building-spec-block__image-wrapper {
    margin-bottom: 1.5rem;
}

.c-building-spec-block__preview {
    padding: 2rem;
    text-align: center;
    background: #f5f5f5;
    border: 2px dashed #ccc;
}

.c-building-spec-block__numbers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
    text-align: center;
}
@media (min-width: 1024px) {
    .c-building-spec-block__numbers {
        gap: 3rem 1.5rem;
        text-align: left;
    }
}

.c-building-spec-block__number {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
@media (min-width: 1024px) {
    .c-building-spec-block__number {
        gap: 1rem;
    }
}
.c-building-spec-block__number-value {
    font-family: "Fraunces", serif;
    font-size: 1.5rem;
    font-weight: 600;
}
@media (min-width: 1024px) {
    .c-building-spec-block__number-value {
        font-size: 2rem;
    }
}
.c-building-spec-block__number-value {
    color: var(--spec-number-value-color, var(--wp--preset--color--grey));
}
.c-building-spec-block__number-label {
    font-family: "Montserrat", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
}
@media (min-width: 1024px) {
    .c-building-spec-block__number-label {
        font-size: 1rem;
    }
}
.c-building-spec-block__number-label {
    color: var(--spec-number-label-color, var(--wp--preset--color--grey));
}
.c-building-spec-block__number:nth-last-child(2), .c-building-spec-block__number:nth-last-child(1) {
    --spec-number-value-color: var(--wp--preset--color--orange);
}

.c-building-spec-block__building-legend {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}
@media (min-width: 1024px) {
    .c-building-spec-block__building-legend {
        display: none;
    }
}

.c-building-spec-block__building-legend-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.c-building-spec-block__spec-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.c-building-spec-block__floorplan-numbers {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}
@media (min-width: 1024px) {
    .c-building-spec-block__floorplan-numbers {
        gap: 3rem;
        align-items: flex-start;
    }
}

.c-building-spec-block__floorplan-image {
    text-align: center;
    width: 85%;
    margin: auto;
}

.c-building-spec-block__floorplan-number {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .c-building-spec-block__floorplan-number {
        align-items: flex-start;
    }
}
.c-building-spec-block__floorplan-number-value {
    font-family: "Fraunces", serif;
    font-size: 1.5rem;
    font-weight: 600;
}
@media (min-width: 1024px) {
    .c-building-spec-block__floorplan-number-value {
        font-size: 2rem;
    }
}
.c-building-spec-block__floorplan-number-value {
    color: var(--spec-number-color, var(--wp--preset--color--orange));
}

.c-building-spec-block__floorplan-legend {
    display: flex;
    margin-top: 3rem;
    flex-direction: column;
    gap: 1rem;
}
@media (max-width: 1023px) {
    .c-building-spec-block__floorplan-legend {
        display: none;
    }
}
.c-building-spec-block__floorplan-legend_mobile {
    display: inline-flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .c-building-spec-block__floorplan-legend_mobile {
        display: none;
    }
}
.c-building-spec-block__floorplan-legend-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.c-building-spec-block__floorplan-legend-color {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    background: var(--legend-color);
    border-radius: 100%;
}

@keyframes accordionSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
