/*
 * Incoterms page (page-incoterms.php).
 *
 * Loaded after services.css so layout primitives — .service-hero,
 * .service-sidebar, .service-content, .service-section, .service-faq,
 * .service-form, .service-poslovnice — come from there. This file only
 * adds the incoterm-specific blocks (.incoterm-intro, .incoterm-rules,
 * .incoterm-group) and the overlay-header convention for the template.
 *
 * Figma reference: frame `83:2573` ("INCOTERMS", 1440 desktop only).
 * No Figma variables on this frame — values match the literals used on
 * the existing service templates (red #bb2548 = --color-brand-red,
 * ink #0a0a0a = --color-ink, muted #424242 inline).
 */

/* --------------------------------------------------------------
 * Overlay header — matches homepage / services / ship-transport.
 * -------------------------------------------------------------- */
.page-template-page-incoterms .site-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
}

.page-template-page-incoterms .site-main {
	margin-top: 0;
	overflow-x: clip;
}

/* --------------------------------------------------------------
 * Intro section — carrier-logos image and the section title sit
 * OUTSIDE the bordered card (above it). Only the red-pill rule
 * label + body copy live inside the border. Matches the Figma
 * frame, where the image and "Upućivanje robe" headline are
 * flush with the column and the rule itself is the card.
 * -------------------------------------------------------------- */
.incoterm-intro__media {
	margin: 0 0 32px;
}

.incoterm-intro__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------
 * Rule cards — every rule (EXW, FCA, FAS, FOB, DAT, DAP, DDP) is
 * its own bordered card: red-pill "header" full-width at the top,
 * white body below. Card border + radius come from the Figma frame
 * (#cacaca 1px, 10px radius); the pill is rendered borderless and
 * clipped by `overflow: hidden` so its top corners follow the card.
 * Section titles (and the intro image) live OUTSIDE the cards.
 *
 * Figma anchors:
 *   card border = #cacaca, 1px, radius 10px
 *   pill bg    = #bb2548, white text
 *   code       = Tahoma Bold 18/24, +1px tracking, uppercase
 *   name       = Tahoma Regular 18/24, +1px tracking, uppercase
 *   body       = Myriad Pro 16/26, #424242
 * -------------------------------------------------------------- */
.incoterm-rules {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 20px;
}

.incoterm-rules__item {
	margin: 0;
	border: 1px solid #cacaca;
	border-radius: var(--radius-md);
	background: #fff;
	overflow: hidden;
}

/* The label is an <h3> for outline semantics, rendered as the red
 * pill at the top of the card. The code (e.g. "DDP") is wrapped in
 * <strong> for bold weight; the rest of the heading inherits the
 * h3's Tahoma 400. Margins are reset and the global h3 family
 * (open-sans 700) is overridden. */
.incoterm-rules__label {
	margin: 0;
	padding: 24px 30px;
	background: var(--color-brand-red);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.incoterm-rules__label strong {
	font-weight: 700;
}

.incoterm-rules__body {
	margin: 0;
	padding: 24px 30px 28px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 26px;
	color: #424242;
}

/* --------------------------------------------------------------
 * Responsive — match the breakpoint ladder used in services.css.
 * -------------------------------------------------------------- */
@media screen and (max-width: 991px) {
	.incoterm-rules {
		gap: 16px;
	}

	.incoterm-rules__label {
		padding: 20px 24px;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0.75px;
	}

	.incoterm-rules__body {
		padding: 20px 24px 24px;
	}
}

@media screen and (max-width: 599px) {
	.incoterm-intro__media {
		margin-bottom: 24px;
	}

	.incoterm-rules {
		gap: 14px;
	}

	.incoterm-rules__label {
		padding: 16px 18px;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: 0.5px;
	}

	.incoterm-rules__body {
		padding: 18px 18px 20px;
		font-size: 15px;
		line-height: 24px;
	}
}