/* Shared Contact and Join page refinement.
 * The source page content and handlers remain owned by WordPress/Contact Form 7.
 */

body.skila-contact-page,
body.skila-join-page {
	--skila-public-page-width: 1080px;
	color: var(--skila-text);
}

body.skila-contact-page main#wp--skip-link--target,
body.skila-join-page main#wp--skip-link--target {
	padding-inline: 0 !important;
}

body.skila-contact-page main#wp--skip-link--target > .wp-block-group.alignfull,
body.skila-join-page main#wp--skip-link--target > .wp-block-group.alignfull {
	width: 100% !important;
	max-width: 100% !important;
	margin-inline: 0 !important;
	padding: clamp(28px, 4vw, 52px) clamp(18px, 4vw, 32px) !important;
}

body.skila-contact-page .entry-content,
body.skila-join-page .entry-content {
	width: 100% !important;
	max-width: none !important;
	margin-block-start: 0 !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

body.skila-contact-page .entry-content > .alignfull,
body.skila-join-page .entry-content > .alignfull {
	width: 100% !important;
	max-width: 100% !important;
	margin-block-start: 0 !important;
	margin-inline: 0 !important;
}

body.skila-contact-page .entry-content > .ablocks-block--container--is-root,
body.skila-contact-page .entry-content > .ablocks-block--container--is-root > .ablocks-block-container > .ablocks-block--container {
	padding-inline: 0 !important;
}

body.skila-contact-page .entry-content > p:empty,
body.skila-join-page .entry-content > p:empty {
	display: none !important;
}

/* Contact -------------------------------------------------------------- */
body.skila-contact-page .east-contact-wrapper {
	width: 100% !important;
	max-width: 1040px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	overflow: visible !important;
	color: var(--skila-text) !important;
	font-family: inherit !important;
}

body.skila-contact-page .east-contact-header {
	max-width: 35ch;
	margin: 0 !important;
	text-align: start;
}

body.skila-contact-page .east-contact-header h2 {
	margin: 0 0 12px !important;
	padding-inline-start: 14px;
	border-inline-start: 3px solid var(--skila-accent);
	color: var(--skila-primary) !important;
	font-size: clamp(29px, 2.7vw, 36px) !important;
	font-weight: 700 !important;
	line-height: 1.16 !important;
	letter-spacing: -.018em;
}

body.skila-contact-page .east-contact-header p {
	max-width: 34ch !important;
	margin: 0 !important;
	color: var(--skila-muted) !important;
	font-size: 15px !important;
	line-height: 1.62 !important;
}

body.skila-contact-page .east-contact-container {
	display: grid !important;
	grid-template-columns: minmax(270px, .36fr) minmax(0, .64fr) !important;
	column-gap: clamp(36px, 5vw, 64px) !important;
	align-items: start;
}

body.skila-contact-page .east-contact-details {
	display: grid;
	gap: 22px;
	min-width: 0;
}

body.skila-contact-page .east-contact-info {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 0 !important;
	min-width: 0 !important;
	border-block: 1px solid var(--skila-border);
}

body.skila-contact-page .info-card {
	display: grid !important;
	grid-template-columns: 30px minmax(0, 1fr);
	grid-template-areas: "icon title" "icon value";
	column-gap: 12px;
	align-items: center;
	min-height: 0;
	padding: 15px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--skila-border) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: start !important;
}

body.skila-contact-page .info-card:last-child { border-bottom: 0 !important; }

body.skila-contact-page .icon-box {
	grid-area: icon;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 30px;
	height: 30px;
	margin: 0 !important;
	border-radius: 0;
	background: transparent;
	color: var(--skila-primary) !important;
	font-size: 0 !important;
}

body.skila-contact-page .icon-box img { display: none !important; }

body.skila-contact-page .icon-box::before {
	display: block;
	width: 19px;
	height: 19px;
	background: currentColor;
	content: '';
	-webkit-mask: var(--skila-page-icon) center / contain no-repeat;
	mask: var(--skila-page-icon) center / contain no-repeat;
}

body.skila-contact-page .info-card:nth-child(1) .icon-box,
body.skila-contact-page .icon-box[data-skila-icon="phone"] {
	--skila-page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.46 15.46 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E");
}

body.skila-contact-page .info-card:nth-child(2) .icon-box,
body.skila-contact-page .icon-box[data-skila-icon="email"] {
	--skila-page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
}

body.skila-contact-page .info-card:nth-child(3) .icon-box,
body.skila-contact-page .icon-box[data-skila-icon="location"] {
	--skila-page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5'/%3E%3C/svg%3E");
}

body.skila-contact-page .info-card:nth-child(4) .icon-box,
body.skila-contact-page .icon-box[data-skila-icon="website"] {
	--skila-page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m6.92 6h-3.01a15.7 15.7 0 0 0-1.38-3.56A8.05 8.05 0 0 1 18.92 8M12 4c.83 1.2 1.46 2.54 1.82 4h-3.64C10.54 6.54 11.17 5.2 12 4M4.26 14a7.8 7.8 0 0 1 0-4h3.38a16.5 16.5 0 0 0 0 4zm.82 2h3.01c.3 1.27.77 2.46 1.38 3.56A8.05 8.05 0 0 1 5.08 16M8.09 8H5.08a8.05 8.05 0 0 1 4.39-3.56A15.7 15.7 0 0 0 8.09 8M12 20a13.7 13.7 0 0 1-1.82-4h3.64A13.7 13.7 0 0 1 12 20m2.24-6H9.76a14.4 14.4 0 0 1 0-4h4.48a14.4 14.4 0 0 1 0 4m.29 5.56c.61-1.1 1.08-2.29 1.38-3.56h3.01a8.05 8.05 0 0 1-4.39 3.56M16.36 14a16.5 16.5 0 0 0 0-4h3.38a7.8 7.8 0 0 1 0 4z'/%3E%3C/svg%3E");
}

body.skila-contact-page .info-card h3 {
	grid-area: title;
	margin: 0 0 3px !important;
	color: var(--skila-text) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
}

body.skila-contact-page .info-card p {
	grid-area: value;
	min-width: 0;
	margin: 0 !important;
	color: var(--skila-muted) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	overflow-wrap: anywhere;
}

body.skila-contact-page .info-card a {
	color: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	text-decoration: none !important;
}

body.skila-contact-page .info-card a:hover { color: var(--skila-primary) !important; }

body.skila-contact-page .info-card a:focus-visible,
body.skila-contact-page .east-contact-form :is(input, textarea, button):focus-visible {
	outline: 3px solid var(--skila-focus-ring) !important;
	outline-offset: 2px;
}

body.skila-contact-page .east-contact-form {
	min-width: 0 !important;
	padding: clamp(24px, 3vw, 30px) !important;
	border: 1px solid var(--skila-border) !important;
	border-radius: 12px !important;
	background: color-mix(in srgb, var(--skila-surface-alt) 42%, var(--skila-surface)) !important;
	box-shadow: none !important;
}

body.skila-contact-page .east-contact-form h3 {
	margin: 0 0 22px !important;
	color: var(--skila-primary) !important;
	font-size: clamp(22px, 2.2vw, 28px) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

body.skila-contact-page .east-contact-form .form-group { margin: 0 0 16px !important; }
body.skila-contact-page .east-contact-form .form-group p,
body.skila-contact-page .east-contact-form form > p { margin: 0 !important; }

body.skila-contact-page .east-contact-form label {
	display: inline-block !important;
	margin: 0 0 7px !important;
	color: var(--skila-text) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

body.skila-contact-page .east-contact-form input:not([type="submit"]),
body.skila-contact-page .east-contact-form textarea {
	width: 100% !important;
	min-height: 50px;
	padding: 12px 14px !important;
	border: 1px solid var(--skila-border) !important;
	border-radius: 7px !important;
	background: var(--skila-surface) !important;
	color: var(--skila-text) !important;
	font: inherit !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	transition: border-color .16s ease, box-shadow .16s ease !important;
}

body.skila-contact-page .east-contact-form textarea {
	min-height: 136px;
	resize: vertical;
}

body.skila-contact-page .east-contact-form input:not([type="submit"]):focus,
body.skila-contact-page .east-contact-form textarea:focus {
	border-color: var(--skila-primary) !important;
	box-shadow: 0 0 0 3px var(--skila-focus-ring) !important;
	outline: 0 !important;
}

body.skila-contact-page .east-contact-form .wpcf7-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 48px;
	margin: 2px 0 0 !important;
	padding: 11px 18px !important;
	border: 1px solid var(--skila-primary) !important;
	border-radius: 7px !important;
	background: var(--skila-primary) !important;
	color: var(--skila-on-primary, #fff) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease !important;
}

body.skila-contact-page .east-contact-form .wpcf7-submit:hover {
	border-color: var(--skila-primary-hover) !important;
	background: var(--skila-primary-hover) !important;
}

body.skila-contact-page .skila-contact-help > span {
	display: block;
	margin-bottom: 10px;
	color: var(--skila-primary);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

body.skila-contact-page .skila-contact-help > p {
	margin: 0 0 22px !important;
	color: var(--skila-muted) !important;
	font-size: 15px;
	line-height: 1.7;
}

body.skila-contact-page .skila-contact-help__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 11px 18px;
	border-radius: 8px;
	background: var(--skila-primary);
	color: var(--skila-on-primary, #fff) !important;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none !important;
}

body.skila-contact-page .skila-contact-help__action:hover {
	background: var(--skila-primary-hover);
}

body.skila-contact-page .skila-contact-help__action:focus-visible {
	outline: 3px solid var(--skila-focus-ring) !important;
	outline-offset: 3px;
}

body.skila-contact-page .east-contact-form .wpcf7-not-valid {
	border-color: var(--skila-danger) !important;
}

body.skila-contact-page .east-contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--skila-danger);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

body.skila-contact-page .east-contact-form .wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 12px 14px !important;
	border: 1px solid currentColor !important;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

body.skila-contact-page .east-contact-form form.sent .wpcf7-response-output {
	background: color-mix(in srgb, var(--skila-success) 8%, var(--skila-surface));
	color: var(--skila-success);
}

body.skila-contact-page .east-contact-form form.invalid .wpcf7-response-output,
body.skila-contact-page .east-contact-form form.failed .wpcf7-response-output {
	background: color-mix(in srgb, var(--skila-danger) 7%, var(--skila-surface));
	color: var(--skila-danger);
}

/* Join ----------------------------------------------------------------- */
body.skila-join-page .wp-block-post-title {
	display: block !important;
	width: min(100%, 760px);
	margin: 0 auto clamp(22px, 3vw, 30px) !important;
	color: var(--skila-primary) !important;
	font-size: clamp(30px, 3.4vw, 40px) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: -.02em;
	text-align: center;
}

body.skila-join-page .wp-block-post-title::after {
	display: block;
	width: 36px;
	height: 2px;
	margin: 12px auto 0;
	border-radius: 999px;
	background: var(--skila-accent);
	content: '';
}

body.skila-join-page .ali-cards-wrapper {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: clamp(18px, 2.4vw, 24px) !important;
	width: min(100%, 860px) !important;
	max-width: 860px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

body.skila-join-page .ali-card {
	display: grid !important;
	grid-template-rows: auto auto 1fr auto;
	justify-items: start;
	align-items: start;
	width: 100% !important;
	max-width: none !important;
	min-height: 270px;
	padding: clamp(24px, 2.8vw, 28px) !important;
	border: 1px solid var(--skila-border) !important;
	border-radius: 12px !important;
	background: color-mix(in srgb, var(--skila-primary) 2%, var(--skila-surface)) !important;
	box-shadow: none !important;
	text-align: start;
	transition: border-color .16s ease, background-color .16s ease !important;
}

body.skila-join-page .ali-card:hover {
	border-color: color-mix(in srgb, var(--skila-primary) 22%, var(--skila-border)) !important;
	background: color-mix(in srgb, var(--skila-primary) 3.5%, var(--skila-surface)) !important;
}

body.skila-join-page .ali-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 32px;
	height: 32px;
	margin: 0 0 17px !important;
	border-radius: 0;
	background: transparent;
	color: var(--skila-primary);
	font-size: 0 !important;
}

body.skila-join-page .ali-card-icon img { display: none !important; }

body.skila-join-page .ali-card-icon::before {
	display: block;
	width: 25px;
	height: 25px;
	background: currentColor;
	content: '';
	-webkit-mask: var(--skila-page-icon) center / contain no-repeat;
	mask: var(--skila-page-icon) center / contain no-repeat;
}

body.skila-join-page .ali-card:first-child .ali-card-icon,
body.skila-join-page .ali-card-icon[data-skila-icon="student"] {
	--skila-page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 1 9l4 2.18v6L12 21l7-3.82v-6L21 10v7h2V9zm6.82 6L12 12.72 5.18 9 12 5.28zM17 16l-5 2.73L7 16v-3.73L12 15l5-2.73z'/%3E%3C/svg%3E");
}

body.skila-join-page .ali-card:last-child .ali-card-icon,
body.skila-join-page .ali-card-icon[data-skila-icon="instructor"] {
	--skila-page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-6v2h3v2H7v-2h3v-2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m0 2v10h16V5zm3 2h5v2H7zm0 4h8v2H7zm7-4h3v2h-3z'/%3E%3C/svg%3E");
	background: transparent;
	color: var(--skila-accent);
}

body.skila-join-page .ali-card-title {
	margin: 0 0 10px !important;
	color: var(--skila-text) !important;
	font-size: clamp(20px, 2vw, 23px) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

body.skila-join-page .ali-card-text {
	max-width: 36ch;
	margin: 0 0 22px !important;
	color: var(--skila-muted) !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
}

body.skila-join-page .ali-card-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 174px;
	min-height: 48px;
	padding: 11px 16px !important;
	border: 1px solid var(--skila-primary) !important;
	border-radius: 7px !important;
	background: var(--skila-primary) !important;
	color: var(--skila-on-primary, #fff) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color .16s ease, border-color .16s ease !important;
}

body.skila-join-page .ali-card-btn:hover {
	border-color: var(--skila-primary-hover) !important;
	background: var(--skila-primary-hover) !important;
	color: var(--skila-on-primary, #fff) !important;
}

body.skila-join-page .ali-card-btn:focus-visible {
	outline: 3px solid var(--skila-focus-ring) !important;
	outline-offset: 3px;
}

@media (max-width: 860px) {
	body.skila-contact-page .east-contact-wrapper,
	body.skila-contact-page .east-contact-container {
		grid-template-columns: minmax(0, 1fr) !important;
		max-width: 680px !important;
	}
	body.skila-contact-page .east-contact-container { row-gap: 22px !important; }
	body.skila-contact-page .east-contact-header { max-width: 44ch; }
	body.skila-contact-page .east-contact-info { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 680px) {
	body.skila-contact-page main#wp--skip-link--target > .wp-block-group.alignfull,
	body.skila-join-page main#wp--skip-link--target > .wp-block-group.alignfull {
		padding: 24px 16px 34px !important;
	}

	body.skila-contact-page .east-contact-header p { font-size: 15px !important; }
	body.skila-contact-page .east-contact-details { gap: 19px; }
	body.skila-contact-page .east-contact-form { padding: 21px 18px !important; }
	body.skila-contact-page .info-card { padding: 13px 0 !important; }

	body.skila-join-page .wp-block-post-title { margin-bottom: 24px !important; }
	body.skila-join-page .ali-cards-wrapper {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 16px !important;
		max-width: 540px !important;
	}
	body.skila-join-page .ali-card {
		min-height: 0;
		padding: 22px 20px !important;
	}
	body.skila-join-page .ali-card-icon { margin-bottom: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
	body.skila-contact-page .info-card,
	body.skila-contact-page .east-contact-form *,
	body.skila-join-page .ali-card,
	body.skila-join-page .ali-card-btn {
		transition: none !important;
	}
}