/**
 * WSE "Plan your trip" sidebar — route-scoped presentation (Step 7 Batch 6B,
 * Checkpoint 3).
 *
 * The theme REGISTERS the `wse-plan-sidebar` style handle but never enqueues it;
 * the plugin's `wse/plan-your-trip` block enqueues it ONLY when the sidebar
 * actually renders (singular standard post, flag on, not hidden). So this file
 * loads only where the panel exists — never on Pages/products/archives/home/etc.
 *
 * Layered (@layer wse.components) + tokenised, no !important (ADR-06). Reuses the
 * approved booking-column geometry (--wse-col-booking / --wse-col-booking-narrow /
 * --wse-gap-col) and the unified 1280 rail — no new prose measure, no new global
 * design system. The official SafetyWing widget is never recoloured or filtered.
 *
 * The ONE marked unlayered section at the end overrides UNLAYERED author CSS,
 * where a layered rule silently loses (same collision mechanics documented in
 * base.css / content.css / woocommerce.css):
 *   (1) WordPress's `:where(.is-layout-flow) > *` child margin, which otherwise
 *       lands on the panel grid item and pushes it down its cell; and
 *   (2) the plugin's own unlayered search.css (blue button, hard #fff card),
 *       reskinned to WSE tokens inside the panel only.
 */

@layer wse.components {

	/* ── Two-column split: Article + planning panel ───────────────────────
	   Single column by default (also the fallback for engines without :has()).
	   The split turns on ONLY when the plugin block actually rendered
	   .wse-planpanel AND the viewport is ≥1024 — so an empty block (no panel)
	   leaves the Article at full width with no empty column, and the layout
	   stacks below 1024 (Article first in source + mobile order). */
	.wse-article-layout { display: block; }

	@media (min-width: 1024px) {
		.wse-article-layout:has(.wse-planpanel) {
			display: grid;
			grid-template-columns: minmax(0, 1fr) var(--wse-col-booking-narrow);
			gap: var(--wse-gap-col);
			align-items: start;
		}
	}

	@media (min-width: 1280px) {
		.wse-article-layout:has(.wse-planpanel) {
			grid-template-columns: minmax(0, 1fr) var(--wse-col-booking);
		}
	}

	/* ── Panel shell ──────────────────────────────────────────────────────
	   Natural height only — no max-height, no overflow, no internal scrollbar
	   (requirement). min-width:0 so a long unbroken string never forces the
	   grid track wider than its column. Stacked spacing below; in the grid the
	   track `gap` owns spacing (the stacked margin is reset unlayered below). */
	.wse-planpanel {
		min-width: 0;
		margin-block-start: 2rem;
		font-size: 0.95rem;
	}

	.pt-head { margin: 0 0 1rem; }
	.pt-title { margin: 0 0 0.35rem; font-size: 1.15rem; }
	.pt-disclosure {
		margin: 0;
		color: var(--wse-text-secondary);
		font-size: 0.78rem;
		line-height: 1.5;
	}

	.pt-stack { display: flex; flex-direction: column; gap: 1rem; }

	/* ── Module card ──────────────────────────────────────────────────────── */
	.pt-module {
		background: var(--wse-card);
		border: 1px solid var(--wse-line-soft);
		border-radius: var(--wse-radius);
		padding: 1rem 1.1rem 1.15rem;
	}
	.pt-module--primary { border-color: var(--wse-amber-line); }
	.pt-module__title {
		display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
		margin: 0 0 0.5rem;
		font-size: 1rem;
	}
	.pt-lede {
		margin: 0 0 0.85rem;
		color: var(--wse-text-secondary);
		font-size: 0.86rem;
		line-height: 1.5;
	}
	.pt-aff {
		font-family: var(--wse-font-body);
		font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
		color: var(--wse-teal-text); background: var(--wse-teal-tint);
		border-radius: var(--wse-radius-pill);
		padding: 0.1rem 0.5rem;
	}

	/* ── Buttons — ≥44px targets ─────────────────────────────────────────── */
	.pt-btn {
		display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
		min-height: 44px; padding: 0.6rem 1rem;
		border: 1px solid var(--wse-amber); border-radius: var(--wse-radius-pill);
		background: var(--wse-amber); color: var(--wse-charcoal-deep);
		font: inherit; font-weight: 600; line-height: 1.2;
		text-decoration: none; cursor: pointer;
		transition: background-color 150ms ease, border-color 150ms ease;
	}
	.pt-btn:hover { background: var(--wse-amber-deep); border-color: var(--wse-amber-deep); }
	.pt-btn--secondary { background: var(--wse-card); border-color: var(--wse-line); color: var(--wse-ink); }
	.pt-btn--secondary:hover { background: var(--wse-sand); border-color: var(--wse-amber-line); }

	.pt-ext { color: var(--wse-teal-text); text-decoration: none; font-weight: 600; }
	.pt-ext:hover { text-decoration: underline; }
	.pt-ext__ind { font-size: 0.85em; }
	.pt-cta { margin: 0; }

	/* ── Stay22 native GET form ───────────────────────────────────────────── */
	.pt-s22-form { display: flex; flex-direction: column; gap: 0.6rem; }
	.pt-field { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
	.pt-field label { font-weight: 600; font-size: 0.82rem; color: var(--wse-charcoal-deep); }
	.pt-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }
	.pt-input {
		box-sizing: border-box; width: 100%;
		min-height: 44px; padding: 0.5rem 0.6rem;
		border: 1px solid var(--wse-line); border-radius: var(--wse-radius-sm);
		font: inherit; color: var(--wse-ink); background: #ffffff;
	}
	.pt-form-error { margin: 0; color: var(--wse-clay-text); font-size: 0.82rem; font-weight: 600; }
	.pt-form-error[hidden] { display: none; }
	.pt-s22-form .pt-btn { width: 100%; }

	/* Two date fields stack on very narrow panels so nothing overflows at 320px. */
	@media (max-width: 400px) {
		.pt-field-row { grid-template-columns: minmax(0, 1fr); }
	}

	/* ── Footnotes ────────────────────────────────────────────────────────── */
	.pt-footnote { margin: 0.6rem 0 0; color: var(--wse-muted); font-size: 0.72rem; line-height: 1.45; }
	.pt-disclaimer { color: var(--wse-text-secondary); }

	/* ── SafetyWing — the official widget itself is never restyled ─────────── */
	.pt-safetywing .pt-sw-widget { display: flex; flex-direction: column; gap: 0.5rem; }
	.pt-sw-load { width: 100%; }
	.pt-sw-mount { min-width: 0; }
	.pt-sw-mount[hidden] { display: none; }
	.pt-sw-status { margin: 0; color: var(--wse-text-secondary); font-size: 0.8rem; line-height: 1.45; }
	.pt-sw-status:empty { display: none; }
	.pt-sw-fallback { margin: 0; }
	.pt-sw-fallback[hidden] { display: none; }

	/* ── Essentials ─────────────────────────────────────────────────────────── */
	.pt-essentials__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
	.pt-essentials__list li { display: flex; flex-direction: column; gap: 0.15rem; }
	.pt-svc { color: var(--wse-muted); font-size: 0.72rem; }

	/* Screen-reader-only text mirrors the theme utility (plugin uses this class). */
	.wse-planpanel .screen-reader-text {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
	}

	/* Compact tour-search wrapper spacing (the plugin owns the form's own layout;
	   its 200px flex-basis fields wrap to a vertical stack in the narrow panel). */
	.pt-tourform { margin: 0; }

	/* ── Sticky — JS toggles .is-sticky-fit and sets the measured
	   `--wse-plan-sticky-top` (≥1024 only, never when stacked). SHORT panels get a
	   positive top (pinned under the header); TALL panels get a measured NEGATIVE
	   top so the panel bottom catches near the viewport floor and holds while the
	   Article scrolls. `position:sticky` is bounded by the grid area (Article
	   column), so it never reaches the footer or covers the header — no max-height,
	   no overflow, no internal scrollbar; the panel keeps its natural height. The
	   `--wse-sidebar-sticky-top` fallback is the header-offset (short-case) value
	   until the JS publishes the panel-specific measurement. */
	@media (min-width: 1024px) {
		.wse-article-layout:has(.wse-planpanel) .wse-planpanel.is-sticky-fit {
			position: sticky;
			top: var(--wse-plan-sticky-top, var(--wse-sidebar-sticky-top));
		}
	}

	/* ── Focus-visible (strong ring on the light panel surface) ────────────── */
	.wse-planpanel :is(a, button, input, select):focus-visible {
		outline: 2px solid var(--wse-amber-deep);
		outline-offset: 2px;
	}
}

/* WSE:UNLAYERED-OVERRIDES-START
   Two collisions with UNLAYERED author CSS where a layered rule silently loses:
   (1) WordPress emits `:where(.is-layout-flow) > * { margin-block-start: … }`
       UNLAYERED; on .wse-article-layout that margin lands on the panel grid item
       and pushes it down its cell. Zero it ONLY while the grid is active (below
       1024 the same margin usefully separates the stacked panel, so it stays).
   (2) The plugin's own search.css is UNLAYERED (blue #2271b1 button, hard #fff
       card + border + padding). Reskin the REUSED compact form to the WSE tokens
       inside the panel only — the same amber treatment woocommerce.css applies on
       /tour-search/, replicated here because that stylesheet does not load on
       Article routes. No query behaviour is duplicated; presentation only.
   Every selector stays scoped to .wse-article-layout / .pt-* — never a bare
   element. No !important (ADR-06). */

@media (min-width: 1024px) {
	.wse-article-layout:has(.wse-planpanel) > * { margin-block-start: 0; }
}

.pt-tourform .wse-dc-search-form {
	padding: 0;
	border: 0;
	background: transparent;
}
.pt-tourform .wse-dc-compact { gap: 0.6rem; }
.pt-tourform .wse-dc-field { flex: 1 1 100%; margin-bottom: 0; }
.pt-tourform .wse-dc-field > label {
	color: var(--wse-charcoal-deep);
	font-weight: 600;
}
.pt-tourform .wse-dc-search-form select {
	border-color: var(--wse-line);
	border-radius: var(--wse-radius-sm);
	color: var(--wse-ink);
	min-height: 44px;
}
.pt-tourform .wse-dc-submit button {
	width: 100%;
	border: 1px solid var(--wse-amber);
	border-radius: var(--wse-radius-pill);
	background: var(--wse-amber);
	color: var(--wse-charcoal-deep);
	font-weight: 600;
	min-height: 44px;
}
.pt-tourform .wse-dc-submit button:hover {
	background: var(--wse-amber-deep);
	border-color: var(--wse-amber-deep);
}
/* WSE:UNLAYERED-OVERRIDES-END */