/**
 × heros_css v2.21 × updated 2026-10-07 ×
 × created 2025-12-03 × raimundo p. solar ×
 × Home and page heroes ×
 **/

/* --------------------------------------------------
   1. HOME HERO
-------------------------------------------------- */

/*
 * Homepage Canid images do not all share the same
 * source dimensions.
 *
 * The hero therefore owns a stable viewport height
 * and crops each image consistently.
 */

.hero-home {
  position: relative;

  width: 100%;
  height: 100vh;

  overflow: hidden;

  color: var(--color-white);
}


.hero-home img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

/* Media option "Mirror on the homepage": the photo only, flipped left–right. */
.hero-home img.is-mirrored {
  transform: scaleX(-1);
}


.hero-home .title {
  position: absolute;

  top: calc(
    var(--gap-y)
    + var(--breche-l)
  );

  left: var(--gap-x);

  z-index: 1;
}


.hero-home .title {
  --tagline-size: 2.25rem;
}


.hero-home__tagline {
  margin: 0;

  font-size: var(--tagline-size);
  line-height: 1em;
}

/*
 * Highlighter: s-orange band per line (uneven right
 * edge), solid white text. The bands are a hidden copy
 * of the lines (.hero-home__bands) laid behind the text,
 * at 70% as a whole so the photo stays alive while the
 * text stays solid; bands themselves are solid, so where
 * they meet (they overlap, no hairline seam) nothing
 * gets darker. Each band holds the letters with the
 * same gap above the i and below the p (see below).
 */
/*
 * Band height from the letters (Inter, in em of the
 * tagline): top of the i dot 0.7515 above the
 * baseline, bottom of the p 0.2041 below, font ascent
 * 0.9677. The band leaves the same gap (--band-gap)
 * above the i and below the p as it shows on the left
 * and right of the lines (0.12em padding + the letters'
 * own side space: ~0.17em); vertical padding
 * (--band-pad) only makes room for it (no effect on
 * the line layout).
 */
.hero-home__mark {
  --mark: var(--color-s-orange);
  --band-gap: 0.17em;
  --band-pad: 0.2em;

  position: relative;

  padding: var(--band-pad) 0.12em;

  color: #fff;
  background:
    linear-gradient(var(--mark), var(--mark))
    left 0 top calc(var(--band-pad) + 0.9677em - 0.7515em - var(--band-gap))
    / 100% calc(0.7515em + 0.2041em + 2 * var(--band-gap))
    no-repeat;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Text layer: no bands. */
.hero-home__tagline:not(.hero-home__bands) {
  position: relative;
  z-index: 1;
}

.hero-home__tagline:not(.hero-home__bands)
.hero-home__mark {
  background: none;
}

/* Band layer, exactly under the text. */
.hero-home__bands {
  position: absolute;
  inset: 0;
  z-index: 0;

  opacity: 0.7;
}

.hero-home__bands
.hero-home__mark {
  color: transparent;
}

.hero-home .dogod {
  position: absolute;

  right: var(--gap-x);
  bottom: var(--gap-y);

  z-index: 1;

  display: inline-block;

  /*
   * Line height 1 + em padding: the same small space
   * above the tallest letters and below the descenders,
   * whatever the size.
   */
  padding:
    0.18em
    7.5px
    0.22em
    6.5px;

  line-height: 1;

  color: var(--color-white);

  background:
    rgba(0, 0, 0, 0.33);
}


/* --------------------------------------------------
   2–4. PAGE HEROS
-------------------------------------------------- */

.hero-page {
  position: relative;

  width: 100%;

  box-sizing: border-box;
}


.hero-page h1 {
  position: relative;

  z-index: 1;

  margin: 0;
}


/* --------------------------------------------------
   MAIN PAGE — ABOUT US
-------------------------------------------------- */

.hero-page--main {
  padding-top: 1rem;
}


/* --------------------------------------------------
   SUBPAGE — OBJECTIVES / HISTORY
-------------------------------------------------- */

.hero-page--sub {
  padding-top: 0.25rem;
}


/* --------------------------------------------------
   MAIN PAGE WITH IMAGE — CANIDS
-------------------------------------------------- */

.hero-page--image {

  /*
   * About Us begins below the fixed solid header.
   *
   * Canids keeps the header transparent over its
   * image, so the equivalent header height has to
   * be recreated inside the hero itself.
   *
   * header.js writes --header-height dynamically.
   *
   * This makes the Canids title line up vertically
   * with the title on About Us.
   */

  padding-top: calc(
    var(--header-height, 0px)
    + 1rem
  );

  overflow: hidden;

  color: var(--color-white);
}


.hero-page--image > img {
  position: absolute;

  inset: 0;

  z-index: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


.hero-page--image h1 {
  color: var(--color-white);
}


/* --------------------------------------------------
   IMAGE INSIDE THE PAGE MARGINS — CANIDS
   Thin band of tracks starting at the page-top line,
   as tall as the title's capitals plus the same small
   margin above and below. The photo stops at the page
   margins (white sides).
-------------------------------------------------- */

.hero-page--inset {
  /*
   * Pulled up over the separator gap (and padded back) so
   * the photo starts exactly at the page-top line while
   * the title keeps the spacing of the other main pages.
   */
  margin-top: -0.6rem;
  padding-top: 0.6rem;

  /*
   * Capitals (~0.73em) + margin above and below
   * (~0.27em each) of the 1.75rem title. canids-hero.js
   * refines it from the real letters.
   */
  height: calc(1.75rem * 1.27);

  overflow: hidden;
}

.hero-page--inset .hero-page__tracks {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gap-x);
  z-index: 0;

  display: flex;
  gap: var(--tracks-gap, 0.35rem);

  /* Without JS: three tracks across the page margins. */
  width: calc(100% - 2 * var(--gap-x));
}

/*
 * One track per panel, all the same width. canids-hero.js
 * places the row over the grid (same columns, same gap)
 * and sets the order: 1-2-3, 1-2-3-2, 1-2-3-2-1, phone 2-3.
 */
.hero-page__tracks img {
  flex: 1 1 0;

  display: block;

  min-width: 0;
  height: 100%;

  object-fit: cover;
}

.hero-page--inset h1 {
  color: var(--color-black);
}

/*
 * Desktop split (canids-hero.js): no photo above the
 * filter column, so the title stands on white, in black,
 * aligned with the column below.
 */
.hero-page--inset.is-split h1 {
  color: var(--color-black);
}

/*
 * Mobile (filters above the grid): title on white like
 * every other page, the photo panels right below it.
 */
@media (max-width: 639px) {
  .hero-page--inset {
    display: flex;
    flex-direction: column;

    height: auto;
  }

  .hero-page--inset h1 {
    order: -1;
  }

  .hero-page--inset .hero-page__tracks {
    position: static;

    width: 100%;
    height: calc(1.75rem * 1.27);
    margin-top: 0.4rem;
  }
}


/* --------------------------------------------------
   5. SINGLE CANID HERO
-------------------------------------------------- */

.hero-canid {
  position: relative;

  height: 95vh;
}


.hero-canid > img {
  display: block;

  width: 100%;
  height: 100vh;

  object-fit: cover;
  object-position: center;
}


.hero-canid > h1 {
  position: absolute;

  bottom: 0;
  left: var(--gap-x);

  z-index: 11;

  margin: 0;

  color: var(--color-white);
}


/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (max-width: 600px) {

  /*
   * Full-screen photo as on desktop (the highlighted
   * text needs the room); svh ignores the browser bars.
   */
  .hero-home {
    height: 100vh;
    height: 100svh;
  }


  /*
   * Tagline and name scale with the screen so each
   * highlighted line stays one line (~10.3em longest).
   */
  .hero-home .title {
    --tagline-size: min(
      2.25rem,
      calc((100vw - 2 * var(--gap-x)) / 10.5)
    );
  }


  .hero-home .dogod {
    max-width: calc(100% - 2 * var(--gap-x));

    font-size: min(1.75rem, 8.5vw);
  }


  .hero-page--image {
    padding-top: calc(
      var(--header-height, 0px)
      + 1rem
    );
  }
}