/*
 * Contact page — page-contact-us-2.php + inc/contact-page.php.
 *
 * Built on base.css's shared tokens, section rhythm, button and eyebrow system
 * rather than a local scale, so it reads as the same site as the about and
 * catalogue pages. The form component itself (`.psg-contact-form*`) is NOT here
 * — it lives in components.css, shared with the about page's contact section,
 * so the two cannot drift apart.
 *
 * Replaces a stored Elementor layout whose problems were structural: an English
 * heading, sub-headings competing with the page title, cards floating unaligned
 * in a wide empty band, and an empty form card. The layout below answers those
 * directly — three scannable ways to make contact, then the form as the page's
 * primary action with supporting detail beside it.
 *
 * The eyebrow/title/lede block this page opened with was removed on request in
 * round 199; the method cards now lead.
 */

.site-main--contact{padding-bottom:clamp(3rem,6vw,5rem)}

/* ── Method cards ──────────────────────────────────────────────────────── */
/* Now the first thing on the page — the eyebrow/title/lede block above it was
   removed on request, so this block carries the top spacing it used to get. */
.psg-contact-methods{padding-block:clamp(2rem,4vw,3rem) clamp(2rem,4vw,3rem)}
.psg-contact-methods__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--psg-space-4)}
.psg-contact-method{
	display:grid;
	/* The icon holds its own column so the label, value and note all align on
	   one left edge down the card, instead of the value hanging under the icon. */
	grid-template-columns:auto 1fr;
	grid-template-areas:"icon label" "icon value" "icon note";
	column-gap:var(--psg-space-4);row-gap:.15rem;
	align-content:start;
	padding:var(--psg-space-5);
	background:var(--psg-paper);
	border:1px solid var(--psg-line);
	border-radius:var(--psg-radius);
	text-decoration:none;
	transition:border-color .2s var(--psg-ease),box-shadow .2s var(--psg-ease),transform .2s var(--psg-ease);
}
a.psg-contact-method:hover{border-color:var(--psg-forest);box-shadow:var(--psg-shadow);transform:translateY(-2px)}
.psg-contact-method__icon{grid-area:icon;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--psg-sand);color:var(--psg-forest);align-self:start}
.psg-contact-method__label{grid-area:label;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--psg-copy)}
.psg-contact-method__value{grid-area:value;font-size:1rem;font-weight:600;color:var(--psg-ink);overflow-wrap:anywhere}
.psg-contact-method__note{grid-area:note;font-size:.8125rem;color:var(--psg-copy)}
/* The showroom card is information, not an action — no hover, no pointer. */
.psg-contact-method--static{cursor:default}

/* ── Form + aside ──────────────────────────────────────────────────────── */
/*
 * The SAME three tracks and the SAME gutter as the method cards above, with the
 * form spanning two of them. That is what makes the edges line up rather than
 * nearly line up: the old `1.35fr .65fr` with its own wider gutter left the
 * form's right edge 17px short of the middle card's, and the aside's left edge
 * 23px inside the third card's — close enough to read as a mistake, which it
 * was. Sharing the track definition means they cannot drift again at any
 * viewport width, because both grids are solving the same equation.
 *
 * `align-items` is left at its default (stretch), not `start`: the aside is now
 * as tall as the form, so the two columns finish on one line instead of the
 * right-hand stack ending 109px early.
 */
.psg-contact-main__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--psg-space-4)}
.psg-contact-main__form{grid-column:span 2}
.psg-contact-main__title{margin:0 0 var(--psg-space-5);font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
.psg-contact-main__form{background:var(--psg-paper);border:1px solid var(--psg-line);border-radius:var(--psg-radius-lg);padding:clamp(1.5rem,3vw,2.5rem)}
/* Name and e-mail share a row — they are short, and pairing them keeps the
   form from reading as a long column of identical boxes. */
.psg-contact-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--psg-space-4)}

.psg-contact-aside{display:flex;flex-direction:column;gap:var(--psg-space-4)}
.psg-contact-card{padding:var(--psg-space-5);border:1px solid var(--psg-line);border-radius:var(--psg-radius);background:var(--psg-paper)}
.psg-contact-card__title{margin:0 0 var(--psg-space-3);font-size:1.0625rem}
.psg-contact-card__address{color:var(--psg-copy);font-size:.9375rem;line-height:1.7}
.psg-contact-card__address p{margin:0}
.psg-contact-card__note{margin:var(--psg-space-4) 0 0;padding-top:var(--psg-space-4);border-top:1px solid var(--psg-line);color:var(--psg-copy);font-size:.875rem}
/*
 * The accent card takes up whatever height the form leaves over, so the column
 * ends level with it. Its button is pushed to the bottom edge rather than
 * floating in the middle of a stretched box — the extra height then reads as a
 * deliberately taller card instead of a gap someone forgot to close.
 */
.psg-contact-card--accent{background:var(--psg-forest);border-color:var(--psg-forest);color:#fff;flex:1;display:flex;flex-direction:column}
.psg-contact-card--accent .psg-contact-card__title{color:#fff}
.psg-contact-card--accent p{margin:0 0 var(--psg-space-4);color:rgba(255,255,255,.9);font-size:.9375rem}
/* align-self so the button keeps its own width in a stretch-aligned column. */
.psg-contact-card--accent .psg-button{margin-top:auto;align-self:flex-start}

@media(max-width:1024px){
	/* Single column: the span has to be reset too, or it creates an implicit
	   second track and the aside drops into a phantom column beside it. */
	.psg-contact-main__grid{grid-template-columns:1fr}
	.psg-contact-main__form{grid-column:auto}
	.psg-contact-card--accent{flex:0 1 auto}
}
@media(max-width:768px){
	.psg-contact-methods__grid{grid-template-columns:1fr}
	.psg-contact-form__row{grid-template-columns:1fr}
	/* Stacked, the icon column costs horizontal room the value needs — an
	   e-mail address is the longest string on the card. */
	.psg-contact-method{grid-template-columns:1fr;grid-template-areas:"icon" "label" "value" "note";row-gap:.2rem}
	.psg-contact-method__icon{margin-bottom:var(--psg-space-2)}
}