/**
 * Cards, badges, icons, images, listing/filter pages.
 * Loaded after ux-structure.css.
 */

/* -------------------------------------------------------------------------- */
/* Badge overlap — hard reset                                                 */
/* -------------------------------------------------------------------------- */

/* Never absolute unless parent is an intentional media frame */
.lp-ux-modern .exhibition-badge,
.lp-ux-modern .lp-badge,
.lp-ux-modern .winner-category-badge,
.lp-ux-modern .member-status .badge,
.lp-ux-modern .contest-chip:not(.contest-badge-row .contest-chip):not(.contest-card-img .contest-chip) {
    position: static !important;
    inset: auto !important;
    float: none !important;
    transform: none !important;
}

/* Media-overlay badges only (image frames) */
.lp-ux-modern .exhibition-card-image,
.lp-ux-modern .exhibition-image-wrapper,
.lp-ux-modern .recognition-card-image,
.lp-ux-modern .festival-card-image-wrapper,
.lp-ux-modern .event-image-wrapper,
.lp-ux-modern .contest-card-img,
.lp-ux-modern .winner-img,
.lp-ux-modern .award-card-media,
.lp-ux-modern .featured-award-media,
.lp-ux-modern .lp-media {
    position: relative;
    overflow: hidden;
}

.lp-ux-modern .exhibition-card-image > .exhibition-badge,
.lp-ux-modern .exhibition-image-wrapper > .exhibition-badge,
.lp-ux-modern .recognition-card-image > .exhibition-badge,
.lp-ux-modern .recognition-card-image > .lp-overlay-badge,
.lp-ux-modern .festival-card-image-wrapper > .festival-card-date-badge,
.lp-ux-modern .event-image-wrapper > .event-date-badge,
.lp-ux-modern .event-image-wrapper > .badge.event-date-badge,
.lp-ux-modern .winner-img > .card-type-badge,
.lp-ux-modern .contest-card-img .contest-badge-row,
.lp-ux-modern .contest-card-img .contest-featured-badge,
.lp-ux-modern .lp-media > .lp-overlay-badge {
    position: absolute !important;
    z-index: 3;
}

.lp-ux-modern .event-image-wrapper > .event-date-badge,
.lp-ux-modern .event-image-wrapper > .badge.event-date-badge,
.lp-ux-modern .event-image-wrapper > a.event-date-badge {
    right: 12px;
    bottom: 12px;
    left: auto;
    top: auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.55rem 0.85rem !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--lp-primary-deep, #4510A0) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center !important;
    line-height: 1 !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(14, 8, 43, 0.16);
    max-width: calc(100% - 24px);
    white-space: nowrap !important;
    vertical-align: middle;
    text-decoration: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lp-ux-modern .event-image-wrapper > .event-date-badge:hover,
.lp-ux-modern .event-image-wrapper > a.event-date-badge:hover {
    background: #fff !important;
    color: var(--lp-primary, #6C1CEA) !important;
}

.lp-ux-modern .winner-img > .card-type-badge,
.lp-ux-modern .recognition-card-image > .lp-overlay-badge,
.lp-ux-modern .exhibition-card-image > .exhibition-badge,
.lp-ux-modern .lp-media > .lp-overlay-badge {
    top: 12px;
    left: 12px;
    right: auto;
    bottom: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: var(--lp-green, #6C1CEA) !important;
    color: #fff !important;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(108, 28, 234, 0.25);
}

/* Content badges (in card body/header) — flow, no float over text */
.lp-ux-modern .exhibition-card-content .exhibition-badge,
.lp-ux-modern .exhibition-card-header .exhibition-badge,
.lp-ux-modern .vl-university-section .exhibition-badge,
.lp-ux-modern .festival-card-content .exhibition-badge,
.lp-ux-modern .recognition-card-body .exhibition-badge,
.lp-ux-modern .lp-person-card .badge,
.lp-ux-modern .winner-card .winner-category-badge,
.lp-ux-modern .lp-badge {
    position: static !important;
    display: inline-flex !important;
    margin: 0 0 0.75rem;
    max-width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Icons — brand green                                                        */
/* -------------------------------------------------------------------------- */

.lp-ux-modern .meta-item i,
.lp-ux-modern .event-location i,
.lp-ux-modern .icon-flex .icon,
.lp-ux-modern .icon-flex .icon i,
.lp-ux-modern .icon-flex .icon span,
.lp-ux-modern .benefit-icon,
.lp-ux-modern .contest-card-facts i,
.lp-ux-modern .contest-deadline i,
.lp-ux-modern .breaking-icon i,
.lp-ux-modern .vl-publication-meta i,
.lp-ux-modern .gallery-btn i,
.lp-ux-modern .view-gallery-btn i,
.lp-ux-modern .lp-activity-nav__icon,
.lp-ux-modern .lp-activity-nav__icon i,
.lp-ux-modern .vl-single-event4 .icon i,
.lp-ux-modern .fa-calendar,
.lp-ux-modern .fa-calendar-alt,
.lp-ux-modern .fa-location-dot,
.lp-ux-modern .fa-map-marker-alt,
.lp-ux-modern .fa-clock,
.lp-ux-modern .fa-tag,
.lp-ux-modern .fa-newspaper,
.lp-ux-modern .fa-images,
.lp-ux-modern .fa-camera,
.lp-ux-modern .fa-book,
.lp-ux-modern .top-icon img {
    color: var(--lp-green, #6C1CEA) !important;
    fill: var(--lp-green, #6C1CEA);
}

/* theme-main.js may rewrite Font Awesome icons to SVG, which
   <i class="fa ..."> into <svg class="svg-inline--fa">. Only the webfont CSS is
   enqueued, so the SVG baseline (height: 1em) is missing and icons inflate to
   the width of their container. This restores FA's own SVG metrics. */
.svg-inline--fa {
    display: inline-block;
    height: 1em;
    width: auto;
    max-height: 1em;
    min-height: 0;
    min-width: 0;
    overflow: visible;
    vertical-align: -0.125em;
    box-sizing: content-box;
    flex: 0 0 auto;
}

.svg-inline--fa.fa-fw {
    width: 1.25em;
}

.lp-ux-modern .event-location .svg-inline--fa,
.lp-ux-modern .meta-item .svg-inline--fa {
    margin-right: 0.4rem;
}

.lp-ux-modern .event-location {
    display: flex !important;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    margin: 0.75rem 0 0.5rem;
    min-height: 0 !important;
}

.lp-ux-modern .event-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lp-ux-modern .event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(14, 8, 43, 0.12);
}

.lp-ux-modern .event-card .event-image-wrapper {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin: 0 0 0.85rem;
    aspect-ratio: 16 / 10;
    background: var(--lp-primary-soft, #F3ECFE);
}

.lp-ux-modern .event-card .event-image-wrapper img,
.lp-ux-modern .event-card .event-image-wrapper .lenspo-card-media-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-ux-modern .event-card .event-location {
    margin: 0 0 0.45rem;
    color: var(--lp-muted, #6B7A72);
}

.lp-ux-modern .event-card .event-title,
.lp-ux-modern .event-card h3,
.lp-ux-modern .event-card h4 {
    margin: 0 0 0.55rem;
    font-size: 1.15rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--lp-ink, #0E082B);
}

.lp-ux-modern .event-card .lenspo-card-excerpt-link,
.lp-ux-modern .event-card .event-meta {
    margin: 0 0 1rem;
    color: var(--lp-muted, #6B7A72);
    font-size: 0.92rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lp-ux-modern .event-card .read-more,
.lp-ux-modern .event-card .header-btn1,
.lp-ux-modern .event-card .event-card-btn,
.lp-ux-modern .news-card .header-btn1,
.lp-ux-modern .news-card .event-card-btn {
    margin-top: auto !important;
    align-self: flex-start !important;
    width: auto !important;
    min-height: 44px !important;
    padding: 0.4rem 0.4rem 0.4rem 1.05rem !important;
    font-size: 0.875rem !important;
    background: var(--lp-primary, #6C1CEA) !important;
    color: #fff !important;
    border-radius: var(--lp-radius-pill, 999px) !important;
    box-shadow: 0 8px 18px rgba(108, 28, 234, 0.22) !important;
}

.lp-ux-modern .event-card .header-btn1:hover,
.lp-ux-modern .event-card .event-card-btn:hover,
.lp-ux-modern .news-card .header-btn1:hover,
.lp-ux-modern .news-card .event-card-btn:hover {
    background: var(--lp-primary-dark, #5815C9) !important;
    color: #fff !important;
}

.lp-ux-modern .event-card .header-btn1 span,
.lp-ux-modern .event-card .event-card-btn span,
.lp-ux-modern .news-card .header-btn1 span,
.lp-ux-modern .news-card .event-card-btn span {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    background: #fff !important;
    color: var(--lp-primary, #6C1CEA) !important;
}

.lp-ux-modern .event-card .header-btn1 span i,
.lp-ux-modern .event-card .event-card-btn span i,
.lp-ux-modern .event-card .header-btn1 span .svg-inline--fa,
.lp-ux-modern .event-card .event-card-btn span .svg-inline--fa,
.lp-ux-modern .news-card .header-btn1 span i,
.lp-ux-modern .news-card .event-card-btn span i {
    color: var(--lp-primary, #6C1CEA) !important;
}

.lp-ux-modern .header-btn1 span i,
.lp-ux-modern .header-btn1 i,
.lp-ux-modern .read-more i,
.lp-ux-modern .details i,
.lp-ux-modern .exhibition-featured-badge i,
.lp-ux-modern .contest-featured-badge i,
.lp-ux-modern .contest-chip i {
    color: inherit !important;
}

.lp-ux-modern .icon-flex .icon,
.lp-ux-modern .icon-flex .icon span {
    background: var(--lp-green-soft, #F3ECFE) !important;
    border-radius: 10px;
}

/* Consistent icon ↔ text spacing on all card date rows */
.lp-ux-modern .icon-flex {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
}

.lp-ux-modern .icon-flex .icon {
    flex: 0 0 auto;
    margin: 0 !important;
}

.lp-ux-modern .icon-flex .icon span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.lp-ux-modern .icon-flex .text {
    min-width: 0;
    line-height: 1.3;
}

.lp-ux-modern .icon-circle,
.lp-ux-modern .lp-icon-circle {
    background: linear-gradient(145deg, var(--lp-green-deep, #4510A0), var(--lp-green, #6C1CEA)) !important;
    color: #fff !important;
}

.lp-ux-modern .icon-circle i,
.lp-ux-modern .lp-icon-circle i {
    color: #fff !important;
}

/* -------------------------------------------------------------------------- */
/* Images — consistent media frames + empty state                             */
/* -------------------------------------------------------------------------- */

.lp-ux-modern .lp-media,
.lp-ux-modern .lp-person-card__media,
.lp-ux-modern .winner-img,
.lp-ux-modern .event-image-wrapper,
.lp-ux-modern .contest-card-img,
.lp-ux-modern .exhibition-card-image,
.lp-ux-modern .recognition-card-image,
.lp-ux-modern .festival-card-image-wrapper,
.lp-ux-modern .mt-img-scale {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background:
        linear-gradient(145deg, var(--lp-surface-3, #EBF3FB), var(--lp-surface-2, #F8F9FA));
}

.lp-ux-modern .lp-person-card__media,
.lp-ux-modern .winner-img,
.lp-ux-modern .mt-img-scale {
    aspect-ratio: 1 / 1;
}

.lp-ux-modern .event-image-wrapper,
.lp-ux-modern .contest-card-img,
.lp-ux-modern .exhibition-card-image,
.lp-ux-modern .recognition-card-image,
.lp-ux-modern .festival-card-image-wrapper,
.lp-ux-modern .lp-media--wide {
    aspect-ratio: 16 / 10;
}

.lp-ux-modern .lp-media img,
.lp-ux-modern .lp-person-card__media img,
.lp-ux-modern .winner-img img,
.lp-ux-modern .event-image-wrapper img,
.lp-ux-modern .contest-card-img img,
.lp-ux-modern .exhibition-card-image img,
.lp-ux-modern .recognition-card-image img,
.lp-ux-modern .festival-card-image-wrapper img,
.lp-ux-modern .mt-img-scale img,
.lp-ux-modern .advisor-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    border-radius: inherit;
}

.lp-ux-modern .lp-media--empty::after,
.lp-ux-modern .lp-person-card__media--empty::after {
    content: attr(data-empty);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lp-muted, #6B7A72);
    pointer-events: none;
}

.lp-ux-modern .lp-person-card__media--initials,
.lp-ux-modern .lp-crew-card__media--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            145deg,
            hsl(var(--lp-avatar-hue, 250), 62%, 46%) 0%,
            hsl(calc(var(--lp-avatar-hue, 250) + 28), 58%, 36%) 100%
        ) !important;
}

.lp-ux-modern .lp-person-card__initials,
.lp-ux-modern .lp-crew-card__initials {
    font-size: clamp(2rem, 8vw, 3.25rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 10px rgba(14, 8, 43, 0.18);
    user-select: none;
}

/* -------------------------------------------------------------------------- */
/* Person cards (executive / mentors / advisors)                              */
/* -------------------------------------------------------------------------- */

.lp-person-card {
    background: var(--lp-surface, #fff);
    border: 1px solid var(--lp-border, #E5E7EB);
    border-radius: 20px;
    box-shadow: var(--lp-shadow, 0 10px 30px rgba(14, 8, 43, 0.08));
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.lp-person-card:hover {
    transform: translateY(-5px);
    border-color: var(--lp-primary, #6C1CEA);
    box-shadow: var(--lp-shadow-hover, 0 18px 40px rgba(108, 28, 234, 0.14));
}

.lp-person-card__media {
    aspect-ratio: 1 / 1;
}

.lp-person-card__media img {
    transition: transform 0.45s ease;
}

.lp-person-card:hover .lp-person-card__media img {
    transform: scale(1.06);
}

.lp-person-card__body h5 {
    font-size: 1.05rem;
}

.lp-person-card__body .team-position {
    color: var(--lp-primary, #6C1CEA);
    font-weight: 600;
}

.lp-person-card__body {
    padding: 1.15rem 1.2rem 1.35rem;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.lp-person-card__body h5 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--lp-ink, #0E082B);
    letter-spacing: -0.01em;
}

.lp-person-card__body .team-position {
    margin: 0;
    color: var(--lp-muted, #6B7A72);
    font-size: 0.9rem;
    line-height: 1.45;
}

.lp-person-card .member-status .badge {
    background: var(--lp-surface-3, #EBF3FB) !important;
    color: var(--lp-green-deep, #4510A0) !important;
    border-radius: 999px;
    font-weight: 600;
}

.lp-listing-grid > [class*="col-"] {
    display: flex;
}

.lp-listing-grid > [class*="col-"] > .lp-person-card,
.lp-listing-grid > [class*="col-"] > a {
    width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Listing page shell + sticky filters                                        */
/* -------------------------------------------------------------------------- */

.lp-listing-page .page-content,
.lp-listing-shell {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
}

.lp-listing-shell .lp-archive-intro,
.lp-ux-modern .section-holder > .container > .lp-archive-intro,
.lp-ux-modern .awards-intro,
.lp-ux-modern .notices-intro,
.lp-ux-modern .padding-lr200.alignc {
    max-width: none !important;
    width: 100%;
    margin: 0 0 1.75rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.lp-ux-modern .padding-lr200.alignc,
.lp-ux-modern .awards-intro-text,
.lp-ux-modern .notices-intro-text {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.lp-ux-modern .winner-search-wrap,
.lp-ux-modern .lenspo-search-bar,
.lp-ux-modern .page-search {
    max-width: none;
    margin: 0 0 1.5rem;
    text-align: left;
}

.lp-ux-modern .winner-search-input,
.lp-ux-modern .lenspo-search-bar input,
.lp-ux-modern .page-search input {
    width: 100%;
    border: 1px solid var(--lp-border, #E5E7EB);
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    background: var(--lp-surface, #fff);
    box-shadow: var(--lp-shadow, 0 10px 30px rgba(21, 35, 27, 0.06));
}

.lp-ux-modern .contest-filter-panel,
.lp-ux-modern .winner-filter-panel,
.lp-ux-modern .award-filter-panel,
.lp-ux-modern .notice-filter-panel {
    /* Classic theme filter bar look is owned by header-chrome.css */
    position: static;
}

/* -------------------------------------------------------------------------- */
/* Winner / contest / news cards polish                                       */
/* -------------------------------------------------------------------------- */

.lp-ux-modern .winner-card {
    border: 1px solid var(--lp-border, #E5E7EB) !important;
    border-radius: 20px !important;
    box-shadow: var(--lp-shadow, 0 10px 30px rgba(14, 8, 43, 0.08)) !important;
    padding: 1rem !important;
    text-align: left !important;
    background: var(--lp-surface, #fff) !important;
}

.lp-ux-modern .winner-card .winner-name {
    color: var(--lp-ink, #0E082B);
    margin-top: 0.35rem;
}

.lp-ux-modern .winner-card .winner-title {
    color: var(--lp-muted, #6B7A72);
}

.lp-ux-modern .event-card,
.lp-ux-modern .contest-card,
.lp-ux-modern .news-card {
    border: 1px solid var(--lp-border, #E5E7EB);
    border-radius: 18px;
    box-shadow: var(--lp-shadow, 0 10px 30px rgba(14, 8, 43, 0.08));
    overflow: hidden;
    background: var(--lp-surface, #fff);
}

.lp-ux-modern .event-card {
    padding: 1rem !important;
}

.lp-ux-modern .contest-chip-category {
    background: var(--lp-ink, #0E082B) !important;
}

.lp-ux-modern .contest-chip-status.status-running,
.lp-ux-modern .contest-chip-status.running {
    background: var(--lp-green, #6C1CEA) !important;
}

.lp-ux-modern .contest-chip-status.status-upcoming,
.lp-ux-modern .contest-chip-status.upcoming {
    background: var(--lp-teal, #40D0DE) !important;
}

/* -------------------------------------------------------------------------- */
/* Header / footer chrome polish                                              */
/* -------------------------------------------------------------------------- */

.lp-ux-modern .vl-header-top-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2rem;
}

.lp-ux-modern .header-elements-1 {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    overflow: visible !important;
}

/* Keep dropdown panels above page content; do not clip them */
.lp-ux-modern .header-area,
.lp-ux-modern .header-area .container,
.lp-ux-modern .header-area .row,
.lp-ux-modern .header-area [class*="col-"],
.lp-ux-modern .header-elements,
.lp-ux-modern .main-menu,
.lp-ux-modern .main-menu > ul,
.lp-ux-modern .main-menu > ul > li {
    overflow: visible !important;
}

.lp-ux-modern .main-menu > ul > li {
    position: relative;
}

.lp-ux-modern .main-menu ul.dropdown-padding,
.lp-ux-modern .main-menu ul.sub-menu {
    white-space: normal;
    z-index: 1000;
}

.lp-ux-modern .main-menu ul.dropdown-padding li,
.lp-ux-modern .main-menu ul.sub-menu li {
    display: block;
    width: 100%;
}

.lp-ux-modern .vl-footer-two-col {
    padding-top: 3.5rem;
}

.lp-ux-modern .vl-footer-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.lp-ux-modern .vl-footer-menu li {
    margin: 0;
    padding: 0;
    line-height: 1.35;
}

.lp-ux-modern .vl-footer-menu a {
    text-decoration: none;
    color: inherit;
    opacity: 0.9;
    display: inline-block;
    padding: 0.15rem 0;
}

.lp-ux-modern .vl-footer-menu a:hover {
    color: var(--lp-green, #6C1CEA);
    opacity: 1;
}

/* Footer social — visible brand discs on dark footer */
.lp-ux-modern .vl-footer-social-1 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-ux-modern .vl-footer-social-1 a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #6C1CEA !important;
    color: #fff !important;
    text-decoration: none;
    border: 0;
    box-shadow: 0 4px 12px rgba(108, 28, 234, 0.28);
}

.lp-ux-modern .vl-footer-social-1 a:hover {
    background: #40D0DE !important;
    color: #0E082B !important;
    transform: translateY(-2px);
}

.lp-ux-modern .vl-footer-social-1 a i,
.lp-ux-modern .vl-footer-social-1 a .svg-inline--fa {
    color: inherit !important;
    font-size: 1rem;
    width: 1em;
    height: 1em;
}

/* Activities search: space between input and icon button */
.lp-ux-modern .activities-page .input-group {
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.lp-ux-modern .activities-page .input-group > .form-control {
    border-radius: 8px !important;
}

.lp-ux-modern .activities-page .input-group > .btn {
    border-radius: 8px !important;
    margin-left: 0 !important;
}
