/* Our Suites Shortcode Styles - Mobile First */
.our-suites-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 77px;
    box-sizing: border-box;
}

.our-suites-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.suite-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background: white;
    /* Keep internal clipping but don't block page vertical scroll */
    overflow-x: hidden;
    overflow-y: visible;
    box-sizing: border-box;
}

.suite-image {
    width: 100%;
    height: 250px;
    /* Clip only horizontally to avoid accidental vertical locks */
    overflow: hidden; /* images are fine to fully clip */
    position: relative;
}

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

/* Suite image slider */
.suite-image-slider { position: relative; width: 100%; height: 100%; }
.suite-image-slider .slides { position: relative; width: 100%; height: 100%; }
.suite-image-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.suite-image-slider .slide.is-active { opacity: 1; z-index: 1; }
.suite-image-slider .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bottom-centered small white arrows */
.suite-image-arrows { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; pointer-events: none; z-index: 3; }
/* Placeholder button styling so arrows are visible until SVGs are linked */
.suite-image-arrows .arrow { pointer-events: auto; width: 20px; height: 20px; border-radius: 999px; background: transparent; color: inherit; border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s ease; box-shadow: none; }
.suite-image-arrows .arrow:hover { transform: translateY(-1px); }
.suite-image-arrows .arrow:active { transform: translateY(0); }
/* Use provided SVGs for icons */
.suite-image-arrows .arrow .icon { display: inline-block; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.suite-image-arrows .arrow.prev .icon { background-image: url('/wp-content/uploads/2025/06/white-left.svg'); }
.suite-image-arrows .arrow.next .icon { background-image: url('/wp-content/uploads/2025/06/right-white-.svg'); }

/* Hide arrows when single slide (JS also handles) */
.suite-image-slider:has(.slide:nth-child(2)) .suite-image-arrows { display: flex; }
.suite-image-slider:not(:has(.slide:nth-child(2))) .suite-image-arrows { display: none; }

.suite-content-wrapper {
    width: 100%;
    padding: 10px;
    background: white;
    box-sizing: border-box;
    flex: 1;
}

.suite-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    padding: 10px 20px;
}

.suite-title {
    color: var(--heading-primary);
    font-size: 22px !important;
    font-family: 'KoPub Batang', serif;
    font-weight: 400;
    line-height: 22px;
    margin: 0;
    margin-top: 18px;
}

.suite-description {
    width: 100%;
    color: var(--body-primary);
    font-size: 16px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
    line-height: 22.40px;
}

.suite-price {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 15px;
}

.price-label {
    color: var(--heading-primary);
    font-size: 18px;
    font-family: 'KoPub Batang', serif;
    font-weight: 400;
    line-height: 18px;
}

.price-amount {
    color: var(--heading-primary);
    font-size: 22px !important;
    font-family: 'KoPub Batang', serif;
    font-weight: 700;
    line-height: 24px;
}

.price-term {
    color: var(--heading-primary);
    font-size: 18px;
    font-family: 'KoPub Batang', serif;
    font-weight: 400;
    line-height: 18px;
}

.suite-details-link {
    top: 229.22px;
    padding: 14px 0;
    border-bottom: 1px solid var(--heading-primary);
    margin-bottom:18px;
}

.suite-details-link a {
    color: var(--heading-primary);
    font-size: 16px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    text-decoration: none;
}


/* Responsive */
@media (min-width: 1440px) {
    .our-suites-container {
        padding: 60px 0px;
    }

    .our-suites-row {
        flex-direction: row;
        gap: 52px;
    }

    .suite-item {
        width: 48%;
    }

    .suite-image {
        height: 300px;
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .our-suites-container {
        padding: 50px 30px;
    }

    .our-suites-row {
        flex-direction: row;
        gap: 50px;
    }

    .suite-item {
        width: 48%;
        max-width: 500px;
    }

    .suite-image {
        height: 280px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .our-suites-container {
        gap: 50px;
        padding: 0 20px;
    }

    .our-suites-row {
        flex-direction: row;
        gap: 30px;
    }

    .suite-item {
        width: 48%;
    }

    .suite-content-wrapper {
        padding: 20px;
    }

    .suite-description {
        width: 100%;
    }

    .suite-title {
        font-size: 20px;
        line-height: 24px;
    }

    .suite-description {
        font-size: 15px;
        line-height: 21px;
    }

    .suite-content-wrapper {
        height: 280px;
    }
}

@media (min-width: 600px) and (max-width: 767px) {
    .our-suites-container {
        gap: 40px;
        padding: 0 15px;
    }

    .our-suites-row {
        flex-direction: column;
        gap: 25px;
    }

    .suite-item {
        width: 100%;
    }

    .suite-content-wrapper {
        padding: 20px;
    }

    .suite-description {
        width: 100%;
    }

    .suite-price {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        margin-top: 15px;
    }

    .suite-details-link {
        position: relative;
        left: 0;
        top: 0;
        margin-top: 15px;
    }

    .suite-content-wrapper {
        height: auto;
        min-height: 250px;
    }

    .suite-title {
        font-size: 19px;
        line-height: 23px;
    }

    .suite-description {
        font-size: 15px;
        line-height: 21px;
    }
}

@media (min-width: 480px) and (max-width: 599px) {
    .our-suites-container {
        gap: 35px;
        padding: 0 15px;
    }

    .our-suites-row {
        flex-direction: column;
        gap: 20px;
    }

    .suite-item {
        width: 100%;
    }

    .suite-content-wrapper {
        padding: 15px;
    }

    .suite-description {
        width: 100%;
    }

    .suite-price {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        margin-top: 12px;
        flex-wrap: wrap;
    }

    .suite-details-link {
        position: relative;
        left: 0;
        top: 0;
        margin-top: 12px;
    }

    .suite-content-wrapper {
        height: auto;
        min-height: 220px;
    }

    .suite-title {
        font-size: 18px;
        line-height: 22px;
    }

    .suite-description {
        font-size: 14px;
        line-height: 20px;
    }

    .price-label,
    .price-term {
        font-size: 16px;
    }

    .price-amount {
        font-size: 20px;
    }
}

@media (max-width: 479px) {
    .our-suites-container {
        gap: 30px;
        padding: 0 10px;
    }

    .our-suites-row {
        flex-direction: column;
        gap: 15px;
    }

    .suite-item {
        width: 100%;
    }

    .suite-content-wrapper {
        padding: 12px;
    }

    .suite-description {
        width: 100%;
    }

    .suite-price {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        margin-top: 10px;
        flex-wrap: wrap;
        gap: 2px;
    }

    .suite-details-link {
        position: relative;
        left: 0;
        top: 0;
        margin-top: 10px;
        padding: 10px 0;
    }

    .suite-content-wrapper {
        height: auto;
        min-height: 200px;
    }

    .suite-title {
        font-size: 17px;
        line-height: 21px;
    }

    .suite-description {
        font-size: 13px;
        line-height: 19px;
    }

    .price-label,
    .price-term {
        font-size: 15px;
    }

    .price-amount {
        font-size: 18px;
    }

    .suite-details-link a {
        font-size: 15px;
    }
}

@media (max-width: 320px) {
    .our-suites-container {
        padding: 0 5px;
    }

    .suite-content {
        padding: 10px;
    }

    .suite-title {
        font-size: 16px;
        line-height: 20px;
    }

    .suite-description {
        font-size: 12px;
        line-height: 18px;
    }

    .price-label,
    .price-term {
        font-size: 14px;
    }

    .price-amount {
        font-size: 16px;
    }

    .suite-details-link a {
        font-size: 14px;
    }
}

/* Touch-friendly improvements for mobile */
@media (hover: none) and (pointer: coarse) {
    .suite-details-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .suite-details-link a {
        padding: 10px 0;
        display: block;
        width: 100%;
    }
}

/* High DPI displays for suite images */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .suite-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}