/* ============================================================
   BMA Iskra Testimonials  v1.0.0

   Ena kratka koda, dva prikaza:
     .bmt--vertical    kartica: medij zgoraj, citat, na dnu podatki
     .bmt--horizontal  velika kartica po Figmi: medij levo, citat desno

   Poudarna barva (--bmt-accent) krmili crto ob imenu, narekovaj,
   ploscice, puscice in pikice v obeh prikazih.

   Tipografija po Figmi, clamp() za 430–1440px.
   ============================================================ */

.bmt {
	/* --- barve --- */
	--bmt-accent:      var(--FMS-Electric-Blue, #0046FF);

	--bmt-accent-off:  #A9C4FF;
	--bmt-accent-off:  color-mix(in srgb, var(--bmt-accent) 34%, #fff);

	--bmt-accent-soft: #EEF3FF;
	--bmt-accent-soft: color-mix(in srgb, var(--bmt-accent) 9%, #fff);

	--bmt-ink:         var(--FMS-Deep-Blue, #002749);

	/* Naslov in podnaslov sledita besedilu, dokler ju ne nastavis posebej. */
	--bmt-title:       var(--bmt-ink);
	--bmt-subtitle:    var(--bmt-muted);

	--bmt-muted:       #6C8296;
	--bmt-muted:       color-mix(in srgb, var(--bmt-ink) 62%, #fff);

	--bmt-line:        #DEE6ED;
	--bmt-line:        color-mix(in srgb, var(--bmt-ink) 13%, #fff);

	--bmt-card:        var(--Fill-Iskra-White, #FFF);
	--bmt-media-bg:    var(--FMS-Care-Light-Blue, #EDF4F9);
	--bmt-bg:          transparent;
	/* preliv cez medij v horizontalni kartici, da je ime berljivo */
	--bmt-media-veil:  var(--FMS-Care-Light-Blue, #EDF4F9);

	/* --- mere --- */
	--bmt-per-d:   3;
	--bmt-per-t:   2;
	--bmt-per-m:   1;
	--bmt-per:     var(--bmt-per-d);
	--bmt-gap:     20px;
	--bmt-peek:    0px;
	--bmt-radius:  20px;
	/*
	 * Medij v vertikalni kartici drzi razmerje, ne stevila pik.
	 *
	 * Pri fiksnih 235px je bil izrez odvisen od sirine kartice: pri treh
	 * karticah v vrsti se je videlo 48% visine portreta, pri dveh na
	 * tablici pa le se 37% — glava ni sla noter pri nobeni nastavitvi
	 * tocke izreza. Razmerje 5/4 pokaze 60% pri vsaki sirini.
	 * height="" v kratki kodi to po potrebi povozi s fiksno visino.
	 */
	--bmt-media-ratio: 5 / 4;
	--bmt-media-h: auto;
	--bmt-media-w: 333px;   /* sirina medija v horizontalni kartici */

	/*
	 * Tocka slike, ki ostane v okvirju.
	 *
	 * Kartica je siroka, portret pa visok: pri object-fit:cover vidimo le
	 * pas slike. Sredina (50% 50%) pade cloveku na prsi in glavo odreze,
	 * zato pas dvignemo tja, kjer je obraz.
	 *
	 * 15% je izmerjeno, ne ocenjeno: pri sestih portretih z Evidence Huba
	 * obraz sega od 17% do 64% visine slike, in pri razmerju 5/4 je to
	 * edini razpon, ki vse skupaj zajame z rezervo nad temenom in pod
	 * brado. Posamezen portret se odstopa, se popravi s poljem Image crop.
	 * Pri lezecih slikah rezemo po sirini in ta vrednost nima ucinka.
	 */
	--bmt-focus:   50% 15%;
	--bmt-card-h:  500px;   /* najmanjsa visina horizontalne kartice */
	--bmt-pad-y:   clamp(36px, 4.4vw, 64px);
	--bmt-clamp:   4;
	--bmt-interval: 6000ms;
	--bmt-ease:    cubic-bezier(.4, 0, .2, 1);

	/* --- tipografija --- */
	--bmt-font:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bmt-h2-size: clamp(28px, calc(22.90px + 1.188vw), 40px);
	--bmt-t1-size: clamp(15px, calc(14.15px + .198vw), 17px);
	--bmt-t1-lh:   clamp(23px, calc(21.30px + .396vw), 27px);
	--bmt-t2-size: 15px;
	--bmt-t2-lh:   24px;

	padding: var(--bmt-pad-y) 0;
	background: var(--bmt-bg);
	font-family: var(--bmt-font);
	font-feature-settings: 'liga' off, 'clig' off;
	color: var(--bmt-ink);
	box-sizing: border-box;
}

.bmt *,
.bmt *::before,
.bmt *::after {
	box-sizing: border-box;
}

/*
 * Horizontalni prikaz ima svojo, vecjo lestvico in svetlo modro podlago.
 *
 * Mere so iz Figme, in sicer dve tocki, med katerima clamp() interpolira:
 *   namizje (>=1200px)  naslov 60/60 medium, podnaslov 25/31, citat 17/27
 *   mobilno (<=767px)   naslov 40/40 regular, podnaslov 25/31, citat 17/27
 * Podnaslov je Deep Blue, ne siv — v vertikalnem prikazu ostane siv.
 */
.bmt--horizontal {
	--bmt-bg:      var(--FMS-Care-Light-Blue, #EDF4F9);
	--bmt-radius:  40px;
	/* Naslednja kartica pokuka ob robu — pove, da jih je vec. */
	--bmt-peek:    clamp(40px, 15vw, 250px);

	--bmt-h2-size: clamp(40px, calc(29.78px + 2.376vw), 60px);
	--bmt-h2-lh:   clamp(40px, calc(29.78px + 2.376vw), 60px);   /* 100 % */
	--bmt-h2-wght: 500;

	--bmt-t1-size: 25px;
	--bmt-t1-lh:   31px;

	--bmt-t2-size: clamp(15px, calc(14.15px + .198vw), 17px);
	--bmt-t2-lh:   clamp(23px, calc(21.30px + .396vw), 27px);

	/* Ime in vloga cez sliko — v Figmi nobeno ni posevno. */
	--bmt-name-size: 17px;
	--bmt-name-lh:   24px;
	--bmt-role-size: 15px;
	--bmt-role-lh:   22px;

	--bmt-gap:       30px;
	--bmt-card-h:    500px;   /* namizje */
	--bmt-card-h-t:  560px;   /* tablica */
	--bmt-card-h-m:  900px;   /* mobilno */
	--bmt-card-pad:  30px 50px;
}

/*
 * Naslov in podnaslov horizontalnega odseka.
 *
 * Figma navaja tudi visino okvirja (43px za naslov, 61px za podnaslov,
 * 87px na mobilnem). Teh ne prepisujemo kot fiksne visine: to so mere
 * enovrsticnega besedila iz makete, daljsi naslov pa bi pri fiksni visini
 * odrezalo. Vrstica je namesto tega natanko taka, kot pravi maketa.
 */
.bmt--horizontal .bmt__head {
	gap: 25px;
	margin-bottom: clamp(32px, 5vw, 72px);
}

.bmt--horizontal .bmt__title {
	font-size: var(--bmt-h2-size);
	line-height: var(--bmt-h2-lh);
	font-weight: var(--bmt-h2-wght);
}

.bmt--horizontal {
	/* Po maketi je podnaslov tu Deep Blue, ne siv. */
	--bmt-subtitle: var(--bmt-ink);
}

.bmt--horizontal .bmt__subtitle {
	font-size: var(--bmt-t1-size);
	line-height: var(--bmt-t1-lh);
}

/* ------------------------------------------------------------
   Glava
   ------------------------------------------------------------ */

.bmt__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 clamp(24px, 3.2vw, 48px);
}

.bmt--center .bmt__head {
	align-items: center;
	text-align: center;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.bmt--left .bmt__head {
	max-width: 920px;
}

.bmt__title {
	margin: 0;
	font-size: var(--bmt-h2-size);
	line-height: 1.08;
	font-weight: 500;
	color: var(--bmt-title);
}

.bmt__subtitle {
	margin: 0;
	font-size: var(--bmt-t1-size);
	line-height: var(--bmt-t1-lh);
	font-weight: 400;
	letter-spacing: .3px;
	color: var(--bmt-subtitle);
}

/* ------------------------------------------------------------
   Karusel — nativni scroll s snapom, zato swipe dela sam od sebe
   ------------------------------------------------------------ */

.bmt__viewport {
	width: 100%;
}

.bmt__track {
	display: flex;
	gap: var(--bmt-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* prostor za senco kartic, ki jo scroll sicer odreze */
	padding: 6px 0 16px;
	margin: -6px 0 -16px;
}

.bmt__track::-webkit-scrollbar {
	display: none;
}

.bmt__track:focus-visible {
	outline: 2px solid var(--bmt-accent);
	outline-offset: 4px;
	border-radius: 4px;
}

.bmt__slide {
	flex: 0 0 calc(
		(100% - var(--bmt-peek) - (var(--bmt-per) - 1) * var(--bmt-gap)) / var(--bmt-per)
	);
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
}

.bmt__slide > .bmt-card {
	flex: 1 1 auto;
	min-width: 0;
}

/* ------------------------------------------------------------
   Kartica — skupna osnova
   ------------------------------------------------------------ */

.bmt-card {
	display: flex;
	flex-direction: column;
	background: var(--bmt-card);
	border-radius: var(--bmt-radius);
	overflow: hidden;
	transition: transform .3s var(--bmt-ease), box-shadow .3s var(--bmt-ease);
}

.bmt--vertical .bmt-card {
	box-shadow: 0 1px 2px rgba(0, 39, 73, .05), 0 8px 22px rgba(0, 39, 73, .07);
}

.bmt--vertical .bmt-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(0, 39, 73, .06), 0 16px 34px rgba(0, 39, 73, .12);
}

.bmt-card__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 22px 22px 24px;
}

/* ------------------------------------------------------------
   Medij: slika ali video
   ------------------------------------------------------------ */

.bmt-media {
	position: relative;
	overflow: hidden;
	background: var(--bmt-media-bg);
}

.bmt-media__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--bmt-focus);
	display: block;
	margin: 0;
	border-radius: 0;
	pointer-events: none;
}

/* Predogled lokalnega videa: prva slicica, brez upravljanja. */
video.bmt-media__img {
	background: #000;
}

.bmt-media.is-blank::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 0%, var(--bmt-accent-soft) 0%, transparent 70%),
		var(--bmt-media-bg);
}

/*
 * Gumb stoji v spodnjem desnem kotu, ne na sredini: sredina medija je
 * ravno tam, kjer je obraz, in okrogel gumb cez obraz je bil glavni
 * razlog, da se osebe na kartici ni dalo prepoznati.
 */
.bmt-media__play {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 3;
	width: 54px;
	height: 54px;
	padding: 0 0 0 4px;
	border: 0;
	border-radius: 50%;
	background: var(--bmt-accent) !important;
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
	transition: transform .25s var(--bmt-ease), box-shadow .25s var(--bmt-ease);
}

.bmt-media__play svg {
	width: 16px;
	height: 20px;
}

.bmt-media:hover .bmt-media__play,
.bmt-media__play:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}

.bmt-media__play:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Predvajalnik, ki ga vstavi skripta. */
.bmt-media__frame {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #000;
	object-fit: contain;
}

.bmt-media.is-playing {
	background: #000;
}

.bmt-media.is-playing .bmt-media__play,
.bmt-media.is-playing .bmt-media__img,
.bmt-media.is-playing .bmt-person--over,
.bmt-media.is-playing::after {
	opacity: 0;
	visibility: hidden;
}

/* Med odpiranjem posnetka: obrocek nad predvajalnikom. */
.bmt-media.is-loading::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 5;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 3px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: bmt-spin .9s linear infinite;
	pointer-events: none;
}

@keyframes bmt-spin {
	to { transform: rotate(360deg); }
}

/* Posnetek se ni odprl — obiskovalec dobi vsaj povezavo nanj. */
.bmt-media__note {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 6;
	margin: 0;
	padding: 10px 14px;
	background: rgba(0, 0, 0, .72);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

.bmt-media__note a {
	color: #fff;
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.bmt-media.is-loading::before {
		animation-duration: 2.4s;
	}
}

/* ------------------------------------------------------------
   Narekovaj in citat
   ------------------------------------------------------------ */

.bmt-mark {
	display: flex;
	align-items: flex-start;
	align-self: flex-start;
	flex: 0 0 auto;
	gap: 6px;
}

.bmt-mark__glyph {
	display: block;
	width: 14px;
	height: 23.3px;
	fill: var(--bmt-accent);
}

.bmt-quote {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-style: normal;
	flex: 1 1 auto;
}

.bmt-quote::before,
.bmt-quote::after {
	content: none;
}

.bmt-quote p {
	margin: 0 0 10px;
	font-style: normal;
	font-size: var(--bmt-t2-size);
	line-height: var(--bmt-t2-lh);
	font-weight: 400;
	color: var(--bmt-ink);
	/* dolge neprelomljive besede ne smejo cez rob kartice */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.bmt-quote p:last-child {
	margin-bottom: 0;
}

/* Enako visoke kartice: citat odrezemo na doloceno stevilo vrstic.
   Rezanje deluje zanesljivo samo nad vrstico besedila, zato so odstavki
   znotraj citata v vrstici, locena pa sta z dvojnim prelomom.

   Rezemo notranji ovoj, ne blockquote: ta je flex postavka telesa kartice,
   -webkit-box pa na flex postavki poblokira v flow-root in rezanje odpove
   — besedilo se takrat odreze sredi vrstice, brez tropicja, kartice pa so
   razlicno visoke. */
.bmt--vertical .bmt-quote__text {
	display: -webkit-box;
	-webkit-line-clamp: var(--bmt-clamp, 4);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bmt--vertical .bmt-quote p {
	display: inline;
	margin: 0;
}

.bmt--vertical .bmt-quote p + p::before {
	content: "\A\A";
	white-space: pre-wrap;
}

.bmt--noclamp .bmt-quote__text,
.bmt-card.is-expanded .bmt-quote__text {
	display: block;
	overflow: visible;
}

/* ------------------------------------------------------------
   Razgrnitev citata

   Odrezan citat pove bistvo, cel citat pa je pogosto tisti, ki
   prepricа. Gumb se pokaze samo tam, kjer je besedilo res odrezano —
   to ugotovi skripta z merjenjem, ker je odvisno od sirine kartice.
   ------------------------------------------------------------ */

.bmt-card.is-expanded .bmt-quote p {
	display: block;
	margin: 0 0 var(--bmt-t2-lh);
}

.bmt-card.is-expanded .bmt-quote p:last-child {
	margin-bottom: 0;
}

.bmt-card.is-expanded .bmt-quote p + p::before {
	content: none;
}

.bmt-quote__toggle {
	align-self: flex-start;
	margin: -2px 0 0;
	padding: 0;
	border: 0;
	background: none !important;
	color: var(--bmt-accent) !important;
	font-family: inherit;
	font-size: 13px;
	line-height: 20px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	/* Podcrtaj sledi besedilu, ne robu gumba. */
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: opacity .2s var(--bmt-ease);
}

.bmt-quote__toggle:hover {
	opacity: .72;
}

.bmt-quote__toggle:focus-visible {
	outline: 2px solid var(--bmt-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/*
 * Razgrnjena kartica je visja od sosed. Ker so kartice v vrstici enako
 * visoke, zraste cela vrstica — zato razgrnjeno posebej oznacimo, da je
 * ocitno, katera je odprta.
 */
.bmt-card.is-expanded {
	box-shadow: 0 0 0 1px var(--bmt-accent-off);
}

.bmt--noclamp .bmt-quote p {
	display: block;
	margin: 0 0 10px;
}

.bmt--noclamp .bmt-quote p:last-child {
	margin-bottom: 0;
}

.bmt--noclamp .bmt-quote p + p::before {
	content: none;
}

/* ------------------------------------------------------------
   Oseba — ime in vloga ob poudarni crti
   ------------------------------------------------------------ */

.bmt-person {
	border-left: 2px solid var(--bmt-accent);
	padding-left: 12px;
	min-width: 0;
	/* figcaption in blockquote sta v temah pogosto posevna */
	font-style: normal;
}

.bmt-person__name {
	display: block;
	font-style: normal;
	font-size: 15px;
	line-height: 22px;
	font-weight: 500;
	color: var(--bmt-ink);
}

.bmt-person__role {
	display: block;
	margin-top: 3px;
	font-style: italic;
	font-size: 13px;
	line-height: 19px;
	font-weight: 400;
	color: var(--bmt-muted);
}

/* ------------------------------------------------------------
   Ploscice taksonomije
   ------------------------------------------------------------ */

.bmt-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bmt-tags li {
	list-style: none;
	margin: 0;
}

.bmt-tag {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--bmt-accent-soft);
	color: var(--bmt-accent);
	font-size: 11px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ============================================================
   VERTIKALNI PRIKAZ
   ============================================================ */

.bmt-media--v {
	aspect-ratio: var(--bmt-media-ratio);
	height: var(--bmt-media-h);   /* auto = razmerje odloca; height="" ga povozi */
	flex: 0 0 auto;
}

.bmt-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 14px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--bmt-line);
}

.bmt-card__foot .bmt-person {
	flex: 1 1 150px;
}

.bmt-card__foot .bmt-tags {
	justify-content: flex-end;
}

/* ============================================================
   HORIZONTALNI PRIKAZ
   ============================================================ */

.bmt--horizontal .bmt-card {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 26px;
	min-height: var(--bmt-card-h);
	padding: var(--bmt-card-pad);
}

/* Ime in vloga cez sliko: v Figmi nobeno ni posevno, vloga je le nekoliko
   svetlejsa od imena — ne siva. Velja samo za horizontalno kartico. */
.bmt--horizontal .bmt-person__name {
	font-size: var(--bmt-name-size);
	line-height: var(--bmt-name-lh);
	font-weight: 500;
}

.bmt--horizontal .bmt-person__role {
	margin-top: 2px;
	font-size: var(--bmt-role-size);
	line-height: var(--bmt-role-lh);
	font-style: normal;
	color: color-mix(in srgb, var(--bmt-ink) 82%, #fff);
}

/*
 * Poudarna crtica ob imenu.
 *
 * Ne more biti border: podlaga pod besedilom je ::before s negativnim
 * z-index, ta pa se po pravilih izrisa nariše CEZ obrobo svojega starsa
 * in crtica je izginila. Kot ::after je nad podlago in ostane vidna.
 */
.bmt--horizontal .bmt-person {
	border-left: 0;
	padding-left: 17px;
}

.bmt--horizontal .bmt-person--over::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--bmt-accent);
}

.bmt-media--h {
	/* Notranji rob je spremenljivka, ker se preliv pod imenom mora
	   razlezti natanko do roba medija — glej .bmt-person--over::before. */
	--bmt-media-pad-x: 20px;
	--bmt-media-pad-b: 20px;

	flex: 0 0 var(--bmt-media-w);
	width: var(--bmt-media-w);
	height: auto;
	aspect-ratio: 333 / 416;
	margin: 0;
	padding: 50px var(--bmt-media-pad-x) var(--bmt-media-pad-b);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 10px;
}

/*
 * V horizontalni kartici stoji ime cez spodnji rob slike, zato gre gumb
 * v zgornji desni kot — ob glavo, ne cezenj in ne cez ime.
 */
.bmt-media--h .bmt-media__play {
	top: 16px;
	bottom: auto;
}

/*
 * Preliv cez sliko — mehak prehod od polovice navzdol.
 *
 * Zacetek je prosojna razlicica iste barve, ne trdo vpisana svetlo modra:
 * ko urednik zamenja podlago medija, mora preliv slediti, sicer se cez
 * sliko potegne tuja barva.
 */
.bmt-media--h::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(237, 244, 249, .10) 47.99%,
		var(--bmt-media-veil) 79.5%
	);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--bmt-media-veil) 10%, transparent) 47.99%,
		var(--bmt-media-veil) 79.5%
	);
	pointer-events: none;
}

.bmt-person--over {
	position: relative;
	z-index: 2;
}

/*
 * Podlaga natanko pod imenom in vlogo.
 *
 * Preliv zgoraj postane neprosojen pri stalnih 79.5 % visine medija. To
 * drzi na namizju, kjer je medij visok 416px in blok z imenom majhen del
 * njega; na telefonu, kjer je medij nizji in vloga dolga, pa se ime zacne
 * ze pri ~69 % in je pristalo cez obraz. Ta podlaga sledi bloku besedila,
 * ne odstotku, zato je ime berljivo pri vsaki velikosti medija.
 */
.bmt-person--over::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -20px;
	left: calc(-1 * var(--bmt-media-pad-x));
	right: calc(-1 * var(--bmt-media-pad-x));
	bottom: calc(-1 * var(--bmt-media-pad-b));
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--bmt-media-veil) 0%, transparent) 0,
		var(--bmt-media-veil) 42%
	);
	pointer-events: none;
}

.bmt--horizontal .bmt-card__body {
	padding: 0;
	gap: clamp(24px, 3.4vw, 56px);
	justify-content: center;
}

.bmt--horizontal .bmt-mark__glyph {
	width: 17.19px;
	height: 28.65px;
}

.bmt--horizontal .bmt-quote {
	flex: 0 1 auto;
}

.bmt--horizontal .bmt-quote p {
	margin-bottom: var(--bmt-t2-lh);
}

/* ============================================================
   Navigacija: puscice + pikice
   ============================================================ */

.bmt__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: clamp(20px, 2.6vw, 36px);
}

/* Vse kartice so vidne hkrati — navigacija nima kaj poceti. */
.bmt--static .bmt__nav {
	display: none;
}

.bmt--center .bmt__nav {
	justify-content: center;
}

.bmt--left .bmt__nav {
	justify-content: flex-end;
}

.bmt__arrow {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bmt-accent-off);
	border-radius: 50%;
	background: transparent !important;
	color: var(--bmt-accent) !important;
	cursor: pointer;
	transition: background .25s var(--bmt-ease), color .25s var(--bmt-ease),
		border-color .25s var(--bmt-ease), transform .25s var(--bmt-ease);
}

.bmt__arrow svg {
	width: 22px;
	height: 22px;
}

.bmt__arrow:hover:not(:disabled),
.bmt__arrow:focus:not(:disabled) {
	background: var(--bmt-accent) !important;
	border-color: var(--bmt-accent);
	color: #fff !important;
	transform: scale(1.05);
}

.bmt__arrow:disabled {
	background: transparent !important;
	border-color: var(--bmt-line);
	color: var(--bmt-accent-off) !important;
	cursor: default;
	transform: none;
}

.bmt__arrow:focus-visible {
	outline: 2px solid var(--bmt-accent);
	outline-offset: 3px;
}

/*
 * Horizontalna kartica: v maketi sta puscici goli kljukici v poudarni
 * barvi, brez obrocka, poravnani desno. Pikice tam niso izrisane —
 * kdor hoce natanko tak videz, doda dots="no"; sicer ostanejo, ker
 * nosijo polozaj in prikaz samodejnega drsenja.
 */
.bmt--horizontal .bmt__nav {
	justify-content: flex-end;
	gap: 20px;
}

.bmt--horizontal .bmt__arrow {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 0;
}

.bmt--horizontal .bmt__arrow svg {
	width: 30px;
	height: 30px;
}

.bmt--horizontal .bmt__arrow:hover:not(:disabled),
.bmt--horizontal .bmt__arrow:focus:not(:disabled) {
	background: transparent !important;
	color: var(--bmt-accent) !important;
	transform: scale(1.18);
}

.bmt--horizontal .bmt__arrow:disabled {
	color: var(--bmt-accent-off) !important;
}

.bmt__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bmt__dot {
	position: relative;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	overflow: hidden;
	background: var(--bmt-accent-off) !important;
	cursor: pointer;
	transition: width .3s var(--bmt-ease), background .3s var(--bmt-ease);
}

.bmt__dot:hover {
	background: var(--bmt-accent) !important;
}

.bmt__dot.is-active {
	width: 34px;
	background: var(--bmt-accent) !important;
}

.bmt__dot:focus-visible {
	outline: 2px solid var(--bmt-accent);
	outline-offset: 3px;
}

/* Med samodejnim drsenjem se aktivna pikica polni — pokaze,
   koliko casa je se do naslednje kartice. */
.bmt.is-playing .bmt__dot.is-active {
	background: var(--bmt-accent-off) !important;
}

.bmt.is-playing .bmt__dot.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--bmt-accent);
	transform-origin: left center;
	animation: bmt-fill var(--bmt-interval) linear forwards;
}

@keyframes bmt-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ============================================================
   Opozorilo za urednika
   ============================================================ */

.bmt-notice {
	margin: 0;
	padding: 14px 18px;
	border-left: 3px solid var(--FMS-Coral, #E2725B);
	background: #FDF3F1;
	color: #7A2E1E;
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 22px;
}

/* ============================================================
   OZJE NAMIZJE IN TABLICA  (<= 1200px)

   Medij v horizontalni kartici je po Figmi fiksnih 333px; pod to
   sirino bi citatu ostalo premalo prostora, zato gre medij nad citat.
   ============================================================ */

/*
 * TABLICA (900–1199px): kartica ostane v vrsti, dokler ima citat dovolj
 * prostora. Medij se skrci, ne pa spremeni razmerja — pokoncna slika
 * ostane pokoncna, ker je za obraz to najboljsi okvir (viden je 94 %
 * visine portreta).
 */
@media (max-width: 1199px) {

	.bmt--horizontal {
		--bmt-radius:    32px;
		--bmt-gap:       24px;
		--bmt-peek:      clamp(40px, 9vw, 120px);
		--bmt-card-h:    var(--bmt-card-h-t);
		--bmt-card-pad:  30px 34px;
		--bmt-media-w:   clamp(250px, 30vw, 333px);
	}

	.bmt--horizontal .bmt-card {
		gap: 24px;
	}

	.bmt-media--h {
		flex: 0 0 var(--bmt-media-w);
		width: var(--bmt-media-w);
		padding: 34px 18px;
	}
}

/*
 * OZKA TABLICA IN TELEFON (<900px): za dva stolpca ni vec prostora,
 * zato gre medij nad citat. Sirino medija omejimo — cez celo sirino bi
 * pokoncna slika kartico raztegnila v stolp.
 */
@media (max-width: 899px) {

	.bmt--horizontal {
		--bmt-card-pad: 40px 30px;
	}

	.bmt--horizontal .bmt-card {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 26px;
	}

	/*
	 * Zlozeni medij gre cez celo sirino vsebine in postane skoraj kvadrat
	 * (298 x 291 iz makete). Ozek pokoncen medij sredi siroke kartice je
	 * bil neuravnotezen, predvsem pa premajhen: ime in vloga sta v njem
	 * zasedla petino visine in pristala cez obraz.
	 */
	.bmt-media--h {
		--bmt-media-pad-x: 20px;
		--bmt-media-pad-b: 20px;

		flex: 0 0 auto;
		width: 100%;
		max-width: 460px;
		aspect-ratio: 298 / 291;
		align-self: center;
		padding: 50px var(--bmt-media-pad-x) var(--bmt-media-pad-b);
	}

	.bmt--horizontal .bmt-card__body {
		/* Ne raztezaj se: sicer med sliko in citatom zeva prazen pas. */
		flex: 0 0 auto;
		width: 100%;
		gap: 22px;
	}

	.bmt--horizontal .bmt__nav {
		justify-content: center;
	}

	.bmt--horizontal .bmt-media__play {
		width: 46px;
		height: 46px;
	}
}

/*
 * MOBILNO (<=767px): kartica po maketi — 350 siroka, 900 visoka,
 * notranji rob 50/25, vsebina sredinsko, razmik 26. Naslov je tu
 * Regular 40/40, ne Medium 60/60 kot na namizju.
 */
@media (max-width: 767px) {

	/* Dvojni razred: pozneje v datoteki .bmt nastavi --bmt-peek za oba
	   prikaza, in enako specificen selektor bi nas povozil. */
	.bmt.bmt--horizontal {
		--bmt-h2-wght:  400;
		--bmt-radius:   24px;
		/* Kartica cez celo sirino zaslona — na telefonu je pokuk naslednje
		   kartice le izgubljen prostor za besedilo. */
		--bmt-peek:     0px;
		--bmt-card-h:   var(--bmt-card-h-m);
		--bmt-card-pad: 50px 25px;
		--bmt-media-w:  100%;
	}

	.bmt--horizontal .bmt__head {
		gap: 40px;
	}

	.bmt--horizontal .bmt-card {
		gap: 26px;
	}

	/* Maketa: medij 298 x 291, notranji rob 50 / 20 / 20. */
	.bmt-media--h {
		max-width: none;
		padding: 50px var(--bmt-media-pad-x) var(--bmt-media-pad-b);
	}
}

/* ============================================================
   TABLET  (<= 1024px)
   ============================================================ */

@media (max-width: 1024px) {

	.bmt {
		--bmt-per: var(--bmt-per-t);
	}
}

/* ============================================================
   MOBILNO  (<= 767px)
   ============================================================ */

@media (max-width: 767px) {

	.bmt {
		--bmt-per:  var(--bmt-per-m);
		--bmt-peek: 36px;
		--bmt-gap:  14px;
	}

	.bmt__head {
		margin-bottom: 24px;
	}

	/* Naslednja kartica pokuka znotraj odseka, da ne uide cez ozadje. */
	.bmt__slide {
		flex-basis: calc(
			(100% - var(--bmt-peek) - (var(--bmt-per) - 1) * var(--bmt-gap)) / var(--bmt-per)
		);
	}

	.bmt-card__body {
		padding: 18px 18px 20px;
		gap: 12px;
	}

	.bmt__nav {
		gap: 12px;
		justify-content: center;
	}

	.bmt--left .bmt__nav {
		justify-content: center;
	}

	.bmt__arrow {
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
	}

	.bmt__arrow svg {
		width: 19px;
		height: 19px;
	}

	.bmt-card__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	/*
	 * flex: 1 1 150px je pisan za vrstico. V stolpcu postane 150px
	 * najmanjsa VISINA, zato je poudarna crta ob imenu visela cez tri
	 * prazne vrstice pod besedilom.
	 */
	.bmt-card__foot .bmt-person {
		flex: 0 0 auto;
		width: 100%;
	}

	.bmt-card__foot .bmt-tags {
		justify-content: flex-start;
	}
}

/* ============================================================
   Dostopnost
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.bmt__track {
		scroll-behavior: auto;
	}

	.bmt-card,
	.bmt__arrow,
	.bmt__dot,
	.bmt-media__play {
		transition-duration: .01ms;
	}

	.bmt.is-playing .bmt__dot.is-active::after {
		animation: none;
		transform: scaleX(1);
	}
}

/* Ko je swipe izklopljen, ostane drsenje samo programsko. */
.bmt--noswipe .bmt__track {
	overflow-x: hidden;
}