/* Article typography and image alignment.
 *
 * Scoped to the post body, so pages, the hero and the rest of the theme are
 * untouched. Loaded last, overriding Porto without editing it.
 *
 * The problems this fixes, measured across the 60 articles in the sitemap:
 *   - 14 images carry arbitrary inline pixel widths (554, 518, 508, 261, 717,
 *     617 …), every one different, so nothing lines up down the page.
 *   - 56 of 124 content images have no alignment class at all.
 *   - 62 are floated left or right, which crowds text at narrow widths.
 *   - Body text runs the full 1170px container — around 150 characters a line,
 *     roughly double a comfortable reading measure.
 */

.post-content,
.entry-content {
  /* A fixed length, not ch. The ch unit is relative to the element's own font
   * size, so 74ch on a 27px heading resolves ~350px wider than 74ch on body
   * text — headings and their underlines then overhang the text column they
   * are meant to sit above.
   *
   * 820px inside the theme's 1170px container. Widened from 680px, with the
   * body size raised to match: line length is what has to stay readable, not
   * the pixel width, and 820px at 17.5px is about 84 characters against 74
   * before. Widening alone would have pushed past 90, where the eye starts
   * losing its place on the return sweep. */
  --uz-measure: 820px;
  --uz-gold: #b0903b;
  --uz-ink: #2e353e;
  --uz-muted: #6a727c;
  --uz-rule: #e3e6ea;
}

/* ---- measure ----
 * Constrain the body container, not each element. The real structure is
 *   div.post-content > h2.entry-title + div.entry-content > p / figure
 * so paragraphs, headings and figures sit at different nesting depths. Giving
 * each one `max-width` plus auto margins centres it inside whichever parent it
 * happens to have, which produced equal widths at different left edges. One
 * constrained container makes everything inside share the same edges.
 */

.entry-content {
  max-width: var(--uz-measure);
  margin-left: auto;
  margin-right: auto;
}

/* The wrapper WordPress puts around block images would otherwise stop the
 * figure inside it from floating in the text flow. */
.entry-content .wp-block-image {
  display: contents;
}

.post-content p,
.entry-content p {
  font-size: 17.5px;
  line-height: 1.78;
  color: var(--uz-ink);
  margin: 0 0 1.35em;
}

.post-content li,
.entry-content li {
  line-height: 1.7;
  margin-bottom: .5em;
}

/* ---- justification ----
 * Justified text needs hyphenation, or the browser opens large word gaps to
 * fill each line and the eye follows the resulting vertical rivers instead of
 * the sentence. Below 768px the measure is too narrow for justification to
 * ever look right, so it reverts to ragged-right there.
 */

@media (min-width: 768px) {
  .post-content > p,
  .entry-content > p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 7 3 3;   /* don't hyphenate short words */
  }
}

/* ---- headings ---- */

.post-content h2,
.entry-content h2,
.post-content h3,
.entry-content h3,
.post-content h4,
.entry-content h4 {
  color: var(--uz-ink);
  text-align: left;      /* never justify a heading */
  hyphens: manual;
  line-height: 1.28;
}

.post-content h2,
.entry-content h2 {
  font-size: 27px;
  font-weight: 700;
  margin: 2.1em auto .75em;
  padding-bottom: .38em;
  border-bottom: 2px solid var(--uz-rule);
}

.post-content h3,
.entry-content h3 {
  font-size: 21px;
  font-weight: 600;
  margin: 1.7em auto .6em;
}

/* First heading shouldn't push a big gap under the title. */
.post-content > h2:first-child,
.entry-content > h2:first-child {
  margin-top: .4em;
}

/* ---- images ----
 * Inline width:NNNpx is written by the editor onto individual images, so it
 * takes !important to normalise. Height is released to auto at the same time,
 * otherwise the stored pixel height distorts the new width.
 */

.post-content img,
.entry-content img {
  height: auto !important;
  border-radius: 10px;
}

/* Unaligned and centred images fill the measure. WordPress puts the alignment
 * class on the figure, so the img itself is almost always unclassed. */
.entry-content img {
  display: block;
  width: 100% !important;
  max-width: 100%;
}

.entry-content > figure,
.entry-content figure:not(.alignleft):not(.alignright) {
  margin: 1.9em auto;
}

/* Floated images: a single shared width so successive ones line up, rather
 * than each sitting at whatever pixel width it was saved at. */
@media (min-width: 768px) {
  .entry-content figure.alignleft,
  .entry-content figure.alignright {
    width: 42%;
    max-width: 340px;
    margin-top: .4em;
    margin-bottom: 1.2em;
  }

  .entry-content figure.alignleft {
    float: left;
    margin-right: 1.9em;
  }

  .entry-content figure.alignright {
    float: right;
    margin-left: 1.9em;
  }
}

/* On phones a floated image leaves a column of text too narrow to read, so
 * every image becomes a full-width block. */
@media (max-width: 767px) {
  .entry-content figure,
  .entry-content figure.alignleft,
  .entry-content figure.alignright {
    float: none !important;
    width: auto !important;
    max-width: 100%;
    margin: 1.5em auto !important;
  }
}

/* ---- figures and captions ---- */

.post-content figure,
.entry-content figure {
  margin: 1.9em auto;
}

.post-content figcaption,
.entry-content figcaption {
  margin-top: .65em;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--uz-muted);
  text-align: center;
  font-style: italic;
}

/* ---- quotes and rules ---- */

.post-content blockquote,
.entry-content blockquote {
  margin: 1.9em auto;
  padding: .2em 0 .2em 1.4em;
  border-left: 3px solid var(--uz-gold);
  font-size: 18.5px;
  line-height: 1.65;
  color: var(--uz-ink);
  font-style: italic;
  text-align: left;
}

.post-content hr,
.entry-content hr {
  margin: 2.4em auto;
  border: 0;
  border-top: 1px solid var(--uz-rule);
}

.post-content a,
.entry-content a {
  color: #8a6f28;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-content a:hover,
.entry-content a:hover {
  color: var(--uz-gold);
}

/* Tables occasionally appear in these articles and overflow on small screens. */
.post-content table,
.entry-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

/* Clear floats so a following heading never rides up beside an image. */
.post-content h2,
.entry-content h2,
.post-content h3,
.entry-content h3 {
  clear: both;
}

/* ---- photo grid ----
 * A row of related photographs, as the client's PowerPoint mock-up laid them
 * out. Built as a grid of separate images rather than one flattened collage:
 * each keeps its own alt text, which image search reads individually, and the
 * row can reflow to two columns on a phone instead of shrinking four pictures
 * to thumbnails.
 */

.entry-content .uz-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 2em 0 .4em;
}

.entry-content .uz-photo-grid.uz-cols-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.entry-content .uz-photo-grid img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  margin: 0;
}

.entry-content .uz-photo-grid.uz-cols-2 img {
  aspect-ratio: 4 / 3;
}

/* Four across becomes two-by-two well before phone width — below roughly
 * 640px each column is under 150px, too small to read a photograph. */
@media (max-width: 700px) {
  .entry-content .uz-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

.entry-content .uz-photo-grid + figcaption,
.entry-content .uz-grid-caption {
  margin: .7em 0 2em;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--uz-muted);
  text-align: center;
  font-style: italic;
}

/* ---- byline and closing note ---- */

.entry-content .uz-byline {
  font-size: 14.5px;
  color: var(--uz-muted);
  font-style: italic;
  text-align: left;
  margin-bottom: 2em;
}

.entry-content .uz-note {
  margin-top: 2.6em;
  padding-top: 1.4em;
  border-top: 1px solid var(--uz-rule);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--uz-muted);
  text-align: left;
}