/* ---------------------------------------------------------------------------
   Articles and the news index drawn from the blog database (src/lib/blog/render.ts),
   inside the mirrored Avada pages. Sizes and colours are read off the mirrored
   article and index pages at 1536px and 390px wide:

     body text       Barlow Semi Condensed 26/39 (23/34.5 on phones), #7e7887
     headings        600, #060607; h2 30/36 (25/30), h3 30/36 (22/27)
     links           #fa5600 (Avada's link colour)
     index card      title 30/36 600 #fa5600, meta 18/27 #7e7887
     related card    title 30/36 600 #fed900
     rules           0.8px solid rgba(214,213,216,.75)
     featured image  10px corners, pulled up over the title bar's lower edge

   Bump CSS_VERSION in render.ts when this file changes.
--------------------------------------------------------------------------- */

.pb-wrap {
  --pb-text: #7e7887;
  --pb-ink: #060607;
  --pb-link: #fa5600;
  --pb-rule: rgba(214, 213, 216, 0.75);
  box-sizing: border-box;
  max-width: 1301px;
  margin: 0 auto;
  padding: 0 32px 40px;
  font-family: 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif;
  color: var(--pb-text);
}

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

.pb-post__hero { margin: -65px 0 56px; position: relative; z-index: 1; }
.pb-post__hero img { display: block; width: 100%; height: auto; border-radius: 10px; }

.pb-post__body { font-size: 26px; line-height: 1.5; overflow-wrap: break-word; }
.pb-post__body > :first-child { margin-top: 0; }
.pb-post__body p { margin: 0 0 20px; }
.pb-post__body h2,
.pb-post__body h3,
.pb-post__body h4 { color: var(--pb-ink); font-family: inherit; font-weight: 600; line-height: 1.2; margin: 52px 0 24px; letter-spacing: normal; text-transform: none; }
.pb-post__body h2 { font-size: 30px; }
.pb-post__body h3 { font-size: 30px; margin-top: 40px; }
.pb-post__body h4 { font-size: 26px; margin-top: 32px; }
.pb-post__body a { color: var(--pb-link); text-decoration: none; }
.pb-post__body a:hover { text-decoration: underline; }
.pb-post__body strong { color: inherit; font-weight: 600; }
.pb-post__body ul,
.pb-post__body ol { margin: 26px 0; padding-left: 40px; }
.pb-post__body li { margin: 0; }
.pb-post__body blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--pb-link); }
.pb-post__body hr { border: 0; border-top: 0.8px solid var(--pb-rule); margin: 52px 0; }

.pb-post__body figure { margin: 40px 0; }
.pb-post__body img { max-width: 100%; height: auto; border-radius: 10px; vertical-align: middle; }
.pb-post__body figure img { display: block; width: 100%; }
.pb-post__body p > img:only-child { display: block; width: 100%; margin: 20px 0; } /* a photo on its own line, as the editor writes one */
.pb-post__body td p, .pb-post__body th p { margin: 0; }
.pb-post__body figcaption { font-size: 18px; line-height: 1.5; margin-top: 8px; }
/* a paragraph holding only images is a gallery row (the articles' three-photo galleries) */
.pb-post__body p:has(> img + img) { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 40px 0; }
.pb-post__body p:has(> img + img) img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.pb-post__body table { border-collapse: collapse; margin: 32px 0; max-width: 100%; display: block; overflow-x: auto; }
.pb-post__body th,
.pb-post__body td { border: 0.8px solid var(--pb-rule); padding: 8px 18px; text-align: left; vertical-align: top; }
.pb-post__body th { color: var(--pb-ink); font-weight: 600; }

/* FAQ: Avada's toggles, as <details>. The box is the index page's "Read More" box. */
.pb-post__body details { border-bottom: 0.8px solid var(--pb-rule); padding: 18px 0; }
.pb-post__body details + details { margin-top: 0; }
.pb-post__body summary { cursor: pointer; list-style: none; position: relative; padding-left: 44px; color: var(--pb-ink); font-weight: 600; line-height: 1.3; }
.pb-post__body summary::-webkit-details-marker { display: none; }
.pb-post__body summary::before {
  content: '+'; position: absolute; left: 0; top: 0.12em; width: 26px; height: 26px;
  background: var(--pb-link); color: #fff; font-size: 22px; line-height: 26px; text-align: center; font-weight: 400;
}
.pb-post__body details[open] summary::before { content: '\2212'; }
.pb-post__body details > :not(summary) { padding-left: 44px; }
.pb-post__body details > :not(summary):first-of-type { margin-top: 14px; }
.pb-post__body details p:last-child { margin-bottom: 0; }

/* --- cards: the related strip and the news index ----------------------- */

.pb-card { display: flex; flex-direction: column; min-width: 0; }
.pb-card__image { display: block; overflow: hidden; }
.pb-card__image img { display: block; width: 100%; aspect-ratio: 1600 / 1030; object-fit: cover; transition: transform 0.4s ease; }
.pb-card:hover .pb-card__image img { transform: scale(1.03); }
.pb-card__title { margin: 0; font-family: 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif; font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: normal; text-transform: none; }
.pb-card__title a { text-decoration: none; }
.pb-card__meta { margin: 6px 0 0; font-size: 18px; line-height: 27px; color: var(--pb-text, #7e7887); }
.pb-card__meta a { color: #fa5600; text-decoration: none; }
.pb-card__sep { margin: 0 6px; }

.pb-related { border-top: 0.8px solid var(--pb-rule); margin-top: 52px; padding-top: 40px; }
.pb-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; }
.pb-related .pb-card__body { padding-top: 24px; }
.pb-related .pb-card__title a { color: #fed900; }
.pb-related .pb-card__title a:hover { color: #fa5600; }

.pb-news { font-family: 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif; color: #7e7887; }
.pb-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.pb-news--single .pb-news__grid { grid-template-columns: minmax(0, 1fr); }
.pb-news .pb-card__body { padding: 30px 25px 20px; }
.pb-news .pb-card__title a { color: #fa5600; }
.pb-news .pb-card__title a:hover { color: #060607; }

.pb-pagination { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 40px; font-size: 12px; }
.pb-pagination a,
.pb-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; box-sizing: border-box; border: 0.8px solid rgba(214, 213, 216, 0.75); color: #fa5600; text-decoration: none; }
.pb-pagination .pb-pagination__current { background: #fa5600; border-color: #fa5600; color: #fff; }
.pb-pagination .pb-pagination__step { border: 0; padding: 0 6px; }

/* --- narrower ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .pb-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-related__grid { gap: 32px; }
}

@media (max-width: 640px) {
  .pb-wrap { padding: 0 32px 32px; }
  .pb-post__hero { margin: -40px 0 36px; }
  .pb-post__body { font-size: 23px; }
  .pb-post__body h2 { font-size: 25px; margin-top: 40px; }
  .pb-post__body h3 { font-size: 22px; margin-top: 32px; }
  .pb-post__body h4 { font-size: 20px; }
  .pb-post__body ul,
  .pb-post__body ol { padding-left: 28px; }
  .pb-post__body summary,
  .pb-post__body details > :not(summary) { padding-left: 38px; }
  .pb-post__body th,
  .pb-post__body td { font-size: 18px; padding: 6px 10px; }
  .pb-related__grid,
  .pb-news__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pb-card__title { font-size: 25px; line-height: 30px; }
  .pb-pagination { justify-content: center; }
}