/**
 * Advanced Photo Suite — portfolios.
 *
 * Même principe que gallery.css : uniquement de la mise en page.
 * Les couleurs, polices et boutons proviennent du thème actif.
 *
 * Les variables `--aps-pf-*` sont injectées par PHP depuis les réglages du
 * portfolio ; les valeurs listées ici ne sont que des replis.
 */

.aps-portfolio {
	--aps-pf-cols: 3;
	--aps-pf-ratio: 4 / 3;
	--aps-pf-gap: var(--wp--style--block-gap, 1.5rem);
	--aps-pf-radius: 0px;
	--aps-pf-padding: 0px;
	--aps-pf-shadow: none;
	--aps-pf-align: start;
	--aps-pf-title-size: 1.15em;
}

/* Largeur maximale propre au portfolio, toujours centrée. */
.aps-portfolio {
	margin-inline: auto;
	max-width: var(--aps-pf-max, none);
}

/*
 * Couleurs personnalisées. Sans ce mode, aucune couleur n'est déclarée et
 * le thème garde entièrement la main.
 */
.aps-portfolio[data-colors="custom"] .aps-portfolio-card {
	background: var(--aps-pf-bg);
	color: var(--aps-pf-text);
}

.aps-portfolio[data-colors="custom"] .aps-portfolio-link { color: inherit; }

/* --------------------------------------------------------------------------
   Filtres
   -------------------------------------------------------------------------- */

.aps-portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 0.75rem);
	justify-content: center;
	margin-block-end: var(--aps-pf-gap);
}

.aps-pf-filter[aria-pressed="true"] {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Grille
   -------------------------------------------------------------------------- */

/*
 * Souple plutôt que grille CSS : la largeur reproduit exactement la grille
 * voulue, mais `justify-content` peut alors aligner une ligne incomplète —
 * impossible avec des colonnes en fractions.
 */
.aps-portfolio-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aps-pf-gap);
	justify-content: var(--aps-pf-justify, flex-start);
}

.aps-portfolio-card {
	flex: 0 0 calc((100% - (var(--aps-pf-cols) - 1) * var(--aps-pf-gap)) / var(--aps-pf-cols));
	max-width: calc((100% - (var(--aps-pf-cols) - 1) * var(--aps-pf-gap)) / var(--aps-pf-cols));
}

.aps-portfolio[data-align="left"]   { --aps-pf-justify: flex-start; }
.aps-portfolio[data-align="center"] { --aps-pf-justify: center; }
.aps-portfolio[data-align="right"]  { --aps-pf-justify: flex-end; }

@media (max-width: 900px) {
	.aps-portfolio-card { --aps-pf-cols: 2; }
}

@media (max-width: 600px) {
	.aps-portfolio-card { --aps-pf-cols: 1; }
}

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */

/*
 * Bordures et ombres — uniquement sur la carte.
 *
 * Les conteneurs sont remis à zéro explicitement : les variables de bordure
 * étant héritées par tous les descendants, un cadre parasite apparaissait
 * autour du bloc portfolio entier.
 */
.aps-portfolio,
.aps-portfolio-grid,
.aps-portfolio-filters,
.aps-portfolio-link,
.aps-portfolio-thumb {
	border: 0;
	box-shadow: none;
}

.aps-portfolio-card {
	border: 0;
	border-radius: var(--aps-pf-radius);
	box-shadow: var(--aps-pf-shadow);
	overflow: hidden;
	padding: var(--aps-pf-padding);
	text-align: var(--aps-pf-align);
}

.aps-portfolio[data-border="light"] .aps-portfolio-card,
.aps-portfolio[data-border="dark"] .aps-portfolio-card,
.aps-portfolio[data-border="custom"] .aps-portfolio-card {
	border: var(--aps-pf-border-width, 1px) solid var(--aps-pf-border-color, currentColor);
}

/* Avec une marge intérieure, la vignette se détache du bord de la carte. */
.aps-portfolio[data-padded="1"] .aps-portfolio-thumb {
	border-radius: calc(var(--aps-pf-radius) * 0.6);
	overflow: hidden;
}

/* Le lien hérite de la couleur du thème, sans soulignement parasite. */
.aps-portfolio-link {
	color: inherit;
	display: block;
	text-decoration: none;
}

.aps-portfolio-thumb {
	aspect-ratio: var(--aps-pf-ratio);
	overflow: hidden;
}

.aps-portfolio-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
	transition: transform 0.35s ease, opacity 0.25s ease;
}

.aps-portfolio-thumb.is-empty {
	background: currentColor;
	opacity: 0.08;
}

.aps-portfolio-body:not(:empty) {
	padding-block: 0.6em 0.2em;
}

/* Sans marge intérieure de carte, le texte s'aligne sur la vignette. */
.aps-portfolio[data-padded="0"] .aps-portfolio-body:not(:empty) {
	padding-inline: 0;
}

.aps-portfolio-title {
	font-size: var(--aps-pf-title-size);
	margin-block: 0 0.3em;
}

.aps-portfolio-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	justify-content: var(--aps-pf-align);
	opacity: 0.75;
	font-size: 0.875em;
}

.aps-portfolio-excerpt {
	margin-block: 0.4em 0;
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Effets au survol
   -------------------------------------------------------------------------- */

.aps-portfolio[data-hover="lift"] .aps-portfolio-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.aps-portfolio[data-hover="lift"] .aps-portfolio-card:hover {
	transform: translateY(-4px);
}

.aps-portfolio[data-hover="lift"][data-shadow="soft"] .aps-portfolio-card:hover {
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

.aps-portfolio[data-hover="lift"][data-shadow="medium"] .aps-portfolio-card:hover,
.aps-portfolio[data-hover="lift"][data-shadow="strong"] .aps-portfolio-card:hover {
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.aps-portfolio[data-hover="zoom"] .aps-portfolio-card:hover .aps-portfolio-thumb img {
	transform: scale(1.06);
}

.aps-portfolio[data-hover="fade"] .aps-portfolio-card:hover .aps-portfolio-thumb img {
	opacity: 0.78;
}

/* --------------------------------------------------------------------------
   Réorganisation animée au filtrage
   -------------------------------------------------------------------------- */

.aps-portfolio-card.is-reflowing {
	transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.aps-portfolio-card.is-appearing {
	animation: aps-pf-appear 320ms ease both;
}

@keyframes aps-pf-appear {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: scale(1); }
}

/* Le masquage doit primer sur toute règle de thème posant un `display`. */
.aps-portfolio-card[hidden] { display: none !important; }

.aps-portfolio-empty { opacity: 0.7; text-align: center; }

@media (prefers-reduced-motion: reduce) {
	.aps-portfolio-card,
	.aps-portfolio-thumb img { transition: none; }

	.aps-portfolio[data-hover="lift"] .aps-portfolio-card:hover { transform: none; }
	.aps-portfolio[data-hover="zoom"] .aps-portfolio-card:hover .aps-portfolio-thumb img { transform: none; }

	.aps-portfolio-card.is-reflowing { transition: none !important; }
	.aps-portfolio-card.is-appearing { animation: none !important; }
}