/*=============================================================================
  HELP BLOCK

  * Shows help block below individual components on cat page
=============================================================================*/

.help-block {
    display: block;
    position: relative;
    color: var(--color-text-primary-dark);
    border-radius: var(--border-radius-md);
    text-decoration: none;
    width: 100%;
    margin-bottom: var(--spacing-06);
    background-color: var(--color-surface-secondary);
    border: var(--border-weight-01) solid var(--color-surface-secondary);
}

.help-block:active,
.help-block:focus,
.help-block:hover {
    color: var(--color-text-primary-dark);
    text-decoration: none;
    border: var(--border-weight-01) solid var(--color-border-card-hover);
    box-shadow: var(--box-shadow-black);
}

.help-block:focus .btn,
.help-block:active .btn,
.help-block:hover .btn {
	background-color: var(--color-surface-button-ghost-hover);
	color: var(--color-text-button-on-ghost-hover);
	border: var(--border-weight-01) solid var(--color-border-button-ghost-hover);
}

.help-block__container {
    padding: 0;
    border-radius: var(--border-radius-md);
}

.help-block__wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-06);
}

.help-block__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 0;
    padding-bottom: var(--spacing-04);
}

.help-block__title {
    margin: 0;
    font: var(--text-title-xl);
    color: var(--color-text-primary-dark);
    padding: 0 0 var(--spacing-02) 0;
}

.help-block__description {
    font: var(--text-body-sm-compact);
    color: var(--color-text-primary-dark);
    text-align: center;
    margin: 0;
}

.help-block__button .btn {
    font: var(--text-button-sm);
    background-color: transparent;
    padding: var(--spacing-01) var(--spacing-02);
}

@media screen and (min-width: 768px) {

    .help-block__wrapper {
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .help-block__content {
        align-items: flex-start;
        padding-right: var(--spacing-10);
        padding-bottom: 0;
    }

    .help-block__description {
        font: var(--text-body-md-compact);
        text-align: left;
    }

    .help-block__button .btn {
        font: var(--text-button-lg);
        padding: var(--spacing-03) var(--spacing-06);
    }
}