@use 'mixins/a11y';

.\@container\/block-content {
    @apply h-full
}

.card .node__content {
    --card-padding: theme('space.5');

    > .field-group-link {
        @apply block space-y-2;
        @include a11y.focusOutlineAndResetHover;

        &:hover, &:focus-visible {
            .title, &::after {
                @apply text-sky-600;
            }
        }

        &[data-link-label]::after {
            content: attr(data-link-label) "\00a0" "\00BB";

            @apply inline-block mt-2 font-medium text-lg;
        }
    }

    &:not(:has(> .field-group-link)) {
        @apply space-y-2;
    }

    .field-group-link {
        @apply p-[var(--card-padding)] block;
    }

    .field--name-field-teaser-image {
        @apply block relative overflow-hidden rounded-t-lg -mx-[var(--card-padding)] -mt-[var(--card-padding)] mb-[var(--card-padding)];

        img {
            @apply block object-cover;
        }
    }
}

.card--standard .field--type-image {
    --field-display: inline-block;
}

.card--large {
    .field--name-field-teaser-image img {
        @apply aspect-auto @md/card:aspect-[21/10] relative motion-safe:transition-all duration-300;
    }

    &:hover,
    &:focus,
    &:focus-visible {
        .field--name-field-teaser-image img {
            @apply scale-[1.04];
        }
    }
}
