/**
 * "הרשמת יועצים" - Figma `1323:10693`, measured 29/09.
 *
 * The panel: 1400 x 844 #F3F3F5, 65 under the title band. The heading Bold 36 at
 * 0.9 and the lead Regular 24, 54 and 90 from the panel's top; the form an 840
 * column 30 under them. Fields 270 wide 15 apart, 71 tall (an 18 Light label, a
 * 46 box), rows 20 apart; the two texts 840 wide, a 92 box with a #DDD rule and
 * radius 20. The portrait group - a 118 circle, the 206 x 40 blue button, the
 * two-line hint - at the start edge, 20 under the texts; "שליחת פנייה" 192 x 42
 * amber, centred, 30 under the form. The join banner 63 under the panel.
 */

.gb-advisor-reg {
	--gb-reg-navy: var(--wp--preset--color--dark, #1b2b50);
	--gb-reg-blue: var(--wp--preset--color--primary, #1043ff);
	--gb-reg-amber: var(--wp--preset--color--accent, #fcac0b);
	--gb-reg-grey: var(--wp--preset--color--grey, #f3f3f5);
	--gb-reg-rule: var(--wp--preset--color--dark-grey, #ddd);

	box-sizing: border-box;
	inline-size: min(1400px, 100% - 2rem);
	margin-inline: auto;
	padding-block-start: 65px;
	color: var(--gb-reg-navy);
}

.gb-advisor-reg__panel {
	box-sizing: border-box;
	padding: 54px 20px 54px;
	border-radius: 20px;
	background: var(--gb-reg-grey);
	text-align: center;
}

.gb-advisor-reg__title {
	margin: 0;
	font-size: clamp(26px, 1rem + 1.4vw, 36px);
	font-weight: 700;
	line-height: 0.9;
}

.gb-advisor-reg__lead {
	margin: 4px 0 0;
	font-size: clamp(18px, 0.9rem + 0.6vw, 24px);
	line-height: 1;
}

.gb-advisor-reg__form {
	max-inline-size: 840px;
	margin: 30px auto 0;
	text-align: start;
}

.gb-advisor-reg__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px 15px;
	/* A label that wraps (the documents one, at narrower widths) must not push
	   its box out of line with the row's other boxes. */
	align-items: end;
}

.gb-advisor-reg__field {
	margin: 0;
}

.gb-advisor-reg__field--wide {
	grid-column: 1 / -1;
}

/* 18 Light as drawn - weight 100, which is Regular until a Light face exists. */
.gb-advisor-reg__field > label:first-child {
	display: block;
	margin-block: 3px 4px;
	font-size: 18px;
	font-weight: 100;
	letter-spacing: 0.18px;
	line-height: 1;
}

.gb-advisor-reg__field input:not([type="file"]),
.gb-advisor-reg__field select,
.gb-advisor-reg__field textarea {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 46px;
	padding-inline: 19px;
	border: 1px solid var(--gb-reg-rule);
	border-radius: 25px;
	background: #fff;
	color: var(--gb-reg-navy);
	font: inherit;
	font-size: 18px;
}

.gb-advisor-reg__field select {
	appearance: none;
	padding-inline-end: 40px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 4'%3E%3Cpath d='M.6.4 4.5 3.6 8.4.4' fill='none' stroke='%231b2b50' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
	background-position: left 21px center;
	background-size: 9px 4px;
	cursor: pointer;
}

.gb-advisor-reg__field textarea {
	block-size: 92px;
	padding-block: 14px;
	border-radius: 20px;
	line-height: 1.3;
	resize: vertical;
}

/* The two texts sit 16 under the second row, not 20. */
.gb-advisor-reg__field--wide:first-of-type {
	margin-block-start: -4px;
}

.gb-advisor-reg__field input:focus-visible,
.gb-advisor-reg__field select:focus-visible,
.gb-advisor-reg__field textarea:focus-visible {
	outline: 2px solid var(--gb-reg-blue);
	outline-offset: 2px;
}

/* A file input is kept for the form and hidden; its label is the drawn pill. */
.gb-advisor-reg__file-input {
	position: absolute;
	overflow: hidden;
	inline-size: 1px;
	block-size: 1px;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gb-advisor-reg__file-button {
	display: flex;
	box-sizing: border-box;
	block-size: 46px;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding-inline: 20px;
	border: 1px solid var(--gb-reg-rule);
	border-radius: 25px;
	background: #fff;
	cursor: pointer;
	font-size: 18px;
}

.gb-advisor-reg__file-button span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gb-advisor-reg__file-button:hover,
.gb-advisor-reg__file-input:focus-visible + .gb-advisor-reg__file-button {
	border-color: var(--gb-reg-blue);
	color: var(--gb-reg-blue);
}

/* ---------------------------------------------------------------- photo --- */

.gb-advisor-reg__photo {
	display: flex;
	gap: 23px;
	align-items: center;
	margin-block-start: 20px;
}

.gb-advisor-reg__avatar {
	inline-size: 118px;
	block-size: 118px;
	flex: none;
	border-radius: 50%;
	background: #fff url("avatar-placeholder.svg") center / cover no-repeat;
}

.gb-advisor-reg__avatar.has-photo {
	background-size: cover;
}

.gb-advisor-reg__photo-body {
	display: flex;
	flex-direction: column;
	gap: 11px;
	align-items: flex-start;
}

.gb-advisor-reg__photo-button {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	padding: 12px 25px;
	border-radius: 50px;
	background: var(--gb-reg-blue);
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.gb-advisor-reg__photo-button:hover,
.gb-advisor-reg__file-input:focus-visible + .gb-advisor-reg__photo-button {
	background: var(--gb-reg-navy);
}

.gb-advisor-reg__hint {
	margin: 0;
	color: #000;
	font-size: 16px;
	letter-spacing: 0.16px;
	line-height: 1;
}

/* --------------------------------------------------------------- submit --- */

.gb-advisor-reg__submit {
	margin: 30px 0 0;
	text-align: center;
}

.gb-advisor-reg__submit button {
	min-inline-size: 192px;
	min-block-size: 42px;
	padding-inline: 30px;
	border: 0;
	border-radius: 50px;
	background: var(--gb-reg-amber);
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 20px;
}

.gb-advisor-reg__submit button:hover,
.gb-advisor-reg__submit button:focus-visible {
	background: var(--gb-reg-blue);
}

/* Out of sight by clipping, not by -9999px - which put it outside the page and
   read as three escaping elements to the QA probe. */
.gb-advisor-reg__trap {
	position: absolute;
	overflow: hidden;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gb-advisor-reg__error,
.gb-advisor-reg__done {
	max-inline-size: 840px;
	margin: 24px auto 0;
	padding: 14px 20px;
	border-radius: 20px;
	background: #fff;
	font-size: 18px;
	text-align: start;
}

.gb-advisor-reg__error {
	border-inline-start: 6px solid var(--gb-reg-amber);
	font-weight: 700;
}

.gb-advisor-reg__done {
	border-inline-start: 6px solid var(--wp--preset--color--turquoise, #1fa9ab);
}

/* The join banner under the panel, 63 below it. */
.gb-advisor-reg .gb-archive-footer {
	margin-block-start: 63px;
}

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 782px) {
	.gb-advisor-reg__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.gb-advisor-reg__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.gb-advisor-reg__photo {
		flex-direction: column;
		align-items: flex-start;
	}
}