.wchf-section { max-width: 1200px; margin: 0 auto; padding: 40px 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.wchf-row { display: flex; gap: 40px; align-items: flex-start; }

.wchf-heading { font-size: 1.4rem; font-weight: 800; color: #222; text-transform: uppercase; margin: 0 0 20px; padding-left: 12px; border-left: 4px solid #FFD700; }

/* LEFT: category tiles */
.wchf-col-left { flex: 0 0 40%; max-width: 40%; }
.wchf-cat-list { display: flex; flex-direction: column; gap: 10px; }
.wchf-cat-tile {
	position: relative; display: block; height: 55px; border-radius: 12px;
	background-size: cover; background-position: center; background-color: #ddd;
	text-decoration: none; overflow: hidden;
}
.wchf-cat-tile::before {
	content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35);
}
.wchf-cat-tile span {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 700; font-size: .95rem; text-align: center; padding: 0 10px;
}

/* RIGHT: discussion list */
.wchf-col-right { flex: 1; min-width: 0; }
.wchf-discussion-box { background: #eee; border-radius: 7px; padding: 10px 20px; }
.wchf-discussion-item { padding: 18px 0; border-bottom: 1px solid #ddd; }
.wchf-discussion-item:last-child { border-bottom: none; }
.wchf-discussion-item h3 { margin: 0 0 4px; font-size: 1.05rem; }
.wchf-discussion-item h3 a { color: #222; text-decoration: none; }
.wchf-discussion-item h3 a:hover { color: #b8860b; }
.wchf-meta { font-size: .82rem; color: #777; }
.wchf-discussion-item p { margin: 8px 0 12px; font-size: .9rem; color: #444; line-height: 1.5; }

.wchf-join-btn {
	display: inline-block; background: #FFD700; color: #222; font-weight: 700;
	padding: 6px 22px; border-radius: 4px; text-decoration: none; font-size: .85rem;
	transition: background .2s, color .2s;
}
.wchf-join-btn:hover { background: #222; color: #fff; }

.wchf-start-wrap { text-align: center; margin-top: 20px; }
.wchf-start-wrap a { color: #b8860b; font-weight: 700; text-decoration: underline; }

@media (max-width: 782px) {
	.wchf-row { flex-direction: column; }
	.wchf-col-left, .wchf-col-right { flex: 1 1 auto; max-width: 100%; }
}