/* ==========================================================================
   STEEE page (slug "steee") - block styling, valid on the FRONT END and in
   the BLOCK EDITOR.

   Same three rules as the Home and People pages:
     1. Nothing may be scoped on `body.page-id-NN` - the editor canvas has no
        such class, and this page's ID is not known until it is created.
     2. The front end wraps group children in `.wp-block-group__inner-container`
        and the editor does not, so full-bleed sections are centred with a
        padding trick rather than an inner max-width:
            padding-inline: max(20px, (100% - 1120px)/2)
     3. Every selector is anchored on an `idobe-steee-*` class, which exists on
        no other page's blocks, so loading this in the editor is harmless.

   `.wp-block-group` is prefixed on every padding rule ON PURPOSE. Neve ships
   `.alignfull{...padding:0 7.5px}` - a SHORTHAND, which resets padding-inline
   - and Neve's stylesheet is enqueued AFTER this one, so at equal specificity
   it wins. (0,2,0) beats (0,1,0) regardless of load order.
   ========================================================================== */

.idobe-steee-hero, .idobe-steee-shot, .idobe-steee-foot,
.idobe-band.idobe-steee-what, .idobe-band.idobe-steee-frames,
.idobe-band.idobe-steee-sec, .idobe-band.idobe-steee-data{
  font-family:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--idobe-ink,#182b20);
}

.wp-block-group.idobe-steee-hero,
.wp-block-group.idobe-steee-foot,
.wp-block-group.idobe-band.idobe-steee-what,
.wp-block-group.idobe-band.idobe-steee-frames,
.wp-block-group.idobe-band.idobe-steee-sec,
.wp-block-group.idobe-band.idobe-steee-data{
  padding-inline:max(20px, calc((100% - 1120px) / 2));
  box-sizing:border-box;
}

/* ---- hero ---------------------------------------------------------------
   The gold rule under the wordmark is the deck's expansion_line. */
.wp-block-group.idobe-steee-hero{
  background:linear-gradient(90deg,var(--idobe-green-deep,#00522b),var(--idobe-green-ink,#00331c));
  padding-block:72px 64px;
}
.idobe-steee-title{
  color:#fff !important;
  font-size:clamp(56px,11vw,104px) !important;
  line-height:.95 !important;
  font-weight:800;
  letter-spacing:.16em;
  margin:0 0 4px !important;
  text-align:left !important;
}
.idobe-steee-expansion{
  color:#cfe3d7 !important;
  font-size:clamp(15px,2.2vw,19px);
  font-weight:600; letter-spacing:.01em;
  margin:0 !important;
  padding-bottom:20px;
  border-bottom:3px solid var(--idobe-gold,#ffdb05);
  display:inline-block;
}
/* The five letters the acronym is built from. */
.idobe-steee-expansion span{color:#fff;font-weight:800;}
.idobe-steee-lede{
  color:#d8e8de !important;
  font-size:18px; line-height:1.65; max-width:62ch;
  margin-top:26px !important;
}
.idobe-steee-cta{margin-top:26px !important;display:flex;flex-wrap:wrap;gap:12px;}

/* The theme supplies .idobe-btn / .idobe-btn-gold (idobe-visual-polish).
   .idobe-btn-ghost is only used on the dark hero, so it is defined here
   against a known dark backdrop. */
.idobe-steee-cta .idobe-btn{
  display:inline-block;padding:12px 22px;border-radius:6px;
  font-weight:600;font-size:15px;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.idobe-steee-cta .idobe-btn-gold{
  background:var(--idobe-gold,#ffdb05);color:var(--idobe-green-ink,#00331c) !important;
}
.idobe-steee-cta .idobe-btn-ghost{
  background:transparent;color:#fff !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
}
.idobe-steee-cta .idobe-btn:hover{transform:translateY(-1px);}
.idobe-steee-cta .idobe-btn-ghost:hover{box-shadow:inset 0 0 0 2px #fff;}
.idobe-steee-cta .idobe-btn:focus-visible{
  outline:none;box-shadow:0 0 0 2px var(--idobe-green-ink,#00331c),0 0 0 4px var(--idobe-gold,#ffdb05);
}

/* ---- full-bleed photo ---------------------------------------------------
   Sits directly under the hero with no gap, so the dark band reads as the
   caption plate for the photo. */
.wp-block-group.idobe-steee-shot{padding:0 !important;margin:0 !important;background:var(--idobe-green-ink,#00331c);}
.idobe-steee-shot .wp-block-image{margin:0 !important;}
.idobe-steee-shot img{
  display:block;width:100%;height:clamp(240px,38vw,440px);object-fit:cover;object-position:center 42%;
}

/* ---- bands --------------------------------------------------------------
   Matching the home page's band rhythm. */
.wp-block-group.idobe-band.idobe-steee-what,
.wp-block-group.idobe-band.idobe-steee-frames,
.wp-block-group.idobe-band.idobe-steee-sec,
.wp-block-group.idobe-band.idobe-steee-data{padding-block:72px;}
.idobe-band.idobe-steee-what,
.idobe-band.idobe-steee-sec.idobe-band--light,
.idobe-band.idobe-steee-data{background:#fdfefd;}
.idobe-band.idobe-steee-frames,
.idobe-band.idobe-steee-sec.idobe-band--tint{background:var(--idobe-band,#f1f7f3);}

.idobe-steee-what .wp-block-columns,
.idobe-steee-sec .wp-block-columns{gap:44px;}

/* ---- headings -----------------------------------------------------------
   Gold underline only. The uppercase eyebrow the other pages put above
   their headings is deliberately not used here. */
.idobe-steee-h2{
  scroll-margin-top:90px;   /* Neve's header is sticky */
  font-size:clamp(28px,4vw,38px) !important;
  line-height:1.2 !important; font-weight:700;
  letter-spacing:-.01em; margin:0 0 6px !important;
}
.idobe-steee-h2::after{
  content:"";display:block;width:56px;height:4px;border-radius:2px;
  background:var(--idobe-gold,#ffdb05);margin-top:14px;
}
.idobe-steee-h2--center{text-align:center;}
.idobe-steee-h2--center::after{margin-left:auto;margin-right:auto;}

.idobe-steee-sub{
  font-size:17px;line-height:1.7;color:var(--idobe-muted,#4f6156);
  max-width:70ch;margin:22px 0 34px !important;
}
.idobe-steee-h2--center + .idobe-steee-sub{margin-inline:auto !important;text-align:center;}
.idobe-steee-what p{font-size:16.5px;line-height:1.75;color:var(--idobe-muted,#4f6156);}

/* ---- stat strip ---------------------------------------------------------
   The deck's spec tiles. auto-fit keeps four across on desktop and folds to
   two then one without a media query. */
.idobe-steee-stats{
  list-style:none;margin:44px 0 0;padding:0;
  display:grid;gap:1px;background:var(--idobe-line,#e2ebe5);
  border:1px solid var(--idobe-line,#e2ebe5);border-radius:10px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.idobe-steee-stats li{
  background:#fff;padding:22px 20px;margin:0;
  display:flex;flex-direction:column;gap:6px;
}
.idobe-band--tint .idobe-steee-stats li{background:#fdfefd;}
.idobe-steee-stats b{
  font-size:clamp(20px,2.6vw,26px);font-weight:700;line-height:1.15;
  color:var(--idobe-green-deep,#00522b);letter-spacing:-.01em;
}
.idobe-steee-stats span{
  font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--idobe-muted,#4f6156);
}
.idobe-steee-stats small{
  display:block;margin-top:6px;font-size:12px;font-weight:500;
  letter-spacing:0;text-transform:none;color:#7a8a80;
}

/* ---- the two frame cards ------------------------------------------------ */
.idobe-steee-cards{
  display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:8px;
}
.idobe-steee-card{
  position:relative;background:#fff;border:1px solid var(--idobe-line,#e2ebe5);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 34px -24px rgba(0,51,28,.5);
}
/* Both source photographs are cropped to 3:2 before upload, so the card does
   not have to rescue them with object-position. */
.idobe-steee-card img{
  display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  background:var(--idobe-band,#f1f7f3);
}
.idobe-steee-card-body{padding:24px 26px 28px;}
.idobe-steee-card h3{
  font-size:21px;font-weight:700;margin:0 0 10px;color:var(--idobe-ink,#182b20);
}
.idobe-steee-card p{
  font-size:15.5px;line-height:1.7;color:var(--idobe-muted,#4f6156);margin:0 0 16px;
}
.idobe-steee-card a{
  font-size:14px;font-weight:700;letter-spacing:.02em;
  color:var(--idobe-green,#007c41);text-decoration:none;
}
.idobe-steee-card a:hover{text-decoration:underline;}

/* ---- capability lists --------------------------------------------------
   Ordinary list markers. The gold left rule is the callout treatment the
   Prospective Students page already uses, so it is not new vocabulary. */
.idobe-steee-leave{
  margin:0;padding:22px 26px 22px 44px;
  background:#fff;border-left:4px solid var(--idobe-gold,#ffdb05);
  border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.idobe-band--light .idobe-steee-leave{background:var(--idobe-band,#f1f7f3);}
.idobe-steee-leave li{
  margin:0 0 13px;
  font-size:15.5px;line-height:1.65;color:var(--idobe-ink,#182b20);
}
.idobe-steee-leave li:last-child{margin-bottom:0;}
.idobe-steee-leave li::marker{color:var(--idobe-green,#007c41);}

/* ---- figures ------------------------------------------------------------ */
.idobe-steee-figure{margin:0 !important;}
.idobe-steee-figure img{
  display:block;width:100%;height:auto;border-radius:12px;
  background:#fff;border:1px solid var(--idobe-line,#e2ebe5);
}
.idobe-steee-figure figcaption{
  margin-top:10px;font-size:13px;line-height:1.55;
  color:var(--idobe-muted,#4f6156);font-style:italic;
}

/* ---- instrumentation grid ----------------------------------------------- */
.idobe-steee-grid{
  display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:8px;
}
.idobe-steee-grid > div{
  padding:24px 24px 26px;background:var(--idobe-band,#f1f7f3);
  border-radius:12px;border:1px solid var(--idobe-line,#e2ebe5);
}
.idobe-steee-grid h3{
  font-size:17px;font-weight:700;margin:0 0 10px;color:var(--idobe-green-deep,#00522b);
}
.idobe-steee-grid p{
  font-size:15px;line-height:1.7;color:var(--idobe-muted,#4f6156);margin:0;
}

/* ---- closing CTA -------------------------------------------------------- */
.wp-block-group.idobe-steee-foot{
  background:linear-gradient(90deg,var(--idobe-green-deep,#00522b),var(--idobe-green-ink,#00331c));
  padding-block:66px;
}
.idobe-steee-foot-h{
  color:#fff !important;font-size:clamp(26px,3.6vw,34px) !important;
  font-weight:700;margin:0 !important;
}
.idobe-steee-foot-p{
  color:#d8e8de !important;font-size:17px;line-height:1.7;
  max-width:62ch;margin-top:16px !important;
}



/* ---- working-range drawings --------------------------------------------
   The two dimensioned views of the structural enclosure, side by side. They
   are line drawings on white, so they get no border and sit on the band. */
.idobe-steee-range{
  gap:32px !important;
  margin:34px 0 0 !important;
}
.idobe-steee-range .idobe-steee-figure img{
  border:0;
  background:transparent;
  mix-blend-mode:multiply;   /* the renders ship with a white box, not alpha */
}
.idobe-steee-range figcaption{
  text-align:center;
  font-style:normal;
  font-weight:600;
  color:var(--idobe-ink,#182b20);
}
.idobe-steee-range + .idobe-steee-stats{margin-top:34px;}
@media (max-width:781px){
  .idobe-steee-range{gap:8px !important;}
}

/* ---- narrow -------------------------------------------------------------
   core/columns only stacks below 782px, so the hand-built grids above are
   already fluid; these are the type and rhythm adjustments. */
@media (max-width:781px){
  .wp-block-group.idobe-steee-hero{padding-block:52px 48px;}
  .wp-block-group.idobe-band.idobe-steee-what,
  .wp-block-group.idobe-band.idobe-steee-frames,
  .wp-block-group.idobe-band.idobe-steee-sec,
  .wp-block-group.idobe-band.idobe-steee-data{padding-block:52px;}
  .idobe-steee-what .wp-block-columns,
  .idobe-steee-sec .wp-block-columns{gap:28px;}
  .idobe-steee-lede{font-size:16.5px;}
  .idobe-steee-cta .idobe-btn{width:100%;text-align:center;}
}