@import "dxHelpers/reset";
@import "dxHelpers/text";
@import "dxHelpers/card";

.card-event {
    display: flex;
}

.card-event:not(.dx-card-base_layout-horizontal) {
    flex-direction: column;
}

.dx-card-base_layout-horizontal:not(.dx-card-base_featured) dx-card-title,
.card-event:not(.dx-card-base_featured)
    .card-event_detail-section
    dx-card-title {
    --dx-c-card-title-font-size: var(--dx-g-text-lg);
}

.details {
    align-self: flex-start;
    display: flex;
    flex-direction: row;
    padding-top: var(--dx-g-spacing-small);
    padding-bottom: var(--dx-g-spacing-small);
}

/* sections */
.card-event_date-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: var(--dx-g-card-border);
    padding-right: var(--dx-g-card-img-spacing);
    margin-right: var(--dx-g-card-img-spacing);
}

.card-event_detail-section {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.card-event_date-section,
.card-event_detail-section {
    padding-top: var(--dx-g-spacing-xs);
}

.month {
    text-transform: uppercase;
    margin-bottom: var(--dx-g-spacing-sm);
}

.dx-card-base .card-event_detail-section > *:not(:last-child) {
    margin-bottom: var(--dx-g-spacing-smd);
}

.dx-card-base_featured .card-event_detail-section > *:not(:last-child) {
    margin-bottom: var(--dx-g-card-item-spacing);
}

.dx-card-base_featured .card-event_detail-datetime-row,
.card-event_detail-datetime-row {
    display: flex;
    align-items: center;
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-base);
    color: var(--dx-g-gray-10);
    flex-wrap: wrap;
}

.card-event_detail-datetime {
    width: 100%;
}

.card-event_detail-datetime-spacing {
    padding-right: var(--dx-g-spacing-xs);
    padding-left: var(--dx-g-spacing-xs);
}

.subtitle-container {
    display: flex;
    align-items: center;
}

.subtitle-container > .subtitle {
    margin-right: var(--dx-g-spacing-sm);
}

.card-event:not(.dx-card-base_featured) .subtitle {
    display: none;
}

dx-button {
    margin-top: var(--dx-g-spacing-sm);
}

dx-formatted-date-time {
    --dx-g-text-body-color: var(--dx-g-indigo-vibrant-40);
}

@media (max-width: 1024px) {
    .card-event:not(.dx-card-base_featured) .image-link {
        display: none;
    }

    .dx-text-display-6 {
        font-size: 24px;
        line-height: 28px;
    }
}

@media (min-width: 1024px) {
    .dx-card-base_featured .dx-text-body-3 {
        font-size: 14px;
        line-height: 20px;
    }

    .dx-card-base_featured .dx-text-body-2 {
        font-size: 16px;
        letter-spacing: 0;
        line-height: 24px;
    }
}