/**
 * Bento Grid Posts — structure + Material Design 3 token defaults.
 * Every visual value is a CSS variable; Elementor Style controls override the
 * variables via {{WRAPPER}} selectors. RTL handled with logical properties so
 * dir="rtl" (default) and dir="ltr" both work with one stylesheet.
 */

.bgp-100-wrapper {
	/* ---- MD3 seed tokens (md.sys.*) — overridden by Style-tab controls ---- */
	--bgp-100-cols: 4;
	--bgp-100-row-height: 220px;
	--bgp-100-gap: 16px;                 /* md.sys.spacing.4 */
	--bgp-100-radius: 12px;              /* md.sys.shape.corner.medium */

	--bgp-100-shadow: 0px 1px 2px 0px rgba(0,0,0,0.30), 0px 1px 3px 1px rgba(0,0,0,0.15);        /* elevation level1 */
	--bgp-100-shadow-hover: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 0px rgba(0,0,0,0.30);  /* elevation level3 */

	--bgp-100-ease: cubic-bezier(0.2, 0, 0, 1);   /* md.sys.motion.easing.standard */
	--bgp-100-duration: 300ms;                    /* md.sys.motion.duration.medium2 */
	--bgp-100-zoom: 1.08;

	--bgp-100-surface: #F3EDF7;          /* md.sys.color.surface-container (light) */
	--bgp-100-focus: #6750A4;            /* md.sys.color.primary (light) */

	/* overlay scrim — gradient stops + behaviour */
	--bgp-100-overlay-from: rgba(0,0,0,0);
	--bgp-100-overlay-to: rgba(0,0,0,0.85);   /* md.sys.color.scrim @ 0.85 — guarantees text contrast */
	--bgp-100-overlay-dir: to top;
	--bgp-100-overlay-opacity: 1;
	--bgp-100-overlay-opacity-hover: 0.7;     /* "brighten" the image on hover */

	/* category chip = MD3 secondary-container */
	--bgp-100-cat-bg: #E8DEF8;
	--bgp-100-cat-color: #1D192B;
	--bgp-100-cat-radius: 8px;           /* md.sys.shape.corner.small */

	/* text-on-scrim colours */
	--bgp-100-title-color: #FFFFFF;
	--bgp-100-excerpt-color: rgba(255,255,255,0.90);
	--bgp-100-meta-color: rgba(255,255,255,0.85);
	--bgp-100-content-pad: 16px;

	/* filter bar */
	--bgp-100-filter-color: #49454F;     /* on-surface-variant */
	--bgp-100-filter-active-bg: #6750A4; /* primary */
	--bgp-100-filter-active-color: #FFFFFF;
	--bgp-100-filter-radius: 9999px;     /* shape.corner.full (chip) */
	--bgp-100-filter-gap: 8px;

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.bgp-100-wrapper *,
.bgp-100-wrapper *::before,
.bgp-100-wrapper *::after { box-sizing: inherit; }

.bgp-100-wrapper img { max-width: 100%; display: block; }

/* ---------- Filter bar (MD3 filter chips) ---------- */
.bgp-100-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bgp-100-filter-gap);
	margin-block-end: var(--bgp-100-gap);
}

.bgp-100-filter__btn {
	font: inherit;
	cursor: pointer;
	border: 1px solid currentColor;
	background: transparent;
	color: var(--bgp-100-filter-color);
	border-radius: var(--bgp-100-filter-radius);
	padding-block: 8px;
	padding-inline: 16px;
	line-height: 1.2;
	min-height: 32px;
	transition: background-color var(--bgp-100-duration) var(--bgp-100-ease),
	            color var(--bgp-100-duration) var(--bgp-100-ease);
}

.bgp-100-filter__btn[aria-pressed="true"] {
	background: var(--bgp-100-filter-active-bg);
	color: var(--bgp-100-filter-active-color);
	border-color: var(--bgp-100-filter-active-bg);
}

.bgp-100-filter__btn:focus-visible {
	outline: 3px solid var(--bgp-100-focus);
	outline-offset: 2px;
}

/* ---------- The bento grid ---------- */
.bgp-100-grid {
	display: grid;
	grid-template-columns: repeat(var(--bgp-100-cols), minmax(0, 1fr));
	grid-auto-rows: var(--bgp-100-row-height);
	grid-auto-flow: row dense;
	gap: var(--bgp-100-gap);
}

/* size assignment (desktop) */
.bgp-100-card { grid-column: span 1; grid-row: span 1; }
.bgp-100-card.is-2x1 { grid-column: span 2; }
.bgp-100-card.is-1x2 { grid-row: span 2; }
.bgp-100-card.is-2x2 { grid-column: span 2; grid-row: span 2; }

.bgp-100-card.is-hidden { display: none; }

/* ---------- Card ---------- */
.bgp-100-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--bgp-100-radius);
	background-color: var(--bgp-100-surface);
	box-shadow: var(--bgp-100-shadow);
	isolation: isolate;
	transition: transform var(--bgp-100-duration) var(--bgp-100-ease),
	            box-shadow var(--bgp-100-duration) var(--bgp-100-ease);
}

.bgp-100-card__link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;
	z-index: 2; /* above media + overlay; the content layer (z3) sits above it */
}

/* media */
.bgp-100-card__media {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.bgp-100-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--bgp-100-duration) var(--bgp-100-ease);
}

/* overlay scrim */
.bgp-100-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: var(--bgp-100-overlay-opacity);
	background-image: linear-gradient(var(--bgp-100-overlay-dir), var(--bgp-100-overlay-from), var(--bgp-100-overlay-to));
	transition: opacity var(--bgp-100-duration) var(--bgp-100-ease);
}

/* content */
.bgp-100-card__content {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: var(--bgp-100-content-pad);
	text-align: start;
	pointer-events: none; /* let clicks fall through to __link; re-enable on real links */
}

.bgp-100-card__content a { pointer-events: auto; position: relative; z-index: 4; }

/* category chip */
.bgp-100-card__cat {
	display: inline-flex;
	align-items: center;
	background: var(--bgp-100-cat-bg);
	color: var(--bgp-100-cat-color);
	border-radius: var(--bgp-100-cat-radius);
	padding-block: 4px;
	padding-inline: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.1px;        /* md.sys.typescale.label-large */
}

/* title */
.bgp-100-card__title {
	margin: 0;
	color: var(--bgp-100-title-color);
	font-size: 22px;
	line-height: 28px;            /* md.sys.typescale.title-large */
	overflow-wrap: anywhere;
}
.bgp-100-card__title a { color: inherit; text-decoration: none; }

/* excerpt */
.bgp-100-card__excerpt {
	margin: 0;
	color: var(--bgp-100-excerpt-color);
	font-size: 14px;
	line-height: 20px;            /* md.sys.typescale.body-medium */
	overflow-wrap: anywhere;
}

/* meta */
.bgp-100-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	color: var(--bgp-100-meta-color);
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;             /* md.sys.typescale.label-medium */
}

.bgp-100-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.bgp-100-meta__item svg {
	width: 1em;
	height: 1em;
	flex: none;
	fill: currentColor;
}

.bgp-100-card.has-no-image .bgp-100-card__overlay {
	background-image: linear-gradient(var(--bgp-100-overlay-dir), rgba(0,0,0,0), rgba(0,0,0,0.45));
}

/* ---------- Hover effects ---------- */
@media (hover: hover) {
	.bgp-100-card:hover { transform: translateY(-6px); box-shadow: var(--bgp-100-shadow-hover); }
	.bgp-100-card:hover .bgp-100-card__img { transform: scale(var(--bgp-100-zoom)); }
	.bgp-100-card:hover .bgp-100-card__overlay { opacity: var(--bgp-100-overlay-opacity-hover); }
}

.bgp-100-card:focus-within { box-shadow: var(--bgp-100-shadow-hover); }
.bgp-100-card__link:focus-visible {
	outline: 3px solid var(--bgp-100-focus);
	outline-offset: -3px;
	border-radius: var(--bgp-100-radius);
}

/* ---------- Empty state ---------- */
.bgp-100-empty {
	padding: 24px;
	text-align: center;
	border: 1px dashed var(--bgp-100-cat-bg);
	border-radius: var(--bgp-100-radius);
	color: var(--bgp-100-filter-color);
}

/* ---------- Responsive: large cards break into smaller units ---------- */
@media (max-width: 1024px) {
	/* tablet — cap to 2 columns of width, flatten tall/large to one row */
	.bgp-100-card.is-2x1,
	.bgp-100-card.is-2x2 { grid-column: span 2; }
	.bgp-100-card.is-1x2,
	.bgp-100-card.is-2x2 { grid-row: span 1; }
}

@media (max-width: 767px) {
	/* mobile — single column stack, every card becomes 1×1 with auto height */
	.bgp-100-grid { grid-auto-rows: auto; }
	.bgp-100-card,
	.bgp-100-card.is-2x1,
	.bgp-100-card.is-1x2,
	.bgp-100-card.is-2x2 {
		grid-column: span 1;
		grid-row: span 1;
		min-height: var(--bgp-100-row-height);
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.bgp-100-card,
	.bgp-100-card__img,
	.bgp-100-card__overlay,
	.bgp-100-filter__btn { transition: none; }
	.bgp-100-card:hover { transform: none; }
	.bgp-100-card:hover .bgp-100-card__img { transform: none; }
}

/* ---------- Dark scheme (MD3 dark tokens) ---------- */
@media (prefers-color-scheme: dark) {
	.bgp-100-wrapper {
		--bgp-100-surface: #211F26;       /* surface-container dark */
		--bgp-100-focus: #D0BCFF;         /* primary dark */
		--bgp-100-cat-bg: #4A4458;        /* secondary-container dark */
		--bgp-100-cat-color: #E8DEF8;     /* on-secondary-container dark */
		--bgp-100-filter-color: #CAC4D0;  /* on-surface-variant dark */
		--bgp-100-filter-active-bg: #D0BCFF;
		--bgp-100-filter-active-color: #381E72;
	}
}