/* ============================================================
   CMS OBJECT: Card Block
   Views: _CardBlock.cshtml and the views in CardLayouts/
   Dependencies: Bootstrap 5
   ============================================================ */

/* Opt-in content layouts. The original .cms-card-block rules below remain unchanged. */
.cms-content-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--site-space-4);
    margin-block: var(--site-space-3);
}

.cms-content-cards__item { display: flex; flex-direction: column; min-width: 0; }
.cms-content-cards__item > .card-admin-icons { flex: 0 0 auto; flex-wrap: wrap; }
.cms-content-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    color: var(--site-color-text);
    border: 1px solid var(--site-color-border);
    border-radius: var(--site-radius-medium);
    background: var(--site-color-background);
    text-decoration: none;
    transition: border-color var(--site-transition-standard), box-shadow var(--site-transition-standard);
}
.cms-content-card[href]:hover, .cms-content-card[href]:focus-visible {
    color: var(--site-color-text);
    border-color: var(--site-color-primary);
    box-shadow: var(--site-shadow-medium);
    text-decoration: none;
}
.cms-content-card[href]:focus-visible { outline: 2px solid var(--site-color-primary); outline-offset: 3px; }
.cms-content-card:not([href]) { color: var(--site-color-text); cursor: default; text-decoration: none; }
.cms-card-block__card:not([href]) { cursor: default; }
.cms-content-card__media { flex: 0 0 auto; min-width: 0; max-height: 24rem; overflow: hidden; aspect-ratio: 16 / 10; background: var(--site-color-surface); }
.cms-content-card__media img { display: block; width: 100%; height: 100%; max-height: 24rem; object-fit: contain; }
.cms-content-card__media img[hidden] { display: none; }
.cms-content-card__copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--site-space-3); padding: var(--site-space-4); text-align: start; }
.cms-content-card__heading { margin: 0; color: var(--site-color-heading); font-size: var(--site-font-size-h4); font-weight: var(--site-font-weight-semibold); overflow-wrap: anywhere; }
.cms-content-card__details { margin: 0; color: var(--site-color-text); overflow-wrap: anywhere; }
.cms-content-card__details:empty { display: none; }
.cms-content-card__action { margin-top: auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.cms-content-card__action[hidden], .cms-card-block__action[hidden] { display: none !important; }
.cms-content-card[href]:hover .cms-content-card__action,
.cms-content-card[href]:focus-visible .cms-content-card__action {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
.cms-content-cards--list { grid-template-columns: minmax(0, 1fr); }
.cms-content-cards--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-content-cards--featured-multi > .cms-content-cards__item:first-child { grid-row: span 2; }
.cms-content-cards--featured-multi > .cms-content-cards__item:last-child:nth-child(even):nth-child(n+4) { grid-column: 1 / -1; }
.cms-content-cards--featured[data-card-count="1"] { grid-template-columns: minmax(0, 1fr); }
.cms-content-card-preview > .cms-content-card { flex: 0 1 auto; width: min(100%, 25rem); }

@media (min-width: 768px) {
    .cms-content-cards--list .cms-content-card,
    .cms-content-cards--featured-multi > .cms-content-cards__item:nth-child(2) .cms-content-card,
    .cms-content-cards--featured-multi > .cms-content-cards__item:nth-child(3) .cms-content-card,
    .cms-content-card-preview.cms-content-cards--list > .cms-content-card { flex-direction: row; }
    .cms-content-cards--list .cms-content-card__media,
    .cms-content-cards--featured-multi > .cms-content-cards__item:nth-child(2) .cms-content-card__media,
    .cms-content-cards--featured-multi > .cms-content-cards__item:nth-child(3) .cms-content-card__media,
    .cms-content-card-preview.cms-content-cards--list .cms-content-card__media { flex-basis: 32%; aspect-ratio: auto; }
    .cms-content-card-preview.cms-content-cards--list > .cms-content-card { width: min(100%, 48rem); }
}

@media (max-width: 767.98px) {
    .cms-content-cards--featured { grid-template-columns: minmax(0, 1fr); }
    .cms-content-cards--featured-multi > .cms-content-cards__item:first-child { grid-row: auto; }
}

/* Match the editor's tablet/mobile canvas width rather than the desktop browser width. */
@container (max-width: 767.98px) {
    .cms-content-cards--featured { grid-template-columns: minmax(0, 1fr); }
    .cms-content-cards--featured-multi > .cms-content-cards__item:first-child { grid-row: auto; }
    .cms-content-cards--list .cms-content-card,
    .cms-content-cards--featured-multi > .cms-content-cards__item:nth-child(2) .cms-content-card,
    .cms-content-cards--featured-multi > .cms-content-cards__item:nth-child(3) .cms-content-card,
    .cms-content-card-preview.cms-content-cards--list > .cms-content-card { flex-direction: column; }
    .cms-content-cards--list .cms-content-card__media,
    .cms-content-cards--featured-multi > .cms-content-cards__item:nth-child(2) .cms-content-card__media,
    .cms-content-cards--featured-multi > .cms-content-cards__item:nth-child(3) .cms-content-card__media,
    .cms-content-card-preview.cms-content-cards--list .cms-content-card__media { flex-basis: auto; aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) { .cms-content-card { transition: none; } }

.cms-card-block {
    overflow: hidden;
}

/* Bootstrap owns the card structure; these rules provide the branded reveal. */
.cms-card-block .cms-card-block__card:hover .cms-card-block__overlay {
    opacity: 1;
}

.cms-card-block .cms-card-block__card:hover .cms-card-block__content,
.cms-card-block .cms-card-block__card:hover .cms-card-block__action {
    transform: none;
}

.cms-card-block .cms-card-block__card:hover .cms-card-block__image {
    transform: scale3d(1.1, 1.1, 1.1);
}

.cms-card-block .cms-card-block__overlay {
    z-index: 9;
    color: var(--site-color-primary-contrast);
    background: color-mix(in srgb, var(--site-color-primary) 90%, transparent);
    opacity: 0;
    transition: all .35s ease;
}

.cms-card-block .cms-card-block__overlay .cms-card-block__content {
    transform: translateY(-8px);
    transition: all .35s ease;
}

.cms-card-block .cms-card-block__overlay h3 {
    margin-top: 70px;
    font-size: 22px;
    font-weight: 400;
    text-shadow: none;
}

.cms-card-block .cms-card-block__overlay p {
    color: var(--site-color-primary-contrast);
    font-size: 15px;
    font-weight: 600;
}

.cms-card-block .cms-card-block__action {
    color: var(--site-color-primary-contrast);
    border-color: currentColor !important;
    font-size: 12px;
    letter-spacing: .8px;
    transform: translateY(8px);
    transition: all .35s ease;
}

.cms-card-block .cms-card-block__image {
    height: 240px;
    background: linear-gradient(0deg, var(--site-color-surface-strong) 0, transparent 100%) center / contain no-repeat;
    transition: all .35s ease;
}

.cms-card-block .cms-card-block__image img {
    max-height: 240px;
}

/* The editor preview retains its existing border independently of the public card. */
.cms-card-block--preview .cms-card-block__card {
    border: 1px solid var(--site-color-border-strong) !important;
}

.cms-card-block__selection {
    width: min(100%, var(--site-content-width));
    min-height: 20rem;
    padding: var(--site-space-4);
}

.cms-card-block__selection-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--site-color-border);
    border-radius: var(--site-radius-medium);
    background: var(--site-color-background);
    box-shadow: var(--site-shadow-small);
    transition: box-shadow var(--site-transition-standard), transform var(--site-transition-standard);
}

.cms-card-block__selection-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--site-shadow-medium);
}

.cms-card-block__add-action {
    position: absolute;
    top: 15px;
    right: 25px;
    z-index: 20;
    color: var(--site-color-primary);
    background: var(--site-color-background);
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    transition: all .2s ease;
    opacity: 0;
}

.cms-card-block__add-action:hover {
    color: var(--site-color-primary-contrast);
    background: var(--site-color-primary);
    transform: scale(1.1);
}

.cms-card-block__selection-card:hover .cms-card-block__add-action {
    opacity: 1;
}

.cms-card-block__selection .cms-card-block__card {
    display: block;
    width: 100%;
    transition: transform var(--site-transition-standard);
}

.cms-card-block__selection .cms-card-block__card:hover {
    transform: scale(1.02);
}

.cms-card-block__selection-grid {
    margin: 0;
}

.cms-card-block__selection-form {
    background: var(--site-color-surface);
    border-color: var(--site-color-border) !important;
}

/* Template integration: preserve the source card while matching the shared editor shell. */
.cms-card-block .cms-card-block__overlay h3 {
    color: var(--site-color-primary-contrast);
}

.cms-card-block .cms-card-block__card > h3 {
    text-align: center;
}

.cms-card-block .cms-card-block__card:focus-visible .cms-card-block__overlay {
    opacity: 1;
}

.cms-card-block .cms-card-block__card:focus-visible .cms-card-block__content,
.cms-card-block .cms-card-block__card:focus-visible .cms-card-block__action {
    transform: none;
}

.cms-card-block .cms-card-block__card:focus-visible .cms-card-block__image {
    transform: scale3d(1.1, 1.1, 1.1);
}

.cms-card-editor-preview {
    min-height: 30rem !important;
    padding: clamp(1.5rem, 5cqw, 4rem) !important;
    display: grid;
    place-items: center;
    overflow: visible;
}

.cms-card-block--preview .cms-card-block__card {
    width: min(100%, 24rem);
    margin: 0 auto !important;
}

.cms-card-block--snapshot {
    width: min(100%, 22rem);
    margin-inline: auto;
}

.cms-card-block__single-column {
    width: min(100%, 24rem);
    flex: 0 0 auto;
}

.card-admin-icons {
    position: relative;
    z-index: 10;
}

.card-admin-icons .partial-toolbar-btn {
    --cms-card-control-color: var(--site-color-secondary);
    width: 2.125rem;
    height: 2.125rem;
    justify-content: center;
    padding: 0;
    color: var(--cms-card-control-color);
    border: 1px solid color-mix(in srgb, var(--cms-card-control-color) 48%, var(--site-color-border));
    border-radius: var(--site-radius-small);
    background: var(--site-color-background);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--site-color-text) 12%, transparent);
    font-size: .75rem;
    line-height: 1;
    transition: color var(--site-transition-fast), background-color var(--site-transition-fast), border-color var(--site-transition-fast), box-shadow var(--site-transition-fast), transform var(--site-transition-fast);
}

.card-admin-icons .partial-toolbar-btn.warning {
    --cms-card-control-color: var(--site-color-primary);
}

.card-admin-icons .partial-toolbar-btn.add-btn {
    --cms-card-control-color: var(--site-color-success-text);
}

.card-admin-icons .partial-toolbar-btn.add-ex-btn {
    --cms-card-control-color: var(--site-color-secondary);
}

.card-admin-icons .partial-toolbar-btn:hover,
.card-admin-icons .partial-toolbar-btn:focus-visible {
    color: var(--site-color-background);
    border-color: var(--cms-card-control-color);
    background: var(--cms-card-control-color);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--cms-card-control-color) 24%, transparent);
    transform: translateY(-1px);
}

.card-admin-icons .partial-toolbar-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--cms-card-control-color) 55%, transparent);
    outline-offset: 2px;
}

.card-admin-icons .partial-toolbar-btn.disabled {
    box-shadow: none;
    transform: none;
}

.cms-card-block__empty {
    flex-direction: column;
    gap: var(--site-space-2);
}

.cms-card-block__empty p {
    margin: 0;
}

.cms-card-reorder-list {
    gap: .625rem;
}

.cms-card-reorder-heading {
    min-width: 0;
}

.cms-card-reorder-heading__title {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.cms-card-reorder-heading__title .modal-title {
    margin: 0;
    line-height: 1.2;
}

.cms-card-reorder-heading .cms-modal-subtitle {
    margin: .25rem 0 0 3.25rem;
}

.cms-card-reorder-item {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem .875rem;
    color: var(--site-color-text);
    border: 1px solid var(--site-color-border) !important;
    border-radius: var(--site-radius-medium) !important;
    background: var(--site-color-background);
    box-shadow: var(--site-shadow-small);
    cursor: grab;
}

.cms-card-reorder-item:hover {
    border-color: color-mix(in srgb, var(--site-color-primary) 42%, var(--site-color-border)) !important;
    box-shadow: var(--site-shadow-medium);
}

.cms-card-reorder-item:active {
    cursor: grabbing;
}

.cms-card-reorder-item__title {
    min-width: 0;
    overflow: hidden;
    color: var(--site-color-heading);
    font-weight: var(--site-font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-card-reorder-item__handle {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--site-color-primary);
    border: 1px solid color-mix(in srgb, var(--site-color-primary) 22%, transparent);
    border-radius: var(--site-radius-small);
    background: color-mix(in srgb, var(--site-color-primary) 10%, var(--site-color-background));
}

/* Optional block appearance. Bordered uses the existing card rules unchanged. */
.cms-card-block--background {
    width: 100%;
    padding-block: var(--site-space-6);
}

.cms-card-block--background .cms-content-cards {
    margin-block: 0;
}

.cms-card-style--soft .cms-content-card,
.cms-card-style--soft .cms-card-block__card {
    background-color: color-mix(in srgb, var(--site-color-secondary) 7%, var(--site-color-background)) !important;
    border-color: transparent !important;
    box-shadow: none;
}

.cms-card-style--soft .cms-content-card[href]:hover,
.cms-card-style--soft .cms-content-card[href]:focus-visible {
    background-color: color-mix(in srgb, var(--site-color-secondary) 11%, var(--site-color-background)) !important;
}

.cms-card-style--soft .cms-content-card__media {
    background: transparent;
}

/* Empty text never reserves space, including Bootstrap display utilities. */
[data-card-preview-title][hidden],
[data-card-preview-details][hidden],
[data-card-preview-copy][hidden] {
    display: none !important;
}

.cms-card--image-only .cms-content-card__media {
    flex: 1 1 auto !important;
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 10 !important;
}

.cms-card--image-only .cms-content-card__media img {
    max-height: none;
}

.cms-card--image-only .cms-card-block__image {
    margin-bottom: 0 !important;
}

.cms-card--image-only .cms-card-block__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cms-card-layout-picker { display: flex; align-items: stretch; gap: .35rem; }
.cms-card-layout-picker .cms-option-cycle { flex: 1; min-width: 0; }
.cms-card-layout-step { flex: 0 0 1.75rem; padding: 0; color: var(--site-color-primary); background: var(--site-color-background); border: 1px solid var(--site-color-border); border-radius: var(--site-radius-small); }
.cms-card-layout-step:hover,
.cms-card-layout-step:focus-visible { color: var(--site-color-primary-contrast); background: var(--site-color-primary); }