/* assets/css/components/service-finder.css
 * @layer components — Homepage Service Finder (cascading selector bar).
 *
 * Light tinted-teal panel that sits on the off-white page band above the dark
 * About section — alternating surface rhythm, not a second dark slab. Inline
 * horizontal row on desktop; selects + button stack on tablet and mobile.
 */

@layer components {

  .vimta-service-finder {
    container-type: inline-size;
  }

  .vimta-service-finder__panel {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    padding: var(--space-2xl);
    background: var(--surface-tinted);
    border: 1px solid var(--primary-ultra-light);
    border-radius: var(--radius-xl);
  }

  .vimta-service-finder__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .vimta-service-finder__eyebrow {
    margin: 0;
    font-size: var(--text-overline);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--secondary);
  }

  .vimta-service-finder__heading {
    margin: 0;
    font-size: var(--h3);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--primary-dark);
  }

  .vimta-service-finder__form {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
  }

  /* Row: three fields + the submit. Fields share width; submit hugs content.
     Stacks under the container breakpoint. */
  .vimta-service-finder__row {
    display: flex;
    align-items: end;
    gap: var(--cluster-gap);
  }

  .vimta-service-finder__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1 1 0;
    min-inline-size: 0;
  }

  .vimta-service-finder__label {
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-snug);
    color: var(--primary-semi-dark);
  }

  .vimta-service-finder__select-wrap {
    position: relative;
    display: flex;
  }

  .vimta-service-finder__select {
    inline-size: 100%;
    min-inline-size: 0;
    appearance: none;
    padding-block: var(--space-s);
    padding-inline: var(--space-m);
    padding-inline-end: calc(var(--space-m) * 2.5);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--text-main);
    background: var(--white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-default);
  }

  .vimta-service-finder__select:hover {
    border-color: var(--primary-light);
  }

  .vimta-service-finder__select:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-color: var(--primary);
  }

  /* Locked step (parent not chosen yet). Reads as "waiting", not "broken":
     stays on white with a softer border + muted text + dashed focus-affordance,
     rather than a flat grey dead box. */
  .vimta-service-finder__select:disabled {
    color: color-mix(in oklch, var(--text-muted) 70%, transparent);
    background: color-mix(in oklch, var(--white) 70%, var(--surface-tinted));
    border-color: var(--primary-ultra-light);
    border-style: dashed;
    cursor: not-allowed;
  }

  .vimta-service-finder__select:disabled:hover {
    border-color: var(--primary-ultra-light);
  }

  .vimta-service-finder__chevron {
    position: absolute;
    inset-inline-end: var(--space-m);
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    pointer-events: none;
  }

  .vimta-service-finder__select:disabled + .vimta-service-finder__chevron {
    color: var(--primary-light);
  }

  /* Explore — primary action on a light surface (marigold stays a strike, not
     a button). Disabled until a service is chosen. */
  .vimta-service-finder__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    flex-shrink: 0;
    padding-block: var(--space-s);
    padding-inline: var(--space-xl);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-on-primary);
    background: var(--primary);
    border: 0;
    border-radius: var(--radius-m);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      gap var(--duration-fast) var(--ease-default);
  }

  .vimta-service-finder__submit:hover {
    background: var(--primary-hover);
    gap: var(--space-s);
  }

  .vimta-service-finder__submit:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .vimta-service-finder__submit-arrow {
    color: currentColor;
  }

  .vimta-service-finder__helper {
    margin: 0;
    font-size: var(--text-s);
    color: var(--text-muted);
  }

  /* Tablet + mobile: stack the row. Selects and button go full width.
     Container-query so the component adapts to whatever column hosts it. */
  @container (max-width: 52rem) {
    .vimta-service-finder__row {
      flex-direction: column;
      align-items: stretch;
    }

    .vimta-service-finder__field {
      flex: 1 1 auto;
    }

    .vimta-service-finder__submit {
      inline-size: 100%;
    }
  }

  @container (max-width: 30rem) {
    .vimta-service-finder__panel {
      padding: var(--space-l);
    }
  }
}