/* ==========================================================================
   Homepage

   Section styles for home.html. Everything reusable lives in components.css;
   this file only holds what belongs to these sections.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Hero

   Full viewport height: header pinned top, clients pinned bottom, content in
   the middle. The design draws it 931 tall at 1920, with the header 97, the
   content block 702 and the clients strip 133.

   No vertical padding on the middle block. It takes the space the other two
   leave and centres in it, which reproduces the drawn 128 above and below the
   content exactly at the design's height (931 - 97 - 133 = 701, minus the 446
   content, halved, is 127.5) and compresses on a short screen instead of
   pushing the clients strip below the fold.

   svh rather than vh: on a phone vh is measured with the browser chrome hidden,
   so the clients strip would sit under the address bar.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The photograph, with the design's 40% black over it.

   A CSS background rather than an <img>: the picture is decoration, and the
   headline beside it carries the meaning, so there is nothing for a screen
   reader to read here. The plain url() comes first so a browser without
   image-set still gets the JPEG.

   The source is 3840 wide, which is 2x a 1920 screen, so it is kept at full
   size rather than resized. bg-dark sits underneath as the colour the section
   falls back to while the image loads. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--bg-dark);
  background-image: url('../../img/hero-image.jpg');
  background-image: image-set(
    url('../../img/hero-image.webp') type('image/webp'),
    url('../../img/hero-image.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.4);
}

.hero > .divider,
.hero__main,
.hero__clients {
  position: relative;
  z-index: 2;
}


/* The rule above the clients strip. A flex item rather than an absolute line so
   the column keeps adding up: the middle block takes the pixel it costs out of
   its own height. Full width, as drawn. The line under the header is no longer
   here; the header component draws its own. */
.hero > .divider {
  flex: none;
}

.hero__main {
  flex: 1;
  display: flex;
  align-items: center;
}

/* Carries .inner, which holds both the cap and the margin. Keeping those on one
   element is the point: padding on a parent and max-width on a child count the
   margin twice, so past 1920 the content kept growing to 1920 instead of
   staying at 1528. */
.hero__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* The left column holds its drawn width and the right one gives way. flex-basis
   rather than width, so the two columns are governed by the same mechanism: the
   basis is a floor here and a starting point on the right.

   660 is what the heading needs to fall into three lines rather than four: at
   the drawn 96 it is the width of its longest pair of words, so the first two
   share a line and the last two take one each. The column narrows again at
   1200, where the row no longer has the room to give it. */
.hero__left {
  flex: 0 0 660px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-48);
}

/* align-items: flex-end matches the design's counter-axis MAX, which is what
   pushes the scroll marker to the right edge of this column. */
.hero__right {
  flex: 0 1 526px;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.hero__lead {
  margin: 0;
  font: var(--type-body-large);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   About

   The block itself is a component now, in components.css. What stays here is
   what belongs to this page alone: the stroke the design draws along its lower
   edge, and the padding it drops below the tablet so the block runs straight
   into the services grid.
   -------------------------------------------------------------------------- */

.about {
  border-bottom: 1px solid var(--divider-light);
}

@media (max-width: 1024px) {
  .about {
    border-bottom: none;
  }
}



/* --------------------------------------------------------------------------
   Audits row

   The homepage closes its card grid with a wide panel holding an intro and
   three audit cards on the blue gradient. It is content, not a card shape, so
   it stays with the page while the grid around it went to the shared file.
   -------------------------------------------------------------------------- */


/* -- Audits row ------------------------------------------------------------ */

/* Same surface as a card but none of its behaviour: no hover, no link over the
   whole box, and a row rather than a column. */
.services__audits {
  display: flex;
  align-items: center;
  gap: var(--space-64);
  padding: var(--space-40);
  background-color: var(--bg-white);
  border: 1px solid var(--border-card);
}

.services__audits-text {
  flex: 0 0 410px;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.services__audits-title {
  margin: 0;
  font: var(--type-h4);
  color: var(--text-primary);
}

.services__audits-lead {
  margin: 0;
  max-width: 395px;
  font: var(--type-body);
  color: var(--text-primary);
}

/* The blue panel behind the three audits. .inverted flips the text and the
   links; the gradient paints over the flat dark fill that comes with it. */
.audits {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background-image: var(--gradient-blue);
}

/* Line work drawn across the whole panel, so it is one image placed by the panel
   rather than three pieces placed by the cards. It is drawn at its own size and
   the panel clips the rest. The offsets were matched against the design render:
   the exported file is trimmed to the artwork rather than to the panel, so its
   canvas carries no origin to measure from. */
.audits__decor {
  position: absolute;
  top: -370px;
  left: -297px;
  width: 1346px;
  height: 1400px;
  max-width: none;
  pointer-events: none;
}

.audits__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  padding: var(--space-32);
}

/* The panels are separated by a band of page colour rather than a gap, because
   the gradient and the line work behind them run the full width and would
   otherwise show through.

   position: relative is what makes that work. The decor is absolutely
   positioned, so without it the band is painted first and the waves land on top
   of it. Positioned and later in the markup, the band covers them. The cards
   are already positioned for the same reason, and stay see-through because
   nothing gives them a background of their own. */
.audits__gap {
  position: relative;
  flex: none;
  width: 12px;
  background-color: var(--bg-white);
}

.audits__title {
  margin: 0;
  font: var(--type-h5);
  color: var(--text-primary);
}

.audits__text {
  margin: 0;
  font: var(--type-body);
  color: var(--text-primary);
}


/* --------------------------------------------------------------------------
   Why choose us

   A centred headline over three banners, each one a bordered panel holding an
   intro and a row of four illustrated tiles. Every banner's top and bottom edge
   continues across the page as a rule.
   -------------------------------------------------------------------------- */

.why__head {
  margin-bottom: var(--space-64);
}

.why__headline {
  max-width: 800px;
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Breakpoints

   The grid margin is handled once in variables.css. What is left here is the
   handful of blocks the design rearranges rather than just narrows.
   -------------------------------------------------------------------------- */

@media (max-width: 1600px) {
}

@media (max-width: 1440px) {
  /* The audits panel turns from a row into a column: the copy sits over the
     three cards instead of beside them, and the 64 between them becomes 20. */
  .services__audits {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-20);
  }

  .services__audits-text {
    flex: none;
  }

  .services__audits-lead {
    max-width: none;
  }

  /* In the row it took the space the copy left; in the column there is no free
     space to take, so it has to size to its own cards instead of collapsing. */
  .audits {
    flex: none;
  }
}

@media (max-width: 1200px) {
  /* Back to the drawn width: from here the row cannot spare the 219 the heading
     would need, and it goes back to four lines. */
  .hero__left {
    flex-basis: 441px;
  }

  .services__audits {
    flex-basis: 100%;
  }
}


/* --------------------------------------------------------------------------
   Tablet, 1024 and below

   Three things happen to every block: the vertical padding drops from 128 to
   100, the grid margin drops to 20 (in variables.css), and almost every rule
   goes. Only three survive, the two that frame the hero and the one above the
   footer's bottom bar.

   100 and 56 are off the spacing scale. They are the design's own values, and
   they appear here as literals rather than as invented tokens.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  .hero > .divider {
    display: block;
  }

  /* -- Section rhythm (the 100 step itself is in layout.css) ---------------- */
  /* The one section the design leaves open at the bottom, so it runs straight
     into the services block below it. */
  .about {
    padding-bottom: 0;
  }

  /* -- Hero ----------------------------------------------------------------- */

  /* The column holding the lead gives up 200 here; the headline column beside
     it keeps its 441 at every width. */
  .hero__right {
    flex-basis: 326px;
  }

  /* -- Services ------------------------------------------------------------- */

  .services__audits {
    padding: var(--space-32);
  }

  /* -- FAQ ------------------------------------------------------------------ */

}


/* --------------------------------------------------------------------------
   Tablet, 768 and below

   The grid margin and the section rhythm are already set by the 1024 block.
   What changes here is that most two-column blocks become one, and the two
   four-across rows become two by two.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* -- Hero ----------------------------------------------------------------- */

  /* The lead moves out of the right column and into the left one, between the
     headline and the button, while the scroll marker keeps a column of its own
     and hangs from the bottom of the stack. Both columns step out of the way so
     their children can be placed on one grid. */
  .hero__content {
    display: grid;
    grid-template-columns: 441px auto;
    justify-content: space-between;
    row-gap: var(--space-32);
  }

  .hero__left,
  .hero__right {
    display: contents;
  }

  .hero__left > .headline { grid-area: 1 / 1; }
  .hero__left > .btn      { grid-area: 3 / 1; justify-self: start; }

  .hero__lead {
    grid-area: 2 / 1;
  }

  .hero__scroll {
    grid-area: 1 / 2 / 4 / 3;
    align-self: end;
  }

  /* -- About ---------------------------------------------------------------- */

  /* -- Services ------------------------------------------------------------- */

  /* The three audit cards stack, so the rules between them turn from columns
     into rows. */
  .audits {
    flex-direction: column;
  }

  .audits__gap {
    width: auto;
    height: 12px;
  }
}


/* --------------------------------------------------------------------------
   Phone, 600 and below

   Written at 600 rather than at the 375 it is drawn on, for the reason given
   beside the grid margin: nothing between 375 and 768 is drawn, and a 390 or
   430 phone has to land here rather than on a layout built for 768.

   Almost every remaining two-across row becomes one, and the paddings step down
   once more: cards to 24, accordions and the article card to 20, the blog panel
   to 16.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

  /* The phone steps for the headline, the eyebrow and .section live with the
     components (components.css) and the grid (layout.css). */


  /* Every heading closes the distance to the content it introduces, from 64 to
     32. The two sections that sit tighter still, platforms at 24 and the call
     to action at 28, are heading to lead paragraph rather than heading to
     content, and the design keeps them where they are. Blog, FAQ and the hero
     are already at 32. */
  .why__head {
    margin-bottom: var(--space-32);
  }

  .about {
    padding-bottom: 0;
  }

  /* -- Hero ----------------------------------------------------------------- */

  /* One centred column carrying headline, lead and button in that order. The
     lead keeps the place it took at 768, in the stack rather than in a column
     of its own; only the scroll marker goes. Both columns step out of the way
     so their children sit on the one stack, which means the order below has to
     be written through .hero__left: display: contents changes how a child lays
     out, not whose child it is. */
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: var(--space-32);
  }

  .hero__left,
  .hero__right {
    display: contents;
  }

  .hero__left > .headline {
    order: 1;
    align-items: center;
  }

  /* The lead comes down from the large body size to the plain one, which is
     what takes it from seven lines to five. */
  .hero__lead {
    order: 2;
    font: var(--type-body);
    text-align: center;
  }

  /* The design hugs it to its label here rather than filling the column. The
     stack above stretches its children, so the button has to opt out of that
     rather than simply not asking for a width. */
  .hero__left > .btn {
    order: 3;
    align-self: center;
  }

  .hero__scroll {
    display: none;
  }

  .hero__main {
    padding-block: 96px;
  }

  /* -- About ---------------------------------------------------------------- */



  /* -- Services ------------------------------------------------------------- */

  /* The fades at the two ends close right up: 1.57 and 97.49 against the 13.9
     and 87.62 every wider frame carries. The block is far taller here, so the
     same proportions would spend hundreds of pixels fading.

  .services__audits {
    padding: var(--space-24);
  }

  /* -- FAQ ------------------------------------------------------------------ */

}