/* OPH002 (DE-44) — landing-page-specific overrides on top of mobile-optimized.css.
   Loaded only by the oph002 view, so these rules apply to OPH002 pages only. */

/* Keep the hero image top-aligned with the copy (instead of vertically centred against
   the taller text column) and let it float alongside the text while scrolling. */
.hero-content {
    align-items: flex-start;
}

.hero-right {
    position: sticky;
    top: var(--spacing-lg);
    align-self: flex-start;
}

/* Balance the two hero columns evenly on desktop. By default the image column
   (.hero-right: flex 0 0 auto) sizes to the large image and ends up wider than the
   text column, leaving the copy cramped. Force a 50/50 split and let the image fill
   its half. (Below 769px the image column is hidden, so this only affects desktop.) */
@media (min-width: 769px) {
    .hero-content > .hero-left,
    .hero-content > .hero-right {
        flex: 1 1 50%;
        min-width: 0;
        max-width: 50%;
    }

    .hero-right .study-image-container,
    .hero-right .studyImageContainer {
        width: 100%;
    }

    .hero-right .study-hero-image {
        width: 100%;
        height: auto;
        max-height: none;
    }
}

/* The oph002 view loads mobile-optimized.css, which has no .alert rules. Mirror the default-view
   alert styling so the form's status messages and the "site not valid" message (shown when
   def_facility is present but not a configured site) render as a proper, visible alert. */
.alert {
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}