/*
 * Hero banner variants (research/_hero.blade.php). Only the background treatment differs; the text, chips
 * and buttons are the same elements as the default hero. Static CSS, CSP-safe. Mobile first: on a phone the
 * photo is a banner strip above the text; the shaped layouts apply from 64rem. Decorative only.
 */
.rs-hero--v { display: flex; flex-direction: column; isolation: isolate; background: var(--rs-navy); }
.rs-hero--v::before { content: none; }
.rs-hero--v .rs-hero__media { order: -1; position: relative; height: 13rem; overflow: hidden; }
.rs-hero--v .rs-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rs-hero--v .rs-hero__in { padding: 1.7rem 1.3rem 2.2rem; max-width: none; }
.rs-hero--v h1 { font-size: clamp(1.8rem, 6vw, 3rem); }

/* light variants: dark text on a tinted (not white) panel, so the white stat tiles, chips and cards below it stand out */
.rs-hero--light { background: linear-gradient(135deg, #c9def3 0%, #dfecf9 55%, #efe0f0 100%); color: var(--rs-ink); border: 1px solid rgba(11, 99, 153, .28); box-shadow: 0 22px 40px -26px rgba(0, 40, 90, .55); }
.rs-hero--stripe.rs-hero--light { background: linear-gradient(135deg, #d4e3f5 0%, #ecdff0 60%, #f8e6ea 100%); }
.rs-hero--diamonds.rs-hero--light { background: linear-gradient(135deg, #c3dbf2 0%, #dbeaf8 60%, #e9f3fb 100%); }
.rs-hero--light h1 { color: var(--rs-navy); }
.rs-hero--light h1 em { background: linear-gradient(90deg, var(--rs-magenta), var(--rs-ocean)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rs-hero--light .rs-lead { color: #334155; }
.rs-hero.rs-hero--light .rs-eyebrow { color: var(--rs-magenta); background: rgba(195, 0, 128, .08); border-color: rgba(195, 0, 128, .3); }
.rs-hero--light .rs-chip { color: var(--rs-deep); background: #fff; border-color: rgba(11, 99, 153, .25); }
.rs-hero--light .rs-btn--ghost { color: var(--rs-deep); border-color: rgba(0, 56, 97, .35); background: #fff; }
.rs-hero--light .rs-btn--ghost:hover { border-color: var(--rs-ocean); color: var(--rs-ocean); }
.rs-hero--light .rs-btn--yellow { box-shadow: 0 10px 22px -10px rgba(190, 170, 0, .8); }

/* overlay: photo under a navy wash */
.rs-hero--overlay .rs-hero__inset { display: none; }
.rs-hero--overlay .rs-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 24, 50, .55), transparent 60%); }

/* diamonds: phone shows the first photo only */
.rs-hero--diamonds .rs-hero__d { display: block; position: relative; width: 100%; height: 100%; }
.rs-hero--diamonds .rs-hero__d img { position: static; }
.rs-hero--diamonds .rs-hero__d--2, .rs-hero--diamonds .rs-hero__d--3 { display: none; }

/* circle: phone shows a round photo on a coloured strip */
.rs-hero--circle .rs-hero__media { display: flex; align-items: center; justify-content: center; height: 14rem; background: linear-gradient(135deg, var(--rs-navy), var(--rs-deep) 55%, #7a1c78); }
.rs-hero--circle .rs-hero__c { width: 11rem; height: 11rem; border-radius: 50%; border: 6px solid #fff; outline: 3px dotted rgba(255, 255, 255, .7); outline-offset: .5rem; }

@media (min-width: 64rem) {
  .rs-hero--v { display: block; min-height: 31rem; }
  .rs-hero--v .rs-hero__media { position: absolute; order: 0; height: auto; }
  .rs-hero--v .rs-hero__in { position: relative; z-index: 3; padding: 3.4rem 3rem 3.6rem; max-width: 54%; }
  .rs-hero--v h1 { font-size: clamp(2rem, 3.4vw, 3.1rem); }

  /* split: slanted photo on the right with a magenta band on its edge */
  .rs-hero--split .rs-hero__media { right: 0; top: 0; bottom: 0; width: 50%; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
  .rs-hero--split .rs-hero__media::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, var(--rs-magenta), var(--rs-ocean)); clip-path: polygon(20% 0, 27% 0, 7% 100%, 0 100%); }

  /* chevron: navy arrow pointing into the photo */
  .rs-hero--chevron .rs-hero__media { inset: 0 0 0 40%; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 15% 50%); }
  .rs-hero--chevron .rs-hero__media::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--rs-ocean); clip-path: polygon(0 0, 5% 0, 20% 50%, 5% 100%, 0 100%, 15% 50%); }
  .rs-hero--chevron .rs-hero__in { max-width: 52%; }

  /* overlay: full photo, navy wash from the left, round inset photo */
  .rs-hero--overlay .rs-hero__media { inset: 0; }
  .rs-hero--overlay .rs-hero__media::after { background: linear-gradient(90deg, rgba(0, 24, 50, .95) 0, rgba(0, 24, 50, .84) 42%, rgba(0, 24, 50, .2) 100%); }
  .rs-hero--v.rs-hero--overlay .rs-hero__media .rs-hero__inset { display: block; position: absolute; z-index: 2; right: 3.5rem; top: 50%; width: 19rem; height: 19rem; transform: translateY(-50%); border-radius: 50%; border: 6px solid #fff; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .6); }
  .rs-hero--overlay .rs-hero__in { max-width: 56%; }

  /* diamonds: three diamond-cropped photos beside the text, blue corner triangles */
  .rs-hero--diamonds .rs-hero__media::before { content: ""; display: block; position: absolute; right: 0; top: 0; width: 60%; height: 46%; z-index: 0; background: linear-gradient(135deg, var(--rs-ocean), var(--rs-cyan)); clip-path: polygon(30% 0, 100% 0, 100% 100%); opacity: .9; }
  .rs-hero--diamonds::after { content: ""; position: absolute; left: 0; bottom: 0; width: 14%; height: 30%; background: linear-gradient(45deg, var(--rs-magenta), #7a1c78); clip-path: polygon(0 40%, 0 100%, 60% 100%); }
  .rs-hero--diamonds .rs-hero__media { right: 0; top: 0; bottom: 0; width: 50%; overflow: visible; }
  /* each diamond is a white square clipped to a diamond, with the photo clipped inside it (inset = white rim);
     the shadow is a drop-shadow on the group, so it follows the shape. The photo always fills its diamond. */
  .rs-hero--diamonds .rs-hero__media { filter: drop-shadow(0 16px 14px rgba(0, 24, 50, .32)); }
  .rs-hero--diamonds .rs-hero__d { position: absolute; display: block; width: 48%; height: auto; aspect-ratio: 1; background: #fff; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  .rs-hero--diamonds .rs-hero__d img { position: absolute; inset: 3.5%; width: 93%; height: 93%; object-fit: cover; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  .rs-hero--diamonds .rs-hero__d--1 { left: 0; top: 25%; }
  .rs-hero--diamonds .rs-hero__d--2 { display: block; left: 40%; top: 2%; }
  .rs-hero--diamonds .rs-hero__d--3 { display: block; left: 52%; top: 42%; width: 44%; }
  .rs-hero--diamonds .rs-hero__in { max-width: 50%; }

  /* circle: round photo on a coloured panel, text on white */
  .rs-hero--circle { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .rs-hero--circle .rs-hero__media { position: relative; height: auto; min-height: 31rem; }
  .rs-hero--circle .rs-hero__c { width: min(100%, 20rem); height: auto; aspect-ratio: 1; border-width: 8px; }
  .rs-hero--circle .rs-hero__in { max-width: none; align-self: center; }

  /* stripe: reversed slant, magenta and yellow bands, dotted corner */
  .rs-hero--stripe .rs-hero__media { right: 0; top: 0; bottom: 0; width: 46%; clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%); }
  .rs-hero--stripe .rs-hero__media::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, var(--rs-magenta) 0 68%, transparent 68% 76%, var(--rs-yellow) 76%); clip-path: polygon(0 0, 11% 0, 33% 100%, 22% 100%); }
  .rs-hero--stripe::before { content: ""; position: absolute; left: 1.2rem; top: 1rem; width: 12rem; height: 5rem; background: radial-gradient(circle, rgba(0, 56, 97, .4) 2px, transparent 2.6px) 0 0 / 16px 16px; }
  .rs-hero--stripe .rs-hero__in { max-width: 56%; }
}
@media print { .rs-hero--v .rs-hero__media { display: none; } .rs-hero--v { background: #fff; color: #000; } }

/* Portrait photos: keep the face in frame when the banner crops (pass 'focus' => 'top' to the hero). */
.rs-hero--top .rs-hero__media img { object-position: 50% 14%; }