/**
 * MERINEO homepage sections: decoration and layout that blocks cannot express.
 * Loaded on the front end and inside the editor canvas.
 */

/* ---------------------------------------------------------------------------
 * Hero: dark canvas with a masked grid, blue and amber glows and a fade to ink.
 * Layers: background (ink) → ::before grid → ::after glows → content.
 * ------------------------------------------------------------------------ */

.merineo-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.merineo-hero::before,
.merineo-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.merineo-hero::before {
	background-image:
		linear-gradient(rgba(191, 206, 255, 0.09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(191, 206, 255, 0.09) 1px, transparent 1px);
	background-size: 76px 76px;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000, transparent);
	mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000, transparent);
}

/*
 * Glow geometry from the prototype: a 62vw blue circle centred 31vw inside its box at
 * top -24% / right -10%, a 48vw amber circle at bottom -30% / left -14%. "circle" in the
 * prototype resolves to farthest-corner, i.e. radius × √2.
 */
.merineo-hero::after {
	background:
		linear-gradient(to top, var(--wp--preset--color--ink) 2%, rgba(11, 13, 23, 0.2) 46%, rgba(11, 13, 23, 0.66)),
		radial-gradient(120% 90% at 50% 62%, rgba(253, 208, 124, 0.11), rgba(253, 208, 124, 0.04) 44%, rgba(253, 208, 124, 0) 72%),
		radial-gradient(circle 33.94vw at calc(-14% + 24vw) calc(130% - 24vw), rgba(253, 208, 124, 0.13), rgba(253, 208, 124, 0) 66%),
		radial-gradient(circle 43.84vw at calc(110% - 31vw) calc(-24% + 31vw), rgba(115, 141, 255, 0.32), rgba(115, 141, 255, 0) 62%);
}

.merineo-hero__grid {
	display: grid;
	grid-template-columns: minmax(320px, 1.35fr) minmax(240px, 0.65fr);
	gap: clamp(12px, 1.6vw, 28px);
	align-items: center;
}

.merineo-hero__grid > * {
	margin-block: 0;
}

.merineo-hero__visual {
	justify-self: center;
	width: 100%;
	padding: 6% 0;
}

@media (max-width: 1150px) {

	.merineo-hero__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {

	.merineo-hero::before {
		background-size: 52px 52px;
	}
}

/* ---------------------------------------------------------------------------
 * Lists with a round arrow badge (prototype "Prichádzame na pomoc firmám, ktoré").
 * ------------------------------------------------------------------------ */

.wp-block-list.is-style-arrow-badge {
	padding-left: 0;
	list-style: none;
}

.wp-block-list.is-style-arrow-badge > li {
	display: flex;
	gap: 18px;
	padding: 20px 0;
	border-top: 1px solid rgba(11, 13, 23, 0.14);
}

.wp-block-list.is-style-arrow-badge > li:first-child {
	border-top: 0;
}

.wp-block-list.is-style-arrow-badge > li::before {
	content: "";
	flex: 0 0 30px;
	height: 30px;
	margin-top: -2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='14' fill='%234A5FD9'/%3E%3Cpath d='M9.5 15h10M15.5 10.5 20 15l-4.5 4.5' fill='none' stroke='%23FDD07C' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
 * Chain: list items run inline, joined by the round arrow badge
 * (prototype "Stratégia → značka → web …").
 * ------------------------------------------------------------------------ */

.wp-block-list.is-style-chain {
	padding-left: 0;
	list-style: none;
}

.wp-block-list.is-style-chain > li {
	display: inline;
}

.wp-block-list.is-style-chain > li + li::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 8px;
	vertical-align: -4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='14' fill='%234A5FD9'/%3E%3Cpath d='M9.5 15h10M15.5 10.5 20 15l-4.5 4.5' fill='none' stroke='%23FDD07C' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
 * Circle: a round group with centred content, at most 240 px wide
 * (prototype "Kde sú naše hranice").
 * ------------------------------------------------------------------------ */

.wp-block-group.is-style-circle {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	justify-content: center;
	justify-self: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 240px;
	aspect-ratio: 1;
	padding: 10%;
	border-radius: 50%;
	text-align: center;
}

.wp-block-group.is-style-circle > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
 * Quote with the brand O-mark above it (prototype QuoteBand).
 * ------------------------------------------------------------------------ */

.wp-block-quote.is-style-mark {
	margin: 0;
	padding: 0;
	text-align: center;
}

.wp-block-quote.is-style-mark::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 auto 36px;
	background: url("../images/o-mark.svg") center / contain no-repeat;
}

.wp-block-quote.is-style-mark > p {
	margin: 0;
	text-wrap: balance;
}

.wp-block-quote.is-style-mark cite {
	display: block;
	margin-top: 32px;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: color-mix(in srgb, currentcolor 86%, transparent);
}

/* Prototype rule: below 760 px, centred button rows placed directly in a page section start at the left edge. */
@media (max-width: 760px) {

	.wp-block-post-content > .wp-block-group > .wp-block-buttons.is-content-justification-center {
		justify-content: flex-start;
	}
}

/* ---------------------------------------------------------------------------
 * Speech bubble (group style): the tail takes the bubble's background colour.
 * ------------------------------------------------------------------------ */

.wp-block-group.is-style-bubble {
	position: relative;
	max-width: 520px;
}

.wp-block-group.is-style-bubble::after {
	position: absolute;
	bottom: -16px;
	left: 38px;
	width: 36px;
	height: 18px;
	clip-path: polygon(0 0, 100% 0, 10px 100%);
	content: "";
	background: inherit;
}

/* ---------------------------------------------------------------------------
 * Team, client and contact sections: below 760 px the prototype aligns the section
 * text to the left; the member cards and logos keep their own centring.
 * ------------------------------------------------------------------------ */

@media (max-width: 760px) {

	:is(.merineo-team-section, .merineo-clients-section, .merineo-contact) .has-text-align-center {
		text-align: left;
	}

	:is(.merineo-team-section, .merineo-clients-section, .merineo-contact) :is(h2, p) {
		margin-inline: 0 !important;
	}

	.merineo-team-section .merineo-team__grid {
		justify-content: flex-start;
	}
}

/* ---------------------------------------------------------------------------
 * Contact section: phone and e-mail rows read as plain text links.
 * ------------------------------------------------------------------------ */

.merineo-contact__rows a {
	color: inherit;
	text-decoration: none;
}