/* ============================================================
   League of Cooking (Limoncella-style) — Contact page (page 197, /contact-2/).

   MEASURED 2026-07-22 against the reference's live Contact page. The saved
   mirror in demos.restored316.com/ contains ONLY the homepage — every inner
   page there is an 80-byte "No Content" stub — so this was measured against
   https://demos.restored316.com/limoncella/contact/ directly.

   What the reference does, and what ours was doing instead:
     - opens on a two-column hero: a fanned stack of tilted photos on the left,
       "Get in touch!" + the intro paragraph on the right.
       Ours: a native Kadence page-title band, then the intro alone.
     - puts the form inside a TINTED PANEL, with Name / Email / Subject on one
       three-across row and the message textarea full width beneath.
       Ours: every field stacked in a single 700px-wide column.
     - accent submit button, left aligned under the textarea.

   Content is untouched: the intro copy and the Kadence form are the page's own.
   The only content change is one [lim_contact_hero] shortcode prepended to the
   page, which supplies the photo stack + heading the reference layout needs.
   ============================================================ */

/* The reference has no page-title band here — the hero heading is the page's
   opening element. Same call already made on the About and Recipe Index pages. */
body.page-id-197 .entry-hero { display: none; }

/* The page's own Kadence row is capped at max-width:700px by per-block inline
   CSS, which is narrower than the reference's 1242px content column and far too
   narrow for a three-across field row. */
.page-id-197 .kb-row-layout-wrap > .kt-row-column-wrap {
	max-width: var(--lim-container-wide) !important;
}

/* ---- Two-column hero ----
   Explicit placement rather than auto-flow: the form markup also contains
   hidden inputs and a honeypot label, and auto-placement would let them
   consume cells. */
.page-id-197 .kt-inside-inner-col {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	grid-template-rows: auto auto auto;
	column-gap: var(--lim-space-12);
	align-items: center;
}
.page-id-197 .lim-contact-hero { grid-column: 1; grid-row: 1 / 3; }
.page-id-197 .lim-contact-title {
	grid-column: 2; grid-row: 1; align-self: end;
	margin: 0 0 var(--lim-space-3);
	font-family: var(--lim-font-heading);
	font-size: 34px; font-weight: 700; line-height: 1.2;
	color: var(--lim-ink-dark);
}
.page-id-197 .kt-inside-inner-col > p.wp-block-paragraph {
	grid-column: 2; grid-row: 2; align-self: start;
	margin: 0;
	font-family: var(--lim-font-body);
	color: var(--lim-ink);
	line-height: 1.8;
}
.page-id-197 .wp-block-kadence-form,
.page-id-197 .kb-form-wrap {
	grid-column: 1 / -1; grid-row: 3;
	margin-top: var(--lim-space-12);
}
.page-id-197 .kt-inside-inner-col > noscript { grid-column: 1 / -1; }

/* ---- Fanned photo stack ----
   Same visual device as the homepage newsletter stack, tuned to the two photos
   the reference uses here. */
.lim-contact-hero__stack {
	position: relative;
	width: 100%; max-width: 380px;
	aspect-ratio: 4 / 3;
	margin: 0 auto;
}
.lim-contact-hero__card {
	position: absolute; top: 0; left: 0;
	width: 62%; aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--lim-surface);
	border: 8px solid var(--lim-surface);
	box-shadow: 0 10px 26px rgba(51, 51, 51, .16);
	transition: transform .3s ease-in-out;
}
.lim-contact-hero__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lim-contact-hero__card--0 { transform: rotate(-7deg); z-index: 2; }
.lim-contact-hero__card--1 { left: auto; right: 0; top: 12%; transform: rotate(5deg); z-index: 1; }
.lim-contact-hero__stack:hover .lim-contact-hero__card--0 { transform: rotate(-9deg) translateY(-4px); }
.lim-contact-hero__stack:hover .lim-contact-hero__card--1 { transform: rotate(7deg) translateY(-4px); }

/* ---- Form panel ---- */
.page-id-197 .kb-form-wrap {
	background: #EDF2ED; /* palette7 pale green — the reference tints this panel */
	border: 1px solid var(--lim-border);
	border-radius: var(--lim-radius-button);
	padding: var(--lim-space-8);
	box-sizing: border-box;
}
.page-id-197 .kb-form {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lim-space-4) var(--lim-space-6);
}
/* nth-of-type counts DIVs only, so the hidden inputs and the honeypot <label>
   can't shift these — the four field wrappers are always divs 1-4. */
.page-id-197 .kb-form > div.kadence-blocks-form-field { margin: 0; }
.page-id-197 .kb-form > div:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.page-id-197 .kb-form > div:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.page-id-197 .kb-form > div:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.page-id-197 .kb-form > div:nth-of-type(4) { grid-column: 1 / -1; grid-row: 2; }
.page-id-197 .kb-form > .kb-submit-field {
	grid-column: 1 / -1; grid-row: 3; justify-self: start;
}
.page-id-197 .kb-form label {
	font-family: var(--lim-font-body);
	font-size: 14px; font-weight: 500;
	color: var(--lim-ink-dark);
	margin-bottom: var(--lim-space-1);
	display: block;
}
.page-id-197 .kb-form .required { color: var(--lim-accent); margin-left: 2px; }
.page-id-197 .kb-form .kb-field {
	width: 100%; box-sizing: border-box;
	background: var(--lim-surface);
	border: 1px solid var(--lim-border) !important;
	border-radius: var(--lim-radius-small);
	font-family: var(--lim-font-body);
	font-size: 15px;
	color: var(--lim-ink-dark);
	padding: 10px 12px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.page-id-197 .kb-form .kb-field:focus {
	border-color: var(--lim-accent) !important;
	box-shadow: 0 0 0 3px rgba(205, 149, 117, .18);
	outline: none;
}
.page-id-197 .kb-form textarea.kb-field { min-height: 170px; resize: vertical; }
.page-id-197 .kb-forms-submit {
	background: var(--lim-accent);
	color: var(--lim-surface);
	border: 0;
	border-radius: var(--lim-radius-button);
	font-family: var(--lim-font-heading);
	font-size: 15px; font-weight: 600; letter-spacing: .3px;
	padding: 12px 34px;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
/* The reference theme's global button rule is a press-in scale, not a lift. */
.page-id-197 .kb-forms-submit:hover { background: var(--lim-accent-hover); transform: scale(.95); }

/* ---- Responsive ---- */
@media (max-width: 1023px) {
	.page-id-197 .kt-inside-inner-col {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		row-gap: var(--lim-space-6);
	}
	.page-id-197 .lim-contact-hero { grid-column: 1; grid-row: 1; }
	.page-id-197 .lim-contact-title { grid-column: 1; grid-row: 2; text-align: center; }
	.page-id-197 .kt-inside-inner-col > p.wp-block-paragraph { grid-column: 1; grid-row: 3; text-align: center; }
	.page-id-197 .wp-block-kadence-form,
	.page-id-197 .kb-form-wrap { grid-column: 1; grid-row: 4; margin-top: var(--lim-space-6); }
	.page-id-197 .kb-form { grid-template-columns: 1fr 1fr; }
	.page-id-197 .kb-form > div:nth-of-type(1) { grid-column: 1; grid-row: 1; }
	.page-id-197 .kb-form > div:nth-of-type(2) { grid-column: 2; grid-row: 1; }
	.page-id-197 .kb-form > div:nth-of-type(3) { grid-column: 1 / -1; grid-row: 2; }
	.page-id-197 .kb-form > div:nth-of-type(4) { grid-column: 1 / -1; grid-row: 3; }
	.page-id-197 .kb-form > .kb-submit-field { grid-row: 4; }
}
@media (max-width: 600px) {
	.page-id-197 .kb-form,
	.page-id-197 .kb-form > div:nth-of-type(1),
	.page-id-197 .kb-form > div:nth-of-type(2) { grid-template-columns: 1fr; grid-column: 1 / -1; }
	.page-id-197 .kb-form-wrap { padding: var(--lim-space-5); }
	.page-id-197 .kb-forms-submit { width: 100%; }
	.lim-contact-hero__stack { max-width: 300px; }
}