/*--------------------------------------------------------------
# Mobile Responsive
--------------------------------------------------------------*/

/* All mobile/tablet sizes where hamburger nav is active */
@media (max-width: 1199px) {

    /* Move button+lang div before the hamburger (visually) */
    .container-nav > .d-flex.align-items-center {
        order: 1;
        margin: auto;
    }

    .container-nav .navmenu {
        order: 2;
    }

    /* Show button-nav on mobile with compact size */
    .button-nav {
        padding: 6px 6px 6px 12px;
        gap: 6px;
        max-width: 180px;
        background: #EC313A;
        margin: 4px 17px;
        border-radius: 100px;
        font-size: 13px;
    }

    .button-nav-text {
        color: #ffffff;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 100%;
    }
    
    /* .switch{
        margin-left: 80px;
    } */

    .position-tab-custom{
        margin-left: 350px !important;
    }
}

@media (max-width: 896px) {
    /* --- Hero --- */
    #hero-carousel {
        min-height: 48vw !important;
        max-height: 60vh;
    }

    .position-tab-custom{
        margin: auto !important;
    }
}

@media (max-width: 768px) {

    .d-none-mobile{
        display: none !important;
    }
    /* --- Hero Banner --- */
    .tag-line-bg {
        height: 30vh;
        min-height: 200px;
        background-position: center center;
    }

    .tag-line-bg h2 {
        font-size: 21px;
        line-height: 1.4;
    }

    /* --- Header --- */

    .header .logo img {
        max-height: 35px;
        margin-right: 0px;
    }

    .nav-lang {
        width: 28px;
        height: 28px;
        margin-left: 4px;
    }

    /* --- About --- */
    .about {
        height: auto;
    }

    /* --- Hero --- */
    #hero-carousel {
        min-height: 48vw !important;
        max-height: 60vh;
    }

    .hero .carousel {
        min-height: unset;
        height: 48vw;
        max-height: 60vh;
    }

    /* --- About --- */
    .about-title h1 {
        font-size: 28px;
        margin-top: 12px;
    }

    .about-content {
        margin: 0 16px;
        text-align: left;
        text-align: justify;
    }

    .visi-misi{
        text-align: justify;
    }

    .about-content h2 {
        font-size: 22px;
    }

    .about-content p {
        font-size: 15px;
    }

    /* --- Facility Grid --- */
    .facility-row {
        flex-direction: column;
    }

    .facility-card {
        min-height: 220px;
    }

    .facility-card[style] {
        min-height: 220px !important;
    }

    .facility-cta {
        min-height: 80px;
    }

    /* --- Border --- */
    .border-facility {
        border-width: 3px;
    }

    /* --- Site Footer --- */

    .site-footer{
        height: 100vh;
    }

    .site-footer .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Force col-md-7 and col-md-4 to full width on mobile */
    .sf-mid .col-md-7,
    .sf-mid .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Stack the 3 company link columns vertically as 2 columns */
    .sf-mid .col-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        margin-bottom: 8px;
    }

    /* Add horizontal divider before "Hubungi Kami" */
    .sf-mid .col-md-4 {
        border-top: 1px solid rgba(255, 255, 255, 0.35);
        padding-top: 20px;
        margin-top: 8px;
    }

    .sf-top {
        padding-bottom: 16px !important;
    }

    .sf-desc {
        text-align: justify;
        font-size: 13px;
    }

    .sf-links li {
        margin-bottom: 6px;
    }

    .sf-links a {
        font-size: 14px;
    }

    .sf-links a::before {
        top: -3px;
        left: -6px;
        right: -6px;
        bottom: -3px;
    }

    .sf-logo img {
        height: 48px;
    }

    /* Prevent long phone/email lines from causing overflow */
    .sf-contact p {
        font-size: 13px;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .sf-contact a {
        word-break: break-all;
    }

    .sf-bottom {
        display: block !important;
    }

    .sf-bottom p {
        font-size: 12px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* --- Marketing Location --- */
    .card-location {
        padding: 8px;
    }

    .card-location-content {
        padding: 14px 12px 12px;
    }

    .card-location-content p {
        font-size: 12px;
        line-height: 1.6;
    }

    .circle-location {
        width: 50px;
        height: 50px;
        border-width: 3px;
    }
    
    /* --- Promo --- */
    .promo-lightbox .modal-dialog {
        max-width: 95%;
        margin: 1rem auto;
    }
    
    .promo-lightbox-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .promo-lightbox-img-wrapper {
        border: 4px solid #9E8364;
        order: 1;
    }
    
    .promo-lightbox #promoLightboxImg {
        max-height: 80vh;
    }
    
    .promo-lightbox-close {
        position: relative;
        top: auto;
        right: auto;
        width: 50px;
        height: 50px;
        order: 2;
        margin-top: 20px;
    }
    
    .promo-lightbox-close svg {
        width: 22px;
        height: 22px;
    }

    /* --- Impian / Social Media Section --- */
    .impian h2 {
        font-size: 26px;
    }

    .impian p {
        font-size: 13px;
    }

    .impian .d-flex.justify-content-center.m-auto.mb-5 {
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 16px;
    }

    .impian .social-media {
        width: calc(50% - 5px);
        height: 56px;
        padding: 0 16px;
        margin: 0;
        justify-content: center;
        font-size: 14px;
    }

    /* Last button (Linktree - 5th) centered alone on its row */
    .impian .social-media:last-child {
        width: calc(50% - 5px);
    }

    .strategy-legends{
        position: relative;
        left: 0;
        top: 0;
        transform: translate(0, 0);
    }
    
    .product-filter-btn{
        padding: 6px 12px;
        font-size: 13px;
    }

    .fc-full   { min-height: 340px; }
    .fc-tall   { min-height: 340px; }
    .fc-half   { min-height: 340px; }
    .fc-medium { min-height: 340px; }

    .facilities-center-column{
        gap: 1rem;
        padding: 0 10px;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {

    /* --- About --- */
    .about-content {
        margin: 0 60px;
    }

    .about-title h1 {
        font-size: 36px;
    }

    /* --- Facility --- */
    .facility-card {
        min-height: 260px;
    }

    .facility-card[style] {
        min-height: 380px !important;
    }
}

/* --- News Detail --- */
@media (max-width: 576px) {
.nd-related-img { width: 72px; height: 55px; }
}