/* ==========================================================================
   DM STUDIO AI — STUDENT SHOWCASE FINAL V8
   --------------------------------------------------------------------------
   Clean Home redesign.
   Uses the existing HTML only.
   No PHP, JS or head.php changes required.
   ========================================================================== */


/* ==========================================================================
   HOME SHOWCASE SECTION
   ========================================================================== */

html body.route-home .dm-showcase-home {
    box-sizing: border-box !important;

    width: min(1180px, calc(100% - 40px)) !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 54px auto !important;
    padding: 34px !important;

    border: 1px solid rgba(96, 86, 214, 0.12) !important;
    border-radius: 28px !important;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(75, 201, 226, 0.12),
            transparent 26%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(108, 91, 239, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f9f8ff 0%,
            #f5f8ff 55%,
            #f2fbff 100%
        ) !important;

    box-shadow:
        0 24px 64px rgba(38, 46, 96, 0.08) !important;
}


/* --------------------------------------------------------------------------
   Heading area
   -------------------------------------------------------------------------- */

html body.route-home .dm-showcase-home-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 26px !important;

    margin: 0 0 30px !important;
}


html body.route-home .dm-showcase-kicker {
    margin-bottom: 10px !important;
}


html body.route-home .dm-showcase-home-heading h2 {
    max-width: 760px !important;

    margin: 0 !important;

    color: #11173f !important;

    font-size: clamp(2rem, 3.6vw, 3rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em !important;
}


html body.route-home
.dm-showcase-home-heading
p:not(.dm-showcase-kicker) {
    max-width: 680px !important;

    margin: 12px 0 0 !important;

    color: #66708c !important;

    font-size: 0.98rem !important;
    line-height: 1.6 !important;
}


html body.route-home .dm-showcase-home-button {
    min-height: 48px !important;

    padding: 12px 18px !important;

    border: 1px solid rgba(96, 82, 220, 0.14) !important;
    border-radius: 14px !important;

    background: rgba(255, 255, 255, 0.96) !important;
    color: #5847d8 !important;

    box-shadow:
        0 10px 26px rgba(48, 55, 118, 0.08) !important;

    font-weight: 900 !important;
    white-space: nowrap !important;
}


/* ==========================================================================
   RECENT WORK GRID
   ========================================================================== */

html body.route-home .dm-showcase-home-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;

    gap: 22px !important;

    width: 100% !important;
    margin: 0 !important;
}


/* Standard card: used when there are 2 or 3 recent works */
html body.route-home .dm-showcase-home-card {
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    flex: 0 1 31% !important;

    min-width: 260px !important;
    max-width: 340px !important;

    overflow: hidden !important;

    border: 1px solid rgba(82, 78, 160, 0.11) !important;
    border-radius: 22px !important;

    background: #ffffff !important;

    box-shadow:
        0 18px 44px rgba(34, 42, 89, 0.09) !important;
}


/* ==========================================================================
   ONE RECENT WORK — FEATURE IT PROPERLY
   ========================================================================== */

html body.route-home
.dm-showcase-home-grid
> .dm-showcase-home-card:only-child {
    display: grid !important;
    grid-template-columns: minmax(300px, 0.88fr) minmax(320px, 1.12fr) !important;
    align-items: stretch !important;

    flex: 0 1 780px !important;

    width: min(780px, 100%) !important;
    max-width: 780px !important;
    min-width: 0 !important;

    border-radius: 24px !important;
}


/* Featured image panel */
html body.route-home
.dm-showcase-home-grid
> .dm-showcase-home-card:only-child
.dm-showcase-home-media {
    height: 340px !important;
    min-height: 340px !important;

    padding: 18px !important;

    border-right:
        1px solid rgba(82, 78, 160, 0.08) !important;
}


/* Featured text panel */
html body.route-home
.dm-showcase-home-grid
> .dm-showcase-home-card:only-child
.dm-showcase-home-card-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    padding: 34px !important;
}


html body.route-home
.dm-showcase-home-grid
> .dm-showcase-home-card:only-child
.dm-showcase-home-card-copy small {
    font-size: 0.80rem !important;
}


html body.route-home
.dm-showcase-home-grid
> .dm-showcase-home-card:only-child
.dm-showcase-home-card-copy h3 {
    margin: 9px 0 8px !important;

    font-size: 1.45rem !important;
}


html body.route-home
.dm-showcase-home-grid
> .dm-showcase-home-card:only-child
.dm-showcase-home-card-copy p {
    max-width: 360px !important;

    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}


/* ==========================================================================
   STANDARD MEDIA FRAME
   ========================================================================== */

html body.route-home .dm-showcase-home-media {
    box-sizing: border-box !important;

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

    width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;

    padding: 14px !important;

    overflow: hidden !important;

    aspect-ratio: auto !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 255, 255, 0.98),
            rgba(244, 243, 255, 0.95) 60%,
            rgba(236, 248, 252, 0.94)
        ) !important;
}


html body.route-home .dm-showcase-home-media img,
html body.route-home .dm-showcase-home-media video {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    border: 0 !important;
    border-radius: 12px !important;

    background: #ffffff !important;

    box-shadow:
        0 12px 28px rgba(29, 36, 76, 0.11) !important;
}


html body.route-home .dm-showcase-home-card-copy {
    padding: 17px 18px 20px !important;
}


html body.route-home .dm-showcase-home-card-copy small {
    color: #6656dc !important;

    font-size: 0.76rem !important;
    font-weight: 900 !important;
}


html body.route-home .dm-showcase-home-card-copy h3 {
    margin: 6px 0 5px !important;

    color: #11173f !important;

    font-size: 1.08rem !important;
    line-height: 1.22 !important;
}


html body.route-home .dm-showcase-home-card-copy p {
    margin: 0 !important;

    color: #747c95 !important;

    font-size: 0.84rem !important;
    line-height: 1.5 !important;
}


/* ==========================================================================
   KEEP THE PUBLIC SHOWCASE LIGHTBOX FIX FROM V6
   ========================================================================== */

html body.route-showcase dialog#dm-showcase-lightbox {
    box-sizing: border-box !important;

    position: fixed !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    width: min(1100px, calc(100dvw - 40px)) !important;
    height: min(820px, calc(100dvh - 40px)) !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 22px !important;

    background: #0b1024 !important;

    box-shadow:
        0 40px 120px rgba(3, 7, 22, 0.58) !important;
}


html body.route-showcase dialog#dm-showcase-lightbox::backdrop {
    background: rgba(5, 9, 24, 0.84) !important;
    backdrop-filter: blur(10px) !important;
}


html body.route-showcase
dialog#dm-showcase-lightbox
.dm-showcase-lightbox-panel {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;
}


html body.route-showcase
dialog#dm-showcase-lightbox
.dm-showcase-lightbox-header {
    position: absolute !important;
    inset: 0 !important;

    z-index: 10 !important;

    display: block !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    pointer-events: none !important;
}


html body.route-showcase
dialog#dm-showcase-lightbox
.dm-showcase-lightbox-header > div {
    display: none !important;
}


html body.route-showcase
dialog#dm-showcase-lightbox
.dm-showcase-lightbox-help {
    display: none !important;
}


html body.route-showcase
dialog#dm-showcase-lightbox
.dm-showcase-lightbox-close {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    z-index: 20 !important;

    display: grid !important;
    place-items: center !important;

    width: 46px !important;
    height: 46px !important;

    padding: 0 !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 50% !important;

    background: rgba(14, 19, 43, 0.78) !important;
    color: #ffffff !important;

    pointer-events: auto !important;
    cursor: pointer !important;

    font-family: Arial, sans-serif !important;
    font-size: 1.65rem !important;
    line-height: 1 !important;
}


html body.route-showcase
dialog#dm-showcase-lightbox
.dm-showcase-lightbox-stage {
    box-sizing: border-box !important;

    position: absolute !important;
    inset: 0 !important;

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

    padding: 24px !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            #1b2343 0%,
            #12182f 58%,
            #0b1024 100%
        ) !important;
}


html body.route-showcase
dialog#dm-showcase-lightbox
.dm-showcase-lightbox-stage img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    border: 0 !important;
    border-radius: 14px !important;

    background: #ffffff !important;

    box-shadow:
        0 22px 66px rgba(0, 0, 0, 0.36) !important;
}


html.dm-showcase-lightbox-open,
body.dm-showcase-lightbox-open {
    overflow: hidden !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    html body.route-home .dm-showcase-home {
        width: calc(100% - 28px) !important;

        padding: 26px !important;
    }


    html body.route-home .dm-showcase-home-heading {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }


    html body.route-home .dm-showcase-home-button {
        justify-self: start !important;
    }


    html body.route-home
    .dm-showcase-home-grid
    > .dm-showcase-home-card:only-child {
        grid-template-columns: 1fr 1fr !important;

        width: 100% !important;
        max-width: 720px !important;
    }


    html body.route-showcase dialog#dm-showcase-lightbox {
        width: calc(100dvw - 20px) !important;
        height: calc(100dvh - 20px) !important;

        border-radius: 18px !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    html body.route-home .dm-showcase-home {
        width: calc(100% - 18px) !important;

        margin: 32px auto !important;
        padding: 18px 14px !important;

        border-radius: 22px !important;
    }


    html body.route-home .dm-showcase-home-heading {
        gap: 16px !important;
        margin-bottom: 18px !important;
    }


    html body.route-home .dm-showcase-home-heading h2 {
        font-size: clamp(1.75rem, 9vw, 2.35rem) !important;
    }


    html body.route-home .dm-showcase-home-button {
        width: 100% !important;
    }


    html body.route-home .dm-showcase-home-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 16px !important;
    }


    html body.route-home .dm-showcase-home-card,
    html body.route-home
    .dm-showcase-home-grid
    > .dm-showcase-home-card:only-child {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }


    html body.route-home
    .dm-showcase-home-grid
    > .dm-showcase-home-card:only-child
    .dm-showcase-home-media,
    html body.route-home .dm-showcase-home-media {
        height: 220px !important;
        min-height: 220px !important;

        padding: 10px !important;

        border-right: 0 !important;
    }


    html body.route-home
    .dm-showcase-home-grid
    > .dm-showcase-home-card:only-child
    .dm-showcase-home-card-copy {
        padding: 18px !important;
    }


    html body.route-showcase dialog#dm-showcase-lightbox {
        top: 0 !important;
        left: 0 !important;

        transform: none !important;

        width: 100dvw !important;
        height: 100dvh !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }


    html body.route-showcase
    dialog#dm-showcase-lightbox
    .dm-showcase-lightbox-stage {
        padding:
            max(58px, env(safe-area-inset-top))
            8px
            max(8px, env(safe-area-inset-bottom))
            8px !important;
    }


    html body.route-showcase
    dialog#dm-showcase-lightbox
    .dm-showcase-lightbox-close {
        top: max(10px, env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;

        width: 42px !important;
        height: 42px !important;
    }

}


/* ==========================================================================
   DM STUDIO AI — HOMEPAGE STUDENT SHOWCASE INTRO V8
   --------------------------------------------------------------------------
   Text-only premium celebration section.
   The actual student projects live on the dedicated Showcase page.
   ========================================================================== */

html body.route-home .dm-showcase-home-intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: min(1180px, calc(100% - 40px));
    margin: 72px auto;
    padding: clamp(58px, 7vw, 92px) clamp(28px, 7vw, 88px);

    border: 1px solid rgba(105, 91, 226, 0.14);
    border-radius: 34px;

    text-align: center;

    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(126, 103, 255, 0.16),
            transparent 31%
        ),
        radial-gradient(
            circle at 90% 82%,
            rgba(58, 198, 225, 0.16),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #fbfaff 0%,
            #f5f7ff 48%,
            #f1fbff 100%
        );

    box-shadow:
        0 30px 80px rgba(41, 48, 107, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}


/* Soft decorative shapes. */
html body.route-home .dm-showcase-home-glow {
    position: absolute;
    z-index: -1;

    display: block;

    border-radius: 50%;

    pointer-events: none;
}


html body.route-home .dm-showcase-home-glow-one {
    width: 320px;
    height: 320px;

    top: -190px;
    right: -105px;

    border: 1px solid rgba(106, 91, 232, 0.10);

    box-shadow:
        0 0 0 44px rgba(106, 91, 232, 0.025),
        0 0 0 90px rgba(67, 194, 224, 0.018);
}


html body.route-home .dm-showcase-home-glow-two {
    width: 220px;
    height: 220px;

    left: -115px;
    bottom: -120px;

    background:
        radial-gradient(
            circle,
            rgba(108, 91, 239, 0.13),
            transparent 68%
        );
}


/* Premium small label. */
html body.route-home .dm-showcase-home-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 0 0 20px;

    color: #6558df;

    font-size: 0.76rem;
    font-weight: 950;

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


html body.route-home .dm-showcase-home-eyebrow::before {
    content: "✦";

    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(111, 92, 244, 0.13),
            rgba(48, 191, 216, 0.12)
        );

    font-size: 0.74rem;
    letter-spacing: 0;
}


/* Main statement. */
html body.route-home .dm-showcase-home-intro h2 {
    max-width: 930px;

    margin: 0 auto;

    color: #11173f;

    font-size: clamp(2.8rem, 5.4vw, 5.15rem);
    font-weight: 850;

    line-height: 0.98;
    letter-spacing: -0.058em;

    text-wrap: balance;
}


/* Special words receive the premium gradient treatment. */
html body.route-home .dm-showcase-home-intro h2 span {
    display: block;

    margin-top: 8px;

    background:
        linear-gradient(
            90deg,
            #6b55ef 0%,
            #567cf1 52%,
            #31b8d6 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* Student celebration message. */
html body.route-home .dm-showcase-home-message {
    max-width: 820px;

    margin: 30px auto 0;

    color: #606a88;

    font-size: clamp(1.03rem, 1.55vw, 1.22rem);
    font-weight: 450;

    line-height: 1.82;

    text-wrap: pretty;
}


/* Strong single call-to-action. */
html body.route-home .dm-showcase-home-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 52px;

    margin-top: 38px;
    padding: 14px 24px;

    border: 1px solid rgba(93, 76, 220, 0.18);
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #6a57ee 0%,
            #557cf2 100%
        );

    color: #ffffff;

    box-shadow:
        0 16px 36px rgba(88, 73, 217, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);

    font-size: 0.96rem;
    font-weight: 900;

    text-decoration: none;

    transition:
        box-shadow 180ms ease,
        background 180ms ease;
}


html body.route-home .dm-showcase-home-cta:hover,
html body.route-home .dm-showcase-home-cta:focus-visible {
    background:
        linear-gradient(
            135deg,
            #604ce8 0%,
            #4773ec 100%
        );

    box-shadow:
        0 21px 44px rgba(88, 73, 217, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}


html body.route-home .dm-showcase-home-cta:focus-visible {
    outline: 3px solid rgba(99, 83, 225, 0.25);
    outline-offset: 4px;
}


/* Tablet. */
@media (max-width: 800px) {

    html body.route-home .dm-showcase-home-intro {
        width: calc(100% - 28px);

        margin: 54px auto;
        padding: 54px 28px;

        border-radius: 28px;
    }


    html body.route-home .dm-showcase-home-intro h2 {
        font-size: clamp(2.5rem, 9vw, 4rem);
    }

}


/* Mobile. */
@media (max-width: 600px) {

    html body.route-home .dm-showcase-home-intro {
        width: calc(100% - 20px);

        margin: 42px auto;
        padding: 44px 20px;

        border-radius: 25px;
    }


    html body.route-home .dm-showcase-home-eyebrow {
        margin-bottom: 17px;

        font-size: 0.68rem;
        letter-spacing: 0.16em;
    }


    html body.route-home .dm-showcase-home-intro h2 {
        font-size: clamp(2.15rem, 11vw, 3.25rem);

        line-height: 1.01;
    }


    html body.route-home .dm-showcase-home-message {
        margin-top: 24px;

        font-size: 1rem;
        line-height: 1.70;
    }


    html body.route-home .dm-showcase-home-cta {
        width: 100%;

        margin-top: 30px;
    }

}