/* Foglight — components.css
   Buttons, cards, forms, hero, CTA band, comments and small UI pieces. */

/* Buttons ------------------------------------------------------------- */
.button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	transition: background-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

.button:active {
	transform: translateY(1px);
}

.button--primary {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

.button--primary:hover,
.button--primary:focus-visible {
	background-color: var(--color-secondary);
}

.button--secondary {
	background-color: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.button--secondary:hover,
.button--secondary:focus-visible {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

/* Focus ring (applies to all interactive elements) --------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Hero ------------------------------------------------------------------ */
.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 60vh;
	color: var(--color-on-primary);
	overflow: hidden;
}

.hero--center {
	min-height: 65vh;
	align-items: center;
	text-align: center;
}

.hero--center .hero__content {
	margin-inline: auto;
}

.hero--center .hero__title,
.hero--center .hero__subtitle {
	margin-inline: auto;
}

.hero__title--sm {
	font-size: calc(var(--step-5) / 2);
}

.hero__media {
	position: absolute;
	inset: 0;
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 17, 17, 0.05) 0%, rgba(17, 17, 17, 0.55) 100%);
}

.hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	color: rgba(255, 255, 255, 0.35);
}

.hero__content {
	position: relative;
	padding-block: var(--space-8) var(--space-7);
}

.hero__eyebrow {
	color: rgba(255, 255, 255, 0.75);
}

.hero__title {
	margin-top: var(--space-2);
	max-width: 20ch;
}

.hero__subtitle {
	margin-top: var(--space-3);
	max-width: 48ch;
	font-size: var(--step-1);
	color: rgba(255, 255, 255, 0.85);
}

.hero__cta {
	margin-top: var(--space-5);
}

/* Section heading row ---------------------------------------------------- */
.section-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

/* Project card ------------------------------------------------------------ */
.project-card__link {
	display: block;
}

.project-card__media {
	overflow: hidden;
	background: var(--color-bg-subtle);
}

.project-card__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out);
}

.project-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-secondary);
}

.project-card__link:hover .project-card__image,
.project-card__link:focus-visible .project-card__image {
	transform: scale(1.05);
}

.project-card__caption {
	padding-top: var(--space-3);
}

.project-card__title {
	font-size: var(--step-0);
	font-weight: 600;
}

.project-card__subtitle {
	margin-top: var(--space-1);
	font-size: var(--step--1);
	color: var(--color-secondary);
}

/* Project entry (portfolio index — image left, text right) ------------------ */
.project-entry {
	display: flex;
	gap: var(--space-5);
}

.project-entry__media {
	display: block;
	flex: 0 0 42%;
	overflow: hidden;
	background: var(--color-bg-subtle);
}

.project-entry__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out);
}

.project-entry__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-secondary);
}

.project-entry:hover .project-entry__image,
.project-entry:focus-within .project-entry__image {
	transform: scale(1.02);
}

.project-entry__caption {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.project-entry__title {
	font-size: var(--step-1);
}

.project-entry__title a:hover,
.project-entry__title a:focus-visible {
	text-decoration: underline;
}

.project-entry__description {
	margin-top: var(--space-3);
	color: var(--color-secondary);
}

.project-entry__cta {
	margin-top: var(--space-4);
	align-self: flex-start;
}

@media (max-width: 480px) {
	.project-entry {
		flex-direction: column;
	}

	.project-entry__media {
		flex-basis: auto;
	}
}

/* Post card ---------------------------------------------------------------- */
.post-card {
	display: flex;
	flex-direction: column;
}

.post-card__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: var(--color-bg-subtle);
}

.post-card__body {
	padding-top: var(--space-4);
}

.post-card__date {
	font-size: var(--step--1);
	color: var(--color-secondary);
}

.post-card__title {
	margin-top: var(--space-2);
	font-size: var(--step-1);
}

.post-card__title a:hover {
	text-decoration: underline;
}

.post-card__excerpt {
	margin-top: var(--space-2);
	color: var(--color-secondary);
}

.post-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	font-weight: 600;
	font-size: var(--step--1);
}

/* About teaser -------------------------------------------------------------- */
.about-teaser__title {
	margin-top: var(--space-2);
}

.about-teaser__text {
	margin-top: var(--space-4);
	color: var(--color-secondary);
}

.about-teaser__content .text-link {
	margin-top: var(--space-5);
}

/* CTA band -------------------------------------------------------------------- */
.cta-band {
	background: var(--color-primary);
	color: var(--color-on-primary);
	padding-block: var(--space-8);
	text-align: center;
}

.cta-band__inner {
	max-width: 56ch;
	margin-inline: auto;
}

.cta-band__eyebrow {
	color: rgba(255, 255, 255, 0.7);
}

.cta-band__title {
	margin-top: var(--space-2);
}

.cta-band__text {
	margin-top: var(--space-3);
	color: rgba(255, 255, 255, 0.8);
	margin-inline: auto;
}

.cta-band .button--primary {
	margin-top: var(--space-6);
	background-color: var(--color-on-primary);
	color: var(--color-primary);
}

.cta-band .button--primary:hover,
.cta-band .button--primary:focus-visible {
	background-color: rgba(255, 255, 255, 0.85);
}

/* Page header ------------------------------------------------------------------- */
.page-header {
	padding-block: var(--space-7) var(--space-6);
}

.page-header__subtitle {
	margin-top: var(--space-3);
	color: var(--color-secondary);
	font-size: var(--step-1);
}

/* Lead image (About / editorial pages) — plain photo, no overlay or text-on-image ---- */
.lead-image {
	margin-top: var(--space-6);
}

.lead-image__img {
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
	background: var(--color-bg-subtle);
}

.page-content--editorial .page-header {
	padding-block: var(--space-6);
}

.page-content__body--narrow img {
	width: 100%;
	max-height: 60vh;
	object-fit: cover;
	margin-block: var(--space-6);
}

/* Block content width system — default reading column, with .alignwide and
   .alignfull breakouts (theme declares add_theme_support('align-wide')).
   Applies wherever the_content() is rendered. */
.page-content__body,
.single-post__content,
.project-single__content {
	max-width: 720px;
	margin-inline: auto;
}

.page-content__body > *,
.single-post__content > *,
.project-single__content > * {
	max-width: 720px;
	margin-inline: auto;
}

.page-content__body > .alignwide,
.single-post__content > .alignwide,
.project-single__content > .alignwide {
	max-width: 1100px;
}

.page-content__body > .alignfull,
.single-post__content > .alignfull,
.project-single__content > .alignfull {
	max-width: none;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* The About template widens its container so .alignwide Media & Text
   blocks have room to breathe; other content wrappers stay reading-width. */
.page-content--editorial,
.page-content--editorial .page-content__body,
.page-content--editorial .page-content__body > .alignwide {
	max-width: 1100px;
}

.page-content--editorial .page-content__body > * {
	max-width: 720px;
}

.page-content--editorial .page-content__body {
	padding-block: var(--space-8) var(--space-9);
}

.wp-block-media-text {
	align-items: center;
	gap: var(--space-6);
}

.wp-block-media-text__media {
	max-height: 480px;
	overflow: hidden;
}

.wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-content--editorial .wp-block-media-text__content {
	text-align: justify;
}

.page-content--editorial .wp-block-media-text__content > * {
	margin-inline: auto;
}

@media (max-width: 600px) {
	.wp-block-media-text__media {
		max-height: 320px;
	}
}

/* Project single: two-column row below the hero — title, meta, the video
   embed (if any), and description on the left; a 3-photo preview on the
   right, matched to that column's height. Any remaining gallery photos
   render afterward as their own full-width section (reference:
   teocrawford.com/in-awe-of-japanese-tiles). */
.project-single__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	padding-block: var(--space-8) var(--space-9);
}

@media (min-width: 860px) {
	.project-single__layout {
		grid-template-columns: 0.85fr 1fr;
		align-items: start;
	}
}

.project-single__gallery-rest {
	padding-block: var(--space-6) var(--space-9);
	border-top: 1px solid var(--color-border);
}

.project-single__title {
	max-width: 14ch;
	font-size: var(--step-4);
	line-height: 1.05;
}

.project-meta {
	margin-top: var(--space-4);
}

.project-meta__line {
	font-weight: 600;
}

.project-meta__secondary {
	margin-top: var(--space-2);
	font-size: var(--step--1);
	color: var(--color-secondary);
}

/* Embedded YouTube/Vimeo player (real oEmbed, plays inline) — used when
   wp_oembed_get() can resolve the project's external link, right under
   the title/meta. Falls back to .project-single__watch (a linked
   thumbnail) when it can't. */
.project-single__video {
	position: relative;
	margin-top: var(--space-5);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-bg-subtle);
}

.project-single__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.project-single__watch {
	position: relative;
	display: block;
	margin-top: var(--space-5);
	overflow: hidden;
	background: var(--color-bg-subtle);
}

.project-single__watch-image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out);
}

.project-single__watch-image--placeholder {
	background: var(--color-primary);
}

.project-single__watch:hover .project-single__watch-image,
.project-single__watch:focus-visible .project-single__watch-image {
	transform: scale(1.03);
}

.project-single__watch-icon {
	position: absolute;
	inset: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.65);
	color: var(--color-on-primary);
	transition: background-color var(--duration-fast) var(--ease-out);
}

.project-single__watch-icon svg {
	transform: translateX(2px);
}

.project-single__watch:hover .project-single__watch-icon,
.project-single__watch:focus-visible .project-single__watch-icon {
	background: var(--color-primary);
}

.project-single__content {
	margin-top: var(--space-5);
	text-align: left;
}

.project-single__content > * {
	max-width: none;
}

.project-gallery__item--video {
	overflow: hidden;
	background: var(--color-bg-subtle);
}

.project-gallery__item--video video {
	display: block;
	width: 100%;
	height: auto;
}

.project-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-7);
	margin-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.project-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	max-width: 40%;
}

.project-nav__link--next {
	margin-left: auto;
	text-align: right;
	flex-direction: row-reverse;
}

.project-nav__link small {
	display: block;
	font-weight: 400;
	color: var(--color-secondary);
}

/* Forms ------------------------------------------------------------------------------ */
.form-field {
	margin-top: var(--space-5);
}

.form-field label {
	display: block;
	margin-bottom: var(--space-2);
	font-weight: 600;
	font-size: var(--step--1);
}

.form-field input,
.form-field textarea,
.contact-form input[type="text"],
.contact-form input[type="email"] {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
}

.contact-form {
	max-width: 640px;
	margin-top: var(--space-6);
}

.contact-form .button {
	margin-top: var(--space-6);
}

.contact-page__intro {
	max-width: 68ch;
}

.contact-page__social {
	margin-top: var(--space-8);
}

.form-notice {
	margin-top: var(--space-5);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
}

.form-notice--success {
	border-color: var(--color-success);
	color: var(--color-success);
}

.form-notice--error,
.form-notice--invalid {
	border-color: var(--color-danger);
	color: var(--color-danger);
}

/* 404 ------------------------------------------------------------------------------------ */
.error-404 {
	max-width: 60ch;
	margin-inline: auto;
	text-align: center;
	padding-block: var(--space-9);
}

.error-404__code {
	font-size: var(--step-5);
	font-weight: 700;
	color: var(--color-secondary);
}

.error-404__text {
	margin-top: var(--space-3);
	color: var(--color-secondary);
}

.error-404 .search-form {
	margin-top: var(--space-6);
	justify-content: center;
}

.error-404__home {
	margin-top: var(--space-6);
}

/* Search form -------------------------------------------------------------------------------- */
.search-form {
	display: flex;
	gap: var(--space-2);
}

.search-form__input {
	flex: 1;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

/* Pagination ------------------------------------------------------------------------------------ */
.pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-8);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-2);
	border-radius: var(--radius-sm);
	font-size: var(--step--1);
}

.pagination .page-numbers.current {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.pagination .page-numbers:not(.current):hover {
	background: var(--color-bg-subtle);
}

/* Comments ---------------------------------------------------------------------------------------- */
.comments-area {
	margin-top: var(--space-8);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.comment-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin-top: var(--space-6);
}

.comment-list .children {
	margin-top: var(--space-6);
	margin-left: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.comment-author img {
	border-radius: 50%;
}

.comment-metadata {
	font-size: var(--step--1);
	color: var(--color-secondary);
	margin-top: var(--space-1);
}

.comment-content {
	margin-top: var(--space-3);
}

.comment-respond {
	margin-top: var(--space-7);
}

/* No results --------------------------------------------------------------------------------------- */
.no-results {
	max-width: 50ch;
	padding-block: var(--space-8);
}

.no-results .search-form {
	margin-top: var(--space-5);
}

.no-results .button {
	margin-top: var(--space-5);
}

/* Widgets ------------------------------------------------------------------------------------------- */
.widget-title {
	font-size: var(--step-0);
	margin-bottom: var(--space-4);
}

.widget ul li + li {
	margin-top: var(--space-2);
}