/* Shared internal-page hero (template-parts/components/internal-hero.php). The homepage hero is separate. */
.rdo-internal-hero { background: var(--deep); color: var(--white); overflow: hidden; }
/* One shared hero height per breakpoint, so every internal hero is the same size whatever its photograph or heading. */
:root { --internal-hero-height: 560px; }
.rdo-internal-hero-grid { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: var(--internal-hero-height); position: relative; }
.rdo-internal-hero-copy { align-self: center; max-width: 610px; padding: 40px 48px 56px 0; animation: rdo-hero-rise 760ms var(--ease-premium) both; }

/* Breadcrumb stays quiet so it never competes with the headline. */
.rdo-internal-hero .breadcrumbs { color: var(--ice); font-size: 12px; gap: 10px; margin-bottom: 30px; min-height: 0; opacity: .72; }
.rdo-internal-hero .breadcrumbs a { color: var(--ice); transition: color var(--motion-fast) var(--ease-premium), opacity var(--motion-fast) var(--ease-premium); }
.rdo-internal-hero .breadcrumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.rdo-internal-hero .breadcrumbs a:focus-visible { outline-color: var(--white); }

.rdo-internal-hero .eyebrow { color: var(--gold); }
.rdo-internal-hero h1 { color: var(--white); font-size: clamp(35px, 3.4vw, 48px); line-height: 1.08; margin: 0 0 18px; }
.rdo-internal-hero-accent { color: var(--gold); }
.rdo-internal-hero-intro { color: var(--ice); font-size: 15px; line-height: 1.65; max-width: 540px; }
.rdo-internal-hero-intro p { margin-bottom: 0; }
.rdo-internal-hero-intro p + p { margin-top: 10px; }
.rdo-internal-hero-intro strong { color: var(--white); }

.rdo-internal-hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; }
.rdo-internal-hero .button { background: var(--gold); color: var(--ink); }
.rdo-internal-hero .button:hover { background: var(--white); color: var(--ink); }
.rdo-internal-hero .button:focus-visible, .rdo-internal-hero-secondary:focus-visible { outline-color: var(--white); }
.rdo-internal-hero .button span, .rdo-internal-hero-secondary span { display: inline-block; transition: transform var(--motion-fast) var(--ease-premium); }
.rdo-internal-hero .button:hover span, .rdo-internal-hero-secondary:hover span { transform: translateX(3px); }
.rdo-internal-hero-secondary { color: var(--white); font-size: 13px; font-weight: 600; text-underline-offset: 4px; }
.rdo-internal-hero-secondary:hover { color: var(--white); text-decoration: underline; }

/* Photo variant: large image that runs to the page edge, with a navy fade into the copy. */
.rdo-internal-hero-visual { align-self: stretch; animation: rdo-hero-fade 900ms var(--ease-premium) 120ms both; margin: 0; min-height: var(--internal-hero-height); overflow: hidden; position: relative; }
/* Percentages here are of the hero grid, so the photo starts at the second column and reaches the page edge at any container width. */
.rdo-internal-hero--image .rdo-internal-hero-visual { bottom: 0; left: calc(100% / 2.05); position: absolute; right: calc((100% - 100vw) / 2); top: 0; }
.rdo-internal-hero--image .rdo-internal-hero-visual::after { background: linear-gradient(90deg, var(--deep) 0%, rgba(24,46,111,.4) 22%, transparent 56%), linear-gradient(0deg, rgba(23,52,119,.55) 0%, transparent 38%); content: ''; inset: 0; pointer-events: none; position: absolute; }
.rdo-internal-hero--image .rdo-internal-hero-image { display: block; height: 100%; min-height: var(--internal-hero-height); object-fit: cover; object-position: var(--hero-position, center); width: 100%; }

/* Emblem variant: the page's own service illustration, contained on a light panel. */
.rdo-internal-hero--emblem .rdo-internal-hero-visual { align-self: center; background: var(--ice); border-radius: 16px; display: grid; margin-block: 40px; min-height: 340px; place-items: center; }
.rdo-internal-hero--emblem .rdo-internal-hero-image { aspect-ratio: 1; border-radius: 50%; display: block; height: auto; object-fit: cover; width: min(270px, 62%); }

/* Text-only variant. */
.rdo-internal-hero--no-image .rdo-internal-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 320px; }
.rdo-internal-hero--no-image .rdo-internal-hero-copy { max-width: 760px; padding-right: 0; }
.rdo-internal-hero--no-image .rdo-internal-hero-intro { max-width: 640px; }

/* Compact variant for utility pages. */
.rdo-internal-hero--compact .rdo-internal-hero-grid { min-height: 240px; }
.rdo-internal-hero--compact .rdo-internal-hero-copy { padding-block: 30px 44px; }
.rdo-internal-hero--compact h1 { font-size: clamp(30px, 3vw, 40px); }

@keyframes rdo-hero-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rdo-hero-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {
    :root { --internal-hero-height: 640px; }
    .rdo-internal-hero-grid { min-height: var(--internal-hero-height); }
    .rdo-internal-hero-copy { padding: 34px 28px 44px 0; }
    .rdo-internal-hero-visual, .rdo-internal-hero--image .rdo-internal-hero-image { min-height: var(--internal-hero-height); }
    .rdo-internal-hero--emblem .rdo-internal-hero-visual { min-height: 300px; }
    .rdo-internal-hero--no-image .rdo-internal-hero-grid { min-height: 280px; }
}
@media (max-width: 767px) {
    .rdo-internal-hero-grid, .rdo-internal-hero--no-image .rdo-internal-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .rdo-internal-hero-copy { padding: 28px 0 30px; }
    .rdo-internal-hero .breadcrumbs { margin-bottom: 22px; }
    .rdo-internal-hero h1 { font-size: clamp(32px, 9vw, 42px); }
    .rdo-internal-hero-intro { font-size: 14px; }
    .rdo-internal-hero-actions .button { width: 100%; }
    .rdo-internal-hero--image .rdo-internal-hero-visual { aspect-ratio: 1.6; bottom: auto; left: auto; margin-inline: calc((100% - 100vw) / 2); min-height: 0; position: relative; right: auto; top: auto; }
    .rdo-internal-hero--image .rdo-internal-hero-visual::after { background: linear-gradient(180deg, var(--deep), rgba(24,46,111,.1) 40%, transparent 72%); }
    .rdo-internal-hero--image .rdo-internal-hero-image { min-height: 0; }
    .rdo-internal-hero--emblem .rdo-internal-hero-visual { margin: 0 0 30px; min-height: 220px; }
    .rdo-internal-hero--emblem .rdo-internal-hero-image { width: min(180px, 52%); }
    .rdo-internal-hero--compact .rdo-internal-hero-copy { padding-block: 22px 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .rdo-internal-hero-copy, .rdo-internal-hero-visual { animation: none; }
    .rdo-internal-hero .button span, .rdo-internal-hero-secondary span { transition: none; }
}