/* singlepromo.st.css */
@namespace "SinglePromo";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    laptop,
    --color-accent-1,
    --color-ui-inverse,
    --spacing-unit,
    --grid-gap-md,
    --grid-base-columns-md,
    --gutter-width-md;
}

:import {
  -st-from: "../../components/SinglePromo/singlepromo.st.css";
  -st-default: SinglePromo;
  -st-named: body
}

:import {
  -st-from: "../../components/Link/link.st.css";
  -st-default: Link;
}

:import {
  -st-from: "../../components/Text/text.st.css";
  -st-default: Text;
}

: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 {
  SinglePromo {
    --foreground-color: var(--color-ui-inverse);
    --bg-color: var(--color-accent-1);
    background-color: var(--bg-color);
    color: var(--foreground-color);
    margin-bottom: calc(var(--spacing-unit) * 3);
  }

  SinglePromo::body {
    padding: calc(var(--spacing-unit) * 3) 0;
    margin-left: var(--gutter-width-md);
    margin-right: var(--gutter-width-md);
  }

  SinglePromo::body Text {
    color: inherit;
  }

  /* Single Promo Link - wrapping title */
  SinglePromo::titleLink {
    display: block;
    color: inherit;
    background: none;
    border: none;
  }

  SinglePromo::titleLink:hover,
  SinglePromo::titleLink:focus {
    text-decoration: underline;
  }

  SinglePromo::title {
    margin-bottom: calc(var(--spacing-unit) * 2);
  }

  SinglePromo::description {
    margin-bottom: calc(1.2em + calc(var(--spacing-unit) * 2));
  }

  SinglePromo::cta {
    --btn-accent-color: var(--foreground-color);
  }

  /* Preserve height when there's no description or media */
  SinglePromo:preserveHeight {
    padding-top: 32px;
    padding-bottom: 33px;
  }
}

/* Large devices */
@media value(laptop) {
  @st-scope Base {
    SinglePromo::innerContainer {
      /* max-width: unset; */
      display: grid;
      /* Grid start and finish for desktop */
      grid-column-gap: var(--grid-gap-md);
      /* Single Promo needs to sit in the usual grid because it's full-bleed */
      grid-template-columns: var(--grid-base-columns-md);
      align-items: center;
    }

    SinglePromo::image,
    SinglePromo::media {
      margin: 0;
      /* Define where it starts and ends, swapping the image and body */
      grid-column: 8 / span 7;
    }

    /* With textual content only - body extends further, but sits within main content area. */
    SinglePromo::body {
      margin: 0;
      grid-row: 1;
      /* Define where it starts and ends */
      grid-column: content-start / span 8;
    }

    /* With image - body takes 50% */
    SinglePromo::innerContainer:hasImage .body {
      /* Define where it starts and ends */
      grid-column: outset-start / span 4;
    }
  }
}