/* Tecture Case Studies: cards that match the site's Elementor case study design. */
/* Selectors are doubled or scoped on purpose: Elementor resets links inside paragraphs (.e-paragraph-base a), so card links need higher specificity. */

.tcs-grid { display: grid; gap: 24px; width: 100%; }
.tcs-grid--cards { grid-template-columns: minmax(0, 1fr); }
.tcs-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 767px) { .tcs-grid--related { grid-template-columns: minmax(0, 1fr); } }

/* Full card */
.tcs-card {
	display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
	background: #fff; border: 1px solid #e3e7ef; border-radius: 14px;
	font-family: var(--font-body, "Inter"), sans-serif; color: #1e293b;
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tcs-card--linked:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(11, 18, 32, .25); }
.tcs-card__top {
	display: flex; align-items: flex-end; gap: 14px; min-height: 132px; box-sizing: border-box; padding: 20px 26px;
	background: #0b1220 linear-gradient(135deg, #0b1220 35%, #1e3a8a 100%);
}
.tcs-card__logo { height: 44px !important; width: auto !important; max-width: 160px; flex: none; object-fit: contain; display: block; }
.tcs-card__label { font-family: var(--font-heading, "Space Grotesk"), sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; color: #fff; }
.tcs-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 26px; }
.tcs-card__client { font-size: 13.6px; font-weight: 600; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: #2563eb; margin: 0 0 10px; }
.tcs-card__title { font-family: var(--font-heading, "Space Grotesk"), sans-serif; font-size: 19px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #0b1220; margin: 0 0 10px; }
.tcs-card__summary { font-size: 16.7px; line-height: 1.6; color: #5b6478; margin: 0 0 16px; }
.tcs-card__points { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; align-self: stretch; }
.tcs-card__points li {
	position: relative; margin: 0; padding: 6px 0 6px 22px; border-top: 1px solid #e3e7ef;
	font-size: 15.8px; line-height: 1.6; color: #0b1220;
}
.tcs-card__points li::before {
	content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px;
	border-radius: 2px; background: #2563eb; transform: rotate(45deg);
}
.tcs-card__tags { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tcs-card__tags li { margin: 0; padding: 5px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 13.3px; font-weight: 600; line-height: 1.4; }
.tcs-card.tcs-card .tcs-card__link, .tcs-related.tcs-related .tcs-related__link { font-size: 16px; font-weight: 600; line-height: 1.5; color: #2563eb; text-decoration: none; }
.tcs-card .tcs-card__link::after, .tcs-related .tcs-related__link::after { content: "\2192"; display: inline-block; margin-left: .3em; transition: transform .2s; }
.tcs-card .tcs-card__link:hover, .tcs-card .tcs-card__link:focus-visible { color: #1d4ed8; }
.tcs-card .tcs-card__link:hover::after, .tcs-related.tcs-related--linked:hover .tcs-related__link::after { transform: translateX(3px); }

/* Stacked cards: on wider screens each card is a row, logo panel left, details right */
@media (min-width: 768px) {
	.tcs-card { flex-direction: row; }
	.tcs-card__top { flex: 0 0 240px; height: auto; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 28px 26px; }
	.tcs-card__body { padding: 28px 30px; }
	.tcs-card__points { flex: none; }
}

/* Compact "related" card */
.tcs-related.tcs-related {
	display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box; padding: 24px;
	background: #fff; border: 1px solid #e3e7ef; border-radius: 12px;
	font-family: var(--font-body, "Inter"), sans-serif; color: #0b1220; text-decoration: none !important;
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tcs-related.tcs-related--linked:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(11, 18, 32, .25); border-color: #c7d2fe; }
.tcs-related__label { font-size: 13.6px; font-weight: 600; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: #2563eb; margin: 0 0 6px; }
.tcs-related__title { font-family: var(--font-heading, "Space Grotesk"), sans-serif; font-size: 17.6px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: #0b1220; margin: 0 0 10px; }

@media (prefers-reduced-motion: reduce) {
	.tcs-card, .tcs-related, .tcs-card__link::after, .tcs-related__link::after { transition: none; }
}