/* ===========================================================================
   Gonçalo Gonçalves — Portfolio 2026
   Progressive enhancement:
   - BASE (no JS / mobile): cards stack in a clean centered column. Safe even
     if JavaScript never runs — nothing "explodes".
   - ENHANCED: portfolio.js adds `.is-canvas` to the stage on desktop, which
     turns the stack into the absolute-positioned draggable canvas.
   A hard reset inside .card__content neutralises WordPress core block styles.
   ========================================================================= */

:root {
	--gp-paper: #ede3c9;
	--gp-ink: #101010;
	--gp-muted: #606060;
	--gp-dim: #808080;
	--gp-card-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	color: var(--gp-ink);
	background: var(--gp-paper);
}

/* Paper Texture background (URL injected via --gp-paper-texture in functions.php). */
.paper-bg {
	background-color: var(--gp-paper);
	background-image: var(--gp-paper-texture);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.pf-stage {
	position: relative;
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
}

/* ---- Site logo / control chip (fixed, on every page) ------------------- */
.pf-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 8px;
	background: #fff;
	border-radius: 4px;
	box-shadow: var(--gp-card-shadow);
}

.pf-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	font: 500 32px/0.9 system-ui, sans-serif;
	color: var(--gp-muted);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s;
}
.pf-logo:hover {
	color: var(--gp-ink);
}
.pf-logo__img {
	display: block;
	max-height: 32px;
	width: auto;
}

.pf-swatches {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px;
}
.pf-swatch {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	padding: 0;
	border: 1px solid #bcb49e;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.15s;
}
.pf-swatch:hover {
	transform: scale(1.1);
}

.pf-align {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px 0;
}
.pf-align__btn {
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gp-muted);
	opacity: 0.4;
	cursor: pointer;
	transition: opacity 0.15s, color 0.15s;
}
.pf-align__btn:hover {
	opacity: 0.7;
}
.pf-align__btn.is-active {
	opacity: 1;
	color: var(--gp-ink);
}

/* Swatches + alignment are canvas-only; JS adds .is-canvas to the header. */
.pf-swatches,
.pf-align {
	display: none;
}
.pf-header.is-canvas .pf-swatches,
.pf-header.is-canvas .pf-align {
	display: flex;
}

/* ---- BASE: stacked column (no JS, or mobile) --------------------------- */
.pf-cards {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 480px;
	margin: 0 auto;
	padding: 96px 16px 64px;
}

.card {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: var(--gp-card-shadow);
}

/* Stacked state (mobile or no JS): force full width, override inline sizing. */
.pf-stage:not(.is-canvas) .card {
	width: 100% !important;
	height: auto !important;
}

/* Drag handle hidden until the canvas is active. */
.card__drag {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	padding: 4px;
	border: 0;
	background: none;
	cursor: grab;
	touch-action: none;
}
.card__drag:active {
	cursor: grabbing;
}

.card__scroll {
	position: relative;
}

.card__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 4px 8px 8px;
}

.card__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding-top: 4px;
}
.card__label {
	font-size: 10px;
	font-weight: 300;
	line-height: 1;
	color: var(--gp-muted);
}
.card__actions {
	display: flex;
	align-items: center;
	gap: 6px;
}
.card__back {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: opacity 0.15s;
}
.card__back:hover {
	opacity: 0.6;
}

/* ---- Card content: let WordPress core block styles apply ---------------
   The flex `gap` on .card__content controls the vertical rhythm, so we only
   neutralise blocks' own stray margins (no !important) — every other core
   block style, colour/typography option and custom class still works, and
   per-block overrides set in the editor win over these base defaults. */
.card__content > * {
	margin-block: 0;
}
.card__content :where(h1, h2, h3, h4, h5, h6) {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.1;
	color: var(--gp-ink);
}
.card__content :where(p, li) {
	font-size: 13px;
	font-weight: 300;
	line-height: 1.3;
	color: var(--gp-ink);
}
.card__content :where(figure, .wp-block-image) {
	margin: 0;
}
.card__content :where(.wp-block-image) img {
	display: block;
	width: 100%;
	height: auto;
}
/* Plain links get the design's wavy underline; button blocks keep their own. */
.card__content a:not(.wp-block-button__link):not(.wp-element-button) {
	color: inherit;
	text-decoration: underline wavy 1px;
	text-underline-position: from-font;
}

/* ---- ENHANCED: draggable canvas (JS adds .is-canvas on desktop) -------- */
.pf-stage.is-canvas .pf-cards {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
}
.pf-stage.is-canvas .card {
	position: absolute;
	/* width/height come from the inline styles set by the block */
}
.pf-stage.is-canvas .card__drag {
	display: flex;
}
.pf-stage.is-canvas .card__scroll {
	position: absolute;
	inset: 0;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
}
.pf-stage.is-canvas .card__scroll::-webkit-scrollbar {
	display: none;
}
.pf-stage.is-canvas .card__content {
	min-height: 100%;
}
.pf-stage.is-canvas .card__topbar {
	position: sticky;
	top: 0;
	z-index: 1;
}

/* ---- Front-end resize handle (canvas only) ----------------------------- */
.card__resize {
	display: none;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 18px;
	height: 18px;
	z-index: 3;
	cursor: nwse-resize;
	touch-action: none;
	background:
		linear-gradient(
			135deg,
			transparent 0 50%,
			rgba(16, 16, 16, 0.35) 50% 60%,
			transparent 60% 72%,
			rgba(16, 16, 16, 0.35) 72% 82%,
			transparent 82%
		);
}
.pf-stage.is-canvas .card__resize {
	display: block;
}

/* ---- Normal pages (page.php / index.php): standard WP layout ----------- */
.pf-page {
	min-height: 100vh;
}
.pf-page__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 96px 24px 64px;
}
.pf-page__title {
	margin: 0 0 24px;
}
/* Constrained-layout helper so align-wide / align-full behave on pages. */
.pf-page__inner.is-layout-constrained > * {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.pf-page__inner.is-layout-constrained > .alignwide {
	max-width: 1100px;
}
.pf-page__inner.is-layout-constrained > .alignfull {
	max-width: none;
}

/* Mobile placeholder image height cap. */
@media (max-width: 1023px) {
	.card__content img {
		max-height: 60vw;
		object-fit: cover;
	}
}