/* ==========================================================================
   Seminars styles — HIGHLIGHT mode
   File: assets/css/seminars-highlight.css
   Contains: carousel + ticket card styles.
   ========================================================================== */

/* Mode-specific density */
.nataanimal-seminars[data-mode="highlight"]{
	--na-semi-gap: 14px;
	--na-semi-pad: 14px;

	/* Mini-skin highlight: управляется из theme/assets/css/nataanimal-design-tokens.css */
	--bg0: var(--na-zone-semi-hl-bg0, #0b0b10);
	--bg1: var(--na-zone-semi-hl-bg1, #0f1017);
	--text: var(--na-zone-text-strong, rgba(255,255,255,.92));
	--muted: rgba(255,255,255,.70);
	--stroke: var(--na-zone-semi-hl-stroke, rgba(255,255,255,.16));
	--cut: 0.5;

	--shadow: var(--na-zone-semi-hl-shadow, 0 16px 50px rgba(0,0,0,.55));
	
	--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

	--na-L-title-lines: 2;
	--na-M-title-lines: 3;
	--na-S-title-lines: 3;

	--na-L-excerpt-lines: 2;

	--na-L-fs-top:  12px;
	--na-L-fs-pill: 12px;
	--na-L-fs-h3:   24px;
	--na-L-fs-meta: 13px;
	--na-L-fs-btn:  14px;
	--na-L-fs-ex:   12px;

	--na-L-pad:     18px;
	--na-L-inset:   18px;
	--na-L-s1:      6px;
	--na-L-s2:      8px;
	--na-L-s3:      12px;
	--na-L-s4:      14px;
	--na-L-pill-py: 6px;
	--na-L-pill-px: 12px;
	--na-L-btn-py:  12px;
	--na-L-btn-px:  16px;

	--na-M-fs-top:  11px;
	--na-M-fs-pill: 11px;
	--na-M-fs-h3:   20px;
	--na-M-fs-meta: 12px;
	--na-M-fs-btn:  12px;
	--na-M-fs-ex:   11px;

	--na-M-pad:     14px;
	--na-M-inset:   14px;
	--na-M-s1:      5px;
	--na-M-s2:      7px;
	--na-M-s3:      10px;
	--na-M-s4:      12px;
	--na-M-pill-py: 5px;
	--na-M-pill-px: 10px;
	--na-M-btn-py:  10px;
	--na-M-btn-px:  12px;

	--na-S-fs-top:  10px;
	--na-S-fs-pill: 10px;
	--na-S-fs-h3:   18px;
	--na-S-fs-meta: 11px;
	--na-S-fs-btn:  11px;
	--na-S-fs-ex:   10.5px;

	--na-S-pad:     12px;
	--na-S-inset:   12px;
	--na-S-s1:      4px;
	--na-S-s2:      6px;
	--na-S-s3:      8px;
	--na-S-s4:      10px;
	--na-S-pill-py: 4px;
	--na-S-pill-px: 8px;
	--na-S-btn-py:  9px;
	--na-S-btn-px:  10px;
}


/* ==========================================================================
   Highlight: carousel (scroll-snap)
   ========================================================================== */
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCarousel{
	position: relative;
}

.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCarousel__track{
	--na-gap: var(--na-semi-gap);

	display: flex;
	gap: var(--na-gap);

	overflow-x: auto;
	overflow-y: hidden;

	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;

	padding-bottom: 0;

	/* Скрываем скроллбар, но оставляем скролл (Windows/Chrome особенно любит показывать полосу). */
	scrollbar-width: none;
	-ms-overflow-style: none;
}


.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCarousel__track.na-semi--no-snap{
	scroll-snap-type: none !important;
}


.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCarousel__track::-webkit-scrollbar{
	width: 0;
	height: 0;
}

.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCarousel__track > :is(.nataanimal-seminarsCarousel__item, .cardWrap){
	flex: 0 0 calc((100% - (var(--na-gap) * 3)) / 4);
	scroll-snap-align: start;
}

@media (max-width: 1200px){
	.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCarousel__track > :is(.nataanimal-seminarsCarousel__item, .cardWrap){
		flex-basis: calc((100% - (var(--na-gap) * 2)) / 3);
	}
}

@media (max-width: 920px){
	.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCarousel__track > :is(.nataanimal-seminarsCarousel__item, .cardWrap){
		flex-basis: calc((100% - var(--na-gap)) / 2);
	}
}

@media (max-width: 560px){
	.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCarousel__track > :is(.nataanimal-seminarsCarousel__item, .cardWrap){
		flex-basis: 100%;
	}
}

/* если у тебя есть wrapper-item, то карта внутри должна быть 100% ширины */
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCarousel__item > .cardWrap{
	width: 100%;
}

.nataanimal-seminars[data-mode="highlight"] .carousel__controls{
	position: absolute;
	top: 50%;
	left: -10px;
	right: -10px;
	transform: translateY(-50%);

	display: flex !important;
	align-items: center;
	justify-content: space-between;
	visibility: visible !important;

	/* Контейнер не должен перехватывать клики/тапы; кликаем только по кнопкам. */
	pointer-events: none;
	z-index: 5;
}

.nataanimal-seminars[data-mode="highlight"] .carousel__controls .carouselArrow{
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	visibility: visible !important;

	pointer-events: auto;
}

/* SVG-стрелки: размеры и выравнивание (через currentColor), 1:1 как в Portfolio. */
.nataanimal-seminars[data-mode="highlight"] .carouselArrow svg{
	width: 1.2em;
	height: 1.2em;
	display: block;
}

.nataanimal-seminars[data-mode="highlight"] .carouselArrow{
	line-height: 0;
}


/* ==========================================================================
   Highlight mode: DEMO styles 1:1 (scoped)
   Source: seminars_card_onetest_v4.html
   ========================================================================== */

/* Отрубаем старые декоративные слои highlight, чтобы демо было 1:1 */
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard.nataanimal-seminarsTicket.tile::before,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard.nataanimal-seminarsTicket.tile::after{
	content: none !important;
}

/* ВАЖНО: кнопки внутри карточек highlight НЕ масштабируем глобальным --na-ui-scale */
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard{
	--na-ui-scale-btn: 1;
}



.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsTicket__shape{
	display: none !important;
}

.nataanimal-seminars[data-mode="highlight"] .cardWrap{
	width: 100%;
	max-width: none;
	container-type: inline-size;
}

.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard.nataanimal-seminarsTicket.card{
	width: 100%;
	aspect-ratio: 1 / 1;
	position: relative;
	box-shadow: var(--na-shadow-6, var(--shadow));
	isolation: isolate;
	color: var(--text);
	--corner: 18px;

	/* L default */
	--title-lines: var(--na-L-title-lines);
	--fs-top:  var(--na-L-fs-top);
	--fs-pill: var(--na-L-fs-pill);
	--fs-h3:   var(--na-L-fs-h3);
	--fs-meta: var(--na-L-fs-meta);
	--fs-btn:  var(--na-L-fs-btn);
	--fs-ex:   var(--na-L-fs-ex);

	--pad:     var(--na-L-pad);
	--inset:   var(--na-L-inset);
	--s-1:     var(--na-L-s1);
	--s-2:     var(--na-L-s2);
	--s-3:     var(--na-L-s3);
	--s-4:     var(--na-L-s4);

	--pill-py: var(--na-L-pill-py);
	--pill-px: var(--na-L-pill-px);
	--btn-py:  var(--na-L-btn-py);
	--btn-px:  var(--na-L-btn-px);

	--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect x='0' y='0' width='100' height='100' rx='0' fill='white'/%3E%3Ccircle cx='0' cy='50' r='3' fill='black'/%3E%3Ccircle cx='100' cy='50' r='3' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect x='0' y='0' width='100' height='100' rx='0' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");

	-webkit-mask: var(--mask) no-repeat center / 100% 100%;
	mask: var(--mask) no-repeat center / 100% 100%;

	border-radius: var(--corner);
	overflow: hidden;

	font-family: var(--font);
}

/* Container size presets */
@container (max-width: 320px){
	.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard.nataanimal-seminarsTicket.card{
		--title-lines: var(--na-S-title-lines);
		--fs-top:  var(--na-S-fs-top);
		--fs-pill: var(--na-S-fs-pill);
		--fs-h3:   var(--na-S-fs-h3);
		--fs-meta: var(--na-S-fs-meta);
		--fs-btn:  var(--na-S-fs-btn);
		--fs-ex:   var(--na-S-fs-ex);

		--pad:     var(--na-S-pad);
		--inset:   var(--na-S-inset);
		--s-1:     var(--na-S-s1);
		--s-2:     var(--na-S-s2);
		--s-3:     var(--na-S-s3);
		--s-4:     var(--na-S-s4);

		--pill-py: var(--na-S-pill-py);
		--pill-px: var(--na-S-pill-px);
		--btn-py:  var(--na-S-btn-py);
		--btn-px:  var(--na-S-btn-px);
	}
}
@container (min-width: 321px) and (max-width: 420px){
	.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard.nataanimal-seminarsTicket.card{
		--title-lines: var(--na-M-title-lines);
		--fs-top:  var(--na-M-fs-top);
		--fs-pill: var(--na-M-fs-pill);
		--fs-h3:   var(--na-M-fs-h3);
		--fs-meta: var(--na-M-fs-meta);
		--fs-btn:  var(--na-M-fs-btn);
		--fs-ex:   var(--na-M-fs-ex);

		--pad:     var(--na-M-pad);
		--inset:   var(--na-M-inset);
		--s-1:     var(--na-M-s1);
		--s-2:     var(--na-M-s2);
		--s-3:     var(--na-M-s3);
		--s-4:     var(--na-M-s4);

		--pill-py: var(--na-M-pill-py);
		--pill-px: var(--na-M-pill-px);
		--btn-py:  var(--na-M-btn-py);
		--btn-px:  var(--na-M-btn-px);
	}
}

/* фоновые слои */
.nataanimal-seminars[data-mode="highlight"] .card__bg{
	position:absolute; inset:0;
	background-color: var(--bg0);
	background-image: var(--cover, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transform: scale(1.06);
	filter: blur(10px);
	opacity: .45;
	z-index: 0;
}
.nataanimal-seminars[data-mode="highlight"] .card__shade{
	position:absolute; inset:0;
	background:
		linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.52)),
		radial-gradient(900px 360px at 18% 0%, rgba(0,0,0,.18), transparent 60%),
		radial-gradient(900px 420px at 90% 20%, rgba(255,255,255,.06), transparent 60%);
	z-index: 1;
}

/* декор */
.nataanimal-seminars[data-mode="highlight"] .card__stroke,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsTicket__stroke{
	position:absolute; inset:0;
	box-shadow: inset 0 0 0 var(--na-semi-stroke-w, var(--na-stroke-w, 1px)) var(--stroke);
	z-index: 4;
	pointer-events:none;
	border-radius: inherit;
	-webkit-mask: var(--mask) no-repeat center / 100% 100%;
	mask: var(--mask) no-repeat center / 100% 100%;
}

.nataanimal-seminars[data-mode="highlight"] .card__perf,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsTicket__perf{
	position:absolute;
	left: var(--inset);
	right: var(--inset);
	top: calc(100% * var(--cut));
	border-top: var(--na-semi-stroke-w, var(--na-stroke-w, 1px)) dashed rgba(255,255,255,.18);
	z-index: 3;
	pointer-events:none;
	transform: translateY(-.5px);
}

/* контент */
.nataanimal-seminars[data-mode="highlight"] .content,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsTicket__content{
	position:relative;
	z-index: 5;
	height:100%;
	padding: var(--pad);
	display:grid;
	grid-template-rows: calc(100% * var(--cut)) 1fr;
	gap: 0;
	min-height: 0;
}

.nataanimal-seminars[data-mode="highlight"] .top,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsTicket__topZone{
	min-height:0;
	display:grid;
	grid-template-rows: auto auto 1fr;
	gap: var(--s-3);
	overflow:hidden;
	padding-bottom: var(--s-3);
}

.nataanimal-seminars[data-mode="highlight"] .bottom,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsTicket__bottomZone{
	min-height:0;
	display:flex;
	flex-direction:column;
	gap: var(--s-3);
	overflow:hidden;
	padding-top: var(--s-3);
}

/* topLine */
.nataanimal-seminars[data-mode="highlight"] .topline,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsTicket__topLine{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: var(--s-3);
	font-size: var(--fs-top);
	letter-spacing:.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,.78);
	white-space:nowrap;
}

.nataanimal-seminars[data-mode="highlight"] .topline__meta{
	display:flex;
	align-items:center;
	gap: var(--s-3);
	min-width: 0;
	overflow:hidden;
	text-overflow: ellipsis;
}

.nataanimal-seminars[data-mode="highlight"] .price,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard__price{
	letter-spacing:.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.92);
}

/* badges */
.nataanimal-seminars[data-mode="highlight"] .row{
	display:flex;
	flex-wrap:wrap;
	gap: var(--s-2);
}

.nataanimal-seminars[data-mode="highlight"] .pill,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard__badge,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard__chip,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsTicket__codePill{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding: var(--pill-py) var(--pill-px);
	border-radius: 999px;
	border: var(--na-semi-stroke-w, var(--na-stroke-w, 1px)) solid rgba(255,255,255,.18);
	background: rgba(255,255,255,.08);
	backdrop-filter: blur(10px);
	color: rgba(255,255,255,.92);
	font-size: var(--fs-pill);
	line-height:1;
	white-space:nowrap;
}

.nataanimal-seminars[data-mode="highlight"] .pill--code,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsTicket__codePill{
	border-color: rgba(255,255,255,.16);
	background: rgba(255,255,255,.06);
	color: rgba(255,255,255,.86);
}

/* Badge colors */
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard__badge.is-online{ background: rgba(90,255,160,.18); border-color: rgba(90,255,160,.45); }
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard__badge.is-offline{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard__badge.is-soldout{ background: rgba(255,175,90,.22); border-color: rgba(255,175,90,.52); }
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard__badge.is-cancelled{ background: rgba(255,90,90,.18); border-color: rgba(255,90,90,.45); }

/* chips */
.nataanimal-seminars[data-mode="highlight"] .chipsCenter,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard__chips{
	display:flex;
	justify-content:center;
	gap: var(--s-2);
	flex-wrap: wrap;
}

/* Chip colors (helper modifiers) */
.nataanimal-seminars[data-mode="highlight"] .pill--meta{
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.14);
	color: rgba(255,255,255,.86);
}
.nataanimal-seminars[data-mode="highlight"] .pill--lang{
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.18);
	color: rgba(255,255,255,.92);
}
.nataanimal-seminars[data-mode="highlight"] .pill--left{
	background: rgba(255,175,90,.22);
	border-color: rgba(255,175,90,.52);
	color: rgba(255,255,255,.92);
}
.nataanimal-seminars[data-mode="highlight"] .pill--cap{
	background: rgba(210,140,255,.16);
	border-color: rgba(210,140,255,.42);
	color: rgba(255,255,255,.92);
}
.nataanimal-seminars[data-mode="highlight"] .pill--note{
	background: rgba(120,170,255,.16);
	border-color: rgba(120,170,255,.42);
	color: rgba(255,255,255,.92);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* title */
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard__title{ margin:0; }
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard__title a{ color: inherit; text-decoration: none; }

.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsTicket__title{
	font-size: var(--fs-h3);
	line-height: 1.15;
	font-weight: 650;

	display:-webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--title-lines);

	overflow:hidden;
	max-height: calc(var(--title-lines) * 1.15em);
}

/* location text (offline only) */
.nataanimal-seminars[data-mode="highlight"] .seminarLocationText{
	display:none;
	margin-top: 0;
	font-size: var(--fs-meta);
	color: var(--muted);
	text-align:center;
	line-height: 1.25;
	letter-spacing: .02em;
	padding: 0 4px;

	display:-webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.nataanimal-seminars[data-mode="highlight"] .card.is-offline .seminarLocationText{
	display:-webkit-box;
}

/* excerpt */
.nataanimal-seminars[data-mode="highlight"] .seminarExcerpt{
	font-size: var(--fs-ex);
	color: rgba(255,255,255,.78);
	text-align:center;
	line-height: 1.35;
	letter-spacing: .01em;
	padding: 0 6px;

	display:-webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--na-L-excerpt-lines);
	overflow: hidden;
}

/* IMPORTANT: on M -> 1 line, on small -> hide */
@container (min-width: 321px) and (max-width: 420px){
	.nataanimal-seminars[data-mode="highlight"] .seminarExcerpt{
		-webkit-line-clamp: 1;
	}
}
@container (max-width: 340px){
	.nataanimal-seminars[data-mode="highlight"] .seminarExcerpt{
		display: none !important;
	}
}

/* actions */
.nataanimal-seminars[data-mode="highlight"] .actions,
.nataanimal-seminars[data-mode="highlight"] .nataanimal-seminarsCard__actions{
	margin-top:auto;
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-3);
}