/* css/components.css — buttons, cards, the rate board, facts, forms, FAQ. */

/* ---- buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn-primary { background: var(--arakku); color: var(--paper); }
.btn-primary:hover { background: var(--arakku-deep); color: var(--paper); }
.btn-ghost { border-color: var(--rule-strong); color: var(--fg); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
/* Legacy light-band button, now simply the ghost on paper. */
.btn-light { border-color: var(--rule-strong); color: var(--fg); background: var(--paper); }
.btn-light:hover { border-color: var(--accent); color: var(--accent); }

/* ---- cards ------------------------------------------------------------------
   A card is a file entry: a mono meta line, the name in Archivo, figures along
   the base. Where the register holds a photograph the plate sits on top of the
   entry, shown whole at its own ratio. The top border thickens and turns
   arakku on hover — the only movement a card makes. */
.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: var(--s-5);
  text-decoration: none;
  color: var(--fg);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.card:hover { border-top-color: var(--accent); border-color: var(--rule-strong); color: var(--fg); transform: translateY(-2px); }
.card h3 { margin: 0 0 var(--s-2); }
.card p { margin: 0; font-size: var(--t-sm); color: var(--muted); }

.card-media {
  margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--wash-deep);
}
.card-media img { width: 100%; height: auto; display: block; }

.card-meta {
  font-size: var(--t-xs);
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}

.venue-card .facts {
  margin-top: auto; padding-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: var(--t-xs); color: var(--muted);
  border-top: 1px solid var(--rule);
}
.venue-card .facts b { color: var(--fg); font-weight: 500; }
.venue-card .type-line {
  font-family: var(--font-body); font-style: italic;
  margin-bottom: var(--s-4);
}

/* ---- the rate board -----------------------------------------------------------
   The signature. Real per-plate ranges by quarter, printed like a page from a
   rate register: mono, ruled rows on paper, an arakku tick per row. Static
   HTML so any crawler can quote it without running our JavaScript. */
.rateboard {
  font-family: var(--font-data);
  border-top: 2px solid var(--fg);
  font-variant-numeric: tabular-nums;
}
.rateboard-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  text-decoration: none;
}
a.rateboard-row:hover { color: var(--accent); }
a.rateboard-row:hover .rb-quarter::before { background: var(--arakku-deep); }
.rb-quarter { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); letter-spacing: 0.02em; }
.rb-quarter::before { content: ''; width: 0.55rem; height: 0.55rem; background: var(--arakku); flex: none; }
.rb-count { color: var(--muted); font-size: var(--t-sm); text-align: right; }
.rb-rate { font-size: var(--t-md); text-align: right; white-space: nowrap; }
.rateboard-note { font-family: var(--font-data); font-size: var(--t-xs); color: var(--muted); margin-top: var(--s-4); }
@media (max-width: 640px) {
  .rateboard-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rb-count { display: none; }
  .rb-rate { font-size: var(--t-sm); }
}

/* The board reads the same wherever it is printed; the light variant is kept
   only as a name other templates already use. */
.rateboard-light { border-top-color: var(--fg); }

/* ---- venue gallery -------------------------------------------------------------
   The plates on a venue page: the lead print full width, the rest in a two-up
   row beneath. Natural ratios throughout — nothing is cropped to fit. */
.venue-gallery { display: grid; gap: var(--s-5); margin: var(--s-6) 0 var(--s-4); }
.venue-gallery .plate-row {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}

/* ---- filters -------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.filters button {
  font-family: var(--font-data);
  font-size: var(--t-xs);
  padding: 0.45rem 0.9rem;
  background: var(--paper);
  color: var(--fg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.filters button:hover { border-color: var(--accent); color: var(--accent); }
.filters button[aria-pressed='true'] { background: var(--arakku); border-color: var(--arakku); color: var(--paper); }
.filter-count { font-size: var(--t-sm); color: var(--muted); margin: var(--s-4) 0 var(--s-5); }

/* ---- fact tables ------------------------------------------------------------ */

.planner-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--s-5) 0;
}
.planner-facts > div { background: var(--paper); padding: var(--s-4); }
.planner-facts b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-1);
}
.planner-facts span { font-size: var(--t-sm); }

.link-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s-6); }
.link-list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.link-list span { font-family: var(--font-data); font-size: var(--t-xs); color: var(--muted); margin-left: var(--s-2); }
@media (max-width: 640px) { .link-list { columns: 1; } }

/* on-file bullet facts, carried from the master file */
.onfile { list-style: none; margin: var(--s-4) 0; padding: 0; }
.onfile li { padding: var(--s-2) 0 var(--s-2) var(--s-5); position: relative; font-size: var(--t-sm); }
.onfile li::before {
  content: ''; position: absolute; left: 0; top: 0.95em;
  width: 0.9rem; height: 2px; background: var(--accent);
}

/* ---- answer block (AI-citation asset — protected surface) -------------------- */

.answer-block {
  border-left: 3px solid var(--accent);
  background: var(--wash);
  padding: var(--s-5);
  margin: var(--s-6) 0;
}
.answer-block h3 { margin-bottom: var(--s-3); }
.answer-block p { margin: 0; font-size: var(--t-sm); }

/* ---- FAQ ------------------------------------------------------------------- */

.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-base);
  padding: var(--s-4) var(--s-6) var(--s-4) 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: var(--s-2); top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-data); color: var(--accent);
}
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 var(--s-4); font-size: var(--t-sm); color: var(--ink-2); max-width: 68ch; }

/* ---- enquiry form ------------------------------------------------------------
   Sits on the sand band; the fields are paper with ruled borders, the way a
   ledger form is printed. Nothing dark anywhere. */
.enquire { max-width: 780px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
}
.field.full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--arakku); outline-offset: 1px;
}

#form-status { margin-top: var(--s-4); font-size: var(--t-sm); }
#form-status[data-state='error'] { color: var(--arakku-deep); }