/*
 * D11 - Welcome
 *
 * Styles spécifiques à welcome.html.
 */


.welcome-page {
  min-height: 100dvh;

  background:
    radial-gradient(
      circle at 20% 10%,
      var(--color-surface-raised),
      transparent 38%
    ),
    var(--color-background);
}


.welcome {
  display: flex;
  flex-direction: column;

  width:
    min(
      calc(100% - 3rem),
      1180px
    );

  min-height: 100dvh;

  margin-inline: auto;

  padding:
    var(--space-2xl)
    0;

  gap:
    var(--space-2xl);
}


/* =========================================================
   HERO
   ========================================================= */

.welcome__hero {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.85fr)
    minmax(340px, 1.15fr);

  min-height: 620px;

  overflow: hidden;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-xl);

  background:
    var(--color-surface);

  box-shadow:
    var(--shadow-lg);
}


/* =========================================================
   IDENTITE
   ========================================================= */

.welcome__identity {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding:
    var(--space-2xl);

  gap:
    var(--space-xl);

  border-right:
    1px solid
    var(--color-border);

  background:
    var(--color-surface-raised);
}


.welcome__logo {
  width:
    min(280px, 80%);

  margin-inline:
    auto;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0 18px 40px
      var(--color-overlay)
    );
}


.welcome__title-group {
  display: flex;
  flex-direction: column;

  align-items:
    flex-start;

  gap:
    var(--space-sm);
}


.welcome__title {
  display: flex;
  flex-direction: column;

  margin:
    0;

  font-size:
    clamp(
      2.2rem,
      5vw,
      4.5rem
    );

  line-height:
    0.95;

  letter-spacing:
    -0.04em;
}


.welcome__title span {
  color:
    var(--color-primary);

  font-size:
    0.72em;
}


/* =========================================================
   CONTENU
   ========================================================= */

.welcome__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    clamp(
      var(--space-xl),
      5vw,
      var(--space-3xl)
    );

  gap:
    var(--space-lg);
}


.welcome__headline {
  max-width:
    700px;

  margin:
    0;

  font-size:
    clamp(
      2rem,
      4vw,
      3.6rem
    );

  line-height:
    1.05;

  letter-spacing:
    -0.035em;
}


.welcome__description {
  max-width:
    620px;

  margin:
    0;

  color:
    var(--color-text-muted);

  font-size:
    var(--font-size-lg);

  line-height:
    var(--line-height-relaxed);
}


.welcome__actions {
  display: flex;
  flex-wrap: wrap;

  margin-top:
    var(--space-sm);

  gap:
    var(--space-sm);
}


.welcome__login {
  min-height:
    52px;

  padding-inline:
    var(--space-lg);

  font-size:
    var(--font-size-md);
}


.welcome__login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size:
    var(--font-size-lg);
}


/* =========================================================
   FONCTIONNALITES
   ========================================================= */

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .welcome {
    width:
      min(
        calc(100% - 2rem),
        720px
      );

    padding-block:
      var(--space-lg);
  }


  .welcome__hero {
    grid-template-columns:
      1fr;
  }


  .welcome__identity {
    min-height:
      340px;

    border-right:
      0;

    border-bottom:
      1px solid
      var(--color-border);
  }


  .welcome__logo {
    width:
      min(220px, 60%);
  }


  }


@media (max-width: 520px) {

  .welcome {
    width:
      min(
        calc(100% - 1rem),
        100%
      );

    padding-block:
      var(--space-sm);
  }


  .welcome__hero {
    border-radius:
      var(--radius-lg);
  }


  .welcome__identity,
  .welcome__content {
    padding:
      var(--space-lg);
  }


  .welcome__identity {
    min-height:
      280px;
  }


  .welcome__login {
    width:
      100%;
  }

}