/* ==========================================================================
   Sidebar cards — Webkamera / Aktuální teploty / Mapa
   Shared markup used by mod_nykar_webcam, mod_nykar_weather and
   mod_nykar_staticmap (see .sidebar-card* classes in each module's
   tmpl/default.php). Kept in its own file rather than folded into
   main.css so the sidebar redesign is easy to review/revert on its own.
   ========================================================================== */

/* main.css pulls the breadcrumb up -60px to hug the header image, but the
   breadcrumb itself is a thin nav strip — the H1 below it is the real
   visual anchor of the main column. Aligning the sidebar's first card
   with the H1 (not the breadcrumb) reads as the two columns starting
   level, measured directly against the live page rather than mirroring
   the breadcrumb's own offset 1:1 (which pulled the sidebar up too far,
   overlapping the header image). */
.content-right {
	margin-top: -5px;
}

.sidebar-card {
	margin: 0 0 24px 0;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 6px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.sidebar-card:last-of-type {
	margin-bottom: 0;
}

.sidebar-card__title {
	margin: 0 0 16px 0;
	padding-bottom: 12px;
	border-bottom: 2px solid #f2f2f2;
	color: #1d8294;
	font-family: 'Roboto Slab', 'Arial', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
/* Consolidated location/timestamp riding on the same line as the title
   (e.g. "AKTUÁLNÍ POČASÍ — na Cresu, 01.05. 17:50") instead of its own row. */
.sidebar-card__title-meta {
	display: inline-block;
	margin-left: 6px;
	color: #999;
	font-family: 'Open Sans', 'Arial', sans-serif;
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.sidebar-card__media {
	display: block;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
}
.sidebar-card__media img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.35s ease;
}
.sidebar-card__media:hover img {
	transform: scale(1.04);
}

/* Webcam and map images both bleed to the card's edges instead of sitting
   inset, so the picture reads as large as the card allows rather than a
   small inset thumbnail — same treatment for both. */
.sidebar-card--webcam.sidebar-card,
.sidebar-card--map.sidebar-card {
	padding-bottom: 0;
	overflow: hidden;
}
/* No divider under the title — just the header on white, then the picture
   as the card's one real piece of content. */
.sidebar-card--webcam .sidebar-card__title,
.sidebar-card--map .sidebar-card__title {
	border-bottom: 0;
	padding-bottom: 0;
}
.sidebar-card--webcam .sidebar-card__media,
.sidebar-card--map .sidebar-card__media {
	/* padding-bottom is already 0 above, so only left/right need cancelling
	   here — a bottom value too would over-subtract and, combined with the
	   card's overflow:hidden, silently clip that many pixels off the image. */
	margin: 0 -24px 0;
	border-radius: 0;
}

/* Positioning only — colour, hover, type etc. come from .sidebar-card__btn,
   applied alongside this class in the markup so both buttons can never
   drift out of sync with each other again. */
.sidebar-card__map-badge {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	margin-top: 0;
}
/* Semi-transparent so the map shows through slightly — only for the badge
   sitting on the image; the weather button stays fully opaque on white. */
.sidebar-card__map-badge.sidebar-card__btn {
	background: rgba(29, 130, 148, 0.8);
}
.sidebar-card__map-badge.sidebar-card__btn:hover {
	background: rgba(21, 101, 112, 0.88);
}

.sidebar-card__stats {
	margin: 0;
}
.sidebar-card__stat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px dashed #eee;
}
.sidebar-card__stat:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.sidebar-card__stat dt {
	margin: 0;
	font-size: 13px;
	color: #777;
	font-weight: 400;
}
.sidebar-card__stat dd {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #222;
	white-space: nowrap;
}

.sidebar-card__btn {
	display: block;
	margin-top: 18px;
	padding: 11px 16px;
	background: #1d8294;
	color: #fff !important;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	text-decoration: none !important;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}
.sidebar-card__btn:hover {
	background: #156570;
}

@media (max-width: 767px) {
	.sidebar-card {
		padding: 20px;
	}
	.sidebar-card--webcam .sidebar-card__media,
	.sidebar-card--map .sidebar-card__media {
		margin: 0 -20px 0;
	}
}