/* server/public/styles/components.css
 * Reusable primitives: buttons, section markers, iPhone frames, links.
 */

/* ── Section wrapper ── */

.section {
  position: relative;
  padding: var(--s-3xl) var(--s-m);
}

.section--wide { max-width: var(--w-wide); margin-inline: auto; }
.section--text { max-width: var(--w-text); margin-inline: auto; }
.section--full { max-width: none; width: 100vw; }
.section--dark {
  background: var(--ink);
  color: var(--paper-on-ink);
}

.section-marker {
  display: block;
  font-size: var(--t-label-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: var(--s-xl);
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Pill button ── */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2xs);
  min-height: 56px;
  padding: 0 var(--s-l);
  border-radius: 9999px;
  background: var(--brand-gradient);
  color: var(--paper);
  font-size: var(--t-body-l-size);
  font-weight: 600;
  transition: transform var(--dur-quick) var(--ease-spring),
              box-shadow var(--dur-quick) var(--ease-out-expo);
  will-change: transform;
}

.btn-pill:hover { transform: scale(1.02); box-shadow: 0 8px 32px rgba(14, 18, 46, 0.28); }
.btn-pill:active { transform: scale(0.98); }

.btn-pill--large { min-height: 64px; padding: 0 var(--s-xl); }

.btn-pill--outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  min-height: 40px;
  padding: 0 var(--s-m);
  font-size: var(--t-body-m-size);
  transition: background var(--dur-quick) var(--ease-out-expo),
              color var(--dur-quick) var(--ease-out-expo),
              border-color var(--dur-quick) var(--ease-out-expo);
}
.btn-pill--outline:hover {
  background: var(--brand-gradient);
  color: var(--paper);
  border-color: transparent;
}

/* (.iphone-frame utility was dropped — sections use their own wrappers and
   rely on natural PNG aspect ratios via width: 100%; height: auto.) */

/* ── Responsive visibility utilities ── */
@media (max-width: 720px) {
  .u-hide-mobile { display: none; }
}

/* ── Text link with gradient underline wipe ── */
.link-gradient {
  position: relative;
  display: inline-block;
}
.link-gradient::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-quick) var(--ease-out-expo);
}
.link-gradient:hover::after { transform: scaleX(1); }