/*=================================================================
    THE STORY SPACE — ADVANCED FOOTER RESPONSIVE
    Breakpoints match the site convention: 1400 / 1200 / 992 /
    768 / 576 / 480 / 400px.
=================================================================*/

/* ---------------- 1400px : large laptop ---------------- */
@media (max-width: 1400px){

    .ss-footer{
        padding: 110px 0 0;
    }

    .ss-booking-info h3{
        font-size: 32px;
    }

    .ss-footer-grid{
        grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
        gap: 30px;
    }

    .ss-footer-col + .ss-footer-col{
        padding-left: 6px;
    }
}

/* ---------------- 1200px : laptop ---------------- */
@media (max-width: 1200px){

    .ss-footer{
        padding: 100px 0 0;
    }

    .ss-booking{
        grid-template-columns: 1fr;
    }

    .ss-booking-info{
        border-right: none;
        border-bottom: 1px solid var(--ss-line);
    }

    .ss-booking-info::before{
        top: 0;
        bottom: auto;
        left: 40px;
        width: 40px;
        height: 3px;
        background: linear-gradient(90deg, var(--gold), transparent);
    }

    .ss-footer-grid{
        grid-template-columns: 1fr 1fr;
        row-gap: 44px;
    }

    .ss-footer-col:nth-child(3){
        border-left: none;
        padding-left: 6px;
    }

    .ss-footer-col:nth-child(2){
        border-left: none;
        padding-left: 6px;
    }

    .ss-footer-brand{
        grid-column: 1 / -1;
        border-left: none !important;
        padding-left: 6px !important;
    }

    .ss-footer-contact-col{
        border-left: 1px solid var(--ss-line);
        padding-left: 28px;
    }
}

/* ---------------- 992px : tablet ---------------- */
@media (max-width: 992px){

    .ss-footer{
        padding: 90px 0 0;
    }

    .ss-booking{
        margin-bottom: 56px;
        border-radius: 22px;
    }

    .ss-booking-info,
    .ss-form{
        padding: 36px 30px;
    }

    .ss-footer-grid{
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .ss-footer-col + .ss-footer-col,
    .ss-footer-contact-col{
        border-left: none;
        padding-left: 6px;
        border-top: 1px solid var(--ss-line);
        padding-top: 32px;
    }

    .ss-footer-brand{
        text-align: center;
    }

    .ss-footer-logo{
        margin-left: auto;
        margin-right: auto;
    }

    .ss-footer-desc{
        margin-left: auto;
        margin-right: auto;
    }

    .ss-footer-social{
        justify-content: center;
    }

    .ss-footer-heading{
        text-align: center;
    }

    .ss-footer-heading::after{
        left: 50%;
        transform: translateX(-50%);
    }

    .ss-footer-list{
        text-align: center;
    }

    .ss-footer-list a{
        justify-content: center;
    }

    .ss-footer-contact-list li{
        grid-template-columns: 36px minmax(0,1fr);
        max-width: 380px;
        margin: 0 auto;
        text-align: left;
    }
}

/* ---------------- 768px : mobile ---------------- */
@media (max-width: 768px){

    .ss-footer{
        padding: 70px 0 0;
    }

    .ss-footer-aurora{
        filter: blur(60px);
    }

    .ss-booking{
        margin-bottom: 46px;
        border-radius: 18px;
    }

    .ss-booking-info,
    .ss-form{
        padding: 28px 22px;
    }

    .ss-booking-tag{
        font-size: 11px;
        padding: 7px 14px;
    }

    .ss-booking-info h3{
        font-size: 27px;
    }

    .ss-booking-info p{
        font-size: 14px;
        max-width: none;
    }

    .ss-form-grid{
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ss-submit{
        width: 100%;
    }

    .ss-footer-grid{
        padding-bottom: 44px;
    }
}

/* ---------------- 576px : small mobile ---------------- */
@media (max-width: 576px){

    .ss-footer{
        padding: 60px 0 0;
    }

    .ss-booking-info::before{
        left: 22px;
    }

    .ss-booking-pills{
        gap: 10px;
    }

    .ss-pill{
        padding: 12px 14px;
        font-size: 13.5px;
    }

    .ss-footer-bottom{
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 22px 0;
    }

    .ss-footer-powered{
        justify-content: center;
    }
}

/* ---------------- 480px : extra-small mobile ---------------- */
@media (max-width: 480px){

    .ss-booking-info h3{
        font-size: 24px;
    }

    .ss-booking-hours{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ss-footer-heading{
        font-size: 21px;
    }

    .ss-footer-contact-list li{
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 8px;
        text-align: center;
    }

    .ss-footer-contact-list h6,
    .ss-footer-contact-list p,
    .ss-footer-contact-list a{
        text-align: center;
    }
}

/* ---------------- 400px : very small phones ---------------- */
@media (max-width: 400px){

    .ss-booking-info,
    .ss-form{
        padding: 22px 16px;
    }

    .ss-field input,
    .ss-field select,
    .ss-field textarea{
        padding: 12px 14px;
        font-size: 14px;
    }

    .ss-submit{
        padding: 13px 24px;
        font-size: 13.5px;
    }

    .ss-footer-logo{
        max-width: 150px;
    }

    .ss-footer-desc{
        font-size: 13.5px;
    }
}

/* ---------------- landscape short viewport safety ---------------- */
@media (max-height: 480px) and (orientation: landscape){

    .ss-footer{
        padding: 60px 0 0;
    }

    .ss-booking{
        margin-bottom: 36px;
    }
}

/* ---------------- 993px–1199px : tablet-landscape bridge ----------------
   At this width the grid was 2 columns with the brand row spanning
   full-width, which left the contact column alone on its own row with
   an empty cell beside it. Give it the full row and lay its list out
   horizontally so the row is used edge-to-edge, no blank space. */
@media (min-width: 993px) and (max-width: 1199px){

    .ss-footer-contact-col{
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--ss-line);
        padding-left: 6px;
        padding-top: 32px;
    }

    .ss-footer-contact-list{
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px 40px;
    }

    .ss-footer-contact-list li{
        flex: 1 1 240px;
    }
}