/* Mobile Styles for Ocean AI Website */
/* Scoped to max-width: 768px */
@media (max-width: 768px) {
    /* 1. Disable Fullpage Styles & General Layout */
    html, body {
        overflow: auto !important;
        height: auto !important;
        position: relative !important;
    }
    #fullpage {
        height: auto !important;
        transform: none !important;
        background: linear-gradient(to bottom, #f5faff 10%, #dce9f8 100%) !important;
    }
    .section {
        height: auto !important;
        min-height: auto !important;
        padding: 2rem 0 !important;
        display: block !important;
        background: transparent !important;
    }
    .fp-tableCell {
        height: auto !important;
        display: block !important;
        background: transparent !important;
    }
    .container {
        width: 100% !important;
        padding: 0 1rem !important;
        height: auto !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
        box-sizing: border-box;
    }

    /* 5. Hide Navigation Dots */
    #navigation-dots {
        display: none !important;
    }

    /* 3. Header Simplification */
    .header.sy .wp {
        width: 100% !important;
        padding: 0 0.75rem !important;
        justify-content: space-between !important;
    }
    .toplink, .topnav .nav-list li:not(.nav-hamburger) {
        display: none !important;
    }
    .logo-img {
        height: 4.5rem !important;
    }
    .nav-hamburger {
        margin-left: 0 !important;
        float: right !important;
    }

    /* 4. Mega Menu Adjustments */
    .mega-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    .mega-col {
        animation: none !important;
        transform: none !important;
    }
    .mega-col h4 {
        font-size: 0.9rem !important;
    }
    .mega-col h4 a,
    .mega-col ul li a {
        display: block;
        padding: 0.5rem 0;
        -webkit-tap-highlight-color: rgba(0, 64, 152, 0.1);
        touch-action: manipulation;
    }
    .mega-col ul li a {
        font-size: 0.8rem !important;
    }
    .mega-inner {
        padding: 4rem 1rem 2rem !important;
    }

    /* 2. Hero Section & Images */
    #section-hero {
        width: 100% !important;
        aspect-ratio: 16/10 !important;
        height: auto !important;
        position: relative !important;
        padding: 0 !important;
    }

    #section-hero .hero-slide {
        background-size: cover !important;
    }

    .hero-content {
        width: 90% !important;
    }
    #section-hero h1 {
        font-size: 1rem !important;
    }
    #section-hero p {
        font-size: 0.65rem !important;
    }

    /* Hide Canvases on Mobile */
    #waveCanvas, #digitalOceanCanvasAnimation {
        display: none !important;
    }

    /* Section Layouts */
    .text-col, .img-col {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Section Title - 缩小字体 */
    .section-title {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.75rem !important;
    }

    .section-title::after {
        width: 3rem !important;
        height: 3px !important;
    }

    .text-content {
        font-size: 1rem !important;
        line-height: 1.8 !important;
        min-height: auto !important;
    }

    .btn-more {
        font-size: 0.875rem !important;
        padding-bottom: 0.75rem !important;
        margin-top: 1rem !important;
    }

    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }

    .section-header .section-title {
        font-size: 1.25rem !important;
    }

    .btn-more-header {
        display: none !important;
    }

    .btn-more-bottom {
        display: inline-flex !important;
        margin-top: 1rem !important;
    }

    /* 7. Hide img-col/canvas/images in Overview, Dean */
    #section-overview .img-col,
    #section-dean .img-col {
        display: none !important;
    }

    /* Overview Section - mobile adjustments */
    #section-overview {
        display: block !important;
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
        padding: 2rem 1rem !important;
    }

    #section-overview .overview-building {
        display: none !important;
    }

    #section-overview .overview-text-wrapper {
        position: static !important;
        display: block !important;
        max-width: 100% !important;
        text-align: left !important;
        padding: 0 !important;
        margin-bottom: 1.5rem !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #section-overview .overview-text-wrapper .section-title {
        text-align: left !important;
    }

    #section-overview .overview-text-wrapper .section-title::after {
        left: 0 !important;
        right: auto !important;
    }

    #section-overview .overview-text-wrapper .text-content {
        text-align: left !important;
    }

    #section-overview .overview-text-wrapper .text-content p {
        display: inline;
    }

    /* Research Section - show carousel above text */
    #section-research .container {
        display: flex !important;
        flex-direction: column !important;
    }

    #section-research .img-col {
        display: block !important;
        order: 1 !important;
        height: auto !important;
        margin-bottom: 1rem;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
    }

    #section-research .research-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem !important;
    }

    #section-research .research-grid-item {
        opacity: 1 !important;
        transform: translateY(0) !important;
        aspect-ratio: 1/1 !important;
        width: 100% !important;
        border-radius: 8px !important;
    }

    #section-research .research-grid-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #section-research .research-grid-caption {
        font-size: 0.85rem !important;
        padding: 0.5rem !important;
    }

    #section-research .text-col {
        order: 2 !important;
    }

    /* 6. News Section Layout */
    #section-news .container {
        display: flex !important;
        flex-direction: column !important;
    }

    #section-news::before,
    #section-overview::before {
        display: none !important;
    }

    #section-news .img-col {
        display: block !important;
        order: 1;
        margin-bottom: 1rem;
    }
    #section-news .text-col {
        order: 2;
    }

    /* News Container - New Layout */
    .news-container {
        flex-direction: column !important;
        padding: 0 1rem !important;
        gap: 1.5rem !important;
        height: auto !important;
    }

    .news-left-panel {
        width: 100% !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        order: 1 !important;
    }

    .news-right-panel {
        width: 100% !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        order: 2 !important;
    }

    .news-featured-card {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/10 !important;
    }

    .news-featured-title {
        font-size: 1.1rem !important;
    }

    .news-featured-desc {
        font-size: 0.85rem !important;
        -webkit-line-clamp: 2 !important;
    }

    .news-featured-tag {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.75rem !important;
    }

    .news-featured-link {
        font-size: 0.85rem !important;
    }

    .news-featured-info {
        padding: 1rem !important;
    }

    .news-panel-header {
        margin-bottom: 1rem !important;
        padding-bottom: 0.75rem !important;
    }

    .news-panel-title {
        font-size: 1.5rem !important;
    }

    .news-scroll-list {
        max-height: none !important;
        overflow-y: visible !important;
    }

    .news-scroll-item {
        padding: 0.875rem 0 !important;
        gap: 0.875rem !important;
    }

    .news-scroll-date {
        width: 3.5rem !important;
        padding: 0.5rem 0.25rem !important;
    }

    .news-day {
        font-size: 1.25rem !important;
    }

    .news-month {
        font-size: 0.65rem !important;
    }

    .news-scroll-title {
        font-size: 0.95rem !important;
    }

    .news-scroll-desc {
        font-size: 0.8rem !important;
        -webkit-line-clamp: 1 !important;
    }

    /* News Box */
    .news-box {
        display: block !important;
    }

    .news-box-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
    }
    .news-box-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .news-box-info {
        padding: 0.75rem !important;
    }

    .news-box-date {
        font-size: 0.75rem !important;
    }

    .news-box-title {
        font-size: 0.9rem !important;
        margin: 0.5rem 0 !important;
    }

    .news-box-desc {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
    }

    /* News List */
    .news-item-simple {
        padding: 0.75rem 0 !important;
        gap: 0.75rem !important;
        flex-wrap: wrap !important;
    }

    .news-date-simple {
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
    }

    .news-item-simple a {
        font-size: 0.85rem !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Footer */
    #page-footer {
        position: relative !important;
        transform: none !important;
        bottom: auto !important;
        box-shadow: none !important;
        background-attachment: scroll !important;
        pointer-events: auto !important;
        isolation: isolate !important;
    }

    body.main #page-footer::before {
        background-image: url('../images/footer_background_mobile.jpg') !important;
        background-size: cover !important;
        background-position: center top !important;
        background-attachment: scroll !important;
        opacity: 0.42 !important;
    }

    body.footer-visible #page-footer {
        transform: none !important;
    }

    #page-footer .footer-content {
        padding: 1.5rem 1rem !important;
        position: relative !important;
        z-index: 1 !important;
        pointer-events: auto !important;
    }

    #page-footer .footer-top {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .f-links {
        width: 100% !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

    .f-links h3 {
        font-size: 0.9rem !important;
        display: inline-block !important;
        border-left: none !important;
        padding-left: 0 !important;
        border-bottom: 2px solid #fff !important;
        padding-bottom: 0.25rem !important;
        margin-bottom: 0.75rem !important;
    }

    .f-links ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem 0.5rem !important;
        width: 100% !important;
    }

    .f-links ul li {
        text-align: center !important;
    }

    .f-links ul li a {
        font-size: 0.75rem !important;
        white-space: normal !important;
        display: block !important;
        word-break: break-word !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    #page-footer .footer-right {
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
    }

    .qrcode-box {
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
    }

    .qrcode-box img {
        width: 5rem !important;
        height: 5rem !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .qrcode-box p {
        font-size: 0.7rem !important;
    }

    .f-info {
        padding-top: 1rem !important;
    }

    .f-info p {
        font-size: 0.7rem !important;
        line-height: 1.6 !important;
    }

    /* ===== xygk.htm 学院概况页面移动端适配 ===== */

    /* Banner */
    .page-banner {
        padding-bottom: 50% !important;
        margin-top: 0 !important;
    }

    .page-banner h1 {
        font-size: 1.25rem !important;
        letter-spacing: 0.1em !important;
    }

    .page-banner p {
        font-size: 0.7rem !important;
        letter-spacing: 0.15em !important;
    }

    /* 主内容区 */
    .page-main {
        padding: 1.5rem 0 3rem !important;
    }

    .page-container {
        flex-direction: column !important;
        padding: 0 1rem !important;
        gap: 1.5rem !important;
    }

    /* 侧边栏导航 - 手机端隐藏 */
    .sidebar-nav {
        display: none !important;
    }

    /* 文章内容区 */
    .article-content {
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }

    #articleContent,
    .article-body,
    .wp_articlecontent {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #articleContent img,
    .article-body img,
    .wp_articlecontent img {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    .article-section {
        padding-bottom: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .section-heading {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    .section-body {
        font-size: 0.875rem !important;
        line-height: 1.8 !important;
    }

    .section-body p {
        text-align: left !important;
        margin-bottom: 0.75rem !important;
    }

    /* 文章图片 */
    .article-figure {
        margin: 1rem 0 !important;
    }

    .article-figure figcaption {
        font-size: 0.75rem !important;
    }

    /* 时间线 */
    .timeline {
        margin: 1.5rem 0 !important;
        padding-left: 1rem !important;
    }

    .timeline-item {
        flex-direction: column !important;
        gap: 0.25rem !important;
        padding: 0.75rem 0 0.75rem 1.5rem !important;
    }

    .timeline-year {
        font-size: 1rem !important;
        min-width: auto !important;
    }

    .timeline-event {
        font-size: 0.85rem !important;
    }

    /* 组织机构列表 */
    .org-list {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .org-list li {
        font-size: 0.85rem !important;
    }

    /* 联系方式 */
    .contact-info {
        padding: 1rem !important;
    }

    .contact-item {
        flex-direction: column !important;
        gap: 0.25rem !important;
    }

    .contact-label {
        min-width: auto !important;
        font-size: 0.85rem !important;
    }

    .contact-value {
        font-size: 0.85rem !important;
    }

    /* subpage header 适配 */
    .subpage .header {
        position: absolute !important;
        height: auto !important;
    }

    .logo-img,
    .logo-img.i1,
    .logo-img.i1.logo-fade {
        transition: none !important;
        opacity: 1 !important;
        filter: none !important;
        animation: none !important;
    }

    body.main .logo-img.logo-blue-layer {
        display: none !important;
        opacity: 0 !important;
    }

    .header .topr {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        height: 100% !important;
    }

    .toplink {
        display: block !important;
        margin: 0 !important;
    }
    .toplink ul, .toplink li {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .toplink ul li:not(:last-child) {
        display: none !important;
    }

    .search-toggle,
    .menu-btn {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    .search-toggle svg {
        width: 24px !important;
        height: 24px !important;
        stroke-width: 2.5px !important;
    }

    .menu-btn {
        flex-direction: column !important;
        gap: 5px !important;
    }
    .menu-btn span {
        width: 24px !important;
        height: 2px !important;
        background: #fff !important;
        display: block !important;
        transition: all 0.3s ease !important;
    }

    .topnav, .nav-hamburger {
        margin: 0 !important;
        padding: 0 !important;
    }

    .search-pill-bar {
        padding: 4px 4px 4px 20px !important;
        border-radius: 40px !important;
    }

    .search-pill-bar input.keyword {
        height: 50px !important;
        font-size: 16px !important;
    }

    .search-submit-circle {
        width: 50px !important;
        height: 50px !important;
        box-shadow: 0 4px 10px rgba(0, 64, 152, 0.3) !important;
    }

    .search-submit-circle svg {
        width: 26px !important;
        height: 26px !important;
        stroke-width: 3.5px !important;
    }

    .close-search {
        top: 25px !important;
        right: 25px !important;
        width: 44px !important;
        height: 44px !important;
    }
}