/* =========================================================
   TTC NETWORK - MOBILE FINAL
   - Hide old top tabs
   - Heading appears before each gallery group
   - Gallery 2 columns
   ========================================================= */

.ttcn .ttcn__mobile-heading {
    display: none;
}


@media (max-width: 849px) {

    /* =====================================================
       1. REMOVE DESKTOP / OLD MOBILE NAV
       ===================================================== */

    .ttcn .ttcn__sidebar,
    .ttcn .ttcn__layout > .ttcn__sidebar,
    .ttcn .ttcn__layout > .ttcn__tabs,
    .ttcn > .ttcn__tabs,
    .ttcn .ttcn__mobile-tabs,
    .ttcn .ttcn__mobile-nav,
    .ttcn .ttcn__category-tabs {
        display: none !important;
    }


    /* =====================================================
       2. MAIN LAYOUT
       ===================================================== */

    .ttcn .ttcn__layout {
        display: block !important;
        width: 100% !important;
    }

    .ttcn .ttcn__feed {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .ttcn .ttcn-group {
        display: block;
        width: 100%;
        scroll-margin-top: 80px;
    }


    /* =====================================================
       3. HEADING PER GROUP
       Bác sĩ -> gallery
       KOL -> gallery
       ...
       ===================================================== */

    .ttcn .ttcn__mobile-heading {
        display: block !important;

        position: relative !important;
        top: auto !important;
        left: auto !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 20px 20px 21px;

        background:
            var(
                --ttcn-primary,
                var(--primary-color, #e8aa29)
            );

        color: #fff;

        z-index: 1;
    }

    .ttcn .ttcn__mobile-heading-inner {
        width: 100%;
        max-width: 760px;

        margin: 0 auto;
    }

    .ttcn .ttcn__mobile-heading-title {
        margin: 0 !important;

        color: #fff !important;

        font-size: 22px;
        font-weight: 750;
        line-height: 1.25;

        overflow-wrap: anywhere;
    }

    .ttcn .ttcn__mobile-heading-desc {
        max-width: 670px;

        margin: 7px 0 0 !important;

        color: rgba(255,255,255,.92) !important;

        font-size: 13px;
        line-height: 1.5;
    }


    /* =====================================================
       4. GALLERY AREA
       ===================================================== */

    .ttcn .ttcn__content {
        width: 100%;

        padding: 20px 20px 44px;
    }

    .ttcn .ttcn__content-inner {
        width: 100%;
        max-width: 760px;

        margin: 0 auto;
        padding: 0;
    }

    .ttcn .ttcn__grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 14px !important;

        width: 100% !important;
    }


    /* =====================================================
       5. CARD
       ===================================================== */

    .ttcn .ttcn-tile {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
    }

    .ttcn .ttcn-tile:nth-child(even) {
        top: 0;
    }

    .ttcn .ttcn-tile__surface,
    .ttcn button.ttcn-tile__surface {
        width: 100% !important;

        aspect-ratio: .82;

        border-radius: 10px;

        overflow: hidden;
    }

    .ttcn .ttcn-tile__surface img,
    .ttcn .ttcn-tile__image {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* =====================================================
       6. CARD TEXT
       ===================================================== */

    .ttcn .ttcn-tile__title {
        top: 42px;

        padding-left: 10px;
        padding-right: 10px;

        font-size: 13px;
        line-height: 1.3;
    }

    .ttcn .ttcn-tile__side {
        font-size: 9px;
    }


    /* =====================================================
       7. REVEAL ANIMATION
       ===================================================== */

    .ttcn.ttcn--reveal.has-reveal
    .ttcn__mobile-heading-inner {
        opacity: 0;

        transform: translateY(8px);

        transition:
            opacity .36s ease,
            transform .36s ease;
    }

    .ttcn.ttcn--reveal.has-reveal
    .ttcn__mobile-heading-inner.is-visible {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 549px) {

    .ttcn .ttcn__mobile-heading {
        padding: 17px 14px 18px;
    }

    .ttcn .ttcn__mobile-heading-title {
        font-size: 18px;
    }

    .ttcn .ttcn__mobile-heading-desc {
        margin-top: 5px !important;

        font-size: 10px;
        line-height: 1.45;
    }

    .ttcn .ttcn__content {
        padding: 12px 10px 30px;
    }

    /* MOBILE VẪN 2 CỘT */

    .ttcn .ttcn__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;

        max-width: none !important;

        margin: 0 !important;
    }

    .ttcn .ttcn-tile {
        min-width: 0 !important;
    }

    .ttcn .ttcn-tile__surface,
    .ttcn button.ttcn-tile__surface {
        aspect-ratio: .78;

        border-radius: 8px;
    }

    .ttcn .ttcn-tile__title {
        top: 35px;

        padding-left: 7px;
        padding-right: 7px;

        font-size: 10px;
        line-height: 1.25;
    }

    .ttcn .ttcn-tile__side {
        right: 4px;

        font-size: 7px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ttcn .ttcn__mobile-heading-inner {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }
}