/* 2ranq Forms, the sections for the Full Widgets tab.

   Kept apart from `form.css` on purpose. A page usually has NO section while it
   does have a form, so these fifty odd kilobytes would travel for nothing. This
   file loads only when a section is really rendered.

   Every section is a copy of one of our own live sites, by the rules in
   `10-PRAVILA-FULL-WIDGET.md`. */

/* ------------------------------------------------------------------
   The contact widget, the section around the form

   A section measures itself against the place it was put, not against the
   screen. The same section can sit across a whole page and in a narrow side
   column, while WordPress splits its own columns only by SCREEN width. So in a
   narrow column on a large screen it would stay two columns of two hundred
   pixels each, which cannot be read.
   ------------------------------------------------------------------ */

.ranq-widget {
	container-type: inline-size;
}

/* The breakpoint is 782, the same one WordPress already uses for its columns.
   Were it smaller, on a tablet held upright the section would stay in two
   columns of 350 pixels, which does not read. */
@container ( max-width: 782px ) {

	/* `!important` is not decoration. Above 782 pixels WordPress writes
	   `flex-wrap: nowrap !important` itself, so without this the columns would
	   not split. */
	.ranq-widget .wp-block-columns:not( .is-not-stacked-on-mobile ) {
		flex-wrap: wrap !important;
	}

	.ranq-widget .wp-block-columns:not( .is-not-stacked-on-mobile ) > .wp-block-column {
		flex-basis: 100% !important;
	}
}


/* ------------------------------------------------------------------
   The section around the form, the small things that made it look untidy
   ------------------------------------------------------------------ */

/* The columns STRETCH to the same height, which is the default. Aligning to the
   top looked tidier when empty, but it broke the photograph: a column then has
   the height of its own content, so `height: 100%` on the image has nothing to
   inherit and the image ends up shorter than the text beside it. */
.ranq-widget .wp-block-columns {
	align-items: stretch;
}

/* A link inside a section inherits the text colour. The default blue with an
   underline looked like unstyled text, especially on a dark band. */
.ranq-widget a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	opacity: .92;
}

.ranq-widget a:hover {
	opacity: 1;
}

/* A row of detail. Our spacing was adding up with the paragraph spacing from
   the block style sheet, so there were 88 pixels between two rows instead of
   14. */
.ranq-widget .ranq-row {
	margin-bottom: 12px !important;
}

.ranq-widget .ranq-row p {
	margin: 0;
	line-height: 1.45;
}

.ranq-widget .ranq-row .wp-block-image {
	margin: 0;
}

/* The photograph fills the height of its column and is cropped, rather than
   setting the height of the whole section with its own. The icons are not
   touched by this, because they are `size-full`. */
.ranq-widget .ranq-photo {
	height: 100%;
	margin: 0;
}

.ranq-widget .ranq-photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 340px;
	object-fit: cover;
}

/* On a phone the column no longer has anything beside it, so the image has to be
   given a measure. Without this it would stretch across the whole screen. */
@container ( max-width: 782px ) {

	.ranq-widget .ranq-photo img {
		height: 300px;
		min-height: 0;
	}
}

/* The first heading in a column has no space above it, because the section
   already has some. */
.ranq-widget .wp-block-column > :first-child {
	margin-top: 0;
}

.ranq-widget h2,
.ranq-widget h3 {
	margin-bottom: 10px;
	line-height: 1.2;
}


/* The wide image in the section header. Without a height of its own it would
   keep a 4:3 ratio, so at a width of 1300 pixels it would be almost a thousand
   tall and swallow the whole section. */
.ranq-widget .ranq-photo--wide img {
	height: 400px;
	min-height: 0;
}

@container ( max-width: 782px ) {

	.ranq-widget .ranq-photo--wide img {
		height: 260px;
	}
}

/* The card that sits over the image. White on a white ground could not be seen,
   so the form looked as if it were floating without an edge. */
.ranq-widget .ranq-photo--wide + .wp-block-spacer + .wp-block-group {
	position: relative;
	margin-top: -64px;
	box-shadow: 0 18px 40px rgba( 16, 18, 26, .14 );
}


/* ------------------------------------------------------------------
   The section taken from 2ranq.com

   Every measurement was READ OFF the live site, not estimated. That is why the
   rules are written here rather than left to blocks: a block knows about size
   and colour, but not about the exact thickness, line height and letter spacing,
   and those small things are what separate "similar" from "the same".

   The typeface is NOT forced. The original uses Poppins, but a plugin that
   forces a typeface fights the theme of every site and asks for a request to
   somebody else's server on every page. The theme's typeface is inherited.
   ------------------------------------------------------------------ */

.ranq-2r {
	container-type: inline-size;

	/* The defaults sit here, once. The section prints only what a person changed,
	   so the record in the page is short or not there at all. */
	--r2r-bg: #000;
	--r2r-pad: 90px;
	--r2r-split: 55%;
	--r2r-eyebrow: #a0a0a0;
	--r2r-accent: #b2ff2e;
	--r2r-title: #e5e5e5;
	--r2r-title-size: 40px;
	--r2r-lead: #aeaeae;
	--r2r-lead-size: 17px;
	--r2r-key: #565656;
	--r2r-val: #e5e5e5;
	--r2r-line: #2b2b2b;
	--r2r-card-from: #181818;
	--r2r-card-to: #121212;
	--r2r-card-border: #2b2b2b;
	--r2r-card-radius: 20px;
	--r2r-card-pad: 36px;
	--r2r-fine: #737373;

	/* The spacing sits on the inner element, not here. A rule inside `@container`
	   does not hold for the container itself, so on a narrow screen the spacing
	   would stay unchanged. */
	background: var( --r2r-bg );
	color: var( --r2r-val );
}

/* No gap between the columns. The original has 715 and 585 out of 1300, that is
   exactly one hundred percent, and the air comes from the inner padding of the
   left column. With a gap, 55 plus 45 plus the gap would pass one hundred
   percent and the section would spill off the screen, which is what happened at
   1200 and 1024. */
.ranq-2r__inner {
	display: grid;
	grid-template-columns: var( --r2r-split ) calc( 100% - var( --r2r-split ) );
	gap: 0;

	/* 1300 is the CONTENT width, so the padding is added on top of the maximum. */
	box-sizing: border-box;
	max-width: calc( 1300px + 48px );
	padding: var( --r2r-pad ) 24px;
	margin: 0 auto;
}

/* 155 out of 715 is 22 percent, measured on the original: the content of the
   left column is 560. */
.ranq-2r__left {
	padding-right: 22%;
}

.ranq-2r__eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var( --r2r-eyebrow );
}

.ranq-2r__eyebrow span:first-child {
	color: var( --r2r-accent );
}

.ranq-2r__title.ranq-2r__title {
	margin: 0 0 22px;
	font-size: var( --r2r-title-size );
	font-weight: 500;
	line-height: 1.2;
	color: var( --r2r-title );
}

.ranq-2r__lead {
	margin: 0 0 34px;
	font-size: var( --r2r-lead-size );
	font-weight: 400;
	line-height: 1.65;
	color: var( --r2r-lead );
}

/* The table of details. The rule runs ABOVE every row and below the last one, as
   on the original, so it reads as a closed block and not as a list left
   hanging. */
.ranq-2r__rows {
	border-bottom: 1px solid var( --r2r-line );
}

.ranq-2r__row {
	display: flex;
	gap: 16px;
	align-items: baseline;
	padding: 16px 0;
	border-top: 1px solid var( --r2r-line );
}

.ranq-2r__key {
	flex: none;
	width: 112px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var( --r2r-key );
}

/* The class is written twice to beat the general rule for links inside a
   section, which underlines. The original has no underline here. */
.ranq-2r__row[hidden] {
	display: none !important;
}

.ranq-2r__val.ranq-2r__val {
	font-size: 16px;
	font-weight: 500;
	color: var( --r2r-val );
	text-decoration: none;
	opacity: 1;
}

.ranq-2r__val:hover {
	color: #b2ff2e;
}

/* The card around the form: a gradient, a thin border, a corner radius of 20,
   36 inside. */
.ranq-2r__card {
	padding: var( --r2r-card-pad );
	background: linear-gradient( var( --r2r-card-from ) 0%, var( --r2r-card-to ) 100% );
	border: 1px solid var( --r2r-card-border );
	border-radius: var( --r2r-card-radius );
}

.ranq-2r__fine {
	margin: 14px 0 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	color: var( --r2r-fine );
}

/* The break is at 900, measured on the original: above it two columns and a
   heading of 40, below it one column, a heading of 28 and 24 inside the card. */
@container ( max-width: 900px ) {

	.ranq-2r__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.ranq-2r__left {
		padding-right: 0;
	}

	/* On a narrower screen the heading and the card go to their smaller measures.
	   `min` keeps what a person set: if they picked 24, we do not push it up. */
	.ranq-2r__title {
		font-size: min( var( --r2r-title-size ), 28px );
	}

	.ranq-2r__card {
		padding: min( var( --r2r-card-pad ), 24px );
	}
}

@container ( max-width: 560px ) {

	.ranq-2r__inner {
		padding: min( var( --r2r-pad ), 56px ) 18px;
	}

	.ranq-2r__row {
		display: block;
		padding: 14px 0;
	}

	.ranq-2r__key {
		display: block;
		width: auto;
		margin-bottom: 4px;
	}
}

/* ------------------------------------------------------------------
   The section taken from transfergaja.rs

   The measurements were read off the live site: the section 1200, the columns
   570 and 570 with a gap of 60, the heading 48 with a line height of 58, the
   label 24 with 34, the value 15 with 27, the icon 50, the rule between the rows
   with 32 pixels above and below.

   The typeface is not forced. The original uses Gotu and Manrope, we inherit the
   theme.
   ------------------------------------------------------------------ */

.ranq-gaja {
	container-type: inline-size;

	--gaja-bg: #fff;
	--gaja-pad: 75px;
	--gaja-split: 50%;
	--gaja-gap: 60px;
	--gaja-icon: #f8b54a;
	--gaja-icon-size: 50px;
	--gaja-row-title: #252525;
	--gaja-row-size: 24px;
	--gaja-row-value: #252525;
	--gaja-line: #252525;
	--gaja-line-space: 32px;
	--gaja-eyebrow: #f8b54a;
	--gaja-eyebrow-size: 14px;
	--gaja-title: #252525;
	--gaja-title-size: 48px;
	--gaja-lead: #252525;
	--gaja-lead-size: 15px;

	/* The spacing sits on the inner element, for the same reason. */
	background: var( --gaja-bg );
	color: var( --gaja-row-value );
}

.ranq-gaja__inner {
	display: grid;
	/* The gap is taken off BOTH columns, so a 50 percent split gives 570 and 570
	   out of 1200, exactly as on the original. Were it taken off the second one
	   only, we would get 600 and 540. */
	grid-template-columns:
		calc( var( --gaja-split ) - var( --gaja-gap ) / 2 )
		calc( 100% - var( --gaja-split ) - var( --gaja-gap ) / 2 );
	gap: var( --gaja-gap );
	box-sizing: border-box;
	max-width: calc( 1200px + 48px );
	padding: var( --gaja-pad ) 24px;
	margin: 0 auto;
	align-items: var( --gaja-align, stretch );
}

/* The rows of detail. The rule runs BETWEEN the rows and not under the last one,
   as on the original. Hence `:not(:last-child)`, rather than a rule on each. */

.ranq-gaja__row {
	display: flex;
	gap: 15px;
	align-items: center;
}

.ranq-gaja__row:not( :last-child ) {
	padding-bottom: var( --gaja-line-space );
	margin-bottom: var( --gaja-line-space );
	border-bottom: 1px solid var( --gaja-line );
}

.ranq-gaja__icon {
	flex: none;
	width: var( --gaja-icon-size );
	height: var( --gaja-icon-size );
}

.ranq-gaja__text {
	display: block;
	min-width: 0;
}

/* The class is written twice to beat the general rule for links inside a
   section, which underlines. The original has no underline here. */
.ranq-gaja__title.ranq-gaja__title {
	display: block;
	opacity: 1;
	font-size: var( --gaja-row-size );
	font-weight: 400;
	line-height: 1.42;
	color: var( --gaja-row-title );
	text-decoration: none;
	text-transform: capitalize;
}

a.ranq-gaja__title.ranq-gaja__title:hover {
	color: var( --gaja-icon );
	opacity: 1;
}

.ranq-gaja__value {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.8;
	color: var( --gaja-row-value );
}

/* The right column */

.ranq-gaja__eyebrow {
	margin: 0 0 6px;
	font-size: var( --gaja-eyebrow-size );
	font-weight: 600;
	line-height: 1.8;
	text-transform: uppercase;
	color: var( --gaja-eyebrow );
}

.ranq-gaja__heading {
	margin: 0 0 10px;
	font-size: var( --gaja-title-size );
	font-weight: 400;
	line-height: 1.21;
	text-transform: capitalize;
	color: var( --gaja-title );
}

.ranq-gaja__lead {
	margin: 0 0 26px;
	font-size: var( --gaja-lead-size );
	font-weight: 500;
	line-height: 1.8;
	color: var( --gaja-lead );
}

.ranq-gaja__row[hidden] {
	display: none !important;
}

/* The break is at 1024, measured on the original. Above it two columns, below it
   one, and the heading and the row label go to their smaller measures. */
@container ( max-width: 1024px ) {

	.ranq-gaja__inner {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.ranq-gaja__heading {
		font-size: min( var( --gaja-title-size ), 42px );
	}

	/* The class is doubled here too, because the base rule is doubled as well.
	   Otherwise a smaller screen would stay on the large measure. */
	.ranq-gaja__title.ranq-gaja__title {
		font-size: min( var( --gaja-row-size ), 22px );
	}
}

@container ( max-width: 480px ) {

	.ranq-gaja__inner {
		padding: min( var( --gaja-pad ), 56px ) 18px;
	}

	.ranq-gaja__heading {
		font-size: min( var( --gaja-title-size ), 38px );
	}

	.ranq-gaja__title.ranq-gaja__title {
		font-size: min( var( --gaja-row-size ), 20px );
	}

	.ranq-gaja__icon {
		width: min( var( --gaja-icon-size ), 40px );
		height: min( var( --gaja-icon-size ), 40px );
	}
}

/* ------------------------------------------------------------------
   The booking card, taken from transfergaja.rs.

   The values come from the source of the `gaja-transfer-booking` plugin, not
   from the eye. The breakpoints are its own: 900 and 600, only they measure
   against the container, not against the screen.

   The typeface is not forced. The original uses Segoe UI, we inherit the theme.
   ------------------------------------------------------------------ */

.ranq-gjb {
	container-type: inline-size;

	--gjb-bg: #1a1a1a;
	--gjb-border: #363636;
	--gjb-radius: 10px;
	--gjb-width: 1200px;
	--gjb-pad: 32px;
	--gjb-outer: transparent;
	--gjb-outer-pad: 0px;
	--gjb-badge-bg: #f8b54a;
	--gjb-badge-ink: #1a1a1a;
	--gjb-badge-size: 50px;
	--gjb-title: #fff;
	--gjb-title-size: 40px;
	--gjb-lead: #999;
	--gjb-lead-size: 14px;

	padding: var(--gjb-outer-pad) 0;
	background: var(--gjb-outer);
}

.ranq-gjb__card {
	max-width: var(--gjb-width);
	margin: 0 auto;
	border: 1px solid var(--gjb-border);
	border-radius: var(--gjb-radius);
	background: var(--gjb-bg);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .2);
}

.ranq-gjb__head {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 28px var(--gjb-pad) 0;
}

.ranq-gjb__badge {
	display: flex;
	width: var(--gjb-badge-size);
	height: var(--gjb-badge-size);
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: var(--gjb-radius);
	background: var(--gjb-badge-bg);
}

.ranq-gjb__badge img {
	width: 52%;
	height: 52%;
}

.ranq-gjb__words {
	display: block;
	min-width: 0;
}

.ranq-gjb__heading {
	display: block;
	color: var(--gjb-title);
	font-size: var(--gjb-title-size);
	font-weight: 400;
	line-height: 1.25;
}

.ranq-gjb__lead {
	display: block;
	margin-top: 3px;
	color: var(--gjb-lead);
	font-size: var(--gjb-lead-size);
	line-height: 1.4;
}

.ranq-gjb__body {
	padding: 22px var(--gjb-pad) var(--gjb-pad);
}

/* The form inside runs across the whole card. Without this the general upper
   limit of 640 pixels would squeeze it into the left half. */
.ranq-gjb__body .ranq-form {
	max-width: none;
}

/* The measures are pushed down onto the children, not onto the root itself, and
   always through `min()`, so a value a person set is respected when it is
   smaller than the limit. */
@container ( max-width: 900px ) {

	.ranq-gjb__head {
		padding: 24px min( var(--gjb-pad), 24px ) 0;
	}

	.ranq-gjb__body {
		padding: 20px min( var(--gjb-pad), 24px ) 28px;
	}

	.ranq-gjb__heading {
		font-size: min( var(--gjb-title-size), 36px );
	}
}

@container ( max-width: 600px ) {

	.ranq-gjb__head {
		padding: 20px min( var(--gjb-pad), 18px ) 0;
	}

	.ranq-gjb__body {
		padding: 16px min( var(--gjb-pad), 18px ) 24px;
	}

	.ranq-gjb__heading {
		font-size: min( var(--gjb-title-size), 32px );
	}
}

/* ------------------------------------------------------------------
   The section taken from mitaleks.rs.

   The values come from its `assets/css/glavni.css`, not from the eye. The
   breakpoints are its own, 860 and 620, only they measure against the container
   and not against the screen.

   The typeface is not forced. The original uses Barlow Condensed and Inter, we
   inherit the theme. The uppercase and the letter spacing stay, because that is
   not the typeface but the arrangement.
   ------------------------------------------------------------------ */

.ranq-mit {
	container-type: inline-size;

	--mit-bg: #12291a;

	/* The original: `clamp(52px, 6vw, 76px)`. Ours uses `cqw`, because the section
	   measures against its container. Once a person moves the slider, an exact
	   measure is written in and this no longer holds, which is the point. */
	--mit-pad: clamp( 52px, 6cqw, 76px );
	--mit-split: 50%;
	--mit-gap: clamp( 30px, 5cqw, 60px );
	--mit-title: #fff;
	--mit-title-size: clamp( 1.9rem, 3.6cqw, 2.7rem );
	--mit-lead: rgba( 255, 255, 255, .76 );
	--mit-lead-size: 16px;
	--mit-btn-bg: #fff;
	--mit-btn-ink: #12291a;
	--mit-btn-line: rgba( 255, 255, 255, .45 );
	--mit-btn-radius: 10px;
	--mit-name: #fff;
	--mit-name-size: 24px;
	--mit-icon: #4a9a4f;
	--mit-row: rgba( 255, 255, 255, .8 );
	--mit-row-size: 15px;
	--mit-row-gap: 13px;

	background: var( --mit-bg );
	color: var( --mit-row );
}

.ranq-mit__inner {
	display: grid;

	/* The gap is taken off BOTH columns, as on the original, so a half and half
	   split gives two equal columns. */
	grid-template-columns:
		calc( var( --mit-split ) - var( --mit-gap ) / 2 )
		calc( 100% - var( --mit-split ) - var( --mit-gap ) / 2 );
	gap: var( --mit-gap );
	align-items: var( --mit-align, center );
	box-sizing: border-box;

	/* 1200 is the whole width, the padding is INSIDE it, so the content is 1156
	   and the columns 548, exactly as on the original. */
	max-width: 1200px;
	padding: var( --mit-pad ) 22px;
	margin: 0 auto;
}

.ranq-mit__heading.ranq-mit__heading {
	margin: 0 0 .5em;
	color: var( --mit-title );
	font-size: var( --mit-title-size );
	font-weight: 700;
	letter-spacing: .002em;
	line-height: 1.05;
	text-transform: uppercase;
}

.ranq-mit__lead.ranq-mit__lead {
	max-width: 46ch;
	margin: 0;
	color: var( --mit-lead );
	font-size: var( --mit-lead-size );
	line-height: 1.6;
}

.ranq-mit__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.8rem;
}

.ranq-mit__btn.ranq-mit__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	border: 2px solid transparent;
	border-radius: var( --mit-btn-radius );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background .16s, color .16s, border-color .16s, transform .16s;
}

.ranq-mit__btn.ranq-mit__btn:hover {
	transform: translateY( -1px );
}

.ranq-mit__btn--full.ranq-mit__btn--full {
	background: var( --mit-btn-bg );
	color: var( --mit-btn-ink );
}

.ranq-mit__btn--line.ranq-mit__btn--line {
	border-color: var( --mit-btn-line );
	background: transparent;

	/* Its own text colour, not the colour of a filled button. */
	color: var( --mit-btn2-ink, #fff );
}

.ranq-mit__btn--line.ranq-mit__btn--line:hover {
	border-color: var( --mit-btn-bg );
	background: var( --mit-btn-bg );
	color: var( --mit-btn-ink );
}

.ranq-mit__name.ranq-mit__name {
	margin: 2.4rem 0 1rem;
	color: var( --mit-name );
	font-size: var( --mit-name-size );
	font-weight: 700;
	letter-spacing: .015em;
	line-height: 1.05;
	text-transform: uppercase;
}

.ranq-mit__rows {
	display: grid;
	gap: var( --mit-row-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

.ranq-mit__row {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 12px;
	align-items: start;
	margin: 0;
	color: var( --mit-row );
	font-size: var( --mit-row-size );
	line-height: 1.5;
}

.ranq-mit__icon {
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.ranq-mit__link.ranq-mit__link {
	color: inherit;
	text-decoration: none;
}

.ranq-mit__link.ranq-mit__link:hover {
	color: #fff;
	text-decoration: underline;
}

@container ( max-width: 860px ) {

	.ranq-mit__inner {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@container ( max-width: 620px ) {

	.ranq-mit__inner {
		padding-inline: 18px;
	}
}

/* ------------------------------------------------------------------
   The section taken from ortopedijauna.rs.

   The values come from its `elementor/css/post-4179.css`, plus measuring the
   form on the live page, because Elementor does not say how WPForms draws its
   fields.

   The breakpoint is its own, 768, only it measures against the container.
   ------------------------------------------------------------------ */

.ranq-una {
	container-type: inline-size;

	--una-bg: #282a53;
	--una-pad: 21px;
	/* The original: exactly 62.33 percent. The slider works in whole numbers, so
	   the default sits here, and the slider changes it only once a person moves
	   it. */
	--una-card-width: 62.33%;
	--una-card-bg: #fff;
	--una-card-radius: 20px;
	--una-card-pad: 30px;
	--una-card-shadow: rgba( 0, 0, 0, .5 );
	--una-title: #fff;
	--una-title-size: 40px;
	--una-link-hover: #0076fe;

	background: var( --una-bg );
}

.ranq-una__inner {
	box-sizing: border-box;
	padding: var( --una-pad );
}

.ranq-una__heading.ranq-una__heading {
	margin: 0 0 var( --una-pad );
	color: var( --una-title );
	font-size: var( --una-title-size );
	font-weight: 900;
	line-height: 1.2;
	text-align: center;
}

.ranq-una__call.ranq-una__call {
	color: var( --una-link, inherit );
	text-decoration: underline;
}

.ranq-una__call.ranq-una__call:hover,
.ranq-una__call.ranq-una__call:focus {
	color: var( --una-link-hover );
}

.ranq-una__card {
	box-sizing: border-box;
	width: var( --una-card-width );
	padding: var( --una-card-pad );
	border-radius: var( --una-card-radius );
	margin: 0 auto;
	background: var( --una-card-bg );
	box-shadow: 0 0 10px 0 var( --una-card-shadow );
}

/* The form inside runs across the whole card, otherwise the general limit of 640
   pixels squeezes it into the left half. */
.ranq-una__card .ranq-form {
	max-width: none;
}

@container ( max-width: 768px ) {

	.ranq-una__inner {
		padding: min( var( --una-pad ), 10px );
	}

	.ranq-una__heading.ranq-una__heading {
		font-size: min( var( --una-title-size ), 35px );
	}

	.ranq-una__card {
		width: 100%;
		max-width: 375px;
		padding: min( var( --una-card-pad ), 15px );
	}
}

/* ------------------------------------------------------------------
   The section taken from mary-jana.com.

   Measured on the live page, because it was built in Elementor so the values are
   not in the theme. The section has no ground of its own, it stands on the page
   ground, like the original.
   ------------------------------------------------------------------ */

.ranq-mj {
	container-type: inline-size;

	--mj-bg: transparent;
	--mj-pad: 40px;
	--mj-split: 50%;
	--mj-gap: 48px;
	--mj-title: #473122;
	--mj-title-size: 22px;
	--mj-rule: rgba( 0, 0, 0, .11 );
	--mj-icon: #875e41;
	--mj-icon-size: 40px;
	--mj-row-key: #242424;
	--mj-row: #3a3a3a;
	--mj-row-size: 16px;
	--mj-row-gap: 28px;

	background: var( --mj-bg );
	color: var( --mj-row );
}

.ranq-mj__inner {
	display: grid;
	grid-template-columns:
		calc( var( --mj-split ) - var( --mj-gap ) / 2 )
		calc( 100% - var( --mj-split ) - var( --mj-gap ) / 2 );
	gap: var( --mj-gap );
	align-items: var( --mj-align, center );
	box-sizing: border-box;
	max-width: 1410px;
	padding: var( --mj-pad ) 20px;
	margin: 0 auto;
}

/* The heading carries a thin line that runs to the end of the column. The line
   is part of the heading and not a separate element, so the two cannot drift
   apart. */
.ranq-mj__heading.ranq-mj__heading {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 1.2em;
	color: var( --mj-title );
	font-size: var( --mj-title-size );
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
}

.ranq-mj__heading.ranq-mj__heading::after {
	height: 1px;
	flex: 1;
	background: var( --mj-rule );
	content: "";
}

.ranq-mj__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --mj-row-gap );
}

.ranq-mj__row {
	display: grid;
	grid-template-columns: var( --mj-icon-size ) 1fr;
	gap: 14px;
	align-items: start;
	color: var( --mj-row );
	font-size: var( --mj-row-size );
	line-height: 1.6;
}

.ranq-mj__icon {
	width: var( --mj-icon-size );
	height: var( --mj-icon-size );
}

.ranq-mj__key {
	color: var( --mj-row-key );
	font-weight: 700;
}

.ranq-mj__link.ranq-mj__link {
	color: inherit;
	text-decoration: none;
}

.ranq-mj__link.ranq-mj__link:hover {
	text-decoration: underline;
}

.ranq-mj__right .ranq-form {
	max-width: none;
}

@container ( max-width: 900px ) {

	.ranq-mj__inner {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@container ( max-width: 520px ) {

	.ranq-mj__grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Every section counts its width WITH the padding and the border. Without this
   `width: 100%` on a button with inner padding runs off the screen, which is
   what happened. */
.ranq-2r *,
.ranq-gaja *,
.ranq-gjb *,
.ranq-mit *,
.ranq-una *,
.ranq-mj *,
.ranq-cry *,
.ranq-st *,
.ranq-fz *,
.ranq-bh *,
.ranq-cv *,
.ranq-md *,
.ranq-fp * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
   The section taken from cryptomenjacnica.com.

   The values come from its `/assets/css/app.css`, including the gradient, the
   buttons and the look of the calculator fields, which is the only real form on
   that site.
   ------------------------------------------------------------------ */

.ranq-cry {
	container-type: inline-size;

	--cry-bg: #0b2a4a;
	--cry-glow: rgba( 0, 179, 136, .12 );
	--cry-pad: 72px;
	--cry-form-width: 640px;
	--cry-title: #fff;
	--cry-title-size: clamp( 28px, 4cqw, 40px );
	--cry-lead: rgba( 255, 255, 255, .78 );
	--cry-lead-size: 18px;
	--cry-btn-line: rgba( 255, 255, 255, .3 );
	--cry-btn-ink: #fff;
	--cry-btn-radius: 10px;

	background:
		radial-gradient( 800px 400px at 50% 0%, var( --cry-glow ), transparent 60% ),
		var( --cry-bg );
	color: var( --cry-lead );
}

.ranq-cry__inner {
	box-sizing: border-box;
	max-width: 1200px;
	padding: var( --cry-pad ) 24px;
	margin: 0 auto;
	text-align: center;
}

.ranq-cry__heading.ranq-cry__heading {
	margin: 0 0 12px;
	color: var( --cry-title );
	font-size: var( --cry-title-size );
	line-height: 1.15;
}

.ranq-cry__lead.ranq-cry__lead {
	max-width: 640px;
	margin: 0 auto 28px;
	color: var( --cry-lead );
	font-size: var( --cry-lead-size );
	line-height: 1.5;
}

.ranq-cry__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 28px;
}

.ranq-cry__btn.ranq-cry__btn {
	display: inline-flex;
	min-height: 56px;
	align-items: center;
	justify-content: center;
	padding: 0 28px;
	border: 1px solid var( --cry-btn-line );
	border-radius: var( --cry-btn-radius );
	background: transparent;
	color: var( --cry-btn-ink );
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease, transform .16s ease;
	white-space: nowrap;
}

.ranq-cry__btn.ranq-cry__btn:hover {
	border-color: var( --cry-btn-ink );
	background: rgba( 255, 255, 255, .08 );
	transform: translateY( -1px );
}

/* The form is centred, like everything else in this section. */
.ranq-cry__form .ranq-form {
	max-width: var( --cry-form-width );
	margin: 0 auto;
	text-align: start;
}

/* Below 720 the original shrinks both the spacing and the heading, exactly like
   this. */
@container ( max-width: 720px ) {

	.ranq-cry__inner {
		padding: min( var( --cry-pad ), 48px ) 24px;
	}

	.ranq-cry__heading.ranq-cry__heading {
		font-size: clamp( 24px, 6cqw, 32px );
	}

	.ranq-cry__lead.ranq-cry__lead {
		font-size: min( var( --cry-lead-size ), 16px );
	}

	/* Here the original stacks the buttons one under the other, across the full
   width. */
	.ranq-cry__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.ranq-cry__btn {
		width: 100%;
		white-space: normal;
	}
}

/* ------------------------------------------------------------------
   The section taken from sigurnitelefoni.com.

   Measured on the live page, because it was built in Elementor so the values are
   not in the theme. The image is ours, out of `assets/img/`, and is changed from
   the tab.
   ------------------------------------------------------------------ */

.ranq-st {
	container-type: inline-size;

	--st-bg: #f7f7fb;
	--st-pad: 64px;
	--st-split: 50%;
	--st-gap: 24px;
	--st-title: #111013;
	--st-title-size: 26px;
	--st-lead: #797a8c;
	--st-lead-size: 17px;
	--st-card-bg: #f3f3f4;
	--st-card-radius: 10px;
	--st-card-pad: 24px;
	--st-photo-width: 46%;
	--st-icon: #4a81d3;
	--st-row-key: #212529;
	--st-row-key-size: 17px;
	--st-row: #797a8c;
	--st-row-gap: 22px;

	background: var( --st-bg );
	color: var( --st-row );
}

.ranq-st__inner {
	/* 1280 is the CONTENT width on the original, so the padding is added on top of
	   the limit, otherwise the columns come out 613 instead of 628. */
	max-width: calc( 1280px + 30px );
	padding: var( --st-pad ) 15px;
	margin: 0 auto;
}

.ranq-st__heading.ranq-st__heading {
	margin: 0 0 8px;
	color: var( --st-title );
	font-size: var( --st-title-size );
	font-weight: 600;
	line-height: 1.6;
}

.ranq-st__lead.ranq-st__lead {
	max-width: 640px;
	margin: 0 0 28px;
	color: var( --st-lead );
	font-size: var( --st-lead-size );
	line-height: 1.9;
}

.ranq-st__cols {
	display: grid;
	grid-template-columns:
		calc( var( --st-split ) - var( --st-gap ) / 2 )
		calc( 100% - var( --st-split ) - var( --st-gap ) / 2 );
	gap: var( --st-gap );
	align-items: var( --st-align, center );
}

.ranq-st__card {
	display: flex;
	gap: var( --st-card-pad );
	align-items: center;
	padding: var( --st-card-pad );
	border-radius: var( --st-card-radius );
	background: var( --st-card-bg );
}

/* The image fills the height of its part of the card. Without `object-fit` it
   would dictate the height of the whole card. */
.ranq-st__photo {
	width: var( --st-photo-width );
	height: 100%;
	min-height: 260px;
	flex: 0 0 auto;
	border-radius: calc( var( --st-card-radius ) - 2px );
	object-fit: cover;
}

.ranq-st__rows {
	display: grid;
	gap: var( --st-row-gap );
	min-width: 0;
}

.ranq-st__key {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var( --st-row-key );
	font-size: var( --st-row-key-size );
	font-weight: 700;
	line-height: 1.4;
}

.ranq-st__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.ranq-st__value {
	display: block;
	color: var( --st-row );
	font-size: 14px;
	line-height: 1.9;
}

.ranq-st__link.ranq-st__link {
	color: inherit;
	text-decoration: none;
}

.ranq-st__link.ranq-st__link:hover {
	text-decoration: underline;
}

.ranq-st__form .ranq-form {
	max-width: none;
}

@container ( max-width: 900px ) {

	.ranq-st__cols {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@container ( max-width: 560px ) {

	.ranq-st__card {
		flex-direction: column;
		align-items: stretch;
	}

	/* On a phone the image gets a measure of its own, because there is no longer a
	   column beside it to inherit a height from. */
	.ranq-st__photo {
		width: 100%;
		height: 200px;
		min-height: 0;
	}
}

/* ------------------------------------------------------------------
   The section taken from fizikalneterapije.rs.
   ------------------------------------------------------------------ */

.ranq-fz {
	container-type: inline-size;

	--fz-bg: #fff;
	--fz-pad: 56px;
	/* On the original the image is 435 out of 1140. After half the gap is taken off
	   that is exactly 40.3 percent. */
	--fz-split: 40.3%;
	--fz-gap: 48px;
	--fz-photo-radius: 0px;
	--fz-photo-height: 543px;
	--fz-title: #075aad;
	--fz-title-size: 40px;
	--fz-icon: #075aad;
	--fz-icon-size: 24px;
	--fz-row: #d47940;
	--fz-row-size: 16px;
	--fz-row-gap: 18px;

	background: var( --fz-bg );
	color: var( --fz-row );
}

.ranq-fz__inner {
	display: grid;
	grid-template-columns:
		calc( var( --fz-split ) - var( --fz-gap ) / 2 )
		calc( 100% - var( --fz-split ) - var( --fz-gap ) / 2 );
	gap: var( --fz-gap );
	align-items: var( --fz-align, center );
	max-width: calc( 1140px + 20px );
	padding: var( --fz-pad ) 10px;
	margin: 0 auto;
}

.ranq-fz__photo {
	width: 100%;
	height: var( --fz-photo-height );
	border-radius: var( --fz-photo-radius );
	object-fit: cover;
}

.ranq-fz__heading.ranq-fz__heading {
	margin: 0 0 24px;
	color: var( --fz-title );
	font-size: var( --fz-title-size );
	font-weight: 700;
	line-height: 1;
}

.ranq-fz__rows {
	display: grid;
	gap: var( --fz-row-gap );
	margin-bottom: 28px;
}

.ranq-fz__row {
	display: grid;
	grid-template-columns: var( --fz-icon-size ) 1fr;
	gap: 12px;
	align-items: center;
	color: var( --fz-row );
	font-size: var( --fz-row-size );
	line-height: 1.6;
}

.ranq-fz__icon {
	width: var( --fz-icon-size );
	height: var( --fz-icon-size );
}

.ranq-fz__link.ranq-fz__link {
	color: inherit;
	text-decoration: none;
}

.ranq-fz__link.ranq-fz__link:hover {
	text-decoration: underline;
}

.ranq-fz__right .ranq-form {
	max-width: none;
}

@container ( max-width: 900px ) {

	.ranq-fz__inner {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* On a phone the image gets a measure of its own, because there is no column
	   beside it any more. */
	.ranq-fz__photo {
		height: min( var( --fz-photo-height ), 320px );
	}

	.ranq-fz__heading.ranq-fz__heading {
		font-size: min( var( --fz-title-size ), 32px );
	}
}

/* ------------------------------------------------------------------
   The section taken from belgradehotspot.com.
   ------------------------------------------------------------------ */

.ranq-bh {
	container-type: inline-size;

	--bh-bg: #090330;
	--bh-pad: 80px;
	--bh-width: 1140px;
	--bh-title: #fff;
	--bh-title-size: 40px;
	--bh-title-gap: 32px;
	--bh-lead: rgba( 255, 255, 255, .75 );
	--bh-lead-size: 17px;

	background: var( --bh-bg );
	color: var( --bh-lead );
}

.ranq-bh__inner {
	/* The width is the CONTENT width, so the padding is added on top of the limit. */
	max-width: calc( var( --bh-width ) + 40px );
	padding: var( --bh-pad ) 20px;
	margin: 0 auto;
}

.ranq-bh__heading.ranq-bh__heading {
	margin: 0 0 12px;
	color: var( --bh-title );
	font-size: var( --bh-title-size );
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

.ranq-bh__lead.ranq-bh__lead {
	max-width: 720px;
	margin: 0 auto var( --bh-title-gap );
	color: var( --bh-lead );
	font-size: var( --bh-lead-size );
	line-height: 1.5;
	text-align: center;
}

.ranq-bh__inner .ranq-form {
	max-width: none;
}

@container ( max-width: 700px ) {

	.ranq-bh__heading.ranq-bh__heading {
		font-size: min( var( --bh-title-size ), 30px );
	}
}

/* ------------------------------------------------------------------
   The section taken from cvecaranena.rs.

   The card overlaps the image on the right, as on the original. Below 900 it
   drops under the image, because on a narrow screen the overlap swallows half
   the picture.
   ------------------------------------------------------------------ */

.ranq-cv {
	container-type: inline-size;

	--cv-bg: #fff;
	--cv-pad: 56px;
	--cv-overlap: 60px;
	--cv-title: #222;
	--cv-title-size: 48px;
	--cv-lead: #000;
	--cv-lead-size: 20px;
	--cv-photo-radius: 15px;
	--cv-photo-height: 580px;
	--cv-card-bg: rgba( 255, 249, 245, .92 );
	--cv-card-radius: 15px;
	--cv-card-pad: 24px;
	--cv-card-width: 435px;
	--cv-ink: #513065;
	--cv-icon: #c2185b;
	--cv-row-size: 15px;
	--cv-row-gap: 14px;

	background: var( --cv-bg );
}

.ranq-cv__inner {
	max-width: 1240px;
	padding: var( --cv-pad ) 20px;
	margin: 0 auto;
}

.ranq-cv__heading.ranq-cv__heading {
	margin: 0 0 16px;
	color: var( --cv-title );
	font-size: var( --cv-title-size );
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.ranq-cv__lead.ranq-cv__lead {
	max-width: 1000px;
	margin: 0 auto 32px;
	color: var( --cv-lead );
	font-size: var( --cv-lead-size );
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
}

.ranq-cv__band {
	display: flex;
	align-items: var( --cv-align, center );
}

.ranq-cv__photo {
	width: 100%;
	height: var( --cv-photo-height );
	min-width: 0;
	border-radius: var( --cv-photo-radius );
	object-fit: cover;
}

.ranq-cv__card {
	width: var( --cv-card-width );
	flex: 0 0 auto;
	padding: var( --cv-card-pad );
	border-radius: var( --cv-card-radius );
	margin-left: calc( var( --cv-overlap ) * -1 );
	background: var( --cv-card-bg );
	box-shadow: 0 0 10px rgba( 0, 0, 0, .5 );
	color: var( --cv-ink );
}

.ranq-cv__cardtitle.ranq-cv__cardtitle {
	margin: 0 0 14px;
	color: var( --cv-ink );
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
}

.ranq-cv__rows {
	display: grid;
	gap: var( --cv-row-gap );
	margin-bottom: 20px;
}

.ranq-cv__key {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var( --cv-ink );
	font-size: calc( var( --cv-row-size ) + 3px );
	font-weight: 700;
	line-height: 1.3;
}

.ranq-cv__icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.ranq-cv__value {
	display: block;
	color: var( --cv-ink );
	font-size: var( --cv-row-size );
	line-height: 1.6;
}

.ranq-cv__link.ranq-cv__link {
	color: inherit;
	text-decoration: none;
}

.ranq-cv__link.ranq-cv__link:hover {
	text-decoration: underline;
}

.ranq-cv__card .ranq-form {
	max-width: none;
}

@container ( max-width: 900px ) {

	.ranq-cv__band {
		display: block;
	}

	.ranq-cv__photo {
		height: min( var( --cv-photo-height ), 300px );
	}

	.ranq-cv__card {
		width: auto;
		margin: -40px 16px 0;
	}

	.ranq-cv__heading.ranq-cv__heading {
		font-size: min( var( --cv-title-size ), 34px );
	}
}

/* ------------------------------------------------------------------
   The section taken from medijacijabeograd.com.
   ------------------------------------------------------------------ */

.ranq-md {
	container-type: inline-size;

	--md-bg: #0b1b2a;
	--md-pad: 60px;
	--md-split: 50%;
	--md-gap: 60px;
	--md-photo-size: 160px;
	--md-photo-radius: 12px;
	--md-name: #fff;
	--md-name-size: 17px;
	--md-icon: #f88054;
	--md-row: #fff;
	--md-row-size: 16px;
	--md-row-gap: 14px;

	background: var( --md-bg );
	color: var( --md-row );
}

.ranq-md__inner {
	display: grid;
	grid-template-columns:
		calc( var( --md-split ) - var( --md-gap ) / 2 )
		calc( 100% - var( --md-split ) - var( --md-gap ) / 2 );
	gap: var( --md-gap );
	align-items: var( --md-align, center );
	max-width: calc( 1015px + 20px );
	padding: var( --md-pad ) 10px;
	margin: 0 auto;
}

.ranq-md__left .ranq-form {
	max-width: none;
}

.ranq-md__right {
	text-align: center;
}

.ranq-md__photo {
	width: var( --md-photo-size );
	height: var( --md-photo-size );
	border-radius: var( --md-photo-radius );
	margin: 0 auto 16px;
	object-fit: cover;
}

.ranq-md__name.ranq-md__name {
	margin: 0 0 6px;
	color: var( --md-name );
	font-size: var( --md-name-size );
	font-weight: 600;
	line-height: 1.4;
}

.ranq-md__note.ranq-md__note {
	margin: 0 0 18px;
	color: var( --md-row );
	font-size: calc( var( --md-row-size ) - 2px );
	line-height: 1.5;
	opacity: .8;
}

.ranq-md__rows {
	display: grid;
	gap: var( --md-row-gap );
	justify-items: center;
}

.ranq-md__row {
	display: flex;
	gap: 10px;
	align-items: center;
	color: var( --md-row );
	font-size: var( --md-row-size );
	line-height: 1.5;
}

.ranq-md__icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.ranq-md__link.ranq-md__link {
	color: inherit;
	text-decoration: none;
}

.ranq-md__link.ranq-md__link:hover {
	text-decoration: underline;
}

@container ( max-width: 900px ) {

	.ranq-md__inner {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* The details go above the form on a narrow screen, because who this is comes
   first. */
	.ranq-md__right {
		order: -1;
	}
}

/* ------------------------------------------------------------------
   The section taken from fairplay.org.rs.
   ------------------------------------------------------------------ */

.ranq-fp {
	container-type: inline-size;

	--fp-bg: transparent;
	--fp-pad: 48px;
	--fp-split: 50%;
	--fp-gap: 32px;
	--fp-title: #242424;
	--fp-title-size: 48px;
	--fp-card-bg: #242424;
	--fp-card-radius: 6px;
	--fp-card-pad: 36px;
	--fp-icon: #ffcc01;
	--fp-icon-size: 26px;
	--fp-row-key: #fff;
	--fp-row-key-size: 17px;
	--fp-row: rgba( 255, 255, 255, .85 );
	--fp-row-gap: 24px;

	background: var( --fp-bg );
}

.ranq-fp__inner {
	max-width: calc( 1400px + 40px );
	padding: var( --fp-pad ) 20px;
	margin: 0 auto;
}

.ranq-fp__heading.ranq-fp__heading {
	margin: 0 0 28px;
	color: var( --fp-title );
	font-size: var( --fp-title-size );
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

.ranq-fp__cols {
	display: grid;
	grid-template-columns:
		calc( var( --fp-split ) - var( --fp-gap ) / 2 )
		calc( 100% - var( --fp-split ) - var( --fp-gap ) / 2 );
	gap: var( --fp-gap );
	align-items: var( --fp-align, center );
}

.ranq-fp__card {
	display: grid;
	gap: var( --fp-row-gap );
	padding: var( --fp-card-pad );
	border-radius: var( --fp-card-radius );
	background: var( --fp-card-bg );
}

.ranq-fp__row {
	display: grid;
	grid-template-columns: var( --fp-icon-size ) 1fr;
	gap: 14px;
	align-items: start;
}

.ranq-fp__icon {
	width: var( --fp-icon-size );
	height: var( --fp-icon-size );
	margin-top: 2px;
}

.ranq-fp__text {
	display: block;
	min-width: 0;
}

.ranq-fp__key {
	display: block;
	color: var( --fp-row-key );
	font-size: var( --fp-row-key-size );
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ranq-fp__value {
	display: block;
	color: var( --fp-row );
	font-size: calc( var( --fp-row-key-size ) - 2px );
	line-height: 1.5;
	word-break: break-word;
}

.ranq-fp__link.ranq-fp__link {
	color: inherit;
	text-decoration: none;
}

.ranq-fp__link.ranq-fp__link:hover {
	text-decoration: underline;
}

.ranq-fp__form .ranq-form {
	max-width: none;
}

@container ( max-width: 900px ) {

	.ranq-fp__cols {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ranq-fp__heading.ranq-fp__heading {
		font-size: min( var( --fp-title-size ), 34px );
	}
}