/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Arts;
}

/* = Project info and vars */
:import {
  -st-from: "../base/project.st.css";
  -st-named:
    tablet,
    --color-overlay,
    --color-accent-1;
}

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

:import {
  -st-from: "./../base/hero.st.css";
  -st-named: --hero-accent, --cta-align;
}

/**
 * Hero 
 *
 * NB: This doesn't feel right anyway, these styles are 
 * basically for hasImage with hasOverlay enabled,
 * else why have a prop for hasOverlay if it does nothing?
 * Rhino work would be needed but changing props based on 
 * siteCode or theme context or other CMS setting 
 * could also be possible. 
 */
@st-scope Arts {
  Hero:variant(hasImage) {
    --overlay-bg: var(--color-overlay);
    --cta-align: start;
    --hero-accent: #fff;
  }

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

  Hero:variant(hasImage)::header {
    background-color: var(--color-accent-1);
  }

  Hero:variant(hasImage)::cta:not(:hover):not(:focus) {
    border-color: var(--hero-accent);
    background: transparent;
  }
}

@media value(tablet) {
  @st-scope Arts {
    Hero:variant(hasImage)::header {
      background-color: transparent;
      padding: 0;
    }
  }
}