/* =========================================================
   IdeaBuilders — Blog stylesheet
   1. Base & variables
   2. Header / navbar
   3. Page head
   4. Blog cards  <-- listing page
   4b. Pagination
   5. Footer
   6. Responsive
   7. Blog detail page  <-- .post- prefix
   7b. Admin / dynamic content
   7c. Recent blogs (sticky sidebar)
   7d. Blog detail responsive
   ========================================================= */

/* ============ 1. Base & variables ============ */
/*:root {*/
/*    --ib-black: #000000;*/
/*    --ib-body: #000000;*/
/*    --ib-muted: #000000;*/
/*    --ib-line: #e2e2e2;*/
/*    --ib-bg: #f6f6f4;*/
/*    --ib-white: #ffffff;*/

/*    --ib-display: 'Space Grotesk', 'Segoe UI', sans-serif;*/
/*    --ib-text: 'Inter', 'Segoe UI', Arial, sans-serif;*/

/*    --ib-radius: 14px;*/
/*    --ib-ease: cubic-bezier(0.22, 0.61, 0.36, 1);*/
/*}*/

/** {*/
/*    box-sizing: border-box;*/
/*}*/

/*body {*/
/*    margin: 0;*/
/*    font-family: var(--ib-text);*/
/*    font-size: 16px;*/
/*    line-height: 1.7;*/
/*    color: var(--ib-body);           */
/*    background-color: var(--ib-white);*/
/*    -webkit-font-smoothing: antialiased;*/
/*}*/

/*a {*/
/*    text-decoration: none;*/
/*    color: var(--ib-black);*/
/*}*/

/*img {*/
/*    max-width: 100%;*/
/*    display: block;*/
/*}*/

/*h1, h2, h3, h4 {*/
/*    font-family: var(--ib-display);*/
/*    color: var(--ib-black);*/
/*    margin: 0;*/
/*}*/

/*:focus-visible {*/
/*    outline: 2px solid var(--ib-black);*/
/*    outline-offset: 3px;*/
/*}*/


/* ============ 2. Header / navbar ============ */
/*.site-header {*/
/*    position: sticky;*/
/*    top: 0;*/
/*    z-index: 999;*/
/*    background: var(--ib-white);*/
/*    border-bottom: 1px solid var(--ib-line);*/
/*}*/

/*.site-header .navbar {*/
/*    padding: 16px 0;*/
/*}*/

/*.navbar-brand {*/
/*    font-family: var(--ib-display);*/
/*    font-weight: 700;*/
/*    font-size: 22px;*/
/*    letter-spacing: -0.02em;*/
/*    color: var(--ib-black);*/
/*}*/

/*.navbar-brand span {*/
/*    font-weight: 500;*/
/*}*/

/*.site-header .nav-link {*/
/*    font-size: 15px;*/
/*    font-weight: 500;*/
/*    color: var(--ib-black);*/
/*    padding: 8px 16px;*/
/*    opacity: 0.65;*/
/*    transition: opacity 0.25s var(--ib-ease);*/
/*}*/

/*.site-header .nav-link:hover,*/
/*.site-header .nav-link.active {*/
/*    opacity: 1;*/
/*}*/

/*.nav-btn {*/
/*    display: inline-block;*/
/*    margin-left: 12px;*/
/*    padding: 10px 22px;*/
/*    font-size: 15px;*/
/*    font-weight: 500;*/
/*    color: var(--ib-white);*/
/*    background: var(--ib-black);*/
/*    border-radius: 40px;*/
/*    transition: opacity 0.25s var(--ib-ease);*/
/*}*/

/*.nav-btn:hover {*/
/*    color: var(--ib-white);*/
/*    opacity: 0.82;*/
/*}*/

/*.navbar-toggler {*/
/*    border: 1px solid var(--ib-line);*/
/*    padding: 6px 10px;*/
/*}*/

/*.navbar-toggler:focus {*/
/*    box-shadow: none;*/
/*}*/


/* ============ 3. Page head ============ */
/*.page-head {*/
/*    padding: 74px 0 46px;*/
/*    border-bottom: 1px solid var(--ib-line);*/
/*}*/

/*.page-eyebrow {*/
/*    margin: 0 0 14px;*/
/*    font-size: 12px;*/
/*    font-weight: 600;*/
/*    letter-spacing: 0.18em;*/
/*    text-transform: uppercase;*/
/*    color: var(--ib-black);*/
/*}*/

/*.page-title {*/
/*    font-size: clamp(34px, 5vw, 54px);*/
/*    font-weight: 700;*/
/*    letter-spacing: -0.03em;*/
/*    line-height: 1.1;*/
/*    margin-bottom: 16px;*/
/*}*/

/*.page-sub {*/
/*    max-width: 620px;*/
/*    margin: 0;*/
/*    font-size: 17px;*/
/*    color: var(--ib-black);*/
/*    opacity: 0.7;*/
/*}*/


/* ============ 4. Blog cards ============ */
/*.blog-section {*/
/*    padding: 64px 0 96px;*/
/*    background: var(--ib-white);*/
/*}*/

/* the <a> wrapper — whole card is clickable */
/*.blog-card {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    height: 100%;*/
/*    background: var(--ib-white);*/
/*    border: 1px solid var(--ib-line);*/
/*    border-radius: var(--ib-radius);*/
/*    overflow: hidden;*/
/*    color: var(--ib-black);*/
/*    transition: box-shadow 0.35s var(--ib-ease),*/
/*                transform 0.35s var(--ib-ease),*/
/*                border-color 0.35s var(--ib-ease);*/
/*}*/

/*.blog-card:hover {*/
/*    color: var(--ib-black);*/
/*    border-color: var(--ib-black);*/
/*    transform: translateY(-4px);*/
/*    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);*/
/*}*/

/* image */
/*.blog-thumb {*/
/*    position: relative;*/
/*    height: 235px;*/
    /*overflow: hidden;       */
/*    background: var(--ib-bg);*/
/*}*/

/*.blog-thumb img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*    transform: scale(1);*/
/*    transition: transform 0.6s var(--ib-ease);*/
/*}*/

/* >>> image scales to 1.15 on card hover <<< */
/*.blog-card:hover .blog-thumb img,*/
/*.blog-card:focus-visible .blog-thumb img {*/
/*    transform: scale(1.15);*/
/*}*/

/* card body */
/*.blog-body {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    flex: 1 1 auto;*/
/*    padding: 24px 24px 26px;*/
/*}*/

/* date + author */
/*.blog-meta {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    flex-wrap: wrap;*/
/*    gap: 10px;*/
/*    margin: 0 0 12px;*/
/*    font-size: 13px;*/
/*    font-weight: 500;*/
/*    letter-spacing: 0.02em;*/
/*    color: var(--ib-black);*/
/*    opacity: 0.62;*/
/*}*/

/*.blog-dot {*/
/*    width: 4px;*/
/*    height: 4px;*/
/*    border-radius: 50%;*/
/*    background: var(--ib-black);*/
/*}*/

/* title */
/*.blog-title {*/
/*    font-size: 21px;*/
/*    font-weight: 600;*/
/*    line-height: 1.35;*/
/*    letter-spacing: -0.02em;*/
/*    color: var(--ib-black);*/
/*    margin: 0 0 12px;*/

/*    display: -webkit-box;*/
/*    -webkit-line-clamp: 2;*/
/*    -webkit-box-orient: vertical;*/
/*    overflow: hidden;*/
/*}*/

/* paragraph */
/*.blog-text {*/
/*    font-size: 15px;*/
/*    line-height: 1.7;*/
/*    color: var(--ib-black);*/
/*    opacity: 0.72;*/
/*    margin: 0 0 20px;*/

/*    display: -webkit-box;*/
/*    -webkit-line-clamp: 3;*/
/*    -webkit-box-orient: vertical;*/
/*    overflow: hidden;*/
/*}*/

/* read more */
/*.blog-more {*/
/*    margin-top: auto;*/
/*    font-size: 14px;*/
/*    font-weight: 600;*/
/*    color: var(--ib-black);*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 8px;*/
/*}*/

/*.blog-more i {*/
/*    transition: transform 0.35s var(--ib-ease);*/
/*}*/

/*.blog-card:hover .blog-more i {*/
/*    transform: translateX(6px);*/
/*}*/


/* ============ 4b. Pagination ============ */

/* hidden card (set by main.js) */
/*.blog-col.is-hidden {*/
/*    display: none;*/
/*}*/

/* the pager stays hidden until the script initialises it,
   so it never shows as a dead control if JS is off */
/*.pagination-wrap {*/
/*    display: none;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    gap: 10px;*/
/*    margin-top: 56px;*/
/*}*/

/*.pagination-wrap.is-ready {*/
/*    display: flex;*/
/*}*/

/*.page-numbers {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 8px;*/
/*}*/

/*.page-btn {*/
/*    min-width: 44px;*/
/*    height: 44px;*/
/*    padding: 0 12px;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    font-family: var(--ib-text);*/
/*    font-size: 15px;*/
/*    font-weight: 600;*/
/*    color: var(--ib-black);*/
/*    background: var(--ib-white);*/
/*    border: 1px solid var(--ib-line);*/
/*    border-radius: 50%;*/
/*    cursor: pointer;*/
/*    transition: background-color 0.28s var(--ib-ease),*/
/*                color 0.28s var(--ib-ease),*/
/*                border-color 0.28s var(--ib-ease),*/
/*                opacity 0.28s var(--ib-ease);*/
/*}*/

/*.page-btn:hover:not(:disabled):not(.is-active) {*/
/*    border-color: var(--ib-black);*/
/*}*/

/* current page */
/*.page-btn.is-active {*/
/*    color: var(--ib-white);*/
/*    background: var(--ib-black);*/
/*    border-color: var(--ib-black);*/
/*    cursor: default;*/
/*}*/

/* prev / next */
/*.page-arrow {*/
/*    font-size: 14px;*/
/*}*/

/*.page-btn:disabled {*/
/*    opacity: 0.3;*/
/*    cursor: not-allowed;*/
/*}*/


/* ============ 5. Footer ============ */
/*.site-footer {*/
/*    padding: 56px 0 30px;*/
/*    background: var(--ib-bg);*/
/*    border-top: 1px solid var(--ib-line);*/
/*}*/

/*.footer-brand {*/
/*    font-family: var(--ib-display);*/
/*    font-weight: 700;*/
/*    font-size: 20px;*/
/*    color: var(--ib-black);*/
/*}*/

/*.footer-brand span {*/
/*    font-weight: 500;*/
/*}*/

/*.footer-note {*/
/*    max-width: 380px;*/
/*    margin: 10px 0 0;*/
/*    font-size: 15px;*/
/*    color: var(--ib-black);*/
/*    opacity: 0.68;*/
/*}*/

/*.footer-links {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 26px;*/
/*    justify-content: flex-end;*/
/*    list-style: none;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/

/*.footer-links a {*/
/*    font-size: 15px;*/
/*    font-weight: 500;*/
/*    color: var(--ib-black);*/
/*    opacity: 0.7;*/
/*    transition: opacity 0.25s var(--ib-ease);*/
/*}*/

/*.footer-links a:hover {*/
/*    opacity: 1;*/
/*}*/

/*.footer-copy {*/
/*    margin: 40px 0 0;*/
/*    padding-top: 22px;*/
/*    border-top: 1px solid var(--ib-line);*/
/*    font-size: 14px;*/
/*    color: var(--ib-black);*/
/*    opacity: 0.6;*/
/*}*/


/* =========================================================
   7. BLOG DETAIL PAGE
   Class prefix: .post-  (kept separate from the card styles
   in section 4 so the two pages never collide)
   ========================================================= */

/*.post-page {*/
/*    padding: 60px 0 90px;*/
/*    background: var(--ib-white);*/
/*}*/

/* ---- article head ---- */
/*.post-eyebrow {*/
/*    margin: 0 0 14px;*/
/*    font-size: 12px;*/
/*    font-weight: 600;*/
/*    letter-spacing: 0.18em;*/
/*    text-transform: uppercase;*/
/*    color: var(--ib-black);*/
/*    opacity: 0.55;*/
/*}*/

/*.post-heading {*/
/*    font-size: clamp(28px, 3.6vw, 44px);*/
/*    font-weight: 700;*/
/*    line-height: 1.16;*/
/*    letter-spacing: -0.03em;*/
/*    color: var(--ib-black);*/
/*    margin: 0 0 30px;*/
/*}*/

/* ---- full width hero image ---- */
/*.post-hero {*/
/*    width: 100%;*/
/*    margin-bottom: 38px;*/
/*    border-radius: var(--ib-radius);*/
/*    overflow: hidden;*/
/*    background: var(--ib-bg);*/
/*}*/

/*.post-hero img {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    object-fit: cover;*/
/*}*/


/* =========================================================
   7b. ADMIN / DYNAMIC CONTENT
   Every tag a rich-text editor can output is styled here so
   the layout holds no matter what gets pasted in.
   ========================================================= */

/*.post-content {*/
/*    font-size: 17px;*/
/*    line-height: 1.8;*/
/*    color: var(--ib-black);*/
    /* long URLs and unbroken strings cannot push the column wider */
/*    overflow-wrap: break-word;*/
/*    word-wrap: break-word;*/
/*}*/

/* headings */
/*.post-content h1,*/
/*.post-content h2,*/
/*.post-content h3,*/
/*.post-content h4,*/
/*.post-content h5,*/
/*.post-content h6 {*/
/*    font-family: var(--ib-display);*/
/*    font-weight: 600;*/
/*    line-height: 1.3;*/
/*    letter-spacing: -0.02em;*/
/*    color: var(--ib-black);*/
/*    margin: 40px 0 14px;*/
/*}*/

/*.post-content > *:first-child {*/
/*    margin-top: 0;*/
/*}*/

/*.post-content h1 { font-size: 32px; }*/
/*.post-content h2 { font-size: 27px; }*/
/*.post-content h3 { font-size: 22px; }*/
/*.post-content h4 { font-size: 19px; }*/
/*.post-content h5 { font-size: 17px; }*/
/*.post-content h6 { font-size: 16px; }*/

/* paragraphs */
/*.post-content p {*/
/*    margin: 0 0 20px;*/
/*    color: var(--ib-black);*/
/*    opacity: 0.85;*/
/*}*/

/* links */
/*.post-content a {*/
/*    color: var(--ib-black);*/
/*    font-weight: 500;*/
/*    text-decoration: underline;*/
/*    text-underline-offset: 3px;*/
/*    text-decoration-thickness: 1px;*/
/*    transition: opacity 0.25s var(--ib-ease);*/
/*}*/

/*.post-content a:hover {*/
/*    opacity: 0.6;*/
/*}*/

/* lists */
/*.post-content ul,*/
/*.post-content ol {*/
/*    margin: 0 0 22px;*/
/*    padding-left: 22px;*/
/*    list-style: disc;*/
/*}*/

/*.post-content li {*/
/*    margin-bottom: 10px;*/
/*    color: var(--ib-black);*/
/*    opacity: 0.85;*/
/*}*/

/*.post-content li::marker {*/
/*    color: var(--ib-black);*/
/*}*/

/*.post-content ul ul,*/
/*.post-content ol ol,*/
/*.post-content ul ol,*/
/*.post-content ol ul {*/
/*    margin: 10px 0 0;*/
/*}*/

/* images dropped in by the admin */
/*.post-content img {*/
/*    max-width: 100%;*/
/*    height: auto;*/
/*    margin: 12px 0 24px;*/
/*    border-radius: 10px;*/
/*}*/

/*.post-content figure {*/
/*    margin: 24px 0;*/
/*}*/

/*.post-content figcaption {*/
/*    margin-top: 10px;*/
/*    font-size: 14px;*/
/*    color: var(--ib-black);*/
/*    opacity: 0.6;*/
/*}*/

/* quote */
/*.post-content blockquote {*/
/*    margin: 28px 0;*/
/*    padding: 4px 0 4px 22px;*/
/*    border-left: 3px solid var(--ib-black);*/
/*    font-family: var(--ib-display);*/
/*    font-size: 19px;*/
/*    font-weight: 500;*/
/*    line-height: 1.6;*/
/*    color: var(--ib-black);*/
/*}*/

/*.post-content blockquote p {*/
/*    margin: 0;*/
/*    opacity: 1;*/
/*}*/

/* tables */
/*.post-content table {*/
/*    width: 100%;*/
/*    margin: 8px 0 28px;*/
/*    border-collapse: collapse;*/
/*    font-size: 15.5px;*/
/*    background: var(--ib-white);*/
/*}*/

/*.post-content th,*/
/*.post-content td {*/
/*    padding: 13px 16px;*/
/*    border: 1px solid var(--ib-line);*/
/*    text-align: left;*/
/*    vertical-align: top;*/
/*    color: var(--ib-black);*/
/*}*/

/*.post-content thead th {*/
/*    font-family: var(--ib-display);*/
/*    font-weight: 600;*/
/*    background: var(--ib-bg);*/
/*    white-space: nowrap;*/
/*}*/

/*.post-content tbody tr:nth-child(even) td {*/
/*    background: #fbfbfa;*/
/*}*/

/* optional wrapper — use <div class="table-wrap"><table>…</table></div>
   when the editor lets you add it */
/*.post-content .table-wrap {*/
/*    width: 100%;*/
/*    overflow-x: auto;*/
/*    margin-bottom: 28px;*/
/*    -webkit-overflow-scrolling: touch;*/
/*}*/

/*.post-content .table-wrap table {*/
/*    margin-bottom: 0;*/
/*}*/

/* code */
/*.post-content code {*/
/*    padding: 2px 7px;*/
/*    font-size: 14.5px;*/
/*    background: var(--ib-bg);*/
/*    border: 1px solid var(--ib-line);*/
/*    border-radius: 5px;*/
/*}*/

/*.post-content pre {*/
/*    margin: 0 0 24px;*/
/*    padding: 18px 20px;*/
/*    overflow-x: auto;*/
/*    background: var(--ib-bg);*/
/*    border: 1px solid var(--ib-line);*/
/*    border-radius: 10px;*/
/*}*/

/*.post-content pre code {*/
/*    padding: 0;*/
/*    background: none;*/
/*    border: 0;*/
/*}*/

/* misc */
/*.post-content hr {*/
/*    margin: 36px 0;*/
/*    border: 0;*/
/*    border-top: 1px solid var(--ib-line);*/
/*    opacity: 1;*/
/*}*/

/*.post-content strong { font-weight: 600; }*/

/*.post-content iframe,*/
/*.post-content video {*/
/*    max-width: 100%;*/
/*    border-radius: 10px;*/
/*}*/


/* =========================================================
   7c. RECENT BLOGS — sticky sidebar
   ========================================================= */

/*.recent-box {*/
    /*position: sticky;      */
/*    top: 24px;*/
/*    padding: 24px 22px 10px;*/
    /*background: var(--ib-bg);   */
/*    border: 1px solid var(--ib-line);*/
/*    border-radius: var(--ib-radius);*/
/*}*/

/*.recent-head {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*    gap: 12px;*/
/*    padding-bottom: 16px;*/
/*    margin-bottom: 6px;*/
/*    border-bottom: 1px solid var(--ib-line);*/
/*}*/

/*.recent-heading {*/
/*    font-size: 17px;*/
/*    font-weight: 600;*/
/*    letter-spacing: -0.01em;*/
/*    color: var(--ib-black);*/
/*    margin: 0;*/
/*}*/

/*.recent-viewall {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 7px;*/
/*    flex-shrink: 0;*/
/*    font-size: 13.5px;*/
/*    font-weight: 600;*/
/*    color: var(--ib-black);*/
/*    opacity: 0.65;*/
/*    transition: opacity 0.25s var(--ib-ease);*/
/*}*/

/*.recent-viewall i {*/
/*    font-size: 12px;*/
/*    transition: transform 0.3s var(--ib-ease);*/
/*}*/

/*.recent-viewall:hover {*/
/*    color: var(--ib-black);*/
/*    opacity: 1;*/
/*}*/

/*.recent-viewall:hover i {*/
/*    transform: translateX(4px);*/
/*}*/

/* stacked list */
/*.recent-list {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

/*.recent-item {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 14px;*/
/*    padding: 16px 0;*/
/*    border-bottom: 1px solid var(--ib-line);*/
/*    color: var(--ib-black);*/
/*}*/

/*.recent-item:last-child {*/
/*    border-bottom: 0;*/
/*}*/

/*.recent-thumb {*/
/*    flex: 0 0 66px;*/
/*    width: 66px;*/
/*    height: 66px;*/
/*    overflow: hidden;*/
/*    border-radius: 9px;*/
/*    background: var(--ib-white);*/
/*}*/

/*.recent-thumb img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*    transition: transform 0.5s var(--ib-ease);*/
/*}*/

/*.recent-item:hover .recent-thumb img {*/
/*    transform: scale(1.15);*/
/*}*/

/*.recent-title {*/
/*    font-size: 15px;*/
/*    font-weight: 600;*/
/*    line-height: 1.45;*/
/*    letter-spacing: -0.01em;*/
/*    color: var(--ib-black);*/
/*    margin: 0;*/

/*    display: -webkit-box;*/
/*    -webkit-line-clamp: 3;*/
/*    -webkit-box-orient: vertical;*/
/*    overflow: hidden;*/
/*}*/


/*table {*/
/*  width: 100%;*/
  /*border-collapse: collapse; */
/*}*/

/*th, td {*/
  /*padding: 12px 16px; */
  /*text-align: center;   */
/*}*/



/* =========================================================
   7d. BLOG DETAIL — responsive
   ========================================================= */

/*@media (max-width: 767.98px) {*/
/*    .post-page {*/
/*        padding: 40px 0 64px;*/
/*    }*/

    /* stacked layout: sidebar sits under the article, not sticky */
/*    .recent-box {*/
/*        position: static;*/
/*        margin-top: 12px;*/
/*    }*/

/*    .post-content {*/
/*        font-size: 16px;*/
/*    }*/

/*    .post-content h2 { font-size: 23px; }*/
/*    .post-content h3 { font-size: 20px; }*/

    /* a wide table scrolls sideways instead of stretching the page */
/*    .post-content table {*/
/*        display: block;*/
/*        width: 100%;*/
/*        overflow-x: auto;*/
/*        white-space: nowrap;*/
/*        -webkit-overflow-scrolling: touch;*/
/*    }*/
/*}*/

/* short viewports: let the sidebar scroll if it is taller than the screen */
/*@media (min-width: 768px) {*/
/*    .recent-box {*/
/*        max-height: calc(100vh - 48px);*/
/*        overflow-y: auto;*/
/*    }*/
/*}*/

/*@media (prefers-reduced-motion: reduce) {*/
/*    .recent-thumb img,*/
/*    .recent-viewall i {*/
/*        transition: none;*/
/*    }*/

/*    .recent-item:hover .recent-thumb img {*/
/*        transform: none;*/
/*    }*/
/*}*/


/* ============ 6. Responsive ============ */
/*@media (max-width: 991.98px) {*/
/*    .site-header .nav-link {*/
/*        padding: 10px 0;*/
/*    }*/

/*    .nav-btn {*/
/*        margin: 10px 0 4px;*/
/*    }*/

/*    .footer-links {*/
/*        justify-content: flex-start;*/
/*    }*/
/*}*/

/*@media (max-width: 767.98px) {*/
/*    .page-head {*/
/*        padding: 52px 0 36px;*/
/*    }*/

/*    .blog-section {*/
/*        padding: 48px 0 70px;*/
/*    }*/

/*    .blog-thumb {*/
/*        height: 215px;*/
/*    }*/

/*    .pagination-wrap {*/
/*        margin-top: 42px;*/
/*        gap: 6px;*/
/*    }*/

/*    .page-btn {*/
/*        min-width: 40px;*/
/*        height: 40px;*/
/*        font-size: 14px;*/
/*    }*/
/*}*/

/* respect reduced motion */
/*@media (prefers-reduced-motion: reduce) {*/
/*    .blog-card,*/
/*    .blog-thumb img,*/
/*    .blog-more i {*/
/*        transition: none;*/
/*    }*/

/*    .blog-card:hover .blog-thumb img {*/
/*        transform: none;*/
/*    }*/
/*}*/



/* updated style */
/* =========================================================
   IdeaBuilders — Blog stylesheet
   1. Base & variables
   2. Header / navbar
   3. Page head
   4. Blog cards  <-- listing page
   4b. Pagination
   5. Footer
   6. Responsive
   7. Blog detail page  <-- .post- prefix
   7b. Admin / dynamic content
   7c. Recent blogs (sticky sidebar)
   7d. Blog detail responsive
   ========================================================= */

/* ============ 1. Base & variables ============ */

html, body {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

:root {
    --ib-black: #000000;
    --ib-body: #000000;
    --ib-muted: #000000;
    --ib-line: #e2e2e2;
    --ib-bg: #f6f6f4;
    --ib-white: #ffffff;

    --ib-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --ib-text: 'Inter', 'Segoe UI', Arial, sans-serif;

    --ib-radius: 14px;
    --ib-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--ib-text);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ib-body);
    background-color: var(--ib-white);
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: var(--ib-black);
}

img {
    max-width: 100%;
    display: block;
}

h1, h2, h3, h4 {
    font-family: var(--ib-display);
    color: var(--ib-black);
    margin: 0;
}

:focus-visible {
    outline: 2px solid var(--ib-black);
    outline-offset: 3px;
}


/* ============ 2. Header / navbar ============ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--ib-white);
    border-bottom: 1px solid var(--ib-line);
}

.site-header .navbar {
    padding: 16px 0;
}

.navbar-brand {
    font-family: var(--ib-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--ib-black);
}

.navbar-brand span {
    font-weight: 500;
}

.site-header .nav-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--ib-black);
    padding: 8px 16px;
    opacity: 0.65;
    transition: opacity 0.25s var(--ib-ease);
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    opacity: 1;
}

.nav-btn {
    display: inline-block;
    margin-left: 12px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ib-white);
    background: var(--ib-black);
    border-radius: 40px;
    transition: opacity 0.25s var(--ib-ease);
}

.nav-btn:hover {
    color: var(--ib-white);
    opacity: 0.82;
}

.navbar-toggler {
    border: 1px solid var(--ib-line);
    padding: 6px 10px;
}

.navbar-toggler:focus {
    box-shadow: none;
}


/* ============ 3. Page head ============ */
.page-head {
    padding: 74px 0 46px;
    border-bottom: 1px solid var(--ib-line);
}

.page-eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ib-black);
}

.page-title {
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 16px;
}

.page-sub {
    max-width: 620px;
    margin: 0;
    font-size: 17px;
    color: var(--ib-black);
    opacity: 0.7;
}


/* ============ 4. Blog cards ============ */
.blog-section {
    padding: 64px 0 96px;
    background: var(--ib-white);
}

.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ib-white);
    border: 1px solid var(--ib-line);
    border-radius: var(--ib-radius);
    overflow: hidden;
    color: var(--ib-black);
    transition: box-shadow 0.35s var(--ib-ease),
                transform 0.35s var(--ib-ease),
                border-color 0.35s var(--ib-ease);
}

.blog-card:hover {
    color: var(--ib-black);
    border-color: var(--ib-black);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

.blog-thumb {
    position: relative;
    height: 235px;
    overflow: hidden;
    background: var(--ib-bg);
}

.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.6s var(--ib-ease);
}

.blog-card:hover .blog-thumb img,
.blog-card:focus-visible .blog-thumb img {
    transform: scale(1.15);
}

.blog-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px 24px 26px;
}

.blog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ib-black);
    opacity: 0.62;
}

.blog-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ib-black);
}

.blog-title {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--ib-black);
    margin: 0 0 12px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ib-black);
    opacity: 0.72;
    margin: 0 0 20px;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--ib-black);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.blog-more i {
    transition: transform 0.35s var(--ib-ease);
}

.blog-card:hover .blog-more i {
    transform: translateX(6px);
}


/* ============ 4b. Pagination ============ */
.blog-col.is-hidden {
    display: none;
}

.pagination-wrap {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 56px;
}

.pagination-wrap.is-ready {
    display: flex;
}

.page-numbers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ib-text);
    font-size: 15px;
    font-weight: 600;
    color: var(--ib-black);
    background: var(--ib-white);
    border: 1px solid var(--ib-line);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.28s var(--ib-ease),
                color 0.28s var(--ib-ease),
                border-color 0.28s var(--ib-ease),
                opacity 0.28s var(--ib-ease);
}

.page-btn:hover:not(:disabled):not(.is-active) {
    border-color: var(--ib-black);
}

.page-btn.is-active {
    color: var(--ib-white);
    background: var(--ib-black);
    border-color: var(--ib-black);
    cursor: default;
}

.page-arrow {
    font-size: 14px;
}

.page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* ============ 5. Footer ============ */
.site-footer {
    padding: 56px 0 30px;
    background: var(--ib-bg);
    border-top: 1px solid var(--ib-line);
}

.footer-brand {
    font-family: var(--ib-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--ib-black);
}

.footer-brand span {
    font-weight: 500;
}

.footer-note {
    max-width: 380px;
    margin: 10px 0 0;
    font-size: 15px;
    color: var(--ib-black);
    opacity: 0.68;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--ib-black);
    opacity: 0.7;
    transition: opacity 0.25s var(--ib-ease);
}

.footer-links a:hover {
    opacity: 1;
}

.footer-copy {
    margin: 40px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--ib-line);
    font-size: 14px;
    color: var(--ib-black);
    opacity: 0.6;
}


/* =========================================================
   7. BLOG DETAIL PAGE
   ========================================================= */
.post-page {
    padding: 60px 0 90px;
    background: var(--ib-white);
}

.post-eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ib-black);
    opacity: 0.55;
}

.post-heading {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.03em;
    color: var(--ib-black);
    margin: 0 0 30px;
}

.post-hero {
    width: 100%;
    margin-bottom: 38px;
    border-radius: var(--ib-radius);
    overflow: hidden;
    background: var(--ib-bg);
}

.post-hero img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* =========================================================
   7b. ADMIN / DYNAMIC CONTENT
   ========================================================= */
.post-content {
    font-size: 17px;
    line-height: 1.8;
    color: var(--ib-black);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-family: var(--ib-display);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--ib-black);
    margin: 40px 0 14px;
}

.post-content > *:first-child {
    margin-top: 0;
}

.post-content h1 { font-size: 32px; }
.post-content h2 { font-size: 27px; }
.post-content h3 { font-size: 22px; }
.post-content h4 { font-size: 19px; }
.post-content h5 { font-size: 17px; }
.post-content h6 { font-size: 16px; }

.post-content p {
    margin: 0 0 20px;
    color: var(--ib-black);
    opacity: 0.85;
}

.post-content a {
    color: var(--ib-black);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity 0.25s var(--ib-ease);
}

.post-content a:hover {
    opacity: 0.6;
}

.post-content ul,
.post-content ol {
    margin: 0 0 22px;
    padding-left: 22px;
    list-style: disc;
}

.post-content li {
    margin-bottom: 10px;
    color: var(--ib-black);
    opacity: 0.85;
}

.post-content li::marker {
    color: var(--ib-black);
}

.post-content ul ul,
.post-content ol ol,
.post-content ul ol,
.post-content ol ul {
    margin: 10px 0 0;
}

.post-content img {
    max-width: 100%;
    height: auto;
    margin: 12px 0 24px;
    border-radius: 10px;
}

.post-content figure {
    margin: 24px 0;
}

.post-content figcaption {
    margin-top: 10px;
    font-size: 14px;
    color: var(--ib-black);
    opacity: 0.6;
}

.post-content blockquote {
    margin: 28px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--ib-black);
    font-family: var(--ib-display);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ib-black);
}

.post-content blockquote p {
    margin: 0;
    opacity: 1;
}

/* Base table styling & admin table overrides */
table,
.post-content table {
    width: 100% !important;
    margin: 8px 0 28px;
    border-collapse: collapse;
    font-size: 15.5px;
    background: var(--ib-white);
}

th, td,
.post-content th,
.post-content td {
    padding: 12px 16px;
    border: 1px solid var(--ib-line);
    text-align: left;
    vertical-align: top;
    color: var(--ib-black);
}

.post-content thead th {
    font-family: var(--ib-display);
    font-weight: 600;
    background: var(--ib-bg);
    white-space: nowrap;
}

.post-content tbody tr:nth-child(even) td {
    background: #fbfbfa;
}

.post-content .table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 28px;
    -webkit-overflow-scrolling: touch;
}

.post-content .table-wrap table {
    margin-bottom: 0;
}

.post-content code {
    padding: 2px 7px;
    font-size: 14.5px;
    background: var(--ib-bg);
    border: 1px solid var(--ib-line);
    border-radius: 5px;
}

.post-content pre {
    margin: 0 0 24px;
    padding: 18px 20px;
    overflow-x: auto;
    background: var(--ib-bg);
    border: 1px solid var(--ib-line);
    border-radius: 10px;
}

.post-content pre code {
    padding: 0;
    background: none;
    border: 0;
}

.post-content hr {
    margin: 36px 0;
    border: 0;
    border-top: 1px solid var(--ib-line);
    opacity: 1;
}

.post-content strong { font-weight: 600; }

.post-content iframe,
.post-content video {
    max-width: 100%;
    border-radius: 10px;
}


/* =========================================================
   7c. RECENT BLOGS — sticky sidebar
   ========================================================= */
.recent-box {
    padding: 24px 22px 10px;
    background: var(--ib-bg);
    border: 1px solid var(--ib-line);
    border-radius: var(--ib-radius);
}

.recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ib-line);
}

.recent-heading {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ib-black);
    margin: 0;
}

.recent-viewall {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ib-black);
    opacity: 0.65;
    transition: opacity 0.25s var(--ib-ease);
}

.recent-viewall i {
    font-size: 12px;
    transition: transform 0.3s var(--ib-ease);
}

.recent-viewall:hover {
    color: var(--ib-black);
    opacity: 1;
}

.recent-viewall:hover i {
    transform: translateX(4px);
}

.recent-list {
    display: flex;
    flex-direction: column;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ib-line);
    color: var(--ib-black);
}

.recent-item:last-child {
    border-bottom: 0;
}

.recent-thumb {
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    overflow: hidden;
    border-radius: 9px;
    background: var(--ib-white);
}

.recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ib-ease);
}

.recent-item:hover .recent-thumb img {
    transform: scale(1.15);
}

.recent-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--ib-black);
    margin: 0;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* =========================================================
   7d. BLOG DETAIL — responsive & sticky trigger
   ========================================================= */
@media (max-width: 767.98px) {
    .post-page {
        padding: 40px 0 64px;
    }

    .recent-box {
        position: static;
        margin-top: 32px;
    }

    .post-content {
        font-size: 16px;
    }

    .post-content h2 { font-size: 23px; }
    .post-content h3 { font-size: 20px; }

    .post-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 768px) {
    .recent-box {
        position: -webkit-sticky;
        position: sticky;
        top: 90px;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }
}


/* ============ 6. Global Responsive ============ */
@media (max-width: 991.98px) {
    .site-header .nav-link {
        padding: 10px 0;
    }

    .nav-btn {
        margin: 10px 0 4px;
    }

    .footer-links {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .page-head {
        padding: 52px 0 36px;
    }

    .blog-section {
        padding: 48px 0 70px;
    }

    .blog-thumb {
        height: 215px;
    }

    .pagination-wrap {
        margin-top: 42px;
        gap: 6px;
    }

    .page-btn {
        min-width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-thumb img,
    .blog-more i,
    .recent-thumb img,
    .recent-viewall i {
        transition: none;
    }

    .blog-card:hover .blog-thumb img,
    .recent-item:hover .recent-thumb img {
        transform: none;
    }
}