/* Buttons */
.button {
    display: inline-block;
    padding: 24px 32px;
    text-transform: uppercase;
    border: 1px solid;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.48px;
}

.button:not(:last-child) {
    margin-right: var(--button-spacing);
}

.button.button-primary,
.button.button-secondary {
    color: var(--trm-color-white);
}

.button.button-primary {
    background-color: var(--trm-color-primary);
    border-color: var(--trm-color-primary);
}

.button.button-secondary {
    color: var(--trm-color-white);
}

.button.button-outline {
    background-color: transparent;
}

.button.button-primary.button-outline {
    border-color: var(--trm-color-primary);
}

.button.button-secondary.button-outline {
    border-color: var(--trm-color-white);
}

/* Product Card */
.product-card,
.product-card img {
    max-width: 100%;
}

.product-card {
    display: flex;
    flex-direction: column;
}

.product-card {
    border: 1px solid var(--trm-border-gray);
}

.card-bg-white .product-card .card-body {
    background-color: var(--trm-color-white);
}

.card-bg-gray .product-card .card-body {
    background-color: var(--trm-bg-gray);
}

.card-bg-alternate .product-card:nth-child(odd) .card-body {
    background-color: var(--trm-bg-white);
}

.card-bg-alternate .product-card:nth-child(even) .card-body {
    background-color: var(--trm-bg-gray);
}

.product-card .card-title,
.product-card .card-description {
    padding: 16px;
}

.product-card .card-title {
    border-bottom: 1px solid var(--trm-border-gray);
}

.product-card .card-title>* {
    font-size: var(--font-md);
    font-weight: 700;
    line-height: 1.36;
    text-transform: uppercase;
}

.product-card .card-description>* {
    font-size: var(--font-sm);
    color: var(--trm-text-gray);
}

.product-card .card-footer {
    border-top: 1px solid var(--trm-border-gray);
}

.product-card .card-footer.hide-footer {
    display: none;
}

.product-card .card-button {
    display: flex;
}

.product-card .card-button .button-text,
.product-card .card-button .button-icon {
    display: inline-block;
    padding: 20px;
    color: var(--trm-color-primary);
}

.product-card .card-button .button-text {
    flex-grow: 1;
    border-right: 1px solid var(--trm-border-gray);
    font-size: var(--font-md);
    font-weight: 700;
    line-height: 1.18;
}

.product-card .card-button .button-text.button-text-is-product-name {
    text-transform: uppercase;
}

/* We use a calc to show the two factors in determining this padding: the padding of the card itself and then the size of the font  */
.product-card .card-description ul:not(:first-child) {
    padding-inline-start: calc(20px + 1em);
}

/* Image Card */
.image-card img {
    max-width: 100%;
}

.image-card {
    display: flex;
    flex-direction: column;
}

.image-card {
    border: 1px solid var(--trm-border-gray);
}

.image-card .card-title {
    padding: 16px;
    color: var(--trm-color-black);
}

/* Just for demo */
.no-title .image-card .card-body {
    display: none;
}

/* End demo */

.image-card .card-title>* {
    font-size: var(--font-md);
    font-weight: 700;
    line-height: 1.36;
    text-transform: uppercase;
}

/* Staff Card */
.staff-card,
.staff-card img {
    max-width: 100%;
}

.staff-card {
    display: flex;
    flex-direction: column;
}

.staff-card {
    border: 1px solid var(--trm-border-gray);
}

.staff-card .card-quote {
    padding: 16px;
}

.staff-card .card-quote>* {
    font-size: var(--font-sm);
    color: var(--trm-text-gray);
}

.staff-card .card-footer {
    padding: 16px;
    border-top: 1px solid var(--trm-border-gray);
}

.staff-card .card-footer .staff-name {
    font-size: var(--font-md);
    font-weight: 400;
    line-height: 1.18;
    text-transform: uppercase;
}