/* =========================================================================
   Komponenter
   ========================================================================= */

/* ------------------------------------------------------------------ *
 * Knappar. Nästan raka hörn, tunn ram, lugn rörelse.
 * ------------------------------------------------------------------ */

.btn {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  --btn-border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover, var(--accent));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 460ms var(--ease-out);
}
.btn:hover::before { transform: scaleY(1); }

.btn__arrow { display: inline-block; transition: transform 460ms var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
  --btn-bg: var(--brass-600);
  --btn-fg: #fff;
  --btn-hover: var(--brass-700);
}
.btn--primary:hover { color: #fff; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-border: var(--line-strong);
  --btn-hover: var(--fg);
}
.btn--ghost:hover { color: var(--bg); border-color: transparent; }

.btn--solid {
  --btn-bg: var(--sand-50);
  --btn-fg: var(--char-900);
  --btn-hover: var(--brass-400);
}
.btn--solid:hover { color: var(--char-900); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.2rem 2.3rem; font-size: 1rem; }
.btn--sm { padding: 0.7rem 1.2rem; font-size: 0.8125rem; }

@media (prefers-reduced-motion: reduce) {
  .btn::before, .btn__arrow { transition: none; }
}

/* Textlänk med underlinje som dras undan vid hover */
.link-ul {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 3px;
}
.link-ul::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 480ms var(--ease-out);
}
.link-ul:hover::after { transform: scaleX(0); }

/* ------------------------------------------------------------------ *
 * Märkning av demoobjekt. Får aldrig gå att missa att det är ett koncept.
 * ------------------------------------------------------------------ */

.demo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-xs);
  border: 1px solid currentColor;
  color: var(--fg-subtle);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  background: transparent;
}
.demo-tag--overlay {
  /* Märket ligger över en hero som rör sig. En backdrop-filter hade
     räknats om varje bildruta; en tätare bakgrund gör samma nytta. */
  background: rgba(20, 19, 18, .82);
  border-color: rgba(255, 255, 255, .34);
  color: rgba(255, 255, 255, .92);
}

/* Tunt band överst på demosidan som förklarar vad besökaren ser */
.demo-bar {
  position: relative;
  z-index: 60;
  background: var(--char-900);
  color: rgba(255, 255, 255, .8);
  font-size: 0.8125rem;
  text-align: center;
  padding: 0.7rem var(--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.demo-bar strong { color: #fff; font-weight: 600; }
.demo-bar a { color: var(--brass-400); text-underline-offset: 2px; }

/* En knapp utan href är en platshållare — den finns för att visa hur
   layouten ser ut på ett skarpt objekt, men leder ingenstans. Behåll
   utseendet, men låt inte pekaren lova något som inte händer. */
a.btn:not([href]) { cursor: default; }

/* På riktigt smala skärmar spränger nowrap-knappar layouten. Låt dem
   radbryta i stället — en knapp på två rader är bättre än en sida som
   går att dra i sidled. */
@media (max-width: 26rem) {
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
    padding-inline: 1.35rem;
  }
  .btn--lg { padding: 1rem 1.4rem; font-size: 0.9375rem; }
  .btn__arrow { display: none; }
}