.c-page-header {
  //list all possible elements of header, quick ref for fields
  @include template(pretitle, title, producer, credit, quote, posttitle, nav, search);
  
  // generic layout for most headers
  &__container {
    display: grid;
    grid-template-columns: 7fr 1fr 4fr; //A generic page header layout. Title is contained within 7 columns. A sidebar may be present on the page (of 4 cols width).
    grid-template-areas: //A little map of the layout. The auto assign mixin @template places each element in the named area for us. 
      "pretitle  . ."
      "title     . ."
      "posttitle . .";
    @include media(tablet) {
      grid-template-columns: 8fr 1fr 3fr; //5/6 on tablet no sidebar
    }
    @include media(phone) {
      grid-template-columns: 1fr; //stack
      grid-template-areas: "pretitle" "title" "posttitle";
    }
  }
  
  // VARIATIONS: homepage, hero, event, search
  
  &--homepage {
    @include theme; // point to colour rules stored as a theme model
    .c-page-header__container {
      margin-bottom: $b*1.75;
      grid-template-rows: 33vmin 1fr min-content;
      grid-template-columns: 8fr 4fr;
      grid-template-areas:
        ".         . "
        "title     ."
        "posttitle .";
    }
  }
  
  &--hero {
    .c-page-header__container {
      grid-template-columns: 7fr 1fr 4fr; // same as generic but let's write it out for the record this time
      grid-template-areas:
        "pretitle . ."
        "title    . nav";
      @include media(tablet) {
        grid-template-columns: 8fr 4fr; //2/3 on tablet
        grid-template-areas: "pretitle ." "title ." ". nav";
      }
      @include media(phone) {
        grid-template-columns: 1fr;
        grid-template-areas: "pretitle" "title" "nav"; //stack on phone
      }
    }
  }

  &--event {
    .c-page-header__container {
      grid-template-columns: 7fr 1fr 4fr; // same as generic
      grid-template-areas:
        "producer .  . "
        "title    .  quote "
        "credit   .  quote   "
        ".        .  quote";

      @include media(tablet) {
        grid-template-columns: 10fr 2fr;
        grid-template-areas:
          "producer ."
          "title ."
          "credit .";
      }
      @include media(phone) {
        grid-template-columns: 1fr; //We can easily switch to 1 column on phone like this. We set the column template to 1fr and then write one element per row. 
        grid-template-areas:
          "producer"
          "title"
          "credit";
      }
    }
  }
  
  &--search {
    .c-page-header__container {
      margin-top: $b*6;
      grid-template-columns: 3fr 6fr 3fr; 
      grid-template-areas: ". search .";
      @include media(phone) {
        grid-template-columns: 0 1fr 0; // collapsing columns to stack content
      }
    }
    .c-page-header__title {@include screen(hide);} // it's pertinent to note that title is hidden on search only
  }
}

  // NOW ELEMENTS -- we often will be asked to pull elements from one header type to another -- I prefer elements after layout, others prefer elements first. I know I am nearly always looking for the layout first when I backtrack...
 .c-page-header {
    &__image {
    position: relative;
    overflow: hidden;
    img {
      width: 100%;
      transform: translateY(-33vw);
      margin-bottom: calc(-33vw + #{$b} );
      //I just budged this up to make this dummy image a better crop -- in production the images are sized in Imager so this would not be here
    }
  }
    &__title {
      margin-bottom: $b*0.75;
      //this designer sets bottom margins individually on elements, not as regular proportions of text size (em) or regular spacing (grid gap) so we set margins per element too to honour the spec. This is a primary reason for eschewing css grid gutters
    }
    &__credit {
      margin-bottom: $b*1.25;
    }
    &__quote {
      @include monotheme;
    }
    //this infobar is arguably a component in itself
    &__infobar {
      @include theme;
      padding: $b 0;
      margin-bottom: $b;
      > .o-page-grid {
        // here we look at adding a page grid as an interior grid
        align-items: center;
        margin-bottom: 0;
      }
      .c-page-header__date {
        @include media(phone) {
          text-align: center;
          grid-area: 1 / 1 / 1 / 13; //sometimes number spec is honestly clearer
        }
      }
      .c-page-header__action {
        padding: 17px 30px;
        @include var(border-color, currentColor);
        @include on-event {
          @include fliptheme;
        }
      }
    }   
    &__search {
      margin: auto #{$b *0.3}; // to align this perfectly with the 12 col grid below (marker) we multiply the grid gap by the sum of the fr units to each side of the column (3 and 3 in this case)
      @include media(phone) {
        margin: 0;
      } // no grid gap no margin adjustment. try removing this line
    }
    &__nav {
      @include media(desktop) {align-self:end}
      > * { margin: 0}
    }
   &__keyword, &__title-text { display: block; }
   &__keyword:not(:empty) {
    @include var(color,theme);
    @media (max-width: 960px) { // just making this word a bit more readable on small screens
      @include theme;
      padding: 0.25em;
      display: inline-block;

    }
  }
   
   
   
   
   
   // --theme: #f50; //bonus round, play with resetting the theme on the fly
  }


//see library for external resources: https://codepen.io/Sally_McGrath/pen/zbzQMB
.marker {font-family: Futura,sans-serif; font-weight:100; @include theme; padding:1rem; margin-bottom:-.5rem;--theme:#222;
}