/* ========================================================================== 
   DM STUDIO AI - STUDENT SHOWCASE
   Public gallery + staff selection/approval workspace.
   ========================================================================== */

:root {
    --showcase-ink: #111a49;
    --showcase-muted: #66708b;
    --showcase-border: #e5e8f6;
    --showcase-primary: #6254e8;
    --showcase-primary-dark: #4c3ed0;
    --showcase-cyan: #27bdd2;
    --showcase-soft: #f7f8ff;
    --showcase-shadow: 0 18px 50px rgba(34, 43, 90, .08);
}

body.route-showcase main,
body.route-showcase-manage main {
    background:
        radial-gradient(circle at 8% 32%, rgba(99, 81, 238, .08), transparent 28%),
        radial-gradient(circle at 92% 20%, rgba(39, 189, 210, .08), transparent 25%),
        #f5f7ff;
}

.dm-showcase-page,
.dm-showcase-manage {
    width: min(1180px, calc(100% - 40px));
    margin: 28px auto 80px;
    color: var(--showcase-ink);
}

.dm-showcase-hero,
.dm-showcase-manage-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 30px;
    align-items: center;
    overflow: hidden;
    padding: 46px;
    border: 1px solid rgba(98, 84, 232, .13);
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 0%, rgba(72, 202, 228, .18), transparent 38%),
        radial-gradient(circle at 8% 100%, rgba(98, 84, 232, .13), transparent 36%),
        linear-gradient(135deg, #f1efff 0%, #eefbff 100%);
    box-shadow: var(--showcase-shadow);
}

.dm-showcase-kicker,
.dm-showcase-admin-heading span {
    margin: 0 0 9px;
    color: #6659dc;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.dm-showcase-hero h1,
.dm-showcase-manage-hero h1 {
    margin: 0;
    max-width: 740px;
    font-size: clamp(2.45rem, 5vw, 4.35rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.dm-showcase-hero-copy > p:not(.dm-showcase-kicker),
.dm-showcase-manage-hero > div > p:not(.dm-showcase-kicker) {
    max-width: 700px;
    margin: 20px 0 0;
    color: var(--showcase-muted);
    font-size: 1.03rem;
    line-height: 1.7;
}

.dm-showcase-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.dm-showcase-hero-badges span {
    padding: 8px 12px;
    border: 1px solid rgba(98, 84, 232, .11);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    font-size: .78rem;
    font-weight: 800;
}

.dm-showcase-hero-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 260px;
    border-radius: 26px;
    background:
        radial-gradient(circle, rgba(255,255,255,.98) 0 12%, rgba(99,81,238,.20) 13% 14%, transparent 15% 28%, rgba(39,189,210,.17) 29% 30%, transparent 31%),
        linear-gradient(150deg, rgba(255,255,255,.78), rgba(235,245,255,.82));
}

.dm-showcase-star {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7767ff, #3f8bf2, #2ac4d5);
    color: #fff;
    font-size: 2.5rem;
    box-shadow: 0 18px 42px rgba(82, 70, 220, .28);
}

.dm-showcase-hero-art strong {
    margin-top: 15px;
    font-size: .86rem;
    letter-spacing: .2em;
}

.dm-showcase-hero-art small {
    margin-top: 4px;
    color: var(--showcase-muted);
    font-size: .65rem;
    letter-spacing: .14em;
}

.dm-showcase-orbit {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(33, 42, 90, .12);
    font-size: 1.2rem;
}

.dm-showcase-orbit--one { top: 28px; left: 42px; }
.dm-showcase-orbit--two { top: 42px; right: 34px; }
.dm-showcase-orbit--three { bottom: 31px; right: 58px; }

.dm-showcase-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0;
    padding: 12px;
    border: 1px solid var(--showcase-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(34, 43, 90, .05);
}

.dm-showcase-filters a {
    padding: 10px 15px;
    border-radius: 12px;
    color: var(--showcase-muted);
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
    justify-self: center;
    width: max-content;
}

.dm-showcase-filters a:hover,
.dm-showcase-filters a:focus-visible,
.dm-showcase-filters a.is-active {
    background: #f0efff;
    color: #5445dc;
}

.dm-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.dm-showcase-card {
    overflow: hidden;
    border: 1px solid var(--showcase-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--showcase-shadow);
}

.dm-showcase-media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #f0efff, #eefbff);
}

.dm-showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-showcase-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #080b16;
}

.dm-showcase-file-preview {
    display: grid;
    place-items: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    color: var(--showcase-ink);
    text-decoration: none;
}

.dm-showcase-file-preview span { font-size: 3rem; }
.dm-showcase-file-preview strong { font-size: 1rem; }
.dm-showcase-file-preview small { color: var(--showcase-muted); }

.dm-showcase-category,
.dm-showcase-featured {
    position: absolute;
    top: 13px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 6px 18px rgba(25, 32, 70, .10);
    font-size: .69rem;
    font-weight: 900;
}

.dm-showcase-category { left: 13px; color: #5143d2; }
.dm-showcase-featured { right: 13px; color: #a3680b; }

.dm-showcase-card-body { padding: 20px; }

.dm-showcase-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    color: #6d7390;
    font-size: .72rem;
    font-weight: 800;
}

.dm-showcase-card-meta span + span::before {
    content: "•";
    margin-right: 7px;
}

.dm-showcase-card h2 {
    margin: 10px 0 7px;
    font-size: 1.2rem;
    line-height: 1.22;
}

.dm-showcase-card p {
    margin: 0;
    color: var(--showcase-muted);
    line-height: 1.6;
    font-size: .88rem;
}

.dm-showcase-year {
    display: inline-block;
    margin-top: 12px;
    color: #6c5dde;
    font-weight: 800;
}

.dm-showcase-empty {
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 42px;
    border: 1px dashed #dcdff2;
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    text-align: center;
}

.dm-showcase-empty span { font-size: 2.4rem; }
.dm-showcase-empty h2,
.dm-showcase-empty h3 { margin: 12px 0 5px; }
.dm-showcase-empty p { max-width: 600px; margin: 0; color: var(--showcase-muted); line-height: 1.6; }
.dm-showcase-empty--compact { min-height: 180px; }

.dm-showcase-privacy-note {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 22px;
    border: 1px solid #dfe5f4;
    border-radius: 18px;
    background: rgba(255,255,255,.75);
}

.dm-showcase-privacy-note > span { font-size: 1.5rem; }
.dm-showcase-privacy-note p { margin: 4px 0 0; color: var(--showcase-muted); }

/* Homepage preview --------------------------------------------------------- */

body.route-home .dm-showcase-home {
    position: relative;
    width: min(1180px, calc(100% - 40px));
    margin: 58px auto;
    padding: 38px;
    overflow: hidden;
    border: 1px solid rgba(98, 84, 232, .12);
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 10%, rgba(39,189,210,.14), transparent 28%),
        radial-gradient(circle at 10% 90%, rgba(98,84,232,.12), transparent 30%),
        linear-gradient(135deg, #f6f4ff, #f0fbff);
    box-shadow: var(--showcase-shadow);
}

.dm-showcase-home-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.dm-showcase-home-heading h2 {
    margin: 3px 0 0;
    color: var(--showcase-ink);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: -.035em;
}

.dm-showcase-home-heading p:not(.dm-showcase-kicker) {
    max-width: 650px;
    margin: 9px 0 0;
    color: var(--showcase-muted);
    line-height: 1.6;
}

.dm-showcase-home-button,
.dm-showcase-manage-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 17px;
    border: 1px solid rgba(98,84,232,.16);
    border-radius: 12px;
    background: #fff;
    color: #5143d2;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.dm-showcase-home-button:hover,
.dm-showcase-home-button:focus-visible { background: #efedff; }

.dm-showcase-home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.dm-showcase-home-card {
    overflow: hidden;
    border: 1px solid rgba(100, 90, 190, .11);
    border-radius: 19px;
    background: rgba(255,255,255,.90);
}

.dm-showcase-home-media {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #eceaff, #eafaff);
}

.dm-showcase-home-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-showcase-home-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #080b16;
}

.dm-showcase-home-card-copy { padding: 16px; }
.dm-showcase-home-card-copy small { color: #6659dc; font-weight: 900; }
.dm-showcase-home-card-copy h3 { margin: 7px 0 4px; color: var(--showcase-ink); }
.dm-showcase-home-card-copy p { margin: 0; color: var(--showcase-muted); font-size: .82rem; }

.dm-showcase-home-empty {
    grid-column: 1 / -1;
    padding: 32px;
    border: 1px dashed #d7dcf0;
    border-radius: 18px;
    background: rgba(255,255,255,.66);
    text-align: center;
    color: var(--showcase-muted);
}

/* Management -------------------------------------------------------------- */

.dm-showcase-manage-hero {
    grid-template-columns: minmax(0, 1fr) auto;
}

.dm-showcase-manage-actions {
    display: grid;
    gap: 10px;
}

.dm-showcase-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 20px 0;
}

.dm-showcase-stats article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--showcase-border);
    border-radius: 18px;
    background: #fff;
}

.dm-showcase-stats article > span { grid-row: 1 / 3; font-size: 1.4rem; }
.dm-showcase-stats strong { font-size: 1.5rem; }
.dm-showcase-stats small { color: var(--showcase-muted); }

.dm-showcase-message {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 13px;
    font-weight: 800;
}
.dm-showcase-message--success { background: #ebfaf3; color: #176842; border: 1px solid #cceede; }
.dm-showcase-message--error { background: #fff0f2; color: #a53b50; border: 1px solid #f2cfd6; }

.dm-showcase-admin-section {
    margin-top: 20px;
    padding: 26px;
    border: 1px solid var(--showcase-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--showcase-shadow);
}

.dm-showcase-admin-heading h2 { margin: 4px 0; }
.dm-showcase-admin-heading p { margin: 0; color: var(--showcase-muted); }

.dm-showcase-candidate-list { display: grid; gap: 16px; margin-top: 20px; }
.dm-showcase-candidate {
    display: grid;
    grid-template-columns: minmax(250px, .85fr) minmax(360px, 1.15fr);
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--showcase-border);
    border-radius: 18px;
    background: var(--showcase-soft);
}

.dm-showcase-candidate-info { display: flex; gap: 13px; align-items: flex-start; }
.dm-showcase-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, #6958ee, #2bbcd1);
    color: #fff;
    font-weight: 900;
}

.dm-showcase-candidate-student { color: #6558d8; font-size: .75rem; font-weight: 900; }
.dm-showcase-candidate h3 { margin: 4px 0; }
.dm-showcase-candidate p { margin: 0 0 8px; color: var(--showcase-muted); }
.dm-showcase-candidate a,
.dm-showcase-manage-links a { color: #5143d2; font-size: .82rem; font-weight: 900; }

.dm-showcase-select-form { display: grid; gap: 12px; }
.dm-showcase-select-form label { display: grid; gap: 6px; color: #39415e; font-size: .78rem; font-weight: 900; }
.dm-showcase-select-form label small { font-weight: 600; color: var(--showcase-muted); }
.dm-showcase-select-form input,
.dm-showcase-select-form textarea,
.dm-showcase-select-form select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #dfe3f1;
    border-radius: 11px;
    background: #fff;
    color: var(--showcase-ink);
    font: inherit;
}

.dm-showcase-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dm-showcase-select-form button,
.dm-showcase-manage-controls button {
    min-height: 42px;
    padding: 10px 14px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #6655ed, #4c7cf1);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.dm-showcase-manage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.dm-showcase-manage-card {
    padding: 19px;
    border: 1px solid var(--showcase-border);
    border-radius: 17px;
    background: var(--showcase-soft);
}

.dm-showcase-manage-card-top { display: flex; justify-content: space-between; gap: 8px; }
.dm-showcase-status,
.dm-showcase-featured-chip { padding: 6px 9px; border-radius: 999px; font-size: .69rem; font-weight: 900; }
.dm-showcase-status--pending { background: #fff3d8; color: #986315; }
.dm-showcase-status--approved { background: #dcf7e9; color: #23704d; }
.dm-showcase-status--rejected { background: #ffe5e9; color: #a74053; }
.dm-showcase-featured-chip { background: #eeeaff; color: #5948d6; }
.dm-showcase-manage-card h3 { margin: 13px 0 5px; }
.dm-showcase-manage-card > p { color: var(--showcase-muted); line-height: 1.55; }
.dm-showcase-manage-meta { font-size: .78rem; }
.dm-showcase-manage-links { display: flex; gap: 14px; margin: 12px 0; }
.dm-showcase-manage-controls { display: grid; gap: 8px; margin-top: 14px; }
.dm-showcase-manage-controls form { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.dm-showcase-manage-controls button.is-reject { background: #f0a834; }
.dm-showcase-manage-controls button.is-delete { background: #d94c61; }
.dm-showcase-feature-check { display: inline-flex; gap: 6px; align-items: center; font-size: .76rem; font-weight: 800; color: var(--showcase-muted); }

@media (max-width: 900px) {
    .dm-showcase-hero,
    .dm-showcase-manage-hero,
    .dm-showcase-candidate { grid-template-columns: 1fr; }
    .dm-showcase-grid,
    .dm-showcase-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dm-showcase-manage-grid { grid-template-columns: 1fr; }
    .dm-showcase-manage-actions { display: flex; flex-wrap: wrap; }
}

@media (max-width: 640px) {
    .dm-showcase-page,
    .dm-showcase-manage,
    body.route-home .dm-showcase-home { width: min(100% - 24px, 1180px); }
    .dm-showcase-hero,
    .dm-showcase-manage-hero,
    body.route-home .dm-showcase-home { padding: 24px 20px; border-radius: 21px; }
    .dm-showcase-hero-art { min-height: 210px; }
    .dm-showcase-grid,
    .dm-showcase-home-grid,
    .dm-showcase-stats,
    .dm-showcase-form-grid { grid-template-columns: 1fr; }
    .dm-showcase-home-heading { display: block; }
    .dm-showcase-home-button { margin-top: 16px; }
    .dm-showcase-admin-section { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .dm-showcase-page *,
    .dm-showcase-manage *,
    .dm-showcase-home * { scroll-behavior: auto !important; transition: none !important; }
}

.dm-showcase-staff-link {
    display: inline-flex;
    margin-top: 18px;
    padding: 11px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6655ed, #4f82ef);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(84, 67, 210, .20);
}

.dm-showcase-staff-link:hover,
.dm-showcase-staff-link:focus-visible {
    filter: brightness(1.06);
    color: #fff;
}
/* ==========================================================================
   DM STUDIO AI — STUDENT SHOWCASE PREMIUM PUBLIC GALLERY V2
   --------------------------------------------------------------------------
   Goals:
   - Preserve the complete student artwork (NO cropping).
   - Give public Showcase cards a more premium gallery / portfolio finish.
   - Keep the existing staff management workspace unchanged.
   - Keep the layout accessible and responsive.
   ========================================================================== */


/* --------------------------------------------------------------------------
   PUBLIC SHOWCASE CANVAS
   -------------------------------------------------------------------------- */

body.route-showcase main {
    position: relative;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(111, 92, 244, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 86% 12%,
            rgba(45, 194, 216, 0.11),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #f8f9ff 0%,
            #f4f7ff 52%,
            #f7f9ff 100%
        );
}

body.route-showcase main::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.38;
    background-image:
        linear-gradient(
            rgba(84, 74, 188, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(84, 74, 188, 0.025) 1px,
            transparent 1px
        );
    background-size: 34px 34px;
}

body.route-showcase .dm-showcase-page {
    position: relative;
    z-index: 1;
    width: min(1240px, calc(100% - 40px));
    margin-top: 30px;
}


/* --------------------------------------------------------------------------
   PREMIUM HERO
   -------------------------------------------------------------------------- */

body.route-showcase .dm-showcase-hero {
    min-height: 380px;
    padding: clamp(34px, 5vw, 58px);
    gap: clamp(28px, 5vw, 58px);

    border: 1px solid rgba(101, 87, 225, 0.12);
    border-radius: 32px;

    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(72, 205, 228, 0.22),
            transparent 34%
        ),
        radial-gradient(
            circle at 8% 96%,
            rgba(112, 92, 246, 0.17),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(247, 245, 255, 0.98) 0%,
            rgba(242, 247, 255, 0.98) 52%,
            rgba(239, 252, 255, 0.98) 100%
        );

    box-shadow:
        0 30px 80px rgba(29, 37, 89, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body.route-showcase .dm-showcase-hero::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -90px;
    top: -120px;
    border-radius: 50%;
    border: 1px solid rgba(111, 94, 238, 0.10);
    box-shadow:
        0 0 0 38px rgba(111, 94, 238, 0.025),
        0 0 0 76px rgba(44, 194, 216, 0.018);
    pointer-events: none;
}

body.route-showcase .dm-showcase-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #6555df;
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.18em;
}

body.route-showcase .dm-showcase-kicker::before {
    content: "✦";
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 9px;
    background:
        linear-gradient(
            135deg,
            rgba(111, 92, 244, 0.13),
            rgba(43, 190, 214, 0.12)
        );
    font-size: 0.72rem;
}

body.route-showcase .dm-showcase-hero h1 {
    max-width: 770px;
    font-size: clamp(2.7rem, 5.3vw, 4.8rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

body.route-showcase .dm-showcase-hero-copy > p:not(.dm-showcase-kicker) {
    max-width: 720px;
    margin-top: 22px;
    color: #5f6987;
    font-size: 1.05rem;
    line-height: 1.75;
}

body.route-showcase .dm-showcase-hero-badges {
    gap: 10px;
    margin-top: 26px;
}

body.route-showcase .dm-showcase-hero-badges span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border: 1px solid rgba(91, 79, 212, 0.10);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 7px 20px rgba(43, 51, 99, 0.05);
    backdrop-filter: blur(8px);
}

body.route-showcase .dm-showcase-hero-art {
    min-height: 285px;
    border: 1px solid rgba(102, 90, 211, 0.09);
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.98) 0 12%,
            rgba(107, 91, 239, 0.18) 13% 14%,
            transparent 15% 28%,
            rgba(43, 190, 214, 0.16) 29% 30%,
            transparent 31%
        ),
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.90),
            rgba(235, 247, 255, 0.88)
        );
    box-shadow:
        0 24px 55px rgba(35, 42, 92, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body.route-showcase .dm-showcase-star {
    width: 92px;
    height: 92px;
    box-shadow:
        0 18px 44px rgba(82, 70, 220, 0.30),
        0 0 0 10px rgba(255, 255, 255, 0.35);
}

body.route-showcase .dm-showcase-orbit {
    border: 1px solid rgba(98, 84, 232, 0.08);
    box-shadow:
        0 14px 32px rgba(33, 42, 90, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}


/* --------------------------------------------------------------------------
   FILTER BAR
   -------------------------------------------------------------------------- */

body.route-showcase .dm-showcase-filters {
    gap: 9px;
    margin: 30px 0 26px;
    padding: 11px;

    border: 1px solid rgba(91, 84, 177, 0.10);
    border-radius: 20px;

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

    box-shadow:
        0 18px 44px rgba(34, 43, 90, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(14px);
}

body.route-showcase .dm-showcase-filters a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;

    border: 1px solid transparent;
    border-radius: 12px;

    color: #69728d;
    font-weight: 850;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

body.route-showcase .dm-showcase-filters a:hover,
body.route-showcase .dm-showcase-filters a:focus-visible {
    background: #f6f4ff;
    border-color: rgba(99, 83, 225, 0.10);
    color: #5646d8;
}

body.route-showcase .dm-showcase-filters a.is-active {
    background:
        linear-gradient(
            135deg,
            #6656eb,
            #557af0
        );
    color: #ffffff;
    border-color: transparent;
    box-shadow:
        0 9px 22px rgba(83, 69, 208, 0.19);
}


/* --------------------------------------------------------------------------
   PREMIUM GALLERY
   -------------------------------------------------------------------------- */

body.route-showcase .dm-showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

body.route-showcase .dm-showcase-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    border: 1px solid rgba(83, 78, 151, 0.10);
    border-radius: 26px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.99),
            rgba(252, 252, 255, 0.98)
        );

    box-shadow:
        0 24px 60px rgba(36, 45, 94, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

body.route-showcase .dm-showcase-card:hover,
body.route-showcase .dm-showcase-card:focus-within {
    border-color: rgba(101, 84, 225, 0.20);
    box-shadow:
        0 30px 72px rgba(36, 45, 94, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}


/* --------------------------------------------------------------------------
   IMPORTANT: PRESERVE COMPLETE STUDENT ARTWORK
   --------------------------------------------------------------------------
   The original gallery used object-fit: cover, which cropped posters.
   Public student artwork should be presented in full.
   -------------------------------------------------------------------------- */

body.route-showcase .dm-showcase-media--image {
    /*
       Compact, uniform public preview.
       All project types use the same preview height so the gallery stays tidy.
       The full artwork is still preserved with object-fit: contain.
    */
    aspect-ratio: auto;
    height: 320px;
    min-height: 320px;
    padding: 12px;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(255, 255, 255, 0.96),
            rgba(245, 244, 255, 0.86) 52%,
            rgba(236, 247, 255, 0.84) 100%
        );
}

body.route-showcase .dm-showcase-media--image img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;

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

    border: 1px solid rgba(49, 52, 82, 0.08);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 15px 34px rgba(32, 37, 73, 0.14);
}


/* Video receives a cinema-style frame without cropping. */

body.route-showcase .dm-showcase-media--video {
    /*
       Same compact frame height as posters/images.
       The video keeps its own aspect ratio and is centred inside the frame.
    */
    aspect-ratio: auto;
    height: 320px;
    min-height: 320px;
    padding: 12px;

    background:
        linear-gradient(
            135deg,
            #12172f,
            #202852
        );
}

body.route-showcase .dm-showcase-media--video video {
    /*
       Preserve the video's real aspect ratio inside the shared 4:5 frame.
       Using max-width/max-height instead of forcing both dimensions to 100%
       prevents the browser player from appearing cropped.
    */
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;

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

    border-radius: 14px;
    background: #080b16;
}


/* File / PDF project presentation. */

body.route-showcase .dm-showcase-file-preview {
    min-height: 300px;
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(255, 255, 255, 0.98),
            rgba(244, 243, 255, 0.96)
        );
}

body.route-showcase .dm-showcase-file-preview span {
    font-size: 3.3rem;
}


/* Category / featured badges sit over a soft glass plate. */

body.route-showcase .dm-showcase-category,
body.route-showcase .dm-showcase-featured {
    top: 14px;
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;

    border: 1px solid rgba(84, 76, 173, 0.08);
    background: rgba(255, 255, 255, 0.91);

    box-shadow:
        0 8px 22px rgba(29, 35, 70, 0.12);

    backdrop-filter: blur(10px);
}

body.route-showcase .dm-showcase-category {
    left: 14px;
}

body.route-showcase .dm-showcase-featured {
    right: 14px;
}


/* Card content */

body.route-showcase .dm-showcase-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 22px 24px;
}

body.route-showcase .dm-showcase-year {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 14px;
}

body.route-showcase .dm-showcase-card-meta {
    gap: 8px;
    color: #727b96;
    font-size: 0.74rem;
    line-height: 1.4;
}

body.route-showcase .dm-showcase-card-meta span {
    display: inline-flex;
    align-items: center;
}

body.route-showcase .dm-showcase-card h2 {
    margin: 11px 0 8px;
    color: #111a49;
    font-size: 1.26rem;
    line-height: 1.24;
    letter-spacing: -0.02em;
}

body.route-showcase .dm-showcase-card p {
    color: #69728d;
    font-size: 0.90rem;
    line-height: 1.65;
}

body.route-showcase .dm-showcase-year {
    margin-top: 14px;
    padding: 6px 9px;
    border-radius: 9px;
    background: #f2efff;
    color: #6153d9;
    font-size: 0.76rem;
    font-weight: 900;
}


/* --------------------------------------------------------------------------
   PRIVACY NOTE
   -------------------------------------------------------------------------- */

body.route-showcase .dm-showcase-privacy-note {
    gap: 16px;
    margin-top: 34px;
    padding: 24px 26px;

    border: 1px solid rgba(89, 84, 170, 0.10);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92),
            rgba(247, 250, 255, 0.92)
        );

    box-shadow:
        0 16px 42px rgba(37, 45, 92, 0.055);
}

body.route-showcase .dm-showcase-privacy-note > span {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(81, 118, 239, 0.11),
            rgba(40, 190, 213, 0.10)
        );
    font-size: 1.25rem;
}

body.route-showcase .dm-showcase-privacy-note strong {
    color: #111a49;
    font-size: 0.97rem;
}

body.route-showcase .dm-showcase-privacy-note p {
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   HOMEPAGE SHOWCASE PREVIEW — ALSO PRESERVE ARTWORK
   -------------------------------------------------------------------------- */

body.route-home .dm-showcase-home-media {
    padding: 10px;
    background:
        linear-gradient(
            135deg,
            #f2f0ff,
            #eefbff
        );
}

body.route-home .dm-showcase-home-media img {
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
    background: #ffffff;
}


/* --------------------------------------------------------------------------
   RESPONSIVE PREMIUM GALLERY
   -------------------------------------------------------------------------- */

@media (max-width: 1020px) {

    body.route-showcase .dm-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 760px) {

    body.route-showcase .dm-showcase-media--image,
    body.route-showcase .dm-showcase-media--video {
        height: 280px;
        min-height: 280px;
    }

    body.route-showcase .dm-showcase-hero {
        grid-template-columns: 1fr;
    }

    body.route-showcase .dm-showcase-hero-art {
        min-height: 235px;
    }

    body.route-showcase .dm-showcase-grid {
        grid-template-columns: 1fr;
    }

    body.route-showcase .dm-showcase-media--image,
    body.route-showcase .dm-showcase-media--video {
        aspect-ratio: auto;
        height: 250px;
        min-height: 250px;
        padding: 10px;
    }

}


@media (max-width: 520px) {

    body.route-showcase .dm-showcase-page {
        width: min(100% - 22px, 1240px);
        margin-top: 18px;
    }

    body.route-showcase .dm-showcase-hero {
        padding: 26px 21px;
        border-radius: 24px;
    }

    body.route-showcase .dm-showcase-hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.35rem);
    }

    body.route-showcase .dm-showcase-filters {
        padding: 9px;
        border-radius: 16px;
    }

    body.route-showcase .dm-showcase-filters a {
        min-height: 38px;
        padding: 8px 13px;
    }

    body.route-showcase .dm-showcase-card {
        border-radius: 22px;
    }

    body.route-showcase .dm-showcase-card-body {
        padding: 18px 18px 21px;
    }

}


/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    body.route-showcase .dm-showcase-card,
    body.route-showcase .dm-showcase-filters a {
        transition: none !important;
    }

}

/* ==========================================================================
   STUDENT SHOWCASE PREMIUM V3
   Click-to-enlarge public artwork
   ========================================================================== */

/* The image button fills the complete artwork frame without changing the
   student's original proportions. */
body.route-showcase .dm-showcase-image-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 16px;

    background: transparent;
    color: inherit;

    cursor: zoom-in;
    overflow: hidden;
}

body.route-showcase .dm-showcase-image-button img {
    /*
       Preserve the complete artwork inside the same-size gallery frame.
    */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Subtle visual cue that an image can be enlarged. */
body.route-showcase .dm-showcase-zoom-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;

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

    min-height: 34px;
    padding: 7px 11px;

    border: 1px solid rgba(255, 255, 255, 0.44);
    border-radius: 999px;

    background: rgba(16, 22, 55, 0.80);
    color: #ffffff;

    box-shadow: 0 8px 24px rgba(10, 15, 42, 0.24);
    backdrop-filter: blur(10px);

    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.01em;

    opacity: 0;
    transition: opacity 160ms ease;
}

body.route-showcase .dm-showcase-image-button:hover .dm-showcase-zoom-hint,
body.route-showcase .dm-showcase-image-button:focus-visible .dm-showcase-zoom-hint {
    opacity: 1;
}

body.route-showcase .dm-showcase-image-button:focus-visible {
    outline: 3px solid rgba(93, 78, 224, 0.30);
    outline-offset: 4px;
}


/* --------------------------------------------------------------------------
   LIGHTBOX
   -------------------------------------------------------------------------- */

body.route-showcase .dm-showcase-lightbox {
    width: min(1180px, calc(100vw - 34px));
    max-width: none;
    max-height: calc(100vh - 34px);

    padding: 0;
    overflow: hidden;

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

    background:
        linear-gradient(
            145deg,
            rgba(252, 252, 255, 0.99),
            rgba(242, 247, 255, 0.99)
        );

    box-shadow:
        0 40px 120px rgba(7, 12, 34, 0.42);
}

body.route-showcase .dm-showcase-lightbox::backdrop {
    background: rgba(8, 13, 35, 0.78);
    backdrop-filter: blur(9px);
}

body.route-showcase .dm-showcase-lightbox-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: calc(100vh - 34px);
}

body.route-showcase .dm-showcase-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 20px 16px 24px;

    border-bottom: 1px solid rgba(79, 76, 146, 0.10);

    background: rgba(255, 255, 255, 0.90);
}

body.route-showcase .dm-showcase-lightbox-header small {
    display: block;
    margin-bottom: 3px;

    color: #6958e6;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.16em;
}

body.route-showcase .dm-showcase-lightbox-header h2 {
    margin: 0;

    color: #111a49;
    font-size: clamp(1rem, 2.4vw, 1.35rem);
    line-height: 1.2;
}

body.route-showcase .dm-showcase-lightbox-close {
    display: grid;
    place-items: center;
    flex: 0 0 44px;

    width: 44px;
    height: 44px;
    padding: 0;

    border: 1px solid rgba(75, 70, 145, 0.12);
    border-radius: 14px;

    background: #ffffff;
    color: #27224f;

    box-shadow: 0 8px 22px rgba(28, 34, 75, 0.08);

    cursor: pointer;

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

body.route-showcase .dm-showcase-lightbox-close:hover,
body.route-showcase .dm-showcase-lightbox-close:focus-visible {
    border-color: rgba(94, 78, 224, 0.25);
    background: #f5f2ff;
    color: #5e4ee0;
}

body.route-showcase .dm-showcase-lightbox-stage {
    display: grid;
    place-items: center;

    min-height: 260px;
    padding: clamp(14px, 2.4vw, 30px);

    overflow: auto;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(255, 255, 255, 0.98),
            rgba(239, 242, 255, 0.95) 65%,
            rgba(232, 244, 250, 0.95)
        );
}

body.route-showcase .dm-showcase-lightbox-stage img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 180px);

    object-fit: contain;

    border: 1px solid rgba(32, 36, 73, 0.10);
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 20px 60px rgba(22, 28, 66, 0.20);
}

body.route-showcase .dm-showcase-lightbox-help {
    margin: 0;
    padding: 10px 20px 13px;

    border-top: 1px solid rgba(79, 76, 146, 0.08);

    background: rgba(255, 255, 255, 0.90);
    color: #7a829b;

    text-align: center;
    font-size: 0.76rem;
}


/* Homepage remains a compact preview: maximum three cards. */
body.route-home .dm-showcase-home-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

@media (max-width: 900px) {
    body.route-home .dm-showcase-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    body.route-home .dm-showcase-home-grid {
        grid-template-columns: 1fr;
    }

    body.route-showcase .dm-showcase-lightbox {
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
        border-radius: 20px;
    }

    body.route-showcase .dm-showcase-lightbox-panel {
        max-height: calc(100vh - 18px);
    }

    body.route-showcase .dm-showcase-lightbox-header {
        padding: 14px 14px 13px 17px;
    }

    body.route-showcase .dm-showcase-lightbox-stage {
        padding: 10px;
    }

    body.route-showcase .dm-showcase-lightbox-stage img {
        max-height: calc(100vh - 155px);
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.route-showcase .dm-showcase-zoom-hint {
        transition: none !important;
    }
}

/* ==========================================================================
   DM STUDIO AI — STUDENT SHOWCASE V4
   FINAL COMPACT MEDIA LAYOUT
   --------------------------------------------------------------------------
   Goals:
   - Latest Work shows one compact centred project.
   - Category views remain a tidy multi-card gallery.
   - Posters, photos and videos are NEVER cropped.
   - Different media proportions are preserved inside one consistent frame.
   - Equal card presentation is achieved with the frame, not by stretching media.
   ========================================================================== */

/* ------------------------------
   Gallery sizing
   ------------------------------ */

body.route-showcase .dm-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 340px));
    gap: 24px;
    align-items: stretch;
    justify-content: start;
}

/* One newest approved project = a compact spotlight, not a giant card. */
body.route-showcase .dm-showcase-page--latest .dm-showcase-grid {
    grid-template-columns: minmax(0, 410px);
    justify-content: center;
}

/* Keep every card visually consistent. */
body.route-showcase .dm-showcase-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* ------------------------------
   One shared media frame
   ------------------------------ */

body.route-showcase .dm-showcase-media,
body.route-showcase .dm-showcase-media--image,
body.route-showcase .dm-showcase-media--video {
    position: relative;

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

    width: 100%;
    height: 250px;
    min-height: 250px;
    aspect-ratio: auto;

    padding: 12px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #eef1ff,
            #f8fbff
        );
}

/* Video uses a dark cinema plate inside the same compact frame. */
body.route-showcase .dm-showcase-media--video {
    background:
        linear-gradient(
            135deg,
            #11172f,
            #202852
        );
}

/* ------------------------------
   Images / posters
   ------------------------------ */

/* The click-to-enlarge button fills the frame but does not stretch artwork. */
body.route-showcase .dm-showcase-image-button {
    position: relative;

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

    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 14px;

    overflow: hidden;
    background: transparent;
}

/* Never crop or stretch public student artwork. */
body.route-showcase .dm-showcase-media--image img,
body.route-showcase .dm-showcase-image-button 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;

    flex: 0 0 auto;

    border-radius: 12px;
    background: #ffffff;
}

/* ------------------------------
   Video
   ------------------------------ */

/* Preserve the video's real ratio. No cropping, no forced 100% dimensions. */
body.route-showcase .dm-showcase-media--video video {
    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;

    flex: 0 0 auto;

    border-radius: 12px;
    background: #080b16;
}

/* ------------------------------
   Card content alignment
   ------------------------------ */

body.route-showcase .dm-showcase-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-height: 168px;
    padding: 19px 20px 21px;
}

body.route-showcase .dm-showcase-year {
    align-self: flex-start;
    margin-top: auto;
}

/* ------------------------------
   Responsive
   ------------------------------ */

@media (max-width: 760px) {

    body.route-showcase .dm-showcase-grid,
    body.route-showcase .dm-showcase-page--latest .dm-showcase-grid {
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
    }

    body.route-showcase .dm-showcase-media,
    body.route-showcase .dm-showcase-media--image,
    body.route-showcase .dm-showcase-media--video {
        height: 230px;
        min-height: 230px;
    }

}

@media (max-width: 520px) {

    body.route-showcase .dm-showcase-media,
    body.route-showcase .dm-showcase-media--image,
    body.route-showcase .dm-showcase-media--video {
        height: 210px;
        min-height: 210px;
        padding: 9px;
    }

    body.route-showcase .dm-showcase-card-body {
        min-height: 150px;
        padding: 17px 17px 19px;
    }

}


/* ========================================================================== 
   STUDENT SHOWCASE PREMIUM V5
   Compact filters + complete media display
   --------------------------------------------------------------------------
   This final override fixes the two layout problems visible in the public
   showcase:
   1. Desktop filters stay on one clean row instead of leaving the final item
      stranded on a second line.
   2. Posters/images and videos are always shown in full and never cropped.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CATEGORY FILTERS
   -------------------------------------------------------------------------- */

body.route-showcase .dm-showcase-filters {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;

    width: 100%;
    margin: 28px 0 24px;
    padding: 10px;

    border: 1px solid rgba(91, 84, 177, 0.10);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);

    box-shadow:
        0 16px 40px rgba(34, 43, 90, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(14px);
}

body.route-showcase .dm-showcase-filters a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 9px 8px;

    border: 1px solid transparent;
    border-radius: 12px;

    color: #68718c;
    font-size: clamp(0.72rem, 0.82vw, 0.86rem);
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

body.route-showcase .dm-showcase-filters a:hover,
body.route-showcase .dm-showcase-filters a:focus-visible {
    background: #f6f4ff;
    border-color: rgba(99, 83, 225, 0.11);
    color: #5646d8;
}

body.route-showcase .dm-showcase-filters a.is-active {
    background: linear-gradient(135deg, #6656eb, #557af0);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 9px 22px rgba(83, 69, 208, 0.19);
}

/* --------------------------------------------------------------------------
   GALLERY SIZE
   -------------------------------------------------------------------------- */

body.route-showcase .dm-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 340px));
    justify-content: start;
    align-items: stretch;
    gap: 24px;
}

/* The Latest Work screen has one featured project. Keep it compact. */
body.route-showcase .dm-showcase-page--latest .dm-showcase-grid {
    grid-template-columns: minmax(0, 360px);
    justify-content: center;
}

body.route-showcase .dm-showcase-card {
    width: 100%;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   MEDIA FRAME — NEVER CROP STUDENT WORK
   -------------------------------------------------------------------------- */

body.route-showcase .dm-showcase-media,
body.route-showcase .dm-showcase-media--image,
body.route-showcase .dm-showcase-media--video {
    position: relative;

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

    width: 100%;
    height: 230px;
    min-height: 230px;
    aspect-ratio: auto;

    padding: 12px;
    overflow: hidden;

    background: linear-gradient(135deg, #eef1ff, #f8fbff);
}

body.route-showcase .dm-showcase-media--video {
    background: linear-gradient(135deg, #11172f, #202852);
}

body.route-showcase .dm-showcase-image-button {
    position: relative;

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

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

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 14px;

    overflow: hidden;
    background: transparent;
}

/* Posters and photos: full artwork visible, no top/bottom or side crop. */
body.route-showcase .dm-showcase-media--image img,
body.route-showcase .dm-showcase-image-button 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;

    flex: 0 0 auto;

    border-radius: 12px;
    background: #ffffff;
}

/* Videos: preserve the real video ratio and show the complete frame. */
body.route-showcase .dm-showcase-media--video video {
    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;

    flex: 0 0 auto;

    border-radius: 12px;
    background: #080b16;
}

/* Keep labels inside the media frame without covering too much work. */
body.route-showcase .dm-showcase-category,
body.route-showcase .dm-showcase-featured {
    top: 11px;
    min-height: 28px;
    padding: 6px 9px;
    font-size: 0.66rem;
}

body.route-showcase .dm-showcase-category {
    left: 11px;
}

body.route-showcase .dm-showcase-featured {
    right: 11px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE FILTERS + MEDIA
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    body.route-showcase .dm-showcase-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.route-showcase .dm-showcase-filters a {
        font-size: 0.84rem;
    }
}

@media (max-width: 760px) {
    body.route-showcase .dm-showcase-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 9px;
        margin: 22px 0 20px;
        padding: 10px;
    }

    body.route-showcase .dm-showcase-filters a {
        min-height: 42px;
        padding: 8px 6px;
        font-size: 0.88rem;
        white-space: normal;
    }

    body.route-showcase .dm-showcase-grid,
    body.route-showcase .dm-showcase-page--latest .dm-showcase-grid {
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
    }

    body.route-showcase .dm-showcase-page--latest .dm-showcase-card {
        width: min(100%, 360px);
        margin-inline: auto;
    }

    body.route-showcase .dm-showcase-media,
    body.route-showcase .dm-showcase-media--image,
    body.route-showcase .dm-showcase-media--video {
        height: 220px;
        min-height: 220px;
        padding: 10px;
    }
}

@media (max-width: 520px) {
    body.route-showcase .dm-showcase-filters {
        gap: 6px 8px;
        padding: 9px;
        border-radius: 16px;
    }

    body.route-showcase .dm-showcase-filters a {
        min-height: 40px;
        padding: 8px 5px;
        font-size: 0.82rem;
        line-height: 1.2;
    }

    body.route-showcase .dm-showcase-media,
    body.route-showcase .dm-showcase-media--image,
    body.route-showcase .dm-showcase-media--video {
        height: 205px;
        min-height: 205px;
        padding: 9px;
    }
}