/* ==================== Mobile Responsive ==================== */
/* Breakpoints: Desktop > 768px, Mobile <= 768px (tablet = desktop) */

.is-mobile {
  /* ========== BASE ========== */
  :root {
    --heading-size: clamp(24px, 6vw, 40px);
    --body-size: clamp(13px, 2.5vw, 16px);
    --news-summary-size: clamp(10px, 1.8vw, 12px);
  }

  /* ========== COMPONENTS ========== */
  .home-btn {
    top: 2vh;
    width: 10vw;
    z-index: 2003;
  }

  .theme-switch {
    top: 1.5vh;
    right: 9vw;
    width: 12.8vw; 
    height: 6.4vw;  
    transform: translate(2vw, 2vh);
  }

  .theme-switch-track::after {
    top: 0.62vh;   
    left: 1.33vw;  
    right: 1.33vw;
    bottom: 0.62vh;
    border-radius: 75%; 
  }

  .theme-icon {
    font-size: 4vw;  
  }

  .theme-icon.sun {
    left: 1.6vw;         
    top: 1.7vh;       
  }

  .theme-icon.moon {
    right: 1.6vw;
    top: 1.7vh;
  }

  .theme-switch-thumb {
    width: 5vw;       
    height: 5vw;     
    top: 0.49vh;         
    left: 0.5vw;         
  }

  .theme-switch:not(.light) .theme-switch-thumb {
    transform: translateX(6.4vw);
  }

  body:has(.about-page) .lang-toggle {
    top: 0.5vh;
    right: 8.5vw;
    gap: 4px;
  }

  body:has(.works-page) .lang-toggle {
    top: 2vh;
    right: 3vw;
    gap: 5px;
  }

  /* When work modal is active, put lang-toggle behind the modal */
  body:has(.work-modal.active) .lang-toggle {
    z-index: 1000;
  }

  .lang-btn {
    font-size: 3.5vw;
  }

  /* Hide dot navigation on mobile - use swipe to navigate */
  .dot-nav {
    display: none;
  }

  /* ========== HOME PAGE (index.html) ========== */
  #landing-overlay {
    z-index: 1001;
  }

  #landing-overlay video {
    object-fit: cover;
  }

  .sound-btn {
    top: 3%;
    right: 3%;
    width: 8vw;
    height: 8vw;
  }

  .skip-btn {
    bottom: 3%;
    right: 3%;
    font-size: 5vw;
    padding: 8px 12px;
  }

  /* Split screen → vertical stack on mobile */
  .split-links {
    flex-direction: column;
  }

  .split-links .split-left,
  .split-links .split-right {
    height: 50%;
    width: 100%;
    flex: none;
  }

  .split-links .split-left video,
  .split-links .split-right video {
    width: 100vw;
    height: 50vh;
    left: 0;
    right: 0;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  .split-links .split-left {
    top: 0;
    }

  .split-links .split-right {
    bottom: 0;
    top: auto;
    }

  .split-label {
    font-size: 11vw;
    z-index: 3;
  }

  .split-label-left {
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
  }

  .split-label-right {
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
  }

  .split-left:hover .split-label-left {
    transform: translate(-50%, -50%);
  }

  .split-right:hover .split-label-right {
    transform: translate(-50%, -50%);
  }

  #home-logo {
    width: 10vw;
    z-index: 10;
  }

  /* ========== ABOUT PAGE (about.html) ========== */
  .slide {
    padding: 10vw 3vw ;
    /* Mobile default: solid dark background (JSON bg image will override this via inline style) */
    background-color: #0a0a0a;
  }

  /* Even-indexed slides keep green background on mobile */
  #about-page-content .slide:nth-child(even) {
    background-color: #60c0b7;
  }

  /* Light theme: slightly lighter dark on mobile */
  .light-theme .slide {
    background-color: #f5f5f5 !important;
  }

  .slide-content {
    max-width: 95%;
  }

  .slide-content-top {
    max-width: 95%;
  }

  .slide-content-1 {
    margin-left: 0;
  }

  .slide-content-1 h1 {
    font-size: 12vw;
    letter-spacing: 0.01rem;
    text-align: left;
  }

  .slide-content-1 p {
    font-size: 5vw;
    text-align: left;
  }

  .slide-content-2 {
    display: flex;
    flex-direction: column;      /* 纵向排列 */
    align-items: center;         /* 水平居中（保持原水平居中效果） */
    height: 100vh;
  }

  .slide-content-2 h1 {
    margin-top: 18vh;           
    overflow: visible;
    font-size: 11vw;
    line-height: 1em;
  }

  .slide-content-2 p {
    white-space: nowrap;
    overflow: visible;
    font-size: 5vw;
    margin-top: 1vh;            
  }

  .slide-top {
    padding-top: 12%;
  }

  /* Split slide */
  .slide-split {
    flex-direction: column;
    justify-content: flex-start;
  }

  .slide-split .media-area {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .slide-split .media-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .slide-split .text-area {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
    top: 0%;
  }

  .slide-split .text-area h2 {
    font-size: 10vw;
    margin-top: -40vh;
  }

  /* Cards slide - use higher specificity than nth-child(even) to ensure green shows */
  #about-page-content .slide.slide-cards {
    background-color: #60c0b7 !important;
  }

  .slide-cards-title {
    margin-top: -4vh;
    margin-bottom: 6vh;
  }

  .slide-cards-title .font-tall {
    font-size: 10vw;
  }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 90vw;
    gap: 3vw;
  }

  .card-item:hover {
    transform: scale(1.1);
  }

  .card-item .card-overlay {
    font-size: 3vw;
  }

  .card-item .card-caption {
    font-size: 3vw;
  }

  /* ===== 1. 幻灯片容器 ===== */
  .slide-news {
    padding: 5%;
    justify-content: flex-start;
    background-color: #000;
  }
  .light-theme .slide-news {
    background-color: #fff;
  }

  /* ===== 2. 标题区 ===== */
  .news-header {
    margin-top: 10vh;
    max-width: 70%;
  }
  .news-header h2 {
    font-size: 10vw;
  }

  /* ===== 3. 新闻列表容器（核心） ===== */
  .news-list {
    position: relative;
    height: 58vh;                /* 固定总高度，容纳 3 个新闻 + 间隙 */
    max-width: 100%;
    margin-top: 1vh;
    overflow: visible;           /* 允许子元素溢出（图片可能超出） */
    display: flex;
    flex-direction: column;
  }

  /* ===== 4. 绝对定位的公共基类（线条 + 新闻项） ===== */
  .news-list .news-lines,
  .news-list .news-item {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: visible;
  }

  /* ===== 5. 新闻项布局 ===== */
  .news-list .news-item {
    height: 18vh;                /* 每个新闻占 18vh */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 5%;
    box-sizing: border-box;
    margin-top: 1vh;             /* 微调垂直偏移，使新闻看起来居中于两条线之间 */
    margin-left: -5vw;           /* 向左伸出，制造宽度 140% 效果 */
    width: 140%;
    background: transparent;
  }
  .news-list .news-item.item-1 { top: -1vh; }
  .news-list .news-item.item-2 { top: 17vh; }
  .news-list .news-item.item-3 { top: 35vh; }

  /* ===== 6. 线条容器 ===== */
  .news-list .news-lines {
    top: 0;
    left: -4vw;                  /* 向左伸出，配合宽度 120% */
    width: 120%;
    height: 100%;
    pointer-events: none;        /* 不影响点击事件 */
  }

  /* ===== 7. 每条线的样式 ===== */
  .news-list .news-lines .line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.2vh;
    background: #60c0b7;
    display: none;               /* 默认隐藏，由数量类控制显示 */
  }

  /* ===== 8. 根据新闻数量动态显示线条（位置精准对应新闻项边界） ===== */
  /* 1条新闻：显示顶线 + 底线 */
  .news-list.has-1item .line-1 { top: 0;    display: block; }
  .news-list.has-1item .line-2 { top: 18vh; display: block; }

  /* 2条新闻：显示顶线 + 中线 + 底线 */
  .news-list.has-2items .line-1 { top: 0;    display: block; }
  .news-list.has-2items .line-2 { top: 18vh; display: block; }
  .news-list.has-2items .line-3 { top: 36vh; display: block; }

  /* 3条新闻：显示全部 4 条线（顶、中1、中2、底） */
  .news-list.has-3items .line-1 { top: 0;    display: block; }
  .news-list.has-3items .line-2 { top: 18vh; display: block; }
  .news-list.has-3items .line-3 { top: 36vh; display: block; }
  .news-list.has-3items .line-4 { top: 54vh; display: block; }

  /* ===== 9. 新闻内部：图片与内容 ===== */
  .news-list .news-item .news-image {
    flex: 0 0 auto;              /* 图片不伸缩，保持自身尺寸 */
  }
  .news-list .news-item .news-image img {
    width: auto;                 /* 宽度自适应，高度固定 */
    height: 12vh;                 /* 图片高度固定 */
  }

  .news-list .news-item .news-content {
    flex: 1;                     /* 内容区占据剩余宽度 */
    padding: 2% 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    overflow: visible;
  }
  .news-list .news-item .news-content h3 {
    font-size: 3.5vw;
    margin-bottom: 1vh;
  }
  .news-list .news-item .news-content .subtitle {
    font-size: 2.5vw;
    margin-bottom: 1vh;
  }
  .news-list .news-item .news-content .summary {
    font-size: 2vw;
    display: block;
    overflow: visible;
  }

  /* ===== 10. 分页指示器（在 flex 容器底部） ===== */
  .news-list .news-pagination {
    margin-top: 60vh;
    display: flex;
    justify-content: center;
    gap: 4vw;
    width: 100%;
    position: relative;          /* 确保在普通流中，但也可不加 */
  }

  .news-pagination button {
    width: 3vw;
    height: 3vw;
    min-width: 10px;
    min-height: 10px;
    border-radius: 50%;
    background: rgba(122, 113, 113, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .news-pagination button.active {
    background: #60c0b7;
    transform: scale(1.3);
  }

  /* News modal */
  .news-modal-text {
    bottom: 10%;
    right: 5%;
    left: 5%;
    width: 90%;
    padding: 4% 3%;
  }

  .news-modal-text h3 {
    font-size: 8vw;
  }

  .news-modal-text .subtitle {
    font-size: 5vw;
  }

  .news-modal-text p {
    font-size: 3vw;
  }

  .news-modal-text a {
    font-size: 5vw;
  }

  /* News modal - image as background, text overlay at bottom */
  .news-modal {
    align-items: flex-end;
    padding: 0;
  }

  .news-modal-content {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .news-modal-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .news-modal-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    padding: 20% 10% 30% 30%;
    text-align: right;
  }

  .news-modal-close {
    position: absolute;
    top: 2%;
    right: 2%;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    font-size: 6vw;
  }

  /* Contact slide */
  .slide-contact {
    padding: 60px 20px;
    background-color: #60c0b7;
    background-image: none;
  }

  .light-theme .slide-contact {
    background-color: #60c0b7 !important;
  }

  .slide-contact h1 {
    white-space: nowrap;
    overflow: visible;
    font-size: 12vw;
    margin-bottom: 5vh;
  }

  .logo-wall-wrap {
    max-width: 95%;
    margin-bottom: 5vh;
  }

  .callout {
    white-space: nowrap;
    overflow: visible;
    font-size: 6vw;
    margin-bottom: 2vh;
  }

  .contact-info {
    white-space: nowrap;
    overflow: visible;
    font-size: 2.5vw;
    flex-direction: column;
    gap: 1vh;
  }

  .contact-sep {
    display: none;
  }

  /* ========== WORK PAGE (work.html) ========== */
  .works-page {
    padding: 70px 2% 0 2%;
  }

  /* Mobile category filter - dots navigation below */
  #filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    margin-bottom: 3vh;
  }

  #filters .filter-dots {
    display: flex;
    gap: 4vw;
    justify-content: center;
    background: #2f5856;
    padding: 1.5vw 8vw;
    border-radius: 13px;
    border: 1px solid #2f5856;
  }

  #filters .filter-dot-svg {
    width: 4vw;
    height: 4vw;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  #filters .filter-dot-svg.active {
    transform: scale(1.2);
  }

  #filters .filter-label {
    font-size: 4vw;
    color: rgba(255, 255, 255);
    text-align: center;
    letter-spacing: 0.01em;
  }

  #project-grid {
    grid-template-columns: 1fr;
  }

  /* Work modal */
  .work-modal-content {
    flex-direction: column;
    width: 85vw;
    height: 70vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible;
  }

  .work-modal-close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    z-index: 10;
  }

  .work-modal-left {
    width: 100%;
    flex: 0 0 50%;
    margin-right: 0;
    padding: 10px 16px;
    overflow: hidden;
  }

  .work-modal-title {
    font-size: 5vw;
    margin-left: 0;
    margin-top: 5vh;
  }

  .work-modal-description {
    font-size: 3vw;
    margin-top: 1vh;
  }

  .work-modal-right {
    width: 100%;
    flex: 0 0 40%;
  }

  .work-modal-carousel-dots {
    bottom: 1vh;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 4vw;
    z-index: 5;
  }

  .carousel-dot {
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .carousel-dot.active {
    background: #60c0b7;
    transform: scale(1.3);
  }

  .carousel-arrow {
    width: 8vw;
    height: 8vw;
  }

  /* ========== 404 PAGE ========== */
  .error-page h1 {
    font-size: 30vw;
  }

  .error-page p {
    font-size: 5vw;
  }
}