/* Works list */
.works-filter {padding: 40px 50px;background: var(--color-bg-2);margin-bottom: 10px;}
.works-filter-grid {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 20px;}
.works-filter-field {display: flex;flex-direction: column;gap: 10px;min-width: 0;}
.works-filter-label {font-size: 14px;line-height: 1.4;color: var(--color-neutral-4);}
.works-filter-select-wrap {position: relative;display: block;}
.works-filter-select-wrap::after {content: '';position: absolute;top: 50%;right: 18px;width: 8px;height: 8px;border-right: 1.5px solid var(--color-neutral-4);border-bottom: 1.5px solid var(--color-icon-2);transform: translateY(-65%) rotate(45deg);pointer-events: none;}
.works-filter-select {display: block;width: 100%;height: 54px;padding: 0 36px 0 16px;border-radius: 5px;background: #fff;color: #1e1e1e;font-size: 14px;font-weight: 400;line-height: 1.4;appearance: none;-webkit-appearance: none;border: none;}
.works-filter-select:focus {outline: 1px solid #1e1e1e;outline-offset: -1px;}
.works-filter-bar {display: flex;align-items: center;justify-content: space-between;margin-bottom: 40px;}
.works-filter-count {margin: 0;font-size: 12px;color: var(--color-neutral-7);}

.works-grid {position: relative;}
.works-grid-item {min-width: 0;transform-origin: center center;}
.works-grid-item.is-filtered-out {display: none;}
.works-card {display: block;color: inherit;}
.works-card-thumb {position: relative;overflow: hidden;background: var(--color-bg-2);}
.works-card .works-card-thumb img {display: block;width: 100%;}
.works-card-hover {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;opacity: 0;transition: opacity .35s ease;}
.works-card:hover .works-card-hover {opacity: 1;}
.works-card .works-card-body {margin-top: 20px;line-height: 1.4;}
.works-card .works-card-body > h3 {font-weight: 500;font-size: 28px;font-family: var(--font-point);margin-bottom: 10px;}
.works-card .works-card-body > ul {display: flex; gap: 16px;font-size: 16px;color: var(--color-neutral-4);}
.works-card .works-card-body > ul li {position: relative;}
.works-card .works-card-body > ul li + li::before {content: '';position: absolute;top: 50%;left: -8px;transform: translateY(-50%);width: 1px;height: 8px;background: var(--color-neutral-2);}
.works-pagination {display: flex;align-items: center;justify-content: center;gap: 80px;margin-top: 80px; font-size: 14px;line-height: 1.4;}
.works-pagination-nav {color: #999;text-decoration: none;text-transform: lowercase;}
.works-pagination-nav.is-disabled {opacity: 0.45;pointer-events: none;}
.works-pagination-pages {display: flex;align-items: center;gap: 30px;margin: 0;padding: 0;list-style: none;}
.works-pagination-page {color: #999;text-decoration: none;}
.works-pagination-page.is-current {color: #1e1e1e;font-weight: 500;}

@media all and (max-width:1440px) {
    .works-card .works-card-body > h3{font-size: 24px;}
    .works-card .works-card-body > ul{font-size: 14px;}
}

@media (max-width: 1023px) {
    .works-card-hover {display: none;}
    .works-filter {padding: 24px 20px;}
    .works-filter-grid {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 20px 16px;}
    .works-filter-label{font-size: 12px;}
    .works-filter-select{height: 44px;}
    .works-filter-bar{margin-bottom: 30px;}
    .works-grid.grid2{grid-template-columns: repeat(1, minmax(0, 1fr));}
    .works-pagination {gap: 40px;}
}

@media (max-width: 767px) {
    .works-filter-grid {grid-template-columns: 1fr;}
    .works-card .works-card-body{margin-top: 15px;}
    .works-card .works-card-body > h3 {font-size: 20px;margin-bottom: 5px;}
    .works-card .works-card-body > ul{font-size: 11px;gap: 14px;}
    .works-card .works-card-body > ul li + li::before{height: 6px;left: -7px;}
    .works-pagination {gap: 24px;margin-top: 60px;font-size: 13px;}
}




/* Works detail */
.works-detail-layout {display: grid;grid-template-columns: repeat(12,minmax(0,1fr));}
.works-detail-info {grid-column: 1/5;position: sticky;top: 70px;height: fit-content;}
.works-detail-heading {margin-bottom: 60px;line-height: 1.4;}
.works-detail-heading > h3 {font-weight: 500;font-size: 40px;font-family: var(--font-point);margin-bottom: 20px;}
.works-detail-heading > p {font-size: 20px;}
.works-meta {border-top: 1px solid var(--color-neutral-3);margin-bottom: 200px;}
.works-meta-row {display: grid;grid-template-columns: 155px 1fr;align-items: center;border-bottom: 1px solid var(--color-neutral-3);font-size: 14px;line-height: 1.4;padding-block: 14px;}
.works-meta-row > p:first-child {font-weight: 500;}
.works-detail-actions {display: flex;align-items: center;justify-content: space-between;gap: 24px;}
.works-detail-actions > a {display: flex;align-items: center;justify-content: space-between;width: 100%;max-width: 135px;padding-bottom: 10px;border-bottom: 1px solid var(--color-neutral-3);font-size: 16px;font-weight: 500;line-height: 1.4;font-family: var(--font-point);transition: border-color 0.3s ease, color 0.3s ease;}
.works-detail-actions > a:hover {border-bottom-color: var(--color-neutral-9);}
.works-detail-actions > a svg{width: 16px;height: 16px;}

.works-detail-gallery {grid-column: 6/13;display: flex;flex-direction: column;gap: 20px;min-width: 0;}
.works-detail-gallery .works-detail-actions{display: none;}
.works-detail-gallery-item {margin: 0;overflow: hidden;background: #f3f4f6;}
.works-detail-gallery-item img {display: block;width: 100%;height: auto;}

@media all and (max-width:1440px) {
    .works-detail-heading{margin-bottom: 40px;}
    .works-detail-heading > h3{font-size: 30px;}
    .works-detail-heading > p{font-size: 16px;}
    .works-meta{margin-bottom: 125px;}
    .works-meta-row{grid-template-columns: 115px 1fr;font-size: 13px;}
    .works-detail-actions > a{font-size: 14px;}
}

@media all and (max-width:1023px) {
    .works-detail-layout {display: block;}
    .works-detail-info {position: static;padding-top: 30px;}
    .works-detail-info .works-detail-actions{display: none;}
    .works-meta{margin-bottom: 85px;}
    .works-detail-gallery .works-detail-actions{display: flex;margin-top: 25px;}
}

@media all and (max-width:767px) {
    .works-detail-info{padding-top: 15px;}
    .works-detail-heading > h3 {font-size: 24px;margin-bottom: 15px;}
    .works-detail-heading > p {font-size: 14px;}
    .works-meta{margin-bottom: 50px;}
    .works-meta-row {grid-template-columns: 90px 1fr;}
    .works-meta-row > p{font-size: 12px;}
    .works-detail-gallery{gap: 10px;}
    .works-detail-actions > a{font-size: 13px;padding-bottom: 7px;}
    .works-detail-actions > a svg{width: 14px;height: 14px;}
}