/* ===== max-width: 768px ===== */ /* Footer */ @media(max-width:768px){ .footer-component{padding:0;} .footer-content{flex-direction:column;gap:24px;padding:0 20px;} .footer-left{flex:none;width:100%;padding-right:0;} .footer-mid{flex-direction:column;gap:20px;width:100%;} .footer-qr-section{width:100%;} .footer-bottom-content{flex-direction:column;gap:8px;padding:0 20px;text-align:center;} .footer-main{padding:24px 0 16px;} .footer-links-list{grid-template-columns:repeat(3,auto);} .footer-links-list li, .footer-links-list li:nth-child(2n){padding:0 10px;border-right:1px solid rgba(255,255,255,.4);padding-left:10px;} .footer-links-list li:nth-child(3n+1){padding-left:0;} .footer-links-list li:nth-child(3n){border-right:none;padding-right:0;} } /* Swiper Fullpage & Slides */ @media(max-width:768px){ .swiper-fullpage{height:auto!important;overflow:visible!important;} .swiper-fullpage>.swiper-wrapper{flex-direction:column!important;transform:none!important;} .swiper-fullpage>.swiper-wrapper>.swiper-slide{height:auto!important;overflow:visible!important;position:static!important;transform:none!important;z-index:auto!important;} .swiper-fullpage .swiper-slide{height:auto!important;overflow:visible!important;} .slide-labels{display:none!important;} .slide-banner{height:100vh;} .banner-swiper,.banner-swiper .swiper-slide{height:100vh!important;} .slide-donation{height:auto;min-height:auto;padding:80px 0 40px;} .slide-news{height:auto;min-height:auto;padding:80px 0 40px;} .slide-projects{height:80vh;min-height:500px;} .slide-section{height:auto;min-height:auto;padding:40px 16px 20px;} .slide-footer{height:auto;min-height:auto;padding-top:60px;} .slide-with-footer{overflow:visible;overflow-y:visible;} .slide-with-footer>.footer-component{margin:0;width:100%;} .slide-with-footer .section-wrap{padding-bottom:0;} .slide-with-footer.slide-section{padding-bottom:0;} .donation-wrap,.news-wrap{opacity:1;transform:none;max-height:none;overflow:visible;} .partners-section{opacity:1;transform:none;} .swiper-slide-active .donation-wrap, .swiper-slide-active .news-wrap, .swiper-slide-active .partners-section{opacity:1;transform:none;} /* Header & Mobile */ .header-nav{display:none;} .mobile-menu-btn{display:flex;} .header-search{display:none;} .header-search-mobile{display:flex;} /* Banner */ .banner-slide-content{left:24px;right:24px;max-width:calc(100% - 48px);} .banner-slide-content.pos-left{left:24px;right:auto;max-width:calc(100% - 48px);} .banner-slide-content.pos-center{left:50%;right:auto;} .banner-slide-content.pos-right{left:auto;right:24px;max-width:calc(100% - 48px);} .banner-slide-content.glass-on{padding:24px 28px;background:rgba(0,0,0,.1);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);} .banner-slide-content h1{font-size:26px;} /* Donation */ .donation-wrap,.news-wrap{padding:0 20px;} .data-cards{grid-template-columns:1fr;gap:8px;} .data-card{padding:12px 8px;} .data-card .amount{font-size:18px;} .data-card .label{font-size:12px;} .data-card .note{font-size:11px;} .donation-tables{grid-template-columns:1fr;gap:8px;} .dtable-drug{grid-column:1/-1;} .dtable-scroll-wrap{max-height:140px;} .drug-scroll-wrap{max-height:140px;} .dtable{padding:10px 12px;} .dtable h3{font-size:13px;margin-bottom:4px;padding-bottom:4px;} .dtable td,.dtable th{font-size:12px;padding:4px 6px;} /* Projects */ .proj-info-card{ position:relative;top:auto;right:auto;left:auto;bottom:auto; transform:none;width:auto;margin:0 20px;padding:24px 20px; opacity:1;max-height:none;overflow:visible; background:rgba(232,117,26,.2);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); } .swiper-slide-active .proj-info-card{transform:none;opacity:1;} .proj-info-card h3{font-size:20px;margin-bottom:10px;} .proj-info-card p{font-size:14px;margin-bottom:16px;line-height:1.6;} .slide-projects{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:20px;} .slide-projects .proj-bg{opacity:0;filter:brightness(.85);} .slide-projects .proj-bg.active{opacity:1;} .proj-tabs{display:none;} .proj-mobile-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;} .proj-tab{padding:6px 12px;font-size:12px;flex-shrink:0;max-width:none;} .proj-more-link{display:none;} /* News */ .news-grid{grid-template-columns:1fr;} .news-featured img{height:200px;} /* Partners */ .partners-carousel-viewport{margin:0;} .partners-carousel{display:grid;grid-template-rows:none;grid-auto-flow:unset;grid-template-columns:repeat(2,1fr);grid-auto-columns:unset;gap:12px;transform:none!important;padding-bottom:20px;} .partner-item{min-height:auto;height:auto;} .partners-nav{display:none!important;} .partners-section{padding:24px 20px;} .section-head{margin-bottom:1vh;} } /* Column Page */ @media(max-width:768px){ .col-banner{height:220px;} .col-banner-content h1{font-size:28px;} .col-tabs-wrap{top:56px;} .col-tabs{overflow-x:auto;justify-content:flex-start;padding:0 16px;-webkit-overflow-scrolling:touch;} .col-tab{padding:6px 20px;font-size:14px;white-space:nowrap;} .col-content{padding:0 20px 24px;} .col-breadcrumb{padding:16px 20px;} .col-art-featured{height:280px;} .col-art-featured-overlay{padding:20px;} .col-art-featured-overlay h3{font-size:18px;} .col-art-card-cover{width:180px;height:140px;} .col-image-grid{grid-template-columns:1fr;gap:16px;} .col-image-thumb{height:280px;} .col-person-grid,.team-grid{grid-template-columns:repeat(2,1fr);gap:16px;row-gap:24px;} .member-photo{width:120px;height:120px;} .board-featured{flex-direction:column;padding:24px;gap:24px;} .board-featured .featured-photo{width:100%;min-width:unset;height:260px;} .job-layout{grid-template-columns:1fr;} .job-nav{display:none;} .job-hero-banner{flex-direction:column;gap:20px;text-align:center;padding:28px 20px;} .job-hero-stats{gap:24px;} .job-card-header{flex-direction:column;gap:12px;align-items:flex-start;} .job-card-footer{flex-direction:column;gap:12px;align-items:flex-start;} } /* Inline Form */ @media(max-width:768px){ .col-inline-form-wrap{padding:24px 20px;border-radius:12px;margin-top:32px;} .col-inline-form-header h3{font-size:18px;} .col-ifield-options{gap:10px;} .col-ifield-submit{padding:12px 48px;font-size:15px;} } /* Article Detail */ @media(max-width:768px){ .article-detail-wrap{grid-template-columns:1fr;padding:20px 16px 40px;gap:32px;} .article-title{font-size:24px;} .article-meta{flex-direction:column;align-items:flex-start;gap:8px;} .article-share{margin-left:0;} .article-nav{flex-direction:column;gap:12px;} .article-nav-item.next{text-align:left;} } /* Text Grid & Detail */ @media(max-width:768px){ .col-text-grid{grid-template-columns:repeat(2,1fr);gap:16px;} .doc-item{flex-direction:column;align-items:flex-start;gap:8px;} .doc-item-left{flex-direction:column;align-items:flex-start;gap:8px;} .doc-date{margin-left:0;} .text-nav-next{text-align:left;} } /* Home Generic Section */ @media(max-width:768px){ .slide-section{height:auto;min-height:auto;padding:40px 16px 20px;} .home-text-grid{grid-template-columns:repeat(2,1fr);gap:12px;} .home-person-grid{grid-template-columns:repeat(2,1fr);gap:16px;} .home-job-list{grid-template-columns:1fr;} .home-form-wrap{max-width:100%;} .slide-with-footer>.footer-component{margin:0 -16px;width:calc(100% + 32px);} } /* About Intro */ @media(max-width:768px){ .about-intro-hero{grid-template-columns:1fr;gap:24px;} .about-stats{grid-template-columns:repeat(2,1fr);} .about-values-grid{grid-template-columns:1fr;} .about-strategy-row{grid-template-columns:1fr;} .about-qual-grid{grid-template-columns:repeat(2,1fr);} .about-compliance-banner{padding:24px 20px;} .about-compliance-grid{grid-template-columns:1fr;} .about-section-alt{padding:28px 20px;} .about-section-header{margin-bottom:28px;flex-wrap:wrap;} .about-section-header h2{font-size:20px;} } /* Contact */ @media(max-width:768px){ .ct-layout{grid-template-columns:1fr;gap:20px;} .ct-brand-card{padding:20px 18px;} .ct-map-body{min-height:260px;} } /* Search */ @media(max-width:768px){ .search-box{height:48px;padding:0 6px 0 20px;} .search-box input{font-size:14px;} .search-box-btn{width:36px;height:36px;} .search-container{padding:24px 16px 40px;} .result-item{padding:24px 20px;} .result-title{font-size:18px;} .result-desc{font-size:14px;} .filter-tabs{gap:8px;} .filter-tab{padding:6px 16px;font-size:13px;} } /* Project List */ @media(max-width:768px){ .project-item { grid-template-columns: 1fr; gap: 0; } .project-cover { width: 100%; height: 220px; } .project-info { padding: 24px 20px; } .project-title { font-size: 18px; } .project-desc { font-size: 14px; -webkit-line-clamp: 2; } .project-footer { flex-direction: column; align-items: flex-start; gap: 16px; } .project-stats { width: 100%; justify-content: space-between; } } /* Project Detail */ @media(max-width:768px){ .proj-detail-wrap { grid-template-columns: 1fr; padding: 30px 20px; gap: 0; } .proj-detail-sidebar { display: none; } .proj-detail-title { font-size: 24px; } .proj-detail-meta { flex-wrap: wrap; gap: 8px 16px; font-size: 13px; } .proj-detail-meta .article-share { width: 100%; margin-left: 0; } .proj-section-title { font-size: 20px; } .proj-timeline-item { display: block; margin-bottom: 20px; } .proj-timeline-item::before, .proj-timeline-item::after { display: none; } .proj-timeline-date { display: none; } .proj-timeline-year-mobile { display: block; } .proj-timeline-body { padding: 20px; } .proj-timeline-title { font-size: 18px; } .proj-timeline-period { font-size: 14px; } .proj-timeline-stats { grid-template-columns: 1fr; gap: 10px; } } /* Side Toolbar */ @media(max-width:768px){ .side-toolbar { right: 12px; bottom: 80px; } .side-tool { width: 42px; height: 42px; } .side-tool-icon { width: 20px; height: 20px; } .side-tool-qr { display: none; } }