/* =========================================================
   MegVolt Tech Website
   Version: 0.2 — Modular Rebuild

   File:
   /assets/css/equipment-rental/catalog.css

   Purpose:
   - Equipment Rental catalogue page
   - Page intro
   - Application / manufacturer filters
   - Equipment grid
   - Equipment cards
   - Empty result state
   - Responsive behaviour

   Dependencies:
   - /assets/css/main.css
   - /modules/equipment-rental/catalog.php
   ========================================================= */


/* =========================================================
   1. PAGE WRAPPER
   ========================================================= */

.equipment-catalog {
    width: 100%;

    background:
        linear-gradient(
            180deg,
            #101010 0%,
            #121212 100%
        );

    color: var(--color-white);
}


/* =========================================================
   2. PAGE INTRO
   ========================================================= */

.equipment-catalog__intro {
    position: relative;

    padding-top: clamp(4rem, 7vw, 6.5rem);
    padding-bottom: clamp(3.5rem, 6vw, 5.5rem);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(215, 25, 32, 0.15) 0%,
            rgba(215, 25, 32, 0.05) 28%,
            rgba(215, 25, 32, 0) 62%
        ),
        linear-gradient(
            120deg,
            #090909 0%,
            #111111 52%,
            #181818 100%
        );

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);
}

.equipment-catalog__intro::after {
    content: "";

    position: absolute;

    right: -150px;
    top: -180px;

    width: 500px;
    height: 500px;

    border:
        1px solid rgba(215, 25, 32, 0.10);

    border-radius: 50%;

    pointer-events: none;
}

.equipment-catalog__intro .container {
    position: relative;
    z-index: 1;
}

.equipment-catalog__intro .section-eyebrow {
    color: var(--color-red);
}

.equipment-catalog__page-title {
    max-width: 900px;

    margin-bottom: var(--space-6);

    color: var(--color-white);

    font-size:
        clamp(
            2.7rem,
            5vw,
            4.8rem
        );

    font-weight: 800;
    line-height: 1.03;

    letter-spacing: -0.05em;
}

.equipment-catalog__page-intro {
    max-width: 760px;

    margin: 0;

    color: rgba(255, 255, 255, 0.66);

    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.75;
}


/* =========================================================
   3. FILTER AREA
   ========================================================= */

.equipment-catalog__filters {
    padding-top: 2rem;
    padding-bottom: 2rem;

    background: #0d0d0d;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
}

.equipment-catalog__filter-group + .equipment-catalog__filter-group {
    margin-top: 1.5rem;
}

.equipment-catalog__filter-label {
    margin-bottom: var(--space-3);

    color: rgba(255, 255, 255, 0.46);

    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.equipment-catalog__filter-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.65rem;
}


/* =========================================================
   4. FILTER LINKS
   ========================================================= */

.equipment-catalog__filter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding:
        0.55rem
        0.9rem;

    color: rgba(255, 255, 255, 0.67);

    background: #171717;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: var(--radius-sm);

    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.3;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.equipment-catalog__filter-link:hover,
.equipment-catalog__filter-link:focus-visible {
    color: var(--color-white);

    border-color:
        rgba(215, 25, 32, 0.35);

    transform: translateY(-1px);
}

.equipment-catalog__filter-link.is-active {
    color: var(--color-white);

    background:
        linear-gradient(
            135deg,
            #8f1117 0%,
            #d71920 100%
        );

    border-color: var(--color-red);
}


/* =========================================================
   5. CATALOGUE CONTENT
   ========================================================= */

.equipment-catalog__content {
    padding-top: clamp(3.5rem, 6vw, 5rem);
    padding-bottom: clamp(4.5rem, 7vw, 7rem);

    background:
        linear-gradient(
            180deg,
            #121212 0%,
            #0f0f0f 100%
        );
}


/* =========================================================
   6. CATALOG HEADING
   ========================================================= */

.equipment-catalog__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-8);

    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.equipment-catalog__result-label {
    margin-bottom: var(--space-2);

    color: var(--color-red);

    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.equipment-catalog__title {
    margin: 0;

    color: var(--color-white);

    font-size:
        clamp(
            1.9rem,
            3vw,
            2.7rem
        );

    font-weight: 780;
    line-height: 1.15;

    letter-spacing: -0.035em;
}

.equipment-catalog__count {
    margin: 0;

    flex: 0 0 auto;

    color: rgba(255, 255, 255, 0.46);

    font-size: 0.78rem;
    font-weight: 650;
}


/* =========================================================
   7. EQUIPMENT GRID
   ========================================================= */

.equipment-catalog__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(1.2rem, 2vw, 1.8rem);
}


/* =========================================================
   8. EQUIPMENT CARD
   ========================================================= */

.equipment-card {
    display: flex;

    min-width: 0;
    height: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #181818 0%,
            #151515 100%
        );

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: var(--radius-md);

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.equipment-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(215, 25, 32, 0.32);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.24);
}


/* =========================================================
   9. PRODUCT VISUAL
   ========================================================= */

.equipment-card__visual {
    position: relative;

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

    flex: 0 0 42%;

    min-height: 320px;

    padding: 1.5rem;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(255, 255, 255, 0.075) 0%,
            rgba(255, 255, 255, 0.018) 20%,
            rgba(255, 255, 255, 0) 48%
        ),
        linear-gradient(
            135deg,
            #4a1217 0%,
            #65181e 34%,
            #741b21 55%,
            #3b0f13 100%
        );
}

.equipment-card__visual::after {
    content: "";

    position: absolute;

    right: -70px;
    bottom: -70px;

    width: 180px;
    height: 180px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   10. PRODUCT IMAGE
   ========================================================= */

.equipment-card__image {
    position: relative;
    z-index: 1;

    display: block;

    width: auto;
    height: auto;

    max-width: 92%;
    max-height: 245px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 16px 20px rgba(0, 0, 0, 0.25)
        );

    transition:
        transform var(--transition-base);
}

.equipment-card:hover .equipment-card__image {
    transform: scale(1.025);
}


/* =========================================================
   11. PLACEHOLDER
   ========================================================= */

.equipment-card__placeholder {
    position: relative;
    z-index: 1;

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

    width: 100%;
    min-height: 170px;

    padding: 1rem;

    color: rgba(255, 255, 255, 0.58);

    border:
        1px dashed rgba(255, 255, 255, 0.14);

    border-radius: var(--radius-sm);

    text-align: center;
}

.equipment-card__placeholder span {
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.3;

    letter-spacing: -0.01em;
}


/* =========================================================
   12. FEATURED BADGE
   ========================================================= */

.equipment-card__badge {
    position: absolute;

    top: 1rem;
    left: 1rem;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding:
        0.35rem
        0.55rem;

    color: var(--color-white);

    background:
        rgba(17, 17, 17, 0.82);

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: var(--radius-sm);

    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* =========================================================
   13. CARD CONTENT
   ========================================================= */

.equipment-card__content {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;

    min-width: 0;

    padding:
        clamp(1.35rem, 2vw, 1.8rem);
}

.equipment-card__manufacturer {
    margin-bottom: var(--space-2);

    color: var(--color-red);

    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1.3;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.equipment-card__title {
    margin-bottom: var(--space-2);

    color: var(--color-white);

    font-size:
        clamp(
            1.35rem,
            1.8vw,
            1.75rem
        );

    font-weight: 780;
    line-height: 1.15;

    letter-spacing: -0.03em;
}

.equipment-card__name {
    margin-bottom: var(--space-4);

    color: rgba(255, 255, 255, 0.78);

    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.5;
}

.equipment-card__summary {
    margin-bottom: var(--space-5);

    color: rgba(255, 255, 255, 0.54);

    font-size: 0.8rem;
    line-height: 1.65;
}


/* =========================================================
   14. CATEGORY TAGS
   ========================================================= */

.equipment-card__categories {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.45rem;

    margin-bottom: var(--space-5);
}

.equipment-card__category {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding:
        0.3rem
        0.55rem;

    color: rgba(255, 255, 255, 0.58);

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: var(--radius-sm);

    font-size: 0.63rem;
    font-weight: 650;
    line-height: 1.25;
}


/* =========================================================
   15. CARD ACTIONS
   ========================================================= */

.equipment-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        0.7rem
        1.15rem;

    margin-top: auto;
}


/* View Details */

.equipment-card__details {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    min-height: 36px;

    padding:
        0.5rem
        0.8rem;

    color: var(--color-white);

    background:
        rgba(215, 25, 32, 0.10);

    border:
        1px solid rgba(215, 25, 32, 0.34);

    border-radius: var(--radius-sm);

    font-size: 0.75rem;
    font-weight: 750;
    line-height: 1.3;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.equipment-card__details > span {
    color: var(--color-red);

    transition:
        transform var(--transition-fast);
}

.equipment-card__details:hover,
.equipment-card__details:focus-visible {
    color: var(--color-white);

    background: var(--color-red);
    border-color: var(--color-red);

    transform: translateY(-1px);
}

.equipment-card__details:hover > span,
.equipment-card__details:focus-visible > span {
    color: var(--color-white);

    transform: translateX(3px);
}


/* Rental Enquiry */

.equipment-card__enquire {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    padding-bottom: 0.15rem;

    color: rgba(255, 255, 255, 0.72);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.16);

    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.equipment-card__enquire > span {
    color: var(--color-red);

    transition:
        transform var(--transition-fast);
}

.equipment-card__enquire:hover,
.equipment-card__enquire:focus-visible {
    color: var(--color-white);

    border-color: var(--color-red);
}

.equipment-card__enquire:hover > span,
.equipment-card__enquire:focus-visible > span {
    transform: translateX(4px);
}

/* =========================================================
   16. EMPTY RESULT
   ========================================================= */

.equipment-catalog__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    max-width: 700px;

    padding:
        clamp(2rem, 4vw, 3rem);

    background: #171717;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: var(--radius-md);
}

.equipment-catalog__empty h3 {
    margin-bottom: var(--space-3);

    color: var(--color-white);
}

.equipment-catalog__empty p {
    margin-bottom: var(--space-6);

    color: rgba(255, 255, 255, 0.58);

    line-height: 1.7;
}


/* =========================================================
   17. MID DESKTOP
   ========================================================= */

@media (max-width: 1250px) {

    .equipment-catalog__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   18. TABLET
   ========================================================= */

@media (max-width: 850px) {

    .equipment-catalog__heading {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-3);
    }

    .equipment-card__visual {
        flex-basis: 40%;

        min-height: 285px;
    }

}


/* =========================================================
   19. MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .equipment-catalog__intro {
        padding-top: 3.75rem;
        padding-bottom: 3.5rem;
    }

    .equipment-catalog__page-title {
        font-size:
            clamp(
                2.35rem,
                11vw,
                3.2rem
            );
    }

    .equipment-catalog__filters {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .equipment-catalog__filter-list {
        gap: 0.5rem;
    }

    .equipment-catalog__filter-link {
        min-height: 36px;

        padding:
            0.5rem
            0.75rem;

        font-size: 0.7rem;
    }

    .equipment-catalog__grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   20. SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .equipment-card {
        flex-direction: column;
    }

    .equipment-card__visual {
        flex: none;

        width: 100%;
        min-height: 220px;
    }

    .equipment-card__image {
        max-height: 175px;
    }

    .equipment-card__content {
        padding: 1.35rem;
    }

}


/* =========================================================
   21. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .equipment-catalog__filter-link {
        width: 100%;
    }

}