cytx_api/www/static/css/web_768.css

/* ===== 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; }
}