/* Each resource page's own hero scene, in the spirit of /whats-on/ (pieces in /images/heroes/).
   The scene is the page's own illustration (/images/reads/ or /images/guides/) without its box,
   standing on a ground strip along the bottom of the hero. On computers it sits on the right where the
   boxed picture used to be; on tablets and phones it stands under the words.
   A page opts in with class="hb hb-<slug>" on .article-hero; each page sets its scene, size and colour below. */

.article-hero.hb {
  --hb-k: 1;
  --hb-sw: calc(var(--hb-w) * var(--hb-k));
  background:
    var(--hb-scene) no-repeat right max(24px, calc(50vw - 532px)) bottom calc(var(--hb-lift) * var(--hb-k)) / var(--hb-sw) auto,
    var(--hb-ground) no-repeat center bottom / 100% calc(56px * var(--hb-k)),
    var(--hb-bg);
}
/* Computers: the words keep the width they had next to the boxed picture, and the scene grows
   into the space beside them (a fifth bigger, up to 360px wide, so it never pushes the words down) */
@media (min-width: 1000px) {
  .article-hero.hb { --hb-sw: min(calc(var(--hb-w) * 1.2), 360px); }
  .hb.hero-with-art .hero-text { max-width: calc(100% - 388px); }
}
/* Tablets and phones: a slightly smaller scene, standing under the words */
@media (max-width: 999px) {
  .article-hero.hb { --hb-k: 0.86; padding-bottom: calc((var(--hb-lift) + var(--hb-h)) * var(--hb-k) + 20px); }
}
@media (max-width: 420px) {
  .article-hero.hb { background-position: center bottom calc(var(--hb-lift) * var(--hb-k)), center bottom; }
}

/* December guide: the beach, sea and whale */
.hb-things-to-do-hermanus-december { --hb-scene: url("/images/heroes/things-to-do-hermanus-december/scene.svg"); --hb-ground: url("/images/heroes/ground-beach.svg"); --hb-bg: #FDF3DA; --hb-w: 310px; --hb-h: 180px; --hb-lift: 4px; }
/* Babysitter: the house at night, with the moon */
.hb-babysitter-first-evening { --hb-scene: url("/images/heroes/babysitter-first-evening/scene.svg"); --hb-ground: url("/images/heroes/ground-hills.svg"); --hb-bg: #E6EBF4; --hb-w: 340px; --hb-h: 149px; --hb-lift: 18px; }
/* Choosing a nanny: the profile card */
.hb-choosing-a-nanny { --hb-scene: url("/images/heroes/choosing-a-nanny/scene.svg"); --hb-ground: url("/images/heroes/ground-hills.svg"); --hb-bg: #E6EFF4; --hb-w: 329px; --hb-h: 190px; --hb-lift: 18px; }
/* House sitter: the house, suitcase and cat */
.hb-going-away-house-sitter { --hb-scene: url("/images/heroes/going-away-house-sitter/scene.svg"); --hb-ground: url("/images/heroes/ground-hills.svg"); --hb-bg: #FDF3DA; --hb-w: 340px; --hb-h: 174px; --hb-lift: 16px; }
/* How we check: the clipboard and magnifier */
.hb-how-we-check-helpers { --hb-scene: url("/images/heroes/how-we-check-helpers/scene.svg"); --hb-ground: url("/images/heroes/ground-hills.svg"); --hb-bg: #E8F0E4; --hb-w: 320px; --hb-h: 190px; --hb-lift: 16px; }
/* Which help: the signpost */
.hb-profile-tips { --hb-scene: url("/images/heroes/profile-tips/scene.svg"); --hb-ground: url("/images/heroes/ground-hills.svg"); --hb-bg: #E6EFF4; --hb-w: 300px; --hb-h: 183px; --hb-lift: 14px; }
/* How references work: the link flying like a paper plane from your home to a family you worked for */
.hb-how-references-work { --hb-scene: url("/images/heroes/how-references-work/scene.svg"); --hb-ground: url("/images/heroes/ground-hills.svg"); --hb-bg: #EEF4F7; --hb-w: 330px; --hb-h: 138px; --hb-lift: 16px; }

.hb-which-help-do-you-need { --hb-scene: url("/images/heroes/which-help-do-you-need/scene.svg"); --hb-ground: url("/images/heroes/ground-hills.svg"); --hb-bg: #FDF3DA; --hb-w: 340px; --hb-h: 156px; --hb-lift: 18px; }
/* Before day one: the house with flowers */
.hb-before-day-one { --hb-scene: url("/images/heroes/before-day-one/scene.svg"); --hb-ground: url("/images/heroes/ground-hills.svg"); --hb-bg: #E6EFF4; --hb-w: 324px; --hb-h: 180px; --hb-lift: 18px; }
/* First two weeks: the calendar on sand */
.hb-first-two-weeks { --hb-scene: url("/images/heroes/first-two-weeks/scene.svg"); --hb-ground: url("/images/heroes/ground-sand.svg"); --hb-bg: #FDF3DA; --hb-w: 299px; --hb-h: 190px; --hb-lift: 18px; }
/* Helper's first weeks: the path up to the house */
.hb-helper-first-weeks { --hb-scene: url("/images/heroes/helper-first-weeks/scene.svg"); --hb-ground: url("/images/heroes/ground-hills.svg"); --hb-bg: #EEF4F7; --hb-w: 340px; --hb-h: 121px; --hb-lift: 18px; }
/* Meeting a family: the chat bubbles */
.hb-helper-meeting { --hb-scene: url("/images/heroes/helper-meeting/scene.svg"); --hb-ground: url("/images/heroes/ground-hills.svg"); --hb-bg: #E6EFF4; --hb-w: 340px; --hb-h: 172px; --hb-lift: 18px; }
/* Working together: the mugs on a kitchen counter */
.hb-working-together { --hb-scene: url("/images/heroes/working-together/scene.svg"); --hb-ground: url("/images/heroes/ground-counter.svg"); --hb-bg: #E8F1E3; --hb-w: 276px; --hb-h: 148px; --hb-lift: 28px; }

/* The Resources page itself (no illustration of its own): a pile of books, an open book and a plant.
   It loads after layout.css, so it replaces the hills there. The scene fits in the hero's bottom padding. */
.page-hero.hb-hub {
  --hb-k: 1;
  background:
    url("/images/heroes/resources/scene.svg") no-repeat right max(24px, calc(50vw - 558px)) bottom calc(18px * var(--hb-k)) / calc(330px * var(--hb-k)) auto,
    url("/images/heroes/ground-hills.svg") no-repeat center bottom / 100% calc(56px * var(--hb-k)),
    #E6EFF4;
}
@media (max-width: 999px) { .page-hero.hb-hub { --hb-k: 0.72; } }
@media (max-width: 700px) { .page-hero.hb-hub { --hb-k: 0.56; } }