/**
 * Portfolio front-end styles.
 *
 * Every value reads a ThemeOcean design token first and falls back to a plain
 * value second, so the plugin inherits the theme's palette, radii and easing
 * when it runs inside ThemeOcean, and still looks finished anywhere else.
 *
 * @package ThemeOcean_Portfolio
 * @since   1.0.0
 */

.to-portfolio-details,
.to-banners,
.to-portfolio-filter,
.to-portfolio-appended {
	--to-p-surface: var( --wp--preset--color--surface, #f6f7f8 );
	--to-p-surface-alt: var( --wp--preset--color--surface-alt, #eceff1 );
	--to-p-text: var( --wp--preset--color--text, #1a2024 );
	--to-p-muted: var( --wp--preset--color--text-muted, #6b767d );
	--to-p-border: var( --wp--preset--color--border, rgba( 0, 0, 0, 0.12 ) );
	--to-p-primary: var( --wp--preset--color--primary, #0c6f78 );
	--to-p-radius: var( --wp--custom--radius--card, 22px );
	--to-p-radius-sm: var( --wp--custom--radius--field, 10px );
	--to-p-pill: var( --wp--custom--radius--pill, 999px );
	--to-p-ease: var( --wp--custom--ease--out, cubic-bezier( 0.19, 1, 0.22, 1 ) );
	--to-p-quick: var( --wp--custom--duration--quick, 0.25s );
	--to-p-gap-s: var( --wp--preset--spacing--20, 0.75rem );
	--to-p-gap-m: var( --wp--preset--spacing--30, 1.25rem );
	--to-p-gap-l: var( --wp--preset--spacing--40, 2rem );
}

/* ---------------------------------------------------------------- Details */

.to-portfolio-details {
	display: grid;
	gap: var( --to-p-gap-s );
	margin: 0;
}

.to-portfolio-details__row {
	display: grid;
	gap: 0.15em 1.5rem;
	align-items: baseline;
}

.to-portfolio-details.is-display-rows .to-portfolio-details__row {
	grid-template-columns: minmax( 6rem, 10rem ) 1fr;
}

.to-portfolio-details.is-display-columns {
	grid-template-columns: repeat( auto-fit, minmax( 9rem, 1fr ) );
	gap: var( --to-p-gap-m );
}

.to-portfolio-details.has-separators.is-display-rows .to-portfolio-details__row,
.to-portfolio-details.has-separators.is-display-stacked .to-portfolio-details__row {
	padding-block-end: var( --to-p-gap-s );
	border-block-end: 1px solid var( --to-p-border );
}

.to-portfolio-details.has-separators .to-portfolio-details__row:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.to-portfolio-details__term {
	margin: 0;
	color: var( --to-p-muted );
	font-size: 0.85em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.to-portfolio-details__value {
	margin: 0;
	color: inherit;
	overflow-wrap: anywhere;
}

.to-portfolio-details__value a {
	color: inherit;
	text-decoration-color: var( --to-p-primary );
	text-underline-offset: 0.25em;
}

/* ------------------------------------------------------------ Single field */

.to-portfolio-meta {
	display: grid;
	gap: 0.15em;
}

.to-portfolio-meta.is-layout-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: baseline;
}

.to-portfolio-meta__label {
	color: var( --to-p-muted );
	font-size: 0.85em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.to-portfolio-meta__value.is-placeholder {
	color: var( --to-p-muted );
	font-style: italic;
}

/* ----------------------------------------------------------------- Filter */

.to-portfolio-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var( --to-p-gap-s );
	align-items: center;
}

.to-portfolio-filter.is-justify-center {
	justify-content: center;
}

.to-portfolio-filter.is-justify-right {
	justify-content: flex-end;
}

.to-portfolio-filter.is-justify-between {
	justify-content: space-between;
}

.to-portfolio-filter__item {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	padding: 0.5em 1.1em;
	border: 1px solid var( --to-p-border );
	border-radius: var( --to-p-pill );
	color: inherit;
	font-size: 0.95em;
	text-decoration: none;
	transition: background-color var( --to-p-quick ) var( --to-p-ease ),
		color var( --to-p-quick ) var( --to-p-ease ),
		border-color var( --to-p-quick ) var( --to-p-ease );
}

.to-portfolio-filter__item:hover,
.to-portfolio-filter__item:focus-visible {
	border-color: currentColor;
}

.to-portfolio-filter__item.is-current {
	background: var( --to-p-primary );
	border-color: var( --to-p-primary );
	color: var( --wp--preset--color--light, #fff );
}

.to-portfolio-filter__count {
	opacity: 0.6;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}

.wp-block-post-template .is-filtered-out {
	display: none;
}

/* --------------------------------------------------------- Banner viewer */

.to-banners {
	display: grid;
	gap: var( --to-p-gap-m );
}

.to-banners__sizes {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-block-end: 0.25rem;
}

.to-banners__size {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.45em 1em;
	border: 1px solid var( --to-p-border );
	border-radius: var( --to-p-pill );
	background: transparent;
	color: inherit;
	font-family: var( --wp--preset--font-family--mono, ui-monospace, monospace );
	font-size: 0.85rem;
	line-height: 1.4;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color var( --to-p-quick ) var( --to-p-ease ),
		color var( --to-p-quick ) var( --to-p-ease ),
		border-color var( --to-p-quick ) var( --to-p-ease );
}

.to-banners__size:hover {
	border-color: currentColor;
}

.to-banners__size.is-current {
	background: var( --to-p-primary );
	border-color: var( --to-p-primary );
	color: var( --wp--preset--color--light, #fff );
}

.to-banners__stage {
	display: flex;
	gap: var( --to-p-gap-s );
	align-items: center;
	justify-content: center;
	min-height: 12rem;
	padding: var( --to-p-gap-m );
	border-radius: var( --to-p-radius );
	overflow: hidden;
}

.to-banners.is-stage-checker .to-banners__stage {
	background-color: var( --to-p-surface );
	background-image:
		linear-gradient( 45deg, var( --to-p-surface-alt ) 25%, transparent 25% ),
		linear-gradient( -45deg, var( --to-p-surface-alt ) 25%, transparent 25% ),
		linear-gradient( 45deg, transparent 75%, var( --to-p-surface-alt ) 75% ),
		linear-gradient( -45deg, transparent 75%, var( --to-p-surface-alt ) 75% );
	background-position: 0 0, 0 10px, 10px -10px, -10px 0;
	background-size: 20px 20px;
}

.to-banners.is-stage-plain .to-banners__stage {
	background: var( --to-p-surface );
}

.to-banners__frame {
	position: relative;
	flex: 0 0 auto;
	width: var( --to-banner-w, 300px );
	height: var( --to-banner-h, 250px );

	/* A scaled element still occupies its unscaled box, which would push the
	   arrows off a phone screen for a 970px format. Negative margins hand the
	   difference back to the layout, so the flex row measures what you see. */
	margin-block-end: calc( var( --to-banner-h, 250px ) * ( var( --to-banner-scale, 1 ) - 1 ) );
	margin-inline: calc( var( --to-banner-w, 300px ) * ( var( --to-banner-scale, 1 ) - 1 ) / 2 );
	border-radius: var( --to-p-radius-sm );
	background: #fff;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 ), 0 12px 32px -12px rgba( 0, 0, 0, 0.35 );
	transform: scale( var( --to-banner-scale, 1 ) );
	transform-origin: top center;
	transition: width var( --to-p-quick ) var( --to-p-ease ),
		height var( --to-p-quick ) var( --to-p-ease );
}

.is-resizing .to-banners__frame {
	transition: none;
}

.to-banners__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
}

.to-banners__handle {
	position: absolute;
	inset-block-end: -0.75rem;
	inset-inline-end: -0.75rem;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border: 1px solid var( --to-p-border );
	border-radius: 50%;
	background: var( --wp--preset--color--background, #fff );
	color: var( --to-p-muted );
	cursor: nwse-resize;
	touch-action: none;
	transition: color var( --to-p-quick ) var( --to-p-ease ),
		transform var( --to-p-quick ) var( --to-p-ease );
}

.to-banners__handle:hover,
.to-banners__handle:focus-visible {
	color: var( --to-p-primary );
	transform: scale( 1.1 );
}

.to-banners__nav {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var( --to-p-border );
	border-radius: 50%;
	background: var( --wp--preset--color--background, #fff );
	color: inherit;
	cursor: pointer;
	transition: color var( --to-p-quick ) var( --to-p-ease ),
		border-color var( --to-p-quick ) var( --to-p-ease );
}

.to-banners__nav:hover,
.to-banners__nav:focus-visible {
	border-color: currentColor;
	color: var( --to-p-primary );
}

.to-banners.is-single .to-banners__nav {
	display: none;
}

.to-banners__footer {
	display: flex;
	gap: var( --to-p-gap-s );
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.to-banners__readout {
	margin: 0;
	color: var( --to-p-muted );
	font-family: var( --wp--preset--font-family--mono, ui-monospace, monospace );
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.to-banners__replay {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	padding: 0.45em 1em;
	border: 1px solid var( --to-p-border );
	border-radius: var( --to-p-pill );
	background: transparent;
	color: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	transition: color var( --to-p-quick ) var( --to-p-ease ),
		border-color var( --to-p-quick ) var( --to-p-ease );
}

.to-banners__replay:hover,
.to-banners__replay:focus-visible {
	border-color: currentColor;
	color: var( --to-p-primary );
}

.to-banners__empty,
.to-portfolio-details.is-empty,
.to-portfolio-filter.is-empty {
	margin: 0;
	padding: var( --to-p-gap-m );
	border: 1px dashed var( --to-p-border );
	border-radius: var( --to-p-radius-sm );
	color: var( --to-p-muted );
}

.to-portfolio-appended {
	display: grid;
	gap: var( --to-p-gap-l );
	margin-block-start: var( --to-p-gap-l );
}

@media ( max-width: 600px ) {
	.to-banners__stage {
		padding: var( --to-p-gap-s );
	}

	.to-banners__nav {
		width: 2.25rem;
		height: 2.25rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.to-banners__frame,
	.to-banners__handle,
	.to-banners__nav,
	.to-banners__size,
	.to-portfolio-filter__item {
		transition-duration: 0.01ms;
	}
}