/* =============================== */
/* WRAPPER */
/* =============================== */
.ades-project-wrapper {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

/* =============================== */
/* FILTER */
/* =============================== */
.ades-project-filter {
    display: flex;
    gap: 12px;
    margin: 30px 0 40px;
    flex-wrap: wrap;
}

/* BUTTON FILTER */
.ades-project-filter button {
    background: #f0f0f0;
    border: 1px solid #000;
    border-radius: 10px;
    color: #000;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    text-transform: none !important;   /* FIX chữ in hoa */
    transition: all .25s ease;
}

/* HOVER */
.ades-project-filter button:hover {
    background: #000;
    color: #fff;
}

/* ACTIVE */
.ades-project-filter button.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* TICK */
.ades-project-filter button.active::after {
    content: " ✓";
    font-size: 12px;
}

/* =============================== */
/* GRID (danh sách projects) */
/* =============================== */
.ades-project-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

/* DIVIDER */
.ades-project-grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: #dcdcdc;
}

/* ITEM */
.ades-project-item {
    position: relative;
}

/* THUMB */
.ades-project-thumb {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.ades-project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.ades-project-item:hover img {
    transform: scale(1.05);
}

/* =============================== */
/* INFO (trong grid) */
/* =============================== */
.ades-project-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
}

/* TITLE */
.ades-project-title {
    font-size: 18px;
    margin: 0;
    font-weight: 500;
}

.ades-project-title a {
    text-decoration: none;
    color: #000;
}

/* SEE MORE */
.ades-project-btn {
    background: #f0f0f0;
    border: 1px solid #000;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 14px;
    text-decoration: none;
    color: #333;
    white-space: nowrap;
    transition: all .25s ease;
}

.ades-project-btn:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* =============================== */
/* SINGLE PROJECT PAGE */
/* =============================== */
.ades-project-single {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
}

/* TOP LAYOUT */
.ades-project-single-top {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: start;
}

/* MAIN IMAGE */
.ades-project-main-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* TITLE */
.ades-project-single .ades-project-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px;
    color: #000;
}

/* META ROW (repeater dùng cho Project Details) */
.ades-project-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #000;
    font-size: 16px;
    font-weight: 600;
}

.ades-project-meta-row:last-of-type {
    border-bottom: 1px solid #000;
}

/* DESCRIPTION */
.ades-project-description {
    margin-top: 25px;
    line-height: 1.8;
    font-size: 16px;
}

/* =============================== */
/* GALLERY - MASONRY LAYOUT (cập nhật chính) */
/* =============================== */
.ades-project-gallery {
    margin-top: 80px;
    column-count: 3;          /* 3 cột trên desktop */
    column-gap: 40px;
}

.ades-gallery-item {
    break-inside: avoid;      /* Không cắt item giữa các cột */
    margin-bottom: 40px;      /* Khoảng cách dọc giữa các item */
}

.ades-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* shadow nhẹ cho chuyên nghiệp */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ades-gallery-item img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* =============================== */
/* FULL IMAGE (nếu dùng sau này) */
/* =============================== */
.ades-project-full {
    margin: 80px 0;
}

.ades-project-full img {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================== */
/* RESPONSIVE */
/* =============================== */
@media (max-width: 1200px) {
    .ades-project-gallery {
        column-count: 2;
    }
}

@media (max-width: 900px) {
    .ades-project-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ades-project-grid::before {
        display: none;
    }
    .ades-project-single-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .ades-project-gallery {
        column-count: 1;
        column-gap: 20px;
    }
    .ades-gallery-item {
        margin-bottom: 30px;
    }
}

@media (max-width: 600px) {
    .ades-project-filter {
        gap: 8px;
    }
    .ades-project-filter button {
        font-size: 13px;
        padding: 5px 10px;
    }
    .ades-project-title {
        font-size: 16px;
    }
}

/* FIX TEXT FADE IN FLATSOME */
.ades-project-single .entry-content,
.ades-project-single .post-content,
.ades-project-single .ades-project-description,
.ades-project-single .ades-project-description p {
    opacity: 1 !important;
    color: #111 !important;
    filter: none !important;
}

/* reset mọi opacity từ container cha */
.ades-project-single *,
.ades-project-single p {
    opacity: 1 !important;
}

/* FIX DESCRIPTION TEXT */
.ades-project-description,
.ades-project-description p,
.ades-project-single .entry-content,
.ades-project-single .entry-content p {
    color: #000 !important;
    opacity: 1 !important;
    font-size: 16px;
    font-weight: 300;
}

/* ===== PROJECT META FIX (nếu dùng class cũ) ===== */
.project-meta {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: start;
    border-bottom: 1px solid #ddd;
    padding: 12px 0;
}

/* label bên trái */
.project-meta strong {
    font-weight: 500;
}

/* value bên phải */
.project-meta span,
.project-meta div:last-child {
    text-align: right;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* LOAD MORE BUTTON */
.ades-loadmore-wrap {
    width: 100%;
    margin: 35px 0;
}

.ades-loadmore {
    width: 100%;
    height: 36px;
    background: #f0f0f0;
    border: 1px solid #333;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    cursor: pointer;
    transition: all .25s ease;
}

/* hover */
.ades-loadmore:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* ===============================
GALLERY PATTERN (OVERRIDE ONLY WHEN USING ROW)
=============================== */

/* Tắt masonry khi có layout mới */
.ades-project-gallery:has(.ades-row) {
    column-count: unset !important;
    column-gap: 0 !important;
}

/* ROW layout */
.ades-project-gallery .ades-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

/* 1 ảnh */
.ades-project-gallery .ades-row.cols-1 {
    grid-template-columns: 1fr;
}

/* 3 ảnh */
.ades-project-gallery .ades-row.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 2 ảnh */
.ades-project-gallery .ades-row.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* ITEM */
.ades-project-gallery .ades-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.ades-project-gallery .ades-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

/* HEIGHT */
.ades-project-gallery .cols-1 .ades-item {
    height: 520px;
}

.ades-project-gallery .cols-3 .ades-item {
    height: 260px;
}

.ades-project-gallery .cols-2 .ades-item {
    height: 360px;
}

/* HOVER */
.ades-project-gallery .ades-item:hover img {
    transform: scale(1.05);
}

/* ===============================
LIGHTBOX (ISOLATED)
=============================== */

.ades-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(6px);
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.ades-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.ades-lightbox-img {
    max-width: 90%;
    max-height: 90%;
}

.ades-close,
.ades-prev,
.ades-next {
    position: absolute;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

.ades-close {
    top: 20px;
    right: 30px;
}

.ades-prev {
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.ades-next {
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

/* ===============================
RESPONSIVE (ONLY NEW GALLERY)
=============================== */

@media (max-width: 900px) {

    .ades-project-gallery:has(.ades-row) {
        column-count: unset !important;
    }

    .ades-project-gallery .cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ades-project-gallery .cols-2 {
        grid-template-columns: 1fr;
    }

    .ades-project-gallery .cols-1 .ades-item {
        height: 300px;
    }

    .ades-project-gallery .cols-3 .ades-item,
    .ades-project-gallery .cols-2 .ades-item {
        height: 220px;
    }
}

@media (max-width: 600px) {

    .ades-project-gallery .ades-row {
        gap: 10px;
    }

    .ades-project-gallery .cols-3,
    .ades-project-gallery .cols-2 {
        grid-template-columns: 1fr;
    }

    .ades-project-gallery .ades-item {
        height: auto !important;
    }
}

/* ===============================
LIGHTBOX ZOOM EFFECT
=============================== */

.ades-lightbox-img {
    transform: scale(0.85);
    opacity: 0;
    transition: all .35s ease;
}

/* zoom vào */
.ades-lightbox-img.zoom-in {
    transform: scale(1);
    opacity: 1;
}