/* =============================================================================
   VERENA RIZG — Component styles
   Buttons, cards, section-heading blocks. These three + token imports are the
   Phase 1 deliverable "three component templates."
   ============================================================================= */

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-medium) var(--ease-standard),
              color var(--duration-medium) var(--ease-standard),
              border-color var(--duration-medium) var(--ease-standard);
  line-height: 1;
}

.btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Primary — gold fill, charcoal text, gold-outline on hover */
.btn--primary {
  background-color: var(--color-gold);
  color: var(--color-dark);
  border-color: var(--color-gold);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: transparent;
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn--primary:active {
  background-color: transparent;
}

/* Secondary — same gold language (was outline → charcoal fill, now gold) */
.btn--secondary {
  background-color: var(--color-gold);
  color: var(--color-dark);
  border: 1px solid var(--color-gold);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: transparent;
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* Text link disguised as CTA (used inline in copy)
   Two variants tested on the Phase 4 homepage build — use ".btn--link" for
   persistent underline (default), ".btn--link.btn--link--hover" for
   hover-only underline. Phase 4 picks one per context. */
.btn--link {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: var(--fs-cta);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}

/* Default variant — persistent gold underline */
.btn--link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-gold);
  transform-origin: left center;
  transition: background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-medium) var(--ease-standard);
}

.btn--link:hover {
  color: var(--color-gold);
}

/* Hover-only variant — underline scales in from the left on hover.
   Apply alongside .btn--link: class="btn--link btn--link--hover" */
.btn--link.btn--link--hover::after {
  transform: scaleX(0);
}

.btn--link.btn--link--hover:hover::after,
.btn--link.btn--link--hover:focus-visible::after {
  transform: scaleX(1);
}

/* Arrow glyph inside CTAs (matches the "→" in brief copy) */
.btn .arrow {
  display: inline-block;
  margin-left: 0.5em;
  transition: transform var(--duration-medium) var(--ease-standard);
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* ---------- Section heading block ----------
   Three-part structure: kicker (optional), H2, lead (optional).
   Used at the top of every major section on homepage, cost-of-capable, speaking.
   ============================================================================= */

.section-heading {
  margin-bottom: 48px;
  max-width: var(--max-prose-width);
}

.section-heading--centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-heading__kicker {
  display: block;
  font-size: var(--fs-meta);
  color: var(--color-muted);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-heading__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  color: var(--color-dark);
  font-size: var(--fs-h2-desktop);
  line-height: var(--lh-display);
  margin: 0 0 16px 0;
}

.section-heading__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-subhead);
  color: var(--color-gold);
  font-size: var(--fs-h3-desktop);
  line-height: var(--lh-subhead);
  margin: 0;
}

.section-heading__rule {
  border: 0;
  height: 1px;
  background: var(--color-gold);
  width: 48px;
  margin: 0 0 24px 0;
}

.section-heading--centered .section-heading__rule {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Cards ---------- */

.card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 40px;
  border: 1px solid #EEE8DD;
  /* display:block instead of flex — weasyprint mis-calculates flex:1 + margin-top:auto
     on card__body/__cta, causing CTA to overlap body text. Native block flow puts
     title → subtitle → body → CTA in order with proper spacing. Grid row-height
     already matches card heights within a row. */
  display: block;
  box-sizing: border-box;
  transition: transform var(--duration-medium) var(--ease-standard),
              box-shadow var(--duration-medium) var(--ease-standard),
              border-color var(--duration-medium) var(--ease-standard);
}

/* Per Cowork preserve-then-enhance brief: no hover lifts, no shadows on
   cards. Production has none. Card hover stays subtle — gold accent only. */
.card:hover,
.card:focus-within {
  /* No transform, no shadow */
}

.card--featured {
  border-color: var(--color-gold);
  border-width: 1px;
  /* Replaced "0 2px 0 gold" drop with a flat 2px gold border-bottom for
     the same visual emphasis without using box-shadow as a divider. */
  border-bottom: 2px solid var(--color-gold);
}

.card--featured:hover,
.card--featured:focus-within {
  /* No transform, no shadow */
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3-desktop);
  font-weight: var(--weight-display-bold);
  font-style: normal;
  margin: 0 0 12px 0;
}

.card__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-gold);
  margin: 0 0 16px 0;
}

.card__body {
  margin-bottom: 28px;
}

.card__cta {
  /* natural placement after body */
}

/* ---------- Form primitives ---------- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-field label {
  font-size: var(--fs-meta);
  color: var(--color-muted);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
}

.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--font-body);
  font-size: var(--fs-body-desktop);
  padding: 12px 16px;
  border: 1px solid #D9D3C7;
  border-radius: var(--radius-card);
  background: var(--color-white);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--color-gold);
  outline: none;
}

/* ---------- Newsletter inline form ---------- */

.newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  align-items: stretch;
}

.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0;
  /* Match the primary button's vertical footprint exactly.
     Subtract 1px per side from padding to account for 2px border so the input
     and button align visually at the same height. */
  padding: calc(var(--btn-padding-y) - 1px) 18px;
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-card);
  background: var(--color-white);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body-mobile);
  line-height: 1;
  height: auto;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.newsletter-form input[type="email"]::placeholder {
  color: rgba(26, 26, 26, 0.55);
}

.newsletter-form input[type="email"]:focus {
  border-color: var(--color-gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(196, 150, 90, 0.25);
}

.newsletter-form .btn {
  flex-shrink: 0;
}

.newsletter-form__status {
  display: none;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  font-size: var(--fs-meta);
  text-align: center;
}

.newsletter-form__status--success {
  display: block;
  background: rgba(139, 106, 62, 0.15);
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}

.newsletter-form__status--error {
  display: block;
  background: rgba(200, 60, 60, 0.1);
  color: #C03C3C;
  border: 1px solid #C03C3C;
}

@media (max-width: 640px) {
  .newsletter-form {
    flex-direction: column;
    gap: 10px;
  }
  .newsletter-form input[type="email"] {
    font-size: 16px;  /* 16px prevents iOS zoom-on-focus */
  }
}