/* ═══════════════════════════════════════════════════════════════════════════
   LEADER HELLAS — ΕΠΙΚΟΙΝΩΝΙΑ
   Figma @1920: hero min-height 576 · padding 56/350/60
                τίτλος 1620 πλάτος με margin-left -200 · 55/57
                στήλες 1fr 1fr gap 70/122 · γραμμή 48px εικονίδιο + 20 gap
                τιμή επικοινωνίας 50/57 · φόρμα 762 ύψος · padding 82/357/86
   ═══════════════════════════════════════════════════════════════════════════ */

.lh-contact,
.lh-contact *,
.lh-form,
.lh-form *,
.lh-form *::before,
.lh-form *::after {
	box-sizing: border-box;
}

/* ─── Hero με στοιχεία επικοινωνίας ───────────────────────────────────── */

.lh-contact {
	--lh-ct-icon: 4.8rem;      /* 48px */
	--lh-ct-value: 5rem;       /* 50px */

	width: 100%;
	min-height: 57.6rem;
	padding: 5.6rem 35rem 6rem;   /* 56 / 350 / 60 */
}

.lh-contact__title {
	width: 162rem;          /* 1620px */
	max-width: none;
	margin: 0 0 7rem -20rem;
	color: var(--lh-muted);
	font-family: var(--lh-display);
	font-size: 5.5rem;
	font-weight: 800;
	line-height: 5.7rem;
	letter-spacing: .11rem;
	text-align: center;
	text-transform: uppercase;
}

/*
 * `1fr` σκόπιμα, ΟΧΙ `minmax(0, 1fr)`: το `1fr` είναι `minmax(auto, 1fr)`, οπότε
 * η δεύτερη στήλη φαρδαίνει όσο χρειάζεται για το «INFO@LEADERHELLAS.GR» που
 * δεν σπάει — ακριβώς όπως στο Figma. Στο κινητό η στήλη γίνεται μία και το
 * κείμενο σπάει κανονικά, άρα δεν υπάρχει κίνδυνος υπερχείλισης.
 */
.lh-contact__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 7rem 12.2rem;
}

.lh-contact__heading {
	margin: 0 0 3.5rem;
	font-family: var(--lh-body);
	font-size: 2rem;
	font-weight: 400;
	line-height: 3rem;
	letter-spacing: normal;
	text-transform: none;
}

/*
 * `1fr` και εδώ, ΟΧΙ `minmax(0, 1fr)`: το min-content του nowrap τηλεφώνου
 * πρέπει να διαδοθεί προς τα πάνω, ώστε η εξωτερική γρίδα να δώσει στη δεύτερη
 * στήλη το επιπλέον πλάτος που δίνει και το Figma (529.6 / 568.4 αντί 549/549).
 */
.lh-contact__row {
	margin-bottom: 4.7rem;
	display: grid;
	grid-template-columns: var(--lh-ct-icon) 1fr;
	gap: 2rem;
	align-items: center;
}

/* (0,2,0) — δες τη σημείωση ειδικότητας στο leader-core.css. */
.lh-contact .lh-contact__icon {
	width: var(--lh-ct-icon);
	height: var(--lh-ct-icon);
	object-fit: contain;
}

.lh-contact__text {
	margin: 0;
	font-size: 2rem;
	line-height: 3rem;
}

.lh-contact .lh-contact__value {
	color: var(--lh-navy);
	font-family: var(--lh-display);
	font-size: var(--lh-ct-value);
	font-weight: 800;
	line-height: 5.7rem;
	letter-spacing: .1rem;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .2s var(--lh-ease);
}

.lh-contact .lh-contact__value:hover,
.lh-contact .lh-contact__value:focus-visible {
	color: var(--lh-blue);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ΦΟΡΜΑ
   ═══════════════════════════════════════════════════════════════════════════ */

.lh-form {
	--lh-form-cols: 2;
	--lh-form-bg: var(--lh-pale);
	--lh-form-color: var(--lh-navy);

	/*
	 * Το Figma δίνει ενότητα 762px. Το static το πετύχαινε με `height: 762px`,
	 * που ΚΑΤΑΠΙΝΕ το δηλωμένο padding-bottom των 86px — στην πράξη το κάτω
	 * κενό ήταν 27px. Γράφουμε το πραγματικό 27px και βάζουμε min-height αντί
	 * για height, ώστε αν προστεθεί πεδίο η ενότητα να μεγαλώσει αντί να
	 * υπερχειλίσει πάνω στην επόμενη.
	 */
	width: 100%;
	min-height: 76.2rem;
	padding: 8.2rem 35.7rem 2.7rem;
	background: var(--lh-form-bg);
	color: var(--lh-form-color);
}

.lh-form__grid {
	display: grid;
	grid-template-columns: repeat(var(--lh-form-cols), minmax(0, 1fr));
	column-gap: 4rem;
	row-gap: 4.1rem;
}

.lh-field {
	display: flex;
	flex-direction: column;
	gap: 1.7rem;
}

.lh-field--full {
	grid-column: 1 / -1;
}

/*
 * Το επιπλέον κενό των πλήρους πλάτους πεδίων αφορά ΜΟΝΟ τη φόρμα
 * επικοινωνίας (στο static: `.contact-form-section .field--full`). Η φόρμα
 * προσφοράς κρατά το κανονικό gap των 17px — αλλιώς κάθε τέτοιο πεδίο
 * μεγαλώνει 15px και όλα τα από κάτω μετατοπίζονται.
 */
.lh-form .lh-field--full {
	margin-top: .8rem;
	gap: 2.4rem;
}

.lh-form.lh-form--quote .lh-field--full {
	margin-top: 0;
	gap: 1.7rem;
}

.lh-field__label {
	color: inherit;
	font-size: 2.4rem;    /* 24px */
	line-height: 3rem;
}

.lh-form :where(input, select, textarea).lh-field__input {
	width: 100%;
	border: .1rem solid currentColor;
	border-radius: var(--lh-radius);
	outline: 0;
	background: transparent;
	color: inherit;
	font-size: 2rem;      /* 20px */
	line-height: 3rem;
	transition: border-color .2s var(--lh-ease), box-shadow .2s var(--lh-ease);
}

.lh-form input.lh-field__input,
.lh-form select.lh-field__input {
	height: 4.5rem;       /* 45px */
	padding: .6rem 1.8rem;
}

.lh-form textarea.lh-field__input {
	min-height: 15.9rem;  /* 159px */
	padding: 1.2rem 1.8rem;
	resize: vertical;
}

.lh-form .lh-field__input:focus {
	border-color: var(--lh-blue);
	box-shadow: 0 0 0 .3rem rgba(33, 155, 255, .18);
}

.lh-form .lh-field__input::placeholder {
	color: currentColor;
	opacity: .45;
}

.lh-form__submit {
	grid-column: 1 / -1;
	justify-self: center;
}

.lh-form__status {
	grid-column: 1 / -1;
	min-height: 2.4rem;
	margin: 0;
	color: var(--lh-green);
	text-align: center;
}

.lh-form__status--error {
	color: #d63638;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ΠΡΟΣΑΡΜΟΓΗ CONTACT FORM 7
   ───────────────────────────────────────────────────────────────────────────
   Τα CF7 templates γράφονται με ΤΟ ΔΙΚΟ ΜΑΣ markup (divs, labels, fieldsets)
   και το wpautop είναι κλειστό. Το CF7 προσθέτει μόνο:

     · <div class="wpcf7">           εξωτερικό περιτύλιγμα
     · <form class="wpcf7-form">     ← αυτό γίνεται το grid
     · <span class="wpcf7-form-control-wrap">  γύρω από κάθε control
     · <div class="wpcf7-response-output">     μήνυμα στο τέλος
     · fieldset.hidden-fields-container + .screen-reader-output

   Το `display: contents` στο control-wrap το βγάζει τελείως από το layout,
   οπότε το input γίνεται άμεσο παιδί του .lh-field — ακριβώς όπως στο static.
   ═══════════════════════════════════════════════════════════════════════════ */

.lh-form .wpcf7 {
	width: 100%;
}

.lh-form .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(var(--lh-form-cols), minmax(0, 1fr));
	column-gap: var(--lh-form-col-gap, 4rem);
	row-gap: var(--lh-form-row-gap, 4.1rem);
	width: var(--lh-form-width, 100%);
	margin-inline: auto;
}

/* Ο μοναδικός λόγος ύπαρξης αυτού του span είναι το CF7 API — εκτός layout. */
.lh-form .wpcf7-form-control-wrap {
	display: contents;
}

.lh-form .hidden-fields-container,
.lh-form .screen-reader-response {
	display: none;
}

/*
 * Το κουμπί υποβολής είναι <input>, όχι <button>. Δίπλα του το CF7 βάζει
 * <span class="wpcf7-spinner"> που είναι μεν αόρατο αλλά ΠΙΑΝΕΙ ΧΩΡΟ — έσπρωχνε
 * το κεντραρισμένο κουμπί 20px αριστερά. Το βγάζουμε από τη ροή.
 */
.lh-form .lh-form__actions {
	position: relative;
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lh-form .lh-form__actions--start {
	justify-content: flex-start;
	margin-top: var(--lh-form-actions-top, 0);
}

.lh-form input.lh-btn {
	appearance: none;
	-webkit-appearance: none;
}

/*
 * Το μήνυμα του CF7 παίρνει τη θέση του .form-status του Figma. Το CF7 το
 * κρύβει με `.wpcf7 form.init .wpcf7-response-output { display: none }`
 * (0,3,1) — αλλά στο design η γραμμή υπάρχει πάντα και κρατά 24px. Ο δικός
 * μας κανόνας χρειάζεται μεγαλύτερη ειδικότητα για να το επαναφέρει.
 */
.lh-form .wpcf7 form.wpcf7-form .wpcf7-response-output {
	display: block;
	grid-column: 1 / -1;
	min-height: 2.4rem;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--lh-green);
	font-size: 2rem;
	line-height: 3rem;
	text-align: center;
}

.lh-form .wpcf7-form.invalid .wpcf7-response-output,
.lh-form .wpcf7-form.unaccepted .wpcf7-response-output,
.lh-form .wpcf7-form.failed .wpcf7-response-output,
.lh-form .wpcf7-form.spam .wpcf7-response-output,
.lh-form .wpcf7-form.aborted .wpcf7-response-output {
	color: #ff6b6b;
}

.lh-form .wpcf7-not-valid-tip {
	margin-top: .6rem;
	color: #ff6b6b;
	font-size: 1.6rem;
	line-height: 2.2rem;
}

.lh-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: #ff6b6b;
}

.lh-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 0;
	margin: 0;
	transform: translateY(-50%);
}

/* Παγίδα ανεπιθύμητων — κρυφό από χρήστες ΚΑΙ από screen readers. */
.lh-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lh-form__field-error {
	margin: 0;
	color: #d63638;
	font-size: 1.6rem;
	line-height: 2.2rem;
}

.lh-form .lh-field__input[aria-invalid="true"] {
	border-color: #d63638;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ≤1024px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

	.lh-contact {
		--lh-ct-value: 4rem;

		min-height: 0;
		padding: 6rem var(--lh-gutter);
	}

	.lh-contact__title {
		width: 100%;
		margin: 0 0 4.5rem;
		font-size: 4.2rem;
		line-height: 4.4rem;
	}

	.lh-contact__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 4.5rem;
	}

	.lh-contact__row:last-child {
		margin-bottom: 0;
	}

	.lh-contact__row {
		margin-bottom: 3.2rem;
		grid-template-columns: var(--lh-ct-icon) minmax(0, 1fr);
	}

	.lh-contact .lh-contact__value {
		font-size: min(var(--lh-ct-value), 9vw);
		line-height: 1.14;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.lh-form {
		--lh-form-cols: 1;

		min-height: 0;
		padding: 6.5rem var(--lh-gutter);
	}

	.lh-form__grid {
		row-gap: 3rem;
	}

	.lh-field--full {
		margin-top: 0;
	}

	.lh-form__submit {
		justify-self: stretch;
	}
}