/* ==========================================================================
   Specula One — Components
   Shared UI primitives for the public marketing pages (index.html, about.html):
   the CTA/button system, the tile-grid shell used by Philosophy and Process,
   and the accordion pattern used by Services. Depends on tokens.css and
   base.css being loaded first. report.html has its own separate CTA system
   in style.css and is not affected by this file.
   ========================================================================== */

/* ---------- CTA / button system ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease-elegant), background 0.2s ease, opacity 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: var(--ivory); }
.btn-dark:hover { background: var(--charcoal); }

.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid var(--charcoal-line);
  border-radius: 2px;
  color: var(--paper);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.2s ease, color 0.2s ease;
  margin-bottom: 32px;
}
.btn-ghost-dark:hover { border-color: var(--bronze-line); color: var(--bronze-soft); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-cta:hover { background: var(--ink); color: var(--ivory); }

.pkg-cta {
  text-align: center; font-size: 13px; font-weight: 500; padding: 13px 26px;
  border: 1px solid var(--ink); border-radius: 2px; color: var(--ink);
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.pkg-cta:hover { background: var(--ink); color: var(--ivory); }
.pkg-cta-solid { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.pkg-cta-solid:hover { background: var(--charcoal); }

/* ---------- tile-grid shell ----------
   Shared by Philosophy (.phil-item) and Process (.approach-step). Only the
   container mechanism is shared here — the two item styles have real,
   deliberate visual differences (padding, reveal animation, number
   treatment) and stay defined separately in phase2.css, unmerged.
   Resilient to a different item count via auto-fit: with exactly 4 items,
   this produces pixel-identical output to a hardcoded repeat(4, 1fr). */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--charcoal-line);
  border: 1px solid var(--charcoal-line);
  max-width: 1360px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .tile-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tile-grid { grid-template-columns: 1fr; }
}

/* ---------- accordion pattern ----------
   Native <details> for built-in keyboard + a11y support. Currently applied
   to Services; the same mechanism serves an FAQ or any other title/body
   list without changes. */

.service-list { border-top: 1px solid var(--charcoal-line); }

.service-row { border-bottom: 1px solid var(--charcoal-line); }
.service-row summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  cursor: pointer;
  transition: padding-left 0.3s var(--ease-elegant), background 0.3s ease;
}
.service-row summary::-webkit-details-marker { display: none; }
.service-row summary:hover,
.service-row summary:focus-visible { padding-left: 16px; background: var(--charcoal-soft); }

.service-name {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--paper);
}
.service-row summary:hover .service-name,
.service-row summary:focus-visible .service-name { color: var(--bronze-soft); }

.service-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--charcoal-line);
  color: var(--paper-dim);
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-elegant), border-color 0.2s ease;
}
.service-row[open] .service-toggle { transform: rotate(135deg); border-color: var(--bronze-line); color: var(--bronze-soft); }

.service-desc {
  display: block;
  padding: 0 4px 18px;
  color: var(--paper-dim);
  font-size: 15px;
  line-height: 1.7;
  max-width: 52ch;
}