:root { --content:1180px; }

/* RMI Homepage: prevent update carousel escaping its section and fix hero composition.
   Corrected from user screenshots, 2026-10-21. */

/* The original global .hero-carousel was absolutely positioned: its nearest positioned
   ancestor was missing on this premium page, causing "Ministry life in motion" to cover the hero. */
.premium-carousel-frame {
  position: relative;
  isolation: isolate;
  width: min(1180px,calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
  display: block;
  min-height: 220px;
  overflow: hidden;
  border-radius: 20px;
  background: #eaf8fd;
  border: 1px solid #cfe7f1;
}
.premium-carousel-frame .hero-carousel {
  position: relative;
  inset: auto;
  width: 100%;
  height: 220px;
  min-height: 220px;
  max-height: none;
  overflow: hidden;
  border-radius: inherit;
}
.premium-carousel-frame .hero-carousel-empty {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 220px;
  padding: 27px 36px;
  background: #eaf8fd;
  color: #13354b;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  overflow-wrap: anywhere;
}
.premium-carousel-frame .hero-carousel-empty strong {
  display:block;
  font-size:clamp(16px,2.4vw,22px);
  line-height:1.35;
}
.premium-carousel-frame .hero-carousel-empty p {
  max-width: 680px;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}
/* Allow JS-created slides to remain confined to the dedicated update panel. */
.premium-carousel-frame .hero-slides { position:absolute; inset:0; }
.premium-carousel-frame .hero-slide { max-width:100%; max-height:100%; }

/* Avoid large editorial type colliding on medium and small viewports. */
.hero-inner {
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(24px,3vw,48px);
  align-items:center;
}
.hero-copy {min-width:0; max-width:100%;}
.hero h1 {
  font-size:clamp(48px,5.2vw,78px);
  line-height:1.14;
  letter-spacing:-.042em;
  margin:25px 0 27px;
  overflow-wrap:normal;
}
.hero h1 em {display:inline;}
.hero-intro {max-width:600px; line-height:1.8;}
.hero-visual {min-width:0;}
.hero-note {max-width:min(250px,58%);}

/* Seamless RMI emblem: same transparent logo presentation as RACE and Refuge City Care. */
.ministry-card-visual .rmi-transparent-brand {
  position:relative;
  z-index:2;
  flex:0 0 38%;
  height:120px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  margin-left:5px;
}
.ministry-card-visual .rmi-transparent-brand img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 3px 2px rgba(19,53,75,.06));
}
/* Keep the previously approved dark HERO panel, but remove the inner rectangular logo backdrop. */
.hero-logo-panel.hero-logo-panel-dark img[src$="rmi-hero-logo-transparent.png"] {
  display:block;
  width:min(100%,310px);
  max-height:295px;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  background:transparent;
  border:0;
  border-radius:0;
  filter:none;
}

@media (max-width:1100px) {
  .hero-inner {grid-template-columns:minmax(0,1fr); gap:30px; padding-top:70px;}
  .hero-copy {max-width:780px;}
  .hero h1 {font-size:clamp(53px,7vw,79px);}
  .hero-visual {height:auto; min-height:425px;}
  .hero-logo-panel.hero-logo-panel-dark {min-height:370px;}
}
@media (max-width:680px) {
  .hero-inner {grid-template-columns:minmax(0,1fr);padding-top:52px;gap:18px;}
  .hero h1 {font-size:clamp(40px,9vw,60px);line-height:1.13;letter-spacing:-.035em;margin:20px 0 22px;}
  .hero-intro {font-size:14px;line-height:1.72;}
  .hero-visual {min-height:345px;}
  .hero-logo-panel.hero-logo-panel-dark {min-height:295px;}
  .hero-logo-panel.hero-logo-panel-dark img[src$="rmi-hero-logo-transparent.png"] {width:min(100%,235px);max-height:220px;}
  .hero-note {max-width:55%;}
  .premium-carousel-frame {width:calc(100% - 36px);min-height:185px;}
  .premium-carousel-frame .hero-carousel {height:185px;min-height:185px;}
  .premium-carousel-frame .hero-carousel-empty {min-height:185px;padding:20px 24px;}
  .ministry-card-visual .rmi-transparent-brand {height:112px;flex-basis:40%;margin-left:3px;}
}

/* Keep the hope message BELOW the crest card, not on top of "A Home for Hope". */
.hero-visual {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.hero-note {
  position:relative;
  inset:auto;
  right:auto;
  bottom:auto;
  transform:none;
  width:min(330px,90%);
  max-width:100%;
  box-sizing:border-box;
  margin:0;
  background:#FFFFFF;
  border:1px solid #cfe7f1;
  border-left:4px solid #D8AC52;
  box-shadow:0 8px 22px rgba(19,53,75,.10);
}
.hero-note strong {color:#13354B;}
.hero-note small {color:#426679;line-height:1.5;}
@media (max-width:1100px) {
  .hero-visual {min-height:525px;}
}
@media (max-width:680px) {
  .hero-visual {min-height:440px;gap:12px;}
  .hero-note {width:min(315px,96%);}
}

/* 2026-10-21: ROOT CAUSE FIX — the legacy public/styles.css assigned a GRID
   to the outer .hero itself. That trapped .hero-inner in HALF of the available
   page width, then the premium two-column grid was laid out inside that half.
   This caused “Transformed” to cross onto the logo on tablet/desktop. */
.hero {
  display: block;
  grid-template-columns: none;
  align-items: initial;
  gap: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.hero > .hero-inner {
  width:min(1180px,calc(100% - 64px));
  max-width:1180px;
  margin-inline:auto;
  min-width:0;
}
.hero .hero-copy,
.hero .hero-visual {
  min-width:0;
}
.hero .hero-copy h1 {
  max-width:100%;
}
@media(max-width:680px) {
  .hero > .hero-inner {width:calc(100% - 36px);}
}