/*
  HERO SECTION STYLES
  ===================
  This is the large photo banner at the very top of the homepage.
*/

.hero {
  /* "position: relative" means: this box becomes the reference point
     for anything inside it that uses "position: absolute" (like the image
     and overlay below). Without this, the image/overlay would try to
     position themselves relative to the whole page instead of the hero box. */
  position: relative;

  /* "large" section height in Shopify roughly maps to 80% of the screen's
     visible height. vh = "viewport height" = a percentage of the browser window. */
  min-height: 80vh;

  /* Flexbox: puts children in a row/column and controls alignment.
     We'll put the text content at the bottom-left, matching your Shopify config. */
  display: flex;
  align-items: flex-end;      /* pushes content to the BOTTOM of the hero */
  justify-content: flex-start; /* keeps content on the LEFT */

  padding: 0 40px 31px 40px; /* space around the content: top right bottom left */
  overflow: hidden; /* prevents the image from spilling outside the rounded box, if any */

  background-color: var(--color-scheme5-background);
  color: var(--color-scheme5-foreground);
}

/* The background photo itself */
.hero__media {
  position: absolute;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0; -- fills the whole .hero box */
  width: 100%;
  height: 100%;
  object-fit: cover; /* crops the image to fill the box without stretching/distorting it */
  z-index: 0; /* sits behind everything else in the hero */
}

/* The subtle dark tint over the photo, so white text stays readable */
.hero__overlay {
  position: absolute;
  inset: 0;
  background-color: #00000026; /* the exact overlay color from your Shopify settings
                                   (the last 2 characters, "26", are the transparency
                                   in hex -- about 15% opacity black) */
  z-index: 1;
}

/* The actual text sits above the image AND the overlay */
.hero__content {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-end; /* matches "align_baseline: true" behavior from your config */
  flex-wrap: wrap;
  gap: 24px;
}

.hero__text-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero__eyebrow {
  font-family: var(--font-accent);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: normal;
  margin: 0;
  color: var(--color-scheme5-foreground);
}

.hero__heading {
  font-family: var(--font-primary);
  font-size: var(--font-size-h2);
  margin: 0;
  color: var(--color-scheme5-foreground-heading);
}

.hero__description {
  font-family: var(--font-primary);
  font-size: 1rem;
  max-width: 400px;
  margin: 0;
  color: var(--color-scheme5-foreground);
}

/* On small screens (phones), stack the text and description vertically
   instead of side-by-side, and reduce the giant heading size a bit. */
@media (max-width: 749px) {
  .hero {
    padding: 0 20px 24px 20px;
  }

  .hero__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hero__heading {
    font-size: 36px;
  }
}