/* ---------------- */
/* GENERAL SETTINGS */
/* ---------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

:root {
  /* colours */
  --primary-desaturated-red: hsl(0, 36%, 70%);
  --primary-soft-red: hsl(0, 93%, 68%);
  --neutral-dark-grayish-red: hsl(0, 6%, 24%);
  --neutral-dark-grayish-red-alpha: hsla(0, 6%, 24%, 0.3);
  --gradient-linear-light: linear-gradient(
    135deg,
    hsl(0, 0%, 100%),
    hsl(0, 100%, 98%)
  );
  --gradient-linear-soft: linear-gradient(
    135deg,
    hsl(0, 80%, 86%),
    hsl(0, 74%, 74%)
  );
  --gradient-linear-soft-alpha: linear-gradient(
    135deg,
    hsla(0, 80%, 86%, 0.4),
    hsla(0, 74%, 74%, 0.5)
  );

  /* font-size */
  --fs-heading-1: 7.2rem;
  --fs-heading-1-mobi: 3.8rem;
  --fs-normal: 1.6rem;
  --fs-medium: 1.3rem;
  --fs-small: 1.1rem;

  /* paddings & margins */
  --mb-bottom: 2.8rem;
  --container-padding: 12rem;
  --item-padding: 1.8rem;

  /* grid & flex gaps */
  --container-gap-large: 12rem;
  --container-gap-normal: 3rem;
  --container-gap-medium: 2rem;
  --grid-container-gap: 5rem;
  --flex-item-gap-normal: 3rem;

  /* border-radius */
  --border-radius-normal: 0.8rem;
  --border-radius-input: 4rem;
}

body {
  height: 100vh;
  color: #333;
  font-size: var(--fs-normal);

  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(/images/bg-pattern-desktop.svg);
}

main {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  gap: var(--grid-container-gap);
  height: 100%;
  transition: all 1s ease-in-out;
}

/* ---------------- */
/* LEFT-MAIN SECTION */
/* ---------------- */
main > img {
  grid-row: 1/ 2;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.left-main {
  grid-row: 2 / 3;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: start;
  gap: var(--container-gap-large);

  align-content: center;
}

.left-main > img {
  width: 40%;
}

.left-content-container {
  display: flex;
  flex-direction: column;
  gap: var(--flex-item-gap-normal);
}

h1 {
  font-size: var(--fs-heading-1);
  text-transform: uppercase;
  letter-spacing: 1.6rem;
  font-weight: 300;
}

h1 > span {
  color: var(--primary-desaturated-red);
}

p {
  line-height: 3rem;
  letter-spacing: 0.2rem;
  color: var(--primary-desaturated-red);
}

input {
  padding: var(--item-padding);
  width: 100%;
  border-radius: var(--border-radius-input);
  border: 0.2rem solid var(--neutral-dark-grayish-red-alpha);
  font-size: var(--fs-normal);
  color: var(--neutral-dark-grayish-red);
}

input:focus {
  border-color: var(--primary-soft-red);
  border: 0.2rem solid var(--primary-soft-red);

  outline: none;
}

input::placeholder {
  color: var(--neutral-dark-grayish-red-alpha);
}

form {
  position: relative;
}

button {
  position: absolute;
  width: 25%;
  border: none;
  background: var(--gradient-linear-soft);
  right: 0;
  top: 0;
  border-radius: var(--border-radius-input);
  padding: 1.7rem 1.6rem;
  cursor: pointer;
  box-shadow: 0 0.8rem 2rem var(--primary-desaturated-red);
}

button:hover {
  background: var(--gradient-linear-soft-alpha);
  box-shadow: 0 1.2rem 2rem var(--primary-desaturated-red);
  border: 0.1rem solid var(--gradient-linear-soft-alpha);
}

/* ---------------- */
/* RIGHT-MAIN SECTION */
/* ---------------- */
.right-main {
  background-image: url(/images/hero-desktop.jpg);
  height: 100%;
  background-size: cover;
  grid-row: 1 / 3;
}

/* ---------------- */
/* MEDIA QUERIES STYLING */
/* ---------------- */

@media (width <= 730px) {
  main {
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr, 1fr, 1fr;
    gap: 0;
    transition: all 1s ease-in-out;
    /* height: 100vh; */
  }

  main > img {
    scale: 0.9;
    justify-self: self-start;
    padding: 1rem 4rem;
  }

  h1 {
    font-size: 4.2rem;
    line-height: 4.5rem;
  }

  p {
    font-size: var(--fs-medium);
  }

  .right-main {
    background-image: url(/images/hero-mobile.jpg);
    background-size: cover;
    height: 35rem;
    grid-row: 2 / 3;
  }

  .left-main {
    grid-row: 3 / 4;
    padding: 0 4rem;
  }

  .left-content-container {
    text-align: center;
    gap: 2rem;
    padding: 3rem 1rem;
  }

  input,
  button {
    padding: 2rem;
  }
}

/* ---------------- */
/* ERROR CLASSES STYLING */
/* ---------------- */
.error {
  background: no-repeat url(/images/icon-error.svg);
  background-position: calc(70%);
  border-color: var(--primary-soft-red);
}

#error-message {
  /* display: none; */
  text-align: left;
  color: var(--primary-soft-red);
  height: 100%;
  font-size: var(--fs-small);
  font-weight: 700;
  padding: 0 var(--item-padding);
}