/***********************************************************************************************************
* Layout Blocking
************************************************************************************************************/

.oh-mi-item {
    width:100%;
    height: 100%;
    min-width: 0;
}

.oh-mi-item .oh-mi-container {
    --pad-vert: var(--base-50);
    --pad-horiz: var(--base-75);
    --border-width: 1px;

    display: flex;
    flex-direction: column;
    min-height: 100%;
    justify-content: space-between;
    padding: var(--pad-vert) var(--pad-horiz);
    background: var(--light-bg-color);
    border: var(--border-width) solid var(--light-border-color);
    border-radius: var(--border-radius-md);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.oh-mi-item.oh-mi-is-clickable {
    cursor: pointer;
}

.oh-mi-item.oh-mi-is-clickable:hover .oh-mi-container,
.oh-mi-item.oh-mi-is-clickable:focus-visible .oh-mi-container {
    border-color: var(--accent-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.oh-mi-item.oh-mi-is-clickable:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}



/* Main site mobile breakpoint */
@media screen and (max-width: 781px) {

    .oh-mi-item .oh-mi-container {
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        gap: var(--base-75);
        padding: var(--base-50);
    }
    .oh-mi-item .oh-mi-thumbnail{
        flex: 0 0 32%;
        min-width: 0;
        max-width: 32%;
        align-self: stretch;
        height: auto!important;
        aspect-ratio: auto;
    }
    .oh-mi-item .oh-mi-details {
        flex: 1 1 auto;
        min-width: 0;
    }
    .oh-mi-item .oh-mi-level-share {
        flex: 0 0 64px;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: var(--base-50);
    }
    .oh-mi-item [data-oh-prop="title"] {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        font-size: 17px;
        line-height: 1.15;
        min-height: 0;
    }
    .oh-mi-item [data-oh-prop="description"] {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: 14px;
        line-height: 1.3;
    }
    .oh-mi-item .oh-mi-details [data-oh-record="media-item"][data-oh-prop] {
        margin-bottom: var(--base-50);
    }

}

@media screen and (max-width: 500px) {
    .oh-mi-item .oh-mi-container {
        flex-direction: column;
    }

    .oh-mi-item .oh-mi-thumbnail {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
        height: auto!important;
        aspect-ratio: 16 / 6;
    }

    .oh-mi-item .oh-mi-level-share {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
    }

    .oh-mi-item [data-oh-prop="media_type"] {
        justify-content: center;
    }

    .oh-mi-item [data-oh-prop="title"] {
        -webkit-line-clamp: 4;
        min-height: 0;
        text-align: center;
    }

    .oh-mi-item [data-oh-prop="description"] {
        -webkit-line-clamp: 2;
        text-align: center;
    }

    .oh-mi-item .oh-mi-level-share [data-oh-prop="difficulty_level"] {
        flex-direction: row;
    }
}



/***********************************************************************************************************
* Thumbnail
************************************************************************************************************/
.oh-mi-item .oh-mi-empty[data-oh-prop="thumbnail"] .with-value {
    display: none;
}
.oh-mi-item :not(.oh-mi-empty)[data-oh-prop="thumbnail"] .without-value {
    display: none;
}

.oh-mi-item .oh-mi-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 6;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: #f4f6f8;
    border-radius: var(--border-radius-md);
}

.oh-mi-item [data-oh-prop="thumbnail"],
.oh-mi-item [data-oh-prop="thumbnail"] .with-value {
    width: 100%;
    height: 100%;
}

.oh-mi-item [data-oh-prop="thumbnail"] {
    position: relative;
}

.oh-mi-item [data-oh-prop="thumbnail"] .with-value {
    display: block;
    position: relative;
}

.oh-mi-item .oh-mi-thumbnail-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oh-mi-item.oh-mi-is-document .oh-mi-thumbnail-img {
    object-position: center -10px;
}

.oh-mi-item .oh-mi-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.92;
    transform: scale(1);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.oh-mi-item .oh-mi-play-overlay i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 48px;
    border-radius: 14px;
    background: #ff0000;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.oh-mi-item.oh-mi-is-video:hover .oh-mi-play-overlay,
.oh-mi-item.oh-mi-is-video:focus-visible .oh-mi-play-overlay {
    opacity: 1;
}

.oh-mi-item.oh-mi-is-video:hover .oh-mi-play-overlay i,
.oh-mi-item.oh-mi-is-video:focus-visible .oh-mi-play-overlay i {
    background: #cc0000;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ No Thumb ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.oh-mi-item [data-oh-prop="thumbnail"] .without-value {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.oh-mi-item [data-oh-prop="thumbnail"] .without-value i {
    font-size: 100px;
}


/***********************************************************************************************************
* Details Section
************************************************************************************************************/
.oh-mi-item .oh-mi-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.oh-mi-item .oh-mi-details [data-oh-record="media-item"][data-oh-prop] {
    margin-top: var(--base-75);
}

@media screen and (max-width: 781px) {
    .oh-mi-item .oh-mi-details [data-oh-record="media-item"][data-oh-prop="media_type"],
    .oh-mi-item .oh-mi-details [data-oh-record="media-item"][data-oh-prop="title"],
    .oh-mi-item .oh-mi-details [data-oh-record="media-item"][data-oh-prop="description"] {
        margin-top: var(--base-20)!important;
        margin-bottom: var(--base-20)!important;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Media Type ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.oh-mi-item [data-oh-prop="media_type"] {
    display: flex;

}
.oh-mi-item [data-oh-prop="media_type"] [data-oh-role="value"] {
    background-color: var(--accent-bg-color-light);
    color: var(--accent-color);
    padding: var(--base-20) var(--base-75);
    border-radius: var(--border-radius-md);
}

.oh-mi-item [data-oh-prop="media_type"][data-oh-value="Manual"] [data-oh-role="value"],
.oh-mi-item [data-oh-prop="media_type"][data-oh-value="Manual (3rd Party)"] [data-oh-role="value"] {
    background-color: #d7efe2;
    color: #2da36a;
}

.oh-mi-item [data-oh-prop="media_type"][data-oh-value="Video"] [data-oh-role="value"],
.oh-mi-item [data-oh-prop="media_type"][data-oh-value="Video (3rd Party)"] [data-oh-role="value"] {
    background-color: #dae4fc;
    color:#316ef2
}

.oh-mi-item [data-oh-prop="media_type"][data-oh-value="Web Link"] [data-oh-role="value"] {
    background-color: #e7defb;
    color: #5e03c9;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Title ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.oh-mi-item [data-oh-prop="title"] {
    display: -webkit-box;
    font-size: var(--base-font-md-lg);
    font-weight: bold;
    line-height: 1.15;
    min-height: calc(var(--base-font-md-lg) * 1.15 * 2);
    overflow-wrap: anywhere;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.oh-mi-item [data-oh-prop="description"] {
    display: -webkit-box;
    flex: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media screen and (max-width: 781px) {
    .oh-mi-item [data-oh-prop="title"] {
        font-size: 20px;
        -webkit-line-clamp: 4;
        min-height: 0;
    }
}

@media screen and (max-width: 500px) {
    .oh-mi-item [data-oh-prop="title"] {
        font-size: 20px;
    }
}

/***********************************************************************************************************
* Difficulty and Share Section
************************************************************************************************************/

.oh-mi-item .oh-mi-level-share {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--base-75);
    margin-top: var(--base-50);
}

.oh-mi-item .oh-mi-level-share [data-oh-prop="difficulty_level"] {
    display: inline-flex;
    align-items: center;
    gap: var(--base-40);
}

.oh-mi-item .oh-mi-level-share [data-oh-prop="difficulty_level"] [data-oh-role="value"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--base-50);
    border-radius: 50%;
    border: var(--border-width) solid var(--accent-bg-color-light);
    font-size: var(--base-font-md);
    width: var(--base-font-md);
    height:var(--base-font-md);
    line-height: var(--base-font-md);
    text-align: center;
}

.oh-mi-item .oh-mi-level-share [data-oh-prop="difficulty_level"] [data-oh-role="label"] {
    display: block;
    color: var(--med-text-color-light);
    font-size: var(--base-font-sm);
    text-align: center;
}

@media screen and (max-width: 781px) {
    .oh-mi-item .oh-mi-level-share [data-oh-prop="difficulty_level"] {
        flex-direction: column;
        gap: var(--base-30);
    }
}

@media screen and (max-width: 500px) {
    .oh-mi-item .oh-mi-level-share [data-oh-prop="difficulty_level"] {
        flex-direction: row;
    }
}

/* RV Service Difficulty Meter colors (stored level 5 is delivered as display level 4). */
.oh-mi-item .oh-mi-level-share [data-oh-prop="difficulty_level"] [data-oh-role="value"] {
    color: #1a1a1a;
    font-weight: 700;
}

.oh-mi-item .oh-mi-level-share [data-oh-prop="difficulty_level"][data-oh-value="0"] [data-oh-role="value"] {
    background: #dedede;
    border-color: #dedede;
}

.oh-mi-item .oh-mi-level-share [data-oh-prop="difficulty_level"][data-oh-value="1"] [data-oh-role="value"] {
    background: #8ed3e1;
    border-color: #8ed3e1;
}

.oh-mi-item .oh-mi-level-share [data-oh-prop="difficulty_level"][data-oh-value="2"] [data-oh-role="value"] {
    background: #cde38b;
    border-color: #cde38b;
}

.oh-mi-item .oh-mi-level-share [data-oh-prop="difficulty_level"][data-oh-value="3"] [data-oh-role="value"] {
    background: #fbe17d;
    border-color: #fbe17d;
}

.oh-mi-item .oh-mi-level-share [data-oh-prop="difficulty_level"][data-oh-value="4"] [data-oh-role="value"] {
    background: #f69150;
    border-color: #f69150;
}

.oh-mi-item .oh-mi-level-share [data-oh-prop="share"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    color: var(--med-text-color);
    cursor: pointer;
}

.oh-mi-item .oh-mi-level-share [data-oh-prop="share"]:hover,
.oh-mi-item .oh-mi-level-share [data-oh-prop="share"]:focus-visible {
    color: var(--accent-color);
}

.oh-mi-item .oh-mi-level-share [data-oh-prop="share"]:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: var(--border-radius-md);
}

.oh-mi-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
}

.oh-mi-lightbox[hidden] {
    display: none;
}

.oh-mi-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
}

.oh-mi-lightbox-dialog {
    position: absolute;
    inset: 5vh 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oh-mi-lightbox-close {
    position: absolute;
    top: -42px;
    right: 0;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.oh-mi-lightbox-body {
    width: min(100%, 1080px);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oh-mi-lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    background: #fff;
}

.oh-mi-lightbox-video {
    width: min(100%, 1080px);
    max-height: 90vh;
    background: #000;
}

.oh-mi-lightbox-frame {
    width: min(100%, 1080px);
    aspect-ratio: 16 / 9;
    border: 0;
    background: #000;
}

.oh-mi-lightbox-open {
    overflow: hidden;
}
/* Share-link target: flashes, then settles on a tinted background with an accent border. */
.oh-mi-item.oh-mi-linked-resource .oh-mi-container {
    /* Lighter than --accent-bg-color-light so media-type pills stay visible on the highlighted card. */
    --oh-mi-linked-bg: #eef2fb;
    background: var(--oh-mi-linked-bg);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color);
}

.oh-mi-item.oh-mi-highlight-flash .oh-mi-container {
    animation: oh-mi-linked-flash 0.5s ease-in-out 4;
}

@keyframes oh-mi-linked-flash {
    0%, 100% { background: var(--oh-mi-linked-bg); }
    50% { background: var(--light-bg-color, #fefefe); }
}

@media (prefers-reduced-motion: reduce) {
    .oh-mi-item.oh-mi-highlight-flash .oh-mi-container {
        animation: none;
    }
}

/* Customer Care-only actions menu; sits after the share control so the public card layout is unchanged. */
.oh-mi-item .oh-mi-level-share [data-oh-prop="share"] {
    margin-left: auto;
}

.oh-mi-item .oh-mi-cc-menu {
    position: relative;
    display: inline-flex;
}

.oh-mi-item .oh-mi-cc-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-md);
    background: transparent;
    color: var(--med-text-color);
    cursor: pointer;
}

.oh-mi-item .oh-mi-cc-menu-toggle:hover,
.oh-mi-item .oh-mi-cc-menu-toggle[aria-expanded="true"] {
    color: var(--accent-color);
}

.oh-mi-item .oh-mi-cc-menu-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.oh-mi-item .oh-mi-cc-menu-list {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 100%;
    min-width: 170px;
    padding: var(--base-30) 0;
    background: var(--light-bg-color, #fefefe);
    border: 1px solid var(--med-border-color, #a0a0a0);
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.oh-mi-item .oh-mi-cc-menu-list[hidden] {
    display: none;
}

.oh-mi-item .oh-mi-cc-menu-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
    padding: var(--base-50) var(--base-75);
    color: var(--med-text-color);
    text-decoration: none;
    white-space: nowrap;
}

.oh-mi-item .oh-mi-cc-menu-item:hover,
.oh-mi-item .oh-mi-cc-menu-item:focus-visible {
    background: var(--accent-bg-color-light, #dee5f7);
    color: var(--accent-color);
    outline: none;
}

@media screen and (max-width: 781px) {
    .oh-mi-item .oh-mi-level-share [data-oh-prop="share"] {
        margin-left: 0;
        margin-top: auto;
    }
}

@media screen and (max-width: 500px) {
    .oh-mi-item .oh-mi-level-share [data-oh-prop="share"] {
        margin-left: auto;
        margin-top: 0;
    }
}