/*
 * Winowierna — Kartki z winnicy v2
 * Ported from the HTML/React prototype.
 *
 * Sections:
 *   1. Globals & paper background
 *   2. Scatter layer + sway keyframes
 *   3. Polaroid cards
 *   4. Notebook cards
 *   5. Burgundy hero band
 *   6. Burgundy footer band
 *   7. Newsletter card
 *   8. Kicker + signoff (handwritten) helpers
 *   9. Archive rotated-card grid
 *  10. Dashed separator, quote, image polaroid styles
 *  11. Editor tweaks
 */

/* -------------------------------------------------------------------
 * 1. GLOBALS & PAPER BACKGROUND
 * ------------------------------------------------------------------- */

body.wp-singular,
body.home,
body {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Ghost "notebook lines" across the whole page — very low opacity. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image: repeating-linear-gradient(
		transparent 0 38px,
		rgba(43, 26, 29, 0.04) 38px 39px
	);
}

.wp-site-blocks,
.wp-block-post-content,
.wp-block-template-part {
	position: relative;
	z-index: 1;
}

/* Make italic display headings look like the mocks. */
em { font-style: italic; }

/* -------------------------------------------------------------------
 * 2. SCATTER LAYER + SWAY KEYFRAMES
 * ------------------------------------------------------------------- */

.winowierna-scatter {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.winowierna-scatter .scatter-item {
	position: absolute;
	will-change: transform, opacity;
}

@keyframes winowierna-sway-0 {
	from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	to   { transform: translate(-50%, -50%) rotate(3deg)  scale(1.03); }
}
@keyframes winowierna-sway-1 {
	from { opacity: 1; }
	to   { opacity: 1.4; }
}
@keyframes winowierna-sway-2 {
	from { transform: translate(-50%, -50%) translateY(0); }
	to   { transform: translate(-50%, -50%) translateY(-6px); }
}
@keyframes winowierna-sway-3 {
	from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	to   { transform: translate(-50%, -50%) rotate(2deg)  scale(1.02); }
}

/* Fade in the whole variant once it mounts. */
.wp-site-blocks { animation: winowierna-fade 0.6s ease-out; }
@keyframes winowierna-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------
 * 3. POLAROID CARDS
 * ------------------------------------------------------------------- */

.winowierna-polaroid {
	display: inline-block;
	padding: 14px 14px 44px;
	background: var(--wp--preset--color--paper);
	border: 1px solid rgba(43, 26, 29, 0.07);
	box-shadow:
		0 8px 24px rgba(43, 26, 29, 0.14),
		0 2px 6px rgba(43, 26, 29, 0.09);
	transform: rotate(var(--p-rotate, 0deg));
	position: relative;
	margin: 0;
	transition: transform 0.3s ease;
}

.winowierna-polaroid:hover {
	transform: rotate(calc(var(--p-rotate, 0deg) * 0.3)) translateY(-4px);
}

.winowierna-polaroid__img {
	width: var(--p-size, 240px);
	height: var(--p-size, 240px);
	background: var(--wp--preset--color--base-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.winowierna-polaroid__img svg,
.winowierna-polaroid__img img {
	max-width: 80%;
	max-height: 80%;
	width: auto;
	height: auto;
	color: var(--wp--preset--color--burgundy);
}

.winowierna-polaroid__caption {
	font-family: 'Grape Nuts', cursive;
	font-size: 22px;
	color: var(--wp--preset--color--ink);
	text-align: center;
	margin-top: 10px;
	width: var(--p-size, 240px);
}

.winowierna-polaroid__tape {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%) rotate(-4deg);
	width: 70px;
	height: 20px;
	opacity: 0.55;
}

/* Block-style variant: apply .is-style-polaroid to a Group to wrap it
   in a polaroid frame. */
.wp-block-group.is-style-polaroid {
	padding: 14px 14px 44px;
	background: var(--wp--preset--color--paper);
	border: 1px solid rgba(43, 26, 29, 0.07);
	box-shadow: 0 8px 24px rgba(43, 26, 29, 0.14);
}

.wp-block-image.is-style-polaroid img {
	padding: 14px 14px 40px;
	background: var(--wp--preset--color--paper);
	border: 1px solid rgba(43, 26, 29, 0.07);
	box-shadow: 0 8px 24px rgba(43, 26, 29, 0.14);
}

/* -------------------------------------------------------------------
 * 4. NOTEBOOK CARDS
 * ------------------------------------------------------------------- */

.wp-block-group.is-style-notebook {
	background: var(--wp--preset--color--paper);
	padding: 48px 56px;
	box-shadow: 0 4px 20px rgba(43, 26, 29, 0.09);
	border: 1px solid rgba(43, 26, 29, 0.07);
}

/* -------------------------------------------------------------------
 * 5. BURGUNDY HERO BAND
 * ------------------------------------------------------------------- */

.wp-block-group.is-style-burgundy-band,
.winowierna-burgundy-band {
	background: var(--wp--preset--color--burgundy);
	color: var(--wp--preset--color--base);
	padding: 80px 64px 100px;
	position: relative;
}

.wp-block-group.is-style-burgundy-band :is(h1, h2, h3, h4, p, a),
.winowierna-burgundy-band :is(h1, h2, h3, h4, p, a) {
	color: var(--wp--preset--color--base);
}

.wp-block-group.is-style-burgundy-band .winowierna-kicker,
.winowierna-burgundy-band .winowierna-kicker {
	color: var(--wp--preset--color--terra);
}

/* -------------------------------------------------------------------
 * 6. BURGUNDY FOOTER BAND
 * ------------------------------------------------------------------- */

.winowierna-footer {
	background: var(--wp--preset--color--burgundy);
	color: var(--wp--preset--color--base);
	padding: 60px 48px 40px;
	text-align: center;
}

.winowierna-footer :is(h1, h2, h3, p, a) {
	color: var(--wp--preset--color--base);
}

.winowierna-footer .winowierna-kicker {
	color: var(--wp--preset--color--terra);
}

.winowierna-footer__title {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 40px;
	font-weight: 500;
}
.winowierna-footer__title .dot {
	color: var(--wp--preset--color--terra);
}

.winowierna-footer__meta {
	font-family: 'Grape Nuts', cursive;
	font-size: 24px;
	color: var(--wp--preset--color--terra);
	margin-top: 8px;
}

.winowierna-footer__socials {
	margin-top: 32px;
	display: flex;
	gap: 40px;
	justify-content: center;
	font-family: 'Grape Nuts', cursive;
	font-size: 22px;
}

.winowierna-footer__legal {
	margin-top: 40px;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 12px;
	color: rgba(245, 239, 228, 0.65);
	letter-spacing: 0.05em;
}

/* -------------------------------------------------------------------
 * 7. NEWSLETTER CARD
 * ------------------------------------------------------------------- */

.winowierna-newsletter {
	padding: 64px;
	background: var(--wp--preset--color--paper);
	box-shadow: 0 4px 20px rgba(43, 26, 29, 0.09);
	border: 1px solid rgba(43, 26, 29, 0.07);
	text-align: center;
	position: relative;
	margin-top: 96px;
}

.winowierna-newsletter form {
	display: flex;
	gap: 12px;
	max-width: 440px;
	margin: 32px auto 0;
}

.winowierna-newsletter input[type="email"] {
	flex: 1;
	border: 1px solid rgba(43, 26, 29, 0.2);
	background: var(--wp--preset--color--base);
	padding: 14px 18px;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 15px;
	outline: none;
	color: var(--wp--preset--color--ink);
}

.winowierna-newsletter button {
	border: none;
	background: var(--wp--preset--color--burgundy);
	color: var(--wp--preset--color--base);
	padding: 14px 24px;
	font-family: 'Grape Nuts', cursive;
	font-size: 22px;
	cursor: pointer;
}
.winowierna-newsletter button:hover {
	background: var(--wp--preset--color--burgundy-deep);
}

/* -------------------------------------------------------------------
 * 8. KICKER + SIGNOFF HELPERS
 * ------------------------------------------------------------------- */

.winowierna-kicker {
	display: inline-block;
	font-family: 'Grape Nuts', cursive;
	font-size: 28px;
	color: var(--wp--preset--color--terra);
	transform: rotate(-2deg);
	line-height: 1.2;
}

.winowierna-signoff {
	display: inline-block;
	font-family: 'Grape Nuts', cursive;
	font-size: 32px;
	color: var(--wp--preset--color--terra);
	transform: rotate(-3deg);
}

/* -------------------------------------------------------------------
 * 9. ARCHIVE ROTATED CARD GRID
 * ------------------------------------------------------------------- */

.winowierna-archive-grid .wp-block-post {
	background: var(--wp--preset--color--paper);
	padding: 20px 20px 28px;
	box-shadow: 0 4px 14px rgba(43, 26, 29, 0.09);
	border: 1px solid rgba(43, 26, 29, 0.07);
	transition: transform 0.3s ease;
}

.winowierna-archive-grid .wp-block-post:nth-child(6n+1) { transform: rotate(-2.5deg); margin-top: 0; }
.winowierna-archive-grid .wp-block-post:nth-child(6n+2) { transform: rotate(1.8deg);  margin-top: 48px; }
.winowierna-archive-grid .wp-block-post:nth-child(6n+3) { transform: rotate(-1.2deg); margin-top: 12px; }
.winowierna-archive-grid .wp-block-post:nth-child(6n+4) { transform: rotate(2.2deg);  margin-top: 60px; }
.winowierna-archive-grid .wp-block-post:nth-child(6n+5) { transform: rotate(-1.8deg); margin-top: 20px; }
.winowierna-archive-grid .wp-block-post:nth-child(6n+6) { transform: rotate(0.8deg);  margin-top: 36px; }

.winowierna-archive-grid .wp-block-post:hover {
	transform: rotate(0deg) translateY(-4px);
}

.winowierna-archive-grid .wp-block-post-featured-image {
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--base-2);
	display: block;
	margin-bottom: 16px;
	overflow: hidden;
}
.winowierna-archive-grid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------
 * 10. DASHED SEPARATOR, QUOTE, IMAGE POLAROID STYLES
 * ------------------------------------------------------------------- */

.wp-block-separator.is-style-dashed {
	border: none;
	border-top: 1px dashed rgba(43, 26, 29, 0.2);
	height: 0;
}

.wp-block-quote.is-style-handwritten {
	font-family: 'Grape Nuts', cursive;
	font-size: 30px;
	color: var(--wp--preset--color--terra);
	border-left: 3px solid var(--wp--preset--color--terra);
	padding-left: 28px;
	margin: 40px 0;
	line-height: 1.35;
}

/* -------------------------------------------------------------------
 * 11. EDITOR TWEAKS
 * ------------------------------------------------------------------- */

.editor-styles-wrapper {
	background: var(--wp--preset--color--base);
}

/* Back link on single post */
.winowierna-backlink {
	display: inline-block;
	margin-bottom: 32px;
	font-family: 'Grape Nuts', cursive;
	font-size: 22px;
	color: var(--wp--preset--color--burgundy);
	text-decoration: none;
}
.winowierna-backlink:hover { color: var(--wp--preset--color--terra); }

/* -------------------------------------------------------------------
 * 12. RESPONSIVE
 * ------------------------------------------------------------------- */

@media (max-width: 768px) {
	.wp-block-group.is-style-burgundy-band,
	.winowierna-burgundy-band {
		padding: 48px 24px 64px;
	}
	.winowierna-newsletter { padding: 40px 24px; }
	.winowierna-newsletter form { flex-direction: column; }
	.winowierna-footer { padding: 40px 24px; }
	.winowierna-footer__socials { flex-wrap: wrap; gap: 16px; }
	.winowierna-archive-grid .wp-block-post {
		transform: none !important;
		margin-top: 0 !important;
	}
}