/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* ---------- TABLET (max 1024px) ---------- */
@media (max-width: 1024px) {
    .tm-container {
        padding: 0 40px;
    }

    .tm-header .tm-container,
    .tm-footer .tm-container {
        padding: 0 40px !important;
    }

    .tm-hero {
        padding: 48px 40px;
        flex-direction: column;
    }

    .tm-hero__image {
        width: 100%;
        height: 380px;
    }

    .tm-hero__title {
        font-size: 48px;
    }

    .tm-hero__subtitle {
        font-size: 18px;
    }

    .tm-stats {
        padding: 0 40px 48px;
    }

    .tm-stats__number {
        font-size: 34px;
    }

    .tm-services {
        padding: 0 40px 64px;
    }

    .tm-services__grid {
        flex-direction: column;
    }

    .tm-section-title {
        font-size: 36px;
    }

    .tm-projects {
        padding: 0 40px 72px;
    }

    .tm-projects__grid {
        flex-direction: column;
    }

    .tm-project-card__image {
        height: 220px;
    }

    .tm-project-card__title {
        font-size: 24px;
    }

    .tm-blog-teaser {
        padding: 0 40px 72px;
    }

    .tm-blog-teaser__row {
        flex-direction: column;
    }

    .tm-cta-section {
        padding: 0 40px 72px !important;
    }

    .tm-cta-card {
        padding: 32px !important;
    }

    .tm-cta-card__title {
        font-size: 34px !important;
    }

    .tm-footer .tm-container {
        padding: 0 40px;
    }

    /* Blog listing */
    .tm-blog-intro {
        padding: 32px 40px 32px;
    }

    .tm-blog-intro__title {
        font-size: 40px;
    }

    .tm-featured {
        padding: 0 40px 48px;
        flex-direction: column;
    }

    .tm-featured__image {
        width: 100%;
        height: 280px;
    }

    .tm-featured__title {
        font-size: 32px;
    }

    .tm-posts {
        padding: 0 40px 60px;
    }

    .tm-posts__title {
        font-size: 32px;
    }

    .tm-newsletter {
        padding: 0 40px 60px;
    }

    /* Article detail */
    .tm-article-hero {
        padding: 28px 40px 28px;
    }

    .tm-article-hero__title {
        font-size: 40px;
    }

    .tm-article-cover {
        padding: 0 40px;
    }

    .tm-article-cover img {
        height: 320px;
    }

    .tm-article-content {
        padding: 0 40px 60px;
    }
}

/* ---------- MOBILE (max 768px) ---------- */
@media (max-width: 768px) {
    .tm-container {
        padding: 0 20px;
    }

    .tm-header .tm-container,
    .tm-footer .tm-container {
        padding: 0 20px !important;
    }

    /* Nav mobile */
    .tm-hamburger {
        display: flex !important;
        order: 3 !important;
    }

    .tm-nav__cta {
        display: none !important;
    }

    .tm-header .tm-nav__links {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 12px !important;
        right: 12px !important;
        transform: none !important;
        background: #FFFFFF !important;
        padding: 28px 20px !important;
        border: 1px solid var(--tm-gray-100) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        flex: none !important;
        width: auto !important;
    }

    .tm-header .tm-nav__links.is-open {
        display: flex !important;
    }

    .tm-header .tm-nav__menu {
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .tm-header .tm-nav__menu li a,
    .tm-header .tm-nav__menu .menu-item a {
        font-size: 18px !important;
        display: block !important;
        padding: 8px 0 !important;
    }

    .tm-header {
        position: sticky !important;
        position: -webkit-sticky !important;
    }

    .tm-nav {
        position: static !important;
    }

    /* Hero mobile */
    .tm-hero {
        padding: 32px 20px;
        gap: 32px;
    }

    .tm-hero__title {
        font-size: 36px;
    }

    .tm-hero__subtitle {
        font-size: 17px;
    }

    .tm-hero__buttons {
        flex-direction: column;
        gap: 10px;
    }

    .tm-hero__buttons a {
        text-align: center;
    }

    .tm-hero__image {
        height: 280px;
        border-radius: 16px;
    }

    .tm-hero__badge {
        font-size: 11px;
    }

    /* Stats mobile */
    .tm-stats {
        padding: 0 20px 40px;
    }

    .tm-stats__row {
        flex-direction: column;
        gap: 12px;
    }

    .tm-stats__number {
        font-size: 32px;
    }

    /* Services mobile */
    .tm-services {
        padding: 0 20px 48px;
    }

    .tm-section-title {
        font-size: 30px;
    }

    .tm-service-card__title {
        font-size: 20px;
    }

    /* Projects mobile */
    .tm-projects {
        padding: 0 20px 56px;
    }

    .tm-project-card__image {
        height: 200px;
    }

    .tm-project-card__title {
        font-size: 22px;
    }

    /* Blog teaser mobile */
    .tm-blog-teaser {
        padding: 0 20px 56px;
    }

    .tm-blog-teaser-card__title {
        font-size: 22px;
    }

    /* CTA mobile */
    .tm-cta-section {
        padding: 0 20px 56px !important;
    }

    .tm-cta-card {
        display: flex !important;
        flex-direction: column !important;
        padding: 24px 20px !important;
        border-radius: 16px !important;
        gap: 12px !important;
    }

    .tm-cta-card__title {
        font-size: 26px !important;
        line-height: 1.15 !important;
    }

    .tm-cta-card__subtitle {
        font-size: 15px !important;
    }

    .tm-cta-card__billing-label {
        font-size: 11px !important;
    }

    .tm-cta-card__billing-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .tm-cta-card__billing-box {
        min-height: auto !important;
        padding: 12px !important;
    }

    .tm-cta-card__btn-row {
        margin-top: 4px !important;
    }

    .tm-cta-card__btn {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        padding: 14px 20px !important;
    }

    /* Footer mobile */
    .tm-footer .tm-container {
        padding: 0 20px;
    }

    .tm-footer__top {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .tm-footer__menu {
        justify-content: center;
        flex-wrap: wrap;
    }

    .tm-footer__billing-address {
        text-align: center;
    }

    /* Blog listing mobile */
    .tm-blog-intro {
        padding: 24px 20px 24px;
    }

    .tm-blog-intro__title {
        font-size: 30px;
    }

    .tm-blog-intro__desc {
        font-size: 17px;
    }

    .tm-search-form {
        max-width: 100%;
    }

    .tm-featured {
        padding: 0 20px 40px;
    }

    .tm-featured__image {
        height: 220px;
    }

    .tm-featured__title {
        font-size: 26px;
    }

    .tm-featured__desc {
        font-size: 16px;
    }

    .tm-posts {
        padding: 0 20px 48px;
    }

    .tm-posts__title {
        font-size: 28px;
    }

    .tm-posts__grid {
        flex-direction: column;
    }

    .tm-post-card {
        flex: 1 1 100%;
    }

    .tm-post-card__title {
        font-size: 22px;
    }

    .tm-newsletter {
        padding: 0 20px 48px;
    }

    .tm-newsletter__card {
        padding: 24px 20px;
    }

    .tm-newsletter__title {
        font-size: 26px;
    }

    /* Article detail mobile */
    .tm-article-hero {
        padding: 24px 20px 20px;
    }

    .tm-article-hero__title {
        font-size: 30px;
    }

    .tm-article-hero__meta {
        flex-wrap: wrap;
        gap: 10px;
    }

    .tm-article-cover {
        padding: 0 20px;
    }

    .tm-article-cover img {
        height: 220px;
    }

    .tm-article-content {
        padding: 0 20px 48px;
        font-size: 16px;
    }

    .tm-article-content h2 {
        font-size: 26px;
    }

    .tm-article-content h3 {
        font-size: 20px;
    }

    /* Cookie bar mobile */
    .tm-cookie-bar {
        flex-direction: column;
        text-align: center;
        padding: 16px 20px;
    }

    .tm-cookie-bar__buttons {
        width: 100%;
    }

    .tm-cookie-bar__accept,
    .tm-cookie-bar__reject {
        flex: 1;
    }
}

/* ---------- SMALL MOBILE (max 480px) ---------- */
@media (max-width: 480px) {
    .tm-hero__title {
        font-size: 28px;
    }

    .tm-section-title {
        font-size: 26px;
    }

    .tm-stats__number {
        font-size: 28px;
    }

    .tm-cta-card__title {
        font-size: 22px !important;
    }

    .tm-cta-card__subtitle {
        font-size: 14px !important;
    }

    .tm-blog-intro__title {
        font-size: 26px;
    }

    .tm-article-hero__title {
        font-size: 26px;
    }
}