/*
 * Atria Travel Theme — assets/css/plan-your-trip.css
 *
 * Styles for the Plan Your Trip enquiry page.
 * BEM prefix: pyt-
 * Loaded only on the page with slug: plan-your-trip
 *
 * Design tokens (same palette as the rest of the site):
 *   #1A1715  ink / dark
 *   #0E0C0B  darkest bg
 *   #B8915A  gold
 *   #C9A86A  gold-light
 *   #8a6a38  gold-dark
 *   #F7F1E7  cream
 *   #F5EFE6  body bg
 *   #EFE7D9  sand
 *   #5A5048  body text
 *   #3A332D  mid text
 */

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */

.pyt-hero {
	position:   relative;
	background: #0E0C0B;
	color:      #F7F1E7;
	overflow:   hidden;
}

.pyt-hero__gradient {
	position:       absolute;
	inset:          0;
	background:     linear-gradient( 90deg, rgba(14,12,11,.92) 0%, rgba(14,12,11,.6) 70%, rgba(14,12,11,.4) 100% );
	pointer-events: none;
	z-index:        0;
}

.pyt-hero__content {
	position:   relative;
	z-index:    1;
	max-width:  1320px;
	margin:     0 auto;
	padding:    clamp(48px,6vw,84px) clamp(20px,5vw,72px);
}

.pyt-hero__eyebrow {
	margin:         0 0 16px;
	font-size:      12px;
	font-weight:    500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color:          #C9A86A;
}

.pyt-hero__title {
	margin:      0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size:   clamp(38px,5.4vw,72px);
	line-height: 1.03;
	color:       #F7F1E7;
	max-width:   16ch;
}

.pyt-hero__sub {
	margin:      20px 0 0;
	font-size:   clamp(15px,1.4vw,18px);
	line-height: 1.7;
	color:       rgba(247,241,231,.82);
	max-width:   54ch;
	font-weight: 300;
}

/* ══════════════════════════════════════════════════════════════
   TWO-COLUMN LAYOUT
   ══════════════════════════════════════════════════════════════ */

.pyt-layout {
	background: #F5EFE6;
}

.pyt-inner {
	max-width:             1320px;
	margin:                0 auto;
	padding:               clamp(48px,6vw,88px) clamp(20px,5vw,72px);
	display:               grid;
	grid-template-columns: repeat( auto-fit, minmax(300px,1fr) );
	gap:                   clamp(36px,5vw,72px);
	align-items:           start;
}

/* ══════════════════════════════════════════════════════════════
   ASIDE — How It Works
   ══════════════════════════════════════════════════════════════ */

.pyt-aside {
	order: 0; /* left column on desktop */
}

.pyt-aside__eyebrow {
	margin:         0 0 14px;
	font-size:      12px;
	font-weight:    500;
	letter-spacing: .26em;
	text-transform: uppercase;
	color:          #B8915A;
}

.pyt-aside__heading {
	margin:      0 0 32px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size:   clamp(28px,3.4vw,40px);
	line-height: 1.1;
	color:       #1A1715;
}

/* Steps */

.pyt-steps {
	display:        flex;
	flex-direction: column;
	gap:            26px;
}

.pyt-step {
	display:     flex;
	gap:         18px;
	align-items: flex-start;
}

.pyt-step__num {
	flex:            none;
	width:           38px;
	height:          38px;
	border:          1px solid #B8915A;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-family:     'Cormorant Garamond', serif;
	font-size:       18px;
	color:           #8a6a38;
}

.pyt-step__body {
	flex: 1;
}

.pyt-step__title {
	margin:      0 0 5px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size:   20px;
	color:       #1A1715;
}

.pyt-step__text {
	margin:      0;
	font-size:   14.5px;
	line-height: 1.65;
	color:       #5A5048;
	font-weight: 300;
}

/* WhatsApp box */

.pyt-aside__wa-box {
	margin-top: 36px;
	padding:    24px;
	background: #EFE7D9;
	border:     1px solid rgba(26,23,21,.08);
}

.pyt-aside__wa-text {
	margin:      0 0 14px;
	font-size:   14.5px;
	line-height: 1.6;
	color:       #3A332D;
}

.pyt-wa-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             10px;
	text-decoration: none;
	background:      #1f8a4c;
	color:           #fff;
	padding:         13px 22px;
	border-radius:   999px;
	font-size:       12.5px;
	font-weight:     600;
	letter-spacing:  .04em;
	transition:      background .2s;
}

.pyt-wa-btn:hover,
.pyt-wa-btn:focus-visible {
	background: #1b7a43;
}

/* ══════════════════════════════════════════════════════════════
   FORM CARD
   ══════════════════════════════════════════════════════════════ */

.pyt-form-card {
	order:      1; /* right column on desktop */
	background: #fff;
	border:     1px solid rgba(26,23,21,.1);
	padding:    clamp(28px,3.5vw,52px);
}

.pyt-form-card__header {
	margin-bottom:  28px;
	padding-bottom: 20px;
	border-bottom:  1px solid rgba(26,23,21,.1);
}

.pyt-form-card__title {
	margin:      0 0 6px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size:   clamp(24px,2.8vw,36px);
	line-height: 1.1;
	color:       #1A1715;
}

.pyt-form-card__sub {
	margin:      0;
	font-size:   13px;
	color:       #7a6f62;
	font-weight: 300;
}

.pyt-form-card__no-plugin {
	font-size:  14px;
	color:      #8a6a38;
	padding:    16px;
	border:     1px solid #E8DFCF;
	background: #F7F1E7;
}

/* ── Reset enquiry-wrap inline styles inside the form card ──── */
/*
 * render_form_html() applies inline styles to .atria-enquiry-wrap
 * (margin-block-start, padding-block-start, border-top). Those make
 * sense when the form is a sub-section of a product page, but here
 * the card IS the container, so we clear them with !important.
 */
.pyt-form-card .atria-enquiry-wrap {
	margin-block-start:  0 !important;
	padding-block-start: 0 !important;
	border-top:          none !important;
}

/* Hide the generic "Send an enquiry" eyebrow — card has its own title */
.pyt-form-card .atria-enquiry-wrap > .eyebrow {
	display: none;
}

/* ── Form field base styles ──────────────────────────────────── */

.pyt-form-card .atria-form__field {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	margin-bottom:  22px;
}

.pyt-form-card .atria-form__label {
	font-size:      12px;
	font-weight:    600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          #5A5048;
}

.pyt-form-card .atria-form__req {
	color: #B8915A;
}

.pyt-form-card .atria-form__input,
.pyt-form-card .atria-form__select,
.pyt-form-card .atria-form__textarea {
	font-family:  'Jost', sans-serif;
	font-size:    15px;
	color:        #1A1715;
	padding:      14px 16px;
	border:       1px solid rgba(26,23,21,.2);
	background:   #FBF9F5;
	outline:      none;
	border-radius: 0;
	width:         100%;
	box-sizing:    border-box;
	transition:    border-color .18s;
}

/* Custom select arrow */
.pyt-form-card .atria-form__select {
	appearance:          none;
	-webkit-appearance:  none;
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A5048' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 16px center;
	padding-right:       40px;
	cursor:              pointer;
}

.pyt-form-card .atria-form__input::placeholder,
.pyt-form-card .atria-form__textarea::placeholder {
	color: #a89b88;
}

.pyt-form-card .atria-form__input:focus,
.pyt-form-card .atria-form__select:focus,
.pyt-form-card .atria-form__textarea:focus {
	border-color: #B8915A;
}

.pyt-form-card .atria-form__textarea {
	resize:      vertical;
	line-height: 1.6;
}

/* Error states */

.pyt-form-card .atria-form__field--error .atria-form__input,
.pyt-form-card .atria-form__field--error .atria-form__select,
.pyt-form-card .atria-form__field--error .atria-form__textarea {
	border-color: #c0392b;
}

.pyt-form-card .atria-form__error {
	font-size: 13px;
	color:     #c0392b;
}

.pyt-form-card .atria-form__summary-error {
	margin-bottom: 20px;
	padding:       12px 16px;
	background:    #fdf3f2;
	border:        1px solid #f4c2be;
	font-size:     13.5px;
	color:         #c0392b;
}

/* Honeypot — visually hidden, not just display:none, so screen readers also skip */
.pyt-form-card .atria-hp {
	position:   absolute !important;
	width:      1px !important;
	height:     1px !important;
	overflow:   hidden !important;
	clip:       rect(0,0,0,0) !important;
	white-space: nowrap !important;
}

/* Submit button */

.pyt-form-card .atria-form__submit {
	display:         inline-flex !important;
	align-items:     center;
	gap:             10px;
	background:      #B8915A;
	color:           #1A1715;
	border:          none;
	cursor:          pointer;
	padding:         17px 38px;
	font-family:     'Jost', sans-serif;
	font-size:       12.5px;
	font-weight:     600;
	letter-spacing:  .16em;
	text-transform:  uppercase;
	border-radius:   0;
	margin-top:      8px;
	width:           auto !important;
	transition:      background .2s;
}

.pyt-form-card .atria-form__submit:hover,
.pyt-form-card .atria-form__submit:focus-visible {
	background: #C9A86A;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — aside stacks below form
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	.pyt-aside {
		order: 2;
	}

	.pyt-form-card {
		order: 1;
	}
}