/* MightyCourse Blocks — Shared Frontend Styles */

/* ── Editor preview (inside Gutenberg only) ─── */
.mc-block-editor-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 32px 24px;
	background: #f0f4ff;
	border: 2px dashed #93c5fd;
	border-radius: 8px;
	text-align: center;
}
.mc-block-editor-icon  { font-size: 36px; }
.mc-block-editor-preview strong { font-size: 15px; color: #1e40af; }
.mc-block-editor-preview p { margin: 0; color: #6b7280; font-size: 13px; }
.mc-countdown-preview .mc-countdown-demo {
	display: flex; gap: 8px; margin-top: 12px;
}
.mc-countdown-preview .mc-countdown-unit {
	display: flex; flex-direction: column; align-items: center;
	background: #1e40af; color: #fff; border-radius: 6px; padding: 8px 12px; min-width: 50px;
}
.mc-countdown-preview .mc-countdown-num  { font-size: 22px; font-weight: 700; }
.mc-countdown-preview .mc-countdown-word { font-size: 10px; opacity: .75; text-transform: uppercase; }

/* ── Project List block ────────────────────── */
.mc-block-project-list { }

.mc-project-list-search { margin-bottom: 20px; }
.mc-search-input {
	width: 100%; max-width: 380px;
	padding: 10px 16px; font-size: 14px;
	border: 1.5px solid #e5e7eb; border-radius: 6px;
}
.mc-search-input:focus { outline: none; border-color: #2c6fad; box-shadow: 0 0 0 3px rgba(44,111,173,.1); }

.mc-project-grid {
	display: grid; gap: 20px;
}
.mc-project-grid.mc-cols-1 { grid-template-columns: 1fr; }
.mc-project-grid.mc-cols-2 { grid-template-columns: repeat(2,1fr); }
.mc-project-grid.mc-cols-3 { grid-template-columns: repeat(3,1fr); }
.mc-project-grid.mc-cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 780px) {
	.mc-project-grid.mc-cols-3,
	.mc-project-grid.mc-cols-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px) {
	.mc-project-grid { grid-template-columns: 1fr !important; }
}

.mc-project-card {
	border: 1px solid #e5e7eb; border-radius: 10px;
	background: #fff; overflow: hidden; display: flex; flex-direction: column;
	transition: box-shadow .15s, transform .15s;
}
.mc-project-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.mc-project-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.mc-project-type-badge {
	display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .06em; background: #e0f2fe; color: #0369a1;
	padding: 2px 8px; border-radius: 10px; width: fit-content;
}
.mc-project-card-title { font-size: 17px; font-weight: 700; margin: 0; color: #111827; }
.mc-project-card-desc  { font-size: 13px; color: #6b7280; margin: 0; line-height: 1.5; }
.mc-project-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.mc-meta-item {
	display: flex; align-items: center; gap: 6px;
	font-size: 12px; color: #6b7280;
}
.mc-meta-item svg { flex-shrink: 0; }
.mc-project-price { font-size: 15px; font-weight: 700; color: #2c6fad; margin-top: 6px; }
.mc-project-price.mc-free { color: #059669; }
.mc-project-card-footer {
	padding: 14px 20px; background: #f9fafb;
	border-top: 1px solid #e5e7eb;
	display: flex; align-items: center;
}
.mc-more-link { text-align: center; margin-top: 20px; font-size: 14px; }

/* ── Project Card block ────────────────────── */
.mc-block-project-card .mc-single-card {
	border: 1px solid #e5e7eb; border-radius: 12px;
	background: #fff; overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.mc-single-card-header {
	padding: 16px 24px; background: #f9fafb; border-bottom: 1px solid #e5e7eb;
	display: flex; align-items: center; gap: 8px;
}
.mc-type-pill, .mc-open-pill, .mc-closed-pill {
	font-size: 11px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .06em; padding: 3px 10px; border-radius: 10px;
}
.mc-type-pill   { background: #e0f2fe; color: #0369a1; }
.mc-open-pill   { background: #d1fae5; color: #065f46; margin-left: auto; }
.mc-closed-pill { background: #fee2e2; color: #991b1b; margin-left: auto; }

.mc-single-card-title { font-size: 22px; font-weight: 700; margin: 0; padding: 20px 24px 8px; }
.mc-single-card-desc  { font-size: 14px; color: #6b7280; margin: 0; padding: 0 24px 16px; line-height: 1.6; }
.mc-single-card-meta  { padding: 0 24px 16px; display: flex; flex-direction: column; gap: 8px; }
.mc-meta-row { display: flex; align-items: baseline; gap: 12px; font-size: 14px; }
.mc-meta-label { font-weight: 600; min-width: 130px; color: #374151; }
.mc-meta-val   { color: #6b7280; }
.mc-capacity-bar {
	display: inline-block; width: 80px; height: 6px;
	background: #e5e7eb; border-radius: 3px; overflow: hidden; margin-left: 6px; vertical-align: middle;
}
.mc-capacity-bar span {
	display: block; height: 100%; background: #2c6fad; border-radius: 3px;
}

.mc-session-list { padding: 16px 24px; border-top: 1px solid #f3f4f6; }
.mc-session-list h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin: 0 0 10px; }
.mc-session-row-compact {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px;
}
.mc-session-row-compact:last-child { border-bottom: none; }
.mc-session-name  { font-weight: 600; flex: 1; color: #111827; }
.mc-session-dt    { color: #6b7280; }
.mc-session-price { font-weight: 700; color: #2c6fad; }
.mc-session-spots { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #d1fae5; color: #065f46; }
.mc-session-spots.is-full { background: #fee2e2; color: #991b1b; }

.mc-single-card-cta { padding: 20px 24px; border-top: 1px solid #e5e7eb; }

/* ── Dashboard block ───────────────────────── */
.mc-block-dashboard { }
.mc-dashboard-empty {
	text-align: center; padding: 48px 24px;
	border: 2px dashed #e5e7eb; border-radius: 12px;
}
.mc-dashboard-empty-icon { font-size: 48px; margin-bottom: 12px; }

.mc-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
}
.mc-dashboard-card {
	border: 1px solid #e5e7eb; border-radius: 10px;
	background: #fff; overflow: hidden;
	box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.mc-dashboard-card-top {
	display: flex; align-items: flex-start; justify-content: space-between;
	padding: 16px 18px; border-bottom: 1px solid #f3f4f6;
}
.mc-dashboard-card-name { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.mc-dashboard-card-date { font-size: 12px; color: #9ca3af; }
.mc-dashboard-card-sessions { padding: 10px 18px; display: flex; gap: 6px; flex-wrap: wrap; }
.mc-session-chip {
	font-size: 12px; background: #eff6ff; color: #1d4ed8;
	padding: 3px 10px; border-radius: 12px; font-weight: 500;
}
.mc-dashboard-card-finance { padding: 12px 18px; display: flex; flex-direction: column; gap: 6px; }
.mc-finance-row { display: flex; justify-content: space-between; font-size: 13px; }
.mc-paid    { color: #059669; }
.mc-balance { color: #2c6fad; }
.mc-overdue-banner {
	font-size: 12px; font-weight: 600; background: #fee2e2;
	color: #991b1b; padding: 6px 10px; border-radius: 6px; margin-top: 4px;
}
.mc-next-due { font-size: 12px; color: #6b7280; margin-top: 2px; }

/* ── Countdown block ───────────────────────── */
.mc-block-countdown { }
.mc-countdown-inner {
	text-align: center; padding: 40px 24px;
	background: linear-gradient(135deg, #1e3a5f 0%, #2c6fad 100%);
	border-radius: 14px; color: #fff;
}
.mc-countdown-label {
	font-size: 12px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .1em; opacity: .75; margin: 0 0 6px;
}
.mc-countdown-name { font-size: 22px; font-weight: 700; margin-bottom: 24px; }
.mc-countdown-units {
	display: flex; align-items: center; justify-content: center;
	gap: 6px; margin-bottom: 20px;
}
.mc-countdown-unit { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mc-countdown-num {
	display: block; font-size: 40px; font-weight: 800;
	background: rgba(255,255,255,.15); border-radius: 8px;
	padding: 6px 14px; min-width: 70px; line-height: 1;
}
.mc-countdown-word { font-size: 11px; font-weight: 500; opacity: .75; text-transform: uppercase; letter-spacing: .06em; }
.mc-countdown-sep { font-size: 32px; font-weight: 700; opacity: .5; padding-bottom: 20px; }
.mc-countdown-date { font-size: 13px; opacity: .75; margin: 0 0 20px; }
.mc-countdown-started { font-size: 20px; font-weight: 700; margin: 16px 0; }

/* ── Shared button ─────────────────────────── */
.mc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 11px 24px; border-radius: 6px; font-size: 14px; font-weight: 600;
	cursor: pointer; border: none; text-decoration: none; transition: opacity .15s;
}
.mc-btn:hover { opacity: .88; }
.mc-btn-primary { background: #2c6fad; color: #fff; }
.mc-btn-primary:hover { color: #fff; }
.mc-btn-lg  { padding: 14px 30px; font-size: 16px; }
.mc-btn-disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }
.mc-closed-badge { font-size: 13px; background: #f3f4f6; color: #6b7280; padding: 6px 14px; border-radius: 20px; }

/* ── Placeholders ──────────────────────────── */
.mc-block-placeholder { padding: 20px; background: #fef9c3; border: 1px solid #fde68a; border-radius: 6px; font-size: 13px; color: #92400e; text-align: center; }
.mc-block-empty { text-align: center; color: #9ca3af; font-size: 14px; }
.mc-dashboard-login-prompt { text-align: center; padding: 32px; }

/* ── Registration Form block ─────────────────────── */
.mc-form-block-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
  color: inherit;
}
.mc-form-block-desc {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 16px;
  line-height: 1.6;
}
