/* Additions on top of styles.css: blog, scroll hints on filter rows */

/* ---------- Scroll hint (arrows on horizontally scrolling filter rows) ---------- */
.scroll-hint { position: relative; flex: 1; min-width: 0; }
.scroll-hint > .filters--scroll { width: 100%; padding-right: 44px; }
.scroll-hint.can-next:not(.can-prev) > .filters--scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.scroll-hint.can-prev.can-next > .filters--scroll { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 56px), transparent); }
.scroll-hint.can-prev:not(.can-next) > .filters--scroll { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.scroll-hint:not(.can-prev):not(.can-next) > .filters--scroll { -webkit-mask-image: none; mask-image: none; }
.scroll-hint__btn { position: absolute; top: 50%; z-index: 2; width: 32px; height: 32px; margin-top: -16px; display: none; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--purple); box-shadow: 0 4px 12px rgba(15, 37, 57, .16); cursor: pointer; padding: 0; transition: background .15s, color .15s, transform .15s; }
.scroll-hint__btn:hover { background: var(--purple); color: #fff; transform: scale(1.06); }
.scroll-hint__btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.scroll-hint__btn .ico { width: 18px; height: 18px; }
.scroll-hint__btn--prev { left: -4px; }
.scroll-hint__btn--next { right: -4px; }
.scroll-hint.can-prev .scroll-hint__btn--prev, .scroll-hint.can-next .scroll-hint__btn--next { display: inline-flex; }
.scroll-hint.can-next.is-fresh .scroll-hint__btn--next { animation: cc24-nudge 1.2s ease-in-out 3; }
@keyframes cc24-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint.can-next.is-fresh .scroll-hint__btn--next { animation: none; } }
@media (max-width: 639px) { .scroll-hint__btn { width: 28px; height: 28px; margin-top: -14px; } .scroll-hint__btn--prev { left: 0; } .scroll-hint__btn--next { right: 0; } }

/* ---------- Blog ---------- */
.blog-cats { flex-wrap: wrap; margin: 0 0 32px; padding: 0; overflow: visible; }
.blog-listing { padding-top: 44px; }
.blog-cats .filter { margin: 0; }
.blog-cats .filter { text-decoration: none; display: inline-block; }
.post-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.post-card__img { display: block; aspect-ratio: 16 / 9; background: var(--bg-tint); overflow: hidden; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.post-card:hover .post-card__img img { transform: scale(1.04); }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.post-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; font-size: .8rem; color: var(--muted); }
.post-card h3 { font-size: 1.12rem; line-height: 1.35; margin: 0 0 8px; }
.post-card h3 a { color: var(--navy); text-decoration: none; }
.post-card h3 a:hover { color: var(--purple); }
.post-card p { color: var(--muted); font-size: .94rem; margin: 0 0 14px; }
.post-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--purple); text-decoration: none; }
.post-card__more .ico { width: 16px; height: 16px; transition: transform .15s; }
.post-card__more:hover .ico { transform: translateX(4px); }
.pagination { margin: 36px 0 0; }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pagination a, .pagination span { display: inline-block; min-width: 40px; padding: .5em .9em; text-align: center; border: 1px solid var(--line); border-radius: 999px; color: var(--navy); font-weight: 700; text-decoration: none; background: #fff; }
.pagination a:hover { border-color: var(--purple); color: var(--purple); }
.pagination .current { background: var(--purple); border-color: var(--purple); color: #fff; }
.blog-cta, .post-cta { display: flex; flex-direction: column; gap: 18px; margin-top: 48px; padding: 28px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(120deg, var(--navy), var(--purple-700)); }
.post-cta { margin-top: 36px; }
.blog-cta h2, .post-cta h2 { color: #fff; font-size: 1.35rem; margin: 0 0 6px; }
.blog-cta p, .post-cta p { margin: 0; color: rgba(255, 255, 255, .86); }
.post-cta .btn--primary { background: #fff; color: var(--navy); }
@media (min-width: 800px) { .blog-cta, .post-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 32px 36px; } }
.page-hero--post .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
.page-hero--post h1 { max-width: 880px; }
.post-meta { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .8); margin-top: 6px; }
.post-figure { margin: 0 0 28px; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-tint); }
.post-figure img { display: block; width: 100%; height: auto; }
.post-body h2 { margin-top: 1.6em; }
.post-body em:last-child { color: var(--muted); }
.legal h2 { margin-top: 1.8em; font-size: 1.3rem; }
.legal ul { margin-bottom: 1em; }

/* ---------- Footer: social buttons with brand colours on hover, disclaimer link ---------- */
.social a { color: #fff; }
.social svg { width: 18px; height: 18px; }
.social a[aria-label="Facebook"]:hover { background: #1877f2; }
.social a[aria-label="Instagram"]:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social a[aria-label="YouTube"]:hover { background: #ff0000; }
.social a[aria-label="LinkedIn"]:hover { background: #0a66c2; }
.footer__disclaimer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer__disclaimer a:hover { color: #fff; }