/* Writings — base card layout. Brand colours are CSS variables so a theme can override them. */

.writings-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	font-family: Inter, sans-serif;
	--writings-accent: #b35a2c;
	--writings-card-bg: #ffffff;
	--writings-desc: #6a6a64;
	--writings-date: #8a8a82;
}

.writings-cols-1 { grid-template-columns: 1fr; }
.writings-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.writings-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.writings-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
	.writings-cols-3,
	.writings-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.writings-grid { grid-template-columns: 1fr; }
}

.writings-card {
	display: flex;
	gap: 16px;
	background: var(--writings-card-bg);
	border-left: 4px solid var(--writings-accent);
	padding: 22px 24px;
	position: relative;
}

.writings-card.writings-no-image { display: block; }

.writings-media { flex: 0 0 88px; }

.writings-media .writings-thumb {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: cover;
}

.writings-body { flex: 1; min-width: 0; }

.writings-featured-flag {
	position: absolute;
	top: 0;
	right: 22px;
	width: 30px;
	padding: 6px 0 11px;
	text-align: center;
	color: #ffffff;
	background: var(--writings-accent);
	font-size: 14px;
	line-height: 1;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}

.writings-card--featured .writings-body { padding-right: 40px; }

.writings-title-1 { margin: 0 0 2px; line-height: 1.3; }
.writings-title-2 { margin: 0 0 8px; line-height: 1.35; }

.writings-desc {
	margin: 0 0 10px;
	font-size: 0.9em;
	line-height: 1.5;
	color: var(--writings-desc);
}

.writings-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.writings-date {
	font-size: 0.8em;
	color: var(--writings-date);
}

.writings-cta {
	font-size: 0.72em;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--writings-accent);
	border: 1px solid var(--writings-accent);
	padding: 3px 10px;
	border-radius: 3px;
	text-decoration: none;
	line-height: 1;
}

.writings-cta:hover,
.writings-cta:focus {
	background: var(--writings-accent);
	color: #fff;
}

@media (max-width: 480px) {
	.writings-card { flex-direction: column; }
	.writings-media { flex-basis: auto; }
}