/*
 * ThinkDone Solutions - Blog listing (new design).
 * Loaded by blog-v2.php after css/services-v2.css (hero base, heading animations, closing CTA).
 * The hero reuses the original home hero pieces from css/home-v2.css (pills, featured article card,
 * tech lines); the rules here only lay them out for this page. All rules sit under .tdsi-page.
 */

/* ---------- hero: copy left, featured article right, tech lines along the bottom ---------- */
.tdsi-page .tdsi-hero { display: flex; flex-direction: column; min-height: 983px; }
.tdsi-page .tdsi-hero__grid { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 48px 96px; padding-top: 48px; padding-bottom: 40px; }
.tdsi-page .tdsi-hero__copy { min-width: 0; max-width: 820px; }
.tdsi-page .tdsi-hero__copy .tdsv2-eyebrow { margin-bottom: 22px; font-size: 14px; }
.tdsi-page .tdsi-hero .tdsv2-hero__pills-label { margin: 56px 0 16px; font-size: 13px; }
.tdsi-page .tdsi-hero .tdsv2-pill { cursor: pointer; }

/* the original featured article card, given the new card radius and a little life */
.tdsi-page .tdsi-feature { flex: none; width: 100%; max-width: none; margin: 0; padding: 18px; border-radius: 12px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .3s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.tdsi-page .tdsi-feature:hover { border-color: rgba(255, 89, 47, .55); transform: translateY(-4px); }
.tdsi-page .tdsi-feature .tdsv2-feature__media { height: 260px; border-radius: 8px; }
.tdsi-page .tdsi-feature .tdsv2-feature__media img { transition: scale .8s cubic-bezier(.2, .8, .2, 1); }
.tdsi-page .tdsi-feature:hover .tdsv2-feature__media img { scale: 1.05; }
.tdsi-page .tdsi-feature .tdsv2-feature__tag { left: 14px; top: 14px; padding: 4px 10px; font-size: 11px; }
.tdsi-page .tdsi-feature__meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 18px 2px 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--tds-peri); }
.tdsi-page .tdsi-feature__meta span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 10px; border-radius: 50%; background: var(--tds-or); vertical-align: middle; }
.tdsi-page .tdsi-feature__meta span:first-child { color: var(--tds-or); }
.tdsi-page .tdsi-feature .tdsv2-feature__title { margin-top: 10px; font-size: 21px; line-height: 1.3; }
.tdsi-page .tdsi-feature .tdsv2-feature__link { margin-top: 16px; }
.tdsi-page .tdsi-feature .tdsv2-feature__link svg { transition: transform .3s; }
.tdsi-page .tdsi-feature .tdsv2-feature__link:hover svg { transform: translateX(4px); }

.tdsi-page .tdsi-hero .tdsi-hero__deco { position: relative; margin-top: 0; }

/* ---------- articles ---------- */
.tdsi-page .tdsi-articles { scroll-margin-top: 40px; }
.tdsi-page .tdsi-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 40px; }
.tdsi-page .tdsi-filter[hidden] { display: none; }
.tdsi-page .tdsi-filter__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 9px 9px 17px; background: #FFFFFF; border: 1px solid var(--tds-line2); border-radius: 999px; color: var(--tds-ink); font-family: var(--tds-title); font-weight: 500; font-size: 15px; line-height: 1.2; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; }
.tdsi-page .tdsi-filter__btn span { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--tds-alt); font-size: 13px; font-weight: 600; transition: background-color .25s, color .25s; }
.tdsi-page .tdsi-filter__btn:hover { border-color: var(--tds-ink); }
.tdsi-page .tdsi-filter__btn[aria-pressed="true"] { background: var(--tds-n950); border-color: var(--tds-n950); color: #FFFFFF; }
.tdsi-page .tdsi-filter__btn[aria-pressed="true"] span { background: var(--tds-or); color: var(--tds-n950); }

.tdsi-page .tdsi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; margin: 0; padding: 0; list-style: none; }
.tdsi-page .tdsi-card { position: relative; display: flex; flex-direction: column; min-width: 0; transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * .06s); }
.tdsi-page .tdsi-card[hidden] { display: none; }
.tdsi-page .tdsi-card.is-out { opacity: 0; transform: translateY(28px); }
.tdsi-page .tdsi-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(80% 70% at 100% 0%, rgba(255, 89, 47, .45) 0%, rgba(255, 89, 47, 0) 62%), linear-gradient(160deg, #2E2F31 0%, #17181A 100%); border-radius: 12px; }
.tdsi-page .tdsi-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.2, .8, .2, 1); }
.tdsi-page .tdsi-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 24, 26, 0) 55%, rgba(23, 24, 26, .35) 100%); opacity: 0; transition: opacity .4s; }
.tdsi-page .tdsi-card:hover .tdsi-card__media img { scale: 1.06; }
.tdsi-page .tdsi-card:hover .tdsi-card__media::after { opacity: 1; }
.tdsi-page .tdsi-card__ph { position: absolute; left: 20px; bottom: 18px; font-family: var(--tds-display); font-size: 28px; line-height: 1; color: #FFFFFF; }
.tdsi-page .tdsi-card__body { display: flex; flex: 1; flex-direction: column; padding-top: 22px; }
.tdsi-page .tdsi-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-size: 13px; color: var(--tds-slate); }
.tdsi-page .tdsi-card__meta > * + *::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 10px; border-radius: 50%; background: var(--tds-line2); vertical-align: middle; }
.tdsi-page .tdsi-card__cat { padding: 3px 10px; border-radius: 999px; background: var(--tds-tint); font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--tds-tag); }
.tdsi-page .tdsi-card__meta .tdsi-card__cat + *::before { margin-left: 12px; }
.tdsi-page .tdsi-card__title { margin-top: 14px; font-family: var(--tds-title); font-weight: 600; font-size: clamp(20px, 1.45vw, 24px); line-height: 1.3; color: var(--tds-ink); }
.tdsi-page .tdsi-card__link { color: inherit; background: linear-gradient(var(--tds-or), var(--tds-or)) 0 100% / 0 2px no-repeat; transition: background-size .45s cubic-bezier(.65, 0, .2, 1); }
.tdsi-page .tdsi-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.tdsi-page .tdsi-card:hover .tdsi-card__link { background-size: 100% 2px; }
.tdsi-page .tdsi-card__link:focus-visible { outline: none; }
.tdsi-page .tdsi-card:has(.tdsi-card__link:focus-visible) { outline: 2px solid var(--tds-or); outline-offset: 6px; border-radius: 12px; }
.tdsi-page .tdsi-card__excerpt { display: -webkit-box; margin-top: 12px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 15px; line-height: 1.65; color: var(--tds-slate); }
.tdsi-page .tdsi-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-family: var(--tds-title); font-weight: 600; font-size: 15px; color: var(--tds-ink); }
.tdsi-page .tdsi-card__more svg { transition: transform .3s; }
.tdsi-page .tdsi-card:hover .tdsi-card__more { color: var(--tds-or-text); }
.tdsi-page .tdsi-card:hover .tdsi-card__more svg { transform: translateX(5px); }

.tdsi-page .tdsi-more { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 72px; }
.tdsi-page .tdsi-more[hidden] { display: none; }
.tdsi-page .tdsi-more__status { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tds-slate); }
.tdsi-page .tdsi-more__bar { position: relative; width: 220px; height: 3px; overflow: hidden; background: var(--tds-line); border-radius: 3px; }
.tdsi-page .tdsi-more__bar span { position: absolute; inset: 0; background: var(--tds-or); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .6s cubic-bezier(.65, 0, .2, 1); }
.tdsi-page .tdsi-more .tdsv2-btn { margin-top: 8px; }
.tdsi-page .tdsi-empty { padding: 56px 40px; border: 1px dashed var(--tds-line2); border-radius: 12px; text-align: center; }

/* ---------- topics ---------- */
.tdsi-page .tdsi-topics__aside { max-width: 360px; font-size: 16px; line-height: 1.6; color: var(--tds-peri); }
.tdsi-page .tdsi-topics__aside b { font-family: var(--tds-display); font-weight: 400; font-size: 34px; line-height: 1; color: var(--tds-or); }
.tdsi-page .tdsi-topics__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tdsi-page .tdsi-topic { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 22px; grid-column: span 2; min-height: 190px; padding: 26px; overflow: hidden; background: rgba(255, 255, 255, .03); border: 1px solid rgba(221, 222, 222, .14); border-radius: 12px; transition: border-color .3s, background-color .3s, opacity .6s, transform .6s; transition-delay: 0s, 0s, calc(var(--i, 0) * .06s), calc(var(--i, 0) * .06s); }
.tdsi-page .tdsi-topic::before { content: ''; position: absolute; right: -80px; top: -80px; z-index: -1; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 89, 47, .28) 0%, rgba(255, 89, 47, 0) 65%); opacity: 0; transition: opacity .4s; }
.tdsi-page .tdsi-topic:hover { border-color: rgba(255, 89, 47, .55); background: rgba(255, 255, 255, .05); }
.tdsi-page .tdsi-topic:hover::before { opacity: 1; }
.tdsi-page .tdsi-topic--big { min-height: 420px; padding: 32px; }
.tdsi-page .tdsi-topic__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tdsi-page .tdsi-topic__name { font-family: var(--tds-title); font-weight: 600; font-size: 21px; line-height: 1.3; color: #FFFFFF; }
.tdsi-page .tdsi-topic--big .tdsi-topic__name { font-family: var(--tds-display); font-weight: 400; font-size: clamp(30px, 2.6vw, 42px); line-height: 1.05; }
.tdsi-page .tdsi-topic__count { flex: 0 0 auto; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--tds-peri); white-space: nowrap; }
.tdsi-page .tdsi-topic__count b { font-family: var(--tds-display); font-weight: 400; font-size: 30px; letter-spacing: 0; color: var(--tds-or); }
.tdsi-page .tdsi-topic__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(221, 222, 222, .12); }
.tdsi-page .tdsi-topic__list li { border-bottom: 1px solid rgba(221, 222, 222, .12); }
.tdsi-page .tdsi-topic__list a { display: block; padding: 13px 0; font-size: 15px; line-height: 1.45; color: var(--tds-peri); transition: color .2s, padding-left .3s; }
.tdsi-page .tdsi-topic__list a:hover { padding-left: 8px; color: #FFFFFF; }
.tdsi-page .tdsi-topic__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-family: var(--tds-title); font-weight: 600; font-size: 15px; color: #FFFFFF; }
.tdsi-page .tdsi-topic__go svg { transition: transform .3s; }
.tdsi-page .tdsi-topic__go:hover { color: var(--tds-or); }
.tdsi-page .tdsi-topic__go:hover svg { transform: translateX(5px); }
.tdsi-page.tdss-ready .tdsi-topics__grid:not(.is-in) .tdsi-topic { opacity: 0; transform: translateY(24px); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .tdsi-page .tdsi-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 48px 56px; }
}
@media (max-width: 1100px) {
  .tdsi-page .tdsi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdsi-page .tdsi-topics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdsi-page .tdsi-topic { grid-column: auto; }
  .tdsi-page .tdsi-topic--big { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 1024px) {
  .tdsi-page .tdsi-hero { min-height: 0; }
  .tdsi-page .tdsi-hero__grid { grid-template-columns: minmax(0, 1fr); padding-top: 56px; padding-bottom: 64px; }
  .tdsi-page .tdsi-feature { max-width: 520px; }
}
@media (max-width: 768px) {
  .tdsi-page .tdsi-hero .tdsv2-hero__pills-label { margin-top: 40px; }
  .tdsi-page .tdsi-feature .tdsv2-feature__media { height: 200px; }
  .tdsi-page .tdsi-filter { flex-wrap: nowrap; margin: -8px -20px 32px; padding: 0 20px 6px; overflow-x: auto; scrollbar-width: none; }
  .tdsi-page .tdsi-filter::-webkit-scrollbar { display: none; }
  .tdsi-page .tdsi-filter__btn { flex: 0 0 auto; }
  .tdsi-page .tdsi-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .tdsi-page .tdsi-more { margin-top: 56px; }
  .tdsi-page .tdsi-topics__grid { grid-template-columns: minmax(0, 1fr); }
  .tdsi-page .tdsi-topic, .tdsi-page .tdsi-topic--big { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .tdsi-page .tdsi-card, .tdsi-page .tdsi-feature, .tdsi-page .tdsi-topic, .tdsi-page .tdsi-card__media img, .tdsi-page .tdsi-more__bar span { transition: none; }
}