/* styles.css */

/* ===============================
   Tokens
=============================== */
:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #4a4a4a;
  --muted-2: #6b6b6b;

  /* LinkedIn icon colour from mock */
  --icon-muted: #8a8a8a;

  --container: 1280px;

  --radius-lg: 16px;
  --radius-md: 12px;

  /* Primary button */
  --btn-bg: #111111;
  --btn-bg-hover: #1a1a1a;
  --btn-bg-active: #0a0a0a;
  --btn-text: #ffffff;

  /* Ghost surfaces */
  --ghost-hover: #f2f2f2;
  --ghost-active: #e6e6e6;
  --ghost-focus: #eaeaea;

  /* Interaction */
  --lift-hover: -1px;
  --lift-active: 0px;

  /* Icon sizing */
  --icon-size: 28px;

  /* Image sizing (desktop grows to the RIGHT from a left anchor) */
  --image-min: 560px;
  --image-max: 720px; /* tweak this if you want a bigger desktop image */

  /* Fixed type sizes */
  --brand-size-desktop: 56px; /* "cate wilcox" */
  --brand-size-small: 40px;

  --title-size-desktop: 36px; /* "designer - maker - human" */
  --title-size-small: 24px;

  /* Stack breakpoint */
  --stack-bp: 980px;
}

/* ===============================
   Base / Reset
=============================== */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

/* ===============================
   Layout
=============================== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 48px);
}

.site-header {
  padding-top: clamp(20px, 3vw, 40px);
}

.brand {
  display: inline-block;
  font-weight: 900; /* black */
  font-size: var(--brand-size-desktop);
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
}

/* ===============================
   Hero
=============================== */
.hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 6vw, 96px);
  align-items: start; 
  padding: clamp(32px, 8vw, 96px) 0;
}

/* ✅ Smooth width behavior: no breakpoint jump from 520 -> 640 */
.hero__content {
  max-width: 640px; /* stable across desktop + tablet */
}

.hero__title {
  margin: 0 0 16px;
  font-weight: 700; /* always bold */
  font-size: var(--title-size-desktop); /* fixed desktop size */
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.hero__body {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--muted);
}

.hero__body--muted {
  color: var(--muted-2);
  margin-bottom: 24px;
}

/* ===============================
   CTAs
=============================== */
.cta-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===============================
   Buttons (shared interaction language)
=============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 48px; /* desktop/tablet default: wider */
  border-radius: var(--radius-md);

  text-decoration: none;
  font-size: 14px;
  font-weight: 600;

  transition: background 120ms ease, transform 120ms ease;
}

/* Primary */
.btn {
  background: var(--btn-bg);
  color: var(--btn-text);
}

.btn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(var(--lift-hover));
}

.btn:active {
  background: var(--btn-bg-active);
  transform: translateY(var(--lift-active));
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.18);
}

/* Icon ghost */
.btn--icon {
  background: transparent;
  color: var(--icon-muted);
  padding: 12px; /* keep compact */
}

.btn--icon:hover {
  background: var(--ghost-hover);
  transform: translateY(var(--lift-hover));
}

.btn--icon:active {
  background: var(--ghost-active);
  transform: translateY(var(--lift-active));
}

.btn--icon:focus-visible {
  outline: none;
  background: var(--ghost-focus);
  box-shadow: none;
}

.btn--icon svg {
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  fill: currentColor;
}

/* ===============================
   About-me image
=============================== */
.about-me__media {
  display: flex;

  /* ✅ Left-anchored so when image grows, it grows to the RIGHT */
  justify-content: flex-start;
}

.about-me__image {
  /* ✅ Grow to the RIGHT as viewport grows (left edge stays anchored) */
  width: clamp(var(--image-min), 46vw, var(--image-max));
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ===============================
   Tablet + below: stacked like mobile
   - image above text
   - image full width
   - fixed smaller type
   - PRIMARY button behaves like mobile
=============================== */
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .about-me__media {
    order: -1; /* image above text */
  }

  .about-me__image {
    width: 100%;
  }

  /* Fixed tablet/mobile typography */
  .brand {
    font-size: var(--brand-size-small);
  }

  .hero__title {
    font-size: var(--title-size-small);
  }

  /* ✅ Tablet primary button behaves like mobile */
  .btn:not(.btn--icon) {
    width: 100%;
    padding: 14px 24px;
    border-radius: 14px;
  }

  .btn--icon {
    padding: 14px;
  }
}

/* ===============================
   Mobile
=============================== */
@media (max-width: 520px) {
  .btn:not(.btn--icon) {
    width: 100%;
    padding: 14px 24px;
    border-radius: 14px;
  }

  .btn--icon {
    width: auto;
    padding: 14px;
  }

  .about-me__image {
    border-radius: 14px;
  }
}