/*
 * Blog screens (listing, archives, single article).
 * Values read the Global Design Settings variables (--global-*) with the original design values as fallbacks,
 * exactly like the page stylesheets, so Appearance > Global Design Settings restyles the blog too.
 * Card metrics come from the Figma "Blog" frame: 420.9px cards, 8.89px radius, 26.7px padding, 235.5px image.
 */

/* header is part of the flow on blog screens (the Figma pages overlay it on the hero) */
.blog-page .site-header{position:relative}
.blog-page .page{overflow:visible;overflow-x:clip}

.blog-main{
  --blog-heading:var(--global-heading-color,var(--global-primary-color,#1b3b5f));
  --blog-text:var(--global-body-text-color,var(--global-primary-color,#1e3e62));
  --blog-para:var(--global-paragraph-color,#43474e);
  --blog-link:var(--global-link-color,var(--global-accent-color,#113dcd));
  --blog-link-hover:var(--global-link-hover-color,var(--global-link-color,var(--global-accent-color,#0a2a96)));
  --blog-more:var(--global-link-color,#9c4400);
  --blog-more-hover:var(--global-link-hover-color,var(--global-link-color,#6f3000));
  --blog-border:var(--global-card-border-color,var(--global-divider-color,rgba(195,198,207,.3)));
  --blog-radius:var(--global-card-radius,8.89px);
  --blog-shadow:var(--global-card-shadow,0 4.45px 22.23px 0 rgba(27,59,95,.06));
  --blog-space:var(--global-section-spacing,1);
  --blog-card-bg:var(--global-card-bg,#fff);
  --blog-font:var(--global-body-font-family,'Outfit',Arial,Helvetica,sans-serif);
  --blog-head-font:var(--global-heading-font-family,'Outfit',Arial,Helvetica,sans-serif);
  background:var(--global-bg-page,#fff);
  color:var(--blog-text);
  font-family:var(--blog-font);
}
.blog-wrap{width:min(calc(100% - 2 * var(--page-gutter)),var(--container-max-width));margin:0 auto}

/* ---------- hero ---------- */
.blog-hero{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:385px;padding:56px var(--page-gutter);
  background:linear-gradient(-90deg,rgba(255,169,119,.87) -5.9%,rgba(108,163,224,.87) 100%),var(--blog-hero-image) center / cover no-repeat,linear-gradient(-90deg,#ffa977 -5.9%,#6ca3e0 100%);
}
.blog-hero__title{
  margin:0;color:#fff;font-family:var(--blog-head-font);
  font-size:calc(70px * var(--global-h1-scale,1));line-height:calc(1 * var(--global-heading-lh-scale,1));
  font-weight:var(--global-heading-weight,600);letter-spacing:var(--global-heading-letter-spacing,-.01em);
}
@media (max-width:1199px){.blog-hero{min-height:192px}.blog-hero__title{font-size:calc(35px * var(--global-h1-scale,1))}}

/* ---------- listing ---------- */
.blog-listing{padding:calc(48px * var(--blog-space)) 0 calc(64px * var(--blog-space))}
.blog-grid{display:grid;grid-template-columns:repeat(var(--blog-cols,3),minmax(0,1fr));gap:var(--global-card-gap,26.7px)}
@media (max-width:1023px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.blog-grid{grid-template-columns:minmax(0,1fr)}.blog-listing{padding:calc(32px * var(--blog-space)) 0 calc(48px * var(--blog-space))}}
.blog-empty{text-align:center;font-size:calc(20px * var(--global-p-scale,1));color:var(--blog-para)}

.blog-card{
  position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--blog-card-bg);border:1.11px solid var(--blog-border);border-radius:var(--blog-radius);
  box-shadow:var(--blog-shadow);transition:box-shadow .2s,transform .2s;
}
.blog-card:hover{box-shadow:var(--global-card-shadow-hover,0 8px 28px 0 rgba(27,59,95,.14))}
.blog-card__media{aspect-ratio:418.68 / 235.49;background:#d3e4fe;overflow:hidden}
.blog-card__img{display:block;width:100%;height:100%;object-fit:cover}
.blog-card__fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--global-section-bg,#fff2ea)}
.blog-card__fallback img{width:87px;height:auto}
.blog-card__body{display:flex;flex-direction:column;flex:1;padding:26.68px}
.blog-card__meta{
  margin:0;color:var(--blog-para);font-size:calc(13.34px * var(--global-body-scale,1));line-height:calc(17.785px * var(--global-body-scale,1) * var(--global-body-lh-scale,1));
  font-weight:var(--global-body-weight,500);letter-spacing:var(--global-body-letter-spacing,.534px);
}
.blog-card__title{
  margin:12px 0 0;color:var(--blog-heading);font-family:var(--blog-head-font);
  font-size:calc(22.23px * var(--global-h3-scale,1));line-height:calc(27.788px * var(--global-h3-scale,1) * var(--global-heading-lh-scale,1));
  font-weight:var(--global-heading-weight,600);letter-spacing:var(--global-heading-letter-spacing,inherit);
}
.blog-card__title a{color:inherit;text-decoration:none}
.blog-card__title a::after{content:"";position:absolute;inset:0;z-index:1}  /* whole card clickable without nested links */
.blog-card__title a:focus-visible{outline:none}
.blog-card:focus-within{outline:3px solid var(--global-focus-outline,#ffb27a);outline-offset:2px}
.blog-card__excerpt{
  margin:14px 0 0;color:var(--blog-para);font-size:calc(17.78px * var(--global-p-scale,1));line-height:calc(26.677px * var(--global-p-scale,1) * var(--global-p-lh-scale,1));
  font-weight:var(--global-body-weight,400);letter-spacing:var(--global-body-letter-spacing,inherit);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card__more{
  position:relative;z-index:2;align-self:flex-start;margin-top:auto;padding-top:22px;
  display:inline-flex;align-items:center;gap:8px;color:var(--blog-more);text-decoration:none;
  font-size:calc(15.56px * var(--global-body-scale,1));line-height:calc(22.231px * var(--global-body-scale,1));font-weight:var(--global-link-weight,600);letter-spacing:.156px;
}
.blog-card__more svg{width:13.34px;height:13.34px;flex:none;transition:transform .15s}
.blog-card__more:hover{color:var(--blog-more-hover)}
.blog-card__more:hover svg{transform:translateX(3px)}
.blog-card__more:focus-visible{outline:3px solid var(--global-focus-outline,#ffb27a);outline-offset:2px}

/* ---------- pagination ---------- */
.blog-pager{margin-top:56px}
.blog-pager ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.blog-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border-radius:50%;
  color:var(--global-primary-color,#002547);font-size:calc(18px * var(--global-body-scale,1));font-weight:500;text-decoration:none;
  background:var(--blog-card-bg);border:1px solid var(--blog-border);
}
.blog-pager svg{width:8px;height:13px}
.blog-pager a.page-numbers:hover{background:var(--global-section-bg,#fff2ea)}
.blog-pager .page-numbers.current{background:var(--global-btn-primary-bg,#1e3e62);border-color:var(--global-btn-primary-bg,#1e3e62);color:#fff}
.blog-pager .page-numbers.dots{border:0;background:none}
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}

/* ---------- single article ---------- */
.blog-hero--single{min-height:300px}
.blog-article__head{width:min(100%,980px)}
.blog-article__cats{
  display:inline-block;margin:0 0 16px;padding:5px 16px;border-radius:999px;background:rgba(255,255,255,.92);
  color:var(--global-primary-color,#1e3e62);font-size:calc(15px * var(--global-body-scale,1));font-weight:600;letter-spacing:.03em;text-transform:uppercase;
}
.blog-article__title{font-size:calc(52px * var(--global-h1-scale,1));line-height:calc(1.15 * var(--global-heading-lh-scale,1))}
.blog-article__meta{margin:18px 0 0;color:#fff;font-size:calc(17px * var(--global-body-scale,1));font-weight:500;letter-spacing:.02em}
@media (max-width:1199px){.blog-hero--single{min-height:220px}.blog-article__title{font-size:calc(34px * var(--global-h1-scale,1))}}
@media (max-width:599px){.blog-article__title{font-size:calc(28px * var(--global-h1-scale,1))}}

.blog-article__wrap{width:min(calc(100% - 2 * var(--page-gutter)),820px);margin:0 auto;padding:calc(40px * var(--blog-space)) 0 calc(48px * var(--blog-space))}
.blog-article__image{margin:0 0 40px}
.blog-article__image img{display:block;width:100%;height:auto;border-radius:var(--blog-radius);box-shadow:var(--blog-shadow)}

.blog-content{color:var(--blog-para);font-size:calc(19px * var(--global-p-scale,1));line-height:calc(1.75 * var(--global-p-lh-scale,1));font-weight:var(--global-body-weight,400);letter-spacing:var(--global-body-letter-spacing,inherit);overflow-wrap:break-word}
.blog-content>*:first-child{margin-top:0}
.blog-content p{margin:0 0 1.25em}
.blog-content h2,.blog-content h3,.blog-content h4,.blog-content h5,.blog-content h6{
  color:var(--blog-heading);font-family:var(--blog-head-font);font-weight:var(--global-heading-weight,600);letter-spacing:var(--global-heading-letter-spacing,inherit);
  line-height:calc(1.25 * var(--global-heading-lh-scale,1));margin:1.8em 0 .6em;
}
.blog-content h2{font-size:calc(34px * var(--global-h2-scale,1))}
.blog-content h3{font-size:calc(26px * var(--global-h3-scale,1))}
.blog-content h4{font-size:calc(21px * var(--global-h4-scale,1))}
.blog-content h5{font-size:calc(18px * var(--global-h5-scale,1))}
.blog-content h6{font-size:calc(16px * var(--global-h6-scale,1))}
.blog-content a{color:var(--blog-link);font-weight:var(--global-link-weight,inherit);text-decoration:var(--global-link-decoration,underline);text-underline-offset:3px}
.blog-content a:hover{color:var(--blog-link-hover)}
.blog-content strong{color:var(--blog-heading);font-weight:600}
.blog-content ul,.blog-content ol{margin:0 0 1.4em;padding-left:1.5em}
.blog-content ul{list-style:disc}
.blog-content ol{list-style:decimal}
.blog-content li{margin:0 0 .5em;padding-left:.2em}
.blog-content li::marker{color:var(--global-accent-color,#113dcd)}
.blog-content blockquote{margin:1.6em 0;padding:.4em 0 .4em 1.2em;border-left:4px solid var(--global-accent-color,#113dcd);color:var(--blog-heading);font-style:italic}
.blog-content img{display:block;max-width:100%;height:auto;margin:1.6em auto;border-radius:var(--blog-radius)}
.blog-content figure{margin:1.6em 0}
.blog-content figcaption{margin-top:.6em;font-size:.85em;text-align:center}
.blog-content hr{border:0;border-top:1px solid var(--global-divider-color,#c5c6d3);margin:2em 0}
.blog-content .wp-block-table{margin:1.6em 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.blog-content table{width:100%;min-width:480px;border-collapse:collapse;font-size:.92em;line-height:1.5}
.blog-content th,.blog-content td{padding:12px 14px;border:1px solid var(--global-divider-color,#c5c6d3);text-align:left;vertical-align:top}
.blog-content th{background:var(--global-section-bg,#fff2ea);color:var(--blog-heading);font-weight:600}
.blog-content code,.blog-content pre{font-size:.9em;background:var(--global-alt-section-bg,#ddf0ff);border-radius:4px}
.blog-content code{padding:.1em .35em}
.blog-content pre{padding:1em;overflow-x:auto}
.blog-article__tags{margin:32px 0 0;color:var(--blog-para);font-size:calc(16px * var(--global-body-scale,1))}
.blog-article__tags span{font-weight:600;color:var(--blog-heading)}
.blog-article__tags a{color:var(--blog-link)}

.blog-postnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;padding-top:32px;border-top:1px solid var(--global-divider-color,#c5c6d3)}
.blog-postnav__link{
  display:block;padding:18px 20px;border:1.11px solid var(--blog-border);border-radius:var(--blog-radius);background:var(--blog-card-bg);color:var(--blog-heading);
  font-weight:600;line-height:1.35;text-decoration:none;box-shadow:var(--blog-shadow);
}
.blog-postnav__link span{display:block;margin-bottom:6px;color:var(--blog-more);font-size:calc(14px * var(--global-body-scale,1));font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.blog-postnav__link--next{grid-column:2;text-align:right}
.blog-postnav__link--prev:only-child{grid-column:1}
.blog-postnav__link:hover{color:var(--blog-more-hover)}
@media (max-width:599px){.blog-postnav{grid-template-columns:1fr}.blog-postnav__link--next{grid-column:1;text-align:left}}

.blog-related{padding:0 0 calc(56px * var(--blog-space));background:var(--global-bg-page,#fff)}
.blog-related__title{
  margin:0 0 32px;text-align:center;color:var(--blog-heading);font-family:var(--blog-head-font);
  font-size:calc(34px * var(--global-h2-scale,1));font-weight:var(--global-heading-weight,600);line-height:calc(1.2 * var(--global-heading-lh-scale,1));
}
.blog-main--single{background:var(--global-bg-page,#fff)}
.blog-main--single .blog-related{padding-top:calc(24px * var(--blog-space));border-top:1px solid var(--global-divider-color,rgba(195,198,207,.3))}