/* Property-type card system + section headers, extracted from site.css
   (2026-07-12) so the homepage stops shipping all of site.css render-blocking
   for one section. Loaded by every page that renders .ptype-* cards or
   .section-head/.section-h2/.section-lead: home, samples (index + [slug]),
   partners, blog, waitlist. site.css pages load this ALONGSIDE site.css —
   the rules are unchanged and order-independent of what remains there
   (overrides like .security-head .section-head win on specificity). */

.section-head {
  max-width: 760px;
  margin-bottom: 28px;
}
.section-head .t-eyebrow { display: inline-block; margin-bottom: 10px; }
.section-h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.section-h2 em { font-style: normal; font-weight: 500; color: var(--ulv-terra-600); }
.section-h2 .h2-subtle {
  font-weight: 300;
  font-size: 0.72em;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.site-section--dark .section-h2 { color: var(--ulv-white); }
.site-section--dark .section-h2 em { color: var(--ulv-terra-300); }
.site-section--dark .t-eyebrow { color: rgba(255,255,255,0.55); }
.section-lead {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
}
.site-section--dark .section-lead { color: rgba(255,255,255,0.7); }
/* ---------- PROPERTY TYPES ---------- */
.ptypes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ptype-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  display: flex; flex-direction: column;
  min-width: 0; /* let the grid track shrink below the card's content min-size on mobile */
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
/* whole card is an <a>; suppress the global a:hover underline on its text */
.ptype-card, .ptype-card:hover { text-decoration: none; }
.ptype-card:hover { border-color: var(--ulv-forest-700); transform: translateY(-2px); }
.ptype-card u-illust { background: var(--ulv-stone-50); border-bottom: 1px solid var(--border-subtle); width: 100%; }
[data-theme="dark"] .ptype-card u-illust { background: var(--surface-canvas); }
.ptype-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ptype-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-tertiary); font-weight: 500; }
.ptype-title { font-family: var(--font-body); font-weight: 600; font-size: 22px; letter-spacing: -0.025em; color: var(--text-primary); line-height: 1.1; }
.ptype-loc { font-size: var(--type-body-sm); color: var(--text-secondary); font-family: var(--font-mono); letter-spacing: 0.02em; margin-top: -4px; display: inline-flex; align-items: center; gap: 6px; }
.ptype-loc u-icon { color: var(--ulv-forest-700); }
.ptype-desc { color: var(--text-secondary); font-size: var(--type-body-md); line-height: 1.55; }
/* mono per-study price footer (partner-network handoff treatment) */
.ptype-price { font-family: var(--font-mono); font-size: 12px; color: var(--ulv-forest-600); margin-top: auto; padding-top: 16px; }
.ptype-disclosure {
  color: var(--text-tertiary); font-size: var(--type-body-xs); line-height: 1.5;
  max-width: 640px; margin: 18px auto 0; text-align: center;
}
.ptype-meta {
  display: flex; gap: 16px; padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--type-body-xs);
  color: var(--text-tertiary);
}
.ptype-meta strong { color: var(--text-primary); font-weight: 500; font-family: var(--font-body); font-size: 16px; letter-spacing: -0.01em; }
/* Flagship properties (Salt House, Timber Ridge): the stats strip reads as a
   dark-green footer band — a subtle "house" marker, not louder copy. */
.ptype-meta--flagship {
  margin: auto -24px -26px;
  padding: 16px 24px 20px;
  background: var(--ulv-forest-900);
  border-top: 0;
  color: rgba(255, 255, 255, 0.6);
}
.ptype-meta--flagship strong { color: var(--ulv-white); }
/* the two engine drivers, pinned to the open right side of the band */
.ptype-meta--flagship { align-items: center; }
.ptype-drivers { display: flex; gap: 8px; margin-left: auto; align-self: center; }
.ptype-driver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.ptype-driver u-icon { color: var(--ulv-forest-300); }
@media (max-width: 880px) {
  .ptypes-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ptypes-grid { grid-template-columns: 1fr; }
}
/* Section-head variants */
.section-head--full { max-width: none; }
.section-lead--wide { max-width: none; }
/* Property type images (real uploaded illustrations) */
.ptype-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--ulv-stone-50);
  border-bottom: 1px solid var(--border-subtle);
}
[data-theme="dark"] .ptype-img { background: var(--surface-canvas); }
.ptypes-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* compact 4-up row: dial the card type down a notch so cards read wider, not taller */
.ptypes-grid--4 .ptype-body { padding: 18px 18px 20px; gap: 6px; }
.ptypes-grid--4 .ptype-title { font-size: 18px; }
.ptypes-grid--4 .ptype-loc { font-size: var(--type-body-xs); }
.ptypes-grid--4 .ptype-desc { font-size: var(--type-body-sm); line-height: 1.5; }
.ptypes-grid--4 .ptype-meta { gap: 12px; font-size: 10px; }
.ptypes-grid--4 .ptype-meta strong { font-size: 14px; }
.ptypes-grid--2 { grid-template-columns: repeat(2, 1fr); }
/* flagship cards are wide — a square image gets too tall, so crop landscape */
.ptypes-grid--2 .ptype-img { aspect-ratio: 16 / 9; }
/* Samples index: flagship studies on top, the rest in a tighter row below. */
.samples-group + .samples-group { margin-top: 44px; }
.samples-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--text-tertiary);
  margin: 0 0 16px;
}
.ptype-card--feature {
  border-color: var(--ulv-forest-700);
  background: var(--ulv-forest-50);
}
[data-theme="dark"] .ptype-card--feature { background: rgba(47,111,88,0.10); }
.ptype-card--feature .ptype-eyebrow { color: var(--ulv-forest-700); }
@media (max-width: 1024px) {
  .ptypes-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ptypes-grid--4 { grid-template-columns: 1fr; }
  .ptypes-grid--2 { grid-template-columns: 1fr; }
  .ptypes-grid { gap: 12px; }

  /* Compact horizontal card: a square illustration ate ~40% of the screen per
     card, so cards became one-per-screen. Switch to a thumbnail-left layout that
     leads with the title + headline deduction — ~2.5 cards per screen. */
  .ptype-card { flex-direction: row; align-items: stretch; }
  .ptype-img {
    width: 116px;
    flex: none;
    align-self: stretch;
    aspect-ratio: auto;
    height: auto;
    object-fit: cover !important; /* fill the thumb; the inline contain leaves the illustration tiny */
    padding: 0 !important;
    border-bottom: 0;
    border-right: 1px solid var(--border-subtle);
  }
  .ptype-body { padding: 12px 14px; gap: 3px; }
  .ptype-eyebrow { font-size: 9px; }
  .ptype-title { font-size: 16px; line-height: 1.15; }
  .ptype-loc { font-size: var(--type-body-xs); margin-top: 0; }
  .ptype-desc { display: none; } /* drop the blurb on a phone — title + stat is the hook */

  /* Stat band → just the headline deduction (the hook); short-life/bonus/chips
     are detail the reader taps in for. One stat keeps the card tight. */
  .ptype-meta { gap: 10px 14px; padding-top: 8px; margin-top: 6px; }
  .ptype-meta > div:nth-of-type(n + 2) { display: none; }
  .ptype-meta strong { font-size: 15px; }
  .ptype-meta--flagship {
    margin: 6px 0 0;
    padding: 8px 0 0;
    background: transparent;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-tertiary);
    align-items: flex-start;
  }
  .ptype-meta--flagship strong { color: var(--text-primary); }
  .ptype-drivers { display: none; }
}

/* Lookback vs new callout */
.ptype-callout {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 32px;
  padding: 36px 40px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
}
.ptype-callout-divider {
  background: var(--border-default);
  width: 1px;
}
.ptype-callout-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 10px 0 10px;
}
.ptype-callout-body {
  color: var(--text-secondary);
  font-size: var(--type-body-md);
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
}
@media (max-width: 760px) {
  .ptype-callout { grid-template-columns: 1fr; padding: 28px; }
  .ptype-callout-divider { width: 100%; height: 1px; }
}

/* Homepage #property-types compaction. The image aspect is governed by
   home-v2.css (.hp .ptype-img); these only tune the card body + text. */
#property-types .ptype-body { padding: 16px 20px 18px; gap: 6px; }
#property-types .ptype-callout-body { font-size: var(--type-body-sm); }
#property-types .ptype-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#property-types .ptype-callout { margin-top: 24px; padding: 24px 32px; gap: 28px; }
#property-types .ptype-callout-title { font-size: 22px; margin: 6px 0 8px; }

/* On a phone the legacy ptype block (max-width:560px) flips every card to a
   horizontal layout with a 116px cover-cropped thumbnail — that slivers the
   house. The v2 homepage cards keep the desktop vertical card so the whole
   home shows; image styling stays in home-v2.css (.hp .ptype-img). */
@media (max-width: 560px) {
  #property-types .ptype-card { flex-direction: column; }
  #property-types .ptype-img {
    width: 100%;
    flex: none;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: contain !important;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  #property-types .ptype-body { padding: 16px 20px 18px; }
  #property-types .ptype-title { font-size: 20px; }
  #property-types .ptype-desc { display: -webkit-box; }
}