/* Home Team Construction — page-hero

   THE FLAT HEADING BAND, for pages with no hero photograph.

   Several of the pages in this batch open with a heading and nothing else:
   FAQ, Gallery, Blog, Quote, Privacy Policy. On the live site that is
   literally all they have — an Elementor heading widget on the page background.

   The argument for this band over `hero-shell` is restraint: a full-bleed dark
   photo band is the site's loudest gesture, and spending it on every page
   flattens the difference between them. This is the quiet version of the same
   shape: same red rule, same type ramp, same gutters, a third of the height,
   on the light ground.

   /sitemap/ and /404/ were both moved off this band on request — they now use
   hero-shell like the rest of the site. Sitemap's hero is printed from
   inc/sitemap-hero.php rather than a template, because that page renders from
   a plugin; see that file.

   Modifiers:
     .htc-pagehero--tight     no lead paragraph following; less bottom padding
     .htc-pagehero--legal     adds the back-link row (Privacy Policy)

   Also carries .htc-404__links, the quick-exit row on 404.php — see the block
   below. That page's hero itself is hero-shell, not this one: a 404 is often
   someone's first impression of the site after a bad link, and it should not
   be the one page that looks like it belongs somewhere else.

   Tokens come from tokens.css; only local overrides are declared here.
*/

.htc-pagehero{
  box-sizing:border-box;
  width:100%;
  background:var(--htc-bg-light);
  border-bottom:1px solid var(--htc-divider);
  font-family:var(--htc-font-body);
  color:var(--htc-text);
}

.htc-pagehero *,
.htc-pagehero *::before,
.htc-pagehero *::after{ box-sizing:border-box; }

.htc-pagehero__inner{
  max-width:calc(var(--htc-container) + var(--htc-s4) * 2);
  margin-inline:auto;
  padding:var(--htc-s6) var(--htc-s4);
}

/* ---- Back link ----------------------------------------------------------

   Privacy Policy carries a "Go Back Home" link above the h1 on the live site,
   and it is the only navigation the page offers besides the header. Kept,
   moved above the rule so it reads as a way out rather than as part of the
   title. Sitemap dropped this row — the sitemap itself is the way out.
   ------------------------------------------------------------------------- */

.htc-pagehero__back{
  display:inline-flex;
  align-items:center;
  gap:var(--htc-s1);
  margin:0 0 var(--htc-s3);
  color:var(--htc-text);
  font-size:var(--htc-small);
  font-weight:600;
  text-decoration:none;
}

.htc-pagehero__back:hover{ color:var(--htc-red); }
.htc-pagehero__back:focus-visible{ outline:2px solid var(--htc-red); outline-offset:3px; }

.htc-pagehero__back svg{ flex:0 0 auto; }

/* The same 24×2 red rule that opens the dark hero and the reviews section. It
   is the site's "a section starts here" mark and the reason this band still
   reads as family with the photo hero it replaces. */
.htc-pagehero__rule{
  display:block;
  width:24px;
  height:2px;
  background:var(--htc-red);
  margin:0 0 var(--htc-s3);
}

.htc-pagehero__eyebrow{
  margin:0 0 var(--htc-s2);
  font-size:var(--htc-eyebrow);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.3;
  color:var(--htc-red);
}

/* One step down from the photo hero's h1. On a dark full-bleed band 55px is
   sized against the photograph; on a 200px light band it is sized against the
   header directly above it, and 55px there simply shouts. */
.htc-pagehero__title{
  margin:0;
  font-size:var(--htc-h2);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--htc-black);
  max-width:22ch;
  text-wrap:balance;
}

.htc-pagehero__deck{
  margin:var(--htc-s2) 0 0;
  font-size:var(--htc-h4);
  font-weight:600;
  line-height:1.25;
  color:var(--htc-grey-mid);
  max-width:30ch;
  text-wrap:balance;
}

.htc-pagehero__lead{
  margin:var(--htc-s3) 0 0;
  font-size:var(--htc-lead);
  line-height:1.6;
  color:var(--htc-text);
  max-width:var(--htc-measure);
}

/* The lead is a <div> wherever the copy comes out of the editor rather than
   being written here — /projects/ renders the_content() into it, the category
   archives render the term description — so it arrives as paragraphs, not as
   one string. Browser default margins then stack a whole 1em on top of this
   block's own --htc-s3 above the first paragraph, and push the meta row away
   below the last. Zero both ends and space between with --htc-s2, which is the
   gap the rest of the band uses. */
.htc-pagehero__lead > p{ margin:0; }
.htc-pagehero__lead > p + p{ margin-top:var(--htc-s2); }

/* This matched .htc-pagehero__lead's own text colour exactly, so a link had
   no colour signal at all here — underline only. Matches the blue-dark
   convention the rest of the site's in-copy links use. */
.htc-pagehero__lead a{
  color:var(--htc-blue-dark);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}
.htc-pagehero__lead a:hover{ color:var(--htc-red); }
.htc-pagehero__lead a:focus-visible{ outline:2px solid var(--htc-red); outline-offset:2px; }

.htc-pagehero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--htc-s2);
  margin:var(--htc-s4) 0 0;
}

/* ---- Meta row -----------------------------------------------------------
   Gallery and Blog both want a count beside the title — "63 projects",
   "95 articles". It is a fact the page already implies and a cheap way to tell
   the reader how much is below before they scroll.
   ------------------------------------------------------------------------- */

.htc-pagehero__meta{
  margin:var(--htc-s3) 0 0;
  font-family:var(--htc-font-body);
  font-size:var(--htc-small);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--htc-grey-mid);
}

.htc-pagehero--tight .htc-pagehero__inner{
  padding-block:var(--htc-s5);
}

/* ---- 404 quick links ------------------------------------------------------
   The links row below the /404/ hero, inside .htc-shell. Same list-of-links
   shape as .htc-sitemap__list, kept local here since this is the only other
   page that needs it.
   ------------------------------------------------------------------------- */

.htc-404__links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--htc-s2) var(--htc-s5);
  margin:0;
  /* No top padding of its own. .htc-shell around it already supplies
     --htc-s6, and the row used to add --htc-s5 on top of that, which left a
     visible void between the hero and the only links out of a dead end. */
  padding:0;
  list-style:none;
}

.htc-404__links a{
  color:var(--htc-black);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:color 150ms ease, text-decoration-color 150ms ease;
}

.htc-404__links a:hover{
  color:var(--htc-red);
  text-decoration-color:var(--htc-red);
}

.htc-404__links a:focus-visible{
  outline:2px solid var(--htc-red);
  outline-offset:3px;
}

@media (max-width:1150px){
  .htc-pagehero__inner{ padding:var(--htc-s5) var(--htc-s3); }
  .htc-pagehero--tight .htc-pagehero__inner{ padding-block:var(--htc-s4); }
}

@media (max-width:767px){
  .htc-pagehero__title,
  .htc-pagehero__deck{ max-width:none; }
  .htc-pagehero__actions{ flex-direction:column; align-items:stretch; }
  .htc-pagehero .htc-btn{ width:100%; }
  .htc-404__links{ flex-direction:column; gap:var(--htc-s2); }
}