/* static/css/tests/test-detail-page.css
   Redesigned test-detail (landing) page. Namespaced with `td-` so it never
   collides with test.css (which still styles the quiz/intro/loading screens). */

.td{ max-width:1160px; margin:0 auto; padding:0 24px 90px; font-family:"Inter",system-ui,sans-serif; color:#2b3242; }
.td h1,.td h2,.td h3{ font-family:"Inter",system-ui,sans-serif; }

.td-eyebrow{ display:flex; align-items:center; gap:10px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#8593b0; padding:34px 0 0; }
.td-eyebrow .mk{ width:18px; height:18px; border-radius:5px; background:linear-gradient(135deg,#274285,#3f6fc4); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-family:'Libre Baskerville',serif; }

/* ── Hero ── */
.td-hero{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding:34px 0 44px; border-bottom:1px solid #e4e9f4; }
@media (max-width:820px){ .td-hero{ grid-template-columns:1fr; gap:28px; } }
.td-badge{ display:inline-block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#274285; background:#e7eefb; padding:6px 13px; border-radius:20px; }
.td-title{ font-size:46px; line-height:1.05; font-weight:800; letter-spacing:-.025em; color:#1b2740; margin:20px 0 0; }
@media (max-width:820px){ .td-title{ font-size:34px; } }
.td-intro{ font-size:17px; line-height:1.65; color:#525f79; margin:18px 0 0; max-width:52ch; }
.td-intro p{ margin:0; }

.td-chips{ display:flex; gap:9px; flex-wrap:wrap; margin-top:24px; }
.td-chip{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#42506e; background:#fff; border:1px solid #e4e9f4; border-radius:9px; padding:9px 13px; }
.td-chip i{ color:#5c78ad; font-size:13px; }

.td-cta-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:30px; }
.td-btn{ display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 30px; border:0; border-radius:12px; background:#274285; color:#fff; font-family:inherit; font-size:15.5px; font-weight:700; cursor:pointer; transition:background .2s,transform .2s; text-decoration:none; }
.td-btn:hover{ background:#2f4c97; color:#fff; transform:translateY(-1px); }
.td-btn i{ font-size:14px; }
#start-test{ min-width:fit-content !important; }

.td-share{ display:flex; align-items:center; gap:10px; }
.td-share-label{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#94a1bc; }
.td-share-btns{ display:flex; gap:7px; }
.td-share-btns a{ width:38px; height:38px; border:1px solid #e4e9f4; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; color:#5c6a86; background:#fff; transition:background .15s,color .15s,border-color .15s; font-size:15px; }
.td-share-btns a:hover{ background:#274285; color:#fff; border-color:#274285; }

.td-illus{ border-radius:20px; aspect-ratio:1/1; background:#eef2f8; overflow:hidden; box-shadow:0 12px 34px rgba(39,66,133,.06); display:flex; align-items:center; justify-content:center; }
.td-illus img{ width:100%; height:100%; object-fit:cover; }

/* ── Gender CTA (reused from the funnel gate), styled to match ── */
.td-cta-row .gender-cta{ display:flex; flex-direction:column; gap:10px; }
.td-cta-row .gender-cta-label{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#94a1bc; }
.td-cta-row .gender-cta-buttons{ display:flex; gap:10px; flex-wrap:wrap; }
/* Equal-width gender buttons; colour comes from an inline style set in the backend */
.td-cta-row .gender-cta-buttons .td-btn{ flex:1 1 0; min-width:140px; justify-content:center; }
.td-cta-row .gender-cta-buttons .td-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* ── Stats ── */
.td-stats{ margin-top:30px; background:#fff; border:1px solid #e6ebf6; border-radius:16px; padding:22px 20px; box-shadow:0 6px 20px rgba(39,66,133,.05); display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:640px){ .td-stats{ grid-template-columns:repeat(2,1fr); gap:16px 0; } }
.td-stat{ text-align:center; padding:6px 0; border-left:1px solid #eef1f7; }
.td-stat:first-child{ border-left:0; }
@media (max-width:640px){ .td-stat:nth-child(odd){ border-left:0; } }
.td-stat-value{ font-size:28px; font-weight:800; line-height:1; letter-spacing:-.01em; color:#274285; font-variant-numeric:tabular-nums; }
.td-stat-label{ font-size:12.5px; color:#8593b0; margin-top:8px; }

/* ── Sections ── */
.td-section{ margin-top:60px; }
.td-section-head{ text-align:center; }
.td-eyebrow2{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#94a1bc; }
.td-h2{ font-size:28px; font-weight:800; letter-spacing:-.02em; color:#1b2740; margin:10px 0 0; }
.td-sub{ font-size:15px; color:#7a879f; margin:6px 0 0; }
.td-center{ display:flex; justify-content:center; margin-top:34px; }

/* How it works */
.td-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; }
@media (max-width:820px){ .td-steps{ grid-template-columns:1fr; } }
.td-step{ background:#fff; border:1px solid #e6ebf6; border-radius:16px; padding:28px 26px; box-shadow:0 6px 20px rgba(39,66,133,.05); }
.td-step-top{ display:flex; align-items:center; justify-content:flex-end; }
.td-step-num{ font-family:'Libre Baskerville',serif; font-size:30px; color:#d6def0; line-height:1; }
.td-step-title{ font-size:17px; font-weight:700; color:#1b2740; margin:16px 0 6px; letter-spacing:-.01em; }
.td-step-sub{ margin:0; font-size:13.5px; line-height:1.6; color:#7a879f; }

/* What this test measures */
.td-measures{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
@media (max-width:820px){ .td-measures{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .td-measures{ grid-template-columns:1fr; } }
.td-measure{ background:#fff; border:1px solid #e6ebf6; border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(39,66,133,.05); transition:transform .2s,box-shadow .2s; }
.td-measure:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(39,66,133,.1); }
.td-measure-img{ width:100%; aspect-ratio:16/9; background:#eef2f8; border-bottom:1px solid #eef1f7; position:relative; display:flex; align-items:center; justify-content:center; }
.td-measure-img img{ width:100%; height:100%; object-fit:cover; }
.td-measure-tag{ display:none; position:absolute; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#b3c0da; }
.td-measure-img.is-empty img{ display:none; }
.td-measure-img.is-empty .td-measure-tag{ display:inline; }
.td-measure-body{ padding:22px 24px 24px; }
.td-measure-body h3{ font-size:17px; font-weight:700; color:#1b2740; margin:0 0 7px; letter-spacing:-.01em; }
.td-measure-body p{ margin:0; font-size:13.5px; line-height:1.6; color:#7a879f; }

/* About (SEO content body) */
.td-about .post-body{ max-width:760px; margin:24px auto 0; }

/* Reviews */
.td-reviews-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.td-reviews-head .td-section-head-left{ text-align:left; }
.td-reviews-rating{ display:flex; align-items:center; gap:10px; font-size:14px; color:#42506e; }
.td-trustpilot-logo{ height:24px; width:auto; }
.td-stars{ display:inline-flex; color:#f5b301; gap:2px; font-size:16px; }
.td-stars.sm{ font-size:13px; }
.td-reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
@media (max-width:820px){ .td-reviews{ grid-template-columns:1fr; } }
.td-review{ background:#fff; border:1px solid #e6ebf6; border-radius:16px; padding:24px; box-shadow:0 6px 20px rgba(39,66,133,.05); }
.td-review-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.td-review-who{ display:flex; align-items:center; gap:11px; }
.td-avatar{ width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:#eef2fb; color:#274285; font-weight:700; font-size:15px; }
.td-review-name{ font-size:14px; font-weight:700; color:#1b2740; }
.td-review-loc{ font-size:12px; color:#9aa6bf; }
.td-verified{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#2b6b45; white-space:nowrap; }
.td-review-text{ margin:14px 0 0; font-size:13.5px; line-height:1.6; color:#4d5a74; }

/* Final CTA */
.td-final{ margin-top:56px; background:#fff; border:1px solid #e6ebf6; border-radius:20px; padding:46px 40px; text-align:center; box-shadow:0 6px 20px rgba(39,66,133,.05); }
.td-final h2{ font-size:28px; font-weight:800; letter-spacing:-.02em; color:#1b2740; margin:0; }
.td-final p{ font-size:15.5px; color:#7a879f; margin:12px auto 0; max-width:46ch; line-height:1.6; }
.td-final-note{ font-size:12.5px; color:#a4b0c8; margin-top:16px; }

/* Merged from content.css */
.post-body{ text-align:left; text-wrap:auto; }
.post-body h1{ line-height:normal; text-align:left; font-family:inherit; font-size:32px; margin-bottom:20px; }
.post-body h2{ margin-bottom:10px; }
.toc-widget{ text-align:left; }
.tests-review{ background:#f7faff; }
.tests-footer h2{ font-size:30px; }

.td-foot{ text-align:center; margin-top:44px; padding-top:30px; border-top:1px solid #e4e9f4; color:#a4b0c8; font-size:12.5px; }