@layer reset, base, layout, components, utility;

@layer reset {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  [role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: .5rem;
    vertical-align: middle;
    max-inline-size: 100%;
    block-size: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
    text-decoration: none;
    font-weight: normal;
  }

  p,
  li,
  ul,
  ol {
    text-wrap: pretty;
    padding: 0;
    margin: 0;
  }

  a {
    font-size: var(--fs-body);
    color: black;
  }

  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {

  @font-face {
    font-family: "BM";
    src: url("sources/fonts/bm.woff2") format("woff2");
    font-display: swap;
  }

  @font-face {
    font-family: "EB Garamond Regular";
    src: url("sources/fonts/EBGaramond-Regular.woff2") format("woff2");
    font-display: swap;
  }

  :root {
    font-family: var(--ff-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    --color-white: oklch(100% 0 0);
    --color-primary-500: oklch(0.4674 0.0385 44.87);
    --color-accent-500: oklch(0.8965 0.054 26.67);
    --color-50: oklch(0.9199 0.0187 29.91);
    --color-100: oklch(64.45% 0.0556 27.52);
    --color-200: oklch(55.12% 0.0142 29.93);
    --color-300: oklch(69.94% 0.1224 28.62);
    --color-400: oklch(49.03% 0.0446 26.63);
    --color-900: oklch(68.65% 0.0561 185.48);

    --ff-body: "EB Garamond Regular";
    --ff-heading: "BM";

    --fs-200: .6rem;
    --fs-300: .725rem;
    --fs-400: .85rem;
    --fs-500: 1rem;
    --fs-600: 1.25rem;
    --fs-700: 1.75rem;
    --fs-800: 2.25rem;
    --fs-900: 3.5rem;

    /* Setting up declaritive variables. */

    --fs-body: clamp(var(--fs-200), 2vw, var(--fs-400));
    --fs-primary-heading: var(--fs-900);
    --fs-secondary-heading: clamp(var(--fs-600), 5vw, var(--fs-700));
    --fs-vertical-text: clamp(var(--fs-500), 6vw, var(--fs-800));
    --fs-nav: var(--fs-200);

    --bg-color-accent-dark: var(--color-primary-500);
    --bg-color-accent-light: var(--color-accent-500);
    --bg-color-light: var(--color-50);

    @media (width > 760px) {
      /* --fs-body: minmax(1.var(--fs-600); */
      --fs-primary-heading: calc(var(--fs-900) * 1.5);
      /* --fs-secondary-heading: var(--fs-800); */
      /* --fs-vertical-text: var(--fs-900); */
      --fs-nav: var(--fs-300);
    }

  }

  @property --gradient-button-fill {
    syntax: '<color>';
    inherits: true;
    initial-value: oklch(0.9199 0.0187 29.91);
  }

  html {
    font-family: var(--ff-body);
    line-height: 1.6;
  }

  body {
    font-size: var(--fs-body);
    min-block-size: 100dvh 100svh;
    -webkit-font-smoothing: antialiased;
    background-color: var(--bg-color-light);

    letter-spacing: 0.1rem;
    text-transform: uppercase;
  }


  footer {
    /* position: relative; */
    /* bottom: 0; */
    margin-top: 1.5rem;
    grid-row: 3;
    display: grid;
    grid-auto-flow: column dense;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;

  }

  .primary-heading {
    font-family: var(--ff-heading);
    font-size: var(--fs-primary-heading);
    text-transform: none;
    letter-spacing: normal;
  }

  .secondary-heading {
    font-size: var(--fs-vertical-text);
    font-weight: 800;
    letter-spacing: normal;
  }

}


@layer layout {

  body {
    display: grid;
    /* grid-template-rows: auto 1fr auto; */
    margin-block: 10svh;
  }

  .no-nav {
    display: grid;
    justify-content: center;

  }

  .inline-wrapper {
    inline-size: 100%;
    margin-inline: auto;
  }


  /*Selects everything except the first child.*/
  .flow>*+* {
    margin-block-start: var(--flow-spacer, .5rem);
  }
}

@layer components {

  .cards {
    max-inline-size: 100vw;

    display: grid;
    gap: 2rem;
    grid-auto-flow: column;
    grid-auto-columns: 90%;

    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    overflow-y: hidden;

    padding: 1.5rem;

    @media (width > 760px) {
      grid-auto-columns: 70ch;

    }
  }

  .snaps-inline {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 1.5rem;
  }

  .snaps-inline>* {
    scroll-snap-align: start;
  }

  .right-banner {
    /* position: relative; */
    background-color: var(--bg-color-accent-light);
    display: grid;
    grid-template-columns: 65% 20% 15%;

  }

  .left-banner {
    background-color: var(--bg-color-accent-light);
    display: grid;
    grid-template-columns: 10% 20% 1fr;

    div:nth-child(3) {
      padding: 1rem 2rem 1rem;
      align-content: center;
    }
  }

  .banner {
    padding: 1.5rem 0.2rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    p {
      color: var(--bg-color-accent-light);
      writing-mode: vertical-lr;
      transform: rotate(180deg);
      font-size: var(--fs-600);
      letter-spacing: 0.2rem;
    }

    h3 {
      color: var(--bg-color-accent-light);
      writing-mode: sideways-rl;
      transform: rotate(180deg);
      font-size: var(--fs-vertical-text);
      letter-spacing: 0.2rem;
      word-spacing: 5px;
      inline-size: fit-content;
      block-size: fit-content;
    }
  }

  [data-color="accent-light"] {
    background-color: var(--bg-color-accent-light);

  }

  [data-color="accent-dark"] {
    background-color: var(--bg-color-accent-dark);
  }

  .card {
    /* border: 1px solid grey; */
    /* padding: 0.5rem 1rem; */
    border-radius: 0.5rem;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
    /* aspect-ratio: 2/3; */
    max-block-size: 100%;

    @media (width > 760px) {
      min-block-size: 90svh;
    }
  }

  .job-title {
    /* position: relative; */
    margin-top: 3.5rem;
    margin-left: 1.5rem;
    /* z-index: 1; */
    marging-bottom: 2rem;
  }

  .call-to-action {
    margin-top: min(3vw, 2rem);
    display: grid;
    justify-items: center;
  }

  .apply-now {
    color: black;
    text-transform: uppercase;
    font-size: var(--fs-body);
    border-radius: 2.5rem;
    text-decoration: none;
    cursor: pointer;
    padding: 1rem 1.5rem;
    transition: --gradient-button-fill 250ms;

    border: 4px solid transparent;
    background:
      linear-gradient(var(--gradient-button-fill) 0 0) padding-box,
      linear-gradient(-45deg, var(--bg-color-accent-dark), var(--bg-color-accent-light)) border-box;

    &:hover,
    &:focus-visible {
      color: var(--color-white);
      --gradient-button-fill: transparent;
    }
  }
}

@layer utility {

  .text-center {
    text-justify: center;
  }

  .pd-left {
    padding-left: 1.5rem;
  }
}