/* ==================== Case List Page ==================== */

/* Page Banner */
.page-banner { position: relative; height: 280px; overflow: hidden; }
.page-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-banner-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); }
.page-banner h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 44px; font-weight: 600; letter-spacing: 1px; margin: 0; }

/* Breadcrumb */
.breadcrumb-bar { background: #f2f2f2; padding: 14px 0; font-size: 14px; color: #666; }
.breadcrumb-bar .container { max-width: 1500px; margin: 0 auto; }
.breadcrumb-bar a { color: #666; transition: color 0.3s; }
.breadcrumb-bar a:hover { color: #4C4C4C; }
.breadcrumb-label { margin-right: 8px; }
.breadcrumb-sep { margin: 0 8px; }

/* Main Layout */
.caselist-wrap { padding: 50px 0 50px; }
.caselist-wrap .container { max-width: 1500px; margin: 0 auto; }
.section-title { text-align: center; font-size: 32px; font-weight: 600; margin-bottom: 45px; }

/* Environment Cards (zigzag) */
.env-list { display: flex; flex-direction: column; gap: 55px; }
.env-card { display: flex; gap: 45px; align-items: stretch; }
.env-card.reverse { flex-direction: row-reverse; }
.env-media { flex: 0 0 50%; position: relative; overflow: hidden; min-height: 320px; }
.env-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.env-card:hover .env-media img { transform: scale(1.05); }

/* Offset frame tag on image */
.case-tag { position: absolute; top: 35px; left: 40px; color: #fff; font-size: 22px; font-weight: 600; line-height: 1.35; padding: 12px 22px; z-index: 2; }
.case-tag::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid rgba(23,168,159,0.9); transform: translate(-10px, -10px); pointer-events: none; }

/* Bottom gradient overlay on image */
.case-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 30px 28px; background: linear-gradient(transparent, rgba(0,0,0,0.65)); color: #fff; z-index: 1; }
.case-overlay h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.case-overlay p { font-size: 13px; opacity: 0.92; max-width: 75%; line-height: 1.6; }

/* Corner arrow */
.case-arrow { position: absolute; right: 0; bottom: 0; width: 48px; height: 48px; background: #4C4C4C; border-radius: 48px 0 0 0; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background 0.3s; }
.case-arrow:hover { background: #0f8a82; }

/* Text side */
.env-content { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.env-content h3 { font-size: 24px; font-weight: 600; margin-bottom: 18px; }
.env-content p { font-size: 14px; color: #666; line-height: 1.8; margin-bottom: 14px; }
.view-more { display: inline-block; align-self: flex-start; background: #4C4C4C; color: #fff; font-size: 12px; padding: 9px 24px; border-radius: 15px; letter-spacing: 0.5px; transition: background 0.3s; margin-top: 8px; }
.view-more:hover { background: #0f8a82; }

/* Region Cards */
.region-wrap { background: #f5f5f5; padding: 60px 0 70px; }
.region-wrap .container { max-width: 1500px; margin: 0 auto; }
.region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.region-media { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.region-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.region-card:hover .region-media img { transform: scale(1.05); }
.region-card .case-tag { font-size: 20px; }
.region-caption { background: #fff; text-align: center; padding: 16px 15px 18px; }
.region-caption h4 { font-size: 15px; font-weight: 600; color: #333; }
.region-caption p { font-size: 14px; color: #666; margin-top: 4px; }

/* ==================== Tablet (<=1024px) ==================== */
@media (max-width: 1024px) {
    .page-banner { height: 220px; }
    .page-banner h1 { font-size: 36px; }
    .section-title { font-size: 28px; margin-bottom: 35px; }
    .env-card { gap: 30px; }
    .env-content h3 { font-size: 21px; }
    .case-overlay p { max-width: 100%; }
    .region-grid { gap: 20px; }
}

/* ==================== Mobile (<=768px) ==================== */
@media (max-width: 768px) {
    .page-banner { height: 150px; }
    .page-banner h1 { font-size: 28px; }
    .breadcrumb-bar { padding: 10px 0; font-size: 12px; }

    .caselist-wrap { padding: 30px 0 30px; }
    .section-title { font-size: 24px; margin-bottom: 25px; }

    /* Env cards stack: image on top, text below */
    .env-list { gap: 30px; }
    .env-card, .env-card.reverse { flex-direction: column; gap: 0; }
    .env-media { flex: unset; width: 100%; min-height: unset; aspect-ratio: 4/3; }
    .case-tag { top: 18px; left: 18px; font-size: 16px; padding: 8px 14px; }
    .case-tag::before { transform: translate(-6px, -6px); }
    .case-overlay { padding: 45px 15px 14px; }
    .case-overlay h3 { font-size: 15px; margin-bottom: 4px; }
    .case-overlay p { font-size: 11px; line-height: 1.5; }
    .case-arrow { width: 38px; height: 38px; }
    .env-content { padding: 16px 0 0; }
    .env-content h3 { font-size: 18px; margin-bottom: 10px; }
    .env-content p { font-size: 13px; margin-bottom: 10px; }
    .view-more { padding: 8px 20px; font-size: 11px; }

    /* Region grid: 1 column */
    .region-wrap { padding: 35px 0 40px; }
    .region-grid { grid-template-columns: 1fr; gap: 20px; }
    .region-media { aspect-ratio: 4/3; }
    .region-card .case-tag { font-size: 16px; }
    .region-caption { padding: 12px 12px 14px; }
    .region-caption h4 { font-size: 14px; }
    .region-caption p { font-size: 13px; }
}

/* ==================== Pagination ==================== */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; list-style: none; padding: 0; flex-wrap: wrap; }
.pagination li { list-style: none; }
.pagination li a { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0 8px; color: #555; font-size: 14px; text-decoration: none; }
.pagination li a[href] { border: 1px solid #ddd; transition: all 0.3s; }
.pagination li a[href]:hover { border-color: #4C4C4C; color: #4C4C4C; }
.pagination li.active a { background: #4C4C4C; border-color: #4C4C4C; color: #fff; }