/* Features - Project Details Start */
/* ------------------------------------------------*/
.db-project {
  position: relative;
  width: 100%;
  min-width: 360px;
}

.db-project__block {
  position: relative;
  margin-top: 12.3rem;
  margin-bottom: 13.1rem;
}
.db-project__block.pre-grid {
  margin-bottom: 10.1rem;
}
.db-project__block.no-margin {
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .db-project__block {
    margin-top: 13.1rem;
    margin-bottom: 15.1rem;
  }
  .db-project__block.pre-grid {
    margin-bottom: 12.1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .db-project__block {
    margin-top: 14.3rem;
    margin-bottom: 15.1rem;
  }
}
@media only screen and (min-width: 1600px) {
  .db-project__block {
    margin-top: 18.3rem;
    margin-bottom: 19rem;
  }
  .db-project__block.pre-grid {
    margin-bottom: 16.1rem;
  }
}

.db-project__subtitle {
  position: relative;
}

.db-project__paragraph {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  margin-top: 1.8rem;
}
@media only screen and (min-width: 768px) {
  .db-project__paragraph {
    margin-top: 1.3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .db-project__paragraph {
    margin-top: 0.4rem;
    gap: 3rem;
  }
  .db-project__paragraph.medium-text {
    margin-top: 0.8rem;
  }
}
@media only screen and (min-width: 1600px) {
  .db-project__paragraph {
    max-width: 855px;
  }
  .db-project__paragraph.medium-text {
    margin-top: 0.6rem;
  }
}

.db-project__controls {
  margin-top: 1.3rem;
}
@media only screen and (min-width: 1200px) {
  .db-project__controls {
    margin-top: 1.4rem;
  }
}
@media only screen and (min-width: 1600px) {
  .db-project__controls {
    margin-top: 1.7rem;
  }
}

.db-project__client {
  margin-top: 0.2rem;
}
@media only screen and (min-width: 1200px) {
  .db-project__client {
    margin-top: 0;
  }
}
@media only screen and (min-width: 1600px) {
  .db-project__client {
    margin-top: 0.2rem;
  }
}

.db-project-cards {
  position: relative;
}

.db-project-cards__item {
  position: relative;
  height: 460px;
}
@media only screen and (min-width: 768px) {
  .db-project-cards__item {
    height: 420px;
  }
}
@media only screen and (min-width: 1600px) {
  .db-project-cards__item {
    height: 600px;
  }
}

.db-project-cards__inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.db-project-cards__inner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.db-project__nav {
  position: relative;
  padding-top: 3rem;
  /*padding-bottom: 13.3rem;*/
}
@media only screen and (min-width: 768px) {
  .db-project__nav {
    /*padding-bottom: 15.1rem;*/
  }
}
@media only screen and (min-width: 1200px) {
  .db-project__nav {
    padding-top: 4rem;
  }
}
@media only screen and (min-width: 1600px) {
  .db-project__nav {
    /*padding-bottom: 19.1rem;*/
  }
}

.db-project__divider {
  position: absolute;
  top: 0;
  left: 1.5rem;
  width: -moz-calc(100% - 3rem);
  width: calc(100% - 3rem);
  height: 0.2rem;
  background-color: var(--base-opp);
}

.db-project__navitem {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.db-project__navitem.left {
  -webkit-box-align: start;
     -moz-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.db-project__navitem.right {
  -webkit-box-align: end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  text-align: right;
}

.db-project__link {
  font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}
.db-project__link.opposite {
  color: var(--t-opp-bright);
}
.db-project__link span {
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
  -moz-background-size: 100% 1px, 0 1px;
       background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 300ms, color 300ms;
  -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
  transition: background-size 300ms, color 300ms;
  transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
}
.no-touch .db-project__link span:hover {
  color: var(--t-bright);
  -moz-background-size: 0 1px, 100% 1px;
       background-size: 0 1px, 100% 1px;
}
@media only screen and (min-width: 768px) {
  .db-project__link {
    font-size: 3.4rem;
  }
}

/* Visually hidden by default, visible on focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus,
.skip-link:active {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: .5rem .75rem;
  clip: auto;
  clip-path: none;
  white-space: normal;
  background: var(--color-bg, #fff);
  color: var(--color-text, #000);
  border: 2px solid currentColor;
  border-radius: .5rem;
  outline: 0;
  z-index: 10000;
}

/* ------------------------------------------------*/
/* Features - Project Details End */
/* ------------------------------------------------*/

/* Wrapper */
.table-responsive-custom{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--base-tint);
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), .10);
}

/* Base table */
.table-custom{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: normal var(--fw-regular) 1.6rem/1.5 var(--_font-default);
  /* Fluid cell text — grows with the viewport instead of a fixed 1.6rem. */
  font-size: clamp(1.6rem, 1.45rem + 0.35vw, 1.9rem);
  color: var(--t-medium);
}

/* Head */
.table-custom thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font: normal var(--fw-semibold) 1.4rem/1.2 var(--_font-accent);
  /* Match the cell scale (was a fixed 1.4rem — smaller than the cells). */
  font-size: clamp(1.6rem, 1.45rem + 0.35vw, 1.9rem);
  letter-spacing: .02em;
  color: var(--t-bright);
  background: color-mix(in srgb, var(--base-tint) 88%, transparent);
  backdrop-filter: saturate(120%) blur(6px);
  padding: clamp(1.4rem, 1rem + 0.6vw, 2.2rem) clamp(1.6rem, 1.2rem + 0.7vw, 2.8rem);
  border-bottom: 1px solid var(--st-muted);
}

/* Cells */
.table-custom tbody td{
  padding: clamp(1.4rem, 1rem + 0.6vw, 2.2rem) clamp(1.6rem, 1.2rem + 0.7vw, 2.8rem);
  vertical-align: top;
  border-bottom: 1px solid var(--st-muted);
}

/* First/last cell alignment niceties */
.table-custom tr > *:first-child{ padding-left: clamp(1.8rem, 1.2rem + 0.8vw, 3.2rem); }
.table-custom tr > *:last-child{  padding-right: clamp(1.8rem, 1.2rem + 0.8vw, 3.2rem); }

/* Zebra striping */
.table-striped-custom tbody tr:nth-child(odd){
  background: rgba(var(--accent-rgb), .05);
}

/* Hover */
.table-hover-custom tbody tr{
  transition: background var(--_animspeed-medium) var(--_animbezier);
}
.no-touch .table-hover-custom tbody tr:hover{
  background: rgba(var(--accent-rgb), .12);
}

/* Rounded corners for the very first/last row */
.table-custom thead tr th:first-child{ border-top-left-radius: var(--_radius-m); }
.table-custom thead tr th:last-child{  border-top-right-radius: var(--_radius-m); }
.table-custom tbody tr:last-child td:first-child{ border-bottom-left-radius: var(--_radius-m); }
.table-custom tbody tr:last-child td:last-child{  border-bottom-right-radius: var(--_radius-m); }

/* Compact variant (optional) */
.table-custom.table--compact thead th,
.table-custom.table--compact tbody td{ padding: .9rem 1.2rem; }

  .tag .ai-link,
  .tag .ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  .tag .ph-bold {
    font-size: 14px;
    line-height: 1;
  }

  .summarise-with-ai {
    margin-bottom: 44px;
  }

  /



.github-icon {
    color: #000; /* light mode */
}

@media (prefers-color-scheme: dark) {
    .github-icon {
        color: #fff;
    }
}
.block-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* same as image cropping */
    display: block;
}
.db-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.db-compare-card {
    padding: 28px;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.db-compare-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.db-compare-card strong {
    display: inline-block;
    margin-bottom: 14px;
    
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.db-compare-card p {
    margin: 0;
   
    line-height: 1.8;
    color: #1f2937;
}

.db-compare-card--weak {
    background: #fff7f7;
    border-color: #f3c7c7;
}

.db-compare-card--weak strong {
    color: #b42318;
}

.db-compare-card--strong {
    background: #f5fbf7;
    border-color: #b7e4c7;
}

.db-compare-card--strong strong {
    color: #18794e;
}

@media (max-width: 767px) {
    .db-compare-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .db-compare-card {
        padding: 22px;
    }

    .db-compare-card p {
      
        line-height: 1.7;
    }
}

blockquote {
    position: relative;
    margin: 32px 0;
    padding: 24px 28px 24px 64px;
    border-radius: 16px;
    background: #f9fafb;
    border-left: 4px solid #111827;
    line-height: 1.8;
    color: #1f2937;
    font-style: normal;
}

/* Decorative quote mark */
blockquote::before {
    content: "“";
    position: absolute;
    left: 20px;
    top: 18px;
    line-height: 1;
    color: rgba(17, 24, 39, 0.15);
    font-family: Georgia, serif;
    font-size: 70px;
}

/* Optional citation */
blockquote cite {
    display: block;
    margin-top: 14px;
    font-size: 0.9rem;
    color: #6b7280;
    font-style: normal;
}

/* Strong emphasis inside */
blockquote strong {
    color: #111827;
}

/* Dark variant (optional class if you want contrast sections) */
.blockquote--dark {
    background: #111827;
    color: #f9fafb;
    border-left-color: #4ade80;
}

.blockquote--dark::before {
    color: rgba(255, 255, 255, 0.1);
}

.blockquote--dark cite {
    color: #9ca3af;
}

/* Mobile */
@media (max-width: 767px) {
    blockquote {
        padding: 20px 20px 20px 52px;
   
    }

    blockquote::before {
        left: 14px;
        top: 14px;
    }
}

.db-info-box {
    position: relative;
    margin: 32px 0;
    padding: 22px 24px 22px 56px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
   
    line-height: 1.7;
    color: #1f2937;
}

/* Left indicator bar */
.db-info-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 4px;
    border-radius: 4px;
    background: var(--accent);
}

/* Title */
.db-info-box strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #111827;
}

/* Inline code styling */
.db-info-box code {
    padding: 2px 6px;
    border-radius: 6px;
    background: #e5e7eb;
    font-family: monospace;
  
    color: #111827;
}

/* Optional hover polish */
.db-info-box:hover {
    border-color: #cbd5f5;
    background: #f1f5f9;
}

/* Variant: warning (use class db-info-box--warning) */
.db-info-box--warning {
    background: #fff7ed;
    border-color: #fed7aa;
}

.db-info-box--warning::before {
    background: #f97316;
}

/* Variant: critical (stronger emphasis) */
.db-info-box--critical {
    background: #fef2f2;
    border-color: #fecaca;
}

.db-info-box--critical::before {
    background: #dc2626;
}

/* Mobile */
@media (max-width: 767px) {
    .db-info-box {
        padding: 18px 18px 18px 44px;
        font-size: 0.95rem;
    }

    .db-info-box::before {
        top: 12px;
        bottom: 12px;
    }
}

/* ================================
   CODE BLOCK (TOKEN-DRIVEN)
================================ */
.db-article__block pre {
    position: relative;
    margin: 24px 0;
    padding: 24px;
    border-radius: var(--_radius-s);
    background: var(--base-tint);
    border: 1px solid var(--st-muted);
    overflow-x: auto;
    box-shadow: 0 10px 25px rgba(var(--base-rgb), 0.08);
    transition: all var(--_animspeed-medium) var(--_animbezier);
}

/* Subtle system grid */
.db-article__block pre {
    background-image: linear-gradient(
        rgba(var(--base-opp-rgb, 0,0,0), 0.03) 1px,
        transparent 1px
    );
    background-size: 100% 28px;
}

/* Label */
.db-article__block pre::before {
    content: "JSON-LD";
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--_font-accent);
    color: var(--t-muted);
}

/* Code text */
.db-article__block pre code {
    display: block;
    font-family: "Fira Code", "JetBrains Mono", monospace;
    font-size: 1.7rem;
    line-height: 1.7;
    color: var(--t-bright);
    white-space: pre;
}

/* Hover polish */
.db-article__block pre:hover {
    border-color: var(--accent);
    box-shadow: 0 14px 35px rgba(var(--accent-rgb), 0.12);
}

/* Scrollbar */
.db-article__block pre::-webkit-scrollbar {
    height: 8px;
}

.db-article__block pre::-webkit-scrollbar-thumb {
    background: var(--st-medium);
    border-radius: 10px;
}

/* ================================
   INLINE CODE
================================ */
.db-article__block code {
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--base-shade);
    color: var(--t-bright);
    font-family: monospace;
    font-size: 0.9em;
}

/* ================================
   MOBILE
================================ */
@media (max-width: 767px) {
    .db-article__block pre {
        padding: 18px;
    }

    .db-article__block pre code {
        font-size: 0.8rem;
        line-height: 1.6;
    }
}






.db-article__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.db-article__breadcrumbs span {
  max-width: 200px; /* adjust based on layout */
}

.db-article__breadcrumbs a,
.db-article__breadcrumbs .current-item {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-article__data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.db-article__data > span {
  display: inline-flex;
  align-items: center;
}

.db-article__data > span:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
.db-blog-preview__data a {
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


.xml-paths {
    background: #0f172a;
    color: #e2e8f0;
    padding: 20px 24px;
    border-radius: 14px;
    overflow-x: auto;
    margin: 24px 0;
    border: 1px solid #1e293b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.xml-paths code {
    display: block;
    font-family: "Courier New", Courier, monospace;
    font-size: 15px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}

.seo-code-display {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 14px;
    padding: 20px;
    overflow-x: auto;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 15px;
    line-height: 1.7;
}

.seo-code-line {
    white-space: nowrap;
}

.seo-code-line + .seo-code-line {
    margin-top: 8px;
}

.seo-code-tag {
    color: #7dd3fc;
}

.seo-code-attr {
    color: #f8fafc;
    margin-left: 6px;
}

.seo-code-value {
    color: #86efac;
}

.seo-code-text {
    color: #f8fafc;
}
.seo-code-line {
    white-space: normal;
    word-break: break-word;
}