/* website-responsive.css
   Scales type + card proportions on small screens.
   Same design/structure — only smaller on phones/tablets. */

:root {
    --header-offset: 88px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Non-heading labels demoted for SEO — keep prior look */
.reviewer-name {
    margin: 0;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

.footer-heading {
    margin: 0 0 1.5rem;
    font-size: clamp(16px, 16px + 1vw, 19px);
    font-weight: 700;
    color: #fff;
}

.mega-title,
#mobileMenuTitle,
.hy-auth-heading {
    margin: 0;
}

#mobileMenuTitle {
    margin-bottom: 1rem;
}

/* CMS overflow safety */
.blog-content,
.cms-page-content,
.tour-about-text,
.ap-prose,
.dd-prose,
.seo-content {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.blog-content img,
.blog-content iframe,
.blog-content video,
.blog-content table,
.cms-page-content img,
.cms-page-content iframe,
.cms-page-content table,
.seo-content img,
.seo-content iframe,
.seo-content table {
    max-width: 100%;
    height: auto;
}

.blog-content table,
.cms-page-content table,
.seo-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.contact-page iframe {
    max-width: 100%;
}

.page-info,
.contact-page,
.hy-account-page .hy-account-hero,
.blog-details-box {
    scroll-margin-top: var(--header-offset);
}

.accordion-header {
    margin: 0;
}

.tour-package .title-wrapper {
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.tour-package .title-wrapper h3 {
    min-width: 0;
}

/* ========== Tablet: slightly smaller type ========== */
@media (max-width: 991.98px) {
    :root {
        --header-offset: 72px;
    }

    body {
        font-size: 15px;
    }

    .banner-title {
        font-size: clamp(28px, 5vw, 56px);
    }

    .page-info-title,
    .tour-hero-title,
    .dd-hero-title,
    .ap-hero-title {
        font-size: clamp(22px, 3.8vw, 34px);
    }

    .section-heading,
    .dd-title,
    .ap-title {
        font-size: clamp(18px, 2.2vw, 26px);
    }

    .card.tour-package h3,
    .destination-card .info .d-name,
    .trending-destination h3,
    .tip-content h3,
    .tip-content h4,
    .attraction-card-title,
    .sightseeing-card-title {
        font-size: clamp(16px, 1.6vw, 20px);
    }

    .card.tour-package img {
        height: 200px;
    }

    .heading-wrapper {
        flex-direction: column;
        align-items: stretch !important;
        gap: 1rem;
    }

    .heading-wrapper .row[style] {
        flex: 1 1 auto !important;
        width: 100%;
        margin: 0;
    }
}

/* ========== Phone: smaller type + compact cards ========== */
@media (max-width: 767.98px) {
    body {
        font-size: 14.5px;
    }

    .banner-title {
        font-size: clamp(24px, 7vw, 40px);
        margin-bottom: 1rem;
    }

    .banner-content p {
        font-size: 0.95rem;
    }

    .page-info-title,
    .tour-hero-title,
    .dd-hero-title,
    .ap-hero-title {
        font-size: clamp(20px, 5.5vw, 28px);
    }

    .section-heading,
    .dd-title,
    .ap-title {
        font-size: clamp(17px, 4.2vw, 22px);
    }

    .card.tour-package h3,
    .destination-card .info .d-name,
    .trending-destination h3,
    .tip-content h3,
    .tip-content h4,
    .attraction-card-title,
    .sightseeing-card-title,
    .promise-wrapper h3,
    .quick-link-section h2 {
        font-size: clamp(15px, 3.8vw, 18px);
    }

    .card.tour-package img {
        height: 180px;
    }

    .destination-card img {
        height: 180px;
    }

    .tip-content h3,
    .tip-content h4 {
        min-height: 0;
    }

    .accordion-button {
        font-size: 0.95rem;
    }

    .page-info-content {
        width: 92%;
        padding: 0.5rem 0.75rem;
    }

    .page-info-content p {
        font-size: 0.85rem;
    }
}

/* ========== Small phone: tightest scale ========== */
@media (max-width: 479.98px) {
    body {
        font-size: 14px;
    }

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .banner-title {
        font-size: clamp(22px, 8vw, 32px);
    }

    .page-info-title,
    .tour-hero-title,
    .dd-hero-title,
    .ap-hero-title {
        font-size: clamp(18px, 6vw, 24px);
    }

    .section-heading,
    .dd-title,
    .ap-title {
        font-size: clamp(16px, 5vw, 20px);
    }

    .card.tour-package h3,
    .destination-card .info .d-name,
    .trending-destination h3,
    .tip-content h3,
    .tip-content h4,
    .attraction-card-title,
    .sightseeing-card-title {
        font-size: 15px;
    }

    .card.tour-package img,
    .destination-card img {
        height: 160px;
    }

    .card.tour-package p,
    .tip-content p {
        font-size: 0.85rem;
    }

    .tour-details-page .enquiry-card .row .col-6 {
        width: 100%;
    }

    .ap-hero-actions .ap-btn,
    .dd-hero-actions .dd-btn,
    .tour-hero-actions .tour-hero-btn {
        width: 100%;
    }

    .list-style li a {
        white-space: normal;
    }

    .contact-page iframe {
        height: 260px;
    }
}

@media (max-width: 359.98px) {
    .hb-navbar {
        padding-left: 8px;
        padding-right: 8px;
    }

    .banner-title {
        font-size: 20px;
    }

    .card.tour-package img,
    .destination-card img {
        height: 150px;
    }
}