/*!
 * Component: Get in touch hub (.ghub)
 *
 * Topic 30 CORR-WP5 — styles inc/components/get-in-touch-hub.php, the
 * two-card hub that replaces the home "Get in touch!" band's GF contact
 * form. Section 5 of the design handoff's corrections.css (design_handoff_
 * mystwood_site/design-corrections/corrections.css) is reproduced verbatim
 * below, with one adaptation: the handoff's `.mw-newsletter-form` selector
 * targeted the theme's pre-Topic-28 kit-handler newsletter markup, which no
 * longer renders here — this component calls the Gravity Forms newsletter
 * form directly, so the equivalent rule targets GF's own `.gform_wrapper`
 * container instead (same intent: push the form to the bottom of the flex
 * card via margin-top: auto).
 *
 * Also carries this WP's own band-wrapper rules (`.mw-section--get-in-
 * touch`) — a new front-page-only band class, NOT part of the
 * `inc/sections/*` registry, introduced so the hub gets its own correctly-
 * centered headline + intro from first render (see front-page.php item 5
 * for why this avoids reusing `.mw-section--form`, which centers its
 * headline but not its intro on studio-dark bands and would have required
 * an out-of-scope fix in assets/css/sections/_studio.css).
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 30 CORR-WP5
 */

/* -------------------------------------------------------------------------
 * Band wrapper — front-page-only `.mw-section--get-in-touch` (see
 * front-page.php section 7). Mirrors the `.mw-section--form` wrapper
 * contract (padding-block / .mw-section__inner max-width+centering) but
 * centers BOTH the headline and the intro together, so no split-centering
 * offset is ever introduced.
 * ----------------------------------------------------------------------- */
.mw-section--get-in-touch {
	padding-block: clamp(2rem, 6vw, var(--mw-space-section, 120px));
}

.mw-section--get-in-touch .mw-section__inner {
	max-width: var(--mw-content-width, 72rem);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.mw-section--get-in-touch .mw-section__headline {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: clamp(1.5rem, 3vw, 2.625rem);
	line-height: 1.2;
	margin-block: 0 var(--mw-space-headline-to-paragraph, 24px);
	text-align: center;
}

.mw-section--get-in-touch .mw-section__intro {
	font-size: 1rem;
	line-height: 1.5;
	max-width: 44rem;
	margin-inline: auto;
	margin-block-end: 0;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * corrections.css §5 — "GET IN TOUCH" HUB (verbatim, see file docblock for
 * the one adaptation).
 * ----------------------------------------------------------------------- */
.ghub {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin: 2.25rem auto 0;
	max-width: 900px;
	text-align: left;
}

.ghub__card {
	background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
	border: 1px solid var(--mw-border-hairline, rgba(255, 255, 255, 0.12));
	border-radius: var(--mw-radius-soft, 8px);
	padding: clamp(1.4rem, 2.6vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.ghub__title {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: 1.4rem;
	margin: 0;
	color: #fff;
}

.ghub__lead {
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(250, 248, 255, .78);
	margin: 0;
}

.ghub__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: .15rem;
}

.ghub__social {
	margin: .1rem 0 .35rem;
}

.ghub .gform_wrapper {
	margin-top: auto;
}

.ghub--stack {
	grid-template-columns: 1fr;
	max-width: none;
	margin-top: 1.25rem;
} /* when nested in a split column (Contact page) */

@media (max-width: 720px) {
	.ghub {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Social row (.ghub__social) — list/icon treatment. Not covered by the
 * handoff's §5 block (which only sets outer margin); mirrors the footer's
 * existing `.site-footer__social` icon-row treatment (assets/css/
 * components/_footer.css) so the same 5-channel row reads consistently
 * wherever it renders.
 * ----------------------------------------------------------------------- */
.ghub__social {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.ghub__social li {
	margin: 0;
	list-style: none;
}

.ghub__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ghub__social a:hover,
.ghub__social a:focus-visible {
	background: var(--mw-color-primary, #6765E8);
	color: #fff;
	transform: translateY(-2px);
}

.ghub__social a:focus-visible {
	outline: 2px solid var(--mw-color-primary-glow, #A8A7FF);
	outline-offset: 2px;
}

.ghub__social svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

/* -------------------------------------------------------------------------
 * Disabled control (Discord "Coming soon") — REQUIRED scoped rule. The
 * header's disabled-CTA grey (.site-header__cta[data-disabled], see
 * assets/css/components/_header.css) is scoped to `.site-header__cta` and
 * does NOT reach `.ghub`; without this rule the span renders as a live-
 * looking violet `.mw-btn--primary` pill. Matches the header's visual
 * treatment (desaturate + dim + disabled cursor).
 * ----------------------------------------------------------------------- */
.ghub [data-disabled="true"] {
	background: var(--mw-color-text-secondary, #B8B4DA);
	color: rgba(11, 10, 46, 0.65);
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
	filter: grayscale(0.85);
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * Compact in-hub GF newsletter restyle — layers ON TOP of assets/css/
 * gravity-forms.css (loads earlier: pre-enqueued on the `wp` hook for the
 * sitewide Newsletter form, before this component CSS enqueues on
 * `wp_enqueue_scripts`). Scoped strictly inside `.ghub` — tighter spacing +
 * smaller label scale for the card context only; zero global GF overrides.
 * ----------------------------------------------------------------------- */
.ghub .gform_wrapper.gform-theme .gform_fields {
	row-gap: 0.85rem;
}

.ghub .gform_wrapper.gform-theme .gfield_label {
	margin-block-end: 0.3rem;
	font-size: 0.9rem;
}

.ghub .gform_wrapper.gform-theme input[type="text"],
.ghub .gform_wrapper.gform-theme input[type="email"],
.ghub .gform_wrapper.gform-theme input[type="tel"] {
	padding-block: 0.65rem;
	padding-inline: 0.9rem;
	font-size: 0.95rem;
}

.ghub .gform_wrapper.gform-theme .gform_footer,
.ghub .gform_wrapper.gform-theme .gform_page_footer {
	margin-top: 0.75rem;
	padding: 0;
}

/* Submit button — assets/css/gravity-forms.css already owns this at (0,7,1)
 * specificity (its own docblock explains why: mirrors GF framework's
 * (0,6,1) compound + .gform_footer). Repeating that exact compound here
 * with the `.ghub` ancestor prepended is the only way to win the cascade
 * without `!important`; a bare `.gform_button` rule at lower specificity
 * would silently lose. */
.ghub .gform-theme--framework.gform-theme.gform_wrapper .gform_footer input[type="submit"].button.gform_button,
.ghub .gform-theme--framework.gform-theme.gform_wrapper .gform_page_footer input[type="submit"].button.gform_button,
.ghub .gform-theme--framework.gform-theme.gform_wrapper .gform_footer button.gform_button,
.ghub .gform-theme--framework.gform-theme.gform_wrapper .gform_page_footer button.gform_button {
	padding: 0.65rem 1.3rem;
	font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
 * House rule (Topic 30 deep-review fold): every transition freezes under
 * prefers-reduced-motion. The social icons' hover lift is this component's
 * only motion — parity with the feature cards' freeze (_card-grid.css).
 * ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ghub__social a {
		transition: none;
	}

	.ghub__social a:hover,
	.ghub__social a:focus-visible {
		transform: none;
	}
}