/* Reach HR Trainings — premium design.
   Self-contained; scoped to .rht-* (listing/single) plus a few .reach-hr-*
   classes still used by the enroll form, notices and dashboard "My Trainings". */

:root {
	--rht-brand: #3c65f5;
	--rht-brand-d: #2348d6;
	--rht-ink: #05264e;
	--rht-muted: #66738c;
	--rht-line: #e7ebf3;
	--rht-soft: #f7f9ff;
	--rht-green: #11b886;
}

/* ===== Buttons ===== */
.rht-btn, .reach-hr-btn {
	display: inline-block;
	background: var(--rht-brand);
	color: #fff !important;
	border: none;
	border-radius: 9px;
	padding: 11px 22px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
	line-height: 1.3;
}
.rht-btn:hover, .reach-hr-btn:hover { background: var(--rht-brand-d); color: #fff; }
.rht-btn[disabled] { background: #c3cbe0; cursor: not-allowed; }
.rht-btn-block { display: block; width: 100%; text-align: center; }
.rht-btn-lg { padding: 14px 24px; font-size: 16px; }
.reach-hr-btn-sm { padding: 6px 14px; font-size: 13px; }

/* ===== Archive hero ===== */
.rht-archive { color: var(--rht-ink); }
.rht-hero {
	background: linear-gradient(135deg, #05264e 0%, #16357a 60%, #3c65f5 100%);
	color: #fff;
	padding: 64px 16px 72px;
	text-align: center;
}
.rht-hero-inner { max-width: 820px; margin: 0 auto; }
.rht-hero-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; opacity: .8; margin: 0 0 10px; }
.rht-hero-title { font-size: 42px; line-height: 1.15; margin: 0 0 14px; color: #fff; }
.rht-hero-sub { font-size: 17px; line-height: 1.6; opacity: .9; margin: 0 auto 22px; max-width: 680px; }
.rht-hero-stats { display: flex; gap: 28px; justify-content: center; font-size: 15px; opacity: .92; }
.rht-hero-stats strong { font-size: 20px; }

/* ===== Archive body ===== */
.rht-archive-body { max-width: 1060px; margin: -36px auto 60px; padding: 0 16px; position: relative; z-index: 2; }

.rht-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.rht-filter {
	display: inline-block; padding: 8px 18px; border-radius: 999px;
	background: #fff; border: 1px solid var(--rht-line); color: var(--rht-ink);
	font-size: 14px; font-weight: 600; text-decoration: none; transition: all .15s ease;
}
.rht-filter:hover { border-color: #c7d2f0; color: var(--rht-brand); }
.rht-filter.active { background: var(--rht-brand); border-color: var(--rht-brand); color: #fff; }

/* ===== Continuous list of training rows ===== */
.rht-list { display: flex; flex-direction: column; gap: 18px; }

.rht-row {
	display: grid;
	grid-template-columns: 240px 1fr auto;
	gap: 22px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--rht-line);
	border-radius: 14px;
	padding: 16px;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.rht-row:hover { box-shadow: 0 14px 34px rgba(16, 33, 86, .10); transform: translateY(-2px); border-color: #dfe7fb; }

.rht-row-media { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16/10; background: var(--rht-soft); }
.rht-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rht-row-media-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #e9eefb, #f6f8fe); }
.rht-badge { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; color: #fff; }
.rht-badge-open { background: var(--rht-green); }
.rht-badge-closed { background: #93a0b5; }

.rht-row-body { min-width: 0; }
.rht-row-cats { margin-bottom: 6px; }
.rht-row-cats a { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--rht-brand); text-decoration: none; }
.rht-row-title { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
.rht-row-title a { color: var(--rht-ink); text-decoration: none; }
.rht-row-title a:hover { color: var(--rht-brand); }
.rht-row-excerpt { color: var(--rht-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; }
.rht-row-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rht-row-meta li { font-size: 13.5px; color: var(--rht-muted); }
.rht-ico { margin-right: 5px; }

.rht-row-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; white-space: nowrap; }
.rht-row-fee { font-size: 20px; font-weight: 700; color: var(--rht-ink); }

.rht-pagination { margin-top: 34px; }
.rht-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px; border-radius: 8px; border: 1px solid var(--rht-line); color: var(--rht-ink); text-decoration: none; }
.rht-pagination .page-numbers.current { background: var(--rht-brand); color: #fff; border-color: var(--rht-brand); }
.rht-empty { padding: 60px 20px; text-align: center; color: var(--rht-muted); }

@media (max-width: 720px) {
	.rht-hero-title { font-size: 32px; }
	.rht-row { grid-template-columns: 1fr; }
	.rht-row-media { aspect-ratio: 16/9; }
	.rht-row-aside { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ===== Single training ===== */
.rht-single { color: var(--rht-ink); }
.rht-single-hero { background: var(--rht-soft); border-bottom: 1px solid var(--rht-line); padding: 40px 16px; }
.rht-single-hero-inner { max-width: 1080px; margin: 0 auto; }
.rht-breadcrumb { font-size: 13px; color: var(--rht-muted); margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.rht-breadcrumb a { color: var(--rht-brand); text-decoration: none; }
.rht-single-title { font-size: 34px; line-height: 1.2; margin: 0 0 16px; color: var(--rht-ink); }
.rht-single-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.rht-single-facts li { font-size: 14.5px; color: var(--rht-muted); }

.rht-single-notice-wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.rht-single-notice-wrap .reach-hr-notice { margin-top: 20px; }

.rht-single-layout {
	max-width: 1080px; margin: 0 auto; padding: 36px 16px 64px;
	display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start;
}
@media (max-width: 900px) { .rht-single-layout { grid-template-columns: 1fr; } }

.rht-single-cover { border-radius: 14px; overflow: hidden; margin-bottom: 24px; }
.rht-single-cover img { width: 100%; height: auto; display: block; }
.rht-single-content { font-size: 16px; line-height: 1.75; color: #33405a; }
.rht-single-content h2, .rht-single-content h3 { color: var(--rht-ink); margin-top: 1.6em; }
.rht-single-content img { max-width: 100%; height: auto; border-radius: 10px; }

.rht-section-title { font-size: 22px; color: var(--rht-ink); margin: 36px 0 16px; }

/* Gallery */
.rht-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rht-gallery-item { display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; border: 1px solid var(--rht-line); background: var(--rht-soft); }
.rht-gallery-img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.rht-gallery-item:hover .rht-gallery-img { transform: scale(1.06); }

/* Enroll card (sticky sidebar) */
.rht-single-aside { position: sticky; top: 24px; }
.rht-enroll-card { background: #fff; border: 1px solid var(--rht-line); border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(16, 33, 86, .06); }
.rht-enroll-price { font-size: 30px; font-weight: 800; color: var(--rht-ink); margin-bottom: 16px; }
.rht-enroll-details { list-style: none; padding: 0; margin: 0 0 20px; }
.rht-enroll-details li { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rht-line); font-size: 14px; }
.rht-enroll-details li:last-child { border-bottom: none; }
.rht-enroll-label { color: var(--rht-muted); }
.rht-enroll-value { color: var(--rht-ink); font-weight: 600; text-align: right; }
.rht-enroll-note { margin: 14px 0 0; font-size: 13px; color: var(--rht-muted); text-align: center; }

/* ===== Enroll form (inside modal) — legacy .reach-hr-* classes ===== */
.reach-hr-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.reach-hr-field label { font-size: 14px; font-weight: 600; color: var(--rht-ink); margin-bottom: 6px; }
.reach-hr-field input, .reach-hr-field textarea {
	border: 1px solid #d7deee; border-radius: 8px; padding: 11px 14px; font-size: 15px; width: 100%; box-sizing: border-box;
}
.reach-hr-field input:focus, .reach-hr-field textarea:focus { outline: none; border-color: var(--rht-brand); }
.reach-hr-req { color: #e23; }

.reach-hr-notice { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.reach-hr-notice-success { background: #e8f6ee; color: #186a3b; border: 1px solid #bfe3cd; }
.reach-hr-notice-error { background: #fdecea; color: #922; border: 1px solid #f5c6c0; }

/* ===== Dashboard "My Trainings" table + status badges ===== */
.reach-hr-mytrainings-table { width: 100%; border-collapse: collapse; }
.reach-hr-mytrainings-table th, .reach-hr-mytrainings-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--rht-line); vertical-align: middle; }
.reach-hr-mytrainings-table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--rht-muted); background: var(--rht-soft); }
.reach-hr-mytrainings-table tbody tr:hover { background: #fafbff; }
.reach-hr-mytrainings-table a { color: var(--rht-ink); font-weight: 600; text-decoration: none; }
.reach-hr-mytrainings-table a:hover { color: var(--rht-brand); }
.reach-hr-mytrainings-empty { padding: 28px; text-align: center; color: var(--rht-muted); }
.reach-hr-mytrainings-empty .reach-hr-btn { margin-top: 12px; }

.reach-hr-status { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; }
.reach-hr-status-new { background: #e9eefb; color: #2348d6; }
.reach-hr-status-contacted { background: #fff4e0; color: #9a6700; }
.reach-hr-status-enrolled { background: #e8f6ee; color: #186a3b; }
.reach-hr-status-closed { background: #f0f1f4; color: #66738c; }

@media (max-width: 600px) {
	.reach-hr-mytrainings-table thead { display: none; }
	.reach-hr-mytrainings-table tr { display: block; border: 1px solid var(--rht-line); border-radius: 10px; margin-bottom: 14px; padding: 6px 0; }
	.reach-hr-mytrainings-table td { display: flex; justify-content: space-between; gap: 16px; border: none; padding: 8px 16px; }
	.reach-hr-mytrainings-table td::before { content: attr(data-label); font-weight: 600; color: var(--rht-muted); }
	.reach-hr-mytrainings-table td:last-child::before { content: ""; }
}