/* ============================================================
   JGS Lanka Portfolio — Comprehensive Mobile Responsive CSS
   Loaded LAST so all rules override desktop styles cleanly.
   
   Breakpoints:
     ≤ 768px  →  Tablet / large phone
     ≤ 480px  →  Small phone
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   BASE — overflow & box-sizing safety
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    *,
    *::before,
    *::after {
        max-width: 100%;
        box-sizing: border-box;
    }

    img,
    video,
    iframe,
    embed,
    object {
        max-width: 100% !important;
        height: auto;
    }


    /* ──────────────────────────────────────────
       SECTION PADDING
    ────────────────────────────────────────── */
    section {
        padding: 65px 5% !important;
    }

    .section-title {
        font-size: 1.75rem !important;
        margin-bottom: 32px;
    }

    .section-subtitle {
        font-size: 0.78rem;
        letter-spacing: 2px;
    }


    /* ──────────────────────────────────────────
       HERO / HEADER
    ────────────────────────────────────────── */
    header#home {
        padding: 100px 5% 70px !important;
        min-height: 100svh;
        min-height: 100vh;
    }

    .profile-img {
        width: 110px;
        height: 110px;
        margin-top: 0;
        margin-bottom: 14px;
    }

    .hero-title {
        font-size: clamp(1.9rem, 9vw, 2.8rem) !important;
        letter-spacing: -0.02em;
        margin-bottom: 0.9rem;
    }

    .hero-description {
        font-size: 0.9rem;
        margin-bottom: 1.8rem;
        line-height: 1.7;
        padding: 0 4px;
    }

    .header-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 16px;
    }

    /* Hide the complex floating showcase widget on mobile */
    .showcase-final-container {
        display: none !important;
    }

    .scroll-down {
        bottom: 14px;
        font-size: 1.1rem;
    }


    /* ──────────────────────────────────────────
       ANIMATED BUTTON (CTAs)
    ────────────────────────────────────────── */
    .animated-btn {
        width: 100%;
        max-width: 260px;
        justify-content: center;
    }

    .btn-inner {
        padding: 10px 22px;
        font-size: 0.88rem;
        justify-content: center;
        width: 100%;
    }


    /* ──────────────────────────────────────────
       GALLERY SECTION
    ────────────────────────────────────────── */
    .swiper-container {
        max-width: 100%;
    }

    #gallery .swiper-slide {
        width: 86%;
    }

    .swiper-slide img {
        height: 230px;
        border-radius: 10px;
    }

    #gallery {
        overflow: hidden;
    }


    /* ──────────────────────────────────────────
       PORTFOLIO CARDS
    ────────────────────────────────────────── */
    .portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    .portfolio-img {
        height: 195px;
    }

    .portfolio-content {
        padding: 15px 16px 17px !important;
    }

    .portfolio-title {
        font-size: 0.98rem !important;
        margin-bottom: 7px;
    }

    .portfolio-description {
        font-size: 0.81rem;
        line-height: 1.58;
        margin-bottom: 14px;
    }

    .portfolio-actions {
        gap: 8px;
        margin-top: 12px;
    }

    .portfolio-actions a.portfolio-btn {
        height: 38px;
        font-size: 0.8rem;
        padding: 0 12px;
        border-radius: 8px;
    }

    .portfolio-actions .buy-btn {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 0.88rem;
        border-radius: 8px;
    }

    /* Disable expensive hover lift on touch */
    .portfolio-card:hover {
        transform: none !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    }

    /* Price popup full-width on mobile */
    .price-popup {
        width: calc(100vw - 36px) !important;
        left: 18px !important;
        right: 18px;
    }


    /* ──────────────────────────────────────────
       EVENT MANAGEMENT SECTION
    ────────────────────────────────────────── */
    .event-cards-grid,
    .event-grid,
    .event-cards-container {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 18px;
    }

    .event-card {
        min-height: unset;
        width: 100% !important;
    }

    /* Hover reveal on touch - always show */
    .event-card-overlay {
        opacity: 1 !important;
        transform: none !important;
    }


    /* ──────────────────────────────────────────
       COMPANY BRANDING (Tabs + Swipers)
    ────────────────────────────────────────── */
    #company-branding {
        padding: 60px 4% !important;
    }

    .tab-buttons,
    .branding-tabs {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        padding: 0 !important;
    }

    .tab-btn {
        font-size: 0.82rem !important;
        padding: 8px 14px !important;
        border-radius: 20px;
    }

    .branding-slider-brand .swiper-slide,
    .branding-slider-logo .swiper-slide {
        width: 78vw !important;
    }

    .brand-next,
    .brand-prev,
    .logo-next,
    .logo-prev {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.85rem !important;
    }


    /* ──────────────────────────────────────────
       PROJECT CARDS
    ────────────────────────────────────────── */
    .project-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    .project-card-image {
        height: 175px;
    }

    /* Disable hover transform on touch */
    .project-card:hover {
        transform: none !important;
    }


    /* ──────────────────────────────────────────
       PACKAGES SECTION
    ────────────────────────────────────────── */
    .packages-grid {
        grid-template-columns: 1fr !important;
        gap: 18px;
        margin-top: 30px;
    }

    .package-card {
        padding: 26px 18px;
    }

    .package-title {
        font-size: 1.05rem;
    }

    .package-price {
        font-size: 1.55rem;
    }

    .package-icon-wrapper {
        width: 65px;
        height: 65px;
        font-size: 2rem;
    }

    .customer-care-cta {
        padding: 0 8px;
    }


    /* ──────────────────────────────────────────
       NEWS & EVENTS
    ────────────────────────────────────────── */
    .news-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .news-card-video-wrapper iframe {
        height: 195px !important;
        width: 100% !important;
    }

    .news-card-title {
        font-size: 0.92rem;
        line-height: 1.4;
    }

    .news-card-description {
        font-size: 0.8rem;
    }

    .news-card-content {
        padding: 16px;
    }

    .more-tools {
        text-align: center;
    }


    /* ──────────────────────────────────────────
       ABOUT ME SECTION
    ────────────────────────────────────────── */
    #about-me.about-redesign {
        flex-direction: column !important;
        gap: 24px !important;
        padding: 65px 5% !important;
        text-align: center;
    }

    .about-left,
    .about-right {
        flex: unset !important;
        width: 100% !important;
    }

    .about-portrait {
        max-width: 200px !important;
        border-radius: 50% !important;
        margin: 0 auto;
    }

    .portrait-fade {
        display: none;
    }

    .about-right {
        text-align: center !important;
    }

    .about-name {
        font-size: 1.45rem !important;
    }

    .about-title-blue {
        font-size: 0.8rem !important;
        letter-spacing: 0.8px;
    }

    .about-para {
        font-size: 0.87rem !important;
        margin-bottom: 28px;
        line-height: 1.65;
    }

    .about-bottom-grid {
        flex-direction: column !important;
        gap: 24px;
        text-align: left;
    }

    .about-info-col,
    .about-skills-col {
        flex: unset !important;
        width: 100% !important;
    }

    .custom-table {
        font-size: 0.82rem;
    }

    .custom-table td:first-child {
        width: 100px;
    }

    .s-bar {
        height: 5px;
    }

    .about-social-icons {
        justify-content: center !important;
    }


    /* ──────────────────────────────────────────
       CONTACT SECTION
    ────────────────────────────────────────── */
    .contact-redesign {
        padding: 65px 5% !important;
        overflow-x: hidden !important;
    }

    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
        margin-top: 30px;
    }

    .contact-form-container {
        padding: 24px 18px;
        width: 100% !important;
        box-sizing: border-box;
    }

    .contact-form-container input,
    .contact-form-container textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .contact-details-box {
        padding: 22px 18px;
        gap: 18px;
        width: 100% !important;
        box-sizing: border-box;
    }

    .contact-text,
    .contact-text a {
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    .contact-map-wrapper {
        min-height: 220px;
        height: 220px;
        width: 100% !important;
    }

    .contact-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    .contact-item i {
        min-width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }


    /* ──────────────────────────────────────────
       SEARCH OVERLAY
    ────────────────────────────────────────── */
    .search-container {
        width: 94% !important;
        padding: 14px !important;
        border-radius: 12px !important;
    }

    #search-input {
        font-size: 0.95rem;
    }

    .search-item {
        padding: 10px 12px;
    }

    .search-item-title {
        font-size: 0.88rem;
    }

    .search-item-desc {
        font-size: 0.73rem;
    }

    /* Floating search btn — reposition for mobile */
    .search-nav-btn-floating {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        order: 1;
        pointer-events: auto !important;
    }


    /* ──────────────────────────────────────────
       CHATBOT
    ────────────────────────────────────────── */
    .chatbot-container {
        left: 16px !important;
        bottom: 16px !important;
    }

    .chatbot-panel {
        width: calc(100vw - 32px) !important;
        left: 0 !important;
        right: auto !important;
        bottom: 70px !important;
        max-height: 68vh;
        border-radius: 16px !important;
    }

    .chatbot-button {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.2rem !important;
    }


    /* ──────────────────────────────────────────
       GRADIENT ORBS — scale down to prevent overflow
    ────────────────────────────────────────── */
    .orb-1 {
        width: 260px;
        height: 260px;
        top: -8%;
        left: -8%;
    }

    .orb-2 {
        width: 220px;
        height: 220px;
    }

    .orb-3 {
        width: 200px;
        height: 200px;
    }


    /* ──────────────────────────────────────────
       PROCESS CARDS
    ────────────────────────────────────────── */
    .process-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .process-card {
        padding: 22px 18px;
    }

    .process-title {
        font-size: 1.1rem;
    }


    /* ──────────────────────────────────────────
       FAQ / ACCORDION
    ────────────────────────────────────────── */
    .accordion-item {
        padding: 0 !important;
    }

    .accordion-header {
        padding: 14px 16px !important;
        font-size: 0.9rem !important;
    }

    .accordion-content-inner {
        padding: 0 16px 14px !important;
        font-size: 0.85rem !important;
    }


    /* ──────────────────────────────────────────
       WHATSAPP / MISC BUTTONS
    ────────────────────────────────────────── */
    .whatsapp-help-btn {
        font-size: 0.85rem;
        padding: 10px 18px;
    }

    .package-shop-btn {
        font-size: 0.85rem;
        padding: 10px 20px;
        width: 100%;
        max-width: 220px;
    }


    /* ──────────────────────────────────────────
       PROJECT INTRO TEXT
    ────────────────────────────────────────── */
    .project-intro {
        font-size: 0.88rem;
        line-height: 1.65;
        text-align: center;
        margin: 0 auto 28px;
    }

    /* ──────────────────────────────────────────
       FOOTER
    ────────────────────────────────────────── */
    #main-footer {
        padding: 90px 5% 20px 5% !important;
        margin-top: 80px !important;
        margin-bottom: 0 !important;
    }

    #footer-logo-col .footer-logo {
        max-width: 133px !important;
        margin: 26px auto;
    }

    .footer-content {
        margin-bottom: 30px !important;
    }

    .footer-bottom {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }

    /* ──────────────────────────────────────────
       GO TO TOP BUTTON — safe zone
    ────────────────────────────────────────── */
    .go-to-top {
        bottom: 85px !important;
        right: 16px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 0.9rem !important;
    }
}


/* ════════════════════════════════════════════════════════════
   SMALL PHONES (≤ 480px) — additional tightening
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    section {
        padding: 52px 4% !important;
    }

    .section-title {
        font-size: 1.35rem !important;
        margin-bottom: 24px;
    }


    /* Hero */
    header#home {
        padding: 90px 4% 60px !important;
    }

    .hero-title {
        font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
    }

    .hero-description {
        font-size: 0.85rem;
    }

    .profile-img {
        width: 90px;
        height: 90px;
    }


    /* Popup card */
    .popup-card {
        padding: 18px;
        padding-top: 85px;
        border-radius: 16px;
        width: 92%;
    }

    .popup-card h2 {
        font-size: 1.35rem;
    }

    .profile-image {
        width: 100px;
        height: 100px;
    }


    /* Gallery */
    .swiper-slide img {
        height: 190px;
    }

    #gallery .swiper-slide {
        width: 92%;
    }


    /* Portfolio */
    .portfolio-img {
        height: 170px;
    }

    .portfolio-actions a.portfolio-btn {
        font-size: 0.75rem;
        height: 36px;
        padding: 0 10px;
    }

    .portfolio-actions .buy-btn {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 0.82rem;
    }


    /* Branding slider */
    .branding-slider-brand .swiper-slide,
    .branding-slider-logo .swiper-slide {
        width: 90vw !important;
    }


    /* News */
    .news-card-video-wrapper iframe {
        height: 175px !important;
    }


    /* About */
    .about-portrait {
        max-width: 150px !important;
    }

    .about-name {
        font-size: 1.2rem !important;
    }


    /* Chatbot notification bubble */
    .chatbot-notification {
        width: calc(100vw - 32px) !important;
        left: 0 !important;
        right: auto !important;
        bottom: 70px !important;
        font-size: 0.82rem;
    }

    /* QR popup */
    .qr-popup,
    .qr-popup-content {
        width: 92% !important;
        padding: 18px !important;
    }

    /* Service launcher popup */
    #service-launcher-popup {
        width: 260px !important;
        right: 0;
    }

    /* Go-to-top safe zone */
    .go-to-top {
        bottom: 80px !important;
    }

    /* Package shop button */
    .package-shop-btn {
        font-size: 0.8rem;
        padding: 9px 16px;
    }

    /* Section title underline fix */
    .section-title::after {
        width: 55px;
        height: 3px;
    }
}