/* Image Overlay Callout — standalone single panel (reuses tab_selector styles).
   The tab_selector zeroes top padding on mobile because its nav sat above;
   with no nav here we restore it so the panel isn't flush to the top. */

.tab-selector.image-overlay {
    /* Offset for the fixed header when scrolled to via an anchor link */
    scroll-margin-top: 130px;

    @media (max-width: 767px) {
        padding-top: 3rem;
    }
}

/* Swap placement on desktop: text (overlay) on the left, image on the right. */
@media (min-width: 768px) {
    .tab-selector.image-overlay .tab-selector__panel-inner {
        flex-direction: row-reverse;
    }

    /* Overlay now overlaps the image from the left, so flip the negative margin.
       tab_selector.css only transitions margin-left, so add margin-right here
       to keep the hover slide smooth. */
    .tab-selector.image-overlay .tab-selector__overlay {
        margin-left: 0;
        margin-right: -50px;
        transition: margin-right 0.3s ease;
    }

    .tab-selector.image-overlay a.tab-selector__panel-inner:hover .tab-selector__overlay {
        margin-left: 0;
        margin-right: 30px;
    }

    /* Move the frame accent to the side adjoining the overlay (image's left) */
    .tab-selector.image-overlay .tab-selector__image {
        border-right: 0;
        border-left: 15px solid var(--color-maroon);
    }
}