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

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

   Purpose:
   - Individual equipment detail page
   - Breadcrumb
   - Product hero
   - Application tags
   - Rental information blocks
   - Closing CTA
   - Responsive behaviour

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


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

.equipment-detail {
    width: 100%;

    color: var(--color-white);

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


/* =========================================================
   2. BREADCRUMB
   ========================================================= */

.equipment-detail__breadcrumb {
    background: #0b0b0b;

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

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

    gap: 0.55rem;

    min-height: 56px;

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

    font-size: 0.72rem;
    line-height: 1.4;
}

.equipment-breadcrumb a {
    color: rgba(255, 255, 255, 0.67);

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

.equipment-breadcrumb a:hover,
.equipment-breadcrumb a:focus-visible {
    color: var(--color-red);
}

.equipment-breadcrumb [aria-current="page"] {
    color: rgba(255, 255, 255, 0.42);
}


/* =========================================================
   3. PRODUCT HERO
   ========================================================= */

.equipment-detail__hero {
    position: relative;

    overflow: hidden;

    padding-top: clamp(3rem, 5vw, 5rem);
    padding-bottom: clamp(3.5rem, 6vw, 5.5rem);

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(215, 25, 32, 0.10) 0%,
            rgba(215, 25, 32, 0.03) 30%,
            rgba(215, 25, 32, 0) 64%
        ),
        linear-gradient(
            120deg,
            #0c0c0c 0%,
            #111111 55%,
            #171717 100%
        );
}

.equipment-detail__hero-grid {
    display: grid;

    grid-template-columns:
        minmax(380px, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(2.5rem, 5vw, 6rem);
}


/* =========================================================
   4. PRODUCT VISUAL
   ========================================================= */

.equipment-detail__visual {
    position: relative;

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

    min-height: 500px;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.025) 20%,
            rgba(255, 255, 255, 0) 45%
        ),
        linear-gradient(
            135deg,
            #471216 0%,
            #60171c 32%,
            #761b21 54%,
            #3a0f13 82%,
            #27090c 100%
        );

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

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

    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.24);
}

.equipment-detail__visual::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            130deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.012) 26%,
            rgba(255, 255, 255, 0) 26.3%,
            rgba(255, 255, 255, 0) 100%
        );

    pointer-events: none;
}

.equipment-detail__visual-accent {
    position: absolute;

    right: -85px;
    bottom: -85px;

    width: 230px;
    height: 230px;

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

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   5. PRODUCT IMAGE
   ========================================================= */

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

    display: block;

    width: auto;
    height: auto;

    max-width: 88%;
    max-height: 390px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 22px 26px rgba(0, 0, 0, 0.30)
        );
}


/* =========================================================
   6. PLACEHOLDER
   ========================================================= */

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

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

    gap: var(--space-3);

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

    padding: 2rem;

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

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

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

    text-align: center;
}

.equipment-detail__placeholder-brand {
    color: rgba(255, 255, 255, 0.46);

    font-size: 0.72rem;
    font-weight: 800;

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

.equipment-detail__placeholder strong {
    color: var(--color-white);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.6rem
        );

    line-height: 1.1;
}


/* =========================================================
   7. PRODUCT CONTENT
   ========================================================= */

.equipment-detail__content {
    max-width: 720px;
}

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

    color: var(--color-red);

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

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

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

    color: var(--color-white);

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

    font-weight: 820;
    line-height: 0.98;

    letter-spacing: -0.055em;
}

.equipment-detail__name {
    max-width: 620px;

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

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

    font-size:
        clamp(
            1.05rem,
            1.6vw,
            1.35rem
        );

    font-weight: 650;
    line-height: 1.45;
}

.equipment-detail__summary {
    max-width: 650px;

    margin-bottom: var(--space-7, 1.75rem);

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

    font-size: 0.95rem;
    line-height: 1.75;
}


/* =========================================================
   8. APPLICATION TAGS
   ========================================================= */

.equipment-detail__applications {
    margin-top: var(--space-6);
    margin-bottom: var(--space-8);
}

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

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

    font-size: 0.68rem;
    font-weight: 800;

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

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

    gap: 0.6rem;
}

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

    min-height: 34px;

    padding:
        0.45rem
        0.75rem;

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

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

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

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

    font-size: 0.7rem;
    font-weight: 650;

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

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

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

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


/* =========================================================
   9. ACTIONS
   ========================================================= */

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

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

.equipment-detail__quote,
.equipment-detail__back {
    min-height: 50px;

    padding-inline: 1.5rem;
}


/* =========================================================
   10. RENTAL INFORMATION
   ========================================================= */

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

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

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

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

.equipment-detail__info-grid {
    display: grid;

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

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


/* =========================================================
   11. INFO ITEM
   ========================================================= */

.equipment-detail__info-item {
    display: flex;
    align-items: flex-start;

    gap: var(--space-5);

    min-height: 210px;

    padding:
        clamp(1.5rem, 2.5vw, 2rem);

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

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

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

.equipment-detail__info-number {
    flex: 0 0 auto;

    color: rgba(215, 25, 32, 0.42);

    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -0.05em;
}

.equipment-detail__info-item h2 {
    margin-bottom: var(--space-3);

    color: var(--color-white);

    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.35;
}

.equipment-detail__info-item p {
    margin: 0;

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

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


/* =========================================================
   12. CLOSING CTA
   ========================================================= */

.equipment-detail__cta {
    padding-top: clamp(3.5rem, 5vw, 5rem);
    padding-bottom: clamp(3.5rem, 5vw, 5rem);

    background: #0c0c0c;
}

.equipment-detail__cta-inner {
    position: relative;

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

    gap: clamp(2rem, 5vw, 5rem);

    padding:
        clamp(2.5rem, 4vw, 4rem);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0) 36%
        ),
        linear-gradient(
            120deg,
            #2b0b0e 0%,
            #511319 35%,
            #721a20 58%,
            #3a0e12 100%
        );

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

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

.equipment-detail__cta-inner::after {
    content: "";

    position: absolute;

    right: -100px;
    bottom: -125px;

    width: 280px;
    height: 280px;

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

    border-radius: 50%;

    pointer-events: none;
}

.equipment-detail__cta-inner > * {
    position: relative;
    z-index: 1;
}

.equipment-detail__cta-eyebrow {
    margin-bottom: var(--space-3);

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

    font-size: 0.68rem;
    font-weight: 800;

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

.equipment-detail__cta h2 {
    max-width: 720px;

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

    color: var(--color-white);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.8rem
        );

    line-height: 1.1;
}

.equipment-detail__cta p {
    max-width: 650px;

    margin: 0;

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

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

.equipment-detail__cta-button {
    flex: 0 0 auto;

    min-width: 180px;
}


/* =========================================================
   13. NOT FOUND
   ========================================================= */

.equipment-detail--not-found {
    min-height: 60vh;

    display: flex;
    align-items: center;

    padding-top: 5rem;
    padding-bottom: 5rem;
}

.equipment-detail__not-found {
    max-width: 650px;
}

.equipment-detail__not-found h1 {
    margin-bottom: var(--space-4);

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

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

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

    line-height: 1.7;
}


/* =========================================================
   14. TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .equipment-detail__hero-grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .equipment-detail__visual {
        min-height: 420px;
    }

    .equipment-detail__content {
        max-width: 760px;
    }

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

    .equipment-detail__info-item {
        min-height: 0;
    }

}


/* =========================================================
   15. MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .equipment-detail__hero {
        padding-top: 2.5rem;
        padding-bottom: 3.5rem;
    }

    .equipment-detail__visual {
        min-height: 320px;

        padding: 2rem;
    }

    .equipment-detail__image {
        max-width: 90%;
        max-height: 250px;
    }

    .equipment-detail__model {
        font-size:
            clamp(
                2.6rem,
                13vw,
                3.8rem
            );
    }

    .equipment-detail__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .equipment-detail__quote,
    .equipment-detail__back {
        width: 100%;
    }

    .equipment-detail__cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .equipment-detail__cta-button {
        width: 100%;
    }

}


/* =========================================================
   16. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .equipment-detail__visual {
        min-height: 270px;

        padding: 1.5rem;
    }

    .equipment-detail__image {
        max-height: 210px;
    }

    .equipment-detail__info-item {
        flex-direction: column;

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

    .equipment-detail__cta-inner {
        padding:
            2rem
            1.4rem;
    }

}