/*
 * HiFiSPIN Portfolio — component styles.
 * Colours/fonts read from the theme's presets, with fallbacks so the plugin works with any theme.
 */
.hf-filter, .hf-card, .hf-index-table, .hf-facts, .hf-next, .hf-disc-index, .hf-crumbs {
	--hfp-ink: var(--wp--preset--color--ink, #0b0b0b);
	--hfp-paper: var(--wp--preset--color--paper, #fff);
	--hfp-alt: var(--wp--preset--color--paper-alt, #f1f1ee);
	--hfp-line: var(--wp--preset--color--line, #d4d4d0);
	--hfp-muted: var(--wp--preset--color--muted, #6e6e6a);
	--hfp-accent: var(--wp--preset--color--accent, #e4002b);
	--hfp-mono: var(--wp--preset--font-family--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
}
.hf-num, .hf-year, .hf-disc, .hf-count, .hf-ph-label, .hf-crumbs, .hf-facts dt, .hf-index-row.is-head, .hf-next__meta, .hf-index-row .hf-year, .hf-disc-index sup {
	font-family: var(--hfp-mono, ui-monospace, monospace);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.4;
	font-weight: 400;
}

/* ---------- Filter chips ---------- */
.hf-filter { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.hf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hf-chip {
	display: inline-flex; align-items: flex-start; gap: 6px;
	padding: 10px 14px; border: 1px solid var(--hfp-ink);
	color: var(--hfp-ink); text-decoration: none !important;
	font-size: 14px; font-weight: 500; line-height: 1.3;
	transition: background-color .15s, color .15s, border-color .15s;
}
.hf-chip .hf-count { color: var(--hfp-muted); }
.hf-chip:hover { border-color: var(--hfp-accent); color: var(--hfp-accent); }
.hf-chip.is-active { background: var(--hfp-ink); color: var(--hfp-paper); border-color: var(--hfp-ink); }
.hf-chip.is-active .hf-count { color: var(--hfp-accent); }
.hf-view { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--hfp-line); }
.hf-view button { background: none; border: 0; padding: 0; font: inherit; color: var(--hfp-muted); cursor: pointer; }
.hf-view button.is-active { color: var(--hfp-ink); }
.hf-view button:hover { color: var(--hfp-accent); }
@media (max-width: 781px) {
	.hf-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--wp--style--root--padding-right, 20px)); padding-right: 20px; }
	.hf-chips::-webkit-scrollbar { display: none; }
	.hf-chip { flex: 0 0 auto; }
	.hf-view { display: none; }
}

/* ---------- Work grid (Query Loop with class hf-grid) ---------- */
.hf-grid .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 80px 20px;
	list-style: none; margin: 0; padding: 0;
}
.hf-grid .wp-block-post-template > li { grid-column: span 4; margin: 0 !important; min-width: 0; }
.hf-grid .wp-block-post-template > li.hf-size-medium { grid-column: span 6; }
.hf-grid .wp-block-post-template > li.hf-size-large { grid-column: span 8; }
.hf-grid .wp-block-post-template > li.hf-size-full { grid-column: 1 / -1; }
.hf-grid .wp-block-post-template > li[hidden] { display: none; }
@media (max-width: 1099px) {
	.hf-grid .wp-block-post-template > li,
	.hf-grid .wp-block-post-template > li.hf-size-medium { grid-column: span 6; }
	.hf-grid .wp-block-post-template > li.hf-size-large { grid-column: 1 / -1; }
}
@media (max-width: 781px) {
	.hf-grid .wp-block-post-template { gap: 48px 16px; }
	.hf-grid .wp-block-post-template > li[class] { grid-column: 1 / -1; }
}

/* ---------- Card ---------- */
.hf-card > * { margin-block: 0 !important; }
.hf-card > * + * { margin-block-start: 12px !important; }
.hf-card__media { --hf-ar: 16 / 10; position: relative; aspect-ratio: var(--hf-ar); overflow: hidden; background: var(--hfp-alt); margin: 0 0 2px !important; }
li.hf-format-video .hf-card__media { --hf-ar: 16 / 9; }
li.hf-format-square .hf-card__media { --hf-ar: 1 / 1; }
li.hf-format-portrait .hf-card__media { --hf-ar: 4 / 5; }
.hf-card__media a { display: block; height: 100%; }
.hf-card__media img { width: 100%; height: 100% !important; object-fit: cover; display: block; transition: opacity .2s; }
.hf-card__media.is-placeholder a { display: flex; align-items: flex-end; padding: 16px; text-decoration: none; }
.hf-ph-label { color: var(--hfp-muted); }
.hf-play {
	position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%);
	background: var(--hfp-ink); pointer-events: none; z-index: 2; transition: opacity .2s;
}
.hf-play::after {
	content: ""; position: absolute; left: 29px; top: 24px;
	border-style: solid; border-width: 12px 0 12px 21px; border-color: transparent transparent transparent var(--hfp-paper);
}
.hf-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 1; }
.is-playing .hf-loop { opacity: 1; }
.is-playing .hf-play { opacity: 0; }
.hf-card__meta { display: flex; gap: 16px; align-items: baseline; }
.hf-card__meta .hf-num { color: var(--hfp-accent); }
.hf-card__meta .hf-disc { color: var(--hfp-ink); }
.hf-card__meta .hf-year { margin-left: auto; color: var(--hfp-muted); }
.hf-card__title { margin: 0; }
.hf-card__title a { color: inherit; text-decoration: none; }
.hf-card:hover .hf-card__title a { color: var(--hfp-accent); }
.hf-card__summary p { margin: 0; color: var(--hfp-muted); }

/* ---------- Discipline index (home hero) ---------- */
.hf-disc-index { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--hfp-ink); padding-top: 20px; }
.hf-disc-index__item { display: flex; flex-direction: column; gap: 8px; color: var(--hfp-ink); text-decoration: none !important; }
.hf-disc-index__item .hf-num { color: var(--hfp-accent); }
.hf-disc-index__name { font-size: var(--wp--preset--font-size--title-m, 36px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.hf-disc-index sup { color: var(--hfp-muted); vertical-align: top; margin-left: 4px; font-size: 12px; position: relative; top: .35em; }
.hf-disc-index__item:hover .hf-disc-index__name { color: var(--hfp-accent); }
/* 7+ disciplines: two rows of four */
.hf-disc-index:has(> :nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 32px; }
@media (max-width: 1099px) { .hf-disc-index, .hf-disc-index:has(> :nth-child(7)) { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 781px) {
	.hf-disc-index, .hf-disc-index:has(> :nth-child(7)) { grid-template-columns: 1fr; gap: 0; border-top: 0; padding-top: 0; }
	.hf-disc-index__item { flex-direction: row; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hfp-line); }
	.hf-disc-index__name { font-size: 22px; flex: 1; display: flex; justify-content: space-between; }
}

/* ---------- Index table ---------- */
.hf-index-table[hidden] { display: none; }
.hf-index-row {
	display: grid; grid-template-columns: 1fr 5fr 3fr 3fr; gap: 20px; align-items: center;
	padding: 16px 0; border-bottom: 1px solid var(--hfp-line);
	color: var(--hfp-muted); text-decoration: none !important; font-size: 16px;
}
.hf-index-row.is-head { border-bottom-color: var(--hfp-ink); color: var(--hfp-muted); padding-top: 0; }
.hf-index-row[hidden] { display: none; }
.hf-index-title { color: var(--hfp-ink); font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
a.hf-index-row:hover .hf-index-title { color: var(--hfp-accent); }
@media (max-width: 781px) {
	.hf-index-row { grid-template-columns: 60px 1fr; row-gap: 2px; }
	.hf-index-row > span:nth-child(n+3) { display: none; }
	.hf-index-title { font-size: 18px; }
}

/* ---------- Single project ---------- */
.hf-crumbs { display: flex; gap: 20px; flex-wrap: wrap; }
.hf-crumbs a { color: var(--hfp-ink); text-decoration: none; }
.hf-crumbs a:hover { color: var(--hfp-accent); }
.hf-crumbs .hf-num { color: var(--hfp-accent); }
.hf-crumbs .hf-year { color: var(--hfp-muted); }
.hf-facts { margin: 0; }
.hf-facts__row { display: grid; grid-template-columns: minmax(70px, 1fr) 3fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--hfp-line); }
.hf-facts__row:first-child { padding-top: 0; }
.hf-facts dt { color: var(--hfp-muted); padding-top: 3px; }
.hf-facts dd { margin: 0; color: var(--hfp-ink); }
.hf-facts dd a { color: inherit; }
.hf-next { border-top: 1px solid var(--hfp-ink); padding-top: 24px; display: flex; flex-direction: column; gap: 24px; }
.hf-next__meta { display: flex; justify-content: space-between; gap: 20px; color: var(--hfp-muted); }
.hf-next__meta a { color: var(--hfp-ink); text-decoration: none; }
.hf-next__link {
	font-size: var(--wp--preset--font-size--display, 112px); font-weight: 700; letter-spacing: -.04em; line-height: .95;
	color: var(--hfp-ink); text-decoration: none !important;
}
.hf-next__link span { color: var(--hfp-accent); display: inline-block; transition: transform .2s; }
.hf-next__link:hover span { transform: translateX(.15em); }