/* card.st.css  */
@namespace "Card";

/* = Project and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    laptop,
    --border-radius-special-md,
    --color-background-main,
    --grid-gap-md,
    --grid-base-columns-md,
    --grid-inner-base-columns,
    --gutter-width-md,
    --spacing-unit;
}

/* = Import Root Component CSS API */
:import {
  -st-from: "../../components/Card/card.st.css";
  -st-default: Card;
  -st-named: title;
}

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

:import {
  -st-from: '../../mixins/fullAreaClickable.st.css';
  -st-default: FullAreaClickable;
}

:import {
  -st-from: "../../mixins/boxShadow.st.css";
  -st-default: BoxShadow;
}

:import {
  -st-from: "../../mixins/linkFocus.st.css";
  -st-named: linkFocus;
}

@st-scope Base {

  /* Card */
  Card {
    position: relative;
    text-decoration: none;
  }

  /* title - h3 default but can change */
  Card::title {
    margin-bottom: calc(var(--spacing-unit) * 2);
  }

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

  Card::image {
    width: 100%
  }

  /* Title link */
  Card::titleLink {
    text-decoration: none;
    background: none;
    border: none;
    display: block;
    padding: 0;
  }

  /* Make full area clickable - https://inclusive-components.design/cards/ */
  Card::titleLink::after,
  Card::ctaButton::after {
    -st-mixin: FullAreaClickable;
  }

  /* Will not happen when CTA is present as it's tab-index will be -1. See component. */
  Card::titleLink:hover .title,
  Card::titleLink:focus .title {
    text-decoration: underline;
  }
}

/* Large devices */
@media value(laptop) {
  @st-scope Base {

    Card:imagePos(start)::image,
    Card:imagePos(end)::image,
    Card:imagePos(start)::body,
    Card:imagePos(end)::body {
      width: calc(50% - (var(--grid-gap-md) / 2));
    }

    Card:imagePos(start)::image {
      margin-right: var(--grid-gap-md);
    }

    Card:imagePos(end)::image {
      margin-left: var(--grid-gap-md);
    }

    Card:variant(2):imagePos(start)::body,
    Card:variant(2):imagePos(end)::body {
      display: flex;
      flex-direction: column;
      align-self: center;
    }

    Card:variant(2):imagePos(end)::image::imageContainer {
      border-bottom-right-radius: 40px;
    }
  }
}

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

  /* 1 - Basic promo style. */
  Card:variant(1)::body {
    padding: calc(var(--spacing-unit) * 3) 0;
  }

  /* 2 - Quirky rounded style with box shadow. */
  Card:variant(2) {
    background-color: var(--color-background-main);
    border-radius: var(--border-radius-special-md);
    -st-mixin: BoxShadow;
  }

  Card:variant(2)::title {
    font-size: 26px;
    font-weight: 500;
  }

  Card:variant(2)::titleLink:hover .title,
  Card:variant(2)::titleLink:focus .title {
    /* Bold cause text to wrap and jump at certain line lengths, compromise. */
    -webkit-font-smoothing: auto;
  }

  Card:variant(2)::titleLink:focus .title {
    -st-mixin: linkFocus;
  }

  Card:variant(2)::image::img {
    transition: transform 0.3s;
    transform: scale(1.01);
  }

  Card:variant(2):focus-within::image::img,
  Card:variant(2):hover::image::img {
    transform: scale(1.2);
  }

  Card:variant(2):imagePos(start)::image::imageContainer,
  Card:variant(2):imagePos(top)::image::imageContainer {
    border-top-left-radius: 40px;
  }

  Card:variant(2):imagePos(bottom)::image::imageContainer {
    border-bottom-right-radius: 40px;
  }

  Card:variant(2):imagePos(start),
  Card:variant(2):imagePos(end) {
    padding: 0;
  }

  Card:variant(2):imagePos(start)::body,
  Card:variant(2):imagePos(end)::body {
    padding: calc(var(--spacing-unit) * 3);
  }

  Card:variant(2):imagePos(start)::description,
  Card:variant(2):imagePos(end)::description {
    margin-bottom: 0;
  }

  Card:variant(2):imagePos(start)::ctaButton,
  Card:variant(2):imagePos(end)::ctaButton {
    margin-top: calc(1.2em + calc(var(--spacing-unit) * 2));
    margin-bottom: calc(var(--spacing-unit) * 2);
    width: fit-content;
  }

  Card:variant(2):imagePos(top)::body,
  Card:variant(2):imagePos(bottom)::body {
    padding: calc(var(--spacing-unit) * 3);
  }

  Card:variant(2):imagePos(top)::image::imageContainer {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  Card:variant(2):imagePos(bottom)::image::imageContainer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /* 3 - Promoted item style */
  Card:variant(3) {
    display: grid;
    /* Grid start and finish for desktop */
    grid-column-gap: var(--grid-gap-md);
    grid-template-columns: var(--grid-inner-base-columns);
    grid-template-rows: repeat(12, minmax(0, auto))
  }

  Card:variant(3)::image {
    margin: 0;
    grid-column: 1 / span 12;
    grid-row: 1 / 8;
  }

  Card:variant(3)::body {
    position: relative;
    border-radius: 40px 0 0 0;
    width: 100%;
    margin: 0;
    padding: calc(var(--spacing-unit) * 4);
    grid-column: 7 / span 6;
    grid-row: 6 / 12;
    background-color: var(--color-background-main);
  }

  Card:variant(3)::description {
    margin-bottom: 0;
  }

  Card:variant(3)::ctaButton {
    margin-top: calc(1.2em + calc(var(--spacing-unit) * 2));
    margin-bottom: calc(var(--spacing-unit) * 2);
    width: fit-content;
  }
}