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

   File:
   /assets/css/home/latest.css

   Purpose:
   - Homepage "Latest From MegVolt"
   - Editorial featured + secondary story layout
   - Horizontal featured story
   - Dark section styling
   - Metallic red equipment visual panels
   - Responsive behaviour

   Dependencies:
   - /assets/css/main.css
   - /modules/home/latest.php
   ========================================================= */


/* =========================================================
   1. SECTION
   ========================================================= */

.home-latest {
    width: 100%;

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

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

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

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


/* =========================================================
   2. SECTION HEADER
   ========================================================= */

.home-latest__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-8);

    margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.home-latest__title {
    margin-bottom: 0;

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

.home-latest .section-eyebrow {
    color: var(--color-red);
}

.home-latest__view-all {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    flex: 0 0 auto;

    padding-bottom: 0.2rem;

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

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

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

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

.home-latest__view-all span {
    color: var(--color-red);

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

.home-latest__view-all:hover,
.home-latest__view-all:focus-visible {
    color: var(--color-white);
    border-color: var(--color-red);
}

.home-latest__view-all:hover span,
.home-latest__view-all:focus-visible span {
    transform: translateX(3px);
}


/* =========================================================
   3. EDITORIAL GRID
   ========================================================= */

.home-latest__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(320px, 0.9fr);

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

    align-items: stretch;
}


/* =========================================================
   4. FEATURED STORY
   ========================================================= */

.home-latest__featured {
    display: flex;
    min-width: 0;
}

.home-latest__featured-link {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.9fr)
        minmax(0, 1.1fr);

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

    overflow: hidden;

    background: #171717;

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

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

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

.home-latest__featured-link:hover {
    border-color:
        rgba(215, 25, 32, 0.30);

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

    transform: translateY(-3px);
}


/* =========================================================
   5. FEATURED VISUAL
   ========================================================= */

.home-latest__featured-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
	order: 2;
    min-height: 100%;
    padding: 1.9rem 1.6rem;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 54% 50%,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.02) 18%,
            rgba(255, 255, 255, 0) 45%
        ),
        linear-gradient(
            135deg,
            #461317 0%,
            #5d171c 26%,
            #711a20 48%,
            #3e1014 76%,
            #2a0b0e 100%
        );
}

.home-latest__featured-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.015) 28%,
            rgba(255, 255, 255, 0) 28.3%,
            rgba(255, 255, 255, 0) 100%
        );

    pointer-events: none;
}

.home-latest__featured-visual::after {
    content: "";

    position: absolute;

    right: -50px;
    bottom: -50px;

    width: 180px;
    height: 180px;

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

    border-radius: 50%;
}

.home-latest__featured-image {
    position: relative;
    z-index: 1;

    width: auto;
    height: auto;

    max-width: 85%;
    max-height: 240px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 18px 22px rgba(0, 0, 0, 0.22)
        );

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

.home-latest__featured-link:hover .home-latest__featured-image {
    transform: scale(1.025);
}


/* =========================================================
   6. FEATURED CONTENT
   ========================================================= */

.home-latest__featured-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
	order: 1;
    padding:
        clamp(1.5rem, 2.3vw, 2rem);

    background: #171717;
}

.home-latest__type {
    display: inline-block;

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

    color: var(--color-red);

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

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

.home-latest__featured-title {
    margin-bottom: var(--space-4);

    color: var(--color-white);

    font-size:
        clamp(
            1.55rem,
            2vw,
            2rem
        );

    font-weight: 760;
    line-height: 1.18;

    letter-spacing: -0.025em;
}

.home-latest__summary {
    margin-bottom: var(--space-5);

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

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


/* =========================================================
   7. READ MORE
   ========================================================= */

.home-latest__read-more {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    color: var(--color-white);

    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.4;
}

.home-latest__read-more > span {
    color: var(--color-red);

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

.home-latest__featured-link:hover .home-latest__read-more > span,
.home-latest__story-link:hover .home-latest__read-more > span {
    transform: translateX(4px);
}


/* =========================================================
   8. SECONDARY STORIES
   ========================================================= */

.home-latest__secondary {
    display: grid;

    grid-template-rows:
        repeat(2, minmax(0, 1fr));

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

    height: 100%;
}

.home-latest__story {
    min-width: 0;
}

.home-latest__story-link {
    display: grid;

    grid-template-columns:
        130px
        minmax(0, 1fr);

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

    overflow: hidden;

    background: #171717;

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

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

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

.home-latest__story-link:hover {
    border-color:
        rgba(215, 25, 32, 0.28);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.20);

    transform: translateY(-2px);
}


/* =========================================================
   9. SECONDARY VISUAL
   ========================================================= */

.home-latest__story-visual {
    position: relative;

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

    min-height: 150px;

    padding: 1rem;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 54% 50%,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.02) 18%,
            rgba(255, 255, 255, 0) 42%
        ),
        linear-gradient(
            135deg,
            #4b1317 0%,
            #62181d 34%,
            #741b21 58%,
            #321013 100%
        );
}

.home-latest__story-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.045) 0%,
            rgba(255, 255, 255, 0.012) 30%,
            rgba(255, 255, 255, 0) 30.3%,
            rgba(255, 255, 255, 0) 100%
        );

    pointer-events: none;
}

.home-latest__story-image {
    position: relative;
    z-index: 1;

    width: auto;
    height: auto;

    max-width: 90%;
    max-height: 105px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 10px 14px rgba(0, 0, 0, 0.18)
        );

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

.home-latest__story-link:hover .home-latest__story-image {
    transform: scale(1.03);
}


/* =========================================================
   10. SECONDARY CONTENT
   ========================================================= */

.home-latest__story-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding:
        1.1rem
        1.2rem;
}

.home-latest__story-title {
    margin-bottom: var(--space-3);

    color: var(--color-white);

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.18rem
        );

    font-weight: 740;
    line-height: 1.34;

    letter-spacing: -0.018em;
}

.home-latest__story-summary {
    margin-bottom: var(--space-4);

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

    font-size: 0.78rem;
    line-height: 1.6;
}

.home-latest__story-content .home-latest__read-more {
    margin-top: auto;
}


/* =========================================================
   11. MID DESKTOP
   ========================================================= */

@media (max-width: 1180px) {

    .home-latest__grid {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(290px, 0.8fr);
    }

    .home-latest__featured-link {
        grid-template-columns:
            minmax(240px, 0.85fr)
            minmax(0, 1.15fr);
    }

    .home-latest__featured-image {
        max-height: 210px;
    }

    .home-latest__story-link {
        grid-template-columns: 120px 1fr;
    }

    .home-latest__story-image {
        max-height: 95px;
    }

}


/* =========================================================
   12. TABLET
   ========================================================= */

@media (max-width: 920px) {

    .home-latest__grid {
        grid-template-columns: 1fr;
    }

    .home-latest__featured-link {
        min-height: 0;
    }

    .home-latest__secondary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: auto;

        height: auto;
    }

    .home-latest__story-link {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .home-latest__story-visual {
        min-height: 170px;
    }

    .home-latest__story-image {
        max-height: 120px;
    }

}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .home-latest {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }

    .home-latest__header {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-4);

        margin-bottom: 2.25rem;
    }

    .home-latest__featured-link {
        grid-template-columns: 1fr;
    }

    .home-latest__featured-visual {
        min-height: 220px;
	order: 1;
    }

    .home-latest__featured-image {
        max-width: 88%;
        max-height: 180px;
    }

    .home-latest__featured-content {
        padding: 1.35rem;
	order: 2;
    }

    .home-latest__featured-title {
        font-size: 1.45rem;
    }

    .home-latest__secondary {
        grid-template-columns: 1fr;
    }

    .home-latest__story-link {
        grid-template-columns:
            120px
            1fr;
    }

    .home-latest__story-visual {
        min-height: 135px;
    }

    .home-latest__story-image {
        max-height: 90px;
    }

}


/* =========================================================
   14. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .home-latest__story-link {
        grid-template-columns: 1fr;
    }

    .home-latest__story-visual {
        min-height: 165px;
    }

    .home-latest__story-image {
        max-height: 120px;
    }

    .home-latest__story-content {
        padding: 1.1rem;
    }

}