/*
 * Archive masonry columns and archive reading type. Loads after hk-core,
 * hk-legacy and the Elementor bridge so this file is the only width and
 * the only archive font scale for #grid-content.hk-archive and #text-bottom.
 *
 * Columns: 2 below 768, 3 from 768, 4 from 992.
 * The filter column is one column. The hero spans the rest of the first row.
 * Project cards live in #hk-project-results (display: contents); these
 * selectors match them without a child combinator.
 */

body:not(.blog-hk) #grid-content.category.hk-archive {
  --hk-grid-cols: 2;
  --hk-grid-gap: var(--hk-card-gap-mobile);
}

@media (min-width: 768px) {
  body:not(.blog-hk) #grid-content.category.hk-archive {
    --hk-grid-cols: 3;
    --hk-grid-gap: var(--hk-col-gap);
    box-sizing: border-box;
    width: calc(100% + var(--hk-grid-gap));
    margin-left: 0;
    margin-right: calc(-1 * var(--hk-grid-gap));
  }
}

@media (min-width: 992px) {
  body:not(.blog-hk) #grid-content.category.hk-archive {
    --hk-grid-cols: 4;
  }
}

body:not(.blog-hk) #grid-content.category.hk-archive .boxleft,
body:not(.blog-hk) #grid-content.category.hk-archive article.box1,
body:not(.blog-hk) #grid-content.category.hk-archive aside.adsense.box1,
body:not(.blog-hk) #grid-content.category.hk-archive #adslot-grid.adsense,
body:not(.blog-hk) #grid-content.category.hk-archive :is(.banner, .box2, .box3) {
  --hk-span: 1;
  box-sizing: border-box;
  max-width: none;
  width: calc(100% * var(--hk-span) / var(--hk-grid-cols) - var(--hk-grid-gap));
  margin-left: 0;
  margin-right: var(--hk-grid-gap);
}

/* Legacy sets min-height: 380px for the old fixed-width hero. A fluid
   column is often shorter than that, which left a white band under the image. */
body:not(.blog-hk) #grid-content.category.hk-archive .banner {
  min-height: 0;
}

@media (max-width: 767px) {
  /* Full-width chrome. Split card margins keep the page gutter in hk-core
     from stacking with the column gap. */
  body:not(.blog-hk) #grid-content.category.hk-archive :is(.boxleft, .banner, .box2, .box3) {
    --hk-span: 2;
    width: calc(100% - var(--hk-grid-gap));
    margin-left: calc(var(--hk-grid-gap) / 2);
    margin-right: calc(var(--hk-grid-gap) / 2);
  }

  body:not(.blog-hk) #grid-content.category.hk-archive :is(article.box1, aside.adsense.box1, #adslot-grid.adsense) {
    --hk-span: 1;
    width: calc(50% - var(--hk-grid-gap));
    margin-top: 0;
    margin-left: calc(var(--hk-grid-gap) / 2);
    margin-right: calc(var(--hk-grid-gap) / 2);
    margin-bottom: var(--hk-card-gap-y-mobile);
  }

  body:not(.blog-hk) #grid-content.category.hk-archive .banner img,
  body:not(.blog-hk) #grid-content.category.hk-archive .banner .swiper-slide {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  body:not(.blog-hk) #grid-content.category.hk-archive :is(.banner, .box2) {
    --hk-span: 2;
  }

  body:not(.blog-hk) #grid-content.category.hk-archive .box3 {
    --hk-span: 3;
  }
}

@media (min-width: 992px) {
  body:not(.blog-hk) #grid-content.category.hk-archive .box2 {
    --hk-span: 2;
  }

  body:not(.blog-hk) #grid-content.category.hk-archive :is(.banner, .box3) {
    --hk-span: 3;
  }
}

/*
 * Archive reading type.
 * Aside (#page-header) and the SEO footer (#text-bottom) share one scale:
 * titles 22px, paragraphs 15px.
 */
body:not(.blog-hk) #grid-content.hk-archive #page-header h1 {
  font-size: 22px;
  line-height: 1.25;
}

body:not(.blog-hk) #grid-content.hk-archive #page-header > h2,
body:not(.blog-hk) #grid-content.hk-archive #page-header .hk-collapse-body > h2 {
  margin: 16px 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #333;
}

body:not(.blog-hk) #grid-content.hk-archive #page-header > p,
body:not(.blog-hk) #grid-content.hk-archive #page-header .hk-collapse-body > p {
  font-size: 15px;
  line-height: 1.45;
}

body:not(.blog-hk) #grid-content.hk-archive #page-header > ul,
body:not(.blog-hk) #grid-content.hk-archive #page-header .hk-collapse-body > ul {
  margin: 0 0 12px;
  padding-left: 1.2em;
  list-style: disc;
}

body:not(.blog-hk) #grid-content.hk-archive #page-header > ul > li,
body:not(.blog-hk) #grid-content.hk-archive #page-header .hk-collapse-body > ul > li {
  padding-left: 0;
  list-style: disc;
}

body:not(.blog-hk) #grid-content.hk-archive #page-header .hk-hub-faq {
  margin: 18px 0 10px;
  padding-top: 14px;
  border-top: 1px solid #eeeeee;
}

body:not(.blog-hk) #grid-content.hk-archive #page-header .hk-hub-faq > h2 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #333;
}

body:not(.blog-hk) #grid-content.hk-archive #page-header .hk-hub-faq__item {
  margin: 0 0 14px;
  padding: 0;
}

body:not(.blog-hk) #grid-content.hk-archive #page-header .hk-hub-faq__item:last-child {
  margin-bottom: 0;
}

body:not(.blog-hk) #grid-content.hk-archive #page-header .hk-hub-faq__item h3 {
  margin: 0 0 6px;
  padding-bottom: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: #333;
  background: none;
}

body:not(.blog-hk) #grid-content.hk-archive #page-header .hk-hub-faq__item p {
  margin: 0;
  color: #54595f;
  line-height: 1.55;
}

#text-bottom {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 10px 20px;
}

#text-bottom h2 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}

#text-bottom h3 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}

#text-bottom p,
#text-bottom li {
  font-size: 15px;
  line-height: 1.45;
}