/**
 * =============================================================================
 * BLOCK: Request A Demo (.request-demo)
 * =============================================================================
 * Full-width contact section with a glass-morphism card anchored right.
 * Background image + dark vertical fade overlay.
 *
 * Markup:
 *   <section class="request-demo">
 *     <div class="request-demo__bg">...</div>
 *     <div class="request-demo__card">
 *       <header class="request-demo__header">...</header>
 *       <form class="request-demo__form">...</form>
 *     </div>
 *   </section>
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * SECTION
 * --------------------------------------------------------------------------- */
.request-demo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-40) var(--padding-x);
  overflow: hidden;
  isolation: isolate;
}

/* ---------------------------------------------------------------------------
 * BACKGROUND LAYER
 * --------------------------------------------------------------------------- */
.request-demo__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
}

.request-demo__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zoom into the background photo so the scene reads tighter behind the
     glass card. Slight scale keeps the original aspect ratio without
     introducing layout shift (transform is GPU-cheap and positioned
     absolute, so it never affects siblings). */
  transform: scale(1.45);
  transform-origin: center;
}

/* Blue radial-glass overlay between the bg image and the form card.
   Composes two layers (top → bottom):
     1. Radial blue tint  — design-system glass-blue tokens, ellipse off-centre
        at 40% 40% to mirror the `--gradient-radial-glass` signature pattern.
     2. Bottom dark fade  — fades into the page background so the next
        section reads as a continuation. */
.request-demo__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(4, 48, 65, 0) 75%,
      rgba(4, 48, 65, 1) 100%
    ),
    radial-gradient(
      ellipse at 40% 40%,
      var(--color-glass-blue-30) 0%,
      var(--color-glass-blue-75) 100%
    );
}

/* ---------------------------------------------------------------------------
 * CARD (glass morphism)
 * --------------------------------------------------------------------------- */
.request-demo__card {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  max-width: 488px;
  padding: var(--space-20);
  border: 1px solid var(--color-white-20);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    rgba(29, 68, 84, 0.9) 0%,
    rgba(19, 58, 74, 0.9) 100%
  );
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------------------------------------
 * HEADER
 * --------------------------------------------------------------------------- */
.request-demo__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  color: var(--color-text-primary);
}

.request-demo__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-semibold);
  /* Fluid type scale — 28px floor on smallest screens, up to 50px on
     desktop. Replaces the old 50/40/32 discrete breakpoints so the
     title resizes smoothly across all viewports. */
  font-size: clamp(28px, 5.2vw, 50px);
  line-height: 1.3;
  text-transform: capitalize;
}

.request-demo__text {
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
}

/* ---------------------------------------------------------------------------
 * FORM LAYOUT
 * --------------------------------------------------------------------------- */
.request-demo__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.request-demo__row {
  display: flex;
  gap: var(--space-10);
  width: 100%;
}

.request-demo__row--2col > .request-demo__field {
  flex: 1 1 0;
  min-width: 0;
}

.request-demo__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---------------------------------------------------------------------------
 * FIELDS
 * --------------------------------------------------------------------------- */
.request-demo__label {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.32px;
  color: var(--color-text-primary);
  opacity: 0.75;
}

.request-demo__input {
  width: 100%;
  padding: 12.5px 0;
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  letter-spacing: -0.32px;
  line-height: 1.2;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-white-20);
  border-radius: 0;
  outline: none;
  transition:
    border-color var(--transition-base),
    border-width var(--transition-base);
}

.request-demo__input::placeholder {
  color: var(--color-text-primary);
  opacity: 0.5;
}

.request-demo__input:hover {
  border-bottom-color: var(--color-white-40);
}

.request-demo__input:focus,
.request-demo__input:focus-visible {
  border-bottom: 2px solid var(--color-light-green);
  padding-bottom: 11.5px; /* compensate the 1→2px border to avoid layout shift */
}

.request-demo__input:user-invalid {
  border-bottom-color: var(--color-red-500);
}

/* Textarea resize handle styled as the Figma "Intersect" triangle */
.request-demo__textarea {
  resize: vertical;
  min-height: 60px;
  padding-top: 12.5px;
  padding-bottom: 42.5px;
  line-height: var(--lh-relaxed);
}

/* Hide native resize handle on WebKit/Firefox, re-render via CSS corner */
.request-demo__textarea {
  background-image: linear-gradient(
    135deg,
    transparent 0 calc(100% - 9px),
    var(--color-white-40) calc(100% - 9px) calc(100% - 1px),
    transparent calc(100% - 1px) 100%
  );
  background-repeat: no-repeat;
  background-position: right 2px bottom 2px;
  background-size: 10px 10px;
}

/* ---------------------------------------------------------------------------
 * SUBMIT BUTTON
 * --------------------------------------------------------------------------- */
.request-demo__submit {
  align-self: flex-start;
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------------------------
 * STATUS / FEEDBACK MESSAGE
 * --------------------------------------------------------------------------- */
.request-demo__status {
  min-height: 1.2em;
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--color-white-70);
}

.request-demo__status.is-success {
  color: var(--color-light-green);
}

.request-demo__status.is-error {
  color: var(--color-red-500);
}

/* Loading state on the submit button */
.request-demo__form.is-loading .request-demo__submit {
  opacity: 0.6;
  pointer-events: none;
}

.request-demo__form.is-success .request-demo__submit {
  display: none;
}

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .request-demo {
    padding-inline: var(--padding-x-md);
    justify-content: center;
  }

  .request-demo__card {
    max-width: 560px;
  }
}

@media (max-width: 767px) {
  .request-demo {
    padding-inline: var(--padding-x-sm);
    padding-block: var(--space-24);
  }

  /* Darker overlay on mobile so the card (and text that sometimes bleeds
     outside the tight card padding) stays legible when the background
     photo takes the full viewport height behind a tall form. */
  .request-demo__overlay {
    background: linear-gradient(
      180deg,
      rgba(4, 48, 65, 0.25) 0%,
      rgba(4, 48, 65, 0.7) 55%,
      rgba(4, 48, 65, 1) 100%
    );
  }

  .request-demo__card {
    padding: var(--space-16);
    gap: var(--space-12);
  }

  /* Bump the inter-field gap on mobile — space-10 feels tight when the
     rows stack to 1 column, space-12 restores breathing room. */
  .request-demo__form {
    gap: var(--space-12);
  }

  .request-demo__text {
    font-size: var(--text-base);
  }

  .request-demo__row--2col {
    flex-direction: column;
    gap: var(--space-12);
  }

  /* Textarea resize handle is unusable at touch sizes, and its reserved
     padding wastes ~30px of vertical space. Kill both on mobile. */
  .request-demo__textarea {
    resize: none;
    padding-bottom: 12.5px;
    background-image: none;
  }

  /* Submit stretches full width on mobile — bigger tap target and a more
     standard mobile form pattern than a left-aligned button. */
  .request-demo__submit {
    align-self: stretch;
    justify-content: center;
  }
}

/* Tighter gutters below 480px so the card approaches edge-to-edge —
   maximises usable form width on the narrowest phones (iPhone SE etc.) */
@media (max-width: 640px) { /* A6: consolidated small-mobile tier (was 479px) */
  .request-demo {
    padding-inline: var(--space-4);
  }
}

/* ---------------------------------------------------------------------------
 * MODIFIER: WITH-INFO — 2-column "let's talk" layout (Home contact section)
 *
 * Left  : title + description + Headquarters block + Business Hours block
 * Right : the existing form
 *
 * The card spans the full content width (1200px) and centres itself instead
 * of anchoring right.
 * --------------------------------------------------------------------------- */
.request-demo--with-info {
  justify-content: center;
}

.request-demo--with-info .request-demo__card {
  display: grid;
  grid-template-columns: 387fr 595fr;
  column-gap: var(--space-30);
  width: 100%;
  max-width: var(--container-content);
  padding: var(--space-20);
}

.request-demo__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  color: var(--color-text-primary);
}

.request-demo__info-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.request-demo__info-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.request-demo__info-title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

.request-demo__info-body {
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
}

.request-demo__info-note {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-inter);
  font-size: var(--text-base);
  color: var(--color-white-70);
}

.request-demo__info-note-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-light-green);
}

/* In the with-info layout the form sits directly in the right column —
   align it to the top of the grid track instead of stretching. */
.request-demo--with-info .request-demo__form {
  align-self: start;
}

@media (max-width: 1023px) {
  .request-demo--with-info .request-demo__card {
    grid-template-columns: 1fr;
    row-gap: var(--space-16);
    max-width: 560px;
  }
}

@media (max-width: 767px) {
  .request-demo--with-info .request-demo__card {
    padding: var(--space-16);
    row-gap: var(--space-12);
  }
}