/* ==========================================================================
   Home page (post 40) - block styling, valid on the FRONT END and in the
   BLOCK EDITOR.

   Same two rules as the People page: nothing may be scoped on
   `body.page-id-40` (the editor canvas has no such class), and the front end
   wraps group children in `.wp-block-group__inner-container` while the editor
   does not. Everything here is anchored on `idobe-*` classes, which exist on
   no other page's blocks.

   The full-bleed sections are centred with a padding trick rather than an
   inner max-width, so the SAME rule works whether or not the inner container
   exists:  padding-inline: max(20px, (100% - 1140px)/2)
   1140px is the width Elementor's .elementor-container was giving these
   sections; this template has no theme container to inherit from.
   ========================================================================== */

/* ---- base typography (the Elementor kit used to supply this) ------------- */
.idobe-hero-top, .idobe-hero-bottom, .idobe-band{
  font-family:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}

/* ---- full-bleed section framing -----------------------------------------
   `.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 padding-block - 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. */
.wp-block-group.idobe-hero-top,
.wp-block-group.idobe-hero-bottom,
.wp-block-group.idobe-band{
  padding-inline:max(20px, calc((100% - 1120px) / 2));
  box-sizing:border-box;
}
/* Elementor's columns carried 10px of side padding, which is what produced the
   gutter between image and text. core/columns has no gutter by default. */
/* Elementor centred the text column against the image; core/columns does not. */
/* Vertical centring is expressed in the block markup via verticalAlignment,
   not here: core ships `.wp-block-columns{align-items:normal!important}`,
   which no stylesheet rule can beat. */
.idobe-band .wp-block-columns{gap:16px;}

/* ---- hero --------------------------------------------------------------- */
.wp-block-group.idobe-hero-top{
  background:linear-gradient(90deg,var(--idobe-green-deep,#00522b),var(--idobe-green-ink,#00331c));
  /* 64px in Elementor, plus the heading widget's own top offset that the block
     heading does not have. Tuned against the reference render. */
  padding-block:74px 0;
}
.wp-block-group.idobe-hero-bottom{
  background:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22420%22 height=%22300%22 viewBox=%220 0 420 300%22 fill=%22none%22%3E%3Cg opacity=%22.16%22%3E%3Cg stroke=%22%23ffdb05%22 stroke-width=%222%22%3E%3Cpath d=%22M30 260 L150 140 L290 140 L360 70%22/%3E%3Cpath d=%22M150 140 L150 40%22/%3E%3Cpath d=%22M290 140 L290 250%22 stroke-dasharray=%222 8%22/%3E%3C/g%3E%3Cg fill=%22%23ffdb05%22%3E%3Ccircle cx=%2230%22 cy=%22260%22 r=%229%22/%3E%3Ccircle cx=%22150%22 cy=%2240%22 r=%2212%22/%3E%3Ccircle cx=%22360%22 cy=%2270%22 r=%229%22/%3E%3Ccircle cx=%22290%22 cy=%22250%22 r=%227%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E') right 4% bottom -30px no-repeat,linear-gradient(90deg,var(--idobe-green-deep),var(--idobe-green-ink));
  padding-block:4px 70px;
}
.idobe-hero-heading{
  color:#fff !important; font-size:46px !important; line-height:1.12 !important;
  letter-spacing:-0.02em; font-weight:700; text-align:left !important;
  margin-bottom:0 !important;
}
.idobe-hero-heading::before{
  content:"Intelligent Design & Operation for the Built Environment";
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--idobe-gold,#ffdb05); margin-bottom:14px;
}
.idobe-hero-lede{
  color:#d8e8de !important; font-size:18px; line-height:1.6; max-width:56ch;
  /* Elementor gave each widget a 20px bottom margin; the block heading above
     has margin-bottom:0, so the gap is restored here. */
  margin-top:19px;
}
.idobe-hero-cta{margin-top:24px;}

/* ---- bands -------------------------------------------------------------- */
/* 72px in Elementor; the block heading/paragraph margins differ slightly, so
   this is tuned so each band measures the same height as the original. */
/* Asymmetric on purpose: the block heading/paragraph margins differ from
   Elementor's, so this places the content where the original had it while
   keeping each band the same overall height. */
.wp-block-group.idobe-band{padding-block:82px 52px;}
.idobe-band--light{background:#fdfefd;}
.idobe-band--tint{background:var(--idobe-band,#f1f7f3);}

.idobe-band h2{
  color:var(--idobe-ink,#182b20) !important; font-size:30px !important;
  font-weight:700; line-height:1.25 !important;
}
.idobe-band h2::before{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--idobe-green,#007c41); margin-bottom:10px;
}
.idobe-band--team h2::before{content:"Our Team";}
.idobe-band--join h2::before{content:"Join Us";}
.idobe-band--work h2::before{content:"What We Do";}
.idobe-band--involved h2::before{content:"Get Involved";}
.idobe-band h2::after{
  content:""; display:block; width:56px; height:4px; border-radius:2px;
  background:var(--idobe-gold,#ffdb05); margin-top:12px;
}

.idobe-band p{color:var(--idobe-muted,#4f6156); line-height:1.7;}
/* restores the 20px bottom margin Elementor gave the preceding widget */
/* !important because WordPress global styles set block-gap margins on
   .wp-block-buttons that otherwise win regardless of specificity. */
.idobe-band .wp-block-column > .wp-block-buttons{
  justify-content:flex-start; margin-top:27px !important;
}

/* The polish stylesheet only ever styled `.elementor-button`, so block buttons
   fall back to the theme default (dark). Mirror the Elementor treatment. */
.idobe-band .wp-block-button__link{
  background-color:var(--idobe-green,#007c41) !important; color:#fff !important;
  border-radius:6px; font-weight:600; padding:12px 22px;
  transition:background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.idobe-band .wp-block-button__link:hover{
  background-color:var(--idobe-green-deep,#00522b) !important;
  transform:translateY(-1px); box-shadow:0 4px 12px -2px rgba(0,124,65,.4);
}
.idobe-band .wp-block-button__link:focus-visible{
  outline:none; box-shadow:0 0 0 2px #fff,0 0 0 4px var(--idobe-green,#007c41);
}
@media (prefers-reduced-motion:reduce){
  .idobe-band .wp-block-button__link{transition:none;}
  .idobe-band .wp-block-button__link:hover{transform:none;}
}

/* ---- band imagery -------------------------------------------------------
   Elementor had a .elementor-widget-container div to hang the offset frame on;
   in block markup the <figure> itself is that element. */
.idobe-band figure.wp-block-image{position:relative; margin:0;}
.idobe-band figure.wp-block-image::before{
  content:""; position:absolute; inset:18px -14px -14px 18px; border-radius:10px;
  background:linear-gradient(140deg,var(--idobe-green,#007c41),var(--idobe-green-ink,#00331c));
  opacity:.12;
}
.idobe-band figure.wp-block-image img{
  position:relative; border-radius:10px; width:100%; aspect-ratio:4/3;
  object-fit:cover;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 16px 40px -16px rgba(0,51,28,.35);
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:880px){
  .idobe-hero-heading{font-size:34px !important;}
  .idobe-hero-bottom{
    background:linear-gradient(90deg,var(--idobe-green-deep,#00522b),var(--idobe-green-ink,#00331c));
  }
  .idobe-band figure.wp-block-image::before{inset:10px -8px -8px 10px;}
}