/* 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;
}

/* DE-1044: add vertical spacing between the numbered steps listed in the study
   description to improve readability. Loaded only by the oph002 view, so this applies
   to all three OPH002 landing pages (India/English, Spain/Spanish, Germany/German). */
.hero-subtitle li {
    margin-bottom: var(--spacing-sm);
}

.hero-subtitle li:last-child {
    margin-bottom: 0;
}