/* The pieces the home page, the search page and the missing page share: the title block with the
   search box (and, on the home page, the desk scene beside it), the small accent label, the
   hand-cut rules and the arrow links. Sizes and spacing
   are copied from the approved reference pages (the title row, the search box, the labels), so a
   change here is a change to what Azhar approved. The colours are the look's own (blog-look.css),
   so both looks come with no extra rules. Breakpoints are the page's: 1100 and up, 600 to 1099,
   under 600. */

/* ----------------------------------------------------------------------------- small shared things */

/* the small accent label over a part of the page ("Contents", "Newest posts", "Search the blog") */
.blog-label {
  margin: 0;
  color: var(--accent);
  font: 600 14px/1.2 var(--font-text);
  letter-spacing: 0.02em;
}

.blog-rule {
  margin: 10px 0 12px;
}
.blog-rule svg {
  display: block;
  width: 100%;
  height: 6px;
  overflow: visible;
}
.blog-rule path {
  fill: none;
  stroke: var(--rule);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* A list of posts under a label and its rule: Contents on the home page (its own list is in
   blog-home.css), Newest posts on the search page and the missing page. The rows are PostRow
   (blog-look.css). */
.blog-rule-label {
  margin: 6px 0 0;
}
.blog-newest-list {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

/* A link in the accent colour with a hand-drawn arrow after it ("See all 3 posts"), or before it
   for a link that points back. */
.blog-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--accent);
  font: 600 15px/1 var(--font-text);
}
.blog-arrow-link:hover {
  color: var(--accent-lit);
}
.blog-arrow {
  flex: none;
  width: 30px;
  height: 12px;
  overflow: visible;
}
.blog-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.blog-arrow-link-back .blog-arrow {
  transform: scaleX(-1);
}

/* ----------------------------------------------------------------------------- the title block */

/* "Blog" and its line at the left, the search box at the right on the title's baseline. Under
   1100px the box moves under the line. */
.blog-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  column-gap: 48px;
  align-items: baseline;
  margin-top: 10px;
}
.blog-title-name {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--ink);
  font: 500 84px/1 "Newsreader", Georgia, serif;
  letter-spacing: -0.02em;
}
.blog-title-line {
  grid-column: 1;
  grid-row: 2;
  margin: 4px 0 0;
  color: var(--ink);
  font: 400 22px/1.4 "Newsreader", Georgia, serif;
}
.blog-title .blog-search {
  grid-column: 2;
  grid-row: 1;
}

/* ----------------------------------------------------------------------------- the search box */

.blog-search {
  position: relative;
  margin: 0;
}
.blog-search-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
/* in the title block the label and the count float above the box, on the title's line */
.blog-title .blog-search-top {
  position: absolute;
  top: -30px;
  right: 0;
  left: 0;
  margin: 0;
}
.blog-search-label {
  color: var(--accent);
  font: 600 14px/1.2 var(--font-text);
  letter-spacing: 0.02em;
}
.blog-count {
  color: var(--ink-soft);
  font: 500 14px/1 var(--font-data);
}
.blog-search-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.blog-search-field {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.blog-search-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  box-sizing: border-box;
  padding: 0 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 22px/1.2 "Newsreader", Georgia, serif;
}
.blog-search-rule {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.blog-search-rule svg {
  display: block;
  width: 100%;
  height: 6px;
  overflow: visible;
}
.blog-search-rule path {
  fill: none;
  stroke: var(--rule-strong);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.blog-search-button {
  position: relative;
  flex: none;
  height: 44px;
  min-width: 112px;
  margin-bottom: 2px;
  padding: 0 24px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: 600 14px/1 var(--font-text);
  cursor: pointer;
}
.blog-search-button:hover {
  color: var(--accent-lit);
}
.blog-search-button svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.blog-search-button path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.blog-search-button span {
  position: relative;
}

/* With a picture beside it (the home page's desk scene, in BlogTitle's slot): the title block
   stacks its parts, title, then its line, then the search box with the count over it, and the
   picture sits at the right, centred on the block's height. */
.blog-title-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 40px;
  align-items: center;
}
.blog-title-top .blog-title {
  display: block;
  margin-top: 18px;
}
.blog-title-top .blog-search {
  max-width: 470px;
  margin-top: 40px;
}
.blog-title-top .blog-search-top {
  position: static;
  margin: 0 0 6px;
}

@media (max-width: 1099px) {
  .blog-title {
    display: block;
    margin-top: 18px;
  }
  .blog-title-name {
    font-size: 72px;
  }
  .blog-title-line {
    margin-top: 8px;
    text-wrap: balance;
  }
  .blog-title .blog-search {
    margin-top: 30px;
  }
  .blog-title .blog-search-top {
    position: static;
    margin-bottom: 6px;
  }
  /* the picture goes under the search box */
  .blog-title-top {
    display: block;
  }
  .blog-title-top .blog-search {
    max-width: none;
    margin-top: 28px;
  }
  .blog-search-row {
    flex-wrap: wrap;
    gap: 10px 20px;
  }
  .blog-search-field {
    flex: 1 1 100%;
  }
  .blog-search-button {
    margin-bottom: 0;
  }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .blog-search-row {
    flex-wrap: nowrap;
  }
  .blog-search-field {
    flex: 1 1 auto;
  }
  .blog-search-button {
    margin-bottom: 2px;
  }
}
@media (max-width: 374px) {
  .blog-search-field input {
    font-size: 19px;
  }
}