/* Project cover + details strip = one full screen (render.php). The header floats over the photo. */
.fratoz-project-top {
	--red: #ab1f24; --ink: #141414;
	--mont: var(--wp--preset--font-family--montserrat, Montserrat, sans-serif);
	--gut: clamp(1rem, 4vw, 4rem);
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	margin-block: 0 !important;
	background: var(--ink);
	color: #fff;
}
.admin-bar .fratoz-project-top { min-height: calc(100svh - var(--wp-admin--admin-bar--height, 32px)); }
.fratoz-project-top .fph-hero { position: relative; flex: 1; min-height: 440px; display: flex; align-items: flex-end; overflow: hidden; }
.fratoz-project-top .fph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: fph-in 1.6s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes fph-in { to { transform: none; } }
.fratoz-project-top .fph-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .72) 100%); pointer-events: none; }
.fratoz-project-top .fph-in { position: relative; z-index: 2; width: 100%; padding: 0 var(--gut) clamp(2rem, 5vw, 3.5rem); }
.fratoz-project-top .fph-tag { display: inline-block; margin: 0 0 1rem; padding: .45rem .6rem; background: var(--red); color: #fff; font: 800 .72rem/1 var(--mont); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.fratoz-project-top .fph-tag:hover { background: #fff; color: var(--red); }
.fratoz-project-top .fph-title { max-width: 18ch; margin: 0; color: #fff; font: 900 clamp(2.6rem, 7vw, 6rem)/.92 var(--mont); text-transform: uppercase; text-wrap: balance; }
.fratoz-project-top .fph-lead { max-width: 34rem; margin: 1rem 0 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 600; line-height: 1.45; }

/* scroll cue: a mouse with a red wheel dot rolling down, two arrows pulsing */
.fratoz-project-top .fph-cue { position: absolute; z-index: 3; right: var(--gut); bottom: clamp(2rem, 5vw, 3.5rem); display: flex; align-items: center; gap: .8rem; color: #fff; text-decoration: none; font: 800 .7rem/1 var(--mont); letter-spacing: .16em; text-transform: uppercase; }
.fratoz-project-top .fph-mouse { position: relative; width: 26px; height: 40px; border: 2px solid #fff; border-radius: 14px; }
.fratoz-project-top .fph-mouse::before { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--red); animation: fph-wheel 1.6s ease-in-out infinite; }
@keyframes fph-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
.fratoz-project-top .fph-chev { display: grid; gap: 2px; }
.fratoz-project-top .fph-chev i { width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); opacity: 0; animation: fph-chev 1.6s ease-in-out infinite; }
.fratoz-project-top .fph-chev i:nth-child(2) { animation-delay: .2s; }
@keyframes fph-chev { 30%, 60% { opacity: 1; } 100% { opacity: 0; transform: rotate(45deg) translate(4px, 4px); } }
.fratoz-project-top .fph-cue:hover .fph-mouse { border-color: var(--red); }

/* details strip: centred row on wide screens, two columns on phones */
.fratoz-project-top .fph-plate dl { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0 var(--gut); }
.fratoz-project-top .fph-plate dl > div { max-width: 340px; padding: 1.3rem clamp(1rem, 2.2vw, 2rem); border-left: 1px solid #333; }
.fratoz-project-top .fph-plate dl > div:first-child { border-left: 0; }
.fratoz-project-top .fph-plate dt { margin-bottom: .55rem; color: #ff6a6f; font: 800 .68rem/1 var(--mont); letter-spacing: .14em; text-transform: uppercase; }
.fratoz-project-top .fph-plate dd { margin: 0; font: 700 1rem/1.35 var(--mont); }
@media (max-width: 700px) {
	.fratoz-project-top .fph-cue span { display: none; }
	.fratoz-project-top .fph-in { padding-bottom: 5.5rem; }
	.fratoz-project-top .fph-cue { left: 50%; right: auto; bottom: 1.3rem; transform: translateX(-50%); }
	.fratoz-project-top .fph-plate dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
	.fratoz-project-top .fph-plate dl > div { max-width: none; padding: 1rem 0; border-left: 0; border-top: 1px solid #333; }
	.fratoz-project-top .fph-plate dl > .is-wide { grid-column: 1 / -1; }
}
.fph-anchor { display: block; height: 0; scroll-margin-top: 70px; }
@media (prefers-reduced-motion: reduce) {
	.fratoz-project-top .fph-img, .fratoz-project-top .fph-mouse::before, .fratoz-project-top .fph-chev i { animation: none; transform: none; opacity: 1; }
}