/* ITEM 4. "More recipes like this" -- 3 or 4 internal links at the foot of a
   recipe. app/relatedrecipes.py is the whole of it.

   IT BORROWS, IT DOES NOT INVENT, the same way static/site/recipe-v3-faq.css
   does: every colour, radius and inset below is a custom property
   recipe-v3.css already defines. --cream and #e8dfae are the nutrition
   panel's own ground and edge; --pad-l/--pad-r are the one content inset
   every full-width block in the recipe card starts and ends on; --maroon is
   the heading colour the other block headings use. The LINK colour is the
   literal #b4531a and deliberately NOT var(--orange): --orange is #f18032,
   which fails contrast on this cream ground. #b4531a is the accessible orange
   Tom chose on 8 October and the one tools/zem_verify.py asserts
   (rgb(180, 83, 26)) on a recipe's links. There is no --link custom property
   on this site yet; if one is ever added, this is the line to move onto it.
   So this block sits on the same two
   vertical lines as the ingredient box, the tool box, the nutrition panel and
   the questions block at every width, and a change to the recipe's palette
   moves it with everything else instead of leaving it behind.

   ITS OWN FILE, requested by templates/recipe_v3.html only when the block
   renders, so a recipe with no siblings pays nothing for it -- not even the
   request.

   THE LINKS WORK WITH NO CSS AT ALL. The markup is a <ul> of <a>; with this
   file missing, a reader and a crawler both get a plain list of links to four
   recipes, which is the whole of what the item asked for. Everything here is
   appearance. */
.ttc-rel{
  background:var(--cream,#fffeec);
  border:1px solid #e8dfae;
  border-radius:var(--r-md,30px);
  margin-top:38px;
  padding:33px calc(var(--pad-r,56px) - 1px) 30px calc(var(--pad-l,56px) - 1px);
}
.ttc-rel__head{
  font-size:var(--nuthead-size,26px);
  font-weight:var(--nuthead-weight,700);
  color:var(--maroon,#51010e);
  margin:0 0 10px;
}
/* Two columns where there is room for two, one where there is not. `auto-fit`
   with a 260px floor means the switch happens when the LINKS need it rather
   than at a width somebody picked, so a long recipe name never has to wrap
   into a column too narrow to hold it. */
.ttc-rel__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 34px;
}
.ttc-rel__item{
  border-top:1px solid #e8dfae;
  margin:0;
  padding:0;
}
/* The top rule belongs to the row, not to the first row of each column, so on
   a two-column grid the first TWO items lose it and on one column only the
   first does. :nth-child(-n+2) cannot know the column count, so the rule is
   drawn on every item and removed at the top of the box with a negative
   margin on the list instead -- which is the same answer at every width. */
.ttc-rel__list{margin-top:0}
.ttc-rel__item:first-child,
.ttc-rel__item:nth-child(2):not(:last-child){border-top-color:transparent}
@media (max-width:659px){
  .ttc-rel__item:nth-child(2){border-top-color:#e8dfae}
}
.ttc-rel__link{
  display:block;
  padding:14px 0;
  font-size:var(--small-size,17px);
  font-weight:600;
  line-height:1.45;
  color:#b4531a;
  text-decoration:none;
}
.ttc-rel__link:hover,
.ttc-rel__link:focus-visible{text-decoration:underline}
.ttc-rel__link:focus-visible{outline:2px solid var(--maroon,#51010e);outline-offset:3px}
@media (max-width:1024px){
  .ttc-rel{padding-left:calc(var(--pad-l,22px) - 1px);padding-right:calc(var(--pad-r,22px) - 1px)}
}
@media (max-width:600px){
  .ttc-rel{padding-top:24px;padding-bottom:16px;border-radius:var(--r-md,22px)}
}
/* Print: a sheet of paper cannot be clicked, and four recipe names with no
   addresses under them are four lines of noise on a printed recipe. */
@media print{ .ttc-rel{display:none} }