/* home-v10.css - deploy-home-v10.php (STAGING build.3by400.com). Loaded LAST by module #391:
 * home-v8.css -> chrome-v4.css -> home-v10.css (?v=<sha1-8>). Every rule is scoped under .tb4-home-v4.
 * Source: Mockup Bot deploy-home-v10/home-v10.css (approved by Bridgette, Sep 28 2026), scoped by src/build_css.py.
 * Blog band (.hb-latest) markup = templates/yootheme/html/mod_articles_category/home-v10.php (dynamic);
 * Start a project band (.lp-cta.pb-cta) = static HTML in #391, same markup/CSS as Blog v1's shared CTA. */
/* home-v10: Latest-from-the-blog band only (layers on v4 + v8 + v9 + v9b).
   Reuses Blog v1 card/typography cues so home and blog feel related. */
/* Full-width light-lime band - differs from featured (white) above and green quote below */
.tb4-home-v4 .hb-latest{background:#F3F8E6;
  padding:72px var(--gut) 68px;
  border-top:1px solid #e4ecd0;}
.tb4-home-v4 .hb-latest-inner{max-width:1200px;margin:0 auto}
.tb4-home-v4 .hb-latest-head{margin-bottom:28px}
.tb4-home-v4 .hb-latest-head .eyebrow{margin:0 0 8px;
  font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#2f8f3a;}
.tb4-home-v4 .hb-latest-head h2{margin:0;
  font-family:var(--serif);
  font-size:clamp(28px,3vw,36px);
  line-height:1.2;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.01em;
  position:relative;
  padding-top:18px;}
.tb4-home-v4 .hb-latest-head h2::before{content:"";position:absolute;left:0;top:0;width:56px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,#D7DF28,#9FCC45,#3DB54A);}
.tb4-home-v4 .hb-latest-grid{display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:32px;
  align-items:stretch;}
/* Featured (newest) card - echoes .pb-feature / .pb-card */
.tb4-home-v4 .hb-feature{background:#fff;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #ececec;
  box-shadow:0 1px 2px rgba(35,31,32,.06),0 18px 40px -22px rgba(35,31,32,.28);
  min-width:0;}
.tb4-home-v4 .hb-feature-link{display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease;}
.tb4-home-v4 .hb-feature:hover{box-shadow:0 2px 4px rgba(35,31,32,.08),0 22px 44px -18px rgba(35,31,32,.35)}
.tb4-home-v4 .hb-feature:hover .hb-feature-link{transform:translateY(-2px)}
.tb4-home-v4 .hb-feature-media{aspect-ratio:16/10;
  background:#F3F8E6;
  overflow:hidden;
  position:relative;}
.tb4-home-v4 .hb-feature-media img{width:100%;height:100%;object-fit:cover;display:block}
.tb4-home-v4 .hb-feature-media.is-fallback,.tb4-home-v4 .hb-compact-media.is-fallback{background:#F3F8E6 url("/images/home-v10/no-image-07ad3665.svg") center/cover no-repeat;}
.tb4-home-v4 .hb-feature-media.is-fallback img,.tb4-home-v4 .hb-compact-media.is-fallback img{display:none}
.tb4-home-v4 .hb-feature-body{padding:22px 24px 26px;
  display:flex;flex-direction:column;gap:10px;
  flex:1;}
.tb4-home-v4 .hb-feature-body h3{margin:0;
  font-family:var(--serif);
  font-size:clamp(20px,1.8vw,26px);
  line-height:1.25;
  font-weight:700;
  color:var(--ink);
  text-wrap:pretty;}
.tb4-home-v4 .hb-excerpt{margin:0;
  font-size:15px;line-height:1.5;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tb4-home-v4 .hb-date{font-size:13px;font-weight:700;color:#6b6764;
  font-variant-numeric:tabular-nums;}
.tb4-home-v4 .hb-more{margin-top:4px;
  font-size:14px;font-weight:800;color:#2f8f3a;letter-spacing:.02em;}
/* Compact stacked items */
.tb4-home-v4 .hb-side{display:flex;flex-direction:column;gap:16px;
  min-width:0;}
.tb4-home-v4 .hb-compact{background:#fff;
  border-radius:12px;
  border:1px solid #ececec;
  box-shadow:0 1px 2px rgba(35,31,32,.05),0 12px 28px -16px rgba(35,31,32,.22);
  overflow:hidden;
  flex:1;
  min-height:0;}
.tb4-home-v4 .hb-compact-link{display:grid;
  grid-template-columns:120px 1fr;
  gap:0;
  align-items:stretch;
  text-decoration:none;color:inherit;
  height:100%;
  min-height:110px;
  transition:background .15s;}
.tb4-home-v4 .hb-compact:hover{box-shadow:0 2px 4px rgba(35,31,32,.08),0 16px 32px -14px rgba(35,31,32,.3)}
.tb4-home-v4 .hb-compact:hover .hb-compact-link{background:#fafcf5}
.tb4-home-v4 .hb-compact-media{background:#F3F8E6;
  overflow:hidden;
  min-height:100%;}
.tb4-home-v4 .hb-compact-media img{width:100%;height:100%;object-fit:cover;display:block}
.tb4-home-v4 .hb-compact-body{padding:16px 18px;
  display:flex;flex-direction:column;gap:6px;justify-content:center;
  min-width:0;}
.tb4-home-v4 .hb-compact-body h3{margin:0;
  font-family:var(--serif);
  font-size:17px;line-height:1.3;font-weight:700;color:var(--ink);
  text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.tb4-home-v4 .hb-all{margin:28px 0 0;text-align:right}
.tb4-home-v4 .hb-all .text-link{font-size:15px;font-weight:700;color:#2f8f3a}
@media (max-width:980px){
.tb4-home-v4 .hb-latest-grid{grid-template-columns:1fr;gap:20px}
.tb4-home-v4 .hb-compact-link{grid-template-columns:100px 1fr;min-height:96px}
}
@media (max-width:860px){
.tb4-home-v4 .hb-latest{padding:52px var(--gut) 48px}
.tb4-home-v4 .hb-latest-head{margin-bottom:22px}
.tb4-home-v4 .hb-latest-head h2{font-size:28px}
.tb4-home-v4 .hb-feature-body{padding:18px 18px 22px}
.tb4-home-v4 .hb-feature-body h3{font-size:20px}
.tb4-home-v4 .hb-compact-link{grid-template-columns:88px 1fr;min-height:88px}
.tb4-home-v4 .hb-compact-body{padding:14px 14px}
.tb4-home-v4 .hb-compact-body h3{font-size:16px;-webkit-line-clamp:3}
.tb4-home-v4 .hb-all{text-align:left;margin-top:22px}
}
/* v10 fix: compact items keep a real small 16:10 thumb instead of stretching to the featured card's height */
.tb4-home-v4 .hb-compact{flex:0 0 auto}
.tb4-home-v4 .hb-compact-link{grid-template-columns:168px 1fr;align-items:center;min-height:0;padding:14px;gap:18px}
.tb4-home-v4 .hb-compact-media{aspect-ratio:16/10;min-height:0;border-radius:8px}
.tb4-home-v4 .hb-compact-body{padding:0}
.tb4-home-v4 .hb-compact-body h3{font-size:19px;line-height:1.3}
/* See all: pinned to the bottom of the side column on desktop, bold full-width pill */
.tb4-home-v4 .hb-all{margin:auto 0 0;text-align:left}
.tb4-home-v4 .hb-all-link{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 22px;border-radius:12px;
  background:#231F20;color:#fff;font-size:15px;font-weight:800;letter-spacing:.02em;text-decoration:none;transition:background .15s}
.tb4-home-v4 .hb-all-link:hover{background:#2f8f3a;color:#fff}
@media (max-width:980px){
.tb4-home-v4 .hb-compact-link{grid-template-columns:128px 1fr;gap:16px}
.tb4-home-v4 .hb-all{margin-top:6px}
}
@media (max-width:860px){
.tb4-home-v4 .hb-compact-link{grid-template-columns:104px 1fr;padding:12px;gap:14px}
.tb4-home-v4 .hb-compact-body h3{font-size:16px}
.tb4-home-v4 .hb-all{margin-top:6px}
}
/* titles are never truncated (only the featured excerpt is clamped to 2 lines) */
.tb4-home-v4 .hb-compact-body h3{display:block;-webkit-line-clamp:unset;overflow:visible}
/* v10 desktop balance: covers are native 16:9 (1280x720) - show them uncropped; compact cards share the column height */
.tb4-home-v4 .hb-feature-media,.tb4-home-v4 .hb-compact-media{aspect-ratio:16/9}
@media (min-width:981px){
.tb4-home-v4 .hb-compact{flex:1 1 0;display:flex}
.tb4-home-v4 .hb-compact-link{width:100%;grid-template-columns:208px 1fr;padding:18px;gap:22px}
.tb4-home-v4 .hb-compact-body{gap:8px}
.tb4-home-v4 .hb-compact-body h3{font-size:20px}
}
/* PENDING COPY markers (same convention as Blog v1: hidden unless an .annot view styles them) */
.tb4-home-v4 .pm-pend{display:none}
/* ===== v10 rev (Sep 28): shared interior "Start a project" band - copied verbatim from page-blog-v1.css ===== */
/* Closing CTA band */
.tb4-home-v4 .lp-cta{background:#231F20;padding:72px var(--gut);position:relative;overflow:hidden;
  border-top:6px solid transparent;border-image:linear-gradient(90deg,#3DB54A,#9FCC45 50%,#D7DF28) 1}
.tb4-home-v4 .lp-cta::after{content:"";position:absolute;right:-200px;top:-300px;width:800px;height:800px;border-radius:50%;
  background:radial-gradient(circle,rgba(159,204,69,.14),rgba(159,204,69,0) 70%);pointer-events:none}
.tb4-home-v4 .lp-cta-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:40px}
.tb4-home-v4 .lp-cta p{margin:0;font-size:17px;line-height:1.5;color:#c9c6c3;max-width:56ch}
.tb4-home-v4 .lp-cta-actions{display:flex;flex-direction:column;align-items:center;gap:12px;flex:0 0 auto}
.tb4-home-v4 .lp-cta .btn-primary{font-size:17px;padding:17px 30px}
.tb4-home-v4 .pb-cta-h{margin:0 0 12px;font-family:var(--serif);font-size:clamp(28px,3vw,36px);line-height:1.2;color:#fff;font-weight:700}
.tb4-home-v4 .pb-cta-reach{margin-top:16px!important;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;font-size:15px!important;font-weight:700}
.tb4-home-v4 .pb-cta-reach a{color:#9FCC45}
.tb4-home-v4 .pb-cta-reach span{color:#6b6764}
@media (max-width:860px){
.tb4-home-v4 .lp-cta{padding:52px var(--gut)}
.tb4-home-v4 .lp-cta-inner{flex-direction:column;align-items:flex-start;gap:26px}
.tb4-home-v4 .lp-cta-actions{align-items:stretch;width:100%}
.tb4-home-v4 .lp-cta .btn-primary{width:100%;min-height:54px}
}
/* v10 rev: order is Featured -> green quote -> blog band -> dark CTA -> footer.
   Blog band now sits on green, so drop its hairline top border; bands abut edge to edge. */
.tb4-home-v4 .hb-latest{border-top:0}
/* v10 approved (Bridgette, Sep 28): See all posts = site green button (matches .btn-primary in home-v4-seo.css:
   green bg, white text, 700 weight, 6px radius; hover = brightness(.95) like .btn-primary:hover) */
.tb4-home-v4 .hb-all-link{background:#3DB54A;border:1px solid #3DB54A;color:#fff;border-radius:6px;font-weight:700;font-size:15px;transition:filter .15s}
.tb4-home-v4 .hb-all-link:hover{background:#3DB54A;color:#fff;filter:brightness(0.95)}

/* ===== staging glue (deploy-home-v10) ===== */
/* the blog band is rendered by its own module ({loadmoduleid}); keep it full-bleed even if a wrapper sits around it */
.tb4-home-v4 .hb-latest,.tb4-home-v4 .lp-cta{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:var(--gut);padding-right:var(--gut);box-sizing:border-box}
/* serif headings (home-v8.css forces the sans font with !important; these selectors are more specific) */
.tb4-home-v4 .hb-latest-head h2,.tb4-home-v4 .hb-feature-body h3,.tb4-home-v4 .hb-compact-body h3,.tb4-home-v4 .pb-cta-h{font-family:var(--serif) !important}
.tb4-home-v4 .hb-latest-head h2{margin:0}
.tb4-home-v4 .hb-latest-head .eyebrow{color:#2f8f3a}
.tb4-home-v4 .pb-cta-h{color:#fff}
.tb4-home-v4 .hb-feature-link,.tb4-home-v4 .hb-compact-link{color:var(--ink)}
.tb4-home-v4 .hb-all-link,.tb4-home-v4 .hb-all-link:hover{color:#fff !important}
.tb4-home-v4 .pb-cta-reach a{color:#9FCC45 !important}
.tb4-home-v4 .hb-feature-media img,.tb4-home-v4 .hb-compact-media img{max-width:none}