/* =========================================================================
   TravelKit SR — Responsive overrides (mobile-first)
   Breakpoints: sm 576, md 768, lg 992, xl 1200, xxl 1400
   ========================================================================= */

/* --- Collapse nav under lg (992px) ------------------------------------- */
@media (max-width: 991.98px) {
    .tk-nav__toggle { display: inline-flex; }
    .tk-nav__menu {
        position: fixed;
        top: var(--tk-header-height);
        left: 0; right: 0;
        max-height: calc(100vh - var(--tk-header-height));
        padding: var(--tk-space-6) var(--tk-space-4);
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: var(--tk-space-3);
        border-top: 1px solid var(--tk-border);
        box-shadow: var(--tk-shadow-lg);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        overflow-y: auto;
        transition: opacity var(--tk-dur-base) var(--tk-ease),
                    transform var(--tk-dur-base) var(--tk-ease);
    }
    .tk-nav__menu.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .tk-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
    .tk-nav__link { padding: 14px 16px; font-size: 1rem; }
    .tk-nav__cta { width: 100%; justify-content: center; }
}

/* --- Hero stacks under lg --------------------------------------------- */
@media (max-width: 991.98px) {
    .tk-hero__container { grid-template-columns: 1fr; text-align: center; }
    .tk-hero__subtitle  { margin-inline: auto; }
    .tk-hero__cta       { justify-content: center; }
    .tk-hero__trust     { max-width: 520px; margin-inline: auto; }
    .tk-hero__visual    { order: 2; margin-top: var(--tk-space-6); margin-bottom: 0; }
    .tk-hero__eyebrow   { margin-inline: auto; }
}

/* --- Under md ---------------------------------------------------------- */
@media (max-width: 767.98px) {
    .tk-process   { grid-template-columns: 1fr; }
    .tk-benefits  { grid-template-columns: 1fr; }
    .tk-hero__trust { grid-template-columns: 1fr; }
    .tk-hero__title { font-size: var(--tk-fs-4xl); }
    .tk-cta-final__card  { padding: var(--tk-space-10) var(--tk-space-5); }
    .tk-cta-final__title { font-size: var(--tk-fs-3xl); }
    .tk-cookie__inner    { grid-template-columns: 1fr; }
    .tk-cookie__actions  { justify-content: stretch; }
    .tk-cookie__actions .tk-btn { flex: 1 1 auto; }
    .tk-whatsapp-float__label { display: none; }
    .tk-whatsapp-float   { padding: 14px; }
}

/* --- Small mobile ------------------------------------------------------ */
@media (max-width: 575.98px) {
    .tk-section__header { margin-bottom: var(--tk-space-8); }
    .tk-hero { padding-block: var(--tk-space-12) var(--tk-section-y-md); }
    .tk-nav__logo { height: 48px; }
    .tk-pricing__value { font-size: 3.5rem; }
    .tk-pricing__card  { padding: var(--tk-space-8) var(--tk-space-5); }
    .tk-footer__bottom { flex-direction: column; align-items: flex-start; }
    .tk-page-hero__title { font-size: var(--tk-fs-3xl); }

    /* Cookie banner — stack buttons vertically at small screens */
    .tk-cookie { left: 12px; right: 12px; bottom: 12px; padding: var(--tk-space-4); }
    .tk-cookie__actions { flex-direction: column; }
    .tk-cookie__actions .tk-btn { width: 100%; padding: 12px 16px; }

    /* Hero card — tighter padding on small screens */
    .tk-hero__card { padding: var(--tk-space-4); }
    .tk-hero__card-row { font-size: 0.875rem; padding: 8px 0; }

    /* Safety: no horizontal overflow */
    .tk-hero__title, .tk-page-hero__title, h1, h2 { word-wrap: break-word; overflow-wrap: break-word; }
    .container { padding-inline: 12px; }
}

/* Very small mobile — stack CTAs and card rows */
@media (max-width: 480px) {
    .tk-hero__cta .tk-btn,
    .tk-page-hero__cta .tk-btn { width: 100%; justify-content: center; }
    .tk-hero__cta,
    .tk-page-hero__cta { flex-direction: column; align-items: stretch; }

    /* Prevent card row overflow at very small screens by wrapping */
    .tk-hero__card-row { flex-wrap: wrap; gap: 4px; }
    .tk-hero__card-row strong { flex-basis: 100%; text-align: left; }

    /* Force layout containment */
    html, body { max-width: 100vw; overflow-x: hidden; }
    .tk-hero__card, .tk-info-card { max-width: 100%; box-sizing: border-box; }
}

/* --- Interior-page components ----------------------------------------- */
@media (max-width: 991.98px) {
    .tk-journey { grid-template-columns: repeat(3, 1fr); }
    .tk-values .col-md-6.col-lg { flex: 0 0 auto; width: 33.333333%; }
}
@media (max-width: 767.98px) {
    .tk-journey { grid-template-columns: 1fr; gap: var(--tk-space-6); }
    .tk-story__visual { grid-template-columns: 1fr 1fr; }
    .tk-values .col-md-6.col-lg { width: 50%; }
    .tk-page-hero { padding-block: var(--tk-space-10) var(--tk-space-12); }
    .tk-page-hero__title { font-size: var(--tk-fs-3xl); }
}
@media (max-width: 575.98px) {
    .tk-story__visual { grid-template-columns: 1fr; }
    .tk-values .col-md-6.col-lg { width: 100%; }
    .tk-mv-card { padding: var(--tk-space-6); }
}

/* --- Entry Fee landing-page components -------------------------------- */
@media (max-width: 767.98px) {
    .tk-page-hero__trust    { grid-template-columns: 1fr; }
    .tk-info-card__list li  { flex-direction: column; align-items: flex-start; gap: 2px; }
    .tk-info-card__val      { text-align: left; }
    .tk-eligibility-note    { flex-direction: column; align-items: flex-start; }
}

/* --- Blog system ------------------------------------------------------ */
@media (max-width: 991.98px) {
    .tk-blog-toc { position: static; margin-bottom: var(--tk-space-6); }
    .tk-blog-post-section .col-lg-3.order-lg-3 { margin-top: var(--tk-space-8); }
}
@media (max-width: 767.98px) {
    .tk-blog-post-hero__title { font-size: var(--tk-fs-3xl); }
    .tk-blog-post-hero__meta { justify-content: flex-start; }
    .tk-blog-cta { flex-direction: column; align-items: flex-start; }
    .tk-blog-search__wrap { padding: 4px 4px 4px 14px; }
    .tk-blog-search__submit { padding: 10px 16px; font-size: 0.875rem; }
    .tk-blog-post__body h2 { font-size: 1.5rem; }
    .tk-blog-post__body h3 { font-size: 1.25rem; }
}

/* --- Legal pages ------------------------------------------------------ */
@media (max-width: 991.98px) {
    .tk-legal-toc { position: static; margin-bottom: var(--tk-space-6); }
}

/* --- Contact page ----------------------------------------------------- */
@media (max-width: 767.98px) {
    .tk-form         { padding: var(--tk-space-5); }
    .tk-form__actions { flex-direction: column; align-items: stretch; }
    .tk-route        { flex-direction: column; gap: var(--tk-space-4); padding: var(--tk-space-6); }
    .tk-route__path  { width: 100%; height: 44px; }
    .tk-hours-card   { padding: var(--tk-space-5); }
}