/* ==========================================================================
   Response options - the three ways to coordinate a response after an alert
   Companion to the "How it works" strip (.sgfs); same tokens and type scale,
   but the cards run photo-over-copy because these are three parallel options
   rather than five sequential steps. Everything is scoped under .sgro.
   ========================================================================== */

.sgro{
  /* Page tokens, inherited where the site defines them so this module tracks
     any future change. Fallbacks match the values the other modules ship with. */
  --sgro-navy:var(--sg-navy,#305387);
  --sgro-navy-deep:var(--sg-navy-deep,#264472);
  --sgro-orange:var(--sg-orange,#ff671f);
  --sgro-ink:var(--sg-ink,#233044);
  --sgro-line:var(--sg-hairline,#e2e8f1);
  /* the site's --sg-muted (#7c879b) only reaches ~3.5:1 on white, so body copy
     uses a darker step of the same hue to clear 4.5:1 */
  --sgro-muted:#5f6b80;
  --sgro-bg:#f4f7fb;
  /* the same curve .sgaf and .sgcc use, so every reveal on the page shares one
     easing rather than each module inventing its own */
  --sgro-ease:cubic-bezier(.22,.7,.28,1);

  padding:72px 24px 88px;
  background:#ffffff;
  font-family:var(--sg-font,'Montserrat',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif);
  color:var(--sgro-ink);
}
.sgro *,
.sgro *::before,
.sgro *::after{ box-sizing:border-box; }

.sgro-inner{
  max-width:1180px;
  margin:0 auto;
}

/* ---- section heading ---- */
.sgro-head{
  text-align:center;
  max-width:660px;
  margin:0 auto 44px;
}
.sgro-eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sgro-orange);
  margin-bottom:16px;
}
.sgro-head h2{
  font-size:clamp(26px,2.6vw,36px);
  font-weight:600;
  letter-spacing:-.5px;
  line-height:1.14;
  color:var(--sgro-navy-deep);
  margin:0 0 14px;
  text-wrap:balance;
}
.sgro-head p{
  font-size:15.5px;
  line-height:1.6;
  color:var(--sgro-muted);
  margin:0;
}

/* ---- cards ----
   A grid rather than flex, because the three cards share row tracks: the photo,
   the heading, the paragraph, and the point list each get a track sized to the
   tallest card, which is what puts the rule above the lists on one line across
   all three. Subgrid does the sharing - the card and its body opt into the
   parent's tracks instead of defining their own. Where subgrid is missing the
   cards fall back to stacking their own content, so the only thing lost is the
   aligned rule. */
.sgro-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,377px));
  justify-content:center;
  gap:24px;
}
.sgro-card{
  display:flex;
  flex-direction:column;
  background:#ffffff;
  border:1px solid var(--sgro-line);
  border-radius:16px;
  overflow:hidden;
}
@supports (grid-template-rows:subgrid){
  .sgro-list{ grid-template-rows:repeat(4,auto); }
  .sgro-card{
    display:grid;
    grid-row:span 4;
    grid-template-rows:subgrid;
  }
  .sgro-body{
    display:grid;
    grid-row:span 3;
    grid-template-rows:subgrid;
  }
  /* the shared track already holds the list at the same height in every card,
     so pushing it down would undo the alignment the track just bought */
  .sgro-points{
    margin-top:0;
    align-self:start;
  }
}

/* ---- photo ----
   All three sources are 5:4. The ratio here is set on the container rather
   than left to the image so the three crop identically and stay aligned; 16:11
   trims ~14% of the source height, which is what drops the keyboard out of the
   Command Center shot and the empty ground out of the phone shot. Each crop is
   then nudged with object-position so the subject sits where it should.
   The tinted ground means a slow or missing image leaves a deliberate panel
   rather than a collapsed gap. */
.sgro-media{
  aspect-ratio:16/11;
  flex-shrink:0;
  overflow:hidden;
  background:linear-gradient(160deg,#eaf0f8 0%,#dde6f2 100%);
  border-bottom:1px solid var(--sgro-line);
}
.sgro-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* keep the whole handset in frame, from the notch to the message bar */
.sgro-media--mobile img{ object-position:50% 46%; }
/* hold the agent's eyeline on the upper third rather than dead centre */
.sgro-media--pro img{ object-position:50% 34%; }
/* favour the monitor, so the alert queue stays the subject */
.sgro-media--cc img{ object-position:50% 30%; }

/* ---- body ---- */
.sgro-body{
  padding:20px 22px 24px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.sgro-body h3{
  font-size:19px;
  font-weight:700;
  letter-spacing:-.2px;
  line-height:1.2;
  color:var(--sgro-navy-deep);
  margin:0 0 8px;
}
.sgro-body p{
  font-size:13.5px;
  line-height:1.55;
  color:var(--sgro-muted);
  margin:0;
}

/* ---- point list ----
   Each line is written to fit on one row at the narrowest the column gets
   (~313px on a 377px card, about 44 characters at 13px).
   margin-top:auto is the fallback path only: with no subgrid the lists at
   least share a bottom edge. The @supports block above overrides it. */
.sgro-points{
  list-style:none;
  margin:16px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--sgro-line);
  margin-top:auto;
}
.sgro-points li{
  position:relative;
  padding-left:20px;
  font-size:13px;
  line-height:1.45;
  color:var(--sgro-ink);
}
.sgro-points li + li{ margin-top:8px; }
.sgro-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.36em;
  width:9px;
  height:9px;
  border-radius:50%;
  border:2.5px solid var(--sgro-orange);
}

/* ---- scroll cue ---- */
.sgro-cue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:44px auto 0;
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sgro-navy-deep);
}
.sgro-cue svg{
  width:20px;
  height:20px;
  display:block;
  color:var(--sgro-orange);
  animation:sgro-bob 1.9s ease-in-out infinite;
}
@keyframes sgro-bob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(6px); }
}
@media (prefers-reduced-motion:reduce){
  .sgro-cue svg{ animation:none; }
}

/* ---- load-in animation ----
   The hidden state is applied only once JS has set data-anim="on", so with JS
   off or blocked everything is simply visible rather than stuck invisible.
   .sgro-reveal covers the heading, the three cards and the scroll cue; the
   bob on the cue's arrow is a separate, always-on animation and is unaffected
   because the reveal transform sits on the parent. */
.sgro[data-anim="on"] .sgro-reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s var(--sgro-ease),
             transform .55s var(--sgro-ease);
}
.sgro[data-anim="on"] .sgro-reveal.sgro-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .sgro[data-anim="on"] .sgro-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ---- tablet: two up, third on the row below ---- */
@media (max-width:1023px){
  .sgro-list{ grid-template-columns:repeat(2,minmax(0,420px)); }
}

/* ---- mobile ---- */
@media (max-width:640px){
  .sgro{ padding:56px 20px 64px; }
  .sgro-head h2{ font-size:24px; }
  .sgro-head p{ font-size:15px; }
  .sgro-list{ grid-template-columns:minmax(0,440px); gap:16px; }

  /* one card at a time on a phone, so the photo can be shallower without
     losing its subject and the copy stays above the fold */
  .sgro-media{ aspect-ratio:16/9; }

  .sgro-body{ padding:18px 18px 20px; }
  .sgro-body h3{ font-size:17px; }
}