/* ==========================================================================
   HEADER MAIN CONTAINER
   ========================================================================== */
.header {
  display: flex;
}

/* === Content (Text and buttons) === */
.header__content {
  padding: 5.75rem 1rem 1.5rem;
  flex: 1 0 56.875%;
  gap: 1.5rem;
}

/* === Tag === */
.header__tag {
  width: fit-content;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--color-primary);
  font-size: var(--fs-xxs);
  line-height: 1.1875rem;
  color: #ffffff;
}

/* === Text and description === */
.header__intro {
  gap: 1rem;
}

.header__title {
  /* font-size: var(--fs-lg);
  line-height: 2.5rem; */
  font-size: clamp(
    var(--fs-lg),
    calc(var(--fs-lg) + (var(--fs-xl) - var(--fs-lg)) * (100vw / 50rem)),
    var(--fs-xl)
  );
  line-height: clamp(
    2.5rem,
    calc(2.5rem + (2.875rem - 2.5rem) * (100vw / 50rem)),
    2.875rem
  );
  color: var(--color-neutral-12);
}

.header__description {
  font-size: var(--fs-sm);
  line-height: 1.5rem;
  color: var(--color-neutral-300);
}

/* === Action buttons === */
.header__actions {
  display: flex;
  gap: 1.5rem;
}

/* === Image content (Tablet and Desktop) === */
.header__image-wrapper {
  display: none; /* Hidden by default, shown in Media Query */
  flex: 1 1 auto;
}

.header__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   MEDIA QUERIES (Tablet Overrides)
   ========================================================================== */
@media (min-width: 50rem) {
  .header__content {
    padding: 6.8125rem 1.1875rem 2rem 2rem;
  }

  /* .header__title {
    font-size: var(--fs-xl);
    line-height: 2.875rem;
  } */

  .header__actions {
    gap: 0.75rem;
  }

  .header__image-wrapper {
    display: flex;
  }
}

/* ==========================================================================
   MEDIA QUERIES (Desktop Overrides)
   ========================================================================== */
@media (min-width: 90rem) {
  .header__content {
    padding: 10.5625rem 2.3125rem 10.6875rem var(--horizontal-padding-desktop);
    flex-basis: 50%;
  }
}