/* public/css/samples.css
 *
 * /samples page styles. Layered on top of landing.css so nav, hero,
 * cta-section, and footer reuse the existing visual language. This file
 * just adds the per-format showcase rows + the comparison grid.
 */

/* ─── Hero ─── */
.samples-hero {
  max-width: 980px;
  margin: 100px auto 60px;
  padding: 0 40px;
  text-align: center;
}
.samples-hero .hero-eyebrow {
  margin-bottom: 14px;
}
.samples-hero .hero-headline {
  /* landing.css sets max-width:760px but no auto-margin on .hero-headline,
     so the block-level <h1> stays left-aligned even though .samples-hero
     is text-align:center. Auto-margin centers the block. */
  margin: 0 auto 18px;
}
.samples-hero .hero-sub {
  max-width: 720px;
  margin: 0 auto;
}
.samples-hero .hero-note {
  max-width: 720px;
  margin: 18px auto 0;
  font-size: 14px;
  color: var(--grey-mid);
  font-style: italic;
}

/* ─── Per-format section ─── */
.sample-section {
  padding: 70px 40px;
  background: #fff;
}
.sample-section-alt {
  background: #faf9f7;
}
.sample-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}
/* Grid items default to min-width: auto, which lets them grow to their
   content's intrinsic size. The plan-render children carry width:1080px
   inline (set by rescaleAll), which would push .sample-art past its grid
   track and overflow the page visually. min-width:0 forces the items to
   respect the track width and let overflow:hidden on .sample-render do
   its clipping. */
.sample-meta, .sample-art { min-width: 0; }
.sample-art { max-width: 100%; }
.sample-inner.reverse {
  grid-template-columns: 1.1fr 1fr;
}
.sample-inner.reverse .sample-meta {
  order: 2;
}
.sample-inner.reverse .sample-art {
  order: 1;
}

/* Meta column (description + button) */
.sample-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--app-slate, #888);
  margin-bottom: 14px;
}
.sample-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.8px;
  color: var(--app-navy, #0e0e0e);
  margin-bottom: 8px;
}
.sample-tagline {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  color: var(--app-slate, #555);
  margin-bottom: 26px;
}
.sample-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: #2a2a2a;
  margin-bottom: 28px;
}
.sample-desc p {
  margin: 0 0 14px;
}
.sample-desc p:last-child {
  margin-bottom: 0;
}
.sample-desc strong {
  color: var(--app-navy, #0e0e0e);
  font-weight: 700;
}
.sample-desc em {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  color: var(--app-navy, #0e0e0e);
}

/* Download button */
.sample-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--app-navy, #0e0e0e);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  transition: all 0.2s;
  cursor: pointer;
}
.sample-download:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.sample-download .download-arrow {
  font-size: 16px;
  line-height: 1;
}

/* ─── Live-rendered plan containers ────────────────────────────────────
   Each format renderer outputs at 1080px design width. We give the
   container a known width here so the renderer's scaleToFit JS sizes
   the transform correctly. Scrollable variants are for multi-page
   formats (Two-Pager, Full Plan). */
.sample-render {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 10px 32px rgba(0,0,0,0.12);
  overflow: hidden;
  min-height: 320px;
}
/* Children (the rendered plan) start hidden so the user never sees the
   intermediate unscaled state between renderer-writes-innerHTML and
   the rescaleAll() pass that locks the final scale + container height.
   .rendered fades them in at the end of the chain. */
.sample-render > * { opacity: 0; transition: opacity 0.35s ease; }
.sample-render.rendered > * { opacity: 1; }
.sample-render.rendered .sample-placeholder { display: none !important; }

/* Scrollable variant for multi-page plans. No padding so the scaled
   plan content fills the container width edge-to-edge — visible side
   margins were eating ~14px each side. The scaled-page visuals are
   already self-contained boxes with their own shadows + edges. */
.sample-render-scroll {
  max-height: 720px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  background: #f4f5f7;
  padding: 0;
}
.sample-render-scroll .plan-two-pager-page,
.sample-render-scroll .fp-page { scroll-snap-align: start; }
.sample-render-scroll::-webkit-scrollbar { width: 6px; }
.sample-render-scroll::-webkit-scrollbar-track { background: transparent; }
.sample-render-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
}
.sample-render-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }

/* Strip the renderer-injected "Download PDF" button from samples;
   the page-level download CTA is in the sample-meta column. */
.sample-render .preview-actions { display: none !important; }

/* Art column (placeholder + scrollable-art legacy) */
.sample-art {
  position: relative;
}
.sample-art-link {
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.sample-art-link:hover {
  transform: translateY(-3px);
}
.sample-page {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 10px 32px rgba(0,0,0,0.12);
  border-radius: 2px;
}
/* Multi-page sample art: vertically scrollable container so all pages
   are accessible without overlap tricks. Fixed max-height shows ~1.2
   pages at a time so the user sees there's more to scroll. Custom
   scrollbar styling keeps it from looking like a clunky desktop
   browser scrollbar. */
.sample-art-link.two-pager-art,
.sample-art-link.full-plan-art {
  max-height: 620px;
  overflow-y: auto;
  padding: 20px 14px;
  background: linear-gradient(135deg, #f4f5f7 0%, #ecedef 100%);
  border-radius: 6px;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}
.sample-art-link.two-pager-art .sample-page,
.sample-art-link.full-plan-art .sample-page {
  scroll-snap-align: start;
  margin-bottom: 14px;
}
.sample-art-link.two-pager-art .sample-page:last-of-type,
.sample-art-link.full-plan-art .sample-page:last-of-type {
  margin-bottom: 0;
}
/* Subtle scroll hint: a faint right-side scrollbar styling */
.sample-art-link.two-pager-art::-webkit-scrollbar,
.sample-art-link.full-plan-art::-webkit-scrollbar { width: 6px; }
.sample-art-link.two-pager-art::-webkit-scrollbar-track,
.sample-art-link.full-plan-art::-webkit-scrollbar-track { background: transparent; }
.sample-art-link.two-pager-art::-webkit-scrollbar-thumb,
.sample-art-link.full-plan-art::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
}
.sample-art-link.two-pager-art::-webkit-scrollbar-thumb:hover,
.sample-art-link.full-plan-art::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.32);
}

/* Page-count badge in the corner of the scrollable area so users
   immediately understand it's multi-page. */
.sample-art.has-pages { position: relative; }
.sample-art.has-pages::after {
  content: attr(data-page-count);
  position: absolute;
  top: 12px;
  right: 22px;
  background: var(--app-navy, #0e0e0e);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 2px;
  z-index: 10;
  pointer-events: none;
}

/* ─── Firm-branded placeholder cover ───────────────────────────────────
   Stands in for the real plan-page screenshot until it's uploaded.
   Mimics a ClearPlan cover at a glance: brand-color background, serif
   firm name, eyebrow with format + date, big serif client name, gold
   rule, prepared-by line. Each format gets a different firm + palette
   so the page reads as four real plans, not four placeholders. */
.sample-placeholder {
  display: none;
  flex-direction: column;
  aspect-ratio: 1080 / 1397;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 10px 32px rgba(0,0,0,0.18);
  overflow: hidden;
  color: #fff;
  text-align: left;
  position: relative;
  background: var(--placeholder-primary, #2d4a3e);
  /* Stay invisible on first paint so users don't see the fake-cover
     flash before JS replaces the container's innerHTML with the real
     plan. Fade in only if rendering takes > 1s (slow connection,
     broken JS) so the cover still works as a fallback. The .rendered
     hide rule below cancels the animation for the normal case. */
  opacity: 0;
  animation: sample-placeholder-fallback 0.3s ease 1s forwards;
}
@keyframes sample-placeholder-fallback {
  to { opacity: 1; }
}
.sample-render.rendered .sample-placeholder { animation: none; opacity: 0; }
.placeholder-cover {
  flex: 1;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.placeholder-firm {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 17px;
  color: var(--placeholder-secondary, #c9a861);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.placeholder-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 36px;
}
.placeholder-client {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: #fff;
  margin-bottom: 22px;
}
.placeholder-divider {
  width: 56px;
  height: 2px;
  background: var(--placeholder-secondary, #c9a861);
  margin-bottom: 18px;
}
.placeholder-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}
.placeholder-cta {
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 14px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-align: center;
}

/* Per-firm palettes — feed via CSS custom properties so the placeholder
   styling stays one rule and each firm just swaps two color tokens. */
.placeholder-arbor {
  --placeholder-primary: #2d4a3e;     /* forest green */
  --placeholder-secondary: #c9a861;   /* warm tan */
}
.placeholder-northgate {
  --placeholder-primary: #1a2a44;     /* deep navy */
  --placeholder-secondary: #7a9dc7;   /* slate blue */
}
.placeholder-meridian {
  --placeholder-primary: #5a1f2b;     /* burgundy */
  --placeholder-secondary: #b5874c;   /* brushed gold */
}
.placeholder-summit {
  --placeholder-primary: #2a2a2a;     /* charcoal */
  --placeholder-secondary: #8a9d7e;   /* sage */
}

/* ─── Comparison grid ─── */
.samples-compare {
  padding: 90px 40px 70px;
  background: #fff;
  border-top: 1px solid #ececec;
}
.compare-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.compare-header {
  text-align: center;
  margin-bottom: 48px;
}
.compare-header .hero-eyebrow {
  margin-bottom: 12px;
}
.compare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.compare-card {
  background: #fafaf9;
  border: 1px solid #ececec;
  border-radius: 4px;
  padding: 26px 22px 30px;
  transition: all 0.2s;
}
.compare-card:hover {
  border-color: var(--app-navy, #0e0e0e);
  transform: translateY(-2px);
}
.compare-card-featured {
  background: var(--app-navy, #0e0e0e);
  border-color: var(--app-navy, #0e0e0e);
  color: #fff;
}
.compare-card-featured .compare-card-title {
  color: #fff;
}
.compare-card-featured .compare-card-pages {
  color: rgba(255,255,255,0.55);
}
.compare-card-featured .compare-card-list li {
  color: rgba(255,255,255,0.85);
}
.compare-card-title {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: var(--app-navy, #0e0e0e);
  margin-bottom: 4px;
}
.compare-card-pages {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--app-slate, #888);
  margin-bottom: 18px;
}
.compare-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.compare-card-list li {
  font-size: 13px;
  line-height: 1.4;
  color: #2a2a2a;
  padding-left: 14px;
  position: relative;
}
.compare-card-list li::before {
  content: '·';
  position: absolute;
  left: 2px;
  top: -3px;
  font-size: 18px;
  font-weight: 700;
  color: var(--app-slate, #888);
}

/* ─── Active nav state on /samples ─── */
.nav-link.active {
  color: var(--app-navy, #0e0e0e);
  font-weight: 700;
}

/* ─── Mobile ─── */
@media (max-width: 900px) {
  .sample-inner,
  .sample-inner.reverse {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .sample-inner.reverse .sample-meta { order: 1; }
  .sample-inner.reverse .sample-art { order: 2; }
  .sample-title { font-size: 32px; }
  .sample-tagline { font-size: 16px; }
  .sample-section { padding: 50px 24px; }
  .samples-hero { margin: 60px auto 36px; padding: 0 24px; }
  .compare-grid { grid-template-columns: 1fr 1fr; }
  .samples-compare { padding: 60px 24px 50px; }
}

/* Kill horizontal page scroll on /samples. The live-rendered plans set
   inline width: 1080px on their stack elements (via rescaleAll), which
   would otherwise push the body wide on phones and let the user scroll
   right past the hero. Their containers already clip via overflow:hidden
   on .sample-render; the scrollable variants get explicit overflow-x
   below. This is the safety net so nothing else can cause horizontal
   overflow either. samples.css is page-scoped to /samples, so this
   doesn't affect landing or dashboard. */
html, body { overflow-x: hidden; }

/* Scrollable sample containers (Two-Pager, Full Plan) need explicit
   overflow-x:hidden — overflow-y:auto alone left their 1080px-wide
   inner content able to push horizontally. */
.sample-render-scroll { overflow-x: hidden; }

@media (max-width: 600px) {
  .compare-grid { grid-template-columns: 1fr; }
  .sample-title { font-size: 26px; }
  /* Tighter page-level padding on small phones. */
  .sample-section { padding: 40px 18px; }
  /* Bump the top spacing so the eyebrow doesn't get covered by the
     62px fixed nav — landing's hero uses 148px top padding for the
     same reason. */
  .samples-hero { margin: 110px auto 30px; padding: 0 18px; }
  .samples-compare { padding: 50px 18px 40px; }
  .samples-hero .hero-note { font-size: 13px; }
  /* Cap the scrollable multi-page samples shorter on phones so the
     viewport doesn't get eaten by one long scroll region. */
  .sample-render-scroll { max-height: 540px; }
  /* Full-width tap target for download button on phones — easier to hit
     and reads as the primary action when the meta column is stacked
     above the render. */
  .sample-download { width: 100%; justify-content: center; }
  /* Multi-page badge: pull in a bit so it doesn't bump the scrollbar. */
  .sample-art.has-pages::after { top: 8px; right: 12px; }
}

@media (max-width: 900px) and (min-width: 601px) {
  /* Same nav-clearance fix for the tablet breakpoint — the prior
     '60px' top margin let the fixed 62px nav swallow the eyebrow. */
  .samples-hero { margin-top: 120px; }
}