/*
 * AVO Defence Lawyers — blog archive, article and service-page geometry.
 *
 * A THIRD stylesheet, not an addition to avo-ui.css or
 * avo-enrich.css, for the same reason those two are already separate:
 * both carry corrections made against deployed sites, and dropping a
 * regenerated whole file over them would throw those away. This one can be
 * copied in beside them without touching either.
 *
 * EVERY RATIO HERE IS flex-grow ON A ZERO BASIS. None is a percentage.
 *
 * Two percentages that sum to 100, plus a gap, overflow their row by exactly
 * the gap. This project has measured that three times: 31% cards, a 62/38 team
 * row that wrapped at 1137px, and 48/52 feature rows at 829 and 717px tall.
 * `flex-basis: 0` with `min-width: 0` makes the grow numbers a true ratio of
 * the space that is left AFTER the gap, which is what 1.15:1 and 1.2:1 mean.
 *
 * And it has to be here rather than in the document, because an Elementor
 * container registers only align_self, order, size, grow and shrink from the
 * flex-item group. A `_flex_basis` key is accepted into the JSON, stored, and
 * ignored.
 *
 * Class names are doubled in places for the same reason as the other two
 * sheets: Elementor writes per-element CSS with a higher specificity than a
 * single class, and a rule that loses that contest looks exactly like a rule
 * that was never written.
 */

/* ---------------------------------------------------- the service page hero */

/* Text 1.15, image 1, and NOT 53.5% / 46.5%. */
.avo-service-hero__row.avo-service-hero__row {
  flex-wrap: nowrap;
  align-items: center;
}
.avo-service-hero__row > .avo-service-hero__text,
.avo-service-hero__row > .avo-service-hero__media {
  flex-basis: 0;
  min-width: 0;
  width: auto;
}
.avo-service-hero__row > .avo-service-hero__text { flex-grow: 1.15; }
.avo-service-hero__row > .avo-service-hero__media { flex-grow: 1; }

.avo-service-hero__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
}
.avo-service-hero__lead { max-width: 470px; }

/* ----------------------------------------------------- body beside a sidebar */

/*
 * 760 of body and 280 of sidebar, 80 apart. The body is capped rather than
 * grown to fill, because a measure wider than about 75 characters is harder to
 * read however much room there is.
 */
.avo-article-row.avo-article-row {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.avo-article-row > .avo-article-body {
  flex: 1 1 0;
  min-width: 0;
  max-width: 760px;
}
.avo-article-row > .avo-article-sidebar {
  flex: 0 0 280px;
  min-width: 0;
}
.avo-article-body p { max-width: 67ch; }

/* --------------------------------------------------- the numbered process row */

.avo-steps.avo-steps { flex-wrap: nowrap; }
.avo-steps > .avo-step {
  flex-basis: 0;
  flex-grow: 1;
  min-width: 0;
  border-top: 1px solid var(--avo-rule, #b3c9c6);
}
/* The number sits astride the rule, which is why it has a negative margin and
   its own background: it has to punch a hole in the line rather than sit on it. */
.avo-step__number.avo-step__number {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: -42px;
  border: 1px solid var(--accent-fill, #30333A);
  border-radius: 50%;
  background: var(--bg, #FAF6F1);
  color: var(--accent-fill, #30333A);
}

/* ------------------------------------------------------- the archive intro */

.avo-blog-intro .e-con-inner > * { max-width: 790px; }
.avo-blog-intro__lead { max-width: 670px; }

/* ------------------------------------------------------- the topic filter */

/*
 * Pills. The row is built by the plugin from categories that actually have
 * posts, so there is nothing here for an empty state to style — when there are
 * fewer than two topics the plugin removes the container entirely.
 */
.avo-blog-topics {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  border-block: 1px solid var(--avo-rule, #ded8cb);
  padding-block: 18px;
}
.avo-blog-topics a {
  display: inline-block;
  border: 1px solid var(--avo-rule, #ded8cb);
  border-radius: 30px;
  padding: 8px 18px;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  /* 8 + 8 + (13 x 1.4) = 34.2. Below the 44px pointer target, so the row gets
     its height from the touch area rather than from the text. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.avo-blog-topics a[aria-current="true"] {
  background: var(--avo-base, #15343e);
  border-color: var(--avo-base, #15343e);
  color: #fff;
}
.avo-blog-topics a:focus-visible {
  outline: 2px solid var(--accent-fill, #30333A);
  outline-offset: 2px;
}

/* --------------------------------------------------- the featured article */

/* 1.2 : 1, image left, article right. */
.avo-blog-feature__row.avo-blog-feature__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  background: var(--avo-surface2, #eee9df);
}
.avo-blog-feature__row > * { flex-basis: 0; min-width: 0; }
.avo-blog-feature__media { flex-grow: 1.2; }
.avo-blog-feature__text  { flex-grow: 1; padding: 38px; }
.avo-blog-feature__media img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------- the cards */

.avo-blog-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
}
.avo-blog-cards > .avo-blog-card {
  /* Three across, and a card that has to wrap keeps a sane minimum rather than
     squeezing to a sliver. 30px gap x 2 = 60, so 33.333% - 20px each. */
  flex: 1 1 calc(33.333% - 20px);
  min-width: 260px;
  border-bottom: 1px solid var(--avo-rule, #ded8cb);
  padding-bottom: 24px;
}
.avo-blog-cards img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------- pagination */

.avo-blog-pagination__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.avo-blog-pagination__nav .page-numbers {
  /* 44px, because a page number is a pointer target before it is a number. */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--avo-rule, #ded8cb);
  text-decoration: none;
  font-size: 14px;
}
.avo-blog-pagination__nav .page-numbers.current {
  background: var(--avo-base, #15343e);
  border-color: var(--avo-base, #15343e);
  color: #fff;
}
.avo-blog-pagination__nav .page-numbers.dots { border-color: transparent; }
.avo-blog-pagination__nav a:focus-visible {
  outline: 2px solid var(--accent-fill, #30333A);
  outline-offset: 2px;
}

/* A protected article shows WordPress's own password form, which is not one of
   ours and has no classes of ours on it. Give it the measure of the prose it
   stands in place of. */
.avo-article-prose--protected form { max-width: 520px; }
.avo-article-prose--protected input[type="password"] {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--avo-rule, #ded8cb);
}
.avo-article-prose--protected input[type="submit"] { min-height: 44px; }

/* --------------------------------------------------------- one article */

.avo-article-title .e-con-inner { max-width: 850px; text-align: center; }
.avo-article-cover img {
  width: 100%;
  max-height: 430px;
  object-fit: cover;
  display: block;
}
.avo-article-aside { align-self: flex-start; }

/* -------------------------------------------------------- inline imagery */

.avo-inline-image img {
  width: 100%;
  max-height: 330px;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------- the call to action */

.avo-blog-cta__action { align-items: flex-end; }
@media (max-width: 767px) {
  .avo-blog-cta__action { align-items: flex-start; }
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 1024px) {
  .avo-article-row.avo-article-row,
  .avo-service-hero__row.avo-service-hero__row,
  .avo-steps.avo-steps,
  .avo-blog-feature__row.avo-blog-feature__row {
    flex-wrap: wrap;
  }
  .avo-article-row > .avo-article-body,
  .avo-article-row > .avo-article-sidebar,
  .avo-service-hero__row > .avo-service-hero__text,
  .avo-service-hero__row > .avo-service-hero__media,
  .avo-blog-feature__row > * {
    flex: 1 1 100%;
    max-width: none;
  }
  .avo-steps > .avo-step { flex: 1 1 100%; }
  .avo-service-hero__media img { aspect-ratio: 4 / 3; }
  .avo-blog-feature__media img { min-height: 0; aspect-ratio: 4 / 3; }
  .avo-blog-feature__text { padding: 24px; }
  .avo-article-title .e-con-inner { text-align: left; }
  .avo-article-cover img { aspect-ratio: 4 / 3; max-height: none; }
  /*
   * THE SIDEBAR IS NOT REORDERED.
   *
   * The Codex reference moves it above the article on a phone with
   * `order: -1`. That puts it first visually and leaves it second in the DOM,
   * so a screen-reader user and a keyboard user meet the whole article before
   * the table of contents that was supposed to help them skip it, and the
   * focus ring jumps backwards up the page.
   *
   * This portfolio's rule is that visual order and source order agree. The
   * sidebar therefore follows the article on a phone. If the design intends it
   * first, the fix is to put it first in the document -- which is one line in
   * the template and costs nothing -- not to reorder it in CSS.
   */
}

@media (prefers-reduced-motion: no-preference) {
  .avo-blog-cards img { transition: filter .2s; }
  .avo-blog-card:hover img { filter: brightness(1.035); }
}