/* ============================================================
   TradeConnex — Single blog post (single-post.php)
   Figma file F1jN0GZaaDZaTjqKF0mGyC. Enqueued only on single
   posts by inc/single-post-setup.php. Scoped to the .single-post
   body class WordPress adds on built-in posts.
   ============================================================ */

.single-post {
	--tc-blue-darkest:  #132965;
	--tc-blue-accent:   #0065e4;
	--tc-blue-lightest: #f3f7fd;
	--tc-text:          #232323;
	--tc-text-muted:    #696969;
	--tc-white:         #ffffff;

	--tc-radius-sm: 4px;
	--tc-radius-md: 8px;
	--tc-radius-pill: 99px;

	--tc-pad-global: 64px;
	--tc-pad-section: 112px;
	--tc-max: 1280px;

	/* Clears the sticky site header — verify against real header height. */
	--tc-sticky-top: 120px;
}

.tc-post,
.tc-related { font-family: "Oakes Grotesk", sans-serif; }

/* ---- Section shell ---- */
.tc-post__header,
.tc-post__body,
.tc-related { padding: var(--tc-pad-section) var(--tc-pad-global); }

.tc-post__header-inner,
.tc-post__body-inner,
.tc-related__inner { max-width: var(--tc-max); margin-inline: auto; }

/* ---- Header ---- */
.tc-post__header { background: var(--tc-blue-lightest); }

.tc-post__header-inner { display: grid; grid-template-columns: 420px 1fr; gap: 80px; align-items: stretch; }

/* Title sits directly under the breadcrumb; date pins to the column bottom. */
.tc-post__meta { display: flex; flex-direction: column; }

.tc-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; }
.tc-breadcrumb__link { font-size: 14px; line-height: 1.5; color: var(--tc-text-muted); text-decoration: none; }
.tc-breadcrumb__link:hover { color: var(--tc-blue-accent); }
.tc-breadcrumb__sep { display: inline-flex; color: var(--tc-text-muted); }

/* Title uses the kit's large-heading scale (Elementor typography 9d9fa84):
   40px desktop, 30px ≤1024px, line-height 1.2 — a step above the h3 scale. */
.single-post .tc-post__title { font-size: 40px; line-height: 1.2; font-weight: 400; color: var(--tc-blue-darkest); margin: 0; }

.tc-post__date { font-size: 20px; line-height: 1.5; color: var(--tc-text-muted); margin-top: auto; padding-top: 32px; }

/* Hero — decorative TC-monogram frame with the featured image overlaid.
   Same construction/sizing as the OHLA hero (.tc-ohla-hero__media). */
.tc-post__hero { position: relative; width: 100%; max-width: 530px; margin-left: auto; }
.tc-post__hero-frame { position: relative; display: block; width: 100%; height: auto; }
.tc-post__hero-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85.7%; aspect-ratio: 454 / 281; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(19, 41, 101, 0.18); }
.tc-post__hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Body ---- */
.tc-post__body { background: var(--tc-white); }

.tc-post__body-inner { display: grid; grid-template-columns: minmax(320px, 375px) 1fr; gap: 120px; align-items: start; }

.tc-post__sidebar { position: sticky; top: var(--tc-sticky-top); align-self: start; }

/* ---- Rich text (the_content). Content headings map: h2→30, h3→24, h4→20 ---- */
.tc-post__content { color: var(--tc-text); font-size: 16px; line-height: 1.5; }
.tc-post__content > :first-child { margin-top: 0; }
.tc-post__content p { margin: 0 0 16px; }
.single-post .tc-post__content h2 { font-size: 30px; line-height: 1.5; font-weight: 400; color: var(--tc-blue-darkest); margin: 24px 0 20px; }
.single-post .tc-post__content h3 { font-size: 24px; line-height: 1.5; font-weight: 400; color: var(--tc-blue-darkest); margin: 24px 0 16px; }
.single-post .tc-post__content h4 { font-size: 20px; line-height: 1.5; font-weight: 400; color: var(--tc-blue-darkest); margin: 20px 0 12px; }
.tc-post__content a { color: var(--tc-blue-accent); text-decoration: underline; }
.tc-post__content ul,
.tc-post__content ol { margin: 0 0 16px; padding-left: 1.25em; }
.tc-post__content li { margin-bottom: 8px; }
.tc-post__content img { max-width: 100%; height: auto; border-radius: var(--tc-radius-md); margin: 48px 0; display: block; }
.tc-post__content figure { margin: 48px 0; }
.tc-post__content figure img { margin: 0; }

/* ---- Sidebar CTA (shared by both variants) ---- */
.tc-cta { background: var(--tc-blue-lightest); border-radius: var(--tc-radius-md); padding: 32px; display: flex; flex-direction: column; gap: 40px; }
.tc-cta__image { width: 100%; height: 204px; border-radius: var(--tc-radius-sm); overflow: hidden; }
.tc-cta__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-cta__content { display: flex; flex-direction: column; gap: 16px; }
.tc-cta__title { font-size: 24px; line-height: 1.5; color: var(--tc-blue-darkest); margin: 0; }
.tc-cta__text { font-size: 16px; line-height: 1.5; color: var(--tc-text); margin: 0; }
.tc-cta__apps { display: flex; gap: 16px; flex-wrap: wrap; }
.tc-cta__app { display: inline-flex; height: 53px; }
.tc-cta__app img { height: 53px; width: auto; display: block; }

/* ---- Buttons ---- */
.tc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 17px 29px; border-radius: var(--tc-radius-pill); font-size: 14px; line-height: 1.5; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.tc-btn--primary { background: var(--tc-blue-accent); border-color: var(--tc-blue-accent); color: var(--tc-white); }
.tc-btn--primary:hover { filter: brightness(0.95); }
.tc-btn--outline { background: transparent; border-color: var(--tc-blue-accent); color: var(--tc-blue-accent); }
.tc-btn--outline:hover { background: var(--tc-blue-accent); color: var(--tc-white); }
.tc-cta__btn { width: 100%; }

/* ---- Related posts ---- */
.tc-related__inner { display: flex; flex-direction: column; gap: 80px; }
.tc-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.single-post .tc-related__title { font-size: 36px; line-height: 1.2777; font-weight: 400; color: var(--tc-blue-darkest); margin: 0; }
.tc-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }

.tc-card { display: flex; flex-direction: column; gap: 24px; text-decoration: none; }
.tc-card__image { width: 100%; aspect-ratio: 405.33 / 270; border-radius: var(--tc-radius-md); overflow: hidden; }
.tc-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.tc-card:hover .tc-card__img { transform: scale(1.03); }
.tc-card__eyebrow { font-size: 12px; line-height: 18.2px; letter-spacing: 0.65px; text-transform: uppercase; color: var(--tc-text-muted); }
.tc-card__title { font-size: 20px; line-height: 1.5; color: var(--tc-blue-darkest); }

/* ---- Responsive ---- */
@media (max-width: 1600px) {
	.single-post .tc-related__title { font-size: 30px; }
}

@media (min-width: 1025px) and (max-width: 1200px) {
	.tc-post__body-inner { gap: 64px; }
	.tc-related__grid { gap: 32px; }
}

@media (max-width: 1024px) {
	.tc-post__header,
	.tc-post__body,
	.tc-related { padding: 64px 24px; }

	.tc-post__header-inner { grid-template-columns: 1fr; gap: 40px; }
	.single-post .tc-post__title { font-size: 30px; }
	.single-post .tc-related__title { font-size: 22px; }
	.tc-post__hero { margin: 0 auto; }

	/* Stack body: content first, CTA after (sticky off in a single column) */
	.tc-post__body-inner { display: flex; flex-direction: column; gap: 40px; }
	.tc-post__content { order: 1; }
	.tc-post__sidebar { order: 2; position: static; }

	.tc-related__grid { grid-template-columns: 1fr; }
	.tc-related__inner { gap: 48px; }
}