/* ==========================================================
   MISSION PREVIEW
========================================================== */

.im-mission-preview {
	--wp--style--block-gap: 0;
	--im-mission-bg: #f7f4ef;

	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 14px 48px 28px;
	box-sizing: border-box;
}

.im-mission-preview > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}


/* ==========================================================
   PANEL
========================================================== */

.im-mission-preview-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 0 !important;
	align-items: stretch;

	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;

	border: 1px solid rgba(201, 160, 83, 0.28);
	background-color: var(--im-mission-bg);
}

.im-mission-preview-grid > * {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}


/* ==========================================================
   IMAGE
========================================================== */

.im-mission-preview-media {
	position: relative;
	z-index: 1;

	overflow: visible;
	min-height: 440px;
	margin: 0 !important;
	padding: 0 !important;
}

.im-mission-preview-image,
.im-mission-preview-image figure,
.im-mission-preview-image img {
	display: block;

	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.im-mission-preview-image {
	overflow: hidden;
}

.im-mission-preview-image img {
	object-fit: cover;
	object-position: center;
}

/*
 * Prijelaz počinje unutar fotografije i nastavlja se
 * preko spoja prema pozadini tekstualnog dijela.
 */
.im-mission-preview-media::after {
	content: "";
	position: absolute;
	z-index: 2;

	top: 0;
	right: -2px;
	bottom: 0;
	width: 140px;

	pointer-events: none;

	background: linear-gradient(
		90deg,
		rgba(247, 244, 239, 0) 0%,
		rgba(247, 244, 239, 0.16) 28%,
		rgba(247, 244, 239, 0.58) 62%,
		var(--im-mission-bg) 100%
	);
}


/* ==========================================================
   CONTENT
========================================================== */

.im-mission-preview-content {
	--wp--style--block-gap: 0;

	position: relative;
	z-index: 3;

	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0 !important;

	margin: 0 !important;
	padding: 52px 56px !important;
	box-sizing: border-box;

	background-color: var(--im-mission-bg);
}

.im-mission-preview-content > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.im-mission-preview-eyebrow {
	margin: 0 0 10px !important;

	color: var(--im-gold);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.im-mission-preview-title {
	margin: 0 !important;

	color: var(--im-primary-dark);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(30px, 2.8vw, 46px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.im-mission-preview-text {
	max-width: 620px;
	margin: 24px 0 0 !important;

	color: var(--im-text);
	font-size: 17px;
	line-height: 1.7;
}


/* ==========================================================
   BUTTON
========================================================== */

.im-mission-preview-actions {
	display: flex !important;
	justify-content: flex-start;

	width: 100%;
	margin: 30px 0 0 !important;
	padding: 0;
}

.im-mission-preview-link .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 190px;
	min-height: 44px;
	padding: 11px 28px;

	border: 1px solid var(--im-primary);
	border-radius: 0;

	background-color: var(--im-primary);
	color: #ffffff;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;

	transition:
		background-color var(--im-transition),
		border-color var(--im-transition),
		color var(--im-transition);
}

.im-mission-preview-link .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--im-primary);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {
	.im-mission-preview {
		padding: 30px 24px;
	}

	.im-mission-preview-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.im-mission-preview-media {
		min-height: 380px;
	}

	.im-mission-preview-media::after {
		width: 90px;
	}

	.im-mission-preview-content {
		padding: 36px 30px !important;
	}

	.im-mission-preview-title {
		font-size: 34px;
	}

	.im-mission-preview-text {
		font-size: 16px;
		line-height: 1.65;
	}
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {
	.im-mission-preview {
		padding: 24px 12px 30px;
	}

	.im-mission-preview-grid {
		grid-template-columns: 1fr;
	}

	.im-mission-preview-media {
        min-height: 0;
        height: auto;
    }

    .im-mission-preview-image,
    .im-mission-preview-image figure,
    .im-mission-preview-image img {
        height: auto !important;
    }

	/*
	 * Na mobitelu prijelaz ide vertikalno:
	 * fotografija se pri dnu stapa s tekstualnim dijelom.
	 */
    .im-mission-preview-media::after {
        top: auto;
        right: 0;
        bottom: -2px;
        left: 0;
    
        width: auto;
        height: 48px;
    
        background: linear-gradient(
            180deg,
            rgba(247, 244, 239, 0) 0%,
            rgba(247, 244, 239, 0.45) 58%,
            var(--im-mission-bg) 100%
        );
    }

	.im-mission-preview-content {
		padding: 14px 18px 24px !important;
		background-color: var(--im-mission-bg);
	}

	.im-mission-preview-title {
		font-size: 28px;
		line-height: 1.08;
	}

	.im-mission-preview-text {
		margin-top: 16px !important;

		font-size: 15px;
		line-height: 1.6;
	}

	.im-mission-preview-actions {
		margin-top: 22px !important;
	}

	.im-mission-preview-link,
	.im-mission-preview-link .wp-block-button__link {
		width: 100%;
	}

	.im-mission-preview-link .wp-block-button__link {
		text-align: center;
	}
}