/**
 * Contact and Partnership (Kontakt, Współpraca): forms, choice grid,
 * file drop zone, map, people, social links, contact details and aside,
 * scope columns.
 *
 * Moved in stage A, step 9, from oferta.css and pages.css; selectors and
 * values unchanged. Loads only on pages with one of its trigger classes
 * (plantworld_conditional_styles() in inc/enqueue.php); every rule here
 * contains one of them.
 *
 * @package plantworld
 */

/* ═══ from oferta.css ═══ */

/* Partnership scope: three columns of links to offer pages. */
.pw-scope-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 32px;
}

.pw-scope-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pw-scope-col__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pw-scope-col__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Single-screen form (Partnership): 2-column field grid, full width for the description, dropzone, consents, button. */
.pw-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.pw-form-grid__full {
	grid-column: 1 / -1;
}

.pw-dropzone--dark {
	border-color: var(--border-field-on-dark);
	color: var(--text-on-dark);
}

.pw-dropzone--dark .pw-body {
	color: var(--text-on-dark);
}

.pw-dropzone--dark .pw-small {
	color: var(--text-on-dark-muted);
}

.pw-contact-aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--hairline-on-dark);
}

/* Full-width form with direct contact below it in one row (Partnership). */
.pw-form-wrap {
	max-width: 960px;
}

.pw-contact-aside--row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 48px;
	margin-top: 16px;
	padding-top: 32px;
}

.pw-contact-aside__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
}

.pw-choice-grid--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pw-form-question {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pw-form-question__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-on-dark-muted);
}

/* Sent state: replaces the form; focus moves to the heading. */
.pw-form-success {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	border: 1px solid var(--hairline-on-dark);
}

.pw-contact-aside__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 18px;
	font-weight: 500;
	color: var(--action-on-dark);
	text-decoration: none;
}

.pw-contact-aside__link:hover {
	color: var(--action-on-dark-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pw-contact-split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 64px;
	align-items: start;
}

.pw-contact-details {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.pw-contact-details dd a[href^="mailto:"] {
	/* 320 px: the column of values is narrower than the address, which then ran off the screen. */
	overflow-wrap: anywhere;
}

.pw-contact-details address {
	font-style: normal;
}

/* Damian, 04.11.2026: two people in a row (Jan, Iga / Dariusz, Tomasz). The list measures itself: the column it stands in is narrow on phones and at 960-1199 px, where the viewport says nothing about the room. */
.pw-persons {
	container-type: inline-size;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pw-person {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
}

/* The cross between the people, in the colour of the lines between the company details above: the left column draws the vertical line, every row but the last the horizontal one. */
.pw-person:nth-child(odd) {
	padding-left: 0;
	border-right: 1px solid var(--hairline-weak);
}

.pw-person:nth-child(even) {
	padding-right: 0;
}

.pw-person:not(:nth-last-child(-n+2)) {
	border-bottom: 1px solid var(--hairline-weak);
}

.pw-person:nth-child(-n+2) {
	padding-top: 0;
}

.pw-person:nth-last-child(-n+2) {
	padding-bottom: 0;
}

/* Too narrow for the photo beside the text: the phone number would break. */
@container (max-width: 459px) {
	.pw-person {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* Exception to zero radius: the person portrait is round (like the review avatar). */
.pw-person__photo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--pw-paper-alt);
	border: 1px solid var(--hairline);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--text-lead-muted);
}

.pw-person__name {
	font-size: 16px;
	font-weight: 600;
	color: var(--pw-ink);
}

.pw-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pw-socials a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--border-field);
	color: var(--action-on-light);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: var(--transition-color);
}

.pw-socials a:hover {
	border-color: var(--action-on-light);
	color: var(--action-on-light-hover);
}

.pw-form-note {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-lead-muted);
}

/* Map: a facade without an iframe until clicked. 21:9, ≤575 16:9. */
.pw-map {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: 48px;
	align-items: center;
}

.pw-map__frame {
	position: relative;
	aspect-ratio: 21 / 9;
	background: var(--pw-paper-alt);
	border: 1px solid var(--hairline);
	overflow: hidden;
}

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

/*
 * A Google Maps embed takes no map styles, so a filter matches the colors: warm paper/stone monochrome.
 * The filter is on the map only (it is not a photo). Map interaction (pan, zoom, "View larger map") works as usual.
 */
.pw-map__embed {
	filter: grayscale(1) sepia(0.28) contrast(0.92) brightness(1.03);
}

.pw-map__facade {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	text-align: center;
}

.pw-map__addr {
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1.2;
	color: var(--pw-ink);
}

.pw-map__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 24px;
}

.pw-form-success--light {
	border-color: var(--hairline);
}

/*
 * Stage G [70]: the contact form has the fill of every other form (one step
 * lighter than its section, --surface-field) – no transparent variant.
 */

@media (max-width: 959px) {

.pw-scope-cols {
		grid-template-columns: minmax(0, 1fr);
	}


	.pw-choice-grid--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}


	.pw-contact-split,
	.pw-map {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}
}

@media (max-width: 575px) {


	.pw-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}


	.pw-choice-grid--5 {
		grid-template-columns: minmax(0, 1fr);
	}


	.pw-form-success {
		padding: 24px;
	}


	.pw-map__frame {
		aspect-ratio: 16 / 9;
	}


	.pw-map__addr {
		font-size: 22px;
	}
}

/* Contact: 4 topic tiles in 2 columns also on phones (after the .pw-choice-grid ≤575 rules). */
@media (max-width: 575px) {


	.pw-choice-grid.pw-choice-grid--2m {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* ═══ from pages.css ═══ */

.pw-dropzone--compact {
	min-height: 96px;
	padding: 16px;
	gap: 8px;
}

.pw-dropzone--compact .pw-small {
	color: var(--text-lead-muted);
	max-width: 420px;
}

/* .pw-dropzone--compact on ink (the Współpraca form). */
.pw-dropzone--dark.pw-dropzone--compact .pw-small {
	color: var(--text-on-dark-muted);
}

/*
 * Scope of the partnership (stage G [51]): three boxes – Projekt,
 * Realizacja, Utrzymanie – one step lighter than the section, the services
 * as filled points with a line between them.
 */
.pw-scope-col {
	padding: 32px;
	background: var(--pw-paper);
}

.pw-scope-col__list {
	gap: 0;
}

.pw-scope-col__list > li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
}

/* In the editor the link sits in the item's own text field: laid out as on the page, so the link is a flex item there too. */
.pw-scope-col__list > li > .block-editor-rich-text__editable {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
}

.pw-scope-col__list > li + li {
	border-top: 1px solid var(--hairline-weak);
}

.pw-scope-col__list > li::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	background: var(--action-fill-on-light);
}

/* Stage G [55]: the partnership form in the middle of the section, as the quote wizards. */
.pw-form-wrap {
	margin-inline: auto;
}

/* Review of 29.10.2026 (Damian): the role sits right under the name in "Z kim rozmawiasz". */
.pw-person .pw-stack--tight {
	gap: 2px;
}

/* Many tiles (the 24 elements of the project wizard, review of 29.10.2026): 4 in a row, 3 on a tablet, 2 on a phone. */
.pw-choice-grid.pw-choice-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 959px) {
	.pw-choice-grid.pw-choice-grid--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.pw-choice-grid.pw-choice-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}