/**
 * GravityView Theme — List Layout
 *
 * Card-based entry styling for List layout Views.
 * Scoped to `.gv-list-container.gv-themed` (one element carries both
 * classes via `gv_container_class()`).
 *
 * @package   GravityView
 * @license   GPL2
 * @since     TBD
 */

@use "tokens" as *;

// =========================================================
// Entry cards
//
// `gv-list-container` is passed into `gv_container_class()`, so it
// sits on the SAME element as `.gv-themed`: every scope in this file
// is a same-element compound, keeping (0,3,0) specificity.
// =========================================================
.gv-list-container.gv-themed .gv-list-view {
	@include gv-entry-card;
	margin-block-end: var(--gv-space-4);
}

// =========================================================
// Title zone
// =========================================================
.gv-list-container.gv-themed .gv-list-view-title {
	border-block-end: none;
	padding: 0;
	margin-block-end: var(--gv-space-3);

	h3 {
		font-size: var(--gv-font-size-lg);
		// Entry title is the most-scanned element on a list view; use
		// the bold weight so customers tuning "Heading Bold" in Studio
		// see the strongest signal here.
		font-weight: var(--gv-font-weight-bold);
		color: var(--gv-color-text);
		margin-block-end: var(--gv-space-1);
		padding: 0;

		a {
			color: var(--gv-color-link);
			text-decoration: none;
			transition: color var(--gv-transition-fast) var(--gv-easing-standard);

			&:hover,
			&:focus-visible {
				color: var(--gv-color-link-hover);
				text-decoration: none;
			}

			&:active {
				color: var(--gv-color-link-active);
			}

			&:visited {
				color: var(--gv-color-link-visited);
			}
		}
	}

	h4 {
		font-size: var(--gv-font-size-sm);
		color: var(--gv-color-text-secondary);
		font-weight: var(--gv-font-weight-normal);
		margin: 0;
	}
}

// =========================================================
// Content zone — flexbox layout for image + description
// =========================================================
.gv-list-container.gv-themed .gv-list-view-content {
	display: flex;
	gap: var(--gv-space-4);
	padding: 0;

	// Clear legacy float styles
	&::before,
	&::after {
		display: none;
	}

	.gv-list-view-content-image {
		flex: 0 0 var(--gv-list-media-width);
		max-width: var(--gv-list-media-width);
		float: none;
		padding: 0;

		img {
			border-radius: var(--gv-radius-md);
			object-fit: cover;
			max-width: 100%;
			height: auto;
		}
	}

	.gv-list-view-content-description {
		flex: 1;
		min-width: 0;
	}
}

// =========================================================
// Footer zone
// =========================================================
.gv-list-container.gv-themed .gv-list-view-footer {
	border-block-start: 1px solid var(--gv-color-row-divider);
	background-color: transparent;
	padding-block-start: var(--gv-space-3);
	margin-block-start: var(--gv-space-4);
	padding-inline: 0;
	padding-block-end: 0;
	font-size: var(--gv-font-size-sm);
	color: var(--gv-color-text-secondary);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

// =========================================================
// Field labels
// =========================================================
.gv-list-container.gv-themed .gv-field-label {
	display: block;
	margin-block-end: var(--gv-field-label-margin-block-end);
}

// =========================================================
// Field separation within zones
//
// Consecutive fields in a zone need more space between them than a
// label keeps to its own value, or the label reads as a caption for
// the value above it. Sibling margins collapse against the smaller
// per-element margins (such as the title h3's), so the gap between
// fields is exactly this token.
// =========================================================
.gv-list-container.gv-themed :is(
	.gv-list-view-title,
	.gv-list-view-subtitle,
	.gv-list-view-content-image,
	.gv-list-view-content-description,
	.gv-list-view-content-attributes
) > * + * {
	margin-block-start: var(--gv-space-3);
}

// =========================================================
// Mobile responsive
// =========================================================
@media (max-width: #{$gv-breakpoint-sm}) {
	.gv-list-container.gv-themed .gv-list-view-content {
		flex-direction: column;

		.gv-list-view-content-image {
			flex: none;
			max-width: 100%;
		}
	}
}
