/* Travel Tips Styling Fixes */

/* Section titles (big bold text) on white background */
.travel-tips .section-layout__title,
.travel-tips__main .section-layout__title,
.travel-tips__detail .section-layout__title,
section-layout .section-layout__title {
    color: #0069ad !important;
    font-weight: bold !important;
}

/* Detail Header Styling (Title and Subtitle) */
.travel-tips__detail .section-layout>div>h1.uppercase.font-bold,
.travel-tips__detail .section-layout>div>.flex>h1.uppercase.font-bold {
    color: #0069ad !important;
}

.travel-tips__detail .section-layout>div>span.underline,
.travel-tips__detail .section-layout>div>.flex>span.underline {
    color: #0069ad !important;
    opacity: 0.8;
}

/* Action Button Hover */
.travel-tips__detail--btn-action:hover {
    background-color: #0069ad !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 105, 173, 0.3) !important;
    text-decoration: none !important;
}

/* Mobile card styling */
@media (max-width: 768px) {
    .travel-tips .section-layout__cards--tip card-square {
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
    }

    .travel-tips .section-layout__cards--tip .card-square {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1/1 !important;
        height: auto !important;
        border-radius: 1rem !important;
    }

    .travel-tips .section-layout__cards--tip .card-square__title {
        color: #ffffff !important;
        font-size: 1.2rem !important;
        padding: 0 1rem !important;
        text-align: center !important;
    }
}

/* Ensure banner titles remain white */
.travel-tips .banner__title,
.travel-tips .banner__subtitle,
.travel-tips__banner .banner__title,
.travel-tips__banner .banner__subtitle {
    color: #ffffff !important;
}

/* Wap mobile: Prevent horizontal scroll - better vertical scroll UX */
@media (max-width: 768px) {
    html {
        overflow-x: hidden !important;
    }
    body.wap {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    body.wap .page-container,
    body.wap .page-content,
    body.wap .content-wrapper {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    body.wap .travel-tips,
    body.wap .travel-tips__main,
    body.wap .travel-tips__container {
        max-width: 100% !important;
        overflow-x: hidden;
    }
    body.wap section-layout,
    body.wap .section-layout__cards--article,
    body.wap .section-layout__cards--video,
    body.wap .section-layout__cards--square {
        max-width: 100% !important;
    }
}