/* Blog listing and blog post.
   Boards: "Blog", "Blog mobile", "Blog post", "Blog post mobile". */

.phero--blog { background: var(--oxblood-deep); }
.phero--blog .phero__photo { opacity: .22; }
.phero--blog .phero__wash {
  background: linear-gradient(90deg, rgba(42, 8, 9, .66) 0%, rgba(42, 8, 9, .92) 46%, rgba(42, 8, 9, 1) 64%);
}

/* ---------------------------------------------------------------------------
   Search and the two practice shortcuts beside the hero
   --------------------------------------------------------------------------- */
.blogaside { display: flex; flex-direction: column; gap: 18px; }
.blogsearch {
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line-dark-2);
  border-radius: 8px;
  padding: 18px;
}
.blogsearch label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pink);
}
.blogsearch__row { display: flex; gap: 8px; }
.blogsearch input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 1px solid var(--line-dark-2);
  border-radius: 4px;
  background: #fff;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
}
.blogsearch button {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 0;
  border-radius: 4px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.blogsearch button:hover { background: var(--red-hover); }
.blogsearch__count { margin: 10px 0 0; font-size: 13px; color: var(--on-dark-2); }
.blogsearch__count:empty { display: none; }

.blogaside__links {
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line-dark-2);
  border-radius: 8px;
  padding: 18px;
}
.blogaside__h {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pink);
}
.blogaside__links a {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-top: 1px solid var(--line-dark-2);
}
.blogaside__links a:first-of-type { border-top: 0; }
.blogaside__links a:hover { color: var(--pink); }

/* ---------------------------------------------------------------------------
   Filter bar
   --------------------------------------------------------------------------- */
.blogbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: clamp(22px, 2.2vw, 30px);
  border-bottom: 1px solid var(--border);
}
.blogbar__filters { display: flex; gap: 10px; flex-wrap: wrap; }
/* The board sets these at 46px with uppercase 14px labels, marks the active
   one in red rather than ink, and keeps En espanol in the same group as a
   fourth chip instead of beside the disclaimer. */
.pill--filter, .blogbar__es {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid var(--border-2);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.pill--filter:hover, .blogbar__es:hover { border-color: var(--red); color: var(--red); }
.pill--filter.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.blogbar__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.blogbar__es {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  text-decoration: none;
}
.blogbar__note { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Featured post
   --------------------------------------------------------------------------- */
.featured {
  margin-top: clamp(28px, 3.1vw, 44px);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.featured__img { display: block; }
.featured__img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.featured__b { padding: clamp(24px, 2.8vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.featured__tags { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.featured__b h2 { margin: 0; }
.featured__b h2 a { color: var(--ink); text-decoration: none; }
.featured__b h2 a:hover { color: var(--red); }
.featured__x { margin: 0; font-size: clamp(16px, 1.32vw, 18px); line-height: 1.6; color: var(--body); }
.featured__cta { margin: auto 0 0; }

/* ---------------------------------------------------------------------------
   Post grid
   --------------------------------------------------------------------------- */
.blog__gridh { margin-top: clamp(36px, 3.8vw, 54px); }
.pgrid {
  margin-top: clamp(22px, 2.4vw, 32px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
  align-items: stretch;
}
.pcard {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pcard__img { display: block; }
.pcard__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pcard__b { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.pcard__cat { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.pcard__h { margin: 0; font-family: var(--cond); font-size: clamp(22px, 1.73vw, 25px); font-weight: 700; line-height: 1.1; }
.pcard__h a { color: var(--ink); text-decoration: none; }
.pcard__h a:hover { color: var(--red); }
.pcard__x { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.pcard__by { margin: auto 0 0; font-size: 13px; color: var(--muted); }
.pcard__by strong { color: var(--text-2); }
.pgrid__empty { margin: clamp(22px, 2.4vw, 32px) 0 0; font-size: 16px; color: var(--body); }
.linklike {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Spanish posts
   --------------------------------------------------------------------------- */
.esposts { position: relative; overflow: hidden; }
.esposts__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .85; }
.esposts__in {
  position: relative;
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: clamp(28px, 4.17vw, 60px);
  align-items: start;
}
.esposts__p { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--on-dark-3); }
.eslist { margin: 0; padding: 0; list-style: none; }
.eslist li { border-top: 1px solid rgba(255, 255, 255, .16); }
.eslist li:first-child { border-top: 0; }
.eslist a {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  color: #fff;
  text-decoration: none;
  font-size: clamp(16px, 1.32vw, 18px);
  font-weight: 600;
}
.eslist a:hover { color: var(--pink); }
.eslist svg { flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Blog post
   --------------------------------------------------------------------------- */
.phero--post { background: var(--ink); }
.phero--post .phero__photo { opacity: .26; }
.phero--post .phero__wash {
  background: linear-gradient(90deg, rgba(26, 18, 19, .62) 0%, rgba(26, 18, 19, .92) 48%, rgba(26, 18, 19, 1) 66%);
}
.postmeta {
  margin-top: clamp(22px, 2.2vw, 30px);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.postmeta__who { display: flex; align-items: center; gap: 12px; }
.postmeta__who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center top; }
.postmeta__who span { display: flex; flex-direction: column; }
.postmeta__who em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); }
.postmeta__who a, .postmeta__who strong { color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; }
.postmeta__who a:hover { text-decoration: underline; color: #fff; }
.postmeta__who small { font-size: 13px; color: var(--on-dark-2); }
.postmeta__dates { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--on-dark-2); }
.postmeta__rev { margin: 12px 0 0; font-size: 13px; color: var(--on-dark-2); }

/* The board is three columns - 240 index, 700 article, 260 talk-to-a-lawyer
   card - with the outer two sticky. The card used to sit inside the article
   as its last block, so it scrolled away with the text. */
.postwrap {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 260px;
  gap: clamp(24px, 2.8vw, 40px);
  align-items: start;
}
.postindex {
  position: sticky;
  top: 96px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.postindex__h {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.postindex ol { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.postindex li { counter-increment: s; }
.postindex a {
  min-height: 36px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}
.postindex a::before {
  content: counter(s, decimal-leading-zero);
  flex-shrink: 0;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
}
.postindex a:hover { color: var(--red); }
.postindex__es {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.postindex__es a { display: inline-flex; min-height: 40px; font-weight: 700; color: var(--red); }

/* The article itself */
.post { max-width: 76ch; }
.post__hero { margin: 0 0 clamp(22px, 2.2vw, 30px); }
.post__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); display: block; }
.post > h2 {
  margin: clamp(32px, 3.3vw, 46px) 0 14px;
  font-family: var(--cond);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
  scroll-margin-top: 110px;
}
.post > h3 {
  margin: clamp(22px, 2.2vw, 30px) 0 10px;
  font-family: var(--cond);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.post > h4, .post > h5 {
  margin: 20px 0 8px;
  font-size: 18px;
  font-weight: 700;
}
.post p { margin: 0 0 18px; font-size: clamp(16px, 1.32vw, 18px); line-height: 1.75; color: var(--body); }
.post ul, .post ol { margin: 0 0 20px; padding-left: 0; list-style: none; }
.post li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: clamp(16px, 1.25vw, 17px);
  line-height: 1.7;
  color: var(--body);
}
.post ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.post ol { counter-reset: n; }
.post ol > li { counter-increment: n; }
.post ol > li::before {
  content: counter(n) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 700;
  color: var(--red);
}
/* Prose links only. As a bare `.post a` this was (0,1,1) and repainted the
   buttons inside the article too - the WhatsApp button in the CTA card is
   .btn--ghost-light, built white-on-dark, and came out red on oxblood at
   2.91:1. A button always carries a class; a prose link never does. */
.post a:not([class]) { color: var(--red); }
.post strong { color: var(--text-2); }
.post table { width: 100%; border-collapse: collapse; margin: 0 0 20px; display: block; overflow-x: auto; }
.post th, .post td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; font-size: 15px; }
.post th { background: var(--surface-3); }

/* Blocks the Blog post board adds inside the article */
.symptoms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; }
.symptom {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.symptom .badge { margin-bottom: 8px; }
.symptom h3 {
  margin: 0 0 8px;
  font-family: var(--cond);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.symptom p { margin: 0; font-size: 15px; line-height: 1.6; }
/* Doubled to (0,2,0): a broad `.block p` rule out-ranks a single class
   and was deciding this element size. Same pattern as site.css. */
.post__sources.post__sources {
  padding: 14px 16px;
  background: var(--surface-3);
  border-left: 3px solid var(--red);
  border-radius: 0 4px 4px 0;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.post__steps > li { padding-left: 30px; }
.post__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 20px; }
.post__stats div { padding-top: 16px; border-top: 2px solid var(--red); display: flex; flex-direction: column; gap: 4px; }
.post__stats strong { font-family: var(--cond); font-size: clamp(30px, 2.5vw, 36px); font-weight: 700; line-height: 1; color: var(--red); }
.post__stats span { font-size: 15px; line-height: 1.5; color: var(--body); }

/* Doubled to (0,2,0): a broad `.block p` rule out-ranks a single class
   and was deciding this element size. Same pattern as site.css. */
.post__fine.post__fine {
  margin-top: clamp(28px, 2.8vw, 40px);
  padding-top: clamp(20px, 2.1vw, 28px);
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.post__keep { margin-top: clamp(24px, 2.5vw, 34px); }
.post__keep h2 {
  margin: 0 0 12px;
  font-family: var(--cond);
  font-size: clamp(24px, 1.94vw, 28px);
  font-weight: 700;
  text-transform: uppercase;
}

/* The author card and the CTA under the article */
.postauthor {
  margin-top: clamp(28px, 3.1vw, 44px);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(22px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.postauthor img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center top; }
/* Doubled up to (0,2,0): the article's own `.post p` is (0,1,1) and these
   two are <p> inside the article, so a single class lost to it. */
.postauthor .postauthor__h { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.postauthor .postauthor__name { margin: 0 0 8px; font-family: var(--cond); font-size: 26px; font-weight: 700; text-transform: uppercase; }
/* Only the unclassed paragraph. As a bare `.postauthor p` this was (0,1,1)
   and out-ranked .postauthor__name and __h, which are <p> too; as
   :where(.postauthor) p it was (0,0,1) and lost to the article's own
   `.post p`. :not([class]) is (0,1,2) - above both, and it cannot touch
   a paragraph that carries a component class. */
.postauthor p:not([class]) { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--body); }
.postauthor__link a, .postauthor__link .is-plain {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}

@media (max-width: 1180px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured, .esposts__in, .postwrap { grid-template-columns: minmax(0, 1fr); }
  .postindex { position: static; }
  .featured__img img { min-height: 260px; }
}

@media (max-width: 760px) {
  .pgrid, .symptoms, .post__stats { grid-template-columns: minmax(0, 1fr); }
  .phero--blog .phero__photo, .phero--post .phero__photo { height: 300px; opacity: .3; }
  .phero--blog .phero__wash, .phero--post .phero__wash {
    background: linear-gradient(180deg, rgba(26, 18, 19, .4) 0%, rgba(26, 18, 19, .92) 60%, rgba(26, 18, 19, 1) 100%);
  }
  .blogbar { align-items: flex-start; }
  .postauthor { grid-template-columns: minmax(0, 1fr); }
  .post > h2 { font-size: 26px; }
}

/* The talk-to-a-lawyer card: the third column on desktop, sticky beside the
   article; below 1100px it stacks under the text and the margin comes back. */
.postcta {
  position: sticky;
  top: 24px;
  background: var(--oxblood);
  border-radius: var(--radius);
  padding: clamp(24px, 2.5vw, 34px);
  color: #fff;
}

/* Stacked under the article below 1180px, the width where .postwrap collapses
   to one column. The base rule above declares position, so this has to come
   after it rather than in that earlier block. */
@media (max-width: 1180px) {
  .postcta { position: static; margin-top: clamp(22px, 2.2vw, 30px); }
}
/* Doubled to (0,2,0): a broad `.block p` rule out-ranks a single class
   and was deciding this element size. Same pattern as site.css. */
.postcta__eyebrow.postcta__eyebrow {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pink);
}
/* Doubled to (0,2,0): a broad `.block p` rule out-ranks a single class
   and was deciding this element size. Same pattern as site.css. */
.postcta__h.postcta__h {
  /* The card sets color:#fff, but `.post p` DECLARES a colour, so inheritance
     never gets a chance and the heading rendered body-brown on oxblood at
     2.16:1. Specificity alone could not fix it - the rule has to say white. */
  color: #fff;
  margin: 0 0 8px;
  font-family: var(--cond);
  font-size: clamp(26px, 2.08vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
/* Doubled to (0,2,0): a broad `.block p` rule out-ranks a single class
   and was deciding this element size. Same pattern as site.css. */
.postcta__p.postcta__p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--on-dark-3); }
.postcta__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.postcta__btns .ctaband__tel { min-height: 52px; font-size: 24px; }
/* Doubled to (0,2,0): a broad `.block p` rule out-ranks a single class
   and was deciding this element size. Same pattern as site.css. */
.postcta__stars.postcta__stars { margin: 16px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-dark-2); }

@media (max-width: 760px) {
  .postcta__btns { flex-direction: column; align-items: stretch; }
  .postcta__btns .btn, .postcta__btns .ctaband__tel { justify-content: center; }
}

/* Pagination. Board "Blog": the nav sits under the grid, 48px squares with
   1.5px borders, the current page filled red, a disabled Previous in grey,
   an ellipsis, and Next page as an ink button. Board "Blog mobile" keeps the
   squares at 44px, drops Previous and the ellipsis, and puts a "Page n of m"
   label on the left instead. */
.pager {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
}
.pager__page { display: none; }
.pager__nums { display: flex; align-items: center; gap: 10px; }
.pager__n {
  width: 48px; height: 48px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-2); border-radius: 4px;
  color: var(--ink); text-decoration: none;
}
.pager__n:hover { border-color: var(--ink); }
.pager__n.is-on { border-color: transparent; background: var(--red); color: #FFFFFF; }
.pager__step,
.pager__next {
  height: 48px; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  border-radius: 4px;
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
}
.pager__step { padding: 0 18px; color: var(--ink); }
.pager__step[aria-disabled="true"] { color: #B3A39C; }
.pager__next { padding: 0 20px; background: var(--ink); color: #FFFFFF; }
.pager__next:hover { background: var(--ink-deep); }
.pager__next[aria-disabled="true"] { background: none; color: #B3A39C; padding: 0 18px; }
.pager__dots { width: 32px; text-align: center; color: var(--muted); }

@media (max-width: 760px) {
  .pager { margin-top: 12px; justify-content: space-between; gap: 8px; }
  .pager__page { display: block; font-size: 14px; font-weight: 600; color: var(--muted); }
  .pager__step,
  .pager__dots { display: none; }
  .pager__nums { gap: 8px; }
  .pager__n { width: 44px; height: 44px; }
  .pager__next { height: 44px; padding: 0 16px; gap: 6px; font-size: 13px; }
  .pager__nextword { display: none; }
}

/* Search results. A search covers every post, not just the ten on this page,
   so its matches are rendered from the page's post index in place of the
   paginated grid. */
.psearch { display: flex; flex-direction: column; gap: 0; }
.presult {
  display: flex; gap: 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--border);
}
.presult__img { width: 108px; height: 72px; flex-shrink: 0; border-radius: 4px; overflow: hidden; }
.presult__img img { width: 100%; height: 100%; object-fit: cover; }
.presult__cat {
  margin: 0 0 4px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red);
}
.presult__h {
  margin: 0; font-family: var(--cond);
  font-size: 22px; font-weight: 700; line-height: 1.05; text-transform: uppercase;
}
.presult__h a { color: var(--ink); text-decoration: none; }
.presult__h a:hover { text-decoration: underline; }
.presult__by { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

@media (max-width: 760px) {
  .presult__img { width: 76px; height: 56px; }
  .presult__h { font-size: 19px; }
}

/* At 280 the row needs 269px of the 248 it has. The "Page 1 of 3" label is the
   part that can go: the current page is already the filled square, and this
   keeps every square and the Next button at their 44px touch target, which
   the plan requires. */
@media (max-width: 289px) {
  .pager__page { display: none; }
}