/* === VARIABLES === */
:root {
  /* COLORS PRIMARY*/
  --cyan-300: #8fe3f9;
  --cyan-600: #4d96a9;
  --cyan-hover: #61afc2;
  --purple-300: #d9b8ff;
  --purple-600: #855fb1;
  --purple-hover: #9f7acd;

  /* COLORS NEURAL */
  --white: #fafafa;
  --slate-300: #d1d1df;
  --slate-600: #87879d;
  --slate-900: #28283d;

  /* FONT FAMILY */
  --font-family-base: "Red Hat Display", sans-serif;

  /* FONT SIZES */
  --font-size-1: clamp(4rem, 2.814vw + 2.096rem, 6.4rem);
  --font-size-2: clamp(2.4rem, 0.958vw + 2.16rem, 4rem);
  --font-size-3: clamp(1.6rem, 0vw + 1.6rem, 1.6rem);
  --font-size-4: clamp(1.6rem, 0.12vw + 1.57rem, 1.8rem);
  --font-size-5: clamp(1.6rem, 0vw + 1.6rem, 1.6rem);

  /* FONT WEIGHTS */
  --weight-500: 500;
  --weight-900: 900;

  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;

  /* LETTERS SPACING */
  --letter-space-4: 0.4rem; /* 4px bei 1rem = 10px */

  /* TEXT PRESETS */
  --text-preset-1: var(--weight-900) var(--font-size-1) / var(--line-height-tight) var(--font-family-base);
  --text-preset-2: var(--weight-900) var(--font-size-2) / var(--line-height-tight) var(--font-family-base);
  --text-preset-3: var(--weight-900) var(--font-size-3) / var(--line-height-normal) var(--font-family-base);
  --text-preset-4: var(--weight-500) var(--font-size-4) / var(--line-height-normal) var(--font-family-base);
  --text-preset-5: var(--weight-900) var(--font-size-5) / var(--line-height-normal) var(--font-family-base);

  /* SPACINGS */
  --space-50: 0.3077rem; /* 4px */
  --space-100: 0.6154rem; /* 8px */
  --space-200: 1.2308rem; /* 16px */
  --space-300: 1.8462rem; /* 24px */
  --space-400: 2.4615rem; /* 32px */
  --space-500: 3.0769rem; /* 40px */
  --space-700: 4.3077rem; /* 56px */
  --space-800: 4.9231rem; /* 64px */
  --space-900: 5.5385rem; /* 72px */
  --space-1000: 6.1538rem; /* 80px */
  --space-1400: 8.6154rem; /* 112px */
  --space-2000: 12.3077rem; /* 160px */
  --section-padding: var(--space-500) var(--space-300) var(--space-500) var(--space-300);
}

/* === GLOBAL STYLES === */
/* MOBILE FIRST APPROACH */
html {
  font-size: 62.5%; /* 16px * 0.625 = 10px */
  text-wrap: wrap;
  overflow-x: hidden;
}

body {
  font-size: 1.3rem; /* 13px */
  min-height: 100vh;
  background-color: var(--white);
}

.nav-wrapper {
  padding-block-start: var(--space-800);
  padding-block-end: var(--space-800);
}

.logo-img {
  margin: 0 auto;
}

/* HERO SECTION */
.hero {
  display: flex;
  flex-flow: column;
  gap: var(--space-800);
  padding: var(--section-padding);
  margin: 0 auto;
}

.hero-content {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
  max-width: clamp(20rem, 75vw, 48rem);
  margin: 0 auto;
  gap: var(--space-300);
}

.hero-heading {
  font: var(--text-preset-1);
  color: var(--slate-900);
}

.hero-text {
  font-family: var(--font-family-base);
  font-size: var(--font-size-4);
  color: var(--slate-600);
}

.hero-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-200);
}
.hero-img {
  margin: 0 auto;
}

.img-hide {
  display: none;
}

.breakout {
  width: auto;
  margin-inline: calc(80% - 80vw);
}

@media only screen and (min-width: 35rem) {
  .hero-btn-wrapper {
    flex-direction: row;
  }
}

@media only screen and (min-width: 64rem) {
  .hero {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-800);
    max-width: 170rem;
  }

  .hero-content {
    margin: 0;
  }

  .img-hide {
    display: block;
  }

  .breakout {
    margin-inline: 0;
    width: auto;
    margin-inline: calc(80% - 80vw);
  }
}

@media only screen and (min-width: 100rem) {
  .breakout {
    margin-inline: 0;
  }
}

/* INFO SECTION */
.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--section-padding);
  gap: var(--space-800);
}

.info-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-500);
}

.info-gallery img {
  border-radius: 1.6rem;
  transition: transform 0.5s ease;
}

.info-gallery img:hover {
  transform: scale(1.03);
}

.info-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: clamp(20rem, 80vw, 48rem);
  margin: 0 auto;
  gap: var(--space-300);
}

.info-title-wrapper {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-200);
}

.info-heading {
  font: var(--text-preset-2);
  color: var(--slate-900);
}

.info-caption {
  font: var(--text-preset-3);
  color: var(--cyan-600);
  text-transform: uppercase;
  letter-spacing: var(--letter-space-4);
}

.info-text {
  font-family: var(--font-family-base);
  font-size: var(--font-size-4);
  color: var(--slate-600);
}

@media only screen and (min-width: 48rem) {
  .info-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--space-500);
    max-width: 120rem;
  }
}

/* COMPONENTS */
.btn {
  padding-block: var(--space-200);
  padding-inline: var(--space-500);
  color: var(--white);
  font: var(--text-preset-5);
  border-radius: 2.8rem;
  width: fit-content;
  transition: background-color 300ms ease-in-out;
}

.btn-cyan {
  background-color: var(--cyan-600);
}

.btn-cyan:hover,
.btn-cyan:focus-visible {
  background-color: var(--cyan-hover);
}

.btn-purple {
  background-color: var(--purple-600);
}

.btn-purple:hover,
.btn-purple:focus-visible {
  background-color: var(--purple-hover);
}

.btn-cyan span {
  font: var(--text-preset-5);
  color: var(--cyan-300);
}

.btn-purple span {
  font: var(--text-preset-5);
  color: var(--purple-300);
}

.seperator {
  display: flex;
  flex-flow: column;
  position: relative;
  margin: 0 auto;
  text-align: center;
}

.seperator-line {
  width: 0.1rem;
  height: 8rem;
  background-color: var(--slate-300);
  margin: 0 auto;
}

.seperator-circle {
  border: 0.1rem solid;
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 50%;
  border-color: var(--slate-300);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
}

.seperator span {
  font: var(--text-preset-5);
  color: var(--slate-600);
}

/* FOOTER */
.footer-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  padding: var(--section-padding);
  background-image: url("./assets/mobile/image-footer.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: var(--space-2000);
}

.footer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--cyan-600);
  opacity: 0.9;
  z-index: 0;
}

.footer-cta-content {
  position: relative;
  z-index: 1;
}

.footer-cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: clamp(20rem, 80vw, 48rem);
  margin: 0 auto;
  gap: var(--space-500);
  padding: var(--space-1000) 0;
}

.footer-cta-heading {
  font: var(--text-preset-2);
  color: var(--white);
}

.footer-cta-text {
  font: var(--text-preset-4);
  color: var(--white);
}

.translate-up-50 {
  position: absolute;
  top: -10.8rem;
  left: 50%;
  transform: translateX(-50%);
}

@media only screen and (min-width: 35rem) {
  .footer-cta {
    background-image: url("./assets/tablet/image-footer.jpg");
  }
}

@media only screen and (min-width: 64rem) {
  .footer-cta {
    background-image: url("./assets/desktop/image-footer.jpg");
  }

  .footer-cta-content {
    flex-flow: row;
    max-width: 120rem;
    width: 100%;
    gap: var(--space-400);
    text-align: left;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-1400) 0;
  }

  .footer-cta-heading {
    max-width: 35rem;
  }

  .footer-cta-text {
    max-width: 35rem;
  }
}