/* =============================================================
   PARASTUDIO — UI COMPONENTS
   /css/components.css

   Reusable UI components. Requires /css/theme.css and
   /css/typography.css loaded before this file.

   HOW TO ADD A COMPONENT TO THE STYLEGUIDE
   -----------------------------------------
   1. Write your CSS below (any section that fits, or a new one)
   2. Add ONE annotation comment directly above the first rule:
      /* @sg-component: .my-class | Label | Description | <preview HTML> */
   3. Reload /styleguide.html — it appears automatically.

   ANNOTATION FORMAT
   /* @sg-component: selector | Label | Description | preview HTML */
   - selector  : main class (e.g. .btn--primary)
   - label     : human name shown in the guide
   - description: short usage note
   - preview   : raw HTML injected into the live specimen cell
   ============================================================= */


/* -------------------------------------------------------------
   BUTTONS
   .btn           — base class, always required
   .btn--primary  — filled gradient pill (main CTAs)
   .btn--outline  — bordered transparent variant
   ------------------------------------------------------------- */

/* @sg-component: .btn | Buttons | Use .btn as base + one variant modifier. Primary = gradient fill. Outline = bordered. | <div class="sg-preview-row"><a href="#" class="btn btn--primary">View Work</a><a href="#" class="btn btn--outline">Get in Touch</a></div> */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: opacity var(--transition), transform var(--transition),
              border-color var(--transition), background var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--gradient);
  color: #fff;
}
.btn--primary:hover { opacity: 0.88; color: #fff; }

.btn--outline {
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  background: transparent;
}
.btn--outline:hover {
  border-color: var(--color-gold);
  background: var(--color-gold-subtle);
  color: var(--color-text);
}


/* -------------------------------------------------------------
   WORK CARD
   ------------------------------------------------------------- */

/* @sg-component: .work-card | Work Card | Project and case study card. Hover lifts and reveals gradient top bar. | <article class="work-card"><span class="work-card-tag">Product Design</span><h3 class="work-card-title">Enterprise Financial UX</h3><p class="work-card-desc">Senior UX design engagement spanning research, prototyping, and design system delivery.</p><span class="work-card-cta">Case study coming soon →</span></article> */
.work-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.work-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient);
  opacity: 0;
  transition: opacity var(--transition);
}
.work-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.work-card:hover::before { opacity: 1; }

.work-card-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.work-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}
.work-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 100%;
}
.work-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-light);
  letter-spacing: 0.04em;
  transition: color var(--transition);
}
.work-card:hover .work-card-cta { color: var(--color-gold); }

/* Work note — dashed callout below a card grid */
.work-note {
  margin-top: var(--space-10);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.work-note p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-inline: auto;
}
.work-note strong { color: var(--color-text); font-weight: var(--weight-semibold); }

/* Work grid — responsive 1→2→3 col layout */
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px)  { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }


/* -------------------------------------------------------------
   LINK PILLS
   Social / external link badges with optional icons.
   ------------------------------------------------------------- */

/* @sg-component: .link-pill | Link Pill | Bordered pill badge for social and external links. | <div class="link-pills"><a href="#" class="link-pill"><svg focusable="false" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7H10v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>LinkedIn</a><a href="#" class="link-pill"><svg focusable="false" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>Email</a></div> */
.link-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.link-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  transition: color var(--transition), border-color var(--transition),
              background var(--transition), transform var(--transition);
}
.link-pill:hover {
  color: var(--color-text);
  border-color: var(--color-gold);
  background: var(--color-gold-subtle);
  transform: translateY(-1px);
}
.link-pill svg { flex-shrink: 0; }


/* -------------------------------------------------------------
   EXPERTISE LIST
   Bulleted list with gradient dot markers.
   ------------------------------------------------------------- */

/* @sg-component: .expertise-list | Expertise List | Tag-style list items with gradient bullet markers. | <div><span class="expertise-label">Expertise</span><ul class="expertise-list"><li>UX Design &amp; Strategy</li><li>Design Systems</li><li>Interaction Design</li><li>Generative &amp; Plotter Art</li></ul></div> */
.expertise-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: var(--space-5);
  display: block;
}
.expertise-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.expertise-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), color var(--transition);
}
.expertise-list li:hover {
  border-color: var(--color-gold);
  color: var(--color-text);
}
.expertise-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gradient);
  flex-shrink: 0;
}


/* -------------------------------------------------------------
   FORM ELEMENTS
   .form-group   — label + input wrapper
   .form-label   — field label
   .form-input   — text / email / tel inputs
   .form-textarea— multi-line textarea
   .form-submit  — gradient submit button
   .form-success — post-submit confirmation state
   ------------------------------------------------------------- */

/* @sg-component: .form-input | Form Input | Labeled text input field. Wrap in .form-group. | <div class="form-group"><label class="form-label" for="sg-name">Your name</label><input class="form-input" type="text" id="sg-name" placeholder="Jane Smith"></div> */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
.form-input,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  -webkit-appearance: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-light); }
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-subtle);
}
.form-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

/* @sg-component: .form-textarea | Textarea | Multi-line text input. Use inside .form-group. | <div class="form-group"><label class="form-label" for="sg-msg">Message</label><textarea class="form-textarea" id="sg-msg" placeholder="Tell me about your project…"></textarea></div> */

/* @sg-component: .form-submit | Submit Button | Gradient pill submit button. Sits outside .form-group. | <button type="button" class="form-submit">Send message →</button> */
.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  background: var(--gradient);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity var(--transition), transform var(--transition);
}
.form-submit:hover { opacity: 0.88; transform: translateY(-1px); }
.form-submit:active { transform: translateY(0); }

/* @sg-component: .form-success | Form Success | Shown after successful form submission. Hide by default. | <div class="form-success" style="display:block"><p>Thanks for reaching out — I'll be in touch soon.</p></div> */
.form-success {
  display: none;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.form-success p { color: var(--color-text-muted); font-size: var(--text-base); max-width: 100%; }


/* -------------------------------------------------------------
   SCROLLING MARQUEE
   Auto-scrolling text ticker. Pause on hover.
   ------------------------------------------------------------- */

/* @sg-component: .marquee-wrap | Scrolling Marquee | Full-width auto-scrolling text ticker. Duplicate .marquee-track content for seamless loop. | <div class="marquee-wrap"><div class="marquee-track"><span>UX Design</span><span class="marquee-dot"></span><span>Product Strategy</span><span class="marquee-dot"></span><span>Design Systems</span><span class="marquee-dot"></span><span>Interface Design</span><span class="marquee-dot"></span><span>UX Design</span><span class="marquee-dot"></span><span>Product Strategy</span><span class="marquee-dot"></span><span>Design Systems</span><span class="marquee-dot"></span><span>Interface Design</span><span class="marquee-dot"></span></div></div> */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-4);
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  animation: marqueeScroll 22s linear infinite;
  width: max-content;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-light);
  flex-shrink: 0;
}
.marquee-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gradient);
  flex-shrink: 0;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* -------------------------------------------------------------
   SECTION HEADER PATTERN
   Eyebrow label above a display heading.
   ------------------------------------------------------------- */

/* @sg-component: .section-label | Section Header | Eyebrow label + display heading pattern used in every page section. | <div><p class="section-label">Selected Work</p><h2 class="section-title">Projects &amp; Case Studies</h2></div> */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: var(--space-6);
}
.section-title {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--space-8);
  line-height: 1.1;
}
.section {
  padding-block: clamp(var(--space-16), 10vw, var(--space-24));
  border-top: 1px solid var(--color-border);
}


/* -------------------------------------------------------------
   PREVIEW-ONLY HELPERS
   These classes are only used inside styleguide specimens.
   Not intended for production use.
   ------------------------------------------------------------- */
.sg-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}