/* css/components.css */

/* ---- Buttons ---- */
.btn-primary {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; background: var(--accent); color: var(--black);
  padding: 14px 32px; border: none; cursor: none; transition: background 0.3s;
  text-decoration: none; display: inline-block;
}
.btn-primary:hover { background: var(--accent-warm); }

.btn-ghost {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--off-white); background: transparent;
  padding: 14px 32px; border: 1px solid var(--border); cursor: none;
  transition: border-color 0.3s, color 0.3s; text-decoration: none; display: inline-block;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Forms ---- */
.form-group { margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--warm-grey); display: block; margin-bottom: 10px;
}
.form-input, .form-select, .form-textarea {
  width: 100%; background: transparent; border: 1px solid var(--border);
  color: var(--off-white); padding: 14px 16px;
  font-family: var(--font-sans); font-size: 15px; outline: none; transition: border-color 0.3s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(184,179,170,0.4); }
.form-select { cursor: none; background-color: var(--black); -webkit-appearance: none; }
.form-select option { background: var(--black); color: var(--off-white); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-title { font-family: var(--font-display); font-size: 32px; font-weight: 300; margin-bottom: 8px; }
.form-sub { font-family: var(--font-mono); font-size: 11px; color: var(--warm-grey); letter-spacing: 0.12em; }

.form-submit {
  width: 100%; background: var(--accent); color: var(--black);
  border: none; padding: 18px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; cursor: none; transition: background 0.3s;
}
.form-submit:hover { background: var(--accent-warm); }
.form-submit:disabled { background: var(--mid-grey); color: var(--warm-grey); cursor: not-allowed; }

.form-message {
  margin-top: 16px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; padding: 14px 16px; display: none;
}
.form-message.success { background: rgba(61,74,62,0.4); color: #8dbf8d; display: block; }
.form-message.error   { background: rgba(150,40,40,0.3); color: #f08080; display: block; }

/* ---- Filter buttons ---- */
.filter-btn {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--warm-grey); background: transparent;
  border: 1px solid var(--border); padding: 9px 20px; cursor: none; transition: all 0.3s;
}
.filter-btn:hover, .filter-btn.active { background: var(--accent); color: var(--black); border-color: var(--accent); }

/* ---- Newsletter ---- */
.newsletter-strip {
  background: rgba(200,184,154,0.06); border-top: 1px solid var(--border);
  padding: 80px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.nl-title { font-family: var(--font-display); font-size: 36px; font-weight: 300; }
.nl-title em { font-style: italic; color: var(--accent); }
.nl-sub { color: var(--warm-grey); margin-top: 12px; }
.nl-form { display: flex; }
.nl-input {
  flex: 1; background: transparent; border: 1px solid var(--border);
  color: var(--off-white); padding: 14px 20px;
  font-family: var(--font-sans); font-size: 15px; outline: none; transition: border-color 0.3s;
}
.nl-input:focus { border-color: var(--accent); }
.nl-input::placeholder { color: rgba(184,179,170,0.4); }
.nl-btn {
  background: var(--accent); color: var(--black); border: none; padding: 14px 28px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; cursor: none; transition: background 0.3s;
}
.nl-btn:hover { background: var(--accent-warm); }

/* ---- Footer ---- */
footer {
  padding: 60px 48px 40px; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px;
}
.footer-logo { font-family: var(--font-display); font-size: 28px; font-weight: 300; margin-bottom: 12px; }
.footer-logo em { font-style: italic; color: var(--accent); }
.footer-tagline { font-family: var(--font-mono); font-size: 11px; color: var(--warm-grey); letter-spacing: 0.15em; }
.footer-links { display: flex; gap: 32px; list-style: none; margin-bottom: 12px; justify-content: flex-end; }
.footer-links a {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--warm-grey); text-decoration: none; cursor: none; transition: color 0.3s;
}
.footer-links a:hover { color: var(--accent); }
.footer-copy { font-family: var(--font-mono); font-size: 10px; color: rgba(184,179,170,0.4); text-align: right; letter-spacing: 0.1em; }