cytx_api/www/static/css/web_480.css

/* ===== max-width: 480px ===== */
@media(max-width:480px){
  .fixed-header{padding:0 16px;height:56px;}
  .logo-img{height:38px;}
  .banner-slide-content{left:16px;right:16px;max-width:calc(100% - 32px);}
  .banner-slide-content.pos-left{left:16px;right:auto;}
  .banner-slide-content.pos-right{left:auto;right:16px;}
  .banner-slide-content.glass-on{padding:20px 24px;}
  .banner-slide-content h1{font-size:20px;}
  .banner-slide-content .desc{font-size:14px;}
  .btn-primary,.btn-ghost{padding:10px 24px;font-size:13px;}
  .donation-wrap,.news-wrap{padding:0 12px;}
  .section-head h2{font-size:20px;}
  .data-cards{gap:6px;}
  .data-card{padding:8px 6px;border-radius:10px;}
  .data-card .label{font-size:11px;margin-bottom:2px;}
  .data-card .amount{font-size:16px;}
  .data-card .note{font-size:10px;}
  .donation-tables{gap:8px;}
  .dtable{padding:8px 10px;border-radius:10px;}
  .dtable h3{font-size:12px;margin-bottom:4px;padding-bottom:4px;}
  .dtable td,.dtable th{font-size:11px;padding:3px 4px;}
  .dtable-scroll-wrap{max-height:140px;}
  .drug-scroll-wrap{max-height:140px;}
  .dtable-drug th:nth-child(3),.dtable-drug td:nth-child(3){display:none;}
  .proj-info-card{margin:0 12px;padding:20px 14px;}
  .proj-info-card h3{font-size:18px;}
  .proj-info-card p{font-size:13px;margin-bottom:12px;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
  .proj-info-card .card-label{font-size:11px;margin-bottom:8px;}
  .proj-info-card .card-btn{padding:8px 20px;font-size:12px;}
  .proj-tabs{display:none;}
  .news-item .date-box .day{font-size:22px;}
  .news-item .text h4{font-size:13px;}
  .partners-carousel{display:grid;grid-template-rows:none;grid-auto-flow:unset;grid-template-columns:repeat(2,1fr);grid-auto-columns:unset;gap:8px;transform:none!important;}
  .partner-item{padding:12px;border-radius:8px;min-height:auto;height:auto;}
  .partner-item img{max-height:40px;}
  .footer-title{font-size:18px;margin-bottom:12px;}
  .footer-info p{font-size:12px;}
  .footer-qr img{width:80px;height:auto;}
  .footer-qr span{font-size:11px;}
  .section-head{margin-bottom:0.5vh;}
  .section-head .en{display:none;}
  .slide-footer{padding-top:56px;}
  .slide-donation{padding-top:56px;}
  .slide-news{padding-top:56px;}
}

/* Column Page */
@media(max-width:480px){
  .col-banner{height:180px;}
  .col-banner-content h1{font-size:22px;}
  .col-banner-en{font-size:12px;}
  .col-tab{padding:5px 16px;font-size:13px;}
  .col-content{padding:0 16px 20px;}
  .col-art-featured{height:220px;}
  .col-art-featured-overlay h3{font-size:16px;}
  .col-art-card{flex-direction:column;}
  .col-art-card-cover{width:100%;height:180px;}
  .col-art-card-body{padding:16px;}
  .col-image-grid{grid-template-columns:1fr;gap:12px;}
  .col-person-grid,.team-grid{grid-template-columns:1fr;gap:12px;}
}

/* Text Grid */
@media(max-width:480px){
  .col-text-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .col-text-placeholder-title{font-size:13px;-webkit-line-clamp:3;}
  .col-text-placeholder-year{font-size:24px;}
  .col-text-card-info{padding:10px;}
  .col-text-card-title{font-size:13px;}
}

/* Detail Meta */
@media(max-width:480px){
  .proj-detail-meta,.article-detail-meta{flex-wrap:wrap;gap:8px 16px;font-size:13px;}
  .proj-detail-meta .article-share,.article-detail-meta .article-share{width:100%;}
  .proj-detail-title,.article-detail-title{font-size:22px;}
}