@import url('./sections/hero.css');
@import url('./suites/suite-specs.css');
@import url('./shared/accordion-item.css');

:root {
    --hero-height: 630px;
}

.section-suite {
    padding-block: 6.25rem 7.5rem;

    .container {
        display: grid;
        grid-template-columns: minmax(auto, 40%) auto;
        gap: 5vw;
    }

    .right {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        align-self: start;
        position: sticky;
        top: var(--header-height);

        .heading {
            display: flex;
            flex-direction: column;
            gap: 1.875rem;
            padding-block-start: 1rem;

            .section-titles {
                position: relative;

                .leaf-deco {
                    position: absolute;
                    left: calc(100% + 20px);
                    bottom: 0;
                    scale: 2;
                }
            }
        }

        .accordion-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .title {
                font-size: var(--text-18px);
                font-weight: 500;
                letter-spacing: var(--ls-titles);
            }

            .accordion {
                display: flex;
                flex-direction: column;
                gap: 0.625rem;
            }

            .accordion-row .title-wrap {
                height: 56px;
            }

            .description {
                padding-block: 1rem;
                padding-inline: 1.25rem 2.375rem;
                line-height: 1.65;

                a {
                    color: var(--color-gold);

                    &:hover {
                        color: inherit;
                    }
                }
            }
        }

        .amenities-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .title {
                font-size: var(--text-18px);
                font-weight: 500;
                letter-spacing: var(--ls-titles);
            }

            .amenities {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
                gap: 2rem clamp(1.5rem, 4vw, 6rem);
                background-color: hsl(var(--gold) / 0.05);
                padding: 2.25rem 3.375rem;
            }

            .amenity {
                display: flex;
                align-items: center;
                gap: 0.65rem;

                .icon {
                    width: 24px;
                }

                .name {
                    opacity: 0.8;
                }
            }
        }

        .book-now-wrap {
            padding-block-start: 1.5rem;

            .book-now {
                max-width: 100%;
            }
        }
    }

    .left {
        .gallery {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
            grid-auto-flow: dense;

            .img-wrap {
                min-height: 310px;
            }

            .img-wrap:nth-child(6n + 1),
            .img-wrap:nth-child(6n + 4) {
                grid-column: span 2;
                height: 530px;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}

@media (max-width: 1023px) {
    :root {
        --hero-height: 400px;
    }

    .section-suite {
        padding-block: 3rem;

        .container {
            grid-template-columns: 1fr;
        }

        .right {
            position: static;
            height: auto;

            .heading {
                padding-block-start: 0;
            }

            .amenities-container {
                .amenities {
                    padding: 2rem 1rem;
                    grid-template-columns: repeat(3, 1fr);
                }
            }
        }

        .left {
            .gallery {
                grid-auto-flow: dense;

                .img-wrap {
                    min-height: auto;
                }

                .img-wrap:nth-child(6n + 1),
                .img-wrap:nth-child(6n + 4) {
                    height: auto;
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    aspect-ratio: 1;
                }
            }
        }
    }
}

@media (max-width: 450px) {
    .section-suite {
        .right {
            .amenities-container {
                .amenities {
                    padding: 2rem 1rem;
                    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
                }
            }
        }
    }
}