@use "@gloria/a11y/_mixins.scss" as *;

.c-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
	padding: var(--spacing-4);
	border: 1px solid var(--color-gray-400);
	border-radius: var(--radius-1);
	background-color: var(--color-common-white);
	overflow: hidden;

	&__title {
		font-size: var(--font-size-md);
		line-height: var(--line-height-md);
		font-weight: var(--font-weight-bolder);
		color: var(--color-text-primary);

		&-heading {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-base);
			font-weight: var(--font-weight-bold);
			margin: var(--spacing-0);
		}
	}

	&__description {
		height: auto;
		font-size: var(--font-size-base);
		line-height: var(--line-height-base);
		color: var(--color-text-primary);
		flex: 1 0 auto;
	}

	&__footer {
		flex: 0 0 auto;
	}

	&__learn-more {
		&-toggle {
			display: flex;
			align-items: center;
			gap: var(--spacing-3);
			color: var(--color-primary);
			font-weight: var(--font-weight-regular);
			font-size: var(--font-size-sm);
			line-height: var(--line-height-md);
			transition: color var(--duration-ultra-fast) var(--smoothstep);

			@include a11y-keyboard-focus-ring;

			&:hover {
				color: var(--color-primary-700);
			}

			&:active {
				color: var(--color-primary-800);
			}

			&[aria-expanded="true"] .c-card__learn-more-icon {
				transform: rotate(-90deg);
			}
		}

		&-icon {
			transform: rotate(90deg);
			transition: transform var(--duration-fast) var(--cbuc-quad-out);
		}

		&-content {
			visibility: hidden;
			height: var(--spacing-0);
			overflow: hidden;
			opacity: 0;
			font-size: var(--font-size-sm);
			transition:
				height var(--duration-normal) var(--cbuc-quad-out),
				opacity var(--duration-normal) var(--cbuc-quad-out);

			&.is-expanded {
				visibility: visible;
				height: auto;
				opacity: 1;
			}
		}
	}

	&__cover {
		aspect-ratio: 16 / 9;
		border-radius: var(--radius-1);
		overflow: hidden;
		background-color: var(--color-gray-300);

		&-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}
}
