/* Author: Kauno raj. turizmo centras — https://tobalt.lt */

/* A shortcode widget inside an Elementor flex container is a flex item and
   collapses to its content width (~60px). Both rules are needed: :has() for
   browsers that support it, the fixed widget id as the fallback. */
.elementor-widget-shortcode:has(.kau-leid-grid) { width: 100%; }
.elementor-element-kau1e1d .elementor-widget-container { width: 100%; }

.kau-leid-grid {
	max-width: 1140px;
	margin: 0 auto;
}

/* Tokens carried from the tiles this replaces. */
.kau-leid .tp-card__panel { background: #CAF0F8CC; }
.kau-leid .tp-card__title {
	font-family: Kanit, sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 26px;
	color: #1D1D1D;
}
.kau-leid:hover .tp-card__panel { background: #1C9E93D1; }
.kau-leid:hover .tp-card__title { color: #FFF; }

.kau-leid { border-radius: 20px; overflow: hidden; }

/* Sibling chip strip — never nested inside the card anchor. */
/* Language badges overlay the cover, top-left — same placement and visual language as the
   engine's own .tp-card__flags (places.css: absolute, top/left 12px, z-index 3, white pill,
   teal text, soft shadow), so a leidinys card reads like a maitinimo card.
   The container is a SIBLING placed before .kau-leid__link, never inside it: `tp-card` spends
   the only permitted <a> on the whole tile and <a> cannot nest in <a>. z-index lifts the
   badges above the full-card anchor so they stay clickable. */
.kau-leid__files {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	max-width: calc(100% - 20px);
}
.kau-leid__file {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 9px;
	border-radius: 100px;
	/* Teal fill + white text: separates from ANY cover, including the light map artwork
	   where a white pill relied on its shadow alone. Contrast #FFF on #166660 ≈ 6.8:1,
	   comfortably past WCAG AA for this size; the .94 alpha shifts it too little to matter. */
	background: rgba(22, 102, 96, .94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
	/* !important on exactly the properties Elementor's kit sets on links:
	   `.elementor-kit-14 a { color; font-size; font-weight; line-height; text-decoration }`
	   has specificity (0,1,1) and outranks this class selector (0,1,0). Without this the
	   badge renders as a teal blob with invisible text. Scoped to these five declarations
	   only — nothing else here needs to fight the theme. */
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .02em;
	color: #FFF !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
/* Inverted on interaction — an unmistakable state change now that the resting pill is filled.
   Also outranks `.elementor-kit-14 a:hover`, which would otherwise recolour the label. */
.kau-leid__file:hover,
.kau-leid__file:focus-visible {
	background: #FFF;
	color: #166660 !important;
}
.kau-leid__file:focus-visible { outline: 2px solid #166660; outline-offset: 2px; }

/* Touch targets stay usable on small screens without growing the badge visually much. */
@media (max-width: 480px) {
	.kau-leid__file { height: 26px; padding: 0 10px; font-size: 12px; }
}