﻿/* ==========================================================================
   media.css - responsive styles for <=999px (list page listcolumn.htm / detail page displayinfo.htm)
   >=999px uses the html root font-size calc(100vw/192) for proportional scaling, no extra breakpoints needed;
   the <=999px header/footer (drawer nav, stacked footer) styles are provided by style.css.
   ========================================================================== */

@media (max-width: 999px) {
  /* banner and main layout */
  .page-banner { height: 30rem; }
  .page-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    margin-top: 0;
    padding: 4rem 0 6rem;
  }

  /* sidebar: <=999px collapses into a hamburger button, tap to expand (same as header nav) */
  .side-col { width: 100%; }
  .side-head { height: 6rem; padding: 0 2rem; justify-content: flex-start; }
  .side-head__deco { display: none; }
  .side-head__txt { font-size: 2.2rem; }
  .side-toggle { display: inline-flex; }

  .side-menu { display: none; background: #e9f2fa; }
  .side-menu.is-open { display: block; }
  .side-menu__item {
    height: auto;
    min-height: 5.6rem;
    flex-wrap: wrap;
    padding: 0 1.2rem 0 2.4rem;
    font-size: 1.8rem;
    border-bottom: 0.1rem solid #d9e6f2;
  }
  .side-menu__item.selected { background: transparent; }
  .side-sub-toggle { display: inline-flex; color: var(--c-text); margin-right: 0.4rem; }
  .side-sub {
    display: none;
    position: static;
    width: 100%;
    min-width: 0;
    background: #fff;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .has-sub.is-sub-open > .side-sub { display: block; }
  .side-sub__item a {
    padding: 1.1rem 1.8rem 1.1rem 4.6rem;
    border-top: 0.1rem solid #eef4fa;
  }

  /* list page */
  .col-head { margin-bottom: 2.4rem; }
  .col-head__title { font-size: 2.6rem; }
  .col-head__more { margin-left: 3rem; }
  .news-item {
    flex-direction: column;
    gap: 1.6rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }
  .news-item__img { width: 100%; height: 19rem; }
  .news-item__title { white-space: normal; }
  .pagination { gap: 0.8rem; margin-top: 4rem; }

  /* detail page */
  .dt-title { font-size: 2.4rem; padding-bottom: 2.4rem; }
  .dt-meta {
    flex-wrap: wrap;
    gap: 1.2rem;
  }
  .dt-meta__item { margin-right: 2.4rem; }
  .dt-meta__spacer { display: none; }
  .dt-share { margin-right: 2.4rem; }
  .dt-font { margin-left: 0; }
  .dt-body { font-size: 1.7rem; }
  .dt-para { margin-top: 2.4rem; }
  .dt-img { width: 100%; height: 20rem; margin: 2.4rem auto; }
  .dt-sign { margin-top: 3rem; }
  .dt-sib { padding: 1.4rem 0; font-size: 1.6rem; }
  .dt-sib__label { flex: none; }
}

@media (max-width: 999px) {
  html { font-size: 6.5px; }   /* <=999px root font-size baseline */
}

/* ==========================================================================
   Mobile
   For <=999px the root font-size is fixed at 6.5px; below that, layouts adapt at 992/768/479px.
   ========================================================================== */

  /* <=999px base 6.5px; footer / news / lecture adjustments for small screens */
@media (max-width: 999px) {
  .footer-contact{width:100%;}
    .news-grid {grid-template-columns: 1fr;gap: 3rem;}
  .lecture-carousel__arrow { width: 4rem; height: 4rem; font-size: 2.4rem; }
  .lecture-carousel__arrow--prev { left: 0.4rem; }
  .lecture-carousel__arrow--next { right: 0.4rem; }
  .footer-top { padding: 4rem 0 3rem; flex-direction: column; align-items: flex-start; }
 .col-head,.dt-title{margin-top: 0;padding-top: 0;}
}

  /* Tablet landscape */
@media (max-width: 992px) {
  .news-grid {grid-template-columns: repeat(1, 1fr);}
  .notice-box__grid { grid-template-columns: repeat(2, 1fr); }
  .lecture-track .lecture-card { flex-basis: calc((100% - 5.5rem) / 2); }
  .recruit__panel { width: 100%; }
  .recruit__img { position: static; width: 100%; height: 36rem; margin-top: 3rem; }
  .recruit__block { display: none; }
  .recruit__inner { min-height: 0; }
  .party-grid { grid-template-columns: 1fr 1fr; }
  .party-list { grid-column: 1 / -1; }
  .footer-top { flex-wrap: wrap; gap: 3rem; }
  .footer-brand, .footer-qr { border-left: 0; padding-left: 0; justify-content: flex-start; }
  .footer-bottom {flex-direction: column;gap: 2rem;align-items: center;}
  .footer__inner { padding: 0 4rem 3rem; }
  .foot_right{margin-left:0}
}

  /* Phone portrait (<=768px) */
@media (max-width: 768px) {
  .topbar { height: 6.4rem; }
  .brand__full {width: 100%;height: 4.5rem;}
  .brand__divider { height: 3rem; }
  .brand__text { width: 16rem; height: 3.6rem; }
  .topbar__link { display: none; }

  .hero {height: 42rem;overflow: unset;}
  .hero__arrow { display: none; }
  .hero__dots { left: 50%; transform: translateX(-50%); top: auto; bottom: 2.4rem; }

  .news { padding-top: 8rem; }
  .section-head { flex-wrap: wrap; gap: 1.2rem; }
  .section-head__cn { font-size: 3rem; }
  .section-head__en { font-size: 1.8rem; }
  .more-link { margin-left: auto; }

  .notice-box__grid { grid-template-columns: 1fr; gap: 3rem; }
  .lecture-track { gap: 3rem; }
  .lecture-track .lecture-card { flex-basis: 100%; }
  .lecture-carousel__arrow { display: none; }
  .news-card__img { height: 22rem; }

  .recruit { padding-top: 9rem; }
  .recruit__img { height: 24rem; }

  .notice { margin-top: 9rem; padding: 7rem 0 8rem; }
  .notice-tabs { margin-left: 0; margin-top: 1rem; flex-wrap: wrap; gap: 2rem; }
  .notice-tabs + .more-link { flex-basis: 100%; }
  .notice .section-head { flex-wrap: wrap; }
  .notice-grid { margin-top: 4rem; }

  .party { padding-top: 8rem; }
  .party-grid { grid-template-columns: 1fr; }
  .party-card--blue { margin-top: 0; }
  .party-list { padding-top: 2rem; }
  .party-list a { height: auto; padding: 1.4rem 0; flex-wrap: wrap; }
  .party-list__title { white-space: normal; font-size: 1.7rem; }

  .lectures { padding: 8rem 0 10rem; }
  .lecture-card__title { margin-left: 0; min-height: 0; margin-top: 10.6rem; }
  .lecture-card__badge { top: 3.4rem; }

  .footer__inner { padding: 0 2.4rem 3rem; }

  .footer-brand { flex-wrap: wrap; gap: 1.6rem; }
  .footer-qr {justify-content: center;margin: 0 auto;}
  .friend-links__btn { width: 100%; }
  .friend-links { width: 100%; }
  .footer-copy { font-size: 1.4rem; }

  .back-top { right: 2rem; bottom: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Minimum font-size guarantee: at <=999px the root size is fixed at 6.5px; any text smaller than
   2.2rem (<14px) is bumped up to 2.2rem (~14px) so body text and helper text stay readable on small screens.
   ========================================================================== */
@media (max-width: 999px) {
  .nav-cn,
  .nav-sub a,
  .topbar__link,
  .more-link,
  .section-head__en,
  .news-card__bar-title,
  .news-card__excerpt,
  .news-card__date,
  .recruit__text,
  .notice-card__date,
  .notice-card__title,
  .party-card__title,
  .party-card__excerpt,
  .party-list__title,
  .party-list__date,
  .lecture-card__ym,
  .lecture-card__title,
  .lecture-card__meta,
  .side-menu__item,
  .side-sub__item a,
  .news-item__date,
  .news-item__title,
  .news-item__excerpt,
  .pagination,
  .dt-meta__item,
  .dt-share,
  .dt-font,
  .fs-btn,
  .dt-body,
  .dt-sign,
  .dt-sib,
  .footer-contact li,
  .footer-contact .fci,
  .footer-qr .qr-cap,
  .footer-qr figcaption,
  .friend-links__btn,
  .friend-links__list a,
  .search-overlay__hint,
  .footer-copy { font-size: 2.2rem; }
}

/* <=999px: drawer nav with small-triangle submenu toggles (level 2/3 share .nav-sub) */
@media (max-width: 999px) {
  .lecture-card__link{height:auto;padding-bottom: 3rem;}
  .party-card--blue .party-card__body{height:auto}
  .bg1{padding:0}
  .news-card__body{height:auto}
  .recruit__text::before{display: none;}
  .nav-toggle { display: inline-flex; }
.recruit__text{
    padding: 0;
    width: 100%;
}
  .navbar {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--c-primary);
    border-bottom: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .navbar.is-open { max-height: 80rem; overflow-y: auto; }
  .nav-list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-start;
    padding: 1.6rem 0;
  }
  .nav-list > li,
  .nav-list > .nav-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.12);
  }
  .nav-list > li > a,
  .nav-list > .nav-item > a { padding: 1.3rem 2rem; text-align: left; flex: 1; }
  .nav-list > li > a::after,
  .nav-list > .nav-item > a::after { display: none; }
  .nav-en { display: none; }

  /* triangle toggle for submenu (same markup for level 2 and level 3) */
  .nav-sub-toggle { display: inline-flex; margin-right: 1.6rem; }
  .nav-sub {
    display: none;
    position: static;
    width: 100%;
    min-width: 0;
    background: rgba(0, 38, 77, 0.4);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .has-sub.is-open > .nav-sub { display: block; }
  .nav-sub li, .nav-sub .nav-item { display: flex; align-items: center; flex-wrap: wrap; }
  .nav-sub a {
    padding: 1.1rem 2rem 1.1rem 3.6rem;
    border-top: 0.1rem solid rgba(255, 255, 255, 0.08);
    flex: 1;
  }
  .nav-sub .nav-sub { background: rgba(0, 38, 77, 0.4); }
  .nav-sub .nav-sub a { padding-left: 5.2rem; }
}

@media (max-width: 479px) {
  .pg-info,.pg-btn,.pg-go,.pg-jump{display: none;}
}
