/* ==========================================================================
   TPDG Articles — grid + filter styles
   Editorial house style. Uses theme CSS custom properties where present, with
   hard fallbacks so it renders correctly in the editor and anywhere else.
   ========================================================================== */

.tpdg-articles {
	--_navy:  var(--navy, #0F2A44);
	--_gold:  var(--gold, #B08D3F);
	--_white: var(--warm-white, #FBF7EE);
	--_white2: var(--warm-white-deep, #F4EEDF);
	--_rule:  var(--rule, #E5DDC9);
	--_ink:   var(--ink, #1A1614);
	--_grey:  var(--warm-grey, #5C5A55);

	--_p-professional: var(--p-professional, #1E3A5F);
	--_p-personal:     var(--p-personal, #7A4E2C);
	--_p-people:       var(--p-people, #3F6B5C);
	--_p-product:      var(--p-product, #8A6A2D);

	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--_ink);
	margin: 8px 0 40px;
}

/* On wide screens, break out of the theme's 640px reading column to its wide
   width so four tiles fit. Centres on the viewport and stays within 94vw, so it
   never causes horizontal scroll even if an ancestor clips overflow. */
@media (min-width: 760px) {
	.tpdg-articles {
		width: min(1240px, 94vw);
		margin-left: 50%;
		transform: translateX(-50%);
	}
}

/* ---- Filter chips ---- */
.tpdg-articles__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--_rule);
}

.tpdg-articles__chip {
	font-family: 'Manrope', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 9px 16px;
	border-radius: 0;
	border: 1px solid var(--_rule);
	background: transparent;
	color: var(--_grey);
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tpdg-articles__chip:hover { border-color: var(--_navy); color: var(--_navy); }
.tpdg-articles__chip:focus-visible { outline: 2px solid var(--_gold); outline-offset: 2px; }

.tpdg-articles__chip.is-active {
	background: var(--_navy);
	border-color: var(--_navy);
	color: var(--_white);
}
/* Active P chip takes that P's colour */
.tpdg-articles__chip--professional.is-active { background: var(--_p-professional); border-color: var(--_p-professional); }
.tpdg-articles__chip--personal.is-active     { background: var(--_p-personal);     border-color: var(--_p-personal); }
.tpdg-articles__chip--people.is-active       { background: var(--_p-people);       border-color: var(--_p-people); }
.tpdg-articles__chip--product-development.is-active { background: var(--_p-product); border-color: var(--_p-product); }

/* ---- Grid ---- */
.tpdg-articles__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
@media (max-width: 1000px) { .tpdg-articles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .tpdg-articles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

.tpdg-articles__card { margin: 0; }
.tpdg-articles__card[hidden] { display: none; }

.tpdg-articles__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--_white);
	border: 1px solid var(--_rule);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tpdg-articles__link:hover,
.tpdg-articles__link:focus-visible {
	border-color: var(--_navy);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(15, 42, 68, 0.10);
	outline: none;
}

.tpdg-articles__thumb { display: block; overflow: hidden; }
.tpdg-articles__thumb img { width: 100%; height: 120px; object-fit: cover; display: block; }

/* Branded fallback tile when a post has no featured image. Background is the
   P's colour, deepened toward navy; the four-square motif is the Four Ps. */
.tpdg-articles__thumb--fallback {
	position: relative;
	height: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--_navy);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.18));
}
.tpdg-articles__thumb--professional        { background-color: var(--_p-professional); }
.tpdg-articles__thumb--personal            { background-color: var(--_p-personal); }
.tpdg-articles__thumb--people              { background-color: var(--_p-people); }
.tpdg-articles__thumb--product-development { background-color: var(--_p-product); }

.tpdg-articles__fallback-mark { display: inline-flex; width: 26px; height: 26px; }
.tpdg-articles__fallback-mark svg { width: 100%; height: 100%; fill: var(--_gold); opacity: 0.92; }

.tpdg-articles__fallback-label {
	font-family: 'Manrope', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--_white);
	opacity: 0.92;
	font-size: 10px;
}

.tpdg-articles__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 16px 18px;
	flex: 1;
}

/* P tag */
.tpdg-articles__tag {
	align-self: flex-start;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 8px;
	color: #fff;
	background: var(--_navy);
}
.tpdg-articles__tag--professional        { background: var(--_p-professional); }
.tpdg-articles__tag--personal            { background: var(--_p-personal); }
.tpdg-articles__tag--people              { background: var(--_p-people); }
.tpdg-articles__tag--product-development { background: var(--_p-product); }

.tpdg-articles__title {
	font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	font-variation-settings: "opsz" 60, "SOFT" 50;
	font-size: 17px;
	font-weight: 420;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--_navy);
}

.tpdg-articles__excerpt {
	font-size: 13px;
	line-height: 1.5;
	color: var(--_ink);
	opacity: 0.85;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tpdg-articles__date {
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--_grey);
	margin-top: 2px;
}

.tpdg-articles__empty {
	color: var(--_grey);
	font-size: 15px;
	padding: 20px 0;
}

@media (max-width: 480px) {
	.tpdg-articles__grid { grid-template-columns: 1fr; gap: 14px; }
	.tpdg-articles__thumb img, .tpdg-articles__thumb--fallback { height: 150px; }
	.tpdg-articles__title { font-size: 19px; }
}