main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--spacing-4xl);
	margin: 5% var(--spacing-4xl);
	align-items: start;

	.info {
		background: var(--background-white);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-3xl);
		padding: var(--spacing-3xl);
		box-shadow: 0 10px 30px var(--shadow-light);

		h1 {
			font-size: var(--font-size-6xl);
			margin-bottom: var(--spacing-md);
			color: var(--text-dark);
		}

		p {
			font-size: var(--font-size-base);
			line-height: var(--line-height-normal);
			color: var(--text-light);
			margin-bottom: 16px;
		}

		.contact-details {
			display: grid;
			gap: var(--spacing-md);
			font-size: var(--font-size-sm);
			color: var(--text);

			p {
				margin: 0;
			}

			a {
				color: var(--text-dark);
				text-decoration: none;
				font-weight: var(--font-weight-semibold);

				&:hover {
					color: var(--accent-hover);
					text-decoration: underline;
				}
			}
		}

		.googlemaps {
			margin-top: var(--spacing-xl);

			iframe {
				width: 100%;
				height: 300px;
				border: none;
				border-radius: var(--radius-lg);
			}
		}
	}

	#contact-form {
		background: var(--background-white);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-3xl);
		padding: var(--spacing-3xl);
		box-shadow: 0 10px 30px var(--shadow-light);

		form {
			display: grid;
			gap: var(--spacing-lg);

			label {
				font-weight: var(--font-weight-semibold);
				color: var(--text-dark);

				span {
					color: var(--accent-hover);
					margin-right: var(--spacing-xs);
					font-size: var(--font-size-4xl);
					user-select: none;
				}
			}

			input,
			textarea {
				width: 100%;
				border: 1px solid var(--border-color-input);
				border-radius: var(--radius-lg);
				padding: var(--spacing-md) var(--spacing-md);
				font-size: var(--font-size-base);
				background: var(--background-light);
				transition:
					border-color var(--transition-fast),
					box-shadow var(--transition-fast);

				&:focus {
					outline: none;
					border-color: var(--accent);
					box-shadow: 0 0 0 3px var(--shadow-accent);
					background: var(--background-white);
				}

				&:focus-visible {
					outline: 2px solid var(--accent);
					outline-offset: 2px;
				}
			}

			textarea {
				resize: vertical;
				min-height: 140px;
			}

			button {
				justify-self: start;
				background-color: var(--accent);
				color: var(--text-dark);
				border: none;
				padding: var(--spacing-md) var(--spacing-lg);
				border-radius: var(--radius-lg);
				font-weight: var(--font-weight-bold);
				cursor: pointer;
				transition:
					transform var(--transition-fast),
					box-shadow var(--transition-fast);

				&:hover {
					transform: translateY(-1px);
					box-shadow: 0 8px 16px var(--shadow-accent-hover);
				}

				&:focus-visible {
					outline: 2px solid var(--accent);
					outline-offset: 2px;
				}
			}
		}
	}
}

@media (max-width: 768px) {
	main {
		grid-template-columns: 1fr;
		margin: var(--spacing-xl) var(--spacing-lg);
		gap: var(--spacing-xl);

		.info {
			padding: var(--spacing-xl);

			h1 {
				font-size: 1.6rem;
			}
		}

		#contact-form {
			padding: var(--spacing-xl);
		}
	}
}

/* Template2-inspired refresh */
main {
	.info,
	#contact-form {
		background: var(--surface-1);
		border: 1px solid var(--edge-soft);
		box-shadow: 0 10px 24px var(--shadow-light);
		position: relative;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4px;
			background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
		}
	}

	.info {
		h1 {
			line-height: 1.2;
		}

		h2 {
			margin: var(--spacing-xl) 0 var(--spacing-sm);
			font-size: var(--font-size-2xl);
			color: var(--text-dark);
			position: relative;
			padding-left: var(--spacing-md);

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4px;
				height: 1.2em;
				border-radius: 2px;
				background: var(--accent);
			}
		}

		.contact-details {
			background: var(--surface-2);
			border: 1px solid var(--edge-soft);
			padding: var(--spacing-lg);
			border-radius: var(--radius-lg);

			strong {
				color: var(--text-dark);
			}
		}
	}

	#contact-form {
		form {
			input,
			textarea {
				background: var(--surface-1);
				border-color: var(--edge-soft);
			}

			button {
				background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
				border: 1px solid var(--accent);
				box-shadow: none;

				&:hover {
					box-shadow: 0 10px 20px var(--accent-glow);
				}
			}
		}
	}
}