/** hero.st.css */
@namespace "Hero";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    laptop,
    widelaptop,
    desktop,
    large,
    --grid-gap-md,
    --grid-base-columns-md,
    --border-radius-special-lg,
    --color-accent-1,
    --color-ui-inverse,
    --spacing-unit;
}

:import {
  -st-from: "../../components/Hero/hero.st.css";
  -st-default: Hero;
}

:import {
  -st-from: "../../mixins/buttonMixin.st.css";
  /* Stylable allows us to rename on import! */
  -st-named: --accent-color as --btn-accent-color;
}

@st-scope Base {
  Hero {
    /* z-index: 1; @todo What is this for? */
    /* Local vars */
    --hero-accent: var(--color-accent-1);
    --cta-align: center;
  }

  Hero::header {
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3);
  }

  /* These are the only title1 overrides to keep it as consistent as possible */
  Hero::title {
    font-size: 1.75rem;
    margin-top: .6em;
  }

  Hero::title::before {
    background-color: var(--color-ui-inverse);
  }

  Hero::description {
    margin-bottom: calc(.83em + calc(var(--spacing-unit) * 2));
  }
}

@media value(tablet) {
  @st-scope Base {
    Hero {
      display: grid;
      grid-column-gap: var(--grid-gap-md);
      /* Hero needs to sit in the usual grid because it's container is full-bleed */
      grid-template-columns: var(--grid-base-columns-md);
      align-items: center;
      height: 100%;
    }
  }
}

/* = Variants */
@st-scope Base {

  /* Variant: Basic */
  Hero:variant(basic) {
    background-color: var(--hero-accent);
    color: var(--color-ui-inverse);
    -webkit-font-smoothing: antialiased;
  }

  Hero:variant(basic)::title,
  Hero:variant(basic)::description {
    /* Override 'Text' component and set to inherit. */
    color: inherit;
  }

  Hero:variant(basic)::cta {
    --btn-accent-color: var(--color-ui-inverse);
  }
}

@media value(tablet) {
  @st-scope Base {
    Hero:variant(basic)::header {
      /* NB: Width adjustment must be done with grid span, not width. */
      padding-left: unset;
      padding-right: unset;
      /**
       * Design wants text to be shorter than full
       * width change it to 12 for full width.
       */
      grid-column: 2 / span 10;
    }
  }
}

@st-scope Base {

  /* Variant: Image with box */
  Hero:variant(hasImage)::header {
    background-color: var(--color-ui-inverse);
  }

  Hero:variant(hasImage)::title {
    color: var(--hero-accent);
  }

  Hero:variant(hasImage)::title::before {
    background-color: var(--hero-accent);
  }

  Hero:variant(hasImage)::image::img {
    max-width: 1650px;
    width: 100%;
  }

  Hero:variant(hasImage)::cta {
    /* Set the accent of the button. */
    --btn-accent-color: var(--hero-accent);
  }
}

@media value(tablet) {
  @st-scope Base {
    Hero:variant(hasImage) {
      /**
       * Applying on image background vw and vh units to fill
       * the whole viewport.
       */
      height: 100%;
      /**
       * Apprx. 75vh.
       * The height changes depending on the screen size, it is
       * adjusted so some content below hero is visible on each
       * screen size. heights below at each media query are not
       * random numbers!
       */
      min-height: 510px;
    }

    Hero:variant(hasImage)::header {
      border-radius: var(--border-radius-special-lg);
      padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 4);
      /**
       * On tablet header width roughly matches the design width.
       * Do not use width so it doesn't mess up the grid alignment.
       */
      grid-column: 2 / span 8;
    }

    Hero:variant(hasImage)::headerContent {
      /*= Allows for the cta to align itself. */
      display: flex;
      flex-direction: column;
    }

    Hero:variant(hasImage)::cta {
      /*= Apply the local button alignment var. */
      align-self: var(--cta-align);
    }
  }
}

/* 1024px */
@media value(laptop) {
  @st-scope Base {
    Hero:variant(hasImage) {
      min-height: 520px;
    }
  }
}

/* 1180px */
@media value(widelaptop) {
  @st-scope Base {
    Hero:variant(hasImage) {
      min-height: 550px;
    }
  }
}

/* 1440px */
@media value(desktop) {
  @st-scope Base {
    Hero:variant(hasImage) {
      min-height: 710px;
    }

    Hero:variant(hasImage)::header {
      grid-column: 2 / span 7;
    }
  }
}

/* 1680px */
@media value(large) {
  @st-scope Base {
    Hero:variant(hasImage) {
      min-height: 875px;
    }

    Hero:variant(hasImage)::header {
      /* On very large screens the header gets smaller */
      grid-column: 2 / span 6;
    }
  }
}