.site-logo {
    width: 100px;
    height: auto;
}

/* PAGE SECTIONS (row 1, row 2, row 3…) */
.design-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
    /* space between rows */
}


/* === GENERAL CARDS LAYOUT (ALL ROWS) === */
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    box-sizing: border-box;
    border: none;
    width: 100%;
    gap: 20px;
    /* space between cards in a row */
}

/* === SINGLE CARD (BASE) === */
.card {
    position: relative;
    flex: 1 1 100%;
    /* row 1 = full-width by default */
    width: 100%;
    max-width: none;
    overflow: hidden;
    /* border: solid 1px #000; */
    /* 🔥 DESKTOP HEIGHT FOR *ALL* ROWS */
    height: 550px;
    /* ⬅️ here is the 650px */
    cursor: pointer;
}

/* === SINGLE CARD (BASE) === */
.card-wholesection {
    position: relative;
    flex: 1 1 100%;
    /* row 1 = full-width by default */
    width: 100%;
    max-width: none;
    overflow: hidden;

    /* 🔥 DESKTOP HEIGHT FOR *ALL* ROWS */
    height: 750px;
    /* ⬅️ here is the 650px */
}

/* === IMAGE (BASE, >600px) === */
.card-image {
    width: 100%;
    height: 100%;
    /* fill the 650px card */
    display: block;
    object-fit: cover;
    /* fill + crop */
    object-position: center;

    /* 🔹 smooth zoom on hover */
    transition: transform 0.35s ease;
}

/* === BLURRED TEXT STRIP === */
.card-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: rgba(255, 255, 255, 0.25);
    color: #000;

    /* 🔹 base padding so it can “grow” on hover */
    padding: 10px 10px 12px;
    /* 🔹 smooth grow / move */
    transition:
        padding 0.3s ease,
        transform 0.3s ease,
        background 0.3s ease,
        backdrop-filter 0.3s ease;
}

/* === TEXT STYLES === */
.card-type {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin: 10px 0px 10px 10px;
}

.card-title-en {
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0px 0px 0px 10px;
}

.card-title-ar {
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 2px 0px 10px 10px;
    direction: rtl;
    text-align: left;
}

/* 🔥 HOVER EFFECTS (image zoom + blur strip grows up) */
.card:hover .card-image {
    transform: scale(1.05);
}

.card:hover .card-info {
    padding-top: 26px;
    /* grows upward */
    padding-bottom: 18px;

}

/* CAN DELETE */
/* HOVER OUTLINE – CLEAN + DOESN'T MOVE LAYOUT */
.card {
    position: relative;
    z-index: 0;
    /* make sure the card is a stacking context */
}

/* the outline */
.card::after {
    content: "";
    position: absolute;

    /* 3px *inside* the card so overflow: hidden doesn't clip it */
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;

    border: 6px solid rgba(180, 146, 252, 0.55);
    border-radius: 10px;
    /* or match your card radius if you add one */
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    /* above image & blur strip */
    transition: opacity 0.25s ease;
}

.card:hover::after {
    opacity: 1;
}

/* ========================================================= */
/* === ROW 2 (2/3 + 1/3, SAME LENGTH, >600px) ============== */
/* ========================================================= */

.second-row {
    display: flex;
    flex-wrap: nowrap;
    /* keep both cards on one line above 600px */
}

/* 2/3 width card */
.card-large {
    flex: 1 1 0;
    /* ratio 2 : 1 with gap handled by flex */
}

/* 1/3 width card */
.card-small {
    flex: 1 1 0;
}

/* Shorter height for 2-card rows */
.second-row .card {
    height: 400px;
}

/* ❌ remove aspect-ratio here so 650px applies uniformly */
/* second-row .card { aspect-ratio: 16 / 9; } */

/* ========================================================= */
/* === ROW 3 (3 CARDS, 1/3 EACH, SHRINKING LIKE ROW 2) ===== */
/* ========================================================= */

.third-row {
    display: flex;
    flex-wrap: nowrap;
    /* 3 cards side by side above 600px */
}

/* 3 equal columns */
.third-row .card {
    flex: 1 1 0;
    height: 400px;    /* shorter height for multi-card rows */
    overflow: hidden;
}

/* no need for a special .third-row .card-image:
   base .card-image already fills + crops */

/* ========================================================= */
/* === MOBILE BEHAVIOR (<600px) ============================ */
/* ========================================================= */

@media (max-width: 600px) {

    /* All cards: same fixed height, width shrinks */
    .card {
        height: 300px;
        /* ⬅️ here is the 300px mobile height */
        aspect-ratio: auto;
        /* ignore any aspect-ratio that might exist */
        position: relative;
        overflow: hidden;
    }

    .card-wholesection{
            height: 400px;
            /* ⬅️ here is the 300px mobile height */
            aspect-ratio: auto;
            /* ignore any aspect-ratio that might exist */
            position: relative;
            overflow: hidden;
        }

    /* Images: fill + crop inside the 300px height */
    .card-image {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    /* Row 2: stack full-width on mobile */
    .second-row {
        flex-wrap: wrap;
    }

    .second-row .card-large,
    .second-row .card-small {
        flex: 0 0 100%;
    }

    /* Row 3: 3 cards become full-width stacked */
    .third-row {
        flex-wrap: wrap;
    }

    .third-row .card {
        flex: 0 0 100%;
        /* height already 300px from .card */
    }
}


/* ============= OVERLAY / MODAL ============= */

.card-overlay {
    position: fixed;
    /* 🔥 fixed to viewport, not scrolling away */
    background: rgba(0, 0, 0, 0.45);
    display: none;
    /* JS will set this to flex */
    justify-content: center;
    align-items: center;
    z-index: 999;
    /* above everything in the layout */

    /* we will set top/left/width/height via JS */
}

.card-overlay-inner {
    position: relative;
    width: 100%;
    /* fill the overlay box */
    height: 100%;
    background: #fff;
    overflow: hidden;
    box-shadow: none;
    border-radius: 0;
}

/* Close button (X) */
.card-overlay-close {
    position: absolute;
    top: 30px;
    right: 40px;
    z-index: 2;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
}

/* Iframe that shows the project page */
.card-overlay-frame {
    width: 100%;
    height: 100%;
    border: none;
}