/* =====================================================================
   A PHOTOGRAPH DROPPED INTO TEXT, AS THE READER SEES IT.

   The editor puts an image into a direction, between two directions, or into
   the SEO article, and stores it as markup in the page. This is the
   stylesheet that lays that markup out on the PUBLIC page, so what Tom saw
   in the editor is what a reader gets.

   NOTHING ON THE SITE USES THESE CLASSES TODAY. `ed2-seofig`, `ed2-imgs` and
   `ed2-gap` appear in no stored page: round 105 is the first thing that can
   write one, and nothing outside a candidate database has written one. So
   this file changes no published page -- and it is only ASKED FOR by a page
   whose markup carries one of the classes (the rule app/routes.py already
   uses for flags.css), so a page without one does not pay for it either.
   Checked again in round 107 against all 354 stored bodies and all 726
   `main_left` columns: 0 carry any of the three.

   THE FILL RULES ARE THE SAME AS THE EDITOR'S, and they have to be: the
   editor's promise is that the drop self-formats to a defined look, and a
   second copy of that look is a second thing to keep in step.

   ROUND 107 CHANGES TWO OF THEM, to the two rules Tom asked the editor for:

     C.1 / C.2  IN THE SEO ARTICLE the picture is beside the text and exactly
                as TALL as it, and the section's headline stays inside the text
                column rather than sitting on a line above the picture. A
                float cannot do either -- its height is its content's, and
                text after it starts below it -- so the section gets a padded
                side and the picture is placed in that padding, stretched top
                to bottom.
     D.1        UNDER A STEP the pictures are in the rows the published recipe
                already draws: `app/recipe_v3.photo_rows` -- as many threes as
                possible, a remainder of one given a three back so the tail is
                2+2, one picture a banner -- at the three ratios measured off
                Tom's mockups in static/site/recipe-v3-stepshots.css. The row
                carries `n1`, `n2` or `n3`, which the editor writes, exactly as
                `.pshots nN` does. So a step's photographs look the same
                whether they came from the document or from a drag, and no
                picture is ever left alone on a second row.
   ===================================================================== */

/* ---- in the SEO article: half width, as tall as the words beside it --- */

/* The SECTION is the containing block, so the two rules below are a pair and
   neither works alone. `:has()` is what keeps a section with no picture in it
   laid out exactly as it was. */
.gt-block.text .text:has(> .ed2-seofig),
.gt-block.text .content:has(> .ed2-seofig) { position: relative; min-height: 190px; }
.gt-block.text .text:has(> .ed2-seofig--left),
.gt-block.text .content:has(> .ed2-seofig--left) { padding-left: calc(50% + 6px); }
.gt-block.text .text:has(> .ed2-seofig--right),
.gt-block.text .content:has(> .ed2-seofig--right) { padding-right: calc(50% + 6px); }

.ed2-seofig {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% - 12px);
  margin: 0;
}
.ed2-seofig--left { left: 0; }
.ed2-seofig--right { right: 0; }
.ed2-seofig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.ed2-seofig figcaption {
  font-size: .85rem;
  color: #6d6357;
  padding-top: 5px;
  line-height: 1.45;
}

/* A float must not escape the block it was dropped in and start wrapping
   the NEXT section's text. Kept from round 105: the picture is not a float
   any more, but a stored page written by round 105 or 106 may carry one, and
   a clear costs nothing on a page that has none. */
.gt-block.text .content::after,
.gt-block.text .text::after { content: ""; display: block; clear: both; }

/* ON A PHONE a half-width picture is a column of three words. Every one of
   them goes full width below 620px, which is where the measured column stops
   being wide enough for text beside a picture. */
@media (max-width: 620px) {
  .gt-block.text .text:has(> .ed2-seofig),
  .gt-block.text .content:has(> .ed2-seofig) { min-height: 0; }
  .gt-block.text .text:has(> .ed2-seofig--left),
  .gt-block.text .content:has(> .ed2-seofig--left),
  .gt-block.text .text:has(> .ed2-seofig--right),
  .gt-block.text .content:has(> .ed2-seofig--right) { padding-left: 0; padding-right: 0; }
  .ed2-seofig,
  .ed2-seofig--left,
  .ed2-seofig--right {
    position: static;
    float: none;
    width: 100%;
    margin: 10px 0 14px;
  }
  .ed2-seofig img { height: auto; }
}

/* ---- under a step, and between two steps ----------------------------- */
/* D.1: THE PUBLISHED PAGE'S OWN GRID. The three ratios and the gutter are
   read from `.ttc-v2`'s own tokens where they exist, so a change to Tom's
   measured numbers reaches these pictures as well, and fall back to the same
   values written out for a page that does not define them. */
.ed2-imgs,
.ed2-gap {
  display: grid;
  column-gap: var(--pshot-gap, 2.8%);
  row-gap: 22px;
  align-items: start;
  grid-template-columns: 1fr;
  margin: 12px 0;
}
.ed2-imgs + .ed2-imgs,
.ed2-gap + .ed2-gap { margin-top: var(--pshot-gap, 2.8%); }
.ed2-imgs.n1, .ed2-gap.n1 { grid-template-columns: 1fr; }
.ed2-imgs.n2, .ed2-gap.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed2-imgs.n3, .ed2-gap.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed2-imgs > figure,
.ed2-gap > figure { margin: 0; display: flex; flex-direction: column; }
.ed2-imgs.n1 > figure > img, .ed2-gap.n1 > figure > img { aspect-ratio: var(--ratio-1, 2.38); }
.ed2-imgs.n2 > figure > img, .ed2-gap.n2 > figure > img { aspect-ratio: var(--ratio-2, 1.645); }
.ed2-imgs.n3 > figure > img, .ed2-gap.n3 > figure > img { aspect-ratio: var(--ratio-3, 1.75); }
.ed2-imgs img,
.ed2-gap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--shot-r, 16px);
}
.ed2-imgs figcaption,
.ed2-gap figcaption {
  font-size: .85rem;
  color: #6d6357;
  padding-top: 5px;
}
/* A ROW WRITTEN BEFORE ROUND 107 HAS NO `nN` CLASS, and the pages that could
   carry one are the candidate databases round 105 and 106 wrote into. The
   old count-by-`:has()` rule is kept for them, after the `nN` rules so a row
   that has a class wins. */
.ed2-imgs:not([class*=" n"]):has(> :nth-child(2)),
.ed2-gap:not([class*=" n"]):has(> :nth-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ed2-imgs:not([class*=" n"]):has(> :nth-child(3)),
.ed2-gap:not([class*=" n"]):has(> :nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 620px) {
  /* two across is still readable on a phone; three is not */
  .ed2-imgs.n3, .ed2-gap.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed2-imgs.n3 > figure > img, .ed2-gap.n3 > figure > img {
    aspect-ratio: var(--ratio-2, 1.645);
  }
}