/*
 * OWD Content Map — base display styles.
 * All visual choices are driven by custom properties so a designer/AI can restyle
 * without touching this file: set --owd-accent, --owd-gap, etc. on the container.
 */

.owd-display {
	--owd-accent: #0a7d55;
	--owd-radius: 12px;
	--owd-gap: 1rem;
	--owd-card-bg: #fff;
	--owd-columns: 3;
	position: relative;
	box-sizing: border-box;
}

.owd-display *,
.owd-display *::before,
.owd-display *::after {
	box-sizing: border-box;
}

/* Grid ------------------------------------------------------------------ */
.owd-layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--owd-columns), minmax(0, 1fr));
	gap: var(--owd-gap);
}

/* List ------------------------------------------------------------------ */
.owd-layout-list {
	display: flex;
	flex-direction: column;
	gap: var(--owd-gap);
}

/* Carousel -------------------------------------------------------------- */
.owd-layout-carousel {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.owd-layout-carousel .owd-track {
	display: flex;
	gap: var(--owd-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	flex: 1 1 auto;
	padding-bottom: 0.25rem;
	-webkit-overflow-scrolling: touch;
}
.owd-layout-carousel .owd-track > * {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--owd-slides, 3) - 1) * var(--owd-gap)) / var(--owd-slides, 3));
	min-width: 0;
}
.owd-nav {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--owd-accent) 40%, transparent);
	background: var(--owd-card-bg);
	color: var(--owd-accent);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.owd-nav:hover { background: var(--owd-accent); color: #fff; }

/* Tabs ------------------------------------------------------------------ */
.owd-layout-tabs .owd-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: var(--owd-gap);
}
.owd-layout-tabs .owd-tab {
	padding: 0.4rem 0.9rem;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--owd-accent) 12%, transparent);
	color: inherit;
	cursor: pointer;
}
.owd-layout-tabs .owd-tab[aria-selected="true"] {
	background: var(--owd-accent);
	color: #fff;
}
.owd-layout-tabs .owd-panel[hidden] { display: none; }

/* A neutral default card so unstyled output still looks intentional. */
.owd-display .card {
	background: var(--owd-card-bg);
	border-radius: var(--owd-radius);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
}
.owd-display .card img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.owd-message {
	padding: 1rem;
	border: 1px dashed color-mix(in srgb, var(--owd-accent) 40%, transparent);
	border-radius: var(--owd-radius);
	color: #666;
	font-size: 0.9rem;
}

@media (max-width: 640px) {
	.owd-layout-grid { --owd-columns: 1; }
}