/*
  Shell shared by the profile settings screens that render `profile_nav`
  (Schedule, Events). The nav and the main column sit side by side once there's
  room; the header carries a title, subtitle, and a trailing action.
*/

@layer modules {
  .profile-page {
    margin-inline: auto;
    padding-block: 2rem;
    padding-inline: 1rem;

    @media (min-width: 40rem) {
      padding-inline: 1.5rem;
    }

    @media (min-width: 64rem) {
      padding-inline: 2rem;
    }
  }

  .profile-page__layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    @media (min-width: 48rem) {
      flex-direction: row;
    }
  }

  .profile-page__main {
    flex: 1;
    min-width: 0;
    max-width: var(--container-3xl);
  }

  .profile-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .profile-page__title {
    font-weight: var(--font-weight-bold);
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    text-wrap: balance;
  }

  .profile-page__subtitle {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-600);
  }
}