/*
Theme Name: shotbyfeedback
Author: Dexter Walker
Description: Portfolio block theme for Alberto Madrigal (shotbyfeedback). Dark, film-forward layout with a showreel hero, a project grid fed by Posts, an About page pattern and a contact footer. No plugins required.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shotbyfeedback
*/

/* ---------- Base ---------- */

body {
	font-optical-sizing: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

::selection {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Template parts and sections sit flush; spacing lives on each section. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-block-post-content.sbf-home > * {
	margin-block-start: 0;
}

.wp-block-post-content.sbf-home > .sbf-work-section {
	margin-block-start: 24px;
}

/* Visible keyboard focus everywhere, not just on text links. */
:where(a, button, input, textarea, select, summary, .wp-element-button, [tabindex]):focus-visible {
	outline: 1px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.wp-element-button:focus-visible {
	outline-offset: 4px;
}

[id] {
	scroll-margin-top: 24px;
}

/* ---------- Shared pieces ---------- */

/* Paragraph style "Label": small mono caps used all over the design. */
.is-style-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label) !important;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Paragraph style "Underlined link". */
.is-style-text-link {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
}

.is-style-text-link a {
	display: inline-block;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wp--preset--color--muted);
	transition: border-color 0.2s ease;
}

.is-style-text-link a:hover {
	text-decoration: none;
	border-bottom-color: var(--wp--preset--color--contrast);
}

/* Big type reads tighter than body copy. */
.has-x-large-font-size,
.has-xx-large-font-size {
	line-height: 1.2;
}

.has-section-font-size,
.has-display-font-size,
.has-jumbo-font-size,
.has-huge-font-size {
	line-height: 1.02;
}

/* Hairline that opens a section, as in the Figma dividers. */
.sbf-rule {
	border-top: 1px solid var(--wp--preset--color--line);
}

.sbf-split {
	margin-block: 0;
}

/* ---------- Header ---------- */

.sbf-header {
	min-height: 87px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sbf-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
	transition: color 0.2s ease;
}

.sbf-nav .wp-block-navigation-item__content:hover,
.sbf-nav .is-contact .wp-block-navigation-item__content,
.home .sbf-nav .is-work .wp-block-navigation-item__content,
.single-post .sbf-nav .is-work .wp-block-navigation-item__content,
.archive .sbf-nav .is-work .wp-block-navigation-item__content,
.is-page-about .sbf-nav .is-about .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

.home .sbf-nav .is-work .wp-block-navigation-item__content::before,
.single-post .sbf-nav .is-work .wp-block-navigation-item__content::before,
.archive .sbf-nav .is-work .wp-block-navigation-item__content::before,
.is-page-about .sbf-nav .is-about .wp-block-navigation-item__content::before {
	content: "\25CF\00a0";
	font-family: var(--wp--preset--font-family--inter);
}

.sbf-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px clamp(16px, 3.334vw, 48px);
}

.sbf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 24px;
	font-size: 18px;
}

/* ---------- Home: intro + showreel ---------- */

.sbf-intro {
	container-type: inline-size;
	padding-top: 28px;
	padding-bottom: 64px;
}

.sbf-masthead {
	margin: 0;
	font-size: min(151px, 12.5cqi) !important;
	line-height: 1.05;
	white-space: nowrap;
}

.sbf-intro .sbf-meta-row {
	padding-bottom: 8px;
}

.sbf-reel.wp-block-cover {
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
}

.sbf-reel .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.69) 100%) !important;
	opacity: 1 !important;
}

.sbf-reel-overlay {
	width: 100%;
	row-gap: 24px;
}

.sbf-reel-title {
	max-width: 710px;
	margin: 0;
	font-weight: 500;
	line-height: 1.02;
}

.sbf-play .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	min-height: 62px;
	padding-block: 0;
}

.sbf-play .wp-block-button__link::before {
	content: "\25B6";
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
}

/* The reel embed waits behind the still until Play is pressed (front end only). */
.sbf-js .sbf-hero:not(.is-playing) .sbf-reel-embed,
.sbf-hero.is-playing .sbf-reel {
	display: none;
}

.sbf-reel-embed {
	margin: 0;
}

.sbf-editor-note {
	margin: 12px 0;
}

/* ---------- Project cards (home grid + archives) ---------- */

.sbf-work-section {
	margin-top: 24px;
	padding-top: 40px;
	padding-bottom: 88px;
}

.sbf-work .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 24px;
	counter-reset: sbf-card;
}

@media (max-width: 700px) {
	.sbf-work .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sbf-work .wp-block-post {
	counter-increment: sbf-card;
}

.sbf-card-image {
	position: relative;
	margin: 0 0 18px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.sbf-card-image img {
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.sbf-card-image a::after {
	content: "\2197";
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 23px;
	line-height: 1;
}

.sbf-work .wp-block-post:hover .sbf-card-image img {
	transform: scale(1.025);
}

@media (prefers-reduced-motion: reduce) {
	.sbf-card-image img {
		transition: none;
	}
}

.sbf-card-details::after {
	content: counter(sbf-card, decimal-leading-zero);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.4;
}

.sbf-card-title {
	margin: 0;
}

.sbf-card-meta {
	gap: 0.5em;
}

.sbf-card-meta .wp-block-post-terms a,
.sbf-project-meta .wp-block-post-terms a {
	color: inherit;
}

/* Role reads "CLIENT / ROLE"; the slash only shows when a client exists. */
.taxonomy-project_role .wp-block-post-terms__prefix {
	display: none;
}

.taxonomy-project_client + .taxonomy-project_role .wp-block-post-terms__prefix {
	display: inline;
}

.sbf-pagination {
	margin-top: 48px;
}

/* ---------- Home: behind the work ---------- */

.sbf-behind {
	padding-top: 40px;
	padding-bottom: 96px;
}

.sbf-philosophy {
	margin-top: 0;
	line-height: 1.15;
}

.sbf-lede {
	max-width: 660px;
}

/* ---------- Single project ---------- */

.sbf-project {
	padding-top: 40px;
	padding-bottom: 96px;
}

.sbf-project-title {
	margin-top: 56px;
	margin-bottom: 0;
	font-weight: 500;
}

.sbf-project-meta {
	padding-top: 24px;
	padding-bottom: 48px;
	gap: 48px;
}

.sbf-project-meta .wp-block-post-terms {
	color: var(--wp--preset--color--contrast);
}

.sbf-project-body > * + * {
	margin-block-start: 48px;
}

/* Starter-pattern paragraphs left blank shouldn't leave gaps. */
.sbf-project-body p:empty {
	display: none;
}

.sbf-project-video .wp-block-embed__wrapper,
.sbf-project-video video {
	background: var(--wp--preset--color--surface);
}

.sbf-more {
	margin-top: 96px;
	padding-top: 40px;
}

.sbf-more .wp-block-post-navigation-link a:hover {
	text-decoration: none;
	color: var(--wp--preset--color--muted);
}

/* ---------- About page pattern ---------- */

.sbf-about {
	padding-top: 40px;
	padding-bottom: 96px;
}

.sbf-identity {
	justify-content: space-between !important;
	height: 100%;
	padding-top: 28px;
	padding-bottom: 8px;
}

.sbf-name {
	margin: 0;
	font-weight: 500;
}

.sbf-statement {
	margin: 0;
	line-height: 1.12;
}

.sbf-about-photo {
	margin: 0 0 16px;
}

.sbf-bio {
	margin-top: 40px;
	padding-top: 40px;
}

.sbf-approach {
	margin-top: 96px;
}

.sbf-approach h2 {
	margin-top: 0;
}

.sbf-step {
	padding-top: 24px;
	padding-bottom: 24px;
}

.sbf-step > .wp-block-group {
	flex: 1 1 auto;
}

.sbf-step-index {
	flex: 0 0 40px;
	padding-top: 8px;
}

.sbf-step h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

/* Generic pages hide their own title when the About pattern supplies one. */
.wp-site-blocks:has(.sbf-about) .sbf-page-header {
	display: none;
}

.sbf-page {
	padding-bottom: 96px;
}

.sbf-page-header {
	padding-top: 40px;
	padding-bottom: 48px;
}

/* ---------- Contact + footer ---------- */

.sbf-contact {
	padding-top: 48px;
	padding-bottom: 32px;
}

.sbf-contact-cta {
	flex-wrap: nowrap !important;
}

.sbf-contact-headline,
.sbf-contact-arrow {
	margin: 0;
	line-height: 1;
}

.sbf-contact-headline {
	font-weight: 500;
}

.sbf-contact-cta a:hover {
	text-decoration: none;
	color: var(--wp--preset--color--muted);
}

.sbf-contact-links {
	padding-bottom: 24px;
}

.sbf-contact-details {
	width: 100%;
}

.sbf-socials {
	gap: 32px;
}

.sbf-footer-bar {
	padding-top: 40px;
}

/* ---------- Small screens ---------- */

@media (max-width: 781px) {
	.sbf-header {
		min-height: 64px;
	}

	.sbf-intro {
		padding-bottom: 40px;
	}

	.sbf-reel.wp-block-cover {
		min-height: 480px !important;
		padding: 20px;
	}

	.sbf-work-section {
		padding-bottom: 56px;
	}

	.sbf-behind,
	.sbf-about,
	.sbf-project {
		padding-bottom: 64px;
	}

	.sbf-identity {
		gap: 48px;
	}

	.sbf-approach,
	.sbf-more {
		margin-top: 56px;
	}

	.sbf-socials {
		gap: 20px;
	}

	.sbf-footer-bar {
		row-gap: 12px;
	}
}