/* ==============================================================================
   TITLE BAND (templates/partials/page-title.html, doc/07, ADR-041)

   The page-title of Furnitor's shop-page-06, measured on the demo: a
   strip of photo 500 px tall on a desktop (its bg-page-title-02 is
   1920 × 500) with the header laid over its top, the title at 40 px 220 px
   from the top (pt-lg-18; 120 px under 992, pt-15), and the breadcrumb at
   its foot 30 px over the edge (pb-6). Over the title, the studio's mark,
   expanded and in white, which the demo does not have: it takes the
   64 px over the title, which stays where the demo has it.

   The demo's photo is pale and its words are ink. Ours are buildings and
   paintings, so the words are white on the 35 % black veil Juan asked
   for, with the slider's darker strip under the header (hero-slider.css)
   so the menu reads over a pale sky as well; contrast measured in doc/07.
   ============================================================================== */

/* The band opens the page: it spans the full track from the very top, so
   the page drops the padding and the gap it puts around blocks, as it
   does for the other openings of the theme's pages (text.css). */
.page:has(> .page-title:first-child) {
  row-gap: 0;
  padding-block: 0;
}

.page > .page-title {
  grid-column: full;
}

.page-title {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 360px;
  overflow: hidden;
  background: var(--ink);
  color: var(--overlay-text);
  /* Inside, ink and grey are white, as in the slider's caption: the
     breadcrumb and the mark follow the page's tokens and need no rules
     of their own here. The site's añil focus ring would sit on a dark
     photo, so it is white too. */
  --text-primary: var(--overlay-text);
  --text-muted: var(--overlay-text);
  --focus-ring: var(--overlay-text);
}

.page-title__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.page-title__media picture {
  display: contents;
}

.page-title__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* On Proyectos the band follows the work under the pointer (ADR-044,
   band-follow.js): the incoming photo is a second layer laid over the
   current one, transparent until the script has it decoded, then faded
   in at the zoom's pace; the script drops the old layer when the
   transition ends. The veil below stays over whichever photo shows. */
.page-title__image.is-entering {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-zoom);
}

.page-title__image.is-entering.is-visible {
  opacity: 1;
}

/* The veil: the 35 % black over the whole photo and, over it, a darker
   strip under the header (where the menu sits on a sky or a white wall),
   another one over the foot (the breadcrumb) and a shade on the left,
   behind the mark and the title, that fades out past the middle. A white
   wall under 35 % alone gives white words 2.4:1; with the shade they keep
   4.5:1 on the palest photo (doc/07). On a phone the words run across the
   whole band, so the shade covers all of it (a colour can only be the
   last layer of a background, hence the flat gradient). */
.page-title__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 180px),
    linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 160px),
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    rgba(0, 0, 0, 0.35);
}

@media (min-width: 62em) {
  .page-title__media::after {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 180px),
      linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 160px),
      linear-gradient(to right, rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0) 75%),
      rgba(0, 0, 0, 0.35);
  }
}

/* The content in the theme's container (--plain-container, text.css):
   the mark and the title from the top, the breadcrumb pushed to the
   foot. Under 992 px the header takes two rows (the mark and the
   languages, then the menu), so the words start lower than the demo's
   120 px. */
.page-title__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--plain-container);
  margin-inline: auto;
  padding: 140px 0 24px;
}

.page-title__heading {
  margin: 0;
  color: inherit;
  /* 46 px on a desktop, where the demo's sans measured 40: a serif at
     the same weight sits lighter, so it takes a size up (ADR-046); the
     40 stays on a phone so a work's name keeps to two lines. */
  font-size: clamp(var(--fs-40), 2.2rem + 0.8vw, var(--fs-title-46));
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
  /* The title changes with the photo (ADR-044): the script hides it,
     swaps the words while it is hidden and shows it again, at the fade's
     pace both ways. */
  transition: opacity var(--transition-fade);
}

.page-title__heading.is-fading {
  opacity: 0;
}

.page-title__subtitle {
  max-width: 40em;
  margin: var(--space-3) 0 0;
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-15);
}

/* The breadcrumb band of the other pages (text.css), here without its
   grey, at the foot of the band. */
.page-title .breadcrumb {
  margin-top: auto;
  padding: var(--space-6) 0 0;
  background: none;
}

/* The home page's entry is the one link, and on the photo there is a
   single colour, so it keeps its underline. */
.page-title .breadcrumb a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

@media (min-width: 62em) {
  .page-title {
    min-height: 500px;
  }

  .page-title__inner {
    /* 220 px to the title, less the mark's 40 px and the 24 px under it. */
    padding: 156px 0 30px;
  }
}