/* =====================================================================
   EXPERIENCE ITALY — PLAN YOUR TRIP
   ---------------------------------------------------------------------
   Loaded only for the "Plan Your Trip" template. A companion column
   (photograph, client quote, three reassurances) sits beside the form
   card on desktop and drops below the form on mobile, so the first
   field is never buried under a screen of persuasion.

   The photographic page header above is the plugin's shared component
   (assets/page-header.css); nothing here styles it. Form control
   styling builds on the global WPForms rules in style.css.
   ===================================================================== */

.pyt {
	background-color: var(--ei-ivory);
	font-family: var(--ei-sans);
	color: #5C534B;
	padding: clamp(48px, 6vw, 84px) 24px clamp(72px, 9vw, 120px);
}

/* ---- layout ----------------------------------------------------------
   The form leads. `pyt-main` is first in the source so it is also first
   on mobile and first for a screen reader; the aside is pulled beside
   it on wide viewports via explicit column placement. */
.pyt-body {
	max-width: var(--ei-content-max, 1180px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: clamp(28px, 4vw, 58px);
	align-items: start;
}

.pyt-main  { grid-column: 1; }
.pyt-aside { grid-column: 2; }

/* Sticky, but only as tall as it needs to be — the panel used to leave
   a long void beside the lower half of a tall form. */
.pyt-aside__sticky {
	position: sticky;
	top: 32px;
}

/* ---- the form card ---------------------------------------------------- */
.pyt-card {
	background-color: #FFFFFF;
	padding: clamp(28px, 4vw, 58px);
	box-shadow: 0 26px 60px -34px rgba(43, 36, 32, 0.35);
}

/* The questionnaire note opens the card rather than floating above it,
   so the card's top edge lines up with the companion column. Set a
   step larger and darker than the form beneath it so it reads as the
   card's opening line rather than as another field label. */
.pyt .pyt-card__note {
	font-family: var(--ei-serif);
	font-style: italic;
	font-size: 19.5px;
	line-height: 1.55;
	color: var(--ei-ink);
	text-align: center;
	max-width: 54ch;
	margin: 0 auto clamp(28px, 3.2vw, 40px);
}

/* ---- companion panel --------------------------------------------------- */
.pyt-aside__fig {
	position: relative;
	isolation: isolate;
	margin: 0 0 26px;
}

.pyt-aside__fig img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: 0 26px 54px -32px rgba(43, 36, 32, 0.55);
}

/* offset terracotta keyline, escaping away from the form */
.pyt-aside__fig::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translate(14px, 14px);
	border: 1px solid rgba(161, 92, 56, 0.4);
	z-index: -1;
}

.pyt-quote {
	margin: 0 0 28px;
	padding: 0;
}

/* Blocksy puts a teal left border on blockquote — override it here or
   it leaks into the testimonial. */
.pyt-quote blockquote {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--ei-serif);
	font-style: italic;
	font-size: 19px;
	line-height: 1.55;
	color: var(--ei-ink);
	quotes: none;
}

.pyt-quote blockquote::before,
.pyt-quote blockquote::after { content: none; }

.pyt-quote figcaption {
	font-family: var(--ei-sans);
	font-size: 12.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #9A8C80;
}

.pyt-promise {
	list-style: none;
	margin: 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(107, 97, 88, 0.2);
}

.pyt-promise li {
	position: relative;
	padding: 0 0 18px 30px;
	font-size: 15px;
	line-height: 1.6;
}

.pyt-promise li:last-child { padding-bottom: 0; }

.pyt-promise li strong {
	display: block;
	font-family: var(--ei-serif);
	font-weight: 500;
	font-size: 17px;
	color: var(--ei-ink);
	margin-bottom: 3px;
}

/* Links inside a promise/point (e.g. "Plan Your Trip") */
.pyt-promise li a {
	color: var(--ei-terracotta);
	text-decoration: none;
	border-bottom: 1px solid rgba(161, 92, 56, 0.4);
	padding-bottom: 1px;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.pyt-promise li a:hover {
	color: var(--ei-terracotta-deep);
	border-bottom-color: var(--ei-terracotta-deep);
}

.pyt-promise li a:focus-visible {
	outline: 2px solid var(--ei-terracotta);
	outline-offset: 3px;
}

/* The hanging dash is drawn as an em-dash glyph rather than a thin box.
   A 1–2px box is rounded to whole device pixels, and since the rounding
   depends on each item's subpixel Y position, identical dashes came out
   at different weights (or vanished entirely) under fractional display
   scaling. A glyph is rasterised by the text engine at a size it
   controls, so every row gets the same mark.

   Matching the title's font-size and line-height puts it on the same
   line box, which also removes the old magic 9px offset. */
.pyt-promise li::before {
	content: "\2014";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--ei-sans);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ei-terracotta);
}

/* ---- form refinements (on top of global WPForms styles) --------------- */
.pyt .wpforms-container { margin: 0; }

.pyt div.wpforms-container-full .wpforms-form .wpforms-field {
	padding-top: 14px;
	padding-bottom: 14px;
}

.pyt div.wpforms-container-full .wpforms-form .wpforms-field-label { margin-bottom: 6px; }

.pyt div.wpforms-container-full .wpforms-form .wpforms-required-label { color: var(--ei-terracotta); }

.pyt div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
	font-size: 12.5px;
	letter-spacing: 0.06em;
	color: #9A8C80;
}

.pyt div.wpforms-container-full .wpforms-form .wpforms-field-description {
	font-family: var(--ei-serif);
	font-style: italic;
	font-size: 14.5px;
	color: #9A8C80;
}

.pyt div.wpforms-container-full .wpforms-form input[type="text"],
.pyt div.wpforms-container-full .wpforms-form input[type="email"],
.pyt div.wpforms-container-full .wpforms-form input[type="tel"],
.pyt div.wpforms-container-full .wpforms-form select,
.pyt div.wpforms-container-full .wpforms-form textarea {
	font-size: 17px;
}

.pyt div.wpforms-container-full .wpforms-form textarea {
	min-height: 140px;
	resize: vertical;
}

/* Selects arrive with the browser's own chevron and box, which fights
   the underline-only text fields either side of them. */
.pyt div.wpforms-container-full .wpforms-form select {
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23A15C38' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
	padding-right: 26px;
	border-radius: 0;
}

/* Checkbox grid: quiet, evenly spaced */
.pyt div.wpforms-container-full .wpforms-form .wpforms-field-checkbox ul li {
	margin-bottom: 10px;
	font-size: 15.5px;
	color: #5C534B;
}

.pyt div.wpforms-container-full .wpforms-form .wpforms-field-checkbox input[type="checkbox"],
.pyt div.wpforms-container-full .wpforms-form .wpforms-field-radio input[type="radio"] {
	accent-color: var(--ei-terracotta);
	width: 16px;
	height: 16px;
}

/* Submit: match the site's button language, full-width and confident */
.pyt div.wpforms-container-full .wpforms-form button[type="submit"] {
	width: 100%;
	margin-top: 14px;
	padding: 20px 36px !important;
	font-size: 15px !important;
	letter-spacing: 0.18em !important;
}

/* The confirmation is styled in form-confirmation.css — it replaces the
   form with the animated composition, and needs WPForms' container to
   carry no fill, border or padding at all. */

/* ---- footnote --------------------------------------------------------- */
.pyt .pyt-footnote {
	margin: 24px 0 0;
	text-align: center;
	font-size: 15px;
	color: #8A7E73;
}

.pyt .pyt-footnote a {
	color: var(--ei-terracotta);
	text-decoration: none;
	border-bottom: 1px solid rgba(161, 92, 56, 0.4);
	padding-bottom: 2px;
}

.pyt .pyt-footnote a:hover { color: var(--ei-terracotta-deep); }

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 980px) {
	/* Single column: the form keeps its lead, the panel follows it. */
	.pyt-body {
		grid-template-columns: minmax(0, 1fr);
		max-width: 780px;
	}

	.pyt-main,
	.pyt-aside { grid-column: 1; }

	.pyt-aside__sticky { position: static; }

	.pyt-aside {
		margin-top: clamp(40px, 6vw, 60px);
		padding-top: clamp(32px, 5vw, 48px);
		border-top: 1px solid rgba(107, 97, 88, 0.2);
	}

	/* Below the form the photograph is decoration, not persuasion —
	   let the words carry it instead. */
	.pyt-aside__fig { display: none; }

	.pyt-quote { text-align: center; max-width: 46ch; margin-inline: auto; }
	.pyt-promise { max-width: 46ch; margin-inline: auto; }
}

@media (max-width: 767px) {
	.pyt div.wpforms-container-full .wpforms-form input[type="text"],
	.pyt div.wpforms-container-full .wpforms-form input[type="email"],
	.pyt div.wpforms-container-full .wpforms-form input[type="tel"],
	.pyt div.wpforms-container-full .wpforms-form select,
	.pyt div.wpforms-container-full .wpforms-form textarea {
		font-size: 16px; /* prevents iOS zoom-on-focus */
	}
}