/**
 * Archív tried (Archived Classes) page styles
 *
 * Page: /archiv-tried/
 * Template: page-archiv-tried.php
 * Namespace: .zsmh-archiv-*
 * Accent: #8b7355 (sepia/amber — distinct from active triedy orange)
 * Depends on: triedy.css (for .zsmh-triedy-container)
 */

/* ═══════════════════════════════════════════
   DIVI OVERRIDES
   ═══════════════════════════════════════════ */
.zsmh-archiv-page .container {
	width: 80% !important;
	max-width: 1080px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

.zsmh-archiv-page #content-area {
	padding: 0 !important;
	margin: 0 !important;
}

.zsmh-archiv-page #left-area {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.zsmh-archiv-page #sidebar,
.zsmh-archiv-page .et_right_sidebar #sidebar {
	display: none !important;
}

.zsmh-archiv-page {
	overflow-x: clip !important;
}

body.page-template-page-archiv-tried {
	flex-direction: column !important;
}

/* ═══════════════════════════════════════════
   FULL-WIDTH BREAKOUT
   ═══════════════════════════════════════════ */
.zsmh-archiv-hero,
.zsmh-archiv-main {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* ═══════════════════════════════════════════
   HERO SECTION — sepia/amber tones
   ═══════════════════════════════════════════ */
.zsmh-archiv-hero {
	background: linear-gradient(160deg, #fdfaf5 0%, #f9f0e0 40%, #f0e4cc 100%);
	border-bottom: 3px solid #8b7355;
	padding: 32px 0 24px;
}

.zsmh-archiv-title {
	font-family: var(--font-heading) !important;
	font-size: 2rem !important;
	font-weight: 700 !important;
	color: #333 !important;
	margin: 0 0 4px 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

.zsmh-archiv-icon {
	display: inline-block;
	margin-right: 8px;
	vertical-align: middle;
	font-size: 1.6rem;
	line-height: 1;
}

.zsmh-archiv-subtitle {
	font-family: var(--font-body) !important;
	font-size: 0.88rem !important;
	color: #999 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.zsmh-archiv-subtitle strong {
	color: #8b7355;
}

/* ── Aggregate stats ── */
.zsmh-archiv-stats {
	display: flex;
	gap: 24px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.zsmh-archiv-stat {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	color: #666;
}

.zsmh-archiv-stat-number {
	font-weight: 700;
	font-size: 1.1rem;
	color: #8b7355;
}

.zsmh-archiv-stat svg {
	width: 16px;
	height: 16px;
	color: #8b7355;
	opacity: 0.6;
}

/* ── Nav pills ── */
.zsmh-archiv-nav {
	display: flex;
	gap: 6px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.zsmh-archiv-pill {
	padding: 5px 16px;
	border-radius: 50px;
	font-family: var(--font-heading);
	font-size: 0.78rem;
	font-weight: 700;
	color: #777;
	background: rgba(255,255,255,0.7);
	border: 1.5px solid #ddd;
	cursor: pointer;
	transition: all 0.15s;
	white-space: nowrap;
	text-decoration: none;
}

.zsmh-archiv-pill:hover {
	background: #fff;
	border-color: #8b7355;
	color: #8b7355;
}

.zsmh-archiv-pill.active {
	background: #8b7355;
	color: #fff;
	border-color: #8b7355;
}

/* ── GDPR notice bar ── */
.zsmh-archiv-notice {
	margin-top: 16px;
	padding: 10px 16px;
	background: rgba(139,115,85,0.06);
	border-radius: 8px;
	font-size: 0.75rem;
	color: #8b7355;
	display: flex;
	align-items: center;
	gap: 8px;
}

.zsmh-archiv-notice svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: 0.6;
}

/* ═══════════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════════ */
.zsmh-archiv-main {
	background: #fafafa;
	padding: 32px 0 48px;
	min-height: 60vh;
}

/* ═══════════════════════════════════════════
   GENERATION SECTION
   ═══════════════════════════════════════════ */
.zsmh-archiv-generation {
	margin-bottom: 48px;
}

.zsmh-archiv-gen-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.zsmh-archiv-gen-year {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	color: #333;
}

.zsmh-archiv-gen-label {
	font-size: 0.78rem;
	color: #999;
	padding: 2px 10px;
	background: rgba(139,115,85,0.08);
	border-radius: 20px;
}

.zsmh-archiv-gen-line {
	flex-grow: 1;
	height: 1px;
	background: linear-gradient(90deg, #d0c4b0, transparent);
}

/* ═══════════════════════════════════════════
   CLASS CARDS — 2-column grid
   ═══════════════════════════════════════════ */
.zsmh-archiv-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 20px;
}

.zsmh-archiv-card {
	background: #fff;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.06);
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
	overflow: hidden;
	transition: transform 0.15s, box-shadow 0.15s;
	display: block;
	text-decoration: none;
	color: inherit;
}

.zsmh-archiv-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 24px rgba(0,0,0,0.10);
}

.zsmh-archiv-card-accent {
	height: 4px;
	background: linear-gradient(90deg, #8b7355, #c4a66a);
}

.zsmh-archiv-card-body {
	padding: 20px;
}

.zsmh-archiv-card-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.zsmh-archiv-card-badge {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: #faf5ed;
	border: 2px solid #8b7355;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 700;
	color: #8b7355;
	flex-shrink: 0;
}

.zsmh-archiv-card-info {
	flex: 1;
	min-width: 0;
}

.zsmh-archiv-card-name {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	color: #333;
	line-height: 1.2;
}

.zsmh-archiv-card-period {
	font-size: 0.72rem;
	color: #999;
	margin-top: 2px;
}

/* ── Teacher row ── */
.zsmh-archiv-card-teacher {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	font-size: 0.82rem;
	color: #666;
}

.zsmh-archiv-card-teacher svg {
	width: 14px;
	height: 14px;
	color: #ccc;
	flex-shrink: 0;
}

.zsmh-archiv-card-teacher-name {
	color: #8b7355;
	font-weight: 500;
}

/* ── Stats row ── */
.zsmh-archiv-card-stats {
	display: flex;
	gap: 16px;
	padding-top: 10px;
	border-top: 1px solid #f0f0f0;
	font-size: 0.75rem;
	color: #999;
}

.zsmh-archiv-card-stat {
	display: flex;
	align-items: center;
	gap: 4px;
}

.zsmh-archiv-card-stat svg {
	width: 13px;
	height: 13px;
	color: #ccc;
}

/* ── Student names ── */
.zsmh-archiv-card-students {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #f0f0f0;
}

.zsmh-archiv-card-students-label {
	font-size: 0.72rem;
	font-weight: 600;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

.zsmh-archiv-card-students-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-size: 0.75rem;
	color: #888;
	line-height: 1.6;
}

.zsmh-archiv-card-students-list span {
	white-space: nowrap;
}

/* ═══════════════════════════════════════════
   EVENT PREVIEW — horizontal 4-col strip
   ═══════════════════════════════════════════ */
.zsmh-archiv-events {
	margin-top: 4px;
}

.zsmh-archiv-events-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.zsmh-archiv-events-label {
	font-size: 0.78rem;
	font-weight: 600;
	color: #888;
}

.zsmh-archiv-events-links {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	flex-wrap: wrap;
}
.zsmh-archiv-events-links a {
	color: #8b7355;
	font-weight: 600;
	text-decoration: none;
}
.zsmh-archiv-events-links a:hover {
	text-decoration: underline;
}
.zsmh-archiv-events-sep {
	color: #ccc;
}

.zsmh-archiv-events-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.zsmh-archiv-event-card {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.06);
	box-shadow: 0 1px 6px rgba(0,0,0,0.04);
	transition: transform 0.15s, box-shadow 0.15s;
	text-decoration: none;
	color: inherit;
	display: block;
}

.zsmh-archiv-event-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.zsmh-archiv-event-thumb {
	width: 100%;
	height: 120px;
	object-fit: cover;
	display: block;
	background: linear-gradient(135deg, #f0e4cc, #e8d5b0);
}

.zsmh-archiv-event-body {
	padding: 10px 12px;
}

.zsmh-archiv-event-date {
	font-size: 0.65rem;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.zsmh-archiv-event-title {
	font-family: var(--font-heading);
	font-size: 0.78rem;
	font-weight: 600;
	color: #333;
	line-height: 1.3;
	margin-top: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Fallback gradient for events without thumbnail */
.zsmh-archiv-event-fallback {
	width: 100%;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}

/* ═══════════════════════════════════════════
   MŠ COMPACT SECTION
   ═══════════════════════════════════════════ */
.zsmh-archiv-ms-section {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 2px solid #e8e0d4;
}

.zsmh-archiv-ms-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.zsmh-archiv-ms-icon {
	font-size: 1.4rem;
}

.zsmh-archiv-ms-title {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	color: #333;
}

.zsmh-archiv-ms-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.zsmh-archiv-ms-item {
	background: #fff;
	border-radius: 10px;
	padding: 14px 16px;
	border: 1px solid rgba(0,0,0,0.05);
	box-shadow: 0 1px 6px rgba(0,0,0,0.03);
	display: flex;
	align-items: center;
	gap: 10px;
	transition: transform 0.15s, box-shadow 0.15s;
	text-decoration: none;
	color: inherit;
}

.zsmh-archiv-ms-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 3px 12px rgba(0,0,0,0.06);
}

.zsmh-archiv-ms-emoji {
	font-size: 1.4rem;
}

.zsmh-archiv-ms-info {
	flex: 1;
}

.zsmh-archiv-ms-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.88rem;
	color: #333;
}

.zsmh-archiv-ms-meta {
	font-size: 0.72rem;
	color: #999;
}

/* ═══════════════════════════════════════════
   BACK LINK
   ═══════════════════════════════════════════ */
.zsmh-archiv-back {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #e8e0d4;
	text-align: center;
}

.zsmh-archiv-back a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	border-radius: 50px;
	background: #8b7355;
	color: #fff;
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 700;
	transition: background 0.15s;
	text-decoration: none;
}

.zsmh-archiv-back a:hover {
	background: #7a6548;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
	.zsmh-archiv-title { font-size: 1.6rem !important; }
	.zsmh-archiv-cards { grid-template-columns: 1fr; }
	.zsmh-archiv-events-grid { grid-template-columns: repeat(2, 1fr); }
	.zsmh-archiv-ms-list { grid-template-columns: repeat(2, 1fr); }
	.zsmh-archiv-stats { gap: 16px; }
	.zsmh-archiv-gen-header { flex-wrap: wrap; }
	.zsmh-archiv-gen-line { display: none; }
}

@media (max-width: 480px) {
	.zsmh-archiv-events-grid { grid-template-columns: 1fr; }
	.zsmh-archiv-ms-list { grid-template-columns: 1fr; }
	.zsmh-archiv-nav { gap: 4px; }
	.zsmh-archiv-pill { font-size: 0.72rem; padding: 4px 12px; }
	.zsmh-archiv-card-badge { width: 44px; height: 44px; font-size: 0.95rem; }
	.zsmh-archiv-card-name { font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════ */
@media print {
	.zsmh-archiv-nav,
	.zsmh-archiv-notice,
	.zsmh-archiv-back { display: none; }
	.zsmh-archiv-hero { border-bottom: 1px solid #999; }
	.zsmh-archiv-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
	.zsmh-archiv-event-card { break-inside: avoid; }
}
