/* page.css */
/* Page Banner Styles (unchanged) */
.page-banner {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.page-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: scale(1.1);
    transition-duration: 1000ms;
}
.pagebanneron img{transform: scale(1);}

.page-banner h2 {
    position: relative;
    z-index: 2;
    font-size: 48px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}

/* Page Menu Styles (updated for always-visible horizontal submenus) */
.page-menu {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eee;
    height: 60px;
    line-height: 60px;
}

/* Use flexbox for the main menu to control alignment better */
.page-menu > ul { /* Target the direct child ul of .page-menu */
    list-style: none;
    margin: 0 auto; /* Center the entire menu block */
    padding: 0;
    display: flex; /* Use flexbox for horizontal arrangement */
    justify-content: center; /* Center main items horizontally */
    flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
    padding: 0 20px; /* Add some horizontal padding for smaller screens */
}

.page-menu li {
    margin: 0 15px; /* Spacing between main menu items */
    padding-bottom: 10px; /* Add space below for submenus */
    text-align: center; /* Center text within each li */
    flex-shrink: 0; /* Prevent main items from shrinking */
}

.page-menu li a {
    text-decoration: none;
    color: #374151;
    font-size: 20px;
    padding: 0 10px;
    display: block;
    transition: color 0.3s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap; /* Prevent text wrapping in main menu items */
}

/* Underline pseudo-element for hover and active states */
.page-menu li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #1e3a8a;
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
}

/* Hover effect: underline expands from center */
.page-menu li a.pagamenuli:hover::before {
    width: 100%;
}

/* Active effect: underline is always visible and full width */
.page-menu li a.pagamenuli.menu-on,.page-menu li.menu-lion a.pagamenuli{
    color: #1e3a8a;
    font-weight: bold;
}

.page-menu li a.pagamenuli.menu-on::before,.page-menu li.menu-lion a.pagamenuli::before {
    width: 100%;
}

.page-menu.pageson{padding-bottom: 60px;}
.page-menu li ul{position: absolute;display: none;left: 50%;transform: translateX(-50%); bottom: 15px;}
.page-menu li.menu-lion ul{display: flex;}
.page-menu li ul li{padding: 0;margin: 0 10px 0 0;transition-duration: 500ms;}
.page-menu li ul a{color: #555;padding: 10px 20px;transition-duration: 500ms;}
.page-menu li ul li a.menu-on{background-color: #6bb0f9;color: #fff;}
.page-menu li ul li:hover{background-color: #6bb0f9;}
.page-menu li ul li:hover a{color: #fff;}

/* Page Content Styles - UPDATED based on user preference and for news list */
.page-content {
    padding: 60px 0; /* Keep padding for content */
    background-color: #ffffff; /* Keep background for content */
    line-height: 2; /* User preference */
    font-size: 22px; /* User preference */
    color: #333; /* User preference */
}
.page-content img{margin: 0 auto;display: block;max-width: 100%;}

/* News List Specific Styles */
.news-list {
    margin-top: 30px; /* Space between menu and news list if menu is above */
}

.news-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* UPDATED: Two columns per row, with even distribution */
    grid-template-columns: repeat(2, 1fr); /* Two columns, each taking equal width */
    gap: 30px; /* Space between grid items (columns and rows) */
}

.news-list li {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition-duration: 500ms;
}

.news-list li:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.news-list li a {
    display: block;
    padding: 20px;
    text-decoration: none;
    color: #333; /* Inherit color from .page-content if needed, or define here */
}

.news-list li a:hover {
    color: #1e3a8a; /* Link hover color */
}

.news-list li h3 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    color: #1e40af; /* Title color */
    line-height: 1.4;
}

.news-list li .news-date {
    font-size: 13px;
    color: #6b7280; /* Date color */
    display: block; /* Make date take its own line */
    margin-bottom: 10px;
}

.news-list li .news-description {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0;
    display: -webkit-box; /* For multi-line ellipsis */
    -webkit-line-clamp: 3; /* Limit description to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Existing content styles, apply within .page-content for general content */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    margin-bottom: 30px;
    color: #1e40af;
    font-weight: bold;
}

.page-content h1 { font-size: 36px; }
.page-content h2 { font-size: 30px;text-align: center;}
.page-content h3 { font-size: 24px; }
.page-content h4 { font-size: 20px; }
#map{padding-top: 30px;}
.page-content p {
    margin-bottom: 20px;
}


.page-content ul li {
    list-style: disc;
    margin-bottom: 8px;
}

.page-content ol li {
    list-style: decimal;
    margin-bottom: 8px;
}

.page-content a {
    color: #3b82f6;
    text-decoration: underline;
}

.page-content a:hover {
    color: #1e40af;
}
.page-content table {
    width: 100%; /* Ensure table takes full available width */
    table-layout: fixed; /* Helps in distributing column widths evenly or as defined */
    word-break: break-word; /* Breaks long words if they overflow */
}

.page-content table td {
    padding: 8px; /* Add some padding for readability */
    vertical-align: top; /* Align content to the top */
}
.page-content td p{margin: 0;}
/* Responsive adjustments for smaller screens */
@media (max-width: 992px) { /* Adjust breakpoint for 2 columns */
    .news-list ul {
        grid-template-columns: repeat(2, 1fr); /* Stay 2 columns if screen supports it */
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .page-content table,
    .page-content tbody,
    .page-content tr {
        display: block; /* Make table elements behave like block-level elements */
        width: 100%; /* Ensure they take full width */
    }

    .page-content tr {
        margin-bottom: 15px; /* Add space between stacked rows */
    }

    .page-content td {
        display: block; /* Make cells stack vertically */
        width: 100%; /* Each cell takes full width */
        box-sizing: border-box; /* Include padding in the element's total width and height */
        text-align: left; /* Align text to the left */
        border-bottom: 1px solid #eee; /* Add a subtle separator between stacked cells */
        padding-bottom: 10px; /* Add padding below the content */
    }


    .page-content tr:last-child td {
        border-bottom: none; /* No border for the last cell in the last row */
    }

    .page-content tr.firstRow td:first-child {
         padding-top: 0; /* Adjust padding for the first cell if needed */
    }

    .page-banner {
        height: 380px;
    }

    .page-banner h2 {
        font-size: 36px;
    }

    .page-content {
        padding: 30px 0;
    }



    /* News List Responsive Adjustments for Mobile */
    .news-list ul {
        grid-template-columns: 1fr; /* Single column on small screens */
        gap: 20px; /* Adjust gap for single column */
    }

    .news-list li {
        margin-bottom: 0; /* Remove extra margin if already handled by gap */
    }
}

@media (max-width: 480px) {
    .page-banner {
        height: 150px;
    }

    .page-banner h2 {
        font-size: 28px;
    }
}

/* news-page Styles for previous/next article navigation */
.news-page {
    margin: 40px 0; /* Add some space above the navigation */
    padding-top: 20px; /* Padding for the content inside */
    border-top: 1px solid #eee; /* Separator line */
    display: flex; /* Use flexbox to arrange items */
    justify-content: space-between; /* Space out previous and next links */
    align-items: center; /* Vertically align items */
    font-size: 16px;
    color: #555;
}

.news-page a {
    text-decoration: none;
    color: #3b82f6; /* Link color */
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.5s ease;
}

.news-page a:hover {
    background-color: #e6f0ff;
    color: #1e40af;
    border-color: #3b82f6;
}

.news-page a[href*="pre"]:before { /* Style for 'Previous' link, assuming 'pre' in URL/text */
    content: "« ";
}

.news-page a[href*="next"]:after { /* Style for 'Next' link, assuming 'next' in URL/text */
    content: " »";
}

/* Optional: If DedeCMS wraps prev/next in distinct elements, adjust selectors */
/* For example, if it generates: <div class="pre_link"><a href="...">...</a></div> */
/* You might need:
.news-page .pre_link,
.news-page .next_link {
    width: 48%; // Or some appropriate width
}
*/

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .news-page {
        flex-direction: column; /* Stack links vertically on small screens */
        align-items: flex-start; /* Align to the start */
        padding: 15px;
        margin-top: 30px;
    }

    .news-page a {
        width: 100%; /* Full width for stacked links */
        text-align: center;
        margin-bottom: 10px; /* Space between stacked links */
    }

    .news-page a:last-child {
        margin-bottom: 0;
    }
}

/* Case List Specific Styles */
.cace-list {
    margin-top: 60px; /* Space between banner and case list */
    padding-bottom: 40px; /* Padding for the bottom of the section */
}

.cace-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns, each taking equal width */
    gap: 30px; /* Space between grid items (columns and rows) */
}

.cace-list li {
    background-color: #ffffff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden; /* Ensures content respects border-radius */
    transition: transform 0.5s ease, box-shadow 0.5s ease; /* Smooth transition for hover */
    text-align: center; /* Center text and image */
}

.cace-list li:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Shadow effect on hover */
}

.cace-list li a {
    display: block; /* Make the entire list item clickable */
    text-decoration: none;
    color: #333;
    padding-bottom: 20px; /* Padding at the bottom of the clickable area */
}

.cace-list li span {
    display: block;
    width: 100%;
    height: 300px; /* Fixed height for image container */
    overflow: hidden;
    margin-bottom: 15px; /* Space between image and text */
}

.cace-list li span img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container without distortion */
    transition: transform 0.3s ease; /* Smooth zoom effect */
}

.cace-list li:hover span img {
    transform: scale(1.05); /* Slight zoom on image hover */
}

.cace-list li p {
    font-size: 16px;
    color: #555;
    margin: 0 20px 10px; /* Horizontal margin and space below */
    line-height: 1.5;
    word-break: break-word; /* Ensure long words break */
    white-space: normal; /* Allow text to wrap */
}

.cace-list li p:first-of-type { /* Style for "项目名称" */
    font-weight: bold;
    color: #1e40af;
    font-size: 18px;
    margin-bottom: 5px;
}

.cace-list li p:last-of-type { /* Style for "建设内容" */
    font-size: 14px;
    color: #666;
    margin-bottom: 0; /* No bottom margin for the last paragraph */
    height: 42px; /* Fixed height for two lines (approx. 2 lines with line-height 1.5 and font-size 14px) */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines for description */
    -webkit-box-orient: vertical;
}


/* Responsive adjustments for smaller screens */
@media (max-width: 992px) {
    .cace-list ul {
        grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens */
        gap: 25px;
    }
    .cace-list li span {
        height: 300px; /* Adjust image height */
    }
}

@media (max-width: 768px) {
    .page-content h2{font-size: 25px;}
    .cace-list ul {
        grid-template-columns: 1fr; /* Single column on small screens */
        gap: 20px;
    }
    .cace-list li span {
        height: 40vw; /* Adjust image height */
    }
}

/* Existing .cace-list styles as provided in the previous answer */
/* ... (your existing .cace-list styles) ... */

/* Swiper Lightbox Overlay */
.swiper-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Dark overlay */
    z-index: 9999; /* Ensure it's on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.swiper-lightbox-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Swiper Lightbox Gallery Container */
.swiper-lightbox-gallery {
    width: 90%; /* Adjust as needed */
    height: 90%; /* Adjust as needed */
    max-width: 1200px; /* Max width for large screens */
    max-height: 800px; /* Max height for large screens */
    position: relative; /* For pagination/navigation positioning */
}

/* Swiper Slide Content (image) */
.swiper-lightbox-gallery .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column; /* Stack image and caption */
}

.swiper-lightbox-gallery .swiper-slide img {
    max-width: 100%;
    max-height: calc(100% - 40px); /* Adjust height for caption */
    object-fit: contain; /* Ensure image fits without cropping */
}

.swiper-lightbox-gallery .swiper-slide-caption {
    color: #fff;
    font-size: 18px;
    margin-top: 10px;
    padding: 0 20px;
    text-align: center;
}

/* Swiper Navigation Buttons */
.swiper-lightbox-gallery .swiper-button-prev,
.swiper-lightbox-gallery .swiper-button-next {
    color: #fff;
    --swiper-navigation-size: 40px; /* Swiper 6+ variable for size */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-lightbox-gallery .swiper-button-prev:hover,
.swiper-lightbox-gallery .swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Swiper Pagination */
.swiper-pagination {
    color: #fff;
    font-size: 16px;
    bottom: 10px;
    text-align: center;
}

/* Close Button */
.swiper-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    background: none;
    border: none;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.swiper-lightbox-close:hover {
    opacity: 1;
}

/* Responsive adjustments for lightbox */
@media (max-width: 768px) {
    .page-menu{display: none;}
    .swiper-lightbox-gallery {
        width: 95%;
        height: 95%;
    }
    .swiper-lightbox-gallery .swiper-button-prev,
    .swiper-lightbox-gallery .swiper-button-next {
        --swiper-navigation-size: 30px;
        width: 40px;
        height: 40px;
    }
    .swiper-lightbox-close {
        font-size: 30px;
        top: 10px;
        right: 10px;
    }
    .swiper-lightbox-gallery .swiper-slide-caption {
        font-size: 16px;
    }
}
.page-list{text-align: center;}