/* blog start */
    .blog .section-title {
      margin-block-end: 50px;
      font-size: var(--fs-4);
      color: var(--oxford-red-1);
      text-align: center;
    }
    .blogs-directory .blog .section-title { margin-block-end: 18px; }
    .blogs-directory .blog { padding-block-start: 195px; }
    .blogs-directory .blog > .container > .section-subtitle { margin-block-start: 0; }
    .blogs-directory .blog-directory-intro {
      max-width: 760px;
      margin: 0 auto 26px;
      color: var(--oxford-red-1);
      font-size: var(--fs-body);
      line-height: 1.7;
      text-align: center;
    }
    .blogs-directory .blog-search {
      max-width: 760px;
      margin: 0 auto 48px;
    }
    .blogs-directory .blog-search-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .blogs-directory .blog-search-field {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 0 18px;
      min-height: 60px;
      background: var(--white);
      border: 1px solid var(--light-gray);
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .blogs-directory .blog-search-field:focus-within {
      border-color: var(--royal-red-light);
      box-shadow: 0 0 0 3px rgba(220, 50, 50, .12);
    }
    .blogs-directory .blog-search-field > svg {
      width: 20px;
      height: 20px;
      flex: none;
      color: var(--royal-red-light);
    }
    .blogs-directory #blogSearch {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--oxford-red-1);
      font: inherit;
      font-size: var(--fs-7);
    }
    .blogs-directory #blogSearch::-webkit-search-cancel-button { display: none; }
    .blogs-directory #blogSearch::placeholder { color: var(--sonic-silver); opacity: 1; }
    .blogs-directory .blog-search-clear {
      flex: none;
      color: var(--royal-red-light);
      font: inherit;
      font-size: var(--fs-8);
      font-weight: 600;
      cursor: pointer;
    }
    .blogs-directory .blog-search-clear[hidden] { display: none; }
    .blogs-directory .blog-search-clear:is(:hover, :focus-visible) { text-decoration: underline; }
    .blogs-directory .blog-search-status {
      margin-top: 14px;
      color: var(--sonic-silver);
      font-size: var(--fs-8);
      text-align: center;
    }
    .blogs-directory .blog-search-status:empty { display: none; }
    .blogs-directory .blog-search-status.is-empty {
      padding: 22px;
      border: 1px solid var(--light-gray);
      border-radius: 14px;
      color: var(--oxford-red-1);
      background: var(--cultured);
    }
    .blog-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* responsive grid layout */
      gap: var(--adporc-gap-wide);
    }
    .blog-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: stretch;
      height: 100%;
      min-height: 400px;
      border-radius: var(--adporc-card-radius);
      box-shadow: var(--shadow-5);
      overflow: hidden;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .blogs-directory .blog-card {
      border: 1px solid var(--light-gray);
      border-radius: var(--adporc-card-radius);
    }
    .blog-card:hover {
      transform: translateY(-10px);
      box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
    }
    .blog-card .card-banner {
      flex-shrink: 0;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .blog-card .card-banner img {
      width: 100%; 
      height: 100%; 
      object-fit: cover; 
      transition: var(--transition);
    }
    .blog-card:is(:hover, :focus-within) .card-banner img {
      transform: scale(1.1); 
    }
    .blog-card .card-badge {
      background-color: var(--royal-red-light);
      color: var(--white);
      position: absolute;
      bottom: 15px;
      left: 15px;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 12px;
      border-radius: var(--radius-6);
      font-size: 1.4rem;
      z-index: 1;
    }
    .blog-card .card-badge ion-icon {
      font-size: 1.6rem;
    }
    .blog-card .card-content {
      flex-grow: 1;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .blog-card .card-title {
      font-size: var(--fs-5);
      font-weight: var(--fw-700);
      color: var(--oxford-red-1);
      position: relative;
      transition: color 0.3s ease;
    }
    .blog-card .card-title:is(:hover, :focus) {
      color: var(--royal-red-light);
    }
    .blog-card .card-text {
      flex-grow: 1;
      margin-bottom: 20px;
      line-height: 1.6;
      text-align: justify;
    }
    .blog-card .card-link {
      position: relative;
      color: var(--royal-red-light);
      font-weight: var(--fw-500);
      text-transform: uppercase;
      width: max-content;
      transition: var(--transition);
    }
    .blog-card .card-title::after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--gradient);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }
    .blog-card .card-link:is(:hover, :focus) {
      color: var(--oxford-red-1);
    }
    .blog-card .card-title:hover::after {
      transform: scaleX(1);
    }
    /* blog pages */
    .blog-header {
      padding: 20px 0;
      background-color: var(--cultured);
      border-bottom: 1px solid var(--light-gray);
    }
    .blog-header .container {
      text-align: center;
    }
    .blog-header .blog-title {
      color: var(--oxford-red-1);
      margin-bottom: 10px;
    }
    .blog-header .blog-meta {
      font-size: var(--fs-7);
      color: var(--sonic-silver);
      font-style: italic;
    }
    .blog .blog-meta {
      font-size: var(--fs-7);
      font-style: italic;
      color: var(--sonic-silver);
      text-align: center;
      margin-bottom: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .blog-meta span {
      display: inline;
    }
    /* medical reviewer card */
    .blog .blog-reviewer {
      display: flex;
      align-items: center;
      gap: 16px;
      max-width: 590px;
      margin: -8px auto 22px;
      padding: 14px 18px;
      border: 1px solid #e5e5e5;
      border-radius: 16px;
      background: #fff;
      color: var(--sonic-silver);
      font-size: 1.6rem;
    }
    .blog .blog-reviewer-portrait { flex: none; display: block; }
    .blog .blog-reviewer img {
      display: block;
      width: 76px;
      height: 76px;
      object-fit: cover;
      border-radius: 50%;
      background: #f3f3f3;
    }
    .blog .blog-reviewer p { margin: 0; line-height: 1.5; white-space: nowrap; }
    .blog .blog-reviewer p a {
      display: inline-block;
      color: var(--oxford-red-1);
      font-weight: 600;
      text-decoration: none;
      transition: color 180ms ease, transform 180ms ease;
    }
    .blog .blog-reviewer p a:hover,
    .blog .blog-reviewer p a:focus-visible {
      color: var(--carolina-red);
      transform: translateY(-1px);
    }
    .blog .blog-reviewer p a:focus-visible {
      outline: 2px solid var(--carolina-red);
      outline-offset: 3px;
    }
    @media (max-width: 767px) {
      .blog .blog-reviewer {
        flex-direction: column;
        text-align: center;
        padding: 18px;
      }
      .blog .blog-reviewer img { width: 88px; height: 88px; }
      .blog .blog-reviewer p { white-space: normal; }
      .blog .blog-reviewer p a { display: block; margin-top: 2px; }
    }
    .blog .blog-banner img {
      width: 100%;
      height: auto;
      border-radius: var(--radius-4);
      box-shadow: var(--shadow-3);
      margin-bottom: 30px;
    }
    .blog .blog-content {
      font-size: var(--fs-body);
      line-height: 1.8;
      color: var(--black);
      text-align: justify;
      text-decoration: none;
    }
    .blog .blog-content :is(h2, h3, h4) {
      font-size: var(--fs-5);
      color: var(--oxford-red-1);
      margin-top: 30px;
      margin-bottom: 15px;
    }
    .blog .blog-content ol {
      margin-left: 0;
      padding-left: 30px;
      margin-bottom: 20px;
      list-style-position: outside;
    }
    .blog .blog-content ol li {
      list-style-type: decimal;
      display: list-item;
      margin-bottom: 10px;
    }
    #blog-bn ol li {
      list-style-type: bengali !important;
    }
    .blog-content ol li::marker {
      font-weight: bold;
    }
    .blog .blog-content a {
      color: var(--black);
      text-decoration: none;
      transition: color var(--transition);
      display: inline !important;
    }
    .blog .blog-content a:hover {
      color: var(--carolina-red);
    }
    .blog .blog-content ol > li > ul,
    .blog .blog-content ol ul,
    .blog .blog-content ul.inside-ol {
      list-style-type: disc !important;
      margin-left: 25px;
      padding-left: 15px;
    }
    .blog .blog-content ol > li > ul > li,
    .blog .blog-content ol ul li,
    .blog .blog-content ul.inside-ol > li {
      display: list-item !important;
      list-style-type: disc !important;
    }

    #blog-bn ol > li > ul li {
      list-style-type: disc !important;
    }

    .blog .blog-content ol ul li::marker,
    .blog .blog-content ul.inside-ol li::marker {
      font-weight: bold;
    }
    /* comparison table */
    .blog .table-container {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-block: 20px;
    }
    .blog .comparison-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--fs-8);
    }
    .blog .comparison-table th,
    .blog .comparison-table td {
      border: 0.5px solid var(--sonic-silver);
      padding: 10px 14px;
      text-align: left;
      vertical-align: top;
      line-height: 1.5;
    }
    .blog .comparison-table thead tr {
      background-color: var(--oxford-red-2);
      color: var(--white);
    }
    .blog .comparison-table thead th {
      border-color: var(--oxford-red-2);
      font-weight: var(--fw-600);
    }
    .blog .comparison-table tbody tr:nth-child(even) {
      background-color: var(--cultured);
    }
    .blog .comparison-table tbody td:first-child {
      font-weight: var(--fw-600);
      color: var(--oxford-red-2);
    }
    @media (max-width: 480px) {
      .blog .comparison-table {
        font-size: var(--fs-8);
      }
      .blog .comparison-table th,
      .blog .comparison-table td {
        padding: 8px 10px;
      }
    }
    /* all blog cards visible by default, pagination will override */
    .blog-list .blog-card {
      display: flex;
    }
    
    /* Hide blogs 7+ on pages without pagination (index, home) */
    /* Pagination.js will dynamically override this on blogs.html */
    .blog-list .blog-card:nth-child(n+7) {
      display: none;
    }

    /* PAGINATION SYSTEM STYLES */
    .blog-pagination-container {
      margin-top: 60px;
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    /* Category Filter */
    .blog-category-filter {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-bottom: 20px;
    }

    .category-btn {
      padding: 10px 16px;
      border: 2px solid hsl(0, 0%, 80%);
      background: transparent;
      border-radius: 25px;
      font-size: var(--fs-7);
      font-weight: 600;
      color: var(--onyx);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .category-btn:hover {
      border-color: var(--carolina-red);
      color: var(--carolina-red);
    }

    .category-btn.active {
      background: linear-gradient(90deg, var(--carolina-red) 0%, var(--royal-red-light) 100%);
      color: white;
      border-color: var(--carolina-red);
    }

    /* Pagination Controls */
    .blog-pagination-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      flex-wrap: wrap;
    }
    .blog-pagination-controls[hidden] { display: none; }

    .pagination-btn {
      padding: 10px 16px;
      background: linear-gradient(90deg, var(--carolina-red) 0%, var(--royal-red-light) 100%);
      color: white;
      border: none;
      border-radius: 6px;
      font-size: var(--fs-7);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      opacity: 1;
      visibility: visible;
    }

    .pagination-btn:hover:not(:disabled) {
      background: linear-gradient(90deg, var(--royal-red-light) 0%, var(--carolina-red) 100%);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .pagination-btn:disabled {
      background: hsl(0, 0%, 87%);
      color: hsl(0, 0%, 55%);
      cursor: not-allowed;
      opacity: 0.6;
    }

    /* Page Numbers */
    .pagination-numbers {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
    }

    .page-number {
      min-width: 36px;
      height: 36px;
      padding: 0;
      border: 2px solid var(--carolina-red);
      background: white;
      border-radius: 6px;
      font-size: var(--fs-8);
      font-weight: 600;
      color: var(--carolina-red);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .page-number:hover {
      background: linear-gradient(90deg, var(--carolina-red) 0%, var(--royal-red-light) 100%);
      color: white;
      border-color: var(--carolina-red);
    }

    .page-number.active {
      background: linear-gradient(90deg, var(--carolina-red) 0%, var(--royal-red-light) 100%);
      color: white;
      border-color: var(--carolina-red);
    }

    .page-dots {
      padding: 0 4px;
      color: var(--onyx);
      font-weight: 600;
    }

    /* Responsive Pagination */
    @media (max-width: 768px) {
      .blog-pagination-controls {
        gap: 10px;
      }

      .pagination-btn {
        padding: 8px 12px;
        font-size: var(--fs-8);
      }

      .page-number {
        min-width: 32px;
        height: 32px;
        font-size: var(--fs-9);
      }

      .category-btn {
        padding: 8px 12px;
        font-size: var(--fs-8);
      }
    }

    @media (max-width: 480px) {
      .blog-pagination-container {
        margin-top: 40px;
      }

      .blog-category-filter {
        gap: 8px;
      }

      .category-btn {
        padding: 6px 10px;
        font-size: var(--fs-9);
      }

      .pagination-btn {
        padding: 6px 10px;
        font-size: var(--fs-9);
      }

      .pagination-btn.pagination-prev,
      .pagination-btn.pagination-next {
        font-size: var(--fs-9);
      }
    }

    .blog-load-more-wrap {
      text-align: center;
      margin-top: 40px;
    }
    .load-more-btn {
      padding: 14px 30px;
      font-size: var(--fs-7);
    }
    .blog-list.show-all ~ .blog-load-more-wrap .load-more-btn {
      display: none;
    }
/* blog end */
/* Blog article headings */
.blog#blog h1.blog-title {
  font-size: clamp(2.6rem, 3.2vw, 4.2rem);
}
.blog#blog .blog-article-eyebrow {
  margin-bottom: 14px;
  color: var(--royal-red-light);
  font-size: var(--fs-3);
  font-weight: var(--fw-700);
  letter-spacing: .06em;
  line-height: 1.25;
  text-transform: uppercase;
}
.blog#blog .blog-article-eyebrow + .blog-title { padding-top: 0; }
.blog#blog .blog-content h2 {
  padding-top: 22px;
  border-top: 1px solid #e9e2e2;
}
@media (min-width: 990px) {
  .blog#blog .blog-article-eyebrow { padding-top: 92px; }
}

@media (min-width: 768px) {
  .blog-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 850px) {
  .blogs-directory .blog { padding-block-start: 160px; }
}
@media (max-width: 550px) {
  .blogs-directory .blog { padding-block-start: 150px; }
}
@media (min-width: 992px) {
  .blog { padding-top: calc(80px + 100px); }
  .blog-list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 990px) and (max-width: 1200px) {
  .blog-title { padding-top: calc(80px + 60px); }
}
@media (min-width: 1200px) {
  .blog-title { padding-top: calc(80px + 60px); }
}

/* Disc bulge article diagrams and lists */
.disc-bulge-article .blog .disc-term-diagram { overflow-x: auto; max-width: 100%; margin: 20px 0; padding: 16px; font-size: 0.85rem; line-height: 1.35; text-align: left; background: #f7f8fa; }
.disc-bulge-article .blog .blog-content > ul { margin: 0 0 20px; padding-left: 30px; }
.disc-bulge-article .blog .blog-content > ul > li { display: list-item; list-style-type: disc; margin-bottom: 10px; }