/* ===========================
   Juliana — Home page
   =========================== */

/* H-HERO, H-FEAT, H-INTRO, H-NEWS, H-IG */

/* ===========================
   Main content styles
   =========================== */

/* Hero — full-viewport, content anchored bottom */
.j-hero {
  /* color */
  background-color: var(--c-surface-1);
  /* Depth layer: subtle oxblood bloom + vignette base. Always visible. */
  background-image:
    radial-gradient(ellipse 60% 50% at 70% 20%, color-mix(in srgb, var(--c-accent) 8%, transparent) 0%, transparent 80%),
    radial-gradient(ellipse 100% 80% at 50% 100%, color-mix(in srgb, var(--c-base) 60%, transparent) 0%, transparent 70%);

  /* box model */
  min-height: clamp(520px, 70vh, 820px);

  /* display */
  display: flex;

  /* flexbox */
  align-items: flex-end;

  /* positioning */
  position: relative;

}

.j-hero__bg {
  /* positioning */
  position: absolute;
  inset: 0;
  z-index: 0;

}

.j-hero__bg img {
  /* box model */
  width: 100%;
  height: 100%;

  /* other */
  object-fit: cover;
  object-position: center top;

}

/* Scrim: provides readable text base with or without a photo */
.j-hero__scrim {
  /* color */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--c-base) 0%, transparent) 0%,
    color-mix(in srgb, var(--c-base) 8%, transparent) 40%,
    color-mix(in srgb, var(--c-base) 45%, transparent) 75%,
    color-mix(in srgb, var(--c-base) 80%, transparent) 100%
  );

  /* positioning */
  position: absolute;
  inset: 0;
  z-index: 1;

}

.j-hero__content {
  /* box model */
  width: 100%;
  padding-bottom: var(--sp-96);

  /* positioning */
  position: relative;
  z-index: 2;

}

.j-hero__wordmark {
  /* text */
  line-height: 1;

  /* box model */
  margin: 0 0 var(--sp-24);
  max-width: 14ch;

}

.j-hero__tagline {
  /* text */
  letter-spacing: 0.18em;

  /* color */
  color: var(--c-ink-dim);

  /* box model */
  margin: 0 0 var(--sp-32);

}

.j-hero__quote {
  /* box model */
  max-width: 48ch;
  margin: 0 0 var(--sp-48);

}

.j-hero__scroll-cue {
  /* text */
  font-size: var(--fs-wordmark);

  /* color */
  color: var(--c-ink-dim);

  /* display */
  display: block;

  /* animation */
  animation: scroll-bounce 2s ease-in-out infinite;

}

@keyframes scroll-bounce {
  0%,  100% { transform: translateY(0); }
  50%        { transform: translateY(6px); }
}


/* ===========================
   Intro
   =========================== */

.j-intro__inner {
  /* text — width/centering are native now: the group is a constrained
   * layout with contentSize 800px, editable in the block inspector */
  text-align: center;

}

.j-intro__heading {
  /* box model */
  margin-bottom: var(--sp-32);

}

.j-intro__body {
  /* box model — spacing between paragraphs comes from the layout blockGap;
   * only the last paragraph keeps the pre-button breathing room */
  margin-bottom: 0;

}

.j-intro__body:last-of-type {
  /* box model */
  margin-bottom: var(--sp-48);

}


/* ===========================
   Newsletter
   =========================== */

/* Divider above the newsletter band removed per client feedback
 * ("remove the grey divider in the welcome, wanderer section"). */
.j-newsletter {
  /* border */
  border-top: 0;

}

.j-newsletter__inner {
  /* text */
  text-align: center;

  /* display */
  display: flex;

  /* flexbox */
  flex-direction: column;
  align-items: center;

}


/* ===========================
   Instagram Grid
   =========================== */

.j-ig {
  /* border */
  border-top: 1px solid var(--c-hairline);

}

.j-ig__inner {
  /* display */
  display: flex;

  /* flexbox */
  flex-direction: column;
  align-items: center;

}

.j-ig__inner > * {
  /* box model */
  margin-block: 0;

}

.j-ig__heading {
  /* box model */
  margin-bottom: var(--sp-24);

}

.j-ig__handle {
  /* color — client override of the eyebrow oxblood rule: white handle */
  color: var(--c-ink);

  /* box model */
  margin-top: var(--sp-32);
  margin-bottom: 0;

  /* text — the handle is one long unbreakable token; at the 12pt
   * minimum it exceeds narrow viewports unless allowed to wrap */
  overflow-wrap: anywhere;

}

.j-ig__img {
  /* box model */
  width: 100%;
  height: 100%;

  /* display */
  display: block;

  /* transition */
  transition: transform 0.35s ease;

  /* other */
  object-fit: cover;

}

.j-ig__tile:hover .j-ig__img {
  /* other */
  transform: scale(1.04);

}

/* j-gallery-grid stays 3-wide at ALL widths — defined in layout.css */
.j-ig__grid {
  /* box model */
  width: 100%;

}

.j-ig__tile {
  /* border */
  border-radius: var(--r-tile);

  /* other */
  overflow: hidden;

}

.j-ig__tile--placeholder {
  /* color */
  background-color: var(--c-surface-2);

  /* box model */
  aspect-ratio: 3 / 4;

}