/* PORT of Dawn's blog styles for the SKS store on BigCommerce (2026-09-14):
   assets/section-main-blog.css + component-article-card.css + component-card.css (standard cards) +
   section-blog-post.css + the base.css pieces they rely on (page-width, headings, captions, rte, share-button,
   pagination). Dawn sizes are rem on a 62.5% root (1rem = 10px) → written here in px. Settings applied:
   Assistant 400 for headings and body, page width 1200, collage layout, image height medium, date shown,
   standard card style, no author. */

.sks-blog-main {
  --fg: 18, 18, 18;
  --bg: #ffffff;
  font-family: 'Assistant', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  color: rgba(var(--fg), 0.75);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 750px) { .sks-blog-main { font-size: 16px; } }
.sks-blog-main *, .sks-blog-main *::before, .sks-blog-main *::after { box-sizing: border-box; }
.sks-blog-main a { color: rgba(var(--fg), 0.75); }
.sks-blog-main h1, .sks-blog-main h2, .sks-blog-main h3, .sks-blog-main .h2 {
  font-family: 'Assistant', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.06rem;
  color: rgb(var(--fg));
  line-height: 1.3;
  word-break: break-word;
  margin: 0;
}

/* ── page width (Dawn .page-width / --narrow) ── */
.sks-blog-main .page-width, .sks-blog-main.page-width { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
@media (min-width: 750px) { .sks-blog-main .page-width, .sks-blog-main.page-width { padding: 0 50px; } }
.sks-blog-main .page-width--narrow { max-width: 726px; }
@media (min-width: 750px) { .sks-blog-main .page-width--narrow { padding: 0; } }

/* ── listing ── */
.sks-blog-main .sks-blog-main__title { font-size: 30px; margin: 40px 0; }   /* Dawn .title--primary */
@media (min-width: 750px) { .sks-blog-main .sks-blog-main__title { font-size: 40px; } }

.blog-articles { display: grid; column-gap: 4px; row-gap: 4px; }
.blog-articles .card-wrapper { width: 100%; }
.blog-articles__article.article { display: flex; align-items: center; }
@media (min-width: 750px) {
  .blog-articles { grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 8px; }
  .blog-articles--collage > *:nth-child(3n + 1),
  .blog-articles--collage > *:nth-child(3n + 2):last-child { grid-column: span 2; text-align: center; }
  .blog-articles--collage > *:nth-child(3n + 1) .card,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .card { text-align: center; }
}

.card-wrapper { color: inherit; height: 100%; position: relative; text-decoration: none; }
.card { text-decoration: none; text-align: left; display: flex; flex-direction: column; height: 100%; }
.card__inner { width: 100%; }
.article-card__image-wrapper > a { display: block; }
.article-card__image { position: relative; overflow: hidden; background: rgba(var(--fg), 0.04); height: 220px; }
.article-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.card:hover .media--hover-effect img { transform: scale(1.03); }
@media (min-width: 750px) { .article-card__image--medium .article-card__image { height: 219px; } }
@media (min-width: 990px) { .article-card__image--medium .article-card__image { height: 307px; } }
@media (min-width: 750px) {
  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--medium .article-card__image,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--medium .article-card__image { height: 440px; }
}
@media (min-width: 990px) {
  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--medium .article-card__image,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--medium .article-card__image { height: 550px; }
}
.card__content { display: grid; grid-template-rows: minmax(0, 1fr) max-content minmax(0, 1fr); padding: 10px; width: 100%; flex-grow: 1; }
.card__information { grid-row-start: 2; padding: 13px 0; }
.blog-articles .article-card .card__information { padding-left: 20px; padding-right: 20px; }
.article-card .card__heading { margin-bottom: 6px; }
.card__heading.h2 { font-size: 20px; }
@media (min-width: 750px) { .card__heading.h2 { font-size: 24px; } }
.card__heading a.full-unstyled-link { color: rgb(var(--fg)); text-decoration: none; }
.card__heading a.full-unstyled-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card__heading a.full-unstyled-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.caption-with-letter-spacing { font-size: 10px; letter-spacing: 1.3px; line-height: 1.2; text-transform: uppercase; }
.article-card__info { padding-top: 4px; }
.article-card__info.h5 { font-size: 12px; }
@media (min-width: 750px) { .article-card__info.h5 { font-size: 13px; } }
.article-card__excerpt { width: 100%; margin: 12px 0 0; font-size: 15px; line-height: 1.8; }
@media (min-width: 750px) { .article-card__excerpt { font-size: 16px; } }
.blog-articles--collage > *:nth-child(3n + 1) .article-card__excerpt { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ── pagination (Dawn component-pagination) ── */
.pagination-wrapper { margin-top: 40px; }
@media (min-width: 990px) { .pagination-wrapper { margin-top: 50px; } }
.pagination__list { display: flex; justify-content: center; align-items: center; list-style: none; padding: 0; margin: 0; }
.pagination__list > li { flex: 1 0 44px; max-width: 44px; }
.pagination__list > li:not(:last-child) { margin-right: 10px; }
.pagination__item { color: rgb(var(--fg)); display: inline-flex; justify-content: center; align-items: center; position: relative; height: 44px; width: 44px; padding: 0; text-decoration: none; font-size: 16px; }
.pagination__item--current::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; }
.pagination__item.link:hover::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; }

/* ── article ── */
.sks-blog-main--article { padding-bottom: 32px; }
.article-template > *:first-child:not(.article-template__hero-container) { margin-top: 50px; }
.article-template__hero-container { max-width: 1300px; margin: 0 auto; }
.article-template__hero-adapt img { display: block; width: 100%; height: auto; }
.article-template header { margin: 44px auto 20px; }
@media (min-width: 750px) { .article-template header { margin-top: 50px; } }
.article-template__title { font-size: 30px; margin: 0; }
@media (min-width: 750px) { .article-template__title { font-size: 40px; } }
.article-template__title:not(:only-child) { margin-bottom: 10px; }
.article-template header .caption-with-letter-spacing { display: inline-block; }
.article-template__social-sharing { margin: 30px auto 0; }
.article-template__social-sharing + .article-template__content { margin-top: 15px; }
.article-template__content { margin: 30px auto; }
.article-template__back { margin-top: 50px; text-align: center; }
.article-template__back:last-child { margin-bottom: 32px; }
.article-template__link { font-size: 18px; display: flex; justify-content: center; align-items: center; text-decoration: none; color: rgb(var(--fg)); text-underline-offset: 3px; }
.article-template__link:hover { text-decoration: underline; }
.article-template__link .icon-wrap { display: flex; margin-right: 10px; transform: rotate(180deg); }
.article-template__link .icon-wrap svg { width: 14px; height: 10px; }

/* Dawn share-button (details + copy-link popover) */
.share-button { display: block; position: relative; }
.share-button summary { list-style: none; cursor: pointer; }
.share-button summary::-webkit-details-marker { display: none; }
.share-button__button { font-size: 14px; display: flex; align-items: center; color: rgb(var(--fg)); background: transparent; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.share-button__button .icon-share { width: 13px; height: 12px; margin-right: 10px; }
.share-button__fallback { position: absolute; top: 30px; left: 0; z-index: 3; width: 100%; min-width: 320px; max-width: 480px; display: flex; align-items: center; background: #fff; box-shadow: 0 2px 16px rgba(var(--fg), 0.15); padding: 10px; }
.share-button__fallback .field { position: relative; display: flex; flex: 1; align-items: center; border: 1px solid rgba(var(--fg), 0.55); }
.share-button__fallback .field__input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 15px; font-size: 14px; color: rgba(var(--fg), 0.75); font-family: inherit; }
.share-button__copy { background: transparent; border: 0; padding: 0 12px; cursor: pointer; color: rgb(var(--fg)); display: flex; align-items: center; }
.share-button__message { position: absolute; left: 0; right: 0; bottom: 100%; padding: 6px 0; font-size: 12px; color: rgb(var(--fg)); }
.share-button__message:empty { display: none; }
.share-button__close { background: transparent; border: 0; font-size: 22px; line-height: 1; padding: 0 6px; margin-left: 6px; cursor: pointer; color: rgb(var(--fg)); }

/* Dawn .rte */
.rte::after { clear: both; content: ''; display: block; }
.rte > *:first-child { margin-top: 0; }
.rte > *:last-child { margin-bottom: 0; }
.rte p { margin: 0 0 16px; }
.rte h1, .rte h2, .rte h3, .rte h4 { margin: 32px 0 16px; line-height: 1.3; }
.rte h1 { font-size: 30px; } .rte h2 { font-size: 24px; } .rte h3 { font-size: 18px; } .rte h4 { font-size: 16px; }
@media (min-width: 750px) { .rte h1 { font-size: 40px; } .rte h2 { font-size: 24px; } .rte h3 { font-size: 18px; } }
.rte img { height: auto; max-width: 100%; }
.rte table { table-layout: fixed; width: 100%; border-collapse: collapse; }
@media (min-width: 750px) { .rte table td { padding-left: 12px; padding-right: 12px; } }
.rte ul, .rte ol { list-style-position: inside; padding-left: 20px; margin: 0 0 16px; }
.rte li { list-style: inherit; }
.rte li:last-child { margin-bottom: 0; }
.rte a { color: rgba(var(--fg), 0.85); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-thickness .1s ease; }
.rte a:hover { color: rgb(var(--fg)); text-decoration-thickness: 2px; }
.rte blockquote { display: inline-flex; border-left: 2px solid rgba(var(--fg), 0.2); padding-left: 16px; margin: 16px 0; font-style: italic; }
.rte blockquote > * { margin: -5px 0; }
.rte iframe, .rte video { max-width: 100%; }