/* ============================================================
   The Saginaw Front Porch — v1.1 interactive components
   Slot map · Postcard preview · ROI calculator
   ============================================================ */

/* ---------- Slot map ---------- */
.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.slot {
  border: 1px solid var(--sage); background: var(--cream);
  aspect-ratio: 3 / 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 12px;
}
.slot .slot-n {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--charcoal-3); margin-bottom: 6px;
}
.slot.open { cursor: pointer; transition: border-color .15s, background .15s; }
.slot.open .slot-label {
  font-family: var(--font-display); font-weight: var(--w-semi); font-size: 17px;
  letter-spacing: 0.08em; color: var(--charcoal);
}
.slot.open .slot-sub { font-family: var(--font-body); font-style: italic; font-size: 12px; color: var(--charcoal-3); margin-top: 4px; }
.slot.open:hover { border: 2px solid var(--brick); background: #fffdf8; }
.slot.taken { background: var(--sage); border-color: var(--sage); }
.slot.taken .slot-label, .slot.pending .slot-label {
  font-family: var(--font-body); font-weight: var(--w-semi); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.slot.taken .slot-label { color: var(--cream); }
.slot.pending { border-color: var(--brick); }
.slot.pending .slot-label { color: var(--brick); }
.slot-stats {
  margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-body); font-weight: var(--w-semi); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal-2);
}
.slot-stats .sep { color: var(--sage); }
.slot-stats strong { color: var(--brick); }

/* ---------- Postcard preview ---------- */
.preview-grid { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 44px; align-items: start; }
.preview-form .pf { margin-bottom: 16px; }
.preview-form label {
  display: block; font-family: var(--font-body); font-weight: var(--w-semi);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--charcoal-2); margin-bottom: 6px;
}
.preview-form input[type=text], .preview-form input[type=tel], .preview-form select {
  width: 100%; font-family: var(--font-body); font-size: 15px; padding: 10px 12px;
  background: var(--cream); border: 1px solid var(--charcoal); border-radius: 0; color: var(--charcoal);
}
.swatches { display: flex; gap: 10px; }
.swatch { width: 30px; height: 30px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch.active { border-color: var(--charcoal); }
.dropzone {
  border: 1px dashed var(--sage); padding: 14px; text-align: center;
  font-family: var(--font-body); font-style: italic; font-size: 13px;
  color: var(--charcoal-3); cursor: pointer;
}
.dropzone img { max-height: 46px; margin: 4px auto 0; }
.preview-actions { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.btn.ghost { background: transparent; color: var(--sage); border: 1px solid var(--sage); }
.btn.ghost:hover { background: var(--sage); color: var(--cream); }
.preview-note { font-family: var(--font-body); font-style: italic; font-size: 12px; color: var(--charcoal-3); margin-top: 12px; }

.postcard { aspect-ratio: 4 / 3; background: var(--cream); border: 1px solid var(--charcoal); display: flex; flex-direction: column; overflow: hidden; }
.pc-masthead { background: var(--sage); color: var(--cream); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-masthead .pc-title { font-family: var(--font-display); font-weight: var(--w-bold); font-size: clamp(13px, 2.3vw, 22px); }
.pc-masthead .pc-edition { font-family: var(--font-body); font-weight: var(--w-semi); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; opacity: .9; white-space: nowrap; }
.pc-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1px; background: var(--cream-edge); padding: 1px; }
.pc-cell { background: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4px; overflow: hidden; }
.pc-cell .pc-cat { font-family: var(--font-body); font-weight: var(--w-semi); font-size: 7px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal-3); }
.pc-cell .pc-name { font-family: var(--font-display); font-size: 9px; color: var(--charcoal-3); line-height: 1.1; }
.pc-cell.you { position: relative; border-top: 3px solid var(--sage); }
.pc-cell.you .pc-cat { color: var(--brick); }
.pc-cell.you .pc-name { font-weight: var(--w-bold); color: var(--charcoal); font-size: 12px; }
.pc-cell.you .pc-tag { font-family: var(--font-body); font-style: italic; font-size: 8px; color: var(--charcoal-2); line-height: 1.15; margin-top: 1px; }
.pc-cell.you .pc-phone { font-family: var(--font-body); font-size: 8px; color: var(--charcoal-3); margin-top: 2px; }
.pc-cell.you img { max-height: 34%; max-width: 72%; object-fit: contain; margin-bottom: 3px; }
.pc-cell.you .you-badge { position: absolute; top: 3px; right: 4px; font-family: var(--font-body); font-weight: var(--w-semi); font-size: 6px; letter-spacing: 0.08em; color: var(--brick); }
.pc-foot { background: var(--charcoal); color: var(--cream); font-family: var(--font-body); font-size: 8px; text-align: center; padding: 4px; letter-spacing: 0.04em; }

/* ---------- ROI calculator ---------- */
.roi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.roi-card { background: var(--cream); border: 1px solid var(--cream-edge); padding: 22px; }
.roi-card label { display: block; font-family: var(--font-body); font-weight: var(--w-semi); font-size: 14px; color: var(--charcoal); margin-bottom: 16px; line-height: 1.35; }
.roi-card input[type=range] { width: 100%; accent-color: var(--brick); }
.roi-card .val { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 26px; color: var(--brick); margin-top: 12px; }
.roi-card .hint { font-family: var(--font-body); font-style: italic; font-size: 12px; color: var(--charcoal-3); margin-top: 6px; }
.roi-out { margin-top: 26px; background: var(--cream); border-top: 4px solid var(--brick); padding: 30px; text-align: center; }
.roi-out .big { font-family: var(--font-display); font-weight: var(--w-bold); font-size: clamp(38px, 6vw, 58px); color: var(--charcoal); line-height: 1; }
.roi-out .big-sub { font-family: var(--font-body); font-size: 16px; color: var(--charcoal-2); margin-top: 10px; }
.roi-out .lines { margin-top: 18px; font-family: var(--font-body); font-size: 15px; color: var(--charcoal-2); line-height: 1.7; }
.roi-out .roi-mult { margin-top: 16px; font-family: var(--font-body); font-weight: var(--w-semi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brick); font-size: 15px; }
.roi-out .roi-note { font-style: italic; color: var(--charcoal-2); font-family: var(--font-body); font-size: 15px; }
.roi-cta { display: inline-block; margin-top: 18px; font-family: var(--font-body); font-style: italic; font-size: 15px; color: var(--brick); text-decoration: none; border-bottom: 1px solid var(--brick); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .preview-grid { grid-template-columns: 1fr; gap: 30px; }
  .roi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Postcard mockup (real template — used in hero + preview) ---------- */
.pcard { aspect-ratio: 12.25 / 9.25; background: var(--cream); border: 1px solid var(--charcoal); display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; }
.pcard-row { flex: 1 1 0; display: grid; gap: 1.1cqi; padding: 1.4cqi; min-height: 0; }
.pcard-top { grid-template-columns: 1fr 1fr 2fr; }
.pcard-bottom { grid-template-columns: repeat(4, 1fr); }
.pcslot { border: 1px solid var(--sage); background: var(--cream); display: flex; flex-direction: column; text-align: center; padding: 1.4cqi; min-height: 0; overflow: hidden; }
.pcs-cat { font-family: var(--font-body); font-weight: 600; font-size: max(7px, 1.55cqi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brick); padding-bottom: 1cqi; border-bottom: 1px solid var(--cream-edge); }
.pcs-mid { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6cqi; padding: 1cqi 0; min-height: 0; }
.pcs-ph-label { font-family: var(--font-body); font-style: italic; font-size: max(7px, 1.7cqi); color: #b7b0a4; }
.pcs-mid img { max-height: 9cqi; max-width: 72%; object-fit: contain; }
.pcs-name { font-family: var(--font-display); font-weight: 700; font-size: max(8px, 2.1cqi); color: var(--charcoal); line-height: 1.05; }
.pcs-tag { border-top: 1px solid var(--cream-edge); padding-top: 1cqi; font-family: var(--font-body); font-size: max(6px, 1.35cqi); line-height: 1.3; color: var(--charcoal-2); }
.pcs-tag .ph { display: block; color: var(--charcoal); font-weight: 600; margin-top: 0.4cqi; }
.pcdouble .pcs-mid { flex-direction: row; gap: 2.4cqi; }
.pcd-left { display: flex; flex-direction: column; align-items: center; gap: 0.6cqi; }
.pcdouble .stars { color: var(--brick); font-size: max(9px, 2cqi); letter-spacing: 0.06em; }
.pcdouble .testi { font-family: var(--font-body); font-style: italic; font-size: max(7px, 1.5cqi); color: var(--charcoal-2); line-height: 1.25; }
.pcdouble .qr { flex: 0 0 auto; width: 9cqi; height: 9cqi; border: 1px solid var(--charcoal); opacity: 0.8;
  background: repeating-linear-gradient(0deg, var(--charcoal) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, var(--charcoal) 0 2px, transparent 2px 5px); }
.pcard-band { background: var(--sage); color: var(--cream); display: flex; align-items: center; gap: 2.2cqi; padding: 1.6cqi 1.4cqi; }
.pcb-icon { height: 9cqi; width: 9cqi; flex: 0 0 auto; }
.pcb-words { flex: 1 1 auto; min-width: 0; }
.pcb-wm { font-family: var(--font-display); font-weight: 700; font-size: max(13px, 3.3cqi); letter-spacing: -0.02em; line-height: 0.95; color: var(--cream); white-space: nowrap; }
.pcb-ed { font-family: var(--font-body); font-style: italic; font-size: max(8px, 1.6cqi); color: var(--cream); opacity: 0.92; margin-top: 0.5cqi; }
.pcb-mail { flex: 0 0 auto; display: flex; gap: 1.6cqi; align-items: stretch; border-left: 1px solid rgba(245,237,224,0.4); padding-left: 2cqi; }
.pcb-lpc { display: flex; align-items: center; font-family: var(--font-body); font-weight: 600; font-size: max(6px, 1.25cqi); letter-spacing: 0.06em; text-transform: uppercase; max-width: 11ch; line-height: 1.3; }
.pcb-ind { border: 1px solid var(--cream); background: var(--cream); color: var(--charcoal); font-family: var(--font-body); font-weight: 600; font-size: max(5px, 1.05cqi); letter-spacing: 0.04em; text-align: center; line-height: 1.5; padding: 1cqi 1.4cqi; display: flex; flex-direction: column; justify-content: center; }
.pcslot.you { position: relative; border-top: 3px solid var(--sage); }
.pcslot.you .pcs-cat { color: var(--brick); }
.pcslot.you .you-badge { position: absolute; top: 1cqi; right: 1.2cqi; font-family: var(--font-body); font-weight: 600; font-size: max(5px, 1cqi); letter-spacing: 0.06em; color: var(--brick); }

/* ---------- Hero two-column layout ---------- */
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 54px; align-items: center; }
.hero-copy h1 { max-width: none; }
.hero-art-cap { font-family: var(--font-body); font-style: italic; font-size: 13px; color: var(--charcoal-3); text-align: center; margin: 16px 0 0; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
}

/* ---------- Filled ad tiles (offer-driven, like a real card) ---------- */
.pcslot.ad { padding: 0; border: 1px solid var(--cream-edge); overflow: hidden; }
.pcs-head { position: relative; padding: 1.3cqi 1.2cqi; color: var(--cream); text-align: center; }
.pcs-cat-sm { font-family: var(--font-body); font-weight: 600; font-size: max(5px, 1.1cqi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); opacity: 0.82; }
.pcs-head .pcs-name { color: var(--cream); font-size: max(8px, 1.95cqi); line-height: 1.05; margin-top: 0.3cqi; }
.pcs-head-logo { max-height: 7cqi; max-width: 60%; margin: 0 auto 0.6cqi; display: block; object-fit: contain; }
.pcs-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.9cqi; padding: 1.3cqi 1.2cqi; text-align: center; min-height: 0; }
.pcs-offer { font-family: var(--font-display); font-weight: 700; font-size: max(8px, 1.85cqi); color: var(--brick); line-height: 1.12; }
.pcs-foot { display: flex; align-items: center; justify-content: space-between; gap: 1cqi; margin-top: auto; }
.pcs-phone { font-family: var(--font-body); font-weight: 600; font-size: max(5px, 1.2cqi); color: var(--charcoal); text-align: left; line-height: 1.2; }
.pcs-qr { width: 7cqi; height: 7cqi; flex: 0 0 auto; border: 1px solid var(--charcoal); opacity: 0.7;
  background: repeating-linear-gradient(0deg, var(--charcoal) 0 1.5px, transparent 1.5px 4px), repeating-linear-gradient(90deg, var(--charcoal) 0 1.5px, transparent 1.5px 4px); }
.pcslot.ad.you .you-badge { position: absolute; top: 0.8cqi; right: 1cqi; color: var(--cream); font-size: max(5px, 0.95cqi); letter-spacing: 0.06em; font-weight: 600; opacity: 0.92; }
.pcdouble .stars { color: #E9A23B; font-size: max(8px, 1.7cqi); letter-spacing: 0.05em; }
.pcdouble .testi { font-family: var(--font-body); font-style: italic; font-size: max(6px, 1.4cqi); color: var(--charcoal-2); line-height: 1.2; }

/* ---------- Trackable QR section ---------- */
.qrtrack { padding: 80px 0; background: var(--cream-deep); border-top: 1px solid var(--cream-edge); border-bottom: 1px solid var(--cream-edge); }
.qrtrack .head { max-width: 680px; margin-bottom: 42px; }
.qrtrack h2 { font-family: var(--font-display); font-weight: var(--w-semi); font-size: clamp(28px, 3.8vw, 42px); letter-spacing: -0.015em; }
.qrtrack .dek { font-size: 19px; margin-top: 12px; max-width: 62ch; }
.qr-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.qr-card { background: var(--cream); border: 1px solid var(--sage); padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 320px; }
.qr-card img { width: 100%; max-width: 240px; display: block; }
.qr-stat { display: flex; flex-direction: column; align-items: center; border-top: 1px solid var(--cream-edge); padding-top: 16px; width: 100%; }
.qr-stat-n { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 42px; color: var(--brick); line-height: 1; }
.qr-stat-l { font-family: var(--font-body); font-weight: var(--w-semi); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--charcoal-2); margin-top: 5px; }
.qr-cap { font-family: var(--font-body); font-style: italic; font-size: 13px; color: var(--charcoal-3); margin: 14px 0 0; max-width: 320px; text-align: center; }
.qr-benefits { list-style: none; margin: 0; padding: 0; }
.qr-benefits li { padding: 18px 0; border-top: 1px solid var(--cream-edge); }
.qr-benefits li:first-child { border-top: 0; padding-top: 0; }
.qr-benefits h3 { font-family: var(--font-display); font-weight: var(--w-semi); font-size: 22px; color: var(--charcoal); margin: 0 0 6px; }
.qr-benefits p { font-family: var(--font-body); font-size: 16px; color: var(--charcoal-2); margin: 0; line-height: 1.5; }
@media (max-width: 900px) {
  .qr-grid { grid-template-columns: 1fr; gap: 36px; }
  .qr-card { margin: 0 auto; }
}

/* ---------- Real image swaps: hero card + QR dashboard ---------- */
.qr-grid { align-items: start; }
.hero-art img { width: 100%; height: auto; display: block; border: 1px solid var(--cream-edge); }
.qr-dash { width: 100%; max-width: 440px; height: auto; display: block; border: 1px solid var(--cream-edge); }

/* ---------- Hero: roomier copy column, image sits to the right ---------- */
.hero-grid { grid-template-columns: 480px 1fr; gap: 40px; align-items: center; }
.hero-copy { max-width: none; }
.hero-art img { max-width: none; }
.hero-art-cap { text-align: left; }