/*
 * Elive Core — front styles: ζώνες διαφημίσεων + φόρμα επικοινωνίας.
 * Ουδέτερα ονόματα (.zn) — βλ. κανόνα adblock στο ad-manager.php.
 * Ελάχιστο, theme-αγνωστικό: κληρονομεί γραμματοσειρές/χρώματα του θέματος.
 */

/* ---------------------------------------------------------------- ζώνες */

.zn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 16px 0;
}

.zn__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center; /* ΜΟΝΗ/τελευταία διαφήμιση σειράς → κεντράρεται */
	gap: 10px;
	width: 100%;
}

/*
 * Διάταξη «δίπλα-δίπλα» (row): ΣΤΑΘΕΡΟ πλέγμα — κάθε διαφήμιση πιάνει ίσο
 * μερίδιο της σειράς ΑΝΕΞΑΡΤΗΤΑ από τις φυσικές διαστάσεις της εικόνας.
 * Κινητό: 1 ανά σειρά. Desktop: 2 ανά σειρά (override σε άλλο πλήθος από το
 * per-zone CSS). Το justify-content:center κεντράρει αυτόματα τη μονή/
 * τελευταία διαφήμιση όταν η σειρά δεν γεμίζει — χωρίς nth-child μαγικά.
 */
.zn--l-row .zn__u {
	flex: 0 0 100%;
	max-width: 100%;
}

@media (min-width: 768px) {
	.zn--l-row .zn__u {
		flex-basis: calc((100% - 10px) / 2); /* 2 ανά σειρά */
	}
}

/* Στοίβα: τα banners το ένα κάτω από το άλλο, γεμάτο πλάτος */
.zn--l-stack .zn__inner {
	flex-direction: column;
}

.zn--l-stack .zn__u {
	width: 100%;
	max-width: 100%;
}

.zn__u {
	display: flex;
	justify-content: center;
	max-width: 100%;
}

/* Η εικόνα γεμίζει το κελί της (ενιαία εμφάνιση ανεξαρτήτως πρωτοτύπου).
   Με ενιαίες διαστάσεις ζώνης (cw/ch) το per-zone CSS βάζει object-fit. */
.zn__u img {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: auto;
}

/* Ορατότητα ανά συσκευή (cache-safe, χωρίς server-side detection) */
.only-d {
	display: none;
}

@media (min-width: 768px) {
	.only-d {
		display: flex;
	}

	.only-m {
		display: none;
	}
}

/* ------------------------------------------------------ φόρμα επικοινωνίας */

.elive-form {
	max-width: 560px;
}

.elive-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.elive-form input[type="text"],
.elive-form input[type="email"],
.elive-form select,
.elive-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d5d9e0;
	border-radius: 6px;
	background: #fff;
	color: inherit;
	font: inherit;
	box-sizing: border-box;
}

.elive-form textarea {
	resize: vertical;
}

/* Honeypot: αόρατο για ανθρώπους, «ορατό» για bots. */
.elive-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.elive-consent label {
	font-weight: 400;
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.elive-consent input {
	margin-top: 4px;
	width: auto;
}

.elive-submit {
	background: #b32d2e;
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 12px 28px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.elive-submit:hover {
	filter: brightness(0.9);
}

.elive-note {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 20px;
	border: 1px solid;
}

.elive-note--ok {
	background: #e7f6ec;
	border-color: #b7e0c3;
	color: #137333;
}

.elive-note--err {
	background: #fdecea;
	border-color: #f5c6c2;
	color: #b3261e;
}

/* Στην εκτύπωση οι ζώνες δεν τυπώνονται */
@media print {
	.zn {
		display: none !important;
	}
}

/* ------------------------------------------ ενσωματωμένα βίντεο σε άρθρα */
/*
 * Το εισαγόμενο περιεχόμενο έχει σκέτο <iframe width="560" height="315">
 * ΜΕΣΑ σε <p> — δεν είναι μπλοκ ενσωμάτωσης του WordPress, οπότε δεν το
 * πιάνει ούτε το wp-embed-responsive ούτε κάποιο facade του θέματος.
 * Μετρημένο: σε στήλη κειμένου 360 px το πλέιερ έμενε 500 px και ξεχείλιζε
 * κατά 140 px, χωρίς κανέναν γονέα να το κόβει (overflow-x: visible μέχρι
 * το <html>) — δηλαδή οριζόντιο scroll σε ~6.200 άρθρα, σε site 99% mobile.
 *
 * Στοχεύει ΜΟΝΟ src γνωστών παρόχων μέσα στο κείμενο του άρθρου, ώστε να μην
 * ακουμπάει πλέιερ του Elementor (που έχει δικό του wrapper αναλογίας).
 */
.entry-content iframe[src*="youtube.com/embed"],
.entry-content iframe[src*="youtube-nocookie.com/embed"],
.entry-content iframe[src*="player.vimeo.com"],
.entry-content iframe[src*="dailymotion.com/embed"],
.entry-content iframe[src*="facebook.com/plugins/video"],
.post-content iframe[src*="youtube.com/embed"],
.post-content iframe[src*="youtube-nocookie.com/embed"],
.post-content iframe[src*="player.vimeo.com"] {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	margin-block: 1.2em;
}
