/*
 * mobile-blog.css
 * Mobile-only overrides for blog/index.html (max-width: 768px)
 * Target design: BlogListing-Mobile-Redesign-Page.html (390px viewport)
 *
 * Styles are taken from the design's inline CSS (packed in the bundled
 * JS/HTML). Rules are purely additive — they only apply inside media
 * queries and do NOT affect desktop styles.
 * HTML markup and class names are left unchanged.
 */


/* ============================================================
   0. SHARED UTILITIES (from design <style>)
   html box-sizing | body Open Sans / 1.5 / #231f20
   a #231f20 | focus-visible 2px #231f20
   ============================================================ */
@media (max-width: 768px) {
  .th-clamp3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .th-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ============================================================
   1. TOP BAR
   Design: height 44px | bg #231f20 | pad 0 20px | gap 12px
   text 13px / 0.02em | catalogue underline offset 3px
   ============================================================ */
@media (max-width: 768px) {
  .th-topbar {
    height: 44px !important;
    background-color: #231f20 !important;
    padding: 0 !important;
  }

  .th-topbar .position-relative.container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    height: 44px !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  .th-topbar .d-flex.align-items-center.justify-content-center {
    display: contents !important;
  }

  .th-topbar-text {
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #fff !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .th-topbar .contact-sales {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .th-topbar-link {
    font-size: 13px !important;
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    white-space: nowrap !important;
    padding-left: 12px !important;
  }

  .th-topbar .fa-envelope {
    display: none !important;
  }
}


/* ============================================================
   2. HEADER / NAVIGATION BAR
   Design: height 60px | pad 0 20px | logo 22px | icons 20px
   hamburger 40x40 / ml -10px | gap 12px
   border-bottom 1px #e8e8e8
   ============================================================ */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .th-menu-wrapper,
  .sticky-wrapper,
  .sticky-wrapper.desktop-menu,
  .menu-area {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .sticky-wrapper.desktop-menu,
  .sticky-wrapper .menu-area {
    background: #ffffff !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }

  .sticky-wrapper.desktop-menu .menu-area {
    padding: 0;
  }

  .sticky-wrapper.desktop-menu .menu-area .row {
    padding-left: 20px !important;
    padding-right: 20px !important;
    min-height: 60px;
    align-items: center !important;
  }

  .header-logo a img {
    height: 22px;
    width: auto;
    display: block;
  }

  .sticky-wrapper .d-none.d-lg-inline-block {
    display: none !important;
  }

  .th-user-dropdown {
    display: none !important;
  }

  .header-button.d-none.d-lg-inline-block {
    display: none !important;
  }

  .sticky-wrapper .d-flex.align-items-end.gap-3 {
    gap: 12px !important;
    margin-bottom: 0 !important;
    align-items: center !important;
  }

  button.th-menu-toggle.d-block.d-lg-none {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #231f20;
    font-size: 18px;
    margin-left: -10px;
    cursor: pointer;
    padding: 0;
  }

  .fa-regular.fa-magnifying-glass,
  .fa-solid.fa-magnifying-glass,
  .th-header-search .fa-regular.fa-magnifying-glass,
  #th-header-global-search i,
  #th-header-global-search .fa-regular.fa-magnifying-glass {
    font-size: 20px !important;
  }

  .fa-solid.fa-user,
  .fa-regular.fa-bookmark {
    font-size: 20px !important;
  }

  .th-header-search {
    width: 20px;
    height: 20px;
    display: flex !important;
    align-items: center !important;
  }

  #pinboard-button img,
  a[aria-controls="offcanvasRight"] img,
  img[src*="pinboard-icon"] {
    width: 20px !important;
    height: 20px !important;
  }

  .sticky-wrapper .col-4.d-flex {
    flex: none !important;
  }

  .sticky-wrapper .col-4:first-child {
    justify-content: flex-start !important;
  }

  .sticky-wrapper .col-4:nth-child(2) {
    justify-content: center !important;
  }

  .sticky-wrapper .col-4:last-child {
    justify-content: flex-end !important;
  }
}


/* ============================================================
   3. WHAT'S HAPPENING (#whats-happening)
   Design: bg #f6f5f3 | pad 16px 20px 40px
   breadcrumb 11px / 0.04em / #33322f | gap 6px | pb 22px
   h1 20/1.25/700 | mb 24px
   hero 240px | radius 10px | border 1px #e2e0dd
   arrow 40x40 | right/bottom 14px | bg rgba(255,255,255,.94)
   copy pt 18px | date 11/0.04em/#8c8985 | title 26/1.18/700
   excerpt 14/1.6/#33322f | Read Article 12/600 underline 3px
   list mt 32px | border-top #dedcd8 | row pad 16px 0 | gap 14px
   thumb 88x64 | radius 8px | title 14/1.45/600 underline 3px
   ============================================================ */
@media (max-width: 768px) {
  #whats-happening,
  #whats-happening.whats-happening-background,
  #whats-happening.th-blog-whats-happening-section-py {
    background: #f6f5f3 !important;
    background-color: #f6f5f3 !important;
    padding: 16px 0 40px !important;
    position: relative !important;
    color: #231f20 !important;
  }

  #whats-happening [data-v-whatishappening-component-link] {
    display: none !important;
  }

  #whats-happening .container.th-container,
  #whats-happening .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #whats-happening .th-breadcrumb {
    padding: 0 0 22px !important;
    margin: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: left !important;
  }

  #whats-happening .th-breadcrumb .breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
    color: #33322f !important;
    background: transparent !important;
  }

  #whats-happening .th-breadcrumb .breadcrumb-item,
  #whats-happening .th-breadcrumb .breadcrumb-item a,
  #whats-happening .th-breadcrumb .breadcrumb-item span,
  #whats-happening .th-breadcrumb .breadcrumb-item.active {
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    color: #33322f !important;
    padding: 0 !important;
    float: none !important;
  }

  #whats-happening .th-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    padding: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    color: #33322f !important;
    opacity: 0.5 !important;
    font-size: 11px !important;
  }

  #whats-happening .th-breadcrumb .breadcrumb-item.active,
  #whats-happening .th-breadcrumb .breadcrumb-item.active span {
    font-weight: 600 !important;
    color: #33322f !important;
  }

  #whats-happening .section-body.whats-happening-container,
  #whats-happening .whats-happening-container {
    margin: 0 !important;
    padding: 0 !important;
  }

  #whats-happening .whats-happening-container > .row {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  #whats-happening .whats-happening-container > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* H1 — What's Happening? */
  #whats-happening .whats-happening h1,
  #whats-happening h1.th-title,
  #whats-happening h1.th-title-50,
  #whats-happening h1.th-title-mb-15 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: #231f20 !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Stack: image → title/excerpt → featured list */
  #whats-happening .whats-happening-container > .row:last-child > .col-md-7:not(.th-whats-happening-title) {
    order: 1 !important;
  }

  #whats-happening .th-whats-happening-title {
    order: 2 !important;
    margin-top: 0 !important;
  }

  #whats-happening .th-whats-happening-right {
    order: 3 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #whats-happening .whats-happening-container > .row:last-child > .col-md-7:not(.th-whats-happening-title) > a {
    display: block !important;
    position: relative !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #e2e0dd !important;
  }

  #whats-happening .whats-happening-left {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-radius: 0 !important;
  }

  #whats-happening .th-member-info-container {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #whats-happening .link.read-more.th-white-link,
  #whats-happening .th-white-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  #whats-happening .link-icon-btn-white-large {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.94) !important;
    background-color: rgba(255, 255, 255, 0.94) !important;
    color: #231f20 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #whats-happening .link-icon-btn-white-large::before,
  #whats-happening .link-icon-btn-white-large::after {
    content: none !important;
    display: none !important;
  }

  #whats-happening .link-icon-btn-white-large i,
  #whats-happening .th-white-link .link-icon-btn-white-large i,
  #whats-happening .th-white-link.link .link-icon-btn > i {
    font-size: 16px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  /* Featured title + excerpt under the hero */
  #whats-happening .whats-happening-content {
    padding-top: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #whats-happening .th-blog-hero-date,
  #whats-happening .whats-happening-content .th-blog-hero-date {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #8c8985 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
  }

  #whats-happening .whats-happening-content a.hover {
    display: block !important;
    color: #231f20 !important;
    text-decoration: none !important;
  }

  #whats-happening .whats-happening-content h2,
  #whats-happening .whats-happening-content h2.th-title,
  #whats-happening .whats-happening-content .th-hero-blog-title,
  #whats-happening .whats-happening-content .th-title-mb-20 {
    font-size: 26px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
  }

  #whats-happening .whats-happening-content .th-section-subtitle,
  #whats-happening .whats-happening-content .th-section-subtitle-mb {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #33322f !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-weight: 400 !important;
  }

  #whats-happening .th-blog-read-article {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  /* Featured list (right column items) */
  #whats-happening .whats-happening-right,
  #whats-happening .whats-happening-right.gap-15 {
    margin: 32px 0 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    border-top: 1px solid #dedcd8 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: auto !important;
  }

  #whats-happening .whats-happening-right .row,
  #whats-happening .whats-happening-right .row.align-items-start,
  #whats-happening .whats-happening-right .right-item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #dedcd8 !important;
    width: 100% !important;
    flex: none !important;
  }

  #whats-happening .whats-happening-right .right-item > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
    display: block !important;
  }

  #whats-happening .whats-happening-right .right-item > [class*="col-"]:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #whats-happening .whats-happening-right .right-item > [class*="col-"]:last-child {
    flex: 0 0 auto !important;
    width: 88px !important;
    max-width: 88px !important;
  }

  #whats-happening .whats-happening-right .th-publish-date,
  #whats-happening .whats-happening-right p.my-5,
  #whats-happening .whats-happening-right .font-size-16 {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #8c8985 !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    padding-top: 0 !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
  }

  #whats-happening .whats-happening-right .d-flex.align-items-center {
    display: block !important;
  }

  #whats-happening .whats-happening-right a.hover {
    display: block !important;
    flex: none !important;
    color: #231f20 !important;
    text-decoration: none !important;
  }

  #whats-happening .whats-happening-right .th-underline,
  #whats-happening .whats-happening-right .th-hero-blog-link,
  #whats-happening .whats-happening-right p.th-underline,
  #whats-happening .whats-happening-right p.mb-0 {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #whats-happening .whats-happening-right .upper-img,
  #whats-happening .whats-happening-right .th-right-item-image,
  #whats-happening .whats-happening-right .d-flex.th-right-item-image {
    display: block !important;
    width: 88px !important;
    height: 64px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: unset !important;
    justify-content: unset !important;
  }

  #whats-happening .whats-happening-right .upper-img a {
    display: block !important;
    width: 88px !important;
    height: 64px !important;
  }

  #whats-happening .whats-happening-right img,
  #whats-happening .whats-happening-right .upper-img img {
    display: block !important;
    width: 88px !important;
    height: 64px !important;
    min-width: 88px !important;
    min-height: 64px !important;
    max-width: 88px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }
}


/* ============================================================
   4. LATEST NEWS (#blog-list)
   Design: bg #fff | pad 40px 20px 48px
   title 20/1.25/700 | mb 6px
   intro 12/1.65/#33322f | mb 18px
   cards column gap 20px | border 1px #e8e8e8 | radius 10px
   image aspect 16/11 | pin 36x36 | top/right 10px
   footer pad 14px 16px 16px | gap 6px
   date 11/0.04em/#8c8985
   title 15/600/1.4 | excerpt 12/1.6/#33322f
   Read More 12/600 underline 3px | mt 4px
   Load More 100% | mt 28px | pad 12px 20px | 13/600
   border 1px #231f20 | radius 2px | hover invert
   ============================================================ */
@media (max-width: 768px) {
  #blog-list,
  #blog-list.latest-news,
  #blog-list.th-section-py {
    background: #ffffff !important;
    padding: 40px 0 48px !important;
    color: #231f20 !important;
  }

  #blog-list [data-v-latestnews-component-link],
  #blog-list .d-flex.justify-content-end.pr-40 {
    display: none !important;
  }

  #blog-list .container.th-container,
  #blog-list .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #blog-list .container > .row,
  #blog-list .section-body,
  #blog-list .section-header {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  #blog-list .section-header.project-header {
    padding: 0 !important;
    margin: 0 !important;
  }

  #blog-list .section-header .w-100.text-center.mb-5 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
  }

  #blog-list .th-title,
  #blog-list .th-section-title,
  #blog-list h2.th-title,
  #blog-list h2.th-section-title,
  #blog-list .th-title-mb-15 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-align: left !important;
    letter-spacing: 0 !important;
  }

  #blog-list .th-blog-news-intro {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    font-weight: 400 !important;
    text-align: left !important;
  }

  #blog-list .row.project-list-row,
  #blog-list .project-list-row.pt-100,
  #blog-list .project-list-row.th-projects-list-pt,
  #blog-list .section-body .row.project-list-row,
  #blog-list #th-blog-app,
  #blog-list #th-blog-app.row,
  #blog-list .blog-post-list-component .row.project-list-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
  }

  #blog-list .project-list-item,
  #blog-list .blog-post-list-component .project-list-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  #blog-list .list-img,
  #blog-list .list-img.position-relative {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #f6f6f6 !important;
    aspect-ratio: auto !important;
  }

  #blog-list .list-img a.hover.position-absolute.top-left-10 {
    display: none !important;
  }

  #blog-list .img-container,
  #blog-list .list-img .img-container,
  #blog-list .img-container a.hover,
  #blog-list .list-img a.hover {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  #blog-list .list-img img,
  #blog-list .img-container img,
  #blog-list .img-container img.w-100 {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 11 !important;
    object-fit: cover !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  #blog-list .th-add-to-pinboard,
  #blog-list .add-to-pinboard,
  #blog-list .th-add-to-pinboard.top-right-30,
  #blog-list .add-to-pinboard.top-right-30,
  #blog-list .list-img .th-add-to-pinboard {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #231f20 !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    font-size: 12px !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
    overflow: visible !important;
    text-transform: none !important;
    text-shadow: none !important;
    transition: transform 0.2s, background 0.2s !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #blog-list .th-add-to-pinboard:focus,
  #blog-list .th-add-to-pinboard:focus-visible,
  #blog-list .th-add-to-pinboard:active,
  #blog-list .add-to-pinboard:focus,
  #blog-list .add-to-pinboard:focus-visible,
  #blog-list .add-to-pinboard:active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #231f20 !important;
    outline: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    text-shadow: none !important;
  }

  #blog-list .th-add-to-pinboard::before,
  #blog-list .th-add-to-pinboard::after,
  #blog-list .add-to-pinboard::before,
  #blog-list .add-to-pinboard::after {
    content: none !important;
    display: none !important;
  }

  #blog-list .th-add-to-pinboard i,
  #blog-list .add-to-pinboard i,
  #blog-list .th-add-to-pinboard .fa-plus {
    font-size: 12px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  /* Vue-sized loader for TPL + Vue pin buttons */
  #blog-list .th-add-to-pinboard:has(.spinner-border) i,
  #blog-list .th-add-to-pinboard[aria-busy="true"] i {
    display: none !important;
  }

  #blog-list .th-add-to-pinboard .spinner-border,
  #blog-list .th-add-to-pinboard .spinner-border-sm {
    display: inline-block !important;
    width: 1rem !important;
    height: 1rem !important;
    --bs-spinner-width: 1rem !important;
    --bs-spinner-height: 1rem !important;
    --bs-spinner-border-width: 0.2em !important;
    border-width: 0.2em !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 1rem !important;
    vertical-align: middle !important;
  }

  @media (hover: hover) and (pointer: fine) {
    #blog-list .th-add-to-pinboard:hover,
    #blog-list .add-to-pinboard:hover {
      background: #231f20 !important;
      background-color: #231f20 !important;
      color: #ffffff !important;
      transform: none !important;
      text-shadow: none !important;
    }

    #blog-list .th-add-to-pinboard:hover i,
    #blog-list .add-to-pinboard:hover i {
      color: #ffffff !important;
    }
  }

  #blog-list .card-footer,
  #blog-list .card-footer.d-flex {
    padding: 14px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: none !important;
  }

  #blog-list .card-footer > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #blog-list .card-footer a.hover {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    color: #231f20 !important;
    text-decoration: none !important;
  }

  #blog-list .th-blog-card-date {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #8c8985 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }

  #blog-list .th-blog-title,
  #blog-list h6.th-blog-title,
  #blog-list .card-footer h6,
  #blog-list .card-footer .font-weight-400,
  #blog-list .card-footer h6.font-weight-400 {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #231f20 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  #blog-list .th-blog-excerpt,
  #blog-list .card-footer .th-blog-excerpt {
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: #33322f !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
  }

  #blog-list .th-read-more-btn,
  #blog-list .link.th-read-more-btn,
  #blog-list .th-read-more-btn.th-mt-16 {
    display: inline !important;
    align-items: unset !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  #blog-list .th-link-text,
  #blog-list .link-text,
  #blog-list .th-read-more-btn .th-link-text,
  #blog-list .th-read-more-btn .link-text {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: inline !important;
    border: none !important;
  }

  #blog-list .th-read-more-btn .link-icon-btn,
  #blog-list .th-read-more-btn .th-link-icon-btn,
  #blog-list .card-footer .link-icon-btn {
    display: none !important;
  }

  #blog-list .row.justify-content-center.mb-80,
  #blog-list [data-v-load-more-container] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
  }

  #blog-list [data-v-load-more-container] .col-auto,
  #blog-list [data-v-load-more-container] .col-auto.th-pt-100 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #blog-list #all-blog-pagination {
    display: none !important;
  }

  #blog-list #load_more_button,
  #blog-list .btn.th-btn-gray.load-more,
  #blog-list button.load-more {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #231f20 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #231f20 !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    height: auto !important;
    min-width: 0 !important;
    text-shadow: none !important;
  }

  #blog-list #load_more_button:hover,
  #blog-list .btn.th-btn-gray.load-more:hover,
  #blog-list button.load-more:hover {
    background: #231f20 !important;
    background-color: #231f20 !important;
    color: #ffffff !important;
  }

  #blog-list .blog-post-list-component {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #blog-list #th-blog-app .blog-post-list-component .row.project-list-row {
    margin-top: 20px !important;
  }
}



/* ============================================================
   6. GENERAL TYPOGRAPHY & SPACING
   ============================================================ */
@media (max-width: 768px) {
  body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px !important;
    line-height: 1.5;
    color: #231f20;
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: #231f20;
  }

  .th-container,
  .th-container-md {
    max-width: 100% !important;
  }

  img {
    max-width: 100% !important;
  }

  .th-component-edit-link,
  [data-v-whatishappening-component-link],
  [data-v-latestnews-component-link],
  [data-v-footer-edit-link-container] {
    display: none !important;
  }

  .sticky-wrapper.desktop-menu .main-menu {
    display: none !important;
  }

  .way-points-container {
    display: none !important;
  }
}


/* ============================================================
   7. EXTRA SMALL (max-width: 390px)
   Keep design type sizes — do not shrink
   ============================================================ */
@media (max-width: 390px) {
  #whats-happening h1.th-title,
  #whats-happening h1.th-title-50 {
    font-size: 20px !important;
  }

  #whats-happening .whats-happening-content h2,
  #whats-happening .whats-happening-content .th-hero-blog-title {
    font-size: 26px !important;
  }

  #blog-list .th-section-title {
    font-size: 20px !important;
  }
}