/* The nationality mark on a recipe card.
 *
 * Its own file because the flag appears wherever a recipe card does — the
 * homepage, every category archive, every page/N of one, the search results —
 * and those pages have no reason to load the Recipe Bar's filter panel.
 *
 * Placement and size come from Tom's `Nationality.png`: a circle in the card's
 * top band, vertically centred, a little larger than the chef avatar beside it,
 * with a thin ring and no drop shadow. Measured off that file, the flag is
 * 0.55 of the band's height, which is 3.8rem here and 4.3rem on a phone.
 * `.top` is already `position: relative` in the theme, so the mark can be
 * placed against it without touching the theme's own layout — the chef label
 * is moved aside with padding rather than by changing what `.top` is.
 */
.ttc-flag {
  position: absolute;
  left: 3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3.8rem;
  height: 3.8rem;
  line-height: 0;
}
.ttc-flag img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

/* Only where a flag actually went in: a card with no nationality keeps the
 * theme's own spacing to the pixel. */
.ttc-flag ~ .chef-label-holder { padding-left: 5.4rem; }

@media screen and (max-width: 750px) {
  /* The theme drops `.top`'s padding from 3rem to 2rem here. */
  .ttc-flag { left: 2rem; width: 4.3rem; height: 4.3rem; }
  .ttc-flag ~ .chef-label-holder { padding-left: 5.9rem; }
}