/*
  Welcome message component
  
  Structure:
  .a-welcome-message              - Centered vertical stack (logo above, greeting + subtitle below)
  .a-welcome-message-logo       - Optional logo/branding slot
  .a-welcome-message-body       - Greeting + subtitle group (tight gap)
  .a-welcome-message-greeting - Serif greeting (Title/Welcome). Wrap the name in <b>/<strong>.
  .a-welcome-message-subtitle - Optional muted supporting line
  
  States:
  .a-welcome-message--muted       - Dimmed logo and muted greeting (surface disabled/unavailable)
  
  Below 480px the mobile layout applies automatically: tighter gaps, smaller greeting and logo.
  
  The logo and subtitle are optional — omit the element to hide it.
*/

.a-welcome-message {
  --gap: var(--lens-semantic-spacing-desktop-gap-4-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--a-welcome-message-gap, var(--gap));
  &.a-welcome-message--muted {
    & .a-welcome-message-logo {
      opacity: 0.5;
    }
    & p.a-welcome-message-greeting {
      color: var(--lens-semantic-color-type-muted);
    }
  }
}

.a-welcome-message-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.a-welcome-message-body {
  --gap: var(--a-welcome-message-body-gap, var(--lens-semantic-spacing-desktop-gap-0-5));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

p.a-welcome-message-greeting {
  margin: 0;
  font-family: var(--lens-semantic-font-title-welcome-font-family);
  font-size: var(--lens-semantic-font-title-welcome-font-size);
  font-weight: var(--lens-semantic-font-title-welcome-font-weight);
  line-height: var(--lens-semantic-font-title-welcome-line-height);
  letter-spacing: var(--lens-semantic-font-title-welcome-letter-spacing);
  color: var(--lens-semantic-color-type-default);
}

p.a-welcome-message-subtitle {
  margin: 0;
  font-family: var(--lens-semantic-font-text-body-font-family);
  font-size: var(--lens-semantic-font-text-body-font-size);
  font-weight: var(--lens-semantic-font-text-body-font-weight);
  line-height: var(--lens-semantic-font-text-body-line-height);
  letter-spacing: var(--lens-semantic-font-text-body-letter-spacing);
  color: var(--lens-semantic-color-type-muted);
}

@media (max-width: 480px) {
  .a-welcome-message {
    --gap: var(--lens-semantic-spacing-desktop-gap-3);
  }
  .a-welcome-message-body {
    --gap: var(--a-welcome-message-body-gap, var(--lens-semantic-spacing-desktop-gap-1));
  }
  .a-welcome-message-logo :is(img, svg) {
    width: auto;
    height: 25px;
  }
  p.a-welcome-message-greeting {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}