/* Hero support styles. The hero itself is an Elementor section (Task 11):
   a background image with Elementor's own overlay control, set to
   --u-green-900 at 78% in the editor, so no gradient or overlay rule is
   added here. These classes are applied through the free "CSS Classes"
   field on the section and its widgets. Every rule is scoped under
   .u-hero. Tokens only, no raw hex. */

.u-hero {
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  /* Keyboard focus on the button over the green-900 overlay: the pale ring. */
  --u-focus: var(--u-focus-on-dark);
}

@media (min-width: 40em) {
  .u-hero {
    min-height: 720px;
  }
}

/* --- Heading and copy ----------------------------------------------------
   Elementor's Heading and Text Editor widgets can write colour and
   typography inline from their own Style tab, at a selector like
   .elementor-N .elementor-element.elementor-element-M (specificity 0,3,0).
   Only colour, font-size and line-height are guarded with !important, each
   commented.
   ------------------------------------------------------------------------ */

.u-hero h1 {
  /* 16ch, not 14ch. ch scales with font-size, so 14ch held the same four
     line break no matter what size the heading was set to: "engineering
     deans," measures 8.76em in Work Sans 600 and 14ch is only 8.71em.
     16ch is 9.95em, which sets the heading in three lines and still sits
     inside the 696px hero column, so the break does not move with the
     viewport. */
  max-width: 16ch;
  font-weight: var(--u-weight-semi);
  letter-spacing: var(--u-tracking-tight);
  /* Beats Elementor's inline heading font-size (Typography control).
     Its own scale, not --u-text-display: the token tops out at 84px, too
     loud for a heading over a photograph. 68px is the prototype's size. */
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem) !important;
  /* Beats Elementor's inline heading line-height (Typography control), and
     Astra's own h1 rule, which sets 1.4em from the Customizer. */
  line-height: var(--u-leading-tight) !important;
  /* Beats Elementor's inline heading colour (Style tab). */
  color: var(--u-white) !important;
}

.u-hero p {
  opacity: 0.82;
  /* Beats Elementor's inline paragraph colour (Style tab). */
  color: var(--u-white) !important;
}

/* --- Light button ----------------------------------------------------
   Elementor's CSS Classes field (Advanced tab) lands the class on the
   Button widget's outer wrapper div, not its inner <a
   class="elementor-button-link">; some other placements put it on the
   anchor directly. Both are covered, but only one of them is ever
   painted: giving the wrapper the pill as well would apply the padding
   twice and make the button 64px too wide.
   ------------------------------------------------------------------------ */

.u-hero .u-btn--light .elementor-button-link,
.u-hero a.u-btn--light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 var(--u-space-8);
  border-radius: var(--u-radius-sm);
  background: var(--u-white);
  color: var(--u-green-900);
  font-weight: var(--u-weight-semi);
  text-decoration: none;
  transition: background-color var(--u-dur-fast) var(--u-ease);
}

/* The wrapper only lays out. Elementor gives every widget
   align-self: auto, which in the hero's column stretches it across the
   whole column; without this the pill would become a full width bar. */
.u-hero .u-btn--light {
  display: inline-flex;
  align-self: flex-start;
}

.u-hero .u-btn--light .elementor-button-link:hover,
.u-hero a.u-btn--light:hover,
.u-hero .u-btn--light .elementor-button-link:focus-visible,
.u-hero a.u-btn--light:focus-visible {
  background: var(--u-mist);
}