/* Webcams: the card in the sidebar of a place page. The theme sets every link to its body size. */
.dotm-wcb { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; padding: 12px; border: 1px solid #e8eaf2; border-radius: 12px; background: #fff; font-family: var(--va-userfont, Roboto, sans-serif); }
.dotm-wcb h4 { margin: 0; color: var(--va-accent, #21294a); font-size: 18px; line-height: 24px; font-weight: 700; }
.dotm-wcb__big { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; text-decoration: none; cursor: pointer; }
.dotm-wcb__img { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #e4e6f2; }
.dotm-wcb__img img { position: absolute; top: 0; left: 0; display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.dotm-wcb__img .dotm-wc-badge { left: 8px; top: 8px; padding: 2px 7px; font-size: 11px; line-height: 16px; }
.dotm-wcb__play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(33, 41, 74, .86); color: #fff; transition: background .15s ease; }
.dotm-wcb__big:hover .dotm-wcb__play { background: var(--va-hover, #be0000); }
.dotm-wcb__open { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 8px; background: var(--va-hover, #be0000); color: #fff; font-size: 14px; line-height: 18px; font-weight: 700; white-space: nowrap; transform: translate(-50%, -50%); }
.dotm-wcb__sun { position: absolute; left: 8px; right: 8px; bottom: 8px; width: fit-content; padding: 2px 7px; border-radius: 5px; background: rgba(33, 41, 74, .85); color: #fff; font-size: 12px; line-height: 16px; }
.dotm-wcb__t { color: var(--va-accent, #21294a); font-size: 15px; line-height: 20px; font-weight: 700; }
.dotm-wcb__m { margin: -8px 0 0; color: #545454; font-size: 13px; line-height: 18px; }
.dotm-wcb__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0; border: 0; background: none; color: var(--va-accent, #21294a); font: 500 14px/18px var(--va-userfont, Roboto, sans-serif); text-align: left; text-decoration: none; cursor: pointer; }
.dotm-wcb__row:hover { color: var(--va-hover, #be0000); }
.dotm-wcb__thumb { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 88px; height: 50px; overflow: hidden; border-radius: 6px; background: #e4e6f2; color: var(--va-accent, #21294a); }
.dotm-wcb__thumb img { position: absolute; top: 0; left: 0; display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
/* Until it is in view an image has no address: without this the browser outlines the empty box. */
.dotm-wcb__img img:not([src]), .dotm-wcb__thumb img:not([src]) { visibility: hidden; }
a.dotm-wcb__all { color: var(--va-accent, #21294a); font-size: 14px; line-height: 20px; font-weight: 500; }

/* The front page: the card lives in the column on wide screens, near the end of the page on phones,
   and neither is shown over the map. Its frame and title as those of the cards next to it. */
.va-frontpage-side .dotm-wcb, .dotm-wcb-mobile .dotm-wcb { margin: 0; padding: 16px 20px; border: 0; border-radius: var(--va-border-radius, 14px); box-shadow: var(--va-box-shadow, 0 10px 30px rgba(33, 41, 74, .08)); }
.va-frontpage-side .dotm-wcb h4, .dotm-wcb-mobile .dotm-wcb h4 { font-size: 20px; }
.dotm-wcb-mobile { margin: 28px 0 0; }
@media (max-width: 998px) {
	.va-frontpage-side .dotm-wcb { display: none; }
}
@media (min-width: 999px) {
	.dotm-wcb-mobile { display: none; }
}
body.va-map-mode .va-frontpage-side .dotm-wcb, body.va-map-mode .dotm-wcb-mobile { display: none; }

/* The row below the places of a category. */
.dotm-wcr { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 40px 0 0; padding: 20px 24px; border-radius: var(--va-border-radius, 12px); background: var(--va-white, #fff); box-shadow: var(--va-box-shadow, 0 0 40px rgba(0, 0, 0, .07)); font-family: var(--va-userfont, Roboto, sans-serif); }
.dotm-wcr__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.dotm-wcr h2 { margin: 0; color: var(--va-accent, #21294a); font-size: 26px; line-height: 32px; font-weight: 700; }
a.dotm-wcr__all { color: var(--va-accent, #21294a); font-size: 15px; line-height: 20px; font-weight: 500; }
a.dotm-wcr__all:hover { color: var(--va-hover, #be0000); }
.dotm-wcr__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dotm-wcr__card { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 0 40px rgba(0, 0, 0, .07); color: var(--va-accent, #21294a); font-family: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.dotm-wcr__card .dotm-wcb__img { border-radius: 0; }
.dotm-wcr__t { display: -webkit-box; overflow: hidden; padding: 8px 10px 2px; font-size: 15px; line-height: 19px; font-weight: 700; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dotm-wcr__card:hover .dotm-wcr__t { color: var(--va-hover, #be0000); }
.dotm-wcr__s { display: block; padding: 0 10px 10px; color: #545454; font-size: 13px; line-height: 18px; }
.dotm-wcr__card:hover .dotm-wcb__play { background: var(--va-hover, #be0000); }

/* Tablets: in four columns the badge and the button would meet. */
@media (max-width: 1000px) {
	.dotm-wcr__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: a row to scroll through, names only. The next card shows at the edge, so the row is seen to go on; a border, as the scrolling box would cut a shadow. */
@media (max-width: 760px) {
	.dotm-wcr { gap: 10px; padding: 14px; }
	.dotm-wcr h2 { font-size: 20px; line-height: 26px; }
	a.dotm-wcr__all { font-size: 14px; }
	.dotm-wcr__list { display: flex; gap: 10px; margin-right: -14px; padding: 2px 14px 6px 0; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
	.dotm-wcr__card { box-sizing: border-box; flex: 0 0 44%; border: 1px solid #e8eaf2; box-shadow: none; }
	.dotm-wcr__t { padding: 7px 8px 9px; font-size: 14px; line-height: 18px; }
	.dotm-wcr__s { display: none; }
	.dotm-wcr .dotm-wc-badge { left: 5px; top: 5px; padding: 1px 5px; font-size: 10px; line-height: 14px; }
	.dotm-wcr .dotm-wcb__play { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
	.dotm-wcr .dotm-wcb__play svg { width: 16px; height: 16px; }
}