/* =============================================================
   COMPONENTS
   Reusable pieces shared across sections: buttons, tags,
   metadata and the base card. Each exists exactly once.
   ============================================================= */

/* --- Buttons ----------------------------------------------- */
/* One button element, differentiated by modifier classes.
   .btn is always an <a> or <button>. */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7em 1.25em;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* Primary — carbon, for the single most important action. The accent
   is kept special and is never used to fill a large element. */
.btn--primary {
  --btn-bg: var(--color-text);
  --btn-fg: var(--color-bg);
  --btn-border: var(--color-text);
}

.btn--primary:hover {
  --btn-bg: #2E2E2A;
  --btn-border: #2E2E2A;
}

/* Secondary — quiet outline for supporting actions */
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-border: var(--color-border-strong);
}

.btn--secondary:hover {
  --btn-bg: var(--color-hover);
  --btn-border: var(--color-text);
}

/* Accent — reserved for the single most-wanted action in the nav
   (Resume). The one filled-accent element on the page. */
.btn--accent {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
  --btn-border: var(--color-accent);
}

.btn--accent:hover {
  --btn-bg: var(--color-accent-hover);
  --btn-border: var(--color-accent-hover);
}

/* Icon that trails button text (e.g. arrow) — stays put on hover;
   see the Resume button hover in nav.css for the interaction this
   whole file follows: tone change only, nothing moves. */
.btn__icon {
  width: 1em;
  height: 1em;
}

/* --- Text link --------------------------------------------- */
/* Inline link with an underline that animates in on hover */
.link {
  color: var(--color-text);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
  padding-bottom: 1px;
}

.link:hover {
  color: var(--color-accent);
  background-size: 100% 1.5px;
}

/* --- Tags -------------------------------------------------- */
/* Small linen pill for project type / technologies */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.7em;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- Metadata ---------------------------------------------- */
/* Role · Company · Timeline — dim, small, dot-separated */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.meta__item {
  display: inline-flex;
  align-items: center;
}

/* A subtle dot between metadata items */
.meta__item + .meta__item::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  margin-right: var(--space-3);
  opacity: 0.5;
}

/* Numbered index used to order featured projects (01, 02) */
.index-number {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* --- Card -------------------------------------------------- */
/* Base surface for cards. Section CSS composes on top of this. */
.card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

/* Media frame inside a card — holds a screenshot at a fixed
   aspect so cards stay aligned regardless of image height */
.card__media {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-soft);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Placeholder shown where a real asset is not yet available */
.media-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--color-surface-soft),
      var(--color-surface-soft) 12px,
      var(--color-surface) 12px,
      var(--color-surface) 24px
    );
}