/* Start a Tradition — the selector page.
   Builds on ../styles.css (palette, type, buttons, header, footer).
   Audience rule: big tap targets (52px+), readable type, one
   question at a time, a visible way back on every screen. */

.tradition-main { padding-top: 2rem; padding-bottom: 3rem; }

#tradition-flow { max-width: 44rem; margin-top: 1.6rem; }

/* Holly's line */
.holly-says {
  display: flex; align-items: center; gap: 0.9rem;
  margin-bottom: 1rem;
}
.holly-says img { width: 56px; height: 56px; border-radius: 50%; }
.holly-says p { margin: 0; font-size: 1.1rem; }

.t-question { margin: 0.4rem 0 1rem; }

/* Back link — same weight as the catalog's */
.t-back {
  font-weight: 700; display: inline-block;
  padding: 0.6rem 0.2rem; min-height: 48px;
}

/* One question, one big choice per row */
.t-option {
  display: block; width: 100%; text-align: left;
  min-height: 60px; padding: 0.9rem 1.1rem; margin: 0 0 0.8rem;
  background: var(--card-bg); border: 2px solid var(--line);
  border-radius: 12px; cursor: pointer;
  font-family: inherit; color: var(--ink);
}
.t-option:hover { border-color: var(--pine); }
.t-option:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 3px;
}
.t-option.picked { border-color: var(--pine); background: #eef4ea; }
.t-option-title {
  display: block; font-weight: 700; font-size: 1.1rem; color: var(--pine-dark);
}
.t-option-blurb { display: block; font-size: 0.98rem; color: var(--ink-soft); margin-top: 0.15rem; }

/* Widening notes — said out loud, never fine print */
.t-note {
  background: #f3e9d2; border: 1px solid var(--line);
  border-radius: 10px; padding: 0.8rem 1rem; margin: 0 0 1rem;
}

/* Result cards */
.t-card {
  background: var(--card-bg); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem 1.3rem;
  margin: 0 0 1.2rem;
}
.t-card-heading {
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.85rem; font-weight: 700; color: var(--brick); margin: 0 0 0.7rem;
}
.t-photo {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 0.9rem;
}
.t-photo img { width: 100%; height: 100%; object-fit: contain; }
.no-photo { color: var(--ink-soft); font-weight: 600; padding: 1rem; text-align: center; }
.t-piece-name { margin: 0 0 0.2rem; }
.t-piece-sub { color: var(--ink-soft); margin: 0 0 0.6rem; }
.t-price { margin: 0 0 0.9rem; font-size: 1.02rem; }
.t-price-label { font-weight: 800; color: var(--pine-dark); }
.t-see { margin-top: 0.2rem; }
.t-also { margin: 1.4rem 0 0.8rem; }

#tradition-flow .btn { margin: 0 0.6rem 0.8rem 0; cursor: pointer; font-family: inherit; border: none; }
#tradition-flow .btn-outline { border: 2px solid var(--pine); }

/* App call to action — same block as the catalog page */
.app-cta {
  margin-top: 2.6rem; background: var(--pine); color: #eaf2e6;
  border-radius: var(--radius); padding: 1.6rem;
}
.app-cta h2 { color: #fff; margin-top: 0; }
.app-cta .btn-pine { background: var(--gold); color: var(--pine-dark); }
.app-cta .btn-pine:hover { background: var(--cream); color: var(--pine-dark); }