/* Shared InDevXo blog UI: listing and detail pages. */
/* Creative Light Editorial Blog — asymmetry, paper texture, lime signal color, no rounded UI */
.blog-editorial-page .page-header { background: #f4f2ec !important; min-height: 662px; }
.blog-editorial-page .page-header__bg { background-color: #f4f2ec !important; background-image: url('/assets/images/backgrounds/page-header-bg.jpg') !important; background-blend-mode: normal; background-size: cover; background-position: center; opacity: 1 !important; }
.blog-editorial-page .page-header::after { display: none !important; }
.blog-editorial-page .page-header__content { background: #fff !important; }
.blog-editorial-page .page-header__title { color: #17202b !important; }
.blog-editorial-page .indevxo-breadcrumb li,
.blog-editorial-page .indevxo-breadcrumb li a { color: #64717b !important; }
.blog-editorial-page .blog-area-two__bg { opacity: .16; filter: grayscale(1); }
.blog-editorial-page .indevxo-btn__icon { display: none !important; }
body:has(.blog-editorial-page) .indevxo-btn__icon { display: none !important; }
.blog-editorial-page .blog-card-two__link,
.blog-editorial-page .blog-card-two__link__icon { display: none !important; visibility: hidden !important; }
.blog-page-area { background: #f4f2ec; color: #17202b; position: relative; z-index: 1; overflow: hidden; }
.blog-page-area::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(23,32,43,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(23,32,43,.045) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.blog-page-area::after { content: "INSIGHT / 01"; position: absolute; right: -28px; top: 190px; color: rgba(23,32,43,.08); font: 700 clamp(70px,12vw,180px)/.8 var(--indevxo-heading-font,"Space Grotesk",sans-serif); letter-spacing: -.08em; transform: rotate(90deg); pointer-events: none; }
.blog-page-area > .container { position: relative; z-index: 1; }
.blog-page-area .sec-title__tagline { color: #53606b !important; font-weight: 700; letter-spacing: .14em; }
.blog-page-area .sec-title__title { color: #17202b !important; font-weight: 700; letter-spacing: -.045em; }
.blog-page-area .row.gutter-y-40 { display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 40px; }
.blog-page-area .row.gutter-y-40 > [class*="col-"] { display: flex; flex-direction: column; min-width: 0; }
.blog-landing-editorial { background: #f4f2ec; position: relative; overflow: hidden; }
.blog-landing-editorial::after { content: "RECENT / 03"; position: absolute; right: -35px; top: 180px; color: rgba(23,32,43,.07); font: 700 clamp(70px,11vw,160px)/.8 var(--indevxo-heading-font,"Space Grotesk",sans-serif); letter-spacing: -.08em; transform: rotate(90deg); pointer-events: none; }
.blog-landing-editorial > .container { position: relative; z-index: 1; }
.blog-landing-editorial .row.gutter-y-40 { display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 40px; }
.blog-landing-editorial .row.gutter-y-40 > [class*="col-"] { display: flex; flex-direction: column; min-width: 0; }
.blog-landing-editorial .blog-card-two { height: 100%; }
.blog-filter-bar { background: rgba(255,255,255,.72); border: 1px solid #d8d5cd; border-left: 6px solid var(--indevxo-base,#C3EE18); padding: 18px 22px; margin-bottom: 50px; box-shadow: 12px 12px 0 rgba(23,32,43,.06); backdrop-filter: blur(5px); }
.blog-filter-bar__categories { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.blog-filter-bar__pill { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: #596570; border: 1px solid #c8c7c1; padding: 8px 13px; font-family: var(--indevxo-heading-font,"Space Grotesk",sans-serif); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transition: all .25s ease; text-decoration: none !important; }
.blog-filter-bar__pill .badge-count { color: inherit; border-left: 1px solid currentColor; padding-left: 7px; font-size: 10px; }
.blog-filter-bar__pill:hover { color: #17202b; border-color: #17202b; transform: translate(-2px,-2px); }
.blog-filter-bar__pill.is-active { background: var(--indevxo-base,#C3EE18); color: #17202b; border-color: #17202b; box-shadow: 3px 3px 0 #17202b; }
.blog-filter-bar__search { position: relative; width: 100%; }
.blog-filter-bar__input { width: 100%; background: #fff; border: 1px solid #c8c7c1; color: #17202b; font-family: var(--indevxo-font,"Roboto",sans-serif); font-size: 14px; padding: 12px 48px 12px 15px; outline: none; transition: border-color .25s ease, box-shadow .25s ease; }
.blog-filter-bar__input::placeholder { color: #89939b; }
.blog-filter-bar__input:focus { border-color: #17202b; box-shadow: 4px 4px 0 var(--indevxo-base,#C3EE18); }
.blog-filter-bar__btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: #17202b; cursor: pointer; padding: 4px; }
.blog-card-two { width: 100%; background: #fff; border: 1px solid #d8d5cd; border-top: 6px solid #17202b; overflow: hidden; padding-bottom: 26px; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; height: 100%; display: flex; flex-direction: column; box-shadow: 10px 10px 0 rgba(23,32,43,.07); }
.blog-card-two:hover { border-top-color: var(--indevxo-base,#C3EE18); transform: translate(-5px,-5px); box-shadow: 16px 16px 0 rgba(23,32,43,.13); }
.blog-card-two__thumb { margin-bottom: 20px !important; position: relative; overflow: hidden; }
.blog-card-two__user { top: 14px !important; left: 14px !important; right: auto; max-width: calc(100% - 28px); width: max-content; min-height: 42px; padding: 4px 12px 4px 4px !important; gap: 8px !important; border: 1px solid rgba(23,32,43,.18); border-radius: 0 !important; background: rgba(255,255,255,.96) !important; box-shadow: 4px 4px 0 rgba(23,32,43,.18); overflow: hidden; box-sizing: border-box; }
.blog-card-two__user .user-image { width: 34px !important; height: 34px !important; min-width: 34px; min-height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: var(--indevxo-base,#C3EE18); border: 2px solid #17202b; border-radius: 50% !important; color: #17202b; font: 700 11px/1 var(--indevxo-heading-font,"Space Grotesk",sans-serif); letter-spacing: .03em; box-sizing: border-box; aspect-ratio: 1 / 1; }
.blog-card-two__user .user__name { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px !important; line-height: 15px !important; font-weight: 700 !important; color: #17202b !important; }
.blog-card-two__thumb::after { content: "READ /"; position: absolute; left: 15px; bottom: 14px; background: var(--indevxo-base,#C3EE18); color: #17202b; padding: 5px 9px; font: 700 10px var(--indevxo-heading-font,"Space Grotesk",sans-serif); letter-spacing: .1em; }
.blog-card-two__thumb img { filter: saturate(.78) contrast(1.04); transition: transform .5s ease, filter .5s ease; }
.blog-card-two:hover .blog-card-two__thumb img { transform: scale(1.06); filter: saturate(1.1) contrast(1.04); }
.blog-card-two__content { padding-right: 24px; padding-left: 54px !important; display: flex; flex-direction: column; flex-grow: 1; position: relative; min-width: 0; }
.blog-card-two__content::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 2px; background: var(--indevxo-base,#C3EE18); }
.blog-card-two__date { background: var(--indevxo-base,#C3EE18) !important; color: #17202b !important; }
.blog-card-two__meta { min-width: 0; gap: 10px; }
.blog-card-two__meta > li { min-width: 0; }
.blog-card-two__meta .tag { color: #64717b !important; border-bottom: 1px solid #17202b; white-space: nowrap; }
.blog-card-two__meta .massage { color: #89939b !important; }
.blog-card-two__title { overflow-wrap: anywhere; }
.blog-card-two__title a { color: #17202b !important; font-size: 21px !important; line-height: 1.3 !important; display: block; transition: color .25s ease; }
.blog-card-two:hover .blog-card-two__title a { color: #526d00 !important; }
.blog-card-two__excerpt { color: #64717b; font-size: 14px; line-height: 1.6; margin-top: 10px; margin-bottom: 0; }
.blog-card-two__thumb img { height: 260px !important; }
.blog-empty-card { background: #fff; border: 1px dashed #aeb4b4; padding: 50px !important; box-shadow: 10px 10px 0 rgba(23,32,43,.07); }
.blog-empty-card__icon { font-size: 40px; color: #17202b; }
.blog-empty-card__title { color: #17202b; }
.blog-empty-card__text { color: #64717b; }
.blog-pagination .pagination { justify-content: center; gap: 5px; }
.blog-pagination .page-item .page-link { background: #fff; border: 1px solid #c8c7c1; color: #596570; padding: 10px 16px; font-family: var(--indevxo-heading-font,"Space Grotesk",sans-serif); font-weight: 600; transition: all .25s ease; }
.blog-pagination .page-item.active .page-link { background: var(--indevxo-base,#C3EE18) !important; border-color: #17202b !important; color: #17202b !important; box-shadow: 3px 3px 0 #17202b; }
.blog-pagination .page-item .page-link:hover { color: #17202b; border-color: #17202b; background: #fff; }
.blog-cta-banner { background: #fffef9; border: 1px solid #17202b; border-left: 8px solid var(--indevxo-base,#C3EE18); padding: 48px 56px; position: relative; overflow: hidden; box-shadow: 14px 14px 0 rgba(23,32,43,.14); }
.blog-cta-banner::before { content: "LET'S BUILD"; position: absolute; right: -10px; top: 12%; color: rgba(23,32,43,.08); font: 900 clamp(40px,7vw,100px)/1 var(--indevxo-heading-font,"Space Grotesk",sans-serif); transform: rotate(-8deg); pointer-events: none; }
.blog-cta-banner__tag { display: inline-block; color: var(--indevxo-base,#C3EE18); border-bottom: 1px solid var(--indevxo-base,#C3EE18); padding-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.blog-cta-banner__title { color: #17202b; font-family: var(--indevxo-heading-font,"Space Grotesk",sans-serif); font-size: clamp(22px,2.3vw,32px); font-weight: 700; line-height: 1.3; margin-bottom: 0; max-width: 760px; }
@media (max-width:1199px) { .blog-card-two__content { padding-left: 0 !important; padding-right: 20px; } .blog-card-two__content::before { display: none; } }
@media (max-width:767px) { .blog-card-two__user { top: 10px !important; left: 10px !important; max-width: calc(100% - 20px); min-height: 38px; padding: 3px 9px 3px 3px !important; gap: 6px !important; } .blog-card-two__user .user-image { width: 30px !important; height: 30px !important; min-width: 30px; min-height: 30px; flex-basis: 30px; font-size: 10px; } .blog-card-two__user .user__name { max-width: 105px; font-size: 11px !important; line-height: 14px !important; } }
@media (max-width:575px) { .blog-page-area::after { display: none; } .blog-filter-bar { padding: 15px; } .blog-cta-banner { padding: 32px 24px; } .blog-cta-banner::before { font-size: 45px; } .blog-card-two__user .user__name { max-width: 92px; } }
@media (max-width:767px) { .blog-landing-editorial::after { top: 240px; right: -88px; font-size: 82px; } }

/* Keep article details in the site's light editorial theme. */
.blog-detail-light-page,
.blog-detail-light-page #smooth-wrapper,
.blog-detail-light-page #smooth-content { background-color: #f4f2ec !important; }
.blog-detail-light-page .blog-details-page { background-color: #f4f2ec !important; }
.blog-detail-light-page .blog-details-page { background-image: none !important; position: relative; overflow: hidden; }
.blog-detail-light-page .blog-details-page::after { content: "INDEVXO"; display: block; position: absolute; top: 180px; right: -38px; z-index: 0; color: rgba(23,32,43,.08); font: 700 clamp(72px,12vw,180px)/.8 var(--indevxo-heading-font,"Space Grotesk",sans-serif); letter-spacing: -.08em; transform: rotate(90deg); pointer-events: none; }
.blog-detail-light-page .blog-details-page::before,
.blog-detail-light-page .blog-details-page::before { display: none !important; }
.blog-detail-light-page .blog-details-page > .container { position: relative; z-index: 1; }
.blog-details-page { background: #f4f2ec; }
.blog-details-page .blog-details { background: #fff; border: 1px solid #d8d5cd; border-top: 6px solid #17202b; box-shadow: 12px 12px 0 rgba(23,32,43,.08); }
.blog-details-page .blog-details__content { background: #fff; padding: clamp(24px, 4vw, 52px); }
.blog-details-page .blog-details__image { margin: 0; overflow: hidden; }
.blog-details-page .blog-list-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 0 0 22px; margin: 0 0 28px; border-bottom: 1px solid #d8d5cd; }
.blog-details-page .blog-list-card__meta > li { display: flex; align-items: center; min-height: 30px; }
.blog-details-page .blog-details__title { margin: 0 0 24px; line-height: 1.12; }
.blog-details-page .blog-details__post { margin-top: 42px !important; padding-top: 8px; border-top: 1px solid #d8d5cd; }
.blog-details-page .blog-details__title,
.blog-details-page .blog-details__tags__title,
.blog-details-page .sidebar__title { color: #17202b !important; }
.blog-details-page .blog-list-card__meta,
.blog-details-page .blog-list-card__meta a,
.blog-details-page .blog-list-card__comment__text { color: #64717b !important; }
.blog-details-page .blog-list-card__category { padding: 4px 8px; font-size: 10px; line-height: 1; letter-spacing: .08em; }
.blog-details-page .blog-details__tags { gap: 8px; margin-top: 20px; }
.blog-details-page .blog-details__tags__title { font-size: 11px; letter-spacing: .08em; }
.blog-details-page .blog-details__tags .sidebar__tags { gap: 5px; }
.blog-details-page .blog-details__tags .sidebar__tags a { padding: 4px 7px; font-size: 10px; line-height: 1.2; }
.blog-details-page .blog-detail-editorial__excerpt { margin: 26px 0 30px 18px; padding: 18px 22px; background: #f4f2ec; color: #53606b; border-left: 5px solid #c3ee18; }
.blog-details-page .blog-details__image img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 0; }
.blog-details-page .blog-article-content { max-width: 900px; color: #3e4a54; font-size: 17px; line-height: 1.85; }
.blog-details-page .blog-article-content > :first-child { margin-top: 0; }
.blog-details-page .blog-article-content p { margin: 0 0 24px; }
.blog-details-page .blog-article-content h2,
.blog-details-page .blog-article-content h3,
.blog-details-page .blog-article-content h4 { color: #17202b; font-family: var(--indevxo-heading-font, "Space Grotesk", sans-serif); line-height: 1.2; margin: 42px 0 16px; }
.blog-details-page .blog-article-content h2 { font-size: clamp(26px, 3vw, 36px); padding-left: 16px; border-left: 4px solid #c3ee18; }
.blog-details-page .blog-article-content h3 { font-size: clamp(22px, 2.5vw, 30px); }
.blog-details-page .blog-article-content h4 { font-size: 21px; }
.blog-details-page .blog-article-content ul,
.blog-details-page .blog-article-content ol { margin: 24px 0 28px; padding-left: 24px; }
.blog-details-page .blog-article-content li { margin: 10px 0; padding-left: 6px; }
.blog-details-page .blog-article-content li::marker { color: #526d00; font-weight: 700; }
.blog-details-page .blog-article-content strong { color: #17202b; }
.blog-details-page .blog-article-content a { color: #526d00; text-decoration-color: #c3ee18; text-underline-offset: 4px; }
.blog-details-page .blog-article-content blockquote { margin: 32px 0; padding: 22px 24px; border-left: 5px solid #17202b; background: #f4f2ec; color: #53606b; font-size: 20px; line-height: 1.55; }
.blog-details-page .blog-article-content img { display: block; max-width: 100%; height: auto; margin: 30px 0; border: 1px solid #d8d5cd; }
.blog-details-page .sidebar__widget { margin-bottom: 30px; }
.blog-details-page .sidebar__text { color: #64717b; line-height: 1.7; }
.blog-detail-recent { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #d8d5cd; color: inherit; text-decoration: none; }
.blog-detail-recent__date { flex: 0 0 42px; color: #526d00; font: 700 11px/1.3 var(--indevxo-heading-font, "Space Grotesk", sans-serif); text-transform: uppercase; }
.blog-detail-recent__title { color: #17202b; font-size: 14px; line-height: 1.4; }
.blog-detail-recent:hover .blog-detail-recent__title { color: #526d00; }
.blog-details-page .sidebar__single { background: #fff; border: 1px solid #d8d5cd; padding: 24px; }
.blog-details-page .sidebar__single .indevxo-btn__icon { display: none; }
.blog-detail-related-section { background: #f4f2ec !important; }
.blog-detail-related-section .sec-title__title,
.blog-detail-related-section .sec-title__tagline { color: #17202b !important; }
.blog-detail-related-section .row.gutter-y-40 { display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 40px; }
.blog-detail-related-section .row.gutter-y-40 > [class*="col-"] { display: flex; flex-direction: column; min-width: 0; }
.blog-detail-related-section .blog-card-two { height: 100%; }
.blog-detail-light-page > #smooth-wrapper > #smooth-content > .main-footer { background-color: var(--indevxo-black, #000) !important; }
@media (max-width: 991px) { .blog-details-page .sidebar { margin-top: 10px; } }
@media (max-width: 767px) { .blog-details-page .blog-details__content { padding: 24px 20px; } .blog-details-page .blog-list-card__meta > li { width: 100%; } .blog-detail-light-page .blog-details-page::after { top: 220px; right: -84px; font-size: 82px; } }