/*
 * OnlineLab — ενότητες σελίδας (μοτίβα Gutenberg με την κλάση «ol-section»).
 * Φορτώνεται στο site και στον επεξεργαστή, ώστε να βλέπετε ό,τι θα δουν οι επισκέπτες.
 */

.ol-entry--sections .ol-entry__content > * + * {
	margin-top: var(--ol-gap, 24px);
}

.ol-section,
.is-style-ol-card,
.is-style-ol-brand,
.is-style-ol-tint {
	padding: clamp(28px, 5vw, 64px);
	border-radius: var(--ol-box-radius, 12px);
	background: var(--ol-color-surface, #ffffff);
	box-shadow: var(--ol-shadow, 0 2px 14px rgba(0, 0, 0, 0.06));
}

.ol-section > *,
.ol-section > .wp-block-group__inner-container > *,
.is-style-ol-card > *,
.is-style-ol-card > .wp-block-group__inner-container > *,
.is-style-ol-brand > *,
.is-style-ol-brand > .wp-block-group__inner-container > *,
.is-style-ol-tint > *,
.is-style-ol-tint > .wp-block-group__inner-container > * {
	max-width: 1100px;
	margin-right: auto;
	margin-left: auto;
}

.ol-section > * + *,
.ol-section > .wp-block-group__inner-container > * + *,
.is-style-ol-card > * + *,
.is-style-ol-card > .wp-block-group__inner-container > * + *,
.is-style-ol-brand > * + *,
.is-style-ol-brand > .wp-block-group__inner-container > * + *,
.is-style-ol-tint > * + *,
.is-style-ol-tint > .wp-block-group__inner-container > * + * {
	margin-top: 20px;
}

.ol-section h2 {
	margin-top: 0;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.2;
}

.ol-section--center > h2,
.ol-section--center > p,
.ol-section--center > .wp-block-group__inner-container > h2,
.ol-section--center > .wp-block-group__inner-container > p {
	text-align: center;
}

.ol-section--center > p,
.ol-section--center > .wp-block-group__inner-container > p {
	max-width: 46em;
}

.ol-section__eyebrow {
	margin-bottom: 0;
	color: var(--ol-color-secondary, #ff6600);
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ol-section--center .ol-section__eyebrow {
	text-align: center;
}

.ol-section__eyebrow + h2 {
	margin-top: 6px;
}

.ol-section .is-content-justification-center,
.ol-section--center .wp-block-buttons {
	justify-content: center;
}

/* Ενότητα με τα χρώματα του brand (διαβάθμιση 45°) */
.ol-section--brand,
.is-style-ol-brand {
	background: linear-gradient(45deg, var(--ol-color-primary, #660066), var(--ol-color-secondary, #ff6600));
	color: #ffffff;
}

.ol-section--brand h2,
.ol-section--brand h3,
.ol-section--brand p,
.ol-section--brand a:not(.wp-block-button__link),
.is-style-ol-brand h2,
.is-style-ol-brand h3,
.is-style-ol-brand p,
.is-style-ol-brand a:not(.wp-block-button__link) {
	color: #ffffff;
}

.ol-section--brand .ol-section__eyebrow {
	color: rgba(255, 255, 255, 0.85);
}

.ol-section--brand .wp-block-button__link,
.is-style-ol-brand .wp-block-button__link {
	border-color: #ffffff;
	background: #ffffff;
	color: var(--ol-color-primary, #660066);
}

.ol-section--brand .is-style-outline .wp-block-button__link,
.is-style-ol-brand .is-style-outline .wp-block-button__link {
	background: transparent;
	color: #ffffff;
}

.ol-section--brand .wp-block-button__link:hover,
.ol-section--brand .wp-block-button__link:focus-visible,
.is-style-ol-brand .wp-block-button__link:hover,
.is-style-ol-brand .wp-block-button__link:focus-visible {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
}

/* Ενότητα με απαλό φόντο */
.ol-section--tint,
.is-style-ol-tint {
	background: color-mix(in srgb, var(--ol-color-primary, #660066) 6%, var(--ol-color-surface, #ffffff));
	box-shadow: none;
}

/* Βήματα: αριθμημένες στήλες */
.ol-steps,
.is-style-ol-numbered {
	counter-reset: ol-step;
	gap: 20px;
}

.ol-steps > .wp-block-column,
.is-style-ol-numbered > .wp-block-column {
	position: relative;
	padding: 24px;
	border: 1px solid var(--ol-color-border, #e6e6e6);
	border-radius: var(--ol-box-radius, 12px);
	background: var(--ol-color-surface, #ffffff);
}

.ol-steps > .wp-block-column::before,
.is-style-ol-numbered > .wp-block-column::before {
	counter-increment: ol-step;
	content: counter(ol-step);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--ol-color-primary, #660066);
	color: #ffffff;
	font-weight: 700;
}

.ol-steps h3,
.is-style-ol-numbered h3 {
	margin: 0 0 6px;
	font-size: 1.1em;
}

.ol-steps p,
.is-style-ol-numbered p {
	margin: 0;
	color: var(--ol-color-muted, #6b6b6b);
}

/* Δύο πλευρές (πελάτες / επαγγελματίες) */
.ol-sides {
	gap: 24px;
}

.ol-sides > .wp-block-column {
	padding: 28px;
	border-radius: var(--ol-box-radius, 12px);
	background: color-mix(in srgb, var(--ol-color-primary, #660066) 5%, var(--ol-color-surface, #ffffff));
}

.ol-sides > .wp-block-column > h3 {
	margin-top: 0;
	color: var(--ol-color-primary, #660066);
}

.ol-sides ol,
.ol-sides ul {
	margin: 0 0 20px;
	padding-left: 1.2em;
}

.ol-sides li + li {
	margin-top: 8px;
}

/* Οφέλη: κάρτες με γραμμή τονισμού */
.ol-features,
.is-style-ol-accent {
	gap: 20px;
}

.ol-features > .wp-block-column,
.is-style-ol-accent > .wp-block-column {
	padding: 22px 22px 22px 24px;
	border-left: 4px solid var(--ol-color-secondary, #ff6600);
	border-radius: var(--ol-box-radius, 12px);
	background: var(--ol-color-surface, #ffffff);
	box-shadow: var(--ol-shadow, 0 2px 14px rgba(0, 0, 0, 0.06));
}

.ol-section--tint .ol-features > .wp-block-column,
.ol-section--tint .is-style-ol-accent > .wp-block-column,
.is-style-ol-tint .ol-features > .wp-block-column,
.is-style-ol-tint .is-style-ol-accent > .wp-block-column {
	box-shadow: none;
}

.ol-features h3,
.is-style-ol-accent h3 {
	margin: 0 0 6px;
	font-size: 1.08em;
}

.ol-features p,
.is-style-ol-accent p {
	margin: 0;
	color: var(--ol-color-muted, #6b6b6b);
}

/* Συχνές ερωτήσεις */
.ol-faq .wp-block-details {
	padding: 16px 20px;
	border: 1px solid var(--ol-color-border, #e6e6e6);
	border-radius: var(--ol-box-radius, 12px);
	background: var(--ol-color-surface, #ffffff);
}

.ol-faq .wp-block-details + .wp-block-details {
	margin-top: 10px;
}

.ol-faq summary {
	font-weight: 500;
	cursor: pointer;
}

.ol-faq .wp-block-details[open] summary {
	margin-bottom: 8px;
	color: var(--ol-color-primary, #660066);
}


/* Απόσταση ανάμεσα σε διαδοχικές ενότητες, σε κάθε σελίδα */
:is(.ol-section, .is-style-ol-card, .is-style-ol-brand, .is-style-ol-tint, .is-style-ol-notice, .is-style-ol-notice-primary) + *,
* + :is(.ol-section, .is-style-ol-card, .is-style-ol-brand, .is-style-ol-tint, .is-style-ol-notice, .is-style-ol-notice-primary) {
	margin-top: var(--ol-layout-gap, 24px);
}

/* Οι στήλες των μοτίβων αναδιπλώνονται μόνες τους όταν ο χώρος στενεύει,
   ώστε να μη σπάνε οι λέξεις σε σελίδες με πλαϊνές στήλες. */
.wp-block-columns:is(.ol-steps, .ol-features, .ol-pricing, .ol-numbers, .ol-contact, .ol-quotes, .is-style-ol-cards, .is-style-ol-accent, .is-style-ol-numbered) {
	flex-wrap: wrap !important;
}

.wp-block-columns:is(.ol-steps, .ol-features, .ol-pricing, .ol-numbers, .ol-contact, .ol-quotes, .is-style-ol-accent, .is-style-ol-numbered) > .wp-block-column {
	flex: 1 1 220px !important;
	min-width: 0;
}

.wp-block-columns.is-style-ol-cards > .wp-block-column {
	flex: 1 1 180px !important;
	min-width: 0;
}

/* Κάρτες (στυλ «Κάρτες» του block Στήλες) */
.is-style-ol-cards {
	gap: 20px;
}

.is-style-ol-cards > .wp-block-column {
	padding: 24px;
	border: 1px solid var(--ol-color-border, #e6e6e6);
	border-radius: var(--ol-box-radius, 12px);
	background: var(--ol-color-surface, #ffffff);
	box-shadow: var(--ol-shadow, 0 2px 14px rgba(0, 0, 0, 0.06));
	text-align: left;
}

.is-style-ol-cards h3 {
	margin: 0 0 6px;
	color: var(--ol-color-primary, #660066);
	font-size: 1.08em;
}

.is-style-ol-cards p {
	margin: 0;
	color: var(--ol-color-muted, #6b6b6b);
}

/* Κείμενο και εικόνα */
.ol-media-text {
	gap: clamp(20px, 4vw, 48px);
}

.ol-media-text .wp-block-media-text__content {
	padding: 0;
}

.ol-media-text .wp-block-media-text__media img,
.ol-media-text .wp-block-media-text__media video {
	border-radius: var(--ol-box-radius, 12px);
}

.ol-media-text .wp-block-media-text__content > * + * {
	margin-top: 16px;
}

/* Τιμοκατάλογος */
.ol-pricing {
	align-items: stretch !important;
	gap: 20px;
}

.ol-pricing > .wp-block-column {
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
	border: 1px solid var(--ol-color-border, #e6e6e6);
	border-radius: var(--ol-box-radius, 12px);
	background: var(--ol-color-surface, #ffffff);
	text-align: center;
}

.ol-pricing > .wp-block-column.is-featured {
	border: 2px solid var(--ol-color-primary, #660066);
	box-shadow: 0 10px 30px color-mix(in srgb, var(--ol-color-primary, #660066) 18%, transparent);
}

.ol-pricing h3 {
	margin: 0;
	font-size: 1.15em;
}

.ol-pricing .is-featured h3 {
	color: var(--ol-color-primary, #660066);
}

.ol-pricing__price {
	margin: 14px 0 0;
	font-size: 2.4em;
	font-weight: 700;
	line-height: 1.1;
}

.ol-pricing__note {
	margin: 2px 0 18px;
	color: var(--ol-color-muted, #6b6b6b);
	font-size: 0.9em;
}

.ol-pricing ul {
	flex: 1;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	text-align: left;
}

.ol-pricing li {
	position: relative;
	padding-left: 26px;
}

.ol-pricing li + li {
	margin-top: 8px;
}

.ol-pricing li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--ol-color-secondary, #ff6600);
	font-weight: 700;
}

.ol-pricing .wp-block-buttons {
	justify-content: center;
}

/* Αριθμοί */
.ol-numbers {
	gap: 20px;
	text-align: center;
}

.ol-numbers__value {
	margin: 0;
	background: linear-gradient(45deg, var(--ol-color-primary, #660066), var(--ol-color-secondary, #ff6600));
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--ol-color-primary, #660066);
	font-size: clamp(34px, 5vw, 52px);
	font-weight: 700;
	line-height: 1.1;
	-webkit-text-fill-color: transparent;
}

.ol-numbers__label {
	margin: 6px 0 0;
	color: var(--ol-color-muted, #6b6b6b);
}

/* Επικοινωνία */
.ol-contact {
	gap: 24px;
}

.ol-contact h2 {
	margin-top: 0;
}

.ol-contact h3 {
	margin: 0 0 4px;
	color: var(--ol-color-primary, #660066);
	font-size: 1em;
}

.ol-contact h3 ~ h3 {
	margin-top: 18px;
}

.ol-contact p {
	margin: 0;
}

.ol-contact .wp-block-buttons {
	margin-top: 18px;
}

/* Κριτικές */
.ol-quotes {
	gap: 20px;
}

.ol-quote,
.ol-quotes .wp-block-quote {
	height: 100%;
	margin: 0;
	padding: 24px;
	border: 0;
	border-radius: var(--ol-box-radius, 12px);
	background: color-mix(in srgb, var(--ol-color-primary, #660066) 5%, var(--ol-color-surface, #ffffff));
	text-align: left;
}

.ol-quote p {
	margin: 0;
	font-style: italic;
}

.ol-quote cite {
	display: block;
	margin-top: 14px;
	color: var(--ol-color-primary, #660066);
	font-size: 0.9em;
	font-style: normal;
	font-weight: 700;
}

/* Ανακοινώσεις (στυλ του block Ομάδα) */
.is-style-ol-notice,
.is-style-ol-notice-primary {
	padding: 20px 24px;
	border-left: var(--ol-accent-border-width, 4px) solid var(--ol-color-secondary, #ff6600);
	border-radius: var(--ol-box-radius, 12px);
	background: color-mix(in srgb, var(--ol-color-secondary, #ff6600) 9%, var(--ol-color-surface, #ffffff));
}

.is-style-ol-notice-primary {
	border-left-color: var(--ol-color-primary, #660066);
	background: color-mix(in srgb, var(--ol-color-primary, #660066) 7%, var(--ol-color-surface, #ffffff));
}

.is-style-ol-notice h3,
.is-style-ol-notice-primary h3 {
	margin: 0 0 6px;
	font-size: 1.1em;
}

.is-style-ol-notice h3 {
	color: color-mix(in srgb, var(--ol-color-secondary, #ff6600) 70%, #000000);
}

.is-style-ol-notice-primary h3 {
	color: var(--ol-color-primary, #660066);
}

.is-style-ol-notice p:last-child,
.is-style-ol-notice-primary p:last-child {
	margin-bottom: 0;
}

/* Πορτοκαλί κουμπί */
.wp-block-button.is-style-ol-secondary .wp-block-button__link {
	border-color: var(--ol-color-secondary, #ff6600);
	background: var(--ol-color-secondary, #ff6600);
	color: #ffffff;
}

.wp-block-button.is-style-ol-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-ol-secondary .wp-block-button__link:focus-visible {
	border-color: color-mix(in srgb, var(--ol-color-secondary, #ff6600) 85%, #000000);
	background: color-mix(in srgb, var(--ol-color-secondary, #ff6600) 85%, #000000);
	color: #ffffff;
}

/* Εικόνα με στρογγυλεμένες γωνίες */
.wp-block-image.is-style-ol-rounded img {
	border-radius: var(--ol-box-radius, 12px);
}

@media (max-width: 781px) {
	.ol-sides > .wp-block-column {
		flex-basis: 100% !important;
	}
}