/**
 * Rosevine Technology Services — brand stylesheet
 * Editorial / boutique-consulting design system.
 * Google Fonts are loaded via <link rel="stylesheet"> in BaseLayout.tsx
 * (preconnect + link is faster than CSS @import).
 */

:root {
  --rts-plum: #5b0e2d;
  --rts-plum-deep: #3a0820;
  --rts-plum-bright: #7a1740;
  --rts-copper: #c6743c;
  --rts-copper-bright: #d98a52;
  --rts-ivory: #f5f1ea;
  --rts-paper: #fbf8f2;
  --rts-graphite: #1a1a1f;
  --rts-slate: #6b7280;
  --rts-rule: rgba(26, 26, 31, 0.12);
  --rts-rule-light: rgba(26, 26, 31, 0.08);
  --rts-rule-ivory: rgba(245, 241, 234, 0.16);

  --rts-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rts-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rts-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* AI Applied campaign */
  --rts-ai-grad: linear-gradient(135deg, #3a0820 0%, #1a1a1f 58%, #0d0d10 100%);
}

/* ── Base ───────────────────────────────────────────────────── */

body.rts {
  font-family: var(--rts-body);
  background: var(--rts-ivory);
  color: var(--rts-graphite);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.rts main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

body.rts ::selection {
  background: var(--rts-plum);
  color: var(--rts-ivory);
}

body.rts a:focus-visible,
body.rts button:focus-visible,
body.rts input:focus-visible,
body.rts textarea:focus-visible,
body.rts select:focus-visible {
  outline: 2px solid var(--rts-copper);
  outline-offset: 3px;
}

/* ── Mobile overflow guard ──────────────────────────────────── */
/* Phones were getting a stray horizontal scrollbar: large display
   type and the 12-column grids could push a track or an unbreakable
   word a few pixels past the viewport edge, so a vertical swipe would
   sometimes pan sideways. `overflow-x: clip` removes that sideways
   scroll without creating a scroll container — so the sticky header
   keeps working (plain `overflow: hidden` would break it). */
html,
body.rts {
  overflow-x: clip;
  max-width: 100%;
}

/* Media never widens the layout past its column. */
body.rts img,
body.rts svg {
  max-width: 100%;
  height: auto;
}

/* The editorial layout is built on 12-track grids, tagged `.rts-grid`.
   Their grid children default to `min-width: auto`, which refuses to
   shrink a track below its content's intrinsic width — a long word or a
   large display heading then blows the track out past the viewport.
   Letting the children shrink lets the text wrap instead, which stops
   the overflow at its source. */
body.rts .rts-grid > * {
  min-width: 0;
}

@media (max-width: 767px) {
  /* On a phone the 12 columns collapse to zero (minmax(0, 1fr)), but the
     11 *column gaps* between the tracks are a fixed size that can't shrink
     — at up to 2.5rem each they add up to more than the viewport, so the
     grid stays wider than the screen and you get the sideways scroll.
     Every child already spans the full width and stacks on mobile, so the
     horizontal gap buys nothing here: zero it out. The row-gap (vertical
     rhythm between the stacked rows) is left untouched. */
  body.rts .rts-grid {
    column-gap: 0 !important;
  }
}

/* ── Typography ─────────────────────────────────────────────── */

.rts-display {
  font-family: var(--rts-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.96;
  color: var(--rts-graphite);
}

.rts-display-italic {
  font-family: var(--rts-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.rts-mono {
  font-family: var(--rts-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 500;
}

.rts-eyebrow {
  font-family: var(--rts-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rts-copper);
}

.rts-eyebrow-dark {
  color: var(--rts-plum);
}

.rts-lead {
  font-family: var(--rts-body);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.6vw, 1.625rem);
  line-height: 1.45;
  color: var(--rts-graphite);
  letter-spacing: -0.011em;
}

.rts-body {
  font-family: var(--rts-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--rts-graphite);
}

.rts-body-muted {
  color: var(--rts-slate);
}

/* ── Layout / hairlines ─────────────────────────────────────── */

.rts-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 768px) {
  .rts-container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.rts-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .rts-section {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

.rts-rule {
  border: 0;
  border-top: 1px solid var(--rts-rule);
  margin: 0;
}

.rts-rule-ivory {
  border-top-color: var(--rts-rule-ivory);
}

.rts-divider {
  border-top: 1px solid var(--rts-rule);
}

/* ── Buttons / links ────────────────────────────────────────── */

.rts-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  font-family: var(--rts-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

.rts-btn-primary {
  background: var(--rts-plum);
  color: var(--rts-ivory);
}

.rts-btn-primary:hover {
  background: var(--rts-plum-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -16px rgba(91, 14, 45, 0.6);
}

.rts-btn-ghost {
  background: transparent;
  color: var(--rts-graphite);
  border-color: var(--rts-rule);
}

.rts-btn-ghost:hover {
  border-color: var(--rts-graphite);
}

.rts-btn-on-plum {
  background: var(--rts-ivory);
  color: var(--rts-plum);
}

.rts-btn-on-plum:hover {
  background: var(--rts-copper);
  color: var(--rts-ivory);
}

.rts-link {
  color: var(--rts-plum);
  text-decoration: none;
  background-image: linear-gradient(var(--rts-copper), var(--rts-copper));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 0.25s ease;
}

.rts-link:hover {
  background-size: 100% 2px;
}

.rts-arrow {
  display: inline-block;
  transform: translateY(1px);
  transition: transform 0.2s ease;
}

a:hover .rts-arrow,
.rts-btn:hover .rts-arrow {
  transform: translate(2px, 1px);
}

/* ── Form ───────────────────────────────────────────────────── */

.rts-input,
.rts-textarea,
.rts-select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rts-rule);
  padding: 0.875rem 0;
  font-family: var(--rts-body);
  font-size: 1rem;
  color: var(--rts-graphite);
  transition: border-color 0.2s ease;
}

.rts-input:focus,
.rts-textarea:focus,
.rts-select:focus {
  outline: none;
  border-bottom-color: var(--rts-plum);
}

.rts-textarea {
  min-height: 7rem;
  resize: vertical;
}

.rts-label {
  font-family: var(--rts-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rts-slate);
}

/* ── Cable / illustration helpers ───────────────────────────── */

.rts-cable-trace {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Header / footer ────────────────────────────────────────── */

.rts-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245, 241, 234, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rts-rule-light);
}

.rts-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.rts-nav-link {
  font-family: var(--rts-body);
  font-size: 0.92rem;
  color: var(--rts-graphite);
  text-decoration: none;
  position: relative;
  padding: 0.25rem 0;
}

.rts-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--rts-copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.rts-nav-link:hover::after,
.rts-nav-link[aria-current='page']::after {
  transform: scaleX(1);
}

.rts-footer {
  background: var(--rts-graphite);
  color: var(--rts-ivory);
  margin-top: 0;
}

.rts-footer a {
  color: var(--rts-ivory);
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.2s ease;
}

.rts-footer a:hover {
  opacity: 1;
}

/* ── Logo wall ──────────────────────────────────────────────── */

.rts-logo-mark {
  font-family: var(--rts-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--rts-graphite);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.rts-logo-mark:hover {
  opacity: 1;
}

/* ── Numbered list (services) ───────────────────────────────── */

.rts-numbered {
  counter-reset: rts;
  list-style: none;
  padding: 0;
  margin: 0;
}

.rts-numbered > li {
  counter-increment: rts;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rts-rule);
}

.rts-numbered > li:last-child {
  border-bottom: 1px solid var(--rts-rule);
}

.rts-numbered > li::before {
  content: counter(rts, decimal-leading-zero);
  font-family: var(--rts-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--rts-copper);
  padding-top: 0.4rem;
}

/* ── Pill ───────────────────────────────────────────────────── */

.rts-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--rts-rule);
  border-radius: 999px;
  font-family: var(--rts-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rts-graphite);
  background: var(--rts-paper);
}

.rts-pill-copper {
  border-color: var(--rts-copper);
  color: var(--rts-copper);
}

.rts-pill-plum {
  background: var(--rts-plum);
  border-color: var(--rts-plum);
  color: var(--rts-ivory);
}

/* ── AI Applied campaign ────────────────────────────────────── */

.rts-ai-ground {
  background: var(--rts-ai-grad);
  color: var(--rts-ivory);
}

.rts-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--rts-copper);
  border-radius: 999px;
  font-family: var(--rts-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rts-copper-bright);
  background: transparent;
}

.rts-ai-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--rts-copper-bright);
  box-shadow: 0 0 0 3px rgba(217, 138, 82, 0.25);
}

/* Numbered list on a dark ground: ivory hairlines instead of graphite. */
.rts-numbered-ivory > li {
  border-top-color: var(--rts-rule-ivory);
}

.rts-numbered-ivory > li:last-child {
  border-bottom-color: var(--rts-rule-ivory);
}

/* ── Animations ─────────────────────────────────────────────── */

@keyframes rts-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rts-fade-up {
  animation: rts-fade-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}