/* Home hero (TODO 00001.5.13). FINAL design/home/inspiration/sections/hero/r3/v2.png; DESIGN-GUIDE.md sections 5-8.
   Split, not a fade: white copy column left, the plant photograph runs from beside it to the right edge
   (no gradients, section 7), the AI panel sits over the photograph with one AI leader to the gauge. */
.p-home-hero {
  position: relative; box-sizing: border-box; overflow: hidden;
  background: var(--wp--preset--color--white);
  padding-block: var(--wp--custom--section--desktop);
  min-height: 600px;
  display: flex; align-items: center;
}
.p-home-hero *, .p-home-hero *::before, .p-home-hero *::after { box-sizing: border-box; }
.p-home-hero__photo {
  position: absolute; top: 0; bottom: 0; right: 0; margin: 0;
  left: calc(max(var(--wp--custom--gutter--desktop), (100% - var(--wp--custom--layout--wide)) / 2) + 3 * var(--wp--preset--spacing--130) + var(--wp--preset--spacing--60));
}
.p-home-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.p-home-hero__inner {
  position: relative; width: min(100% - 2 * var(--wp--custom--gutter--desktop), var(--wp--custom--layout--wide)); margin-inline: auto;
  display: grid; grid-template-columns: calc(3 * var(--wp--preset--spacing--130)) minmax(0, 520px); column-gap: var(--wp--preset--spacing--70);
  align-items: center;
}
.p-home-hero__eyebrow {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--label);
  font-weight: var(--wp--custom--font-weight--label); letter-spacing: var(--wp--custom--letter-spacing--label);
  line-height: 1.3; text-transform: uppercase;
}
.p-home-hero__eyebrow::before { content: ""; flex: none; width: 32px; height: 3px; background: var(--wp--preset--color--orange); }
.p-home-hero .p-home-hero__title {
  margin-top: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--display); font-weight: var(--wp--custom--font-weight--display);
  letter-spacing: var(--wp--custom--letter-spacing--display); line-height: 1.05; color: var(--wp--preset--color--navy);
}
.p-home-hero__lead {
  margin-top: var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--body-l); line-height: 1.6; color: var(--wp--preset--color--ink);
}
.p-home-hero__actions { margin-top: var(--wp--preset--spacing--80); }
.p-home-hero__cta .wp-block-button__link {
  display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--40);
  min-height: var(--wp--custom--control); padding: 14px var(--wp--preset--spacing--60);
  border-radius: var(--wp--custom--radius--default); line-height: 1; text-decoration: none;
}
.p-home-hero__cta .wp-block-button__link::after {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s cubic-bezier(.22, .61, .36, 1);
}
.p-home-hero__cta .wp-block-button__link:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--orange); outline-offset: var(--wp--custom--focus--offset);
}
@media (hover: hover) and (pointer: fine) {
  .p-home-hero__cta .wp-block-button__link:hover { box-shadow: inset 0 0 0 100vmax var(--wp--custom--alpha--overlay-navy); }
  .p-home-hero__cta .wp-block-button__link:hover::after { transform: translateX(3px); }
}
.p-home-hero__cta .wp-block-button__link:active { transform: scale(.98); }

/* AI panel: ai-surface ground, 1px ai edge, 4px radius, 24px padding (section 8 AI panel). */
.p-home-hero__ai-wrap { position: relative; align-self: end; margin-top: var(--wp--preset--spacing--110); }
.p-home-hero__ai {
  background: var(--wp--preset--color--ai-surface); border: 1px solid var(--wp--preset--color--ai);
  border-radius: var(--wp--custom--radius--default); padding: var(--wp--preset--spacing--60);
  box-shadow: var(--wp--custom--shadow); color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--small); line-height: 1.5;
}
:where(.p-home-hero__ai) p { margin: 0; }
.p-home-hero__ai-label {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--30); color: var(--wp--preset--color--ai);
  font-size: var(--wp--preset--font-size--label); font-weight: var(--wp--custom--font-weight--label);
  letter-spacing: var(--wp--custom--letter-spacing--label); text-transform: uppercase; line-height: 1.3;
}
.p-home-hero__ai-q {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--default); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--body); color: var(--wp--preset--color--ink);
}
.p-home-hero__ai-q .p-icon { color: var(--wp--preset--color--slate); }
.p-home-hero__ai-a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--wp--preset--spacing--40);
  margin-top: var(--wp--preset--spacing--60);
}
.p-home-hero__ai-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--ai);
  border-radius: var(--wp--custom--radius--default); color: var(--wp--preset--color--ai);
}
.p-home-hero__ai-name {
  color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--body); font-weight: 600; line-height: 1.4;
}
.p-home-hero__ai-text { margin-top: var(--wp--preset--spacing--20); color: var(--wp--preset--color--ink); }
/* The AI leader (section 7): a sibling of the panel (never inside its box), set on the answer name's line
   (the panel is 520px wide from 1200, its type fixed), running right into the photograph to a 6px dot. */
.p-home-hero__leader {
  position: absolute; left: 407px; top: 141px; width: 300px; height: 1px;
  background: var(--wp--preset--color--ai); pointer-events: none;
}
.p-home-hero__leader::after {
  content: ""; position: absolute; right: -3px; top: -3px; width: 6px; height: 6px;
  border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--ai);
  box-shadow: 0 0 0 2px var(--wp--preset--color--white);
}
.p-home-hero__chips {
  list-style: none; margin: var(--wp--preset--spacing--50) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30);
}
.p-home-hero__chips a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--ai);
  border-radius: var(--wp--custom--radius--default); color: var(--wp--preset--color--ai);
  font-size: var(--wp--preset--font-size--small); font-weight: 500; line-height: 1.2; text-decoration: none;
}
.p-home-hero__chips a:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .p-home-hero__chips a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.p-home-hero__ask {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--50);
  height: var(--wp--custom--control); padding-left: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--slate);
  border-radius: var(--wp--custom--radius--default); color: var(--wp--preset--color--ai);
}
.p-home-hero__ask input {
  flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; cursor: default;
  font: 400 var(--wp--preset--font-size--body)/1 var(--wp--preset--font-family--montserrat); color: var(--wp--preset--color--ink);
}
.p-home-hero__ask input::placeholder { color: var(--wp--preset--color--slate); opacity: 1; }
.p-home-hero__ask input:focus { outline: none; }
.p-home-hero__ask:focus-within {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: 2px;
}
.p-home-hero__ask button {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: 3px; border: 0; cursor: not-allowed;
  background: var(--wp--preset--color--ai); color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--default);
}
.p-home-hero__ask button:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: 2px; }
.p-home-hero__ai-note { margin-top: var(--wp--preset--spacing--60); color: var(--wp--preset--color--ai); font-size: var(--wp--preset--font-size--small); }

/* Under 1200 (the panel would cover the gauge): copy, then the photograph, then the AI panel over its foot. The inner grid dissolves
   (display: contents) so the three parts reorder. No leader (at most one per view, it would cross the copy). */
@media (max-width: 1199.98px) {
  .p-home-hero {
    display: flex; flex-direction: column; min-height: 0;
    padding-bottom: 0 !important; /* the AI panel ends the hero; the next white section's top padding is the gap */
  }
  .p-home-hero__inner { display: contents; }
  .p-home-hero__copy { order: 1; width: calc(100% - 2 * var(--wp--custom--gutter--desktop)); margin-inline: auto; }
  .p-home-hero__copy > * { max-width: 600px; }
  .p-home-hero__photo {
    order: 2; position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: 100%; aspect-ratio: 16 / 9; margin-top: var(--wp--preset--spacing--90);
  }
  .p-home-hero__photo img { object-position: 72% 50%; }
  .p-home-hero__ai-wrap {
    order: 3; align-self: flex-start; width: min(100% - 2 * var(--wp--custom--gutter--desktop), 600px);
    margin: calc(-1 * var(--wp--preset--spacing--110)) 0 0 var(--wp--custom--gutter--desktop);
  }
  .p-home-hero__leader { display: none; }
}
@media (max-width: 991.98px) {
  .p-home-hero { padding-block: var(--wp--custom--section--tablet); }
  .p-home-hero__copy { width: calc(100% - 2 * var(--wp--custom--gutter--tablet)); }
  .p-home-hero__ai-wrap { width: min(100% - 2 * var(--wp--custom--gutter--tablet), 600px); margin-left: var(--wp--custom--gutter--tablet); }
}
/* Under 840 the panel spans the content width, so its right margin equals the left (gap-check stray margin at 768). */
@media (max-width: 839.98px) {
  .p-home-hero__ai-wrap { width: calc(100% - 2 * var(--wp--custom--gutter--tablet)); }
}
@media (max-width: 599.98px) {
  .p-home-hero { padding-block: var(--wp--custom--section--phone); }
  .p-home-hero__copy { width: calc(100% - 2 * var(--wp--custom--gutter--phone)); }
  .p-home-hero__ai-wrap { width: calc(100% - 2 * var(--wp--custom--gutter--phone)); margin-left: var(--wp--custom--gutter--phone); }
  .p-home-hero__photo { aspect-ratio: 4 / 3; margin-top: var(--wp--preset--spacing--70); }
  .p-home-hero__ai-wrap { margin-top: calc(-1 * var(--wp--preset--spacing--90)); }
  .p-home-hero__photo img { object-position: 78% 50%; }
  .p-home-hero__ai { padding: var(--wp--preset--spacing--50); }
}