/* ==========================================================================
   Presentation page -- pairs with apps/profile/templates/profile/home.html
   ==========================================================================
   Also defines the shared `.button`, `.tag` and `.arrow-link` roles. They live
   here because this is currently their only consumer; the moment a second page
   uses one, move it to its own component stylesheet rather than importing this.
*/

/* --- hero ---------------------------------------------------------------- */

.hero {
  border-bottom: var(--hairline);
  background:
    radial-gradient(60ch 40ch at 12% -10%, var(--accent-soft), transparent 70%),
    var(--bg);
}

.hero__inner {
  padding-block: var(--s-9) var(--s-8);
  max-width: var(--page-max);
}

.hero__name {
  margin-top: var(--s-3);
  font-size: var(--fs-3xl);
  /* Long names must not overflow on narrow screens; the scale's top step is
     large by design. */
  font-size: clamp(var(--fs-2xl), 8vw, var(--fs-3xl));
}

.hero__lead {
  margin-top: var(--s-5);
  /* Tighter than --measure on purpose: the design sets the hero paragraph shorter
     than running prose so it reads as a statement rather than as body copy. */
  max-width: 52ch;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* --- buttons -------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 9px var(--s-4);       /* control padding, not a spacing step */
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 560;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.button--lg {
  padding: 12px var(--s-5);
  font-size: var(--fs-base);
}

.button:hover {
  color: var(--text);
  border-color: var(--text-faint);
  background: var(--surface-2);
}

/* The single accent-filled element on this screen. Adding a second one is a
   design change, not a CSS change -- the accent budget is roughly one filled
   element per viewport. */
.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.button--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}

/* --- sections ------------------------------------------------------------- */

.section { padding-block: var(--s-8); }
.section + .section { border-top: var(--hairline); }

.section__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--s-5);
}

.arrow-link {
  font-weight: 560;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
}

.arrow-link:hover { border-bottom-color: currentColor; }

/* --- skills --------------------------------------------------------------- */

.skills {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.skills__group dd { margin: var(--s-3) 0 0; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
}

.tag {
  padding: var(--s-1) var(--s-3);
  border: var(--hairline);
  border-radius: var(--r-full);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* --- downloads ------------------------------------------------------------ */

.downloads {
  display: grid;
  gap: var(--s-3);
  list-style: none;
  max-width: var(--measure);
}

.download {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.download:hover {
  color: var(--text);
  border-color: var(--accent-line);
  background: var(--surface-2);
}

.download__label { font-weight: 560; }

/* --- contact -------------------------------------------------------------- */

.contact {
  display: grid;
  gap: var(--s-4);
  list-style: none;
  max-width: var(--measure);
}

.contact li {
  display: grid;
  gap: var(--s-1);
  padding-bottom: var(--s-4);
  border-bottom: var(--hairline);
}

.contact li:last-child { border-bottom: 0; }

/* Long URLs must wrap rather than force the page to scroll sideways. */
.contact a { overflow-wrap: anywhere; }

@media (min-width: 40rem) {
  .contact li {
    grid-template-columns: 10rem 1fr;
    align-items: baseline;
    gap: var(--s-4);
  }
}