/* DataClave Events: front end. Colours follow the original dataclaveltd.com event cards. */
.dce-wrap {
	--dce-blue: #1565c0;
	--dce-blue-soft: #2b7bd6;
	--dce-red: #e53945;
	--dce-ink: #222;
	--dce-muted: #5f6b7a;
	--dce-line: #e3e8ef;
	--dce-card: #fff;
	color: var(--dce-ink);
	box-sizing: border-box;
}
.dce-wrap *, .dce-wrap *::before, .dce-wrap *::after { box-sizing: inherit; }

/* Grid */
.dce-wrap { container-type: inline-size; }
.dce-grid { display: grid; gap: 28px; margin: 0 0 32px; grid-template-columns: repeat(var(--dce-cols, 3), minmax(0, 1fr)); }
.dce-cols-1 { --dce-cols: 1; }
.dce-cols-2 { --dce-cols: 2; }
.dce-cols-3 { --dce-cols: 3; }
.dce-cols-4 { --dce-cols: 4; }
/* Reflow by the width the block actually gets, not the screen, so cards never get squeezed. */
@container (max-width: 1180px) { .dce-grid.dce-cols-4 { --dce-cols: 3; } }
@container (max-width: 1020px) { .dce-grid.dce-cols-3, .dce-grid.dce-cols-4 { --dce-cols: 2; } }
@container (max-width: 700px) { .dce-grid { --dce-cols: 1 !important; gap: 18px; } }
@supports not (container-type: inline-size) {
	@media (max-width: 1024px) { .dce-grid { --dce-cols: 2 !important; } }
	@media (max-width: 680px) { .dce-grid { --dce-cols: 1 !important; } }
}

/* Card */
.dce-card {
	display: flex;
	gap: 24px;
	background: var(--dce-card);
	border-radius: 10px;
	padding: 22px 26px 26px;
	box-shadow: 0 6px 24px rgba(16, 38, 74, .10);
	height: 100%;
}
.dce-date { flex: 0 0 66px; text-align: center; }
.dce-day {
	display: flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: 50%;
	border: 3px solid #e8eef6; box-shadow: 0 2px 6px rgba(16,38,74,.08);
	color: var(--dce-blue); font-size: 24px; font-weight: 600; line-height: 1;
}
.dce-mon { display: block; margin-top: 10px; color: var(--dce-blue); font-size: 16px; font-weight: 600; }
.dce-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dce-title {
	margin: 10px 0 18px; font-size: 17px; font-weight: 600;
	letter-spacing: .04em; line-height: 1.7; text-transform: uppercase; color: var(--dce-ink);
}
.dce-line { margin: 0 0 6px; font-size: 17px; line-height: 1.55; }
.dce-label { color: var(--dce-ink); }
.dce-venue, .dce-price { color: var(--dce-red); }
.dce-time { color: var(--dce-blue-soft); }
.dce-time b { color: var(--dce-blue); font-weight: 700; }
.dce-note { color: var(--dce-muted); font-size: 12px; }
.dce-actions { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Buttons */
.dce-btn {
	display: inline-block; padding: 10px 24px; border: 2px solid var(--dce-blue); border-radius: 8px;
	color: var(--dce-blue); background: #fff; font-size: 18px; font-weight: 500; text-decoration: none !important;
	line-height: 1.3; cursor: pointer; transition: background .15s, color .15s;
}
.dce-btn:hover, .dce-btn:focus { background: var(--dce-blue); color: #fff; }
.dce-btn-solid { background: var(--dce-blue); color: #fff; }
.dce-btn-solid:hover, .dce-btn-solid:focus { background: #0d4f9c; border-color: #0d4f9c; }
.dce-btn-sm { padding: 5px 14px; font-size: 14px; }
.dce-tag {
	font-size: 12px; color: var(--dce-muted); background: #f2f5f9; border-radius: 99px;
	padding: 4px 10px; text-decoration: none !important; max-width: 100%;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dce-tag:hover { color: var(--dce-blue); background: #e7f0fb; }
.dce-viewall { text-align: center; margin: 8px 0 0; }

/* Month headings */
.dce-month {
	font-size: 22px; font-weight: 700; color: var(--dce-blue); margin: 30px 0 16px;
	padding-bottom: 8px; border-bottom: 2px solid var(--dce-line);
}

/* Filters */
.dce-filters { margin: 0 0 18px; }
.dce-download { margin: 0 0 16px; }
.dce-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dce-chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px;
	border: 1px solid var(--dce-line); background: #fff; color: var(--dce-ink); font-size: 14px;
	text-decoration: none !important; line-height: 1.3;
}
.dce-chip span { background: #eef3fa; color: var(--dce-blue); border-radius: 99px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.dce-chip:hover { border-color: var(--dce-blue); color: var(--dce-blue); }
.dce-chip.is-active { background: var(--dce-blue); border-color: var(--dce-blue); color: #fff; }
.dce-chip.is-active span { background: rgba(255,255,255,.2); color: #fff; }
@container (max-width: 700px) {
	.dce-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
	.dce-chip { flex: 0 0 auto; white-space: nowrap; }
	.dce-search select { flex: 1 1 45%; min-width: 0; }
}
.dce-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dce-search input[type=search], .dce-search select {
	padding: 9px 12px; border: 1px solid #cfd8e3; border-radius: 8px; font-size: 15px; background: #fff; min-width: 160px;
}
.dce-search input[type=search] { flex: 1 1 240px; }
.dce-search .dce-btn { font-size: 15px; padding: 9px 20px; }
.dce-reset { font-size: 14px; color: var(--dce-muted); }
.dce-empty { padding: 26px; background: #f6f8fb; border-radius: 10px; color: var(--dce-muted); }

/* Pagination */
.dce-pages { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0 0; }
.dce-pages a, .dce-pages span { padding: 7px 13px; border: 1px solid var(--dce-line); border-radius: 6px; text-decoration: none; color: var(--dce-blue); }
.dce-pages .is-active { background: var(--dce-blue); color: #fff; border-color: var(--dce-blue); }

/* Table layout */
.dce-table-wrap { overflow-x: auto; }
.dce-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.dce-table th { background: var(--dce-blue); color: #fff; text-align: left; padding: 10px 12px; }
.dce-table td { padding: 10px 12px; border-bottom: 1px solid var(--dce-line); vertical-align: top; }
.dce-table tr:nth-child(even) td { background: #f8fafd; }

/* Products */
.dce-products { display: grid; gap: 20px; }
.dce-products.dce-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dce-products.dce-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dce-products.dce-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 1020px) { .dce-products.dce-cols-3, .dce-products.dce-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 640px) { .dce-products { grid-template-columns: 1fr !important; } }
.dce-product {
	display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 10px; background: #fff;
	box-shadow: 0 6px 24px rgba(16,38,74,.08); border-top: 4px solid var(--dce-blue);
	text-decoration: none !important; color: var(--dce-ink); transition: transform .15s, box-shadow .15s;
}
.dce-product:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(16,38,74,.14); }
.dce-product-name { font-weight: 600; font-size: 17px; line-height: 1.4; }
.dce-product-desc { color: var(--dce-muted); font-size: 14px; }
.dce-product-count { color: var(--dce-blue); font-weight: 600; font-size: 14px; margin-top: auto; }
.dce-product-next { color: var(--dce-muted); font-size: 13px; }

/* Registration form */
.dce-register .dce-card { margin-bottom: 24px; height: auto; }
.dce-register .dce-card .dce-btn { display: none; }
.dce-active { margin: 14px 0 0; color: var(--dce-muted); font-size: 15px; }
.dce-form label { font-weight: 500; font-size: 15px; display: block; }
.dce-form input:not([type=hidden]), .dce-form select, .dce-form textarea {
	width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid #cfd8e3; border-radius: 8px; font-size: 15px; background: #fff;
}
.dce-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
@media (max-width: 680px) { .dce-form-grid { grid-template-columns: 1fr; } }
.dce-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.dce-alert { padding: 14px 18px; border-radius: 8px; margin-bottom: 18px; }
.dce-alert-ok { background: #e8f6ee; color: #17663a; }
.dce-alert-err { background: #fdecee; color: #9b1c27; }
.dce-single .dce-card { margin-bottom: 24px; height: auto; }

@container (max-width: 420px) {
	.dce-card { padding: 18px; gap: 14px; }
	.dce-date { flex-basis: 54px; }
	.dce-day { width: 52px; height: 52px; font-size: 20px; }
	.dce-title { font-size: 15px; }
	.dce-line { font-size: 15px; }
}