/* Blog hub — layout pieces unique to this page (prefix bl-).
   Proportions follow the design scaled to 1280 px: 1240 px content width, 300 px sidebar,
   3 x 3 article cards with a 16:9 photo, 90 px topic tiles, a ~140 px free-guide band. */

/* Page-wide content width: the design runs 20 px from each edge at 1280 */
.bl-wide { width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; }

/* ---------- Hero ---------- */
.bl-hero .hero__bg img { object-position: 72% 22%; }
.bl-hero .hero__title { font-size: clamp(2.1rem, 1.2rem + 2.6vw, 2.9rem); font-weight: 700; margin-bottom: .3em; }
.bl-hero .hero__lead { max-width: 34rem; font-size: clamp(1.02rem, .9rem + .4vw, 1.18rem); line-height: 1.55; margin: 0; }
@media (min-width: 900px) {
  .bl-hero .hero__inner { min-height: 0; padding-block: 1.3rem 2.4rem; align-items: start; }
  .bl-hero .breadcrumb { margin-bottom: 2.4rem; }
}

/* ---------- Colour accents shared by topic tiles + category list ---------- */
.bl-c-green { background: #e5f4e8; color: #1f9150; }
.bl-c-orange { background: var(--orange-100); color: var(--orange-600); }
.bl-c-blue { background: #e3edff; color: #2350c8; }
.bl-c-red { background: var(--red-100); color: var(--red-600); }
.bl-c-purple { background: #ece8ff; color: #4a3ad0; }
.bl-c-gold { background: #fff3d6; color: #c98600; }
.bl-c-sky { background: #e1f1fb; color: #1f7fc0; }

/* ---------- Topic tiles ---------- */
.bl-topics { margin-top: 14px; }
.bl-topics__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); }
@media (min-width: 1100px) { .bl-topics__list { grid-template-columns: repeat(8, 1fr); } }
.bl-topic {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 90px; padding: 10px 6px;
  background: #f6f9f7; border: 1px solid #edf2ef; border-radius: 10px; box-shadow: 0 1px 2px rgba(15, 47, 54, .05); text-align: center;
  font-family: var(--font-body); font-weight: 600; font-size: .82rem; color: var(--ink); text-decoration: none; line-height: 1.25;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
@media (min-width: 1100px) { .bl-topic { white-space: nowrap; } }
.bl-topic:hover { color: var(--green-700); border-color: var(--green-200); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.bl-topic__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.bl-topic__icon .icon { width: 31px; height: 31px; stroke-width: 1.9; }

/* ---------- Main column ---------- */
.bl-main { padding-block: 30px 14px; }
@media (min-width: 1000px) { .bl-main .layout-sidebar { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; } }
.bl-h2 { margin: 0; font-size: clamp(1.35rem, 1.15rem + .6vw, 1.55rem); }
.bl-main .toolbar { margin-bottom: 14px; }
.bl-sort select {
  height: 36px; min-width: 144px; padding: 0 2.1rem 0 .8rem; border-color: var(--line); border-radius: 8px; font-size: .9rem;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2f36' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center / 15px 15px;
}
.bl-sort select:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
/* No-JS submit: hidden until it receives keyboard focus (the design shows no Apply button) */
.bl-sort__go:not(:focus) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Article cards */
.bl-grid { list-style: none; padding: 0; margin: 0; }
@media (min-width: 1100px) { .bl-grid.grid { gap: 19px 24px; } }
.bl-grid > li { display: flex; }
.bl-card { width: 100%; border-radius: 12px; border-color: #e7ece9; box-shadow: 0 2px 8px rgba(15, 47, 54, .06); }
.bl-card .card__media { aspect-ratio: 16 / 9; }
.bl-card .card__body { padding: 0 1.05rem .85rem; gap: .38rem; }
.bl-card .bl-tag { align-self: flex-start; margin-top: -13px; margin-bottom: .2rem; position: relative; z-index: 2; }
.bl-card .card__title { font-size: clamp(1rem, .95rem + .2vw, 1.06rem); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.bl-card .card__text { font-size: .84rem; line-height: 1.32; color: #4e5b62; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bl-tag {
  display: inline-block; padding: .3rem .55rem; border-radius: 6px; font-size: .68rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1.2; background: #e5f4e8; color: #17703c;
}
.bl-tag--orange { background: #ffeadb; color: #b44a05; }
.bl-tag--blue { background: #e3edff; color: #2350c8; }
.bl-tag--purple { background: #ece8ff; color: #4a3ad0; }
.bl-tag--red { background: var(--red-100); color: #b42520; }
.bl-tag--gold { background: #fff1cf; color: #875c00; }
.bl-tag--sky { background: #e1f1fb; color: #1a6aa3; }
.bl-meta { justify-content: flex-start; flex-wrap: nowrap; gap: .45rem; padding-top: .45rem; font-size: .75rem; color: var(--muted); }
.bl-meta > span { white-space: nowrap; }
.bl-meta > .ph:last-child { margin-left: auto; }
.bl-avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-100); color: var(--teal-800); flex: none; }
.bl-avatar .icon { width: 13px; height: 13px; }
.bl-meta__by { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Pagination: round buttons as in the design */
.bl-main .pagination { margin-top: 16px; }
.bl-main .pagination ul { gap: 8px; }
.bl-main .pagination a, .bl-main .pagination li > span {
  min-width: 34px; height: 34px; padding: 0 .6rem; border: 0; border-radius: 999px; background: #f1f5f2; font-size: .85rem; font-weight: 500;
}
.bl-main .pagination a:hover { background: var(--green-100); color: var(--green-700); }
.bl-main .pagination [aria-current="page"] { background: var(--green-600); color: #fff; font-weight: 600; }
.pagination a .icon { width: 1em; height: 1em; }
/* placeholder span inside a pagination link must not get the page-button box */
.pagination a .ph { display: inline; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; }

/* ---------- Sidebar ---------- */
.bl-aside { display: grid; gap: 18px; }
.bl-aside .panel { border-radius: 12px; padding: 20px; }
.bl-news.panel { background: #eef6ef; border-color: #e1eee3; }
.bl-side-title { font-size: 1.2rem; margin: 0 0 .7rem; }
.bl-news__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bl-news__icon { width: 34px; height: 34px; color: #1f9150; stroke-width: 1.7; }
.bl-news__text { font-size: .86rem; line-height: 1.45; color: var(--text); margin: 0 0 .9rem; }
.bl-news__form { gap: .6rem; margin-bottom: .55rem; }
.bl-news__form input { min-height: 40px; padding: .5rem .85rem; font-size: .88rem; border-color: var(--line); border-radius: 8px; }
.bl-news__form .btn { min-height: 40px; padding: .5rem 1rem; border-radius: 8px; font-size: .9rem; }
.bl-news__form .form-status:empty { display: none; }
.bl-news .notice { font-size: .72rem; }
.bl-pop { list-style: none; margin: 0; padding: 0; display: grid; }
.bl-pop li + li { border-top: 1px solid var(--line); }
.bl-pop a { display: grid; grid-template-columns: 56px 1fr auto; gap: .8rem; align-items: center; padding: .45rem 0; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .84rem; line-height: 1.38; }
.bl-pop a:hover { color: var(--green-700); }
.bl-pop img { width: 56px; height: 50px; border-radius: 6px; object-fit: cover; }
.bl-pop .icon { width: 1.05em; height: 1.05em; color: var(--muted); }
.bl-cats { list-style: none; margin: 0; padding: 0; display: grid; }
.bl-cats li + li a .bl-cats__name { border-top: 1px solid var(--line); }
.bl-cats a { display: flex; align-items: stretch; gap: .75rem; color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500; }
.bl-cats a:hover { color: var(--green-700); }
.bl-cats__icon { width: 28px; height: 28px; margin-block: 5px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.bl-cats__icon .icon { width: 18px; height: 18px; stroke-width: 1.9; }
.bl-cats__name { flex: 1; white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-block: .3rem; }
.bl-cats__count { padding-left: .5rem; font-size: .84rem; font-weight: 400; color: var(--muted); white-space: nowrap; }

/* ---------- Free guide band ---------- */
.bl-lead { padding-block: 16px 12px; }
.bl-lead .lead-band { background: #eef6ef; border: 0; border-radius: 12px; }
.bl-lead .eyebrow { font-size: .85rem; letter-spacing: .02em; color: #1f9150; margin-bottom: .2rem; }
.bl-lead h2 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.68rem); margin-bottom: .25rem; }
.bl-lead__text { margin: 0; max-width: 27rem; font-size: 1rem; line-height: 1.5; color: var(--text); }
.bl-lead__cta { display: flex; justify-content: center; position: relative; z-index: 1; }
.bl-lead__cta .btn { min-height: 46px; min-width: 270px; border-radius: 8px; font-size: 1rem; }
/* Book with two loose pages fanned out behind it */
.bl-book { position: relative; width: 140px; margin-inline: auto; }
.bl-book .book { width: 140px; z-index: 2; transform: perspective(900px) rotateY(-10deg) rotate(-6deg); }
.bl-book::before, .bl-book::after {
  content: ""; position: absolute; top: 8%; left: 30%; width: 92%; height: 88%; border-radius: 4px; z-index: 1;
  background: repeating-linear-gradient(180deg, #fff 0 9px, #eef3f0 9px 10px) padding-box, #fff;
  border: 1px solid #e3eae6; box-shadow: 0 6px 16px rgba(0, 47, 55, .14); transform: rotate(8deg);
}
.bl-book::after { left: 52%; top: 14%; transform: rotate(16deg); z-index: 0; }
.bl-book .book__title { font-size: .92rem; }
.bl-book .book__sub { font-size: .78rem; }
@media (min-width: 960px) {
  .bl-lead .lead-band { overflow: visible; grid-template-columns: 300px minmax(0, 1fr) auto; gap: 24px; padding: 16px 48px 16px 0; min-height: 139px; }
  .bl-book { margin-block: -60px -26px; }
}
@media (max-width: 959px) { .bl-lead .lead-band { text-align: center; } .bl-lead__text { margin-inline: auto; } .bl-book { margin-right: 90px; } }
@media (max-width: 480px) { .bl-lead__cta .btn { white-space: normal; width: 100%; min-width: 0; } }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .bl-topics__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
  .bl-topic { min-height: 0; padding: .6rem .25rem; font-size: .68rem; gap: .35rem; }
  .bl-topic__icon { width: 36px; height: 36px; }
  .bl-topic__icon .icon { width: 20px; height: 20px; }
}