/* ==========================================================================
   Bricks for Books
   The brick is drawn, not photographed, so it stays crisp at any size and
   costs no image request. Clay color comes from layered gradients; the
   grain is one inline SVG turbulence filter; the lettering is carved by
   pairing a dark glyph with a light lower highlight, which is how a chisel
   cut reads in daylight.
   ========================================================================== */

.fpv-wrap { --fpv-clay:#9d5334; --fpv-clay-lo:#7c3d25; --fpv-clay-hi:#b86a45;
            --fpv-cut:#4a2416; --fpv-mortar:#cdc6b8; }

/* ── One brick ───────────────────────────────────────────────────────── */
.fpv-brick {
  position: relative;
  aspect-ratio: 8 / 4;               /* the real 4" x 8" paver */
  border-radius: 3px;
  background:
    linear-gradient(158deg, var(--fpv-clay-hi) 0%, var(--fpv-clay) 42%, var(--fpv-clay-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -2px 4px rgba(0,0,0,.28),
    inset 2px 0 4px rgba(0,0,0,.10),
    0 1px 2px rgba(0,0,0,.30);
  overflow: hidden;
  isolation: isolate;
}

/* Grain. Self-contained SVG so nothing is fetched from another host. */
.fpv-brick::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 140px 140px;
  mix-blend-mode: multiply;
  opacity: .30;
  pointer-events: none;
}

/* A few lighter flecks, the way fired clay is never one color. */
.fpv-brick::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 14% 22% at 22% 68%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(ellipse 10% 16% at 74% 30%, rgba(0,0,0,.12), transparent 70%),
    radial-gradient(ellipse 18% 12% at 55% 84%, rgba(255,255,255,.06), transparent 70%);
}

.fpv-brick__face {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .18em;
  padding: 8% 7%;
}

.fpv-brick__line {
  display: block;
  width: 100%;
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  /* 14 characters have to fit the width at any brick size, so the type
     scales with the container rather than the viewport. */
  /* Sized from the longest line (--fpv-len, set when the brick is built) so
     a full-length inscription still fits the face. 1.02 is the per-character
     advance in ems for Georgia bold capitals plus letter-spacing; JS trims
     any line that still measures long. */
  font-size: clamp(6px, calc(84cqw / (var(--fpv-len, 12) * 1.02)), 21px);
  letter-spacing: .04em;
  line-height: 1.22;
  white-space: pre;
  overflow: hidden;                  /* last-resort guard, should never bite */
  color: var(--fpv-cut);
  /* Carved: dark glyph, light shadow below-right, dark above-left. */
  text-shadow:
    0 1px 0 rgba(255,235,220,.34),
    0 -1px 0 rgba(0,0,0,.32);
  min-height: 1.22em;
}

.fpv-brick { container-type: inline-size; }

/* Blank filler bricks in the wall — same stone, no cut. */
.fpv-brick--blank { opacity: .58; }
.fpv-brick--blank .fpv-brick__face { visibility: hidden; }

/* ── The wall ────────────────────────────────────────────────────────── */
.fpv-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 9px;
  padding: 14px;
  border-radius: var(--radius, 8px);
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), transparent 40%),
    var(--fpv-mortar);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.18);
}
@media (max-width: 520px) {
  .fpv-wall { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 7px; padding: 10px; }
}

.fpv-wall__empty { padding: 28px 16px; text-align: center; color: var(--text-mid, #5b6470); }

/* ── Builder ─────────────────────────────────────────────────────────── */
.fpv-builder { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
@media (max-width: 860px) { .fpv-builder { grid-template-columns: 1fr; } }

.fpv-preview-col { position: sticky; top: 90px; }
/* On one column the preview moves ABOVE the fields: someone typing on a
   phone should see the stone change without scrolling past the form. */
@media (max-width: 860px) { .fpv-preview-col { position: static; order: -1; } }

.fpv-preview-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-mid, #5b6470); margin: 0 0 8px; }

.fpv-preview-stage { padding: 16px; border-radius: var(--radius, 8px); background: var(--fpv-mortar);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.18); }

.fpv-field { margin-bottom: 16px; }
.fpv-field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: .92rem; }
.fpv-field input[type=text], .fpv-field input[type=email], .fpv-field select, .fpv-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border, #d8dee6);
  border-radius: 6px; font: inherit; background: #fff;
}
.fpv-line-input { font-family: Georgia, serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.fpv-counter { float: right; font-weight: 400; font-size: .8rem; color: var(--text-mid, #5b6470); font-variant-numeric: tabular-nums; }
.fpv-counter--full { color: #b32d2e; font-weight: 600; }

.fpv-hint { font-size: .84rem; color: var(--text-mid, #5b6470); margin: -8px 0 16px; line-height: 1.5; }

.fpv-error { display: none; margin: 12px 0; padding: 11px 14px; border-radius: 6px;
  background: #fdecea; border: 1px solid #f5c6c2; color: #8a1f1a; font-size: .92rem; }
.fpv-error.is-shown { display: block; }

.fpv-price-row { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 16px; }
.fpv-price { font-size: 1.7rem; font-weight: 700; color: var(--ocpl-green-dark, #2f6b30); }
.fpv-price-note { font-size: .85rem; color: var(--text-mid, #5b6470); }

.fpv-legal { font-size: .82rem; line-height: 1.6; color: var(--text-mid, #5b6470); margin-top: 14px; }

.fpv-permanence { font-size: .86rem; line-height: 1.55; color: var(--text-dark, #333);
  margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--fpv-clay, #9d5334);
  background: var(--off-white, #f6f7f9); border-radius: 0 6px 6px 0; }

.fpv-approve-row { display: flex; align-items: flex-start; gap: 9px;
  font-size: .9rem; line-height: 1.5; margin: 0 0 16px; cursor: pointer; }
.fpv-approve-row input { margin-top: 3px; flex-shrink: 0; }

/* ── What happens next ───────────────────────────────────────────────── */
/* The page's one soft band: white step cards on pale blue, breaking the
   run of white sections between the order form and the walkway. */
.fpv-steps-section { background: var(--ocpl-blue-pale, #f0f8fc);
  border-top: 1px solid var(--border, #d8dee6); border-bottom: 1px solid var(--border, #d8dee6); }
.fpv-steps { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .fpv-steps { grid-template-columns: 1fr; } }
.fpv-step { background: #fff; border: 1px solid var(--border, #d8dee6);
  border-radius: var(--radius, 8px); padding: 20px 18px; }
.fpv-step__num { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 10px;
  background: var(--fpv-clay, #9d5334); color: #fff; font-weight: 700; font-size: .95rem; }
.fpv-step h3 { margin: 0 0 6px; font-size: 1.02rem; }
.fpv-step p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--text-mid, #5b6470); }

.fpv-section-sub { margin: -6px 0 18px; font-size: .92rem; color: var(--text-mid, #5b6470); }

.fpv-closed { padding: 20px; border-radius: var(--radius, 8px); background: var(--off-white, #f6f7f9);
  border: 1px solid var(--border, #d8dee6); }

/* ── Success panel ───────────────────────────────────────────────────── */
.fpv-success { padding: 22px; border-radius: var(--radius, 8px);
  background: #eef7ee; border: 1px solid #cfe6cf; margin-bottom: 28px; }
.fpv-success__brick { max-width: 300px; margin: 14px 0; }

/* ── Stats ───────────────────────────────────────────────────────────── */
.fpv-stats { display: flex; flex-wrap: wrap; gap: 26px; margin: 0 0 22px; }
.fpv-stat__val { display: block; font-size: 1.9rem; font-weight: 700; color: var(--ocpl-blue, #005685); line-height: 1.1; }
.fpv-stat__label { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mid, #5b6470); }

/* ── How much of the run is spoken for ───────────────────────────────── */
.fpv-meter { height: 12px; border-radius: 999px; overflow: hidden;
  background: var(--fpv-mortar); box-shadow: inset 0 1px 3px rgba(0,0,0,.20); margin: 2px 0 8px; }
.fpv-meter__bar { height: 100%; border-radius: 999px; min-width: 3px;
  background: linear-gradient(90deg, var(--fpv-clay-lo), var(--fpv-clay-hi));
  transition: width var(--transition, .3s ease); }
.fpv-meter__note { margin: 0 0 22px; font-size: .88rem; color: var(--text-mid, #5b6470); }

@media print {
  .fpv-builder, .fpv-cta { display: none; }
}