/* public/CSS/PAGES/_HOME_/External_CSS/hero.css
   The first screen of the home page (Sections/hero.ejs).
   Dark theme: the portrait's black studio background fades into the page.
   Light theme: the portrait is a framed, rounded photo. */

.hero-inner {
  display: grid;
  gap: 8px;
  padding-bottom: 40px;
}

/* Phones: a square around the whole head (hair to collar), sized by the screen
   height so the intro text and buttons still fit on the first screen. */
.hero-photo {
  width: clamp(230px, 37svh, 330px);
  aspect-ratio: 1;
  overflow: hidden;
  margin: 4px 0 12px;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

/* Only the edges and the shoulders fade into the page; the face stays whole. */
:root[data-theme="dark"] .hero-photo img {
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 42%, var(--photo-fade-mask) 64%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 78% at 50% 42%, var(--photo-fade-mask) 64%, transparent 100%);
}

:root[data-theme="light"] .hero-photo {
  border-radius: 22px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--surface-background);
  color: var(--body-text);
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
}

.hero-status-open {
  padding-left: 12px;
}

.hero h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 750;
}

.hero-intro {
  max-width: 34ch;
  color: var(--muted-text);
  font-size: clamp(1.0625rem, 1.9vw, 1.3rem);
  line-height: 1.5;
}

.hero-headline {
  color: var(--body-text);
  font-weight: 500;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  list-style: none;
  color: var(--muted-text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
}

.hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* Short phone screens: a smaller photo, so the buttons stay on the first screen. */
@media (max-width: 899px) and (max-height: 700px) {
  .hero-photo {
    width: clamp(170px, 28svh, 250px);
  }
}

@media (max-width: 380px) {
  .hero-actions .button {
    padding: 0 14px;
  }

  .hero-actions .button-icon {
    padding: 0;
  }
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 24px;
    height: calc(100svh - 68px);
    min-height: 560px;
    max-height: 820px;
    padding-bottom: 0;
  }

  .hero-text {
    order: -1;
    gap: 18px;
    padding-bottom: 40px;
  }

  .hero-photo {
    width: auto;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
  }

  .hero-photo img {
    object-position: 50% 30%;
  }

  :root[data-theme="dark"] .hero-photo img {
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 55% 42%, var(--photo-fade-mask) 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 62% at 55% 42%, var(--photo-fade-mask) 50%, transparent 100%);
  }

  :root[data-theme="light"] .hero-photo {
    height: calc(100% - 64px);
    margin: 0;
    border-radius: 28px;
  }
}