/*
 * Tainacan Acervo em Cena — L12 card skin for the core view modes
 * (Records/Fichas, Cards/Cartões, Masonry, Table, List) on any theme.
 *
 * Only colour, border, radius, shadow and typography families change: the
 * records and masonry modes are laid out by JavaScript from the rendered
 * sizes, and this file is in the <head>, so the layout measures it. Every
 * value comes from the variables printed by Front/Skin.php:
 *   --aec-skin-accent, --aec-skin-ink, --aec-skin-soft, --aec-skin-surface,
 *   --aec-skin-radius, --aec-skin-title-font, --aec-skin-line.
 * The core selectors carry a scoped attribute ([data-v-…], 0-3-0), so every
 * rule starts with body.aec-skin to outweigh them.
 */

/* ---------- Harmony: the Tainacan colours follow the palette ---------- */
/* The block and the theme print their own --tainacan-* values inline; an
   !important declaration here is the only way to outweigh an inline one. */
body.aec-skin-harmonize .wp-block-tainacan-faceted-search,
body.aec-skin-harmonize #tainacan-items-page,
body.aec-skin-harmonize .theme-items-list,
body.aec-skin-harmonize .tainacan-faceted-search,
body.aec-skin-harmonize .tainacan-modal-content {
	--tainacan-secondary: var(--aec-skin-accent) !important;
	--tainacan-primary: var(--aec-skin-soft) !important;
	--tainacan-turquoise5: var(--aec-skin-accent) !important;
	--tainacan-turquoise2: var(--aec-skin-soft) !important;
	--tainacan-turquoise1: var(--aec-skin-soft) !important;
	--tainacan-item-background-color: var(--aec-skin-surface) !important;
	--tainacan-item-hover-background-color: var(--aec-skin-surface) !important;
	--tainacan-item-heading-hover-background-color: var(--aec-skin-soft) !important;
	--tainacan-item-border-radius: var(--aec-skin-radius) !important;
}

/* ---------- Shared card surface ---------- */
body.aec-skin .tainacan-records-container .tainacan-record,
body.aec-skin .tainacan-cards-container .tainacan-card,
body.aec-skin .tainacan-list-container .tainacan-list,
body.aec-skin .tainacan-masonry-container .tainacan-masonry-item {
	background-color: var(--aec-skin-surface) !important;
	border-radius: var(--aec-skin-radius) !important;
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
body.aec-skin-soft .tainacan-records-container .tainacan-record,
body.aec-skin-soft .tainacan-cards-container .tainacan-card,
body.aec-skin-soft .tainacan-list-container .tainacan-list,
body.aec-skin-soft .tainacan-masonry-container .tainacan-masonry-item {
	box-shadow: 0 1px 2px rgba(30, 20, 40, 0.06), 0 10px 26px -12px rgba(30, 20, 40, 0.18) !important;
	border: 1px solid var(--aec-skin-line) !important;
}
body.aec-skin-outline .tainacan-records-container .tainacan-record,
body.aec-skin-outline .tainacan-cards-container .tainacan-card,
body.aec-skin-outline .tainacan-list-container .tainacan-list,
body.aec-skin-outline .tainacan-masonry-container .tainacan-masonry-item {
	box-shadow: none !important;
	border: 1px solid var(--aec-skin-line) !important;
}
body.aec-skin-flat .tainacan-records-container .tainacan-record,
body.aec-skin-flat .tainacan-cards-container .tainacan-card,
body.aec-skin-flat .tainacan-list-container .tainacan-list,
body.aec-skin-flat .tainacan-masonry-container .tainacan-masonry-item {
	box-shadow: none !important;
	border: 1px solid transparent !important;
	background-color: var(--aec-skin-soft) !important;
}

/* Hover, keyboard focus, and the item open in the preview drawer (.aec-is-previewed). */
body.aec-skin .tainacan-records-container .tainacan-record:is(:hover, :focus-visible, :focus-within),
body.aec-skin .tainacan-cards-container .tainacan-card:is(:hover, :focus-visible, :focus-within),
body.aec-skin .tainacan-list-container .tainacan-list:is(:hover, :focus-visible, :focus-within),
body.aec-skin .tainacan-masonry-container .tainacan-masonry-item:is(:hover, :focus-visible, :focus-within),
body.aec-skin .aec-is-previewed .tainacan-record,
body.aec-skin .aec-is-previewed .tainacan-card,
body.aec-skin .aec-is-previewed .tainacan-list,
body.aec-skin .aec-is-previewed .tainacan-masonry-item {
	border-color: var(--aec-skin-accent) !important;
	/* No lift: the records/masonry containers clip overflow, so a raised
	   first row lost its top border. */
	box-shadow: 0 0 0 1px var(--aec-skin-accent), 0 14px 30px -14px color-mix(in srgb, var(--aec-skin-accent) 45%, transparent) !important;
}

/* ---------- Titles ---------- */
body.aec-skin .tainacan-records-container .tainacan-record .metadata-title,
body.aec-skin .tainacan-cards-container .tainacan-card .metadata-title,
body.aec-skin .tainacan-list-container .tainacan-list .metadata-title,
body.aec-skin .tainacan-masonry-container .tainacan-masonry-item .metadata-title {
	background: transparent !important;
	border-bottom: 1px solid var(--aec-skin-line);
	position: relative;
}
body.aec-skin .tainacan-records-container .tainacan-record .metadata-title::before,
body.aec-skin .tainacan-cards-container .tainacan-card .metadata-title::before,
body.aec-skin .tainacan-list-container .tainacan-list .metadata-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22%;
	bottom: 22%;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: var(--aec-skin-accent);
}
body.aec-skin .tainacan-records-container .tainacan-record .metadata-title p,
body.aec-skin .tainacan-cards-container .tainacan-card .metadata-title p,
body.aec-skin .tainacan-list-container .tainacan-list .metadata-title p,
body.aec-skin .tainacan-masonry-container .tainacan-masonry-item .metadata-title p {
	font-family: var(--aec-skin-title-font) !important;
	font-weight: 600 !important;
	color: var(--aec-skin-ink) !important;
	letter-spacing: 0.005em;
}
body.aec-skin .tainacan-masonry-container .tainacan-masonry-item .metadata-title {
	border-bottom: 0;
	border-top: 3px solid var(--aec-skin-accent);
	margin: 0 !important;
}

/* ---------- Records (Fichas): labels small and quiet, values first ---------- */
body.aec-skin .tainacan-records-container .tainacan-record .metadata-label {
	font-family: inherit !important;
	font-size: 0.66em !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.045em;
	line-height: 1.35 !important;
	color: color-mix(in srgb, var(--aec-skin-ink) 62%, #8a8a8a) !important;
}
body.aec-skin .tainacan-records-container .tainacan-record .metadata-value {
	color: #2b2629 !important;
}
body.aec-skin .tainacan-records-container .tainacan-record .tainacan-record-thumbnail img,
body.aec-skin .tainacan-cards-container .tainacan-card .card-thumbnail img {
	border-radius: calc(var(--aec-skin-radius) * 0.7) !important;
	background: var(--aec-skin-soft);
	object-fit: var(--aec-skin-fit) !important;
}

/* Term links as soft chips; plain links in the accent colour. */
body.aec-skin .tainacan-records-container .tainacan-record .metadata-value a,
body.aec-skin .tainacan-cards-container .tainacan-card .metadata-value a,
body.aec-skin .tainacan-list-container .tainacan-list .metadata-value a,
body.aec-skin .tainacan-table td a {
	color: var(--aec-skin-ink) !important;
	text-decoration: none !important;
}
body.aec-skin-chips .tainacan-records-container .tainacan-record .metadata-value a[data-linkto="term"],
body.aec-skin-chips .tainacan-list-container .tainacan-list .metadata-value a[data-linkto="term"],
body.aec-skin-chips .tainacan-table td p a[data-linkto="term"] {
	/* Inline (not inline-block) so a long term wraps beside the floated
	   thumbnail instead of jumping below it; clone keeps the pill on each line. */
	display: inline;
	margin: 0 0.2em 0 0;
	padding: 0.12em 0.55em;
	border-radius: 999px;
	background: var(--aec-skin-soft);
	line-height: 2;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	/* The core breaks words at any letter ("pl/ástico"); terms break between words. */
	word-break: normal;
	overflow-wrap: break-word;
	transition: background-color 0.15s ease, color 0.15s ease;
}
body.aec-skin-chips .tainacan-records-container .tainacan-record .metadata-value a[data-linkto="term"]:hover,
body.aec-skin-chips .tainacan-list-container .tainacan-list .metadata-value a[data-linkto="term"]:hover,
body.aec-skin-chips .tainacan-table td p a[data-linkto="term"]:hover {
	background: var(--aec-skin-accent);
	color: #fff !important;
}
/* A hierarchy ("05 Interiores > 05.1 Acessório…") reads as one path: the
   ancestors stay plain text and only the most specific class is a chip, so
   the path wraps like a sentence beside the thumbnail. */
body.aec-skin-chips .tainacan-record .metadata-value:has(.hierarchy-separator) a[data-linkto="term"]:not(:last-child),
body.aec-skin-chips .tainacan-table td p:has(.hierarchy-separator) a[data-linkto="term"]:not(:last-child) {
	display: inline;
	padding: 0;
	margin: 0;
	background: none;
	line-height: inherit;
}
body.aec-skin-chips .tainacan-record .metadata-value .hierarchy-separator {
	margin: 0 0.15em;
}
/* Chips already separate the values; the "|" between them is redundant. */
body.aec-skin-chips .tainacan-record .metadata-value .multivalue-separator,
body.aec-skin-chips .tainacan-list .metadata-value .multivalue-separator,
body.aec-skin-chips .tainacan-table td .multivalue-separator {
	display: none;
}
body.aec-skin .tainacan-record .metadata-value .hierarchy-separator,
body.aec-skin .tainacan-table td .hierarchy-separator {
	color: color-mix(in srgb, var(--aec-skin-ink) 45%, #9a9a9a);
}

/* ---------- Cards ---------- */
/* The core card link is inline, so its background and border broke into
   fragments (and stayed transparent on most themes). Cards sit in a flex
   grid, not a JS layout, so here the box can grow to fit the hook below the
   description (Compare) instead of the fixed 210px height that cut it. */
body.aec-skin .tainacan-cards-container .tainacan-card {
	display: flex !important;
	flex-direction: column;
	height: 100%;
	max-height: none !important;
	box-sizing: border-box;
}
body.aec-skin .tainacan-cards-container .tainacan-card .media {
	flex: 1 1 auto;
	padding: 12px 14px 8px;
	gap: 14px;
}
body.aec-skin .tainacan-cards-container .tainacan-card .faceted-search-hook-item-after {
	padding: 0 14px 12px;
}
/* "No description" reads as a quiet note. */
body.aec-skin .tainacan-cards-container .tainacan-card .metadata-description {
	color: #3d3539 !important;
}
body.aec-skin .tainacan-cards-container .tainacan-card .metadata-description:has(> em:only-child),
body.aec-skin .tainacan-cards-container .tainacan-card .media .list-metadata p.metadata-description.is-empty {
	opacity: 0.55;
}

/* ---------- Masonry: image fills the top, title below ---------- */
body.aec-skin .tainacan-masonry-container .tainacan-masonry-item img {
	border-radius: 0 !important;
	background: var(--aec-skin-soft);
}

/* ---------- Table ---------- */
body.aec-skin .tainacan-table thead th {
	color: color-mix(in srgb, var(--aec-skin-ink) 62%, #8a8a8a) !important;
	font-size: 0.75em !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
body.aec-skin .tainacan-table tbody tr {
	transition: background-color 0.15s ease;
}
body.aec-skin .tainacan-table tbody tr:hover,
body.aec-skin .tainacan-table tbody tr:focus-within {
	background-color: var(--aec-skin-soft) !important;
}
body.aec-skin .tainacan-table .table-thumb {
	border-radius: calc(var(--aec-skin-radius) * 0.5) !important;
}

/* ---------- Items without image: a calm tinted tile, not a grey block ---------- */
body.aec-skin .tainacan-records-container .tainacan-record img[src*="placeholder"],
body.aec-skin .tainacan-cards-container .tainacan-card img[src*="placeholder"],
body.aec-skin .tainacan-masonry-container .tainacan-masonry-item img[src*="placeholder"] {
	opacity: 0.35;
	filter: grayscale(1);
	background: var(--aec-skin-soft);
}

/* ---------- Theme specifics ---------- */
/* Blocksy gives every h3 its heading font through --theme-font-family, so the
   record labels (h3) came out in the serif while the titles were sans: the
   hierarchy was upside down. Labels take the text font of the record. */
body.aec-skin.aec-theme-blocksy .tainacan-records-container .tainacan-record h3.metadata-label {
	--theme-font-family: inherit;
	font-family: inherit !important;
}
/* Tainacan Interface: its item cards sit on a grey band; the line colour is
   a little stronger so the outline style still reads. */
body.aec-skin.aec-theme-tainacan-interface {
	--aec-skin-line: color-mix(in srgb, var(--aec-skin-accent) 16%, #dcdcdc);
}

@media (prefers-reduced-motion: reduce) {
	body.aec-skin .tainacan-records-container .tainacan-record,
	body.aec-skin .tainacan-cards-container .tainacan-card,
	body.aec-skin .tainacan-list-container .tainacan-list,
	body.aec-skin .tainacan-masonry-container .tainacan-masonry-item {
		transition: none;
		transform: none !important;
	}
}

/* Flat tint: the card is already tinted, so chips turn white to stay visible. */
body.aec-skin-flat.aec-skin-chips .tainacan-records-container .tainacan-record .metadata-value a[data-linkto="term"],
body.aec-skin-flat.aec-skin-chips .tainacan-list-container .tainacan-list .metadata-value a[data-linkto="term"] {
	background: var(--aec-skin-surface);
}