/* Job Card Component Styles */
:host {
	display: block;
	container-type: inline-size;

	.job-card {
		background-color: var(--color-white);
		border: var(--border-width) solid var(--color-input-border);
		padding: var(--space-3);
		margin-bottom: var(--space-3);
		transition: border-color var(--transition-fast);

		&:hover {
			border-color: var(--color-link);
		}
	}

	.job-header {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.job-title {
		font-size: var(--font-size-h2);
		font-weight: var(--font-weight-bold);
		color: var(--color-heading-text);
		margin: 0;
		overflow-wrap: anywhere;
	}

	.job-meta {
		margin-top: var(--space-2);
	}

	.job-location {
		font-size: var(--font-size-h4);
		color: var(--color-body-text);
		margin: 0 0 var(--space-1) 0;
	}

	.job-company {
		font-size: var(--font-size-h4);
		font-weight: var(--font-weight-bold);
		color: var(--color-body-text);
		margin: 0;
	}

	.job-description {
		margin-top: var(--space-2);
		font-size: var(--font-size-body);
		line-height: var(--line-height-base);
		color: var(--color-body-text);
	}

	.job-action {
		margin-top: var(--space-3);
	}

	.action-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		width: 100%;
		padding: var(--space-2);
		border: var(--border-width) solid var(--color-link);
		background-color: var(--color-link);
		color: var(--color-white);
		font-size: var(--font-size-body);
		font-weight: var(--font-weight-bold);
		cursor: pointer;
		transition: background-color var(--transition-fast), border-color var(--transition-fast);

		&:hover {
			border-color: var(--color-link-hover);
			background-color: var(--color-link-hover);
		}

		&:focus-visible {
			outline: 3px solid var(--color-accent-yellow);
			outline-offset: 3px;
		}

		svg {
			width: 20px;
			height: 20px;
		}
	}

	.job-links {
		margin-top: var(--space-3);
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
	}

	.job-link-row {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1);
		align-items: baseline;
	}

	.link-label {
		font-size: var(--font-size-body);
		font-weight: var(--font-weight-bold);
		color: var(--color-text-base);
		min-width: 165px;
	}

	.link-url {
		font-size: var(--font-size-small);
		color: var(--color-link);
		word-break: break-all;
		flex: 1;
	}

	/* Container Query: Adapt to container width */
	@container (min-width: 600px) {
		.job-header {
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
		}

		.job-action {
			margin-top: 0;
			align-self: flex-start;
		}

		.action-button {
			width: auto;
			min-width: 200px;
		}
	}
}