/*
 * NOCX Mic & Moment Visual Fixes v1.0.0
 * Scope: /samples/event-host-mc/ only (PHP gate + existing page body class).
 * DOM classes with "nocx-mm-" are added to exact targets by visual-fixes.js.
 */

/* TASK 1: About photo — fill its existing frame with a landscape crop.
 * Source photo remains unchanged; no pixel stretching or fake extension.
 */
body.industry-event-host-mc #about img.nocx-mm-about-cover {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center 29% !important;
}

/* TASK 3: Only Product Launches and Private Celebrations image elements.
 * Other four service-card images are left completely unchanged.
 */
body.industry-event-host-mc #services img.nocx-mm-service-cover {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center 30% !important;
}

/* Clip the existing media wrapper, not the surrounding card or section. */
body.industry-event-host-mc #about .nocx-mm-image-frame,
body.industry-event-host-mc #services .nocx-mm-image-frame {
    overflow: hidden;
}

/* Support existing <picture> wrappers without reflowing the card structure. */
body.industry-event-host-mc #about picture.nocx-mm-image-frame,
body.industry-event-host-mc #services picture.nocx-mm-image-frame {
    display: block;
    width: 100%;
    height: 100%;
}

/* TASK 2: Reverse nav CTA colors. Preserve spacing, font and destination. */
body.industry-event-host-mc header.sample-header .nocx-mm-availability-cta {
    background: #f8fbff !important;
    color: #203d68 !important;
}

body.industry-event-host-mc header.sample-header .nocx-mm-availability-cta:hover {
    background: #eaf2ff !important;
    color: #183354 !important;
}

body.industry-event-host-mc header.sample-header .nocx-mm-availability-cta:active {
    background: #dceafd !important;
    color: #183354 !important;
}

body.industry-event-host-mc header.sample-header .nocx-mm-availability-cta:focus-visible {
    background: #f8fbff !important;
    color: #203d68 !important;
    outline: 2px solid #74a8ea;
    outline-offset: 3px;
}

/* Allow a child span / icon label to inherit the new, legible text color. */
body.industry-event-host-mc header.sample-header .nocx-mm-availability-cta > span {
    color: inherit !important;
}

/* TASK 4: Remove ONLY the experience grid container's overlay and border.
 * Leave its six articles, grid sizing, gaps, copy and breakpoints intact.
 */
body.industry-event-host-mc #gallery .experience-text-grid {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}