/* ==========================================================================
   COMPONENTS
   Buttons, action rows, dock, rules, placeholders — the reusable pieces.
   0–2px corner radius everywhere. No pills. No cards. No glassmorphism.
   ========================================================================== */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 52px;
  padding: 0 var(--space-24);
  border-radius: var(--radius-max);
  border: 1px solid transparent;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              opacity var(--motion-fast) var(--ease-standard);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-red);
  color: var(--color-ink);
  border-color: var(--color-red);
}
.btn--primary:hover { background: rgba(255, 49, 49, 0.9); }
.btn--primary:active { background: rgba(255, 49, 49, 0.85); }
.btn--primary[disabled] {
  background: rgba(240, 238, 233, 0.25);
  border-color: transparent;
  color: rgba(21, 25, 28, 0.5);
  pointer-events: none;
}

.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: rgba(240, 238, 233, 0.5);
}
.btn--secondary:hover { border-color: var(--color-warm-white); }
.btn--secondary:active { border-color: var(--color-red); }
.btn--secondary[disabled] {
  color: rgba(240, 238, 233, 0.25);
  border-color: rgba(240, 238, 233, 0.15);
  pointer-events: none;
}

.btn--full { width: 100%; }

/* ---- Text action (quiet inline links: Email / Instagram / LinkedIn / Share) */

.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-24);
}

.action-row__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text-primary);
  transition: color var(--motion-fast) var(--ease-standard);
}
.action-row__item:hover,
.action-row__item:active { color: var(--color-red); }

/* ---- Icon variant (Hero quick actions only — Phase 8.5A) -----------------
   `.action-row--icons` scopes this to the Hero's row specifically: the
   Contact section reuses the plain `.hero__quiet-row.action-row` classes
   for its own (still text-label) Instagram/LinkedIn/Share row, so sizing
   and icon rules live under this modifier, not on `.action-row__item`
   itself, to leave Contact's row untouched. */
.action-row--icons .action-row__item {
  position: relative;
  min-width: 44px;
  justify-content: center;
}

.action-row--icons .icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Transient "Link copied" confirmation (clipboard fallback only — the
   Web Share API path never shows it). Replaces the old approach of
   swapping the Share control's own textContent, which would have
   destroyed its icon markup on first use. Visible only in this state,
   consistent with "no text labels visible in the normal state". */
.action-row__feedback {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font-family: var(--font-interface);
  font-weight: 500;
  font-size: var(--type-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: var(--rule-weight) solid var(--color-rule);
  padding: var(--space-4) var(--space-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.action-row__feedback.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .action-row__feedback { transition: none; }
}

/* Placeholder links with no config value yet (Phase 5.16 item 5:
   "exact list of contact/config values still required"). */
.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---- Full contact rows (Contact section) --------------------------------- */

.contact-list {
  border-top: var(--rule-weight) solid var(--color-rule);
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 56px;
  padding: var(--space-16) 0;
  border-bottom: var(--rule-weight) solid var(--color-rule);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.contact-row:hover,
.contact-row:active {
  background: rgba(240, 238, 233, 0.04);
}
.contact-row__label {
  color: var(--color-text-primary);
}
.contact-row__value {
  color: var(--color-text-secondary);
}

/* ---- Rules --------------------------------------------------------------- */

.rule {
  border: none;
  border-top: var(--rule-weight) solid var(--color-rule);
  margin: 0;
}
[data-bg="red"] .rule {
  border-top-color: var(--color-rule-on-red);
}

/* ---- Media placeholder (portrait & project imagery) ----------------------
   Flat field + hairline frame + centred micro-label. Never a spinner,
   never a generated face/image. */

.media-placeholder {
  position: relative;
  width: 100%;
  background: var(--color-bg-primary);
  border: var(--rule-weight) solid var(--color-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-placeholder__label {
  font-family: var(--font-interface);
  font-weight: 500;
  font-size: var(--type-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  text-align: center;
  padding: var(--space-16);
}

.media-placeholder img,
.media-placeholder video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Aspect ratio helpers (object exists so real assets drop in with no
   layout shift and no template rewrite — Phase 4 §07). */
.ar-4-5   { aspect-ratio: 4 / 5; }
.ar-4-3   { aspect-ratio: 4 / 3; }
.ar-1-1   { aspect-ratio: 1 / 1; }
.ar-3-4   { aspect-ratio: 3 / 4; }

/* ---- Quarter-circle mask (the ONE recurring symbol-derived device) -------
   Used only on project-sheet hero images (Phase 2 §G / Phase 4 motion).
   The mask shape is a single petal quadrant, applied via clip-path,
   animated from a collapsed state to full reveal. */

.mask-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--motion-image-reveal) var(--ease-image);
}
.mask-reveal.is-revealed {
  clip-path: inset(0 0 0 0);
}

/* ---- Generic scroll-reveal (straight-edge mask, not opacity fade) -------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--motion-reveal) var(--ease-reveal),
              transform var(--motion-reveal) var(--ease-reveal);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Contextual mobile action dock ---------------------------------------- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  height: calc(var(--dock-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-bg-primary); /* SOLID — no opacity, no blur (Phase 4 Correction 05) */
  border-top: var(--rule-weight) solid var(--color-rule);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-left: var(--margin-compact);
  padding-right: var(--margin-compact);
  transform: translateY(100%);
  transition: transform var(--motion-dock) var(--ease-standard);
}

.dock.is-visible {
  transform: translateY(0);
}

.dock__btn {
  flex: 1 1 0;
  min-height: 44px;
  height: 44px;
}

@media (min-width: 960px) {
  /* Dock is a mobile-only pattern (Phase 4 §10) — hidden at small-desktop+. */
  .dock { display: none; }
}