/* =============================================================
 * Block: Sidebar picks (kl-picks)
 * Used for "Поради Клопотенка" / "Поради експертів" widgets.
 *
 * Shared palette with other KL blocks:
 *   red  : #9E0909
 *   text : #1E1E1E
 *
 * Structure:
 *   .kl-picks
 *     .kl-picks__title  — red rounded pill (title plate)
 *     .kl-picks__list
 *       .kl-picks__item
 *         .kl-picks__card
 *           .kl-picks__thumb > img
 *           .kl-picks__cat   — small red uppercase label
 *           .kl-picks__name  — dark bold title
 *
 * Specificity note: theme sidebar styles often have selectors like
 * `.sidebar-widget-area h3.widgettitle` (0,2,1) and widget links have
 * specific rules. We use 3-class chains (0,3,0) + scoping under
 * `.sidebar-widget-area` to reliably win without !important.
 * ============================================================= */

/* Hide the default widget <h3 class="widgettitle"> when the widget body
 * uses our .kl-picks markup (title is already part of the block). */
.sidebar-widget-area .widget:has(.kl-picks) > .widgettitle,
.sidebar-widget-area .widget_custom_html:has(.kl-picks) .widgettitle {
	display: none !important;
}

/* ---------- Outer wrapper ---------- */
.sidebar-widget-area .kl-picks,
.kl-picks {
	display: block;
	margin: 0 0 32px;
	padding: 0;
	font-family: Rubik, sans-serif;
	color: #1E1E1E;
}

/* ---------- Title plate (red pill) ---------- */
.sidebar-widget-area .kl-picks .kl-picks__title,
.kl-picks .kl-picks__title,
h3.kl-picks__title {
	display: inline-block;
    margin: 0 0 20px;
    padding: 12px 22px;
    border: 0;
    border-radius: 14px;
    background: #9E0909;
    color: #fff;
    font-family: Rubik, sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
}

/* ---------- List ---------- */
.sidebar-widget-area .kl-picks .kl-picks__list,
.kl-picks .kl-picks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.sidebar-widget-area .kl-picks .kl-picks__list .kl-picks__item,
.kl-picks .kl-picks__list .kl-picks__item {
	list-style: none;
	margin: 0;
	padding: 0;
	background: none;
}

/* ---------- Card (link) ---------- */
.sidebar-widget-area .kl-picks .kl-picks__item .kl-picks__card,
.kl-picks .kl-picks__item .kl-picks__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease;
}

.sidebar-widget-area .kl-picks .kl-picks__item .kl-picks__card:hover,
.sidebar-widget-area .kl-picks .kl-picks__item .kl-picks__card:focus,
.kl-picks .kl-picks__item .kl-picks__card:hover,
.kl-picks .kl-picks__item .kl-picks__card:focus {
	color: inherit;
	text-decoration: none;
	transform: translateY(-2px);
}

.kl-picks .kl-picks__item .kl-picks__card:hover .kl-picks__name,
.kl-picks .kl-picks__item .kl-picks__card:focus .kl-picks__name {
	color: #9E0909;
}

/* ---------- Thumbnail ---------- */
.kl-picks .kl-picks__card .kl-picks__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: #e8d9c4;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.kl-picks .kl-picks__thumb img,
.sidebar-widget-area .kl-picks .kl-picks__thumb img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* Fallback for very old browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 11) {
	.kl-picks .kl-picks__card .kl-picks__thumb {
		height: 0;
		padding-bottom: 68.75%; /* 11/16 */
		position: relative;
	}
	.kl-picks .kl-picks__thumb img {
		position: absolute;
		inset: 0;
	}
}

/* ---------- Category label ---------- */
.sidebar-widget-area .kl-picks .kl-picks__card .kl-picks__cat,
.kl-picks .kl-picks__card .kl-picks__cat {
	display: block;
	color: #9E0909;
	font-family: Rubik, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}

/* ---------- Recipe name ---------- */
.sidebar-widget-area .kl-picks .kl-picks__card .kl-picks__name,
.kl-picks .kl-picks__card .kl-picks__name {
	display: block;
	color: #1E1E1E;
	font-family: Rubik, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	margin: 2px 0 0;
	padding: 0;
	text-transform: none;
	transition: color 0.18s ease;
	/* Clamp at 3 lines so cards align vertically */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}