/* ==========================================================================
   Responsive CSS
   Tablet and mobile overrides. This file must be enqueued after page CSS.
   ========================================================================== */

/* ============================================================
   TABLET  768px - 1023px
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

    :root {
        --section-spacing: 64px;
    }

    .site-container {
        width: min(var(--container-width), calc(100% - 48px));
    }

    /* Layout */
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Header */
    .site-header__inner {
        height: 68px;
        gap: 16px;
    }
    .site-brand img { max-height: 44px; max-width: 220px; }
    .primary-navigation { display: none; }
    .header-cta { display: none; }
    .menu-toggle { display: flex; flex-shrink: 0; }
    .mobile-nav { max-height: calc(100dvh - 68px); padding: 18px 24px 24px; }

    /* Hero */
    .hero { padding-block: 64px; }
    .hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .hero__content { max-width: 720px; }
    .hero__image { max-width: 560px; margin-inline: auto; }
    .hero__actions { flex-wrap: wrap; }

    /* Home */
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about__inner { grid-template-columns: 1fr; gap: 40px; }
    .advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-cta__inner { grid-template-columns: 1fr; gap: 40px; }
    .cta-banner__inner { flex-direction: column; text-align: center; }
    .cta-banner__actions { justify-content: center; }

    /* About */
    .company-section__inner { grid-template-columns: 1fr; gap: 40px; }
    .company-section__image { max-width: 720px; width: 100%; }
    .vm-grid { grid-template-columns: 1fr; }
    .about-advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Services */
    .services-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-single__body { grid-template-columns: 1fr; }
    .service-booking-card { position: static; }
    .related-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Blog */
    .blog-archive,
    .contact-page { padding-block: 64px; }
    .blog-archive__inner { grid-template-columns: 1fr; gap: 44px; }
    .blog-sidebar { position: static; }
    .article-single__inner { grid-template-columns: 1fr; gap: 44px; }
    .post-list-card { grid-template-columns: 220px minmax(0, 1fr); }
    .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Contact */
    .contact-page__inner { grid-template-columns: 1fr; gap: 48px; }
    .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Footer */
    .footer-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

/* ============================================================
   MOBILE  max-width: 767px
   ============================================================ */
@media (max-width: 767px) {

    :root {
        --section-spacing: 48px;
    }

    .site-container {
        width: calc(100% - 32px);
    }

    /* Prevent long text/URLs from creating horizontal overflow */
    main,
    .site-main,
    .site-container,
    .article-content,
    .service-single__content,
    .contact-detail-item__value {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Layout */
    .grid-4,
    .grid-3,
    .grid-2 { grid-template-columns: 1fr; }

    /* Typography */
    h1 { font-size: clamp(30px, 9vw, 40px); }
    h2 { font-size: clamp(24px, 7vw, 32px); }
    h3 { font-size: clamp(18px, 5.5vw, 22px); }
    .section-desc { font-size: 15px; }
    .section-header { margin-bottom: 28px; }
    .section-label { font-size: 12px; letter-spacing: 1.5px; }

    /* Header */
    .site-header__inner {
        height: 64px;
        gap: 12px;
    }
    .site-brand { min-width: 0; }
    .site-brand a { min-width: 0; }
    .site-brand img { max-height: 40px; max-width: min(210px, 65vw); }
    .site-brand__text {
        max-width: 65vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 19px;
    }
    .primary-navigation { display: none; }
    .header-cta { display: none; }
    .menu-toggle { display: flex; flex-shrink: 0; }
    .mobile-nav {
        padding: 12px 16px 20px;
        max-height: calc(100dvh - 64px);
    }
    .mobile-nav a { padding: 11px 12px; }
    .mobile-nav .sub-menu {
        padding-left: 10px;
        margin-left: 12px;
    }

    /* Hero */
    .hero { padding-block: 44px; }
    .hero__inner { grid-template-columns: 1fr; gap: 28px; }
    .hero__image {
        display: block;
        max-width: 100%;
        order: 2;
    }
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .hero__actions .button { width: 100%; justify-content: center; }

    /* Shared cards */
    .service-card,
    .advantage-box { padding: 20px; }
    .services-grid { grid-template-columns: 1fr; gap: 16px; }
    .advantages-grid { grid-template-columns: 1fr; }
    .cta-banner { padding-block: 40px; }
    .cta-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .cta-banner__actions { flex-direction: column; width: 100%; }
    .cta-banner__actions .button { width: 100%; justify-content: center; }

    /* Home */
    .about__inner { grid-template-columns: 1fr; gap: 32px; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .posts-grid { grid-template-columns: 1fr; }
    .contact-cta__inner { grid-template-columns: 1fr; gap: 32px; }

    /* About */
    .about-hero { padding-block: 36px; }
    .about-hero p { font-size: 15px; }
    .company-section__inner { grid-template-columns: 1fr; gap: 28px; }
    .vm-grid { grid-template-columns: 1fr; gap: 16px; }
    .vm-box { padding: 22px 18px; }
    .about-advantages-grid { grid-template-columns: 1fr; }

    /* Services */
    .services-archive-grid { grid-template-columns: 1fr; }
    .service-single__header { padding-block: 44px; }
    .service-single { padding-bottom: 48px; }
    .service-single__body { grid-template-columns: 1fr; gap: 32px; }
    .service-booking-card { position: static; }
    .related-services-grid { grid-template-columns: 1fr; }
    .service-archive-card__actions { flex-direction: column; }
    .service-archive-card__actions .button { width: 100%; justify-content: center; }

    /* Blog */
    .blog-archive,
    .article-single,
    .contact-page { padding-block: 48px; }
    .article-hero { padding-block: 44px; }
    .blog-archive__inner { grid-template-columns: 1fr; gap: 36px; }
    .blog-sidebar { position: static; }
    .article-single__inner { grid-template-columns: 1fr; gap: 36px; }
    .post-list-card { grid-template-columns: 1fr; gap: 0; }
    .post-list-card__thumbnail { aspect-ratio: 16 / 9; }
    .post-list-card__body { padding: 18px; }
    .post-list-card__title { font-size: 18px; }
    .post-list-card__meta { flex-wrap: wrap; gap: 8px 12px; }
    .article-content { font-size: 16px; line-height: 1.75; }
    .article-content h2 { font-size: 24px; margin-top: 32px; }
    .article-content h3 { font-size: 20px; margin-top: 28px; }
    .article-featured-image { margin-bottom: 28px; }
    .pagination { flex-wrap: wrap; margin-top: 36px; }

    /* Contact */
    .contact-page__inner { grid-template-columns: 1fr; gap: 32px; }
    .contact-form__row { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 20px 16px; }
    .contact-map iframe { height: 220px; }
    .contact-wa-btn { width: 100%; justify-content: center; }

    /* Footer */
    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-block: 44px 28px;
    }
    .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }

    /* WA Float */
    .wa-float { width: 48px; height: 48px; bottom: 16px; right: 16px; }

    /* Page hero */
    .page-hero { padding-block: 40px; }

    /* Breadcrumb */
    .breadcrumb { overflow-x: auto; scrollbar-width: none; }
    .breadcrumb::-webkit-scrollbar { display: none; }
    .breadcrumb__list {
        font-size: 12px;
        white-space: nowrap;
        min-width: max-content;
    }

    /* Forms, buttons and embedded content */
    input,
    textarea,
    select,
    .form-control { font-size: 16px; }
    .button { white-space: normal; text-align: center; }
    .button-lg { padding: 14px 24px; font-size: 16px; }
    .article-content iframe,
    .service-single__content iframe { width: 100%; max-width: 100%; }
    .article-content table,
    .service-single__content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Extra-small phones */
@media (max-width: 380px) {
    .site-container { width: calc(100% - 24px); }
    .mobile-nav { padding-inline: 12px; }
    .service-card,
    .advantage-box { padding: 18px; }
    .contact-form-wrap { padding-inline: 14px; }
}

/* ============================================================
   DESKTOP  min-width: 1024px
   ============================================================ */
@media (min-width: 1024px) {
    .primary-navigation { display: flex !important; }
    .header-cta { display: block; }
    .menu-toggle { display: none !important; }
    .mobile-nav { display: none !important; }
}