/*! cbl-page 1.0.2 | /blog redesign, Figma 4343:68612 (1920 frame, content 1312 inside the cfh-frame rails) */

/* ---- hero: title, sub, search row, category chips ---- */
.cfh-page .cbl-hero{position:relative;width:100%;border-bottom:1px solid #EEEDEC}
.cfh-page .cbl-hero-in{position:relative;display:flex;flex-direction:column;align-items:center;padding:119px 36px 89px;text-align:center}
/* the two card-column rules start 103px below the navbar and run on through the card row */
.cfh-page .cbl-hero-in::before,.cfh-page .cbl-hero-in::after,
.cfh-page .cbl-list-in::before,.cfh-page .cbl-list-in::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:#EEEDEC;pointer-events:none;z-index:0}
.cfh-page .cbl-hero-in::before,.cfh-page .cbl-hero-in::after{top:103px;bottom:-1px}
.cfh-page .cbl-hero-in::before,.cfh-page .cbl-list-in::before{left:calc(100% * 437 / 1310)}
.cfh-page .cbl-hero-in::after,.cfh-page .cbl-list-in::after{left:calc(100% * 874 / 1310)}
.cfh-page .cbl-hero-in>*{position:relative;z-index:1}
.cfh-page .cbl-h1{margin:0;white-space:nowrap;font-family:'Artifictrial',var(--cfh-display);font-weight:400;font-size:64px;line-height:1;letter-spacing:-0.02em;color:#1D0A05}
.cfh-page .cbl-h1-em{font-weight:600}
.cfh-page .cbl-sub{margin:30px 0 0;font-family:var(--cfh-sans);font-weight:400;font-size:16px;line-height:1.3;letter-spacing:-0.16px;color:#1D0A05}
.cfh-page .cbl-controls{width:906px;max-width:100%;margin-top:47px}

.cbl-search{display:flex;gap:22px}
.cbl-search-field{flex:0 1 760px;min-width:0;display:flex;height:56px;box-sizing:border-box;background:#FCFBF8;border:1px solid #E2E0DB;transition:border-color .18s ease-out}
.cbl-search-field:focus-within{border-color:#1D0A05}
.cbl-q{flex:1;min-width:0;height:100%;box-sizing:border-box;margin:0;padding:0 20px;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;font-family:var(--cfh-sans);font-size:16px;line-height:1.3;letter-spacing:-0.16px;color:#1D0A05;-webkit-appearance:none;appearance:none}
.cbl-q::placeholder{color:#B0AEA8;opacity:1}
.cbl-q::-webkit-search-cancel-button,.cbl-q::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.cbl-q-btn{flex:none;box-sizing:border-box;width:56px;height:56px;margin:-1px -1px -1px 0;padding:0;display:grid;place-items:center;background:#F9F7F4;border:1px solid #E2E0DB;border-radius:0;cursor:pointer}
.cbl-q-btn svg{display:block;width:19.5px;height:19.5px}
.cbl-clear{flex:0 0 124px;box-sizing:border-box;height:56px;margin:0;padding:0;background:#F4F2EE;border:1px solid #E2E0DB;border-radius:0;cursor:pointer;font-family:var(--cfh-mono);font-weight:400;font-size:14px;line-height:19.6px;color:#1D0A05;transition:background-color .18s ease-out}
.cbl-clear:hover,.cbl-q-btn:hover{background:#EEEDEC}

/* the chip row (961) is wider than the search row (906) and sits 12.5px left of centre, as in Figma */
.cbl-chips-row{display:flex;justify-content:center;align-items:center;gap:12px;margin:45px -15px 0 -40px}
.cbl-chips{flex:0 1 905px;min-width:0;display:flex;align-items:center;gap:12px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.cbl-chips::-webkit-scrollbar{display:none}
.cbl-chip{flex:none;box-sizing:border-box;margin:0;padding:10px 14px;background:#F4F2EE;border:0;border-radius:0;cursor:pointer;white-space:nowrap;font-family:var(--cfh-mono);font-weight:400;font-size:14px;line-height:19.6px;color:#1D0A05;transition:background-color .18s ease-out}
.cbl-chip:hover{background:#EEEDEC}
.cbl-chip.is-on{border:1px solid #FF5400;padding:10px 13px}
.cbl-chips-next{flex:none;box-sizing:border-box;width:44px;height:40px;margin:0;padding:0;display:grid;place-items:center;background:#F4F2EE;border:0;border-radius:0;cursor:pointer}
.cbl-chips-next svg{display:block;width:14px;height:12px}
.cbl-chips-next:hover{background:#EEEDEC}

/* ---- card grid (Blogs collection list) ---- */
.cfh-page .cbl-list{position:relative;width:100%;border-bottom:1px solid #EEEDEC}
.cfh-page .cbl-list-in{position:relative}
.cfh-page .cbl-list .w-dyn-items{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,437fr) minmax(0,437fr) minmax(0,436fr)}
.cfh-page .cbl-list .w-dyn-item{min-width:0}
.cfh-page .cbl-list .w-dyn-item[hidden]{display:none}
/* rows after the first (set by the filter script; nth-child is the no-JS fallback) */
.cfh-page .cbl-list .w-dyn-item.cbl-row2,.cfh-page .cbl-list:not(.cbl-js) .w-dyn-item:nth-child(n+4){border-top:1px solid #EEEDEC}
/* 35px from the frame rail in column 1; 1px column rule + 35px in the others (= Figma's 36 everywhere) */
.cfh-page .cbl-card{display:block;height:100%;color:#1D0A05;text-decoration:none}
.cfh-page .cbl-card-in{display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:36px 36px 42px 35px}
.cfh-page .cbl-list .w-dyn-item.cbl-cx .cbl-card-in,.cfh-page .cbl-list:not(.cbl-js) .w-dyn-item:not(:nth-child(3n+1)) .cbl-card-in{padding-left:36px}
.cfh-page .cbl-card-media{position:relative;aspect-ratio:366/200;overflow:hidden;margin-bottom:36px;background:#F4F2EE}
.cfh-page .cbl-card-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cfh-page .cbl-card:hover .cbl-card-img{transform:scale(1.03)}
.cfh-page .cbl-card-title{margin:0;max-width:290px;font-family:'Artifictrial',var(--cfh-display);font-weight:500;font-size:20px;line-height:1.2;letter-spacing:-0.4px;color:#1D0A05;text-wrap:balance}
.cfh-page .cbl-card-ex{margin:16px 0 0;font-family:var(--cfh-sans);font-weight:400;font-size:16px;line-height:1.3;letter-spacing:-0.16px;color:#1D0A05}
.cfh-page .cbl-card-by{display:flex;align-items:flex-start;gap:16px;margin-top:auto;padding-top:22px}
.cfh-page .cbl-card-av{flex:none;display:block;width:50px;height:50px;object-fit:cover}
.cfh-page .cbl-card-meta{padding-top:13px;font-family:var(--cfh-sans);font-weight:400;font-size:14px;letter-spacing:-0.14px}
.cfh-page .cbl-card-name{line-height:1.3;color:#1D0A05}
.cfh-page .cbl-card-date{margin-top:3px;line-height:1.6;color:#99918E}
.cfh-page .cbl-card-cat{display:none}
.cfh-page .cbl-empty{display:none;margin:0;padding:48px 36px;text-align:center;font-family:var(--cfh-sans);font-size:16px;line-height:1.3;color:#99918E}
.cfh-page .cbl-list.is-empty .cbl-empty{display:block}
.cfh-page .cbl-list.is-empty .cbl-list-in::before,.cfh-page .cbl-list.is-empty .cbl-list-in::after{display:none}

/* ---- footer: Figma leaves a 70px band above it (footer2 default is 90) ---- */
.cfh-page .cbl-list~.cfh-foot{margin-top:70px}

/* ---- small desktop ---- */
@media (max-width:1100px){
  .cfh-page .cbl-h1{font-size:clamp(48px,5.8vw,64px)}
  .cbl-chips-row{margin:45px 0 0}
}
/* ---- tablet: two columns, one centre rule ---- */
@media (max-width:991px){
  .cfh-page .cbl-hero-in{padding:72px 32px 56px}
  .cfh-page .cbl-hero-in::before,.cfh-page .cbl-hero-in::after,.cfh-page .cbl-list-in::after{display:none}
  .cfh-page .cbl-list-in::before{left:50%}
  .cfh-page .cbl-h1{font-size:56px}
  .cfh-page .cbl-list .w-dyn-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfh-page .cbl-list:not(.cbl-js) .w-dyn-item:nth-child(n+3){border-top:1px solid #EEEDEC}
  .cfh-page .cbl-card-in,.cfh-page .cbl-list .w-dyn-item.cbl-cx .cbl-card-in{padding:32px 32px 36px}
  .cfh-page .cbl-list~.cfh-foot{margin-top:48px}
}
/* ---- phones: one column ---- */
@media (max-width:767px){
  .cfh-page .cbl-hero-in{padding:56px 24px 40px}
  .cfh-page .cbl-list-in::before{display:none}
  .cfh-page .cbl-h1{font-size:44px}
  .cfh-page .cbl-sub{margin-top:20px}
  .cfh-page .cbl-controls{margin-top:32px}
  .cbl-search{gap:12px}
  .cbl-clear{flex-basis:96px}
  .cbl-chips-row{margin-top:24px}
  .cbl-chips{flex:1 1 auto}
  .cfh-page .cbl-list .w-dyn-items{grid-template-columns:minmax(0,1fr)}
  .cfh-page .cbl-list:not(.cbl-js) .w-dyn-item:nth-child(n+2){border-top:1px solid #EEEDEC}
  .cfh-page .cbl-card-in,.cfh-page .cbl-list .w-dyn-item.cbl-cx .cbl-card-in{padding:24px 24px 28px}
  .cfh-page .cbl-card-media{margin-bottom:24px}
  .cfh-page .cbl-list~.cfh-foot{margin-top:32px}
}
@media (max-width:479px){
  .cfh-page .cbl-hero-in{padding:48px 20px 32px}
  .cfh-page .cbl-h1{font-size:38px}
  .cbl-q{padding:0 14px}
  .cbl-clear{flex-basis:84px}
  .cfh-page .cbl-card-in,.cfh-page .cbl-list .w-dyn-item.cbl-cx .cbl-card-in{padding:20px 20px 24px}
}
