/* 06 — HERO */

.c-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-12) var(--space-16);
  background-color: var(--c-bg-3);

  --hero-line: color-mix(in srgb, var(--c-accent-1) 14%, transparent);
}

.c-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--hero-line) 0 0),
    linear-gradient(var(--hero-line) 0 0),
    linear-gradient(var(--hero-line) 0 0),
    linear-gradient(var(--hero-line) 0 0);
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-position: 33.333% 0, 66.666% 0, 0 33.333%, 0 66.666%;
  background-repeat: no-repeat;
}

.c-hero__inner {
  position: relative;
  z-index: 1;
}

.c-hero__content {
  max-width: none;
}

/* --- Eyebrow « SIDE A —— UI DESIGNER & GRAPHISTE » --- */

.c-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-8);
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.c-hero__side {
  color: var(--c-accent-2);
  flex: 0 0 auto;
}

.c-hero__eyebrow-rule {
  display: block;
  width: clamp(1.5rem, 0.775rem + 3.64vw, 3.5rem);
  height: var(--line);
  background-color: var(--c-accent-2);
  flex: 0 0 auto;
}

/* --- Titre --- */

.c-hero__title {
  margin-block-end: var(--space-6);
}

.c-hero__line {
  display: block;
}

.c-hero__line--accent {
  color: var(--c-accent-1);
}

/* --- Texte et actions --- */

.c-hero__text {
  margin-block-end: var(--space-8);
  max-width: 46ch;
  font-size: clamp(1rem, 0.87rem + 0.65vw, 1.375rem);
}

.c-hero__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
}

/* --- Média : portrait + disque rayé --- */

.c-hero__media {
  display: none;
}

/* PALIERS */

@media (min-width: 768px) {
  .c-hero {
    --hero-media-w: 48%;

    --hero-gap-y: clamp(1rem, 3.125vw - 0.5rem, 1.5rem);
    --hero-gap-y-sm: clamp(0.75rem, 1.5625vw, 1rem);

    padding-block: var(--space-8);
  }

  .c-hero__eyebrow {
    margin-block-end: var(--hero-gap-y);
  }

  .c-hero__title {
    margin-block-end: var(--hero-gap-y-sm);
  }

  .c-hero__text {
    margin-block-end: var(--hero-gap-y);
    font-size: clamp(0.95rem, 0.425rem + 1.09vw, 1.125rem);
  }

  .c-hero__actions {
    gap: var(--space-3);
  }

  .c-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--hero-media-w);
    align-items: center;
    column-gap: var(--space-6);
  }

  .c-hero__content {
    position: relative;
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
    max-width: none;
  }

  .c-hero__media {
    display: block;
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;

    align-self: stretch;
    justify-self: center;
    aspect-ratio: 1;

    border-radius: 50%;
    border: var(--line) solid var(--c-accent-1);
    overflow: hidden;
  }

  /* --- Anneaux --- */
  .c-hero__inner::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    justify-self: center;
    aspect-ratio: 1;
    pointer-events: none;
    transform: scale(1.9);
    background-image: repeating-radial-gradient(circle closest-side at 50% 50%,
        transparent 0 calc(10% - 1px),
        var(--hero-line) calc(10% - 1px) 10%);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 40%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 40%, transparent 100%);
  }

  .c-hero__portrait {
    --portrait-scale: 105%;

    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 2;
    display: block;
    width: var(--portrait-scale);
    height: var(--portrait-scale);
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 1200px) {
  .c-hero {
    padding-block: var(--space-14);
  }

  .c-hero__title {
    margin-block-end: var(--space-6);
  }

  .c-hero__text {
    margin-block-end: var(--space-8);
    font-size: clamp(1.1875rem, 0.875rem + 0.417vw, 1.375rem);
  }

  .c-hero__inner {
    column-gap: var(--space-12);
  }

  .c-hero__eyebrow {
    gap: var(--space-4);
    margin-block-end: var(--space-10);
    letter-spacing: var(--ls-wider);
  }
}

@media (min-width: 1920px) {
  .c-hero {
    padding-block: var(--space-16);
  }
}

@media (min-width: 2560px) {
  .c-hero__inner {
    column-gap: var(--space-16);
  }

  .c-hero__text {
    font-size: 1.5rem;
  }
}