/* Inherited context = page wrapper for this blog layout */
.blog-section {
    line-height: 1.5;
    tab-size: 4;
    font-family: Inter, sans-serif;
    font-feature-settings: normal;
    font-variation-settings: normal;
    color: hsl(var(--foreground));
    --foreground: 215 25% 15%;
    --background: 210 20% 98%;
    --card: 0 0% 100%;
    --card-foreground: 215 25% 15%;
    --primary: 210 75% 25%;
    --primary-foreground: 0 0% 100%;
    --secondary: 170 45% 40%;
    --secondary-foreground: 0 0% 100%;
    --muted-foreground: 215 15% 45%;
    --border: 210 20% 88%;
    --ring: 210 75% 25%;
    --radius: 0.5rem;
}

/* ===============================================
   BREADCRUMB NAVIGATION
   =============================================== */

.blog-breadcrumb {
    font-family: Inter, sans-serif;
    background: linear-gradient(135deg, hsl(210 30% 95%) 0%, hsl(210 25% 92%) 100%);
    border: 1px solid hsl(210 20% 88%);
    border-radius: 0.5rem;
    padding: 0.875rem 1.25rem;
    margin-bottom: 1.5rem;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgb(21, 34, 176);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.breadcrumb-link:hover {
    color: rgb(50, 80, 220);
    opacity: 0.85;
}

.breadcrumb-separator {
    display: flex;
    align-items: center;
    color: hsl(215 15% 55%);
}

.breadcrumb-separator svg {
    width: 1rem;
    height: 1rem;
}

.breadcrumb-current span {
    font-size: 0.9375rem;
    font-weight: 500;
    color: hsl(215 25% 25%);
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Breadcrumb responsive - tablet */
@media (max-width: 768px) {
    .blog-breadcrumb {
        padding: 0.75rem 1rem;
        margin-bottom: 1.25rem;
    }

    .breadcrumb-link,
    .breadcrumb-current span {
        font-size: 0.875rem;
    }

    .breadcrumb-current span {
        max-width: 280px;
    }

    .breadcrumb-separator svg {
        width: 0.875rem;
        height: 0.875rem;
    }
}

/* Breadcrumb responsive - mobile */
@media (max-width: 480px) {
    .blog-breadcrumb {
        padding: 0.625rem 0.875rem;
        margin-bottom: 1rem;
    }

    .breadcrumb-list {
        gap: 0.375rem;
    }

    .breadcrumb-link,
    .breadcrumb-current span {
        font-size: 0.8125rem;
    }

    .breadcrumb-current span {
        max-width: 180px;
    }

    .breadcrumb-separator svg {
        width: 0.75rem;
        height: 0.75rem;
    }
}

/* Breadcrumb responsive - extra small */
@media (max-width: 359px) {
    .blog-breadcrumb {
        padding: 0.5rem 0.75rem;
    }

    .breadcrumb-link,
    .breadcrumb-current span {
        font-size: 0.75rem;
    }

    .breadcrumb-current span {
        max-width: 120px;
    }
}


/* RESET ONLY INSIDE BLOG WRAPPER */
.blog-section *,
.blog-section *::before,
.blog-section *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: rgb(229, 231, 235);
}

/* basic elements scoped */
.blog-section h1,
.blog-section h2,
.blog-section h3,
.blog-section h4,
.blog-section h5,
.blog-section h6 {
    font-size: inherit;
    font-weight: inherit;
    font-family: Inter, sans-serif;
    margin: 0;
}

.blog-section a {
    color: inherit;
    text-decoration: inherit;
}

.blog-section b,
.blog-section strong {
    font-weight: bolder;
}

.blog-section button,
.blog-section input,
.blog-section optgroup,
.blog-section select,
.blog-section textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

.blog-section button,
.blog-section select {
    text-transform: none;
}

.blog-section button,
.blog-section input[type="button"],
.blog-section input[type="reset"],
.blog-section input[type="submit"] {
    appearance: button;
    background-color: transparent;
    background-image: none;
}

.blog-section blockquote,
.blog-section dl,
.blog-section dd,
.blog-section h1,
.blog-section h2,
.blog-section h3,
.blog-section h4,
.blog-section h5,
.blog-section h6,
.blog-section hr,
.blog-section figure,
.blog-section p,
.blog-section pre {
    margin: 0;
}

.blog-section ol,
.blog-section ul,
.blog-section menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-section textarea {
    resize: vertical;
}

.blog-section input::placeholder,
.blog-section textarea::placeholder {
    opacity: 1;
    color: rgb(156, 163, 175);
}

.blog-section button,
.blog-section [role="button"] {
    cursor: pointer;
}

.blog-section img,
.blog-section svg,
.blog-section video,
.blog-section canvas,
.blog-section audio,
.blog-section iframe,
.blog-section embed,
.blog-section object {
    display: inline-block;
    vertical-align: middle;
}

.blog-section img,
.blog-section video {
    max-width: 100%;
    height: auto;
}

/* use border + background + text color only inside wrapper */
.blog-section * {
    border-color: hsl(var(--border));
}

.blog-section {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
}

/* utility-style classes (scoped) */

.blog-section .container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 2rem;
    padding-left: 2rem;
}

@media (min-width: 1400px) {
    .blog-section .container {
        max-width: 1400px;
    }
}

.blog-section .fixed {
    position: fixed;
}

.blog-section .absolute {
    position: absolute;
}

.blog-section .relative {
    position: relative;
}

.blog-section .sticky {
    position: sticky;
}

.blog-section .-bottom-1 {
    bottom: -0.25rem;
}

.blog-section .left-0 {
    left: 0;
}

.blog-section .left-2 {
    left: 0.5rem;
}

.blog-section .right-0 {
    right: 0;
}

.blog-section .top-0 {
    top: 0;
}

.blog-section .top-2 {
    top: 0.5rem;
}

.blog-section .top-20 {
    top: 5rem;
}

.blog-section .z-50 {
    z-index: 50;
}

.blog-section .z-\[100\] {
    z-index: 100;
}

.blog-section .mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.blog-section .mb-2 {
    margin-bottom: 0.5rem;
}

.blog-section .mb-4 {
    margin-bottom: 1rem;
}

.blog-section .mb-6 {
    margin-bottom: 1.5rem;
}

.blog-section .mb-8 {
    margin-bottom: 2rem;
}

.blog-section .ml-2 {
    margin-left: 0.5rem;
}

.blog-section .mt-1 {
    margin-top: 0.25rem;
}

.blog-section .mt-2 {
    margin-top: 0.5rem;
}

.blog-section .mt-8 {
    margin-top: 2rem;
}

.blog-section .mt-12 {
    margin-top: 3rem;
}

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

.blog-section .block {
    display: block;
}

.blog-section .flex {
    display: flex;
}

.blog-section .inline-flex {
    display: inline-flex;
}

.blog-section .grid {
    display: grid;
}

.blog-section .hidden {
    display: none;
}

.blog-section .h-1 {
    height: 0.25rem;
}

.blog-section .h-10 {
    height: 2.5rem;
}

.blog-section .h-16 {
    height: 4rem;
}

.blog-section .h-20 {
    height: 5rem;
}

.blog-section .h-32 {
    height: 8rem;
}

.blog-section .h-4 {
    height: 1rem;
}

.blog-section .h-5 {
    height: 1.25rem;
}

.blog-section .h-6 {
    height: 1.5rem;
}

.blog-section .h-64 {
    height: 16rem;
}

.blog-section .h-8 {
    height: 2rem;
}

.blog-section .h-9 {
    height: 2.25rem;
}

.blog-section .h-full {
    height: 100%;
}

.blog-section .max-h-screen {
    max-height: 100vh;
}

.blog-section .min-h-\[80px\] {
    min-height: 80px;
}

.blog-section .min-h-screen {
    min-height: 100vh;
}

.blog-section .w-0 {
    width: 0;
}

.blog-section .w-1 {
    width: 0.25rem;
}

.blog-section .w-10 {
    width: 2.5rem;
}

.blog-section .w-16 {
    width: 4rem;
}

.blog-section .w-3 {
    width: 0.75rem;
}

.blog-section .w-4 {
    width: 1rem;
}

.blog-section .w-5 {
    width: 1.25rem;
}

.blog-section .w-6 {
    width: 1.5rem;
}

.blog-section .w-full {
    width: 100%;
}

.blog-section .min-w-0 {
    min-width: 0;
}

.blog-section .max-w-4xl {
    max-width: 56rem;
}

.blog-section .max-w-none {
    max-width: none;
}

.blog-section .max-w-sm {
    max-width: 24rem;
}

.blog-section .flex-1 {
    flex: 1 1 0%;
}

.blog-section .flex-shrink-0,
.blog-section .shrink-0 {
    flex-shrink: 0;
}

.blog-section .cursor-pointer {
    cursor: pointer;
}

.blog-section .flex-col {
    flex-direction: column;
}

.blog-section .flex-col-reverse {
    flex-direction: column-reverse;
}

.blog-section .flex-wrap {
    flex-wrap: wrap;
}

.blog-section .items-start {
    align-items: flex-start;
}

.blog-section .items-center {
    align-items: center;
}

.blog-section .justify-center {
    justify-content: center;
}

.blog-section .justify-between {
    justify-content: space-between;
}

.blog-section .gap-1 {
    gap: 0.25rem;
}

.blog-section .gap-2 {
    gap: 0.5rem;
}

.blog-section .gap-3 {
    gap: 0.75rem;
}

.blog-section .gap-4 {
    gap: 1rem;
}

.blog-section .gap-6 {
    gap: 1.5rem;
}

.blog-section .gap-8 {
    gap: 2rem;
}

.blog-section .space-y-2> :not([hidden])~ :not([hidden]) {
    margin-top: 0.5rem;
}

.blog-section .space-y-4> :not([hidden])~ :not([hidden]) {
    margin-top: 1rem;
}

.blog-section .space-y-6> :not([hidden])~ :not([hidden]) {
    margin-top: 1.5rem;
}

.blog-section .overflow-hidden {
    overflow: hidden;
}

.blog-section .whitespace-nowrap {
    white-space: nowrap;
}

.blog-section .rounded-2xl {
    border-radius: 1rem;
}

.blog-section .rounded-full {
    border-radius: 9999px;
}

.blog-section .rounded-lg {
    border-radius: var(--radius);
}

.blog-section .rounded-md {
    border-radius: calc(var(--radius) - 2px);
}

.blog-section .rounded-xl {
    border-radius: 0.75rem;
}

.blog-section .border {
    border-width: 1px;
}

.blog-section .border-0 {
    border-width: 0;
}

.blog-section .border-t {
    border-top-width: 1px;
}

.blog-section .border-blog-heading\/30 {
    border-color: rgba(21, 34, 176, 0.3);
}

.blog-section .border-gray-100 {
    border-color: rgb(243 244 246 / 1);
}

.blog-section .border-gray-200 {
    border-color: rgb(229 231 235 / 1);
}

.blog-section .border-transparent {
    border-color: transparent;
}

.blog-section .bg-background {
    background-color: hsl(var(--background));
}

.blog-section .bg-blog-heading {
    background-color: rgb(21 34 176 / 1);
}

.blog-section .bg-blog-heading\/10 {
    background-color: rgba(21, 34, 176, 0.1);
}

.blog-section .bg-gray-200 {
    background-color: rgb(229 231 235 / 1);
}

.blog-section .bg-gray-50 {
    background-color: rgb(249 250 251 / 1);
}

.blog-section .bg-white {
    background-color: rgb(255 255 255 / 1);
}

.blog-section .object-cover {
    object-fit: cover;
}

.blog-section .p-2 {
    padding: 0.5rem;
}

.blog-section .p-3 {
    padding: 0.75rem;
}

.blog-section .p-4 {
    padding: 1rem;
}

.blog-section .p-6 {
    padding: 1.5rem;
}

.blog-section .p-8 {
    padding: 2rem;
}

.blog-section .px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.blog-section .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.blog-section .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.blog-section .py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.blog-section .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.blog-section .py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.blog-section .py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.blog-section .pb-8 {
    padding-bottom: 2rem;
}

.blog-section .pt-0 {
    padding-top: 0;
}

.blog-section .pt-8 {
    padding-top: 2rem;
}

.blog-section .pt-32 {
    padding-top: 8rem;
}

.blog-section .text-center {
    text-align: center;
}

.blog-section .font-sans,
.blog-section .font-display {
    font-family: Inter, sans-serif;
}

.blog-section .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.blog-section .text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.blog-section .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.blog-section .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.blog-section .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.blog-section .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.blog-section .font-bold {
    font-weight: 700;
}

.blog-section .font-medium {
    font-weight: 500;
}

.blog-section .font-semibold {
    font-weight: 600;
}

.blog-section .tracking-tight {
    letter-spacing: -0.025em;
}

.blog-section .text-blog-heading {
    color: rgb(21 34 176 / 1);
}

.blog-section .text-blog-text {
    color: rgb(20 24 76 / 1);
}

.blog-section .text-blog-text\/70 {
    color: rgba(20, 24, 76, 0.7);
}

.blog-section .text-card-foreground {
    color: hsl(var(--card-foreground));
}

.blog-section .text-foreground {
    color: hsl(var(--foreground));
}

.blog-section .text-gray-500 {
    color: rgb(107 114 128 / 1);
}

.blog-section .text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.blog-section .text-primary {
    color: hsl(var(--primary));
}

.blog-section .text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

.blog-section .text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
}

.blog-section .text-white {
    color: rgb(255 255 255 / 1);
}

.blog-section .text-white\/80 {
    color: rgba(255, 255, 255, 0.8);
}

.blog-section .shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.blog-section .shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.blog-section .shadow-sm {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.blog-section .ring-offset-background {
    --tw-ring-offset-color: hsl(var(--background));
}

.blog-section .transition-all {
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-section .transition-colors {
    transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-section .transition-opacity {
    transition-property: opacity;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-section .transition-transform {
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-section .duration-150 {
    transition-duration: 0.15s;
}

.blog-section .duration-500 {
    transition-duration: 0.5s;
}

/* Blog-specific typography */
.blog-section .blog-content {
    font-family: Inter, sans-serif;
    color: rgb(20, 24, 76);
    line-height: 1.8;
    font-size: 1.125rem;
}

.blog-section .blog-h2 {
    font-family: Inter, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: rgb(21, 34, 176);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.blog-section .blog-paragraph {
    font-family: Inter, sans-serif;
    color: rgb(20, 24, 76);
    margin-bottom: 1.5rem;
    line-height: 1.8;
    text-align: left;
}

.blog-section .blog-list {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.blog-section .blog-ul {
    list-style-type: disc;
}

.blog-section .blog-list-item {
    font-family: Inter, sans-serif;
    color: rgb(20, 24, 76);
    margin-bottom: 0.5rem;
    line-height: 1.7;
    padding-left: 0.5rem;
}

.blog-section .blog-list-item strong {
    color: rgb(21, 34, 176);
    font-weight: 600;
}

.blog-section .blog-content strong {
    color: rgb(21, 34, 176);
    font-weight: 600;
}

/* states / hovers (scoped) */
.blog-section .placeholder\:text-muted-foreground::placeholder {
    color: hsl(var(--muted-foreground));
}

.blog-section .hover\:border-blog-heading:hover {
    border-color: rgb(21 34 176 / 1);
}

.blog-section .hover\:border-blog-heading\/30:hover {
    border-color: rgba(21, 34, 176, 0.3);
}

.blog-section .hover\:bg-blog-heading:hover {
    background-color: rgb(21 34 176 / 1);
}

.blog-section .hover\:bg-blog-heading\/90:hover {
    background-color: rgba(21, 34, 176, 0.9);
}

.blog-section .hover\:bg-gray-100:hover {
    background-color: rgb(243 244 246 / 1);
}

.blog-section .hover\:bg-gray-50:hover {
    background-color: rgb(249 250 251 / 1);
}

.blog-section .hover\:bg-primary\/80:hover {
    background-color: hsl(var(--primary) / 0.8);
}

.blog-section .hover\:bg-secondary\/80:hover {
    background-color: hsl(var(--secondary) / 0.8);
}

.blog-section .hover\:text-white:hover {
    color: rgb(255 255 255 / 1);
}

.blog-section .hover\:opacity-80:hover {
    opacity: 0.8;
}

.blog-section .hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.blog-section .focus\:border-blog-heading:focus {
    border-color: rgb(21 34 176 / 1);
}

.blog-section .focus\:outline-none:focus {
    outline: transparent solid 2px;
    outline-offset: 2px;
}

.blog-section .focus\:ring-2:focus {
    --tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blog-section .focus\:ring-ring:focus {
    --tw-ring-color: hsl(var(--ring));
}

.blog-section .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}

.blog-section .disabled\:pointer-events-none:disabled {
    pointer-events: none;
}

.blog-section .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
}

.blog-section .disabled\:opacity-50:disabled {
    opacity: 0.5;
}

.blog-section .group:hover .group-hover\:w-full {
    width: 100%;
}

.blog-section .group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

.blog-section .group:hover .group-hover\:text-blog-heading {
    color: rgb(21 34 176 / 1);
}

/* responsive (scoped) */
@media (min-width: 640px) {
    .blog-section .sm\:bottom-0 {
        bottom: 0;
    }

    .blog-section .sm\:right-0 {
        right: 0;
    }

    .blog-section .sm\:top-auto {
        top: auto;
    }

    .blog-section .sm\:flex-col {
        flex-direction: column;
    }
}

@media (min-width: 768px) {
    .blog-section .md\:ml-auto {
        margin-left: auto;
    }

    .blog-section .md\:block {
        display: block;
    }

    .blog-section .md\:h-96 {
        height: 24rem;
    }

    .blog-section .md\:w-auto {
        width: auto;
    }

    .blog-section .md\:max-w-\[420px\] {
        max-width: 420px;
    }

    .blog-section .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-section .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blog-section .md\:flex-row {
        flex-direction: row;
    }

    .blog-section .md\:justify-end {
        justify-content: flex-end;
    }

    .blog-section .md\:p-12 {
        padding: 3rem;
    }

    .blog-section .md\:text-right {
        text-align: right;
    }

    .blog-section .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .blog-section .md\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .blog-section .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .blog-section .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .blog-section .lg\:flex {
        display: flex;
    }

    .blog-section .lg\:hidden {
        display: none;
    }

    .blog-section .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blog-section .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .blog-section .lg\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
}

/* SVG helpers */
.blog-section .svg-pointer-events-none svg {
    pointer-events: none;
}

.blog-section .svg-size-4 svg {
    width: 1rem;
    height: 1rem;
}

.blog-section .svg-shrink-0 svg {
    flex-shrink: 0;
}

/* ===============================================
   COMPREHENSIVE RESPONSIVE STYLES FOR SINGLEBLOG
   Optimized for: 320px to 1920px+ screens
   =============================================== */

/* === BASE IMPROVEMENTS === */

/* Blog detail page wrapper - improved alignment */
.blog-detail-page {
    padding: 0;
}

/* Remove extra padding from container */
.blog-section .container {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .blog-section .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .blog-section .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* === BLOG HEADER - Title, Author, Date === */

.blog-section .font-sans.text-3xl {
    font-size: 1.75rem;
    line-height: 2rem;
}

@media (min-width: 768px) {
    .blog-section .font-sans.text-3xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .blog-section .font-sans.text-3xl {
        font-size: 3rem;
        line-height: 3.5rem;
    }
}

/* Author/date meta - better mobile layout */
.blog-section .flex.flex-wrap.items-center.gap-6 {
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .blog-section .flex.flex-wrap.items-center.gap-6 {
        gap: 1.5rem;
    }
}

/* === FEATURED IMAGE === */

.blog-section .h-64 {
    height: 14rem;
}

@media (min-width: 768px) {
    .blog-section .h-64 {
        height: 18rem;
    }
}

@media (min-width: 1024px) {
    .blog-section .h-64 {
        height: 24rem;
    }
}

/* === MAIN CONTENT GRID === */

/* Stack sidebar below content on mobile/tablet */
.blog-section .grid.lg\\:grid-cols-3 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .blog-section .grid.lg\\:grid-cols-3 {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }
}

@media (min-width: 1280px) {
    .blog-section .grid.lg\\:grid-cols-3 {
        gap: 3rem;
    }
}

/* Main article area */
.blog-section .lg\\:col-span-2 {
    order: 1;
}

/* Sidebar */
.blog-section .lg\\:col-span-1 {
    order: 2;
}

@media (min-width: 1024px) {
    .blog-section .lg\\:col-span-1 {
        order: 2;
    }

    .blog-section .lg\\:col-span-1 .sticky {
        position: sticky;
        top: 6rem;
    }
}

/* === ARTICLE CONTENT === */

/* Article card padding - responsive */
.blog-section .p-8 {
    padding: 1.25rem;
}

@media (min-width: 480px) {
    .blog-section .p-8 {
        padding: 1.5rem;
    }
}

@media (min-width: 768px) {
    .blog-section .p-8 {
        padding: 2rem;
    }
}

@media (min-width: 1024px) {
    .blog-section .p-8 {
        padding: 2.5rem;
    }
}

/* Blog content typography - optimized for readability */
.blog-section .blog-content {
    font-size: 1rem;
    line-height: 1.75;
}

@media (min-width: 768px) {
    .blog-section .blog-content {
        font-size: 1.0625rem;
        line-height: 1.8;
    }
}

@media (min-width: 1024px) {
    .blog-section .blog-content {
        font-size: 1.125rem;
        line-height: 1.85;
    }
}

/* Blog headings - responsive */
.blog-section .blog-h2 {
    font-size: 1.25rem;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .blog-section .blog-h2 {
        font-size: 1.5rem;
        margin-top: 2.25rem;
        margin-bottom: 1rem;
    }
}

@media (min-width: 1024px) {
    .blog-section .blog-h2 {
        font-size: 1.75rem;
        margin-top: 2.5rem;
    }
}

/* Blog paragraphs */
.blog-section .blog-paragraph {
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .blog-section .blog-paragraph {
        margin-bottom: 1.5rem;
    }
}

/* Blog lists */
.blog-section .blog-list {
    padding-left: 1.25rem;
}

@media (min-width: 768px) {
    .blog-section .blog-list {
        padding-left: 1.5rem;
    }
}

/* === TAGS SECTION === */

.blog-section .flex.flex-wrap.items-center.gap-4 {
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .blog-section .flex.flex-wrap.items-center.gap-4 {
        gap: 0.75rem;
    }
}

/* Tag chips - responsive sizing */
.blog-section [class*="px-2"][class*="py-0"] {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

@media (min-width: 768px) {
    .blog-section [class*="px-2"][class*="py-0"] {
        padding: 0.25rem 0.625rem;
        font-size: 0.75rem;
    }
}

/* === SHARE BUTTONS === */

.blog-section .h-9 {
    height: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
}

@media (min-width: 480px) {
    .blog-section .h-9 {
        height: 2.25rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-size: 0.875rem;
    }
}

/* === PREVIOUS/NEXT POSTS === */

.blog-section .grid.md\\:grid-cols-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .blog-section .grid.md\\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Previous/Next post cards */
.blog-section .group.p-6 {
    padding: 1rem;
}

@media (min-width: 768px) {
    .blog-section .group.p-6 {
        padding: 1.5rem;
    }
}

/* === SIMILAR POSTS GRID === */

.blog-section .grid.md\\:grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 480px) {
    .blog-section .grid.md\\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .blog-section .grid.md\\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* Similar post cards - smaller on mobile */
.blog-section .h-32 {
    height: 7rem;
}

@media (min-width: 768px) {
    .blog-section .h-32 {
        height: 8rem;
    }
}

/* === COMMENT FORM === */

.blog-section .grid.md\\:grid-cols-2.gap-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .blog-section .grid.md\\:grid-cols-2.gap-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Form inputs */
.blog-section .h-10 {
    height: 2.5rem;
    font-size: 0.875rem;
}

.blog-section textarea {
    min-height: 100px;
}

@media (min-width: 768px) {
    .blog-section textarea {
        min-height: 120px;
    }
}

/* Submit button */
.blog-section button[type="submit"] {
    width: 100%;
}

@media (min-width: 640px) {
    .blog-section button[type="submit"] {
        width: auto;
    }
}

/* === SIDEBAR CARDS === */

.blog-section .space-y-6 {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .blog-section .space-y-6 {
        gap: 1.5rem;
    }
}

/* Sidebar card headers */
.blog-section .tracking-tight.text-lg {
    font-size: 1rem;
}

@media (min-width: 768px) {
    .blog-section .tracking-tight.text-lg {
        font-size: 1.125rem;
    }
}

/* Recent posts - responsive image size */
.blog-section .w-16.h-16 {
    width: 3.5rem;
    height: 3.5rem;
}

@media (min-width: 768px) {
    .blog-section .w-16.h-16 {
        width: 4rem;
        height: 4rem;
    }
}

/* Recent post titles */
.blog-section .flex.gap-3.group h4 {
    font-size: 0.8rem;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .blog-section .flex.gap-3.group h4 {
        font-size: 0.875rem;
        line-height: 1.4;
    }
}

/* Category links */
.blog-section a.flex.items-center.justify-between.w-full.p-3 {
    padding: 0.625rem;
}

@media (min-width: 768px) {
    .blog-section a.flex.items-center.justify-between.w-full.p-3 {
        padding: 0.75rem;
    }
}

/* CTA Card */
.blog-section .rounded-lg.shadow-sm.bg-blog-heading {
    border-radius: 0.75rem;
}

.blog-section .rounded-lg.shadow-sm.bg-blog-heading .p-6 {
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .blog-section .rounded-lg.shadow-sm.bg-blog-heading .p-6 {
        padding: 1.5rem;
    }
}

/* === SECTION SPACING === */

.blog-section .pt-32 {
    padding-top: 1rem;
}

.blog-section .py-12 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (min-width: 768px) {
    .blog-section .pt-32 {
        padding-top: 1.5rem;
    }

    .blog-section .py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* === EXTRA SMALL DEVICES (< 360px) === */

@media (max-width: 359px) {
    .blog-section .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .blog-section .font-sans.text-3xl {
        font-size: 1.375rem;
        line-height: 1.75rem;
    }

    .blog-section .p-8 {
        padding: 1rem;
    }

    .blog-section .blog-content {
        font-size: 0.9375rem;
    }

    .blog-section .blog-h2 {
        font-size: 1.125rem;
    }

    .blog-section .h-64 {
        height: 10rem;
    }

    .blog-section .h-32 {
        height: 5rem;
    }

    .blog-section .w-16.h-16 {
        width: 3rem;
        height: 3rem;
    }

    .blog-section .h-9 {
        height: 1.75rem;
        font-size: 0.65rem;
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }

    /* Hide share button text on very small screens */
    .blog-section .h-9 svg+span,
    .blog-section button.h-9 span {
        display: none;
    }
}

/* === SMOOTH TRANSITIONS === */

.blog-section * {
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 0.15s;
    transition-timing-function: ease-in-out;
}

.blog-section img {
    transition: transform 0.3s ease;
}

/* === PERFORMANCE OPTIMIZATIONS === */

.blog-section img {
    will-change: transform;
}

.blog-section .sticky {
    will-change: scroll-position;
}

/* Font loading optimization */
.blog-section {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===============================================
   COMPREHENSIVE MOBILE FONT OPTIMIZATION
   Optimized for readability across all devices
   =============================================== */

/* === BASE TYPOGRAPHY SCALE === */

/* Blog Title - Main heading */
.blog-section h1,
.blog-section .text-3xl,
.blog-section .text-4xl,
.blog-section .font-sans.text-3xl {
    font-size: clamp(1.5rem, 5vw, 3rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Section Headings (H2) */
.blog-section h2,
.blog-section .text-2xl,
.blog-section .blog-h2 {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    line-height: 1.3;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

/* Sub Headings (H3) */
.blog-section h3,
.blog-section .text-xl {
    font-size: clamp(1.1rem, 3.5vw, 1.5rem);
    line-height: 1.35;
    font-weight: 600;
}

/* Sidebar card titles */
.blog-section .text-lg,
.blog-section .tracking-tight.text-lg {
    font-size: clamp(0.95rem, 2.5vw, 1.125rem);
    line-height: 1.4;
    font-weight: 600;
}

/* Body text / paragraphs */
.blog-section p,
.blog-section .blog-content,
.blog-section .blog-paragraph,
.blog-section .text-base {
    font-size: clamp(0.9375rem, 2.2vw, 1.125rem);
    line-height: 1.7;
    font-weight: 400;
}

/* Small text - metadata, dates, read time */
.blog-section .text-sm,
.blog-section .text-muted-foreground,
.blog-section time,
.blog-section .flex.items-center.gap-2 span {
    font-size: clamp(0.8125rem, 2vw, 0.875rem);
    line-height: 1.5;
}

/* Extra small text - tags, badges */
.blog-section .text-xs {
    font-size: clamp(0.6875rem, 1.8vw, 0.75rem);
    line-height: 1.4;
}

/* === DESKTOP (1024px+) === */
@media (min-width: 1024px) {

    .blog-section h1,
    .blog-section .font-sans.text-3xl {
        font-size: 2.75rem;
        line-height: 1.15;
    }

    .blog-section h2,
    .blog-section .blog-h2 {
        font-size: 1.625rem;
    }

    .blog-section p,
    .blog-section .blog-content {
        font-size: 1.0625rem;
        line-height: 1.75;
    }
}

/* === TABLET (768px - 1023px) === */
@media (min-width: 768px) and (max-width: 1023px) {

    .blog-section h1,
    .blog-section .font-sans.text-3xl {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    .blog-section h2,
    .blog-section .blog-h2 {
        font-size: 1.375rem;
    }

    .blog-section p,
    .blog-section .blog-content {
        font-size: 1rem;
        line-height: 1.7;
    }

    .blog-section .text-lg {
        font-size: 1rem;
    }
}

/* === MOBILE (481px - 767px) === */
@media (min-width: 481px) and (max-width: 767px) {

    .blog-section h1,
    .blog-section .font-sans.text-3xl {
        font-size: 1.875rem;
        line-height: 1.25;
    }

    .blog-section h2,
    .blog-section .blog-h2 {
        font-size: 1.25rem;
        margin-top: 1.25em;
    }

    .blog-section h3,
    .blog-section .text-xl {
        font-size: 1.125rem;
    }

    .blog-section p,
    .blog-section .blog-content {
        font-size: 0.9375rem;
        line-height: 1.65;
    }

    .blog-section .text-lg {
        font-size: 0.9375rem;
    }

    .blog-section .text-sm {
        font-size: 0.8125rem;
    }
}

/* === SMALL MOBILE (376px - 480px) === */
@media (min-width: 376px) and (max-width: 480px) {

    .blog-section h1,
    .blog-section .font-sans.text-3xl {
        font-size: 1.625rem;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    .blog-section h2,
    .blog-section .blog-h2 {
        font-size: 1.1875rem;
        margin-top: 1.25em;
        margin-bottom: 0.5em;
    }

    .blog-section h3,
    .blog-section .text-xl {
        font-size: 1.0625rem;
    }

    .blog-section p,
    .blog-section .blog-content {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    .blog-section .text-lg {
        font-size: 0.9375rem;
    }

    .blog-section .text-sm {
        font-size: 0.8125rem;
    }

    .blog-section .text-xs {
        font-size: 0.6875rem;
    }

    /* Comment section */
    .blog-section textarea,
    .blog-section input {
        font-size: 16px;
        /* Prevents iOS zoom */
    }
}

/* === EXTRA SMALL MOBILE (< 375px) === */
@media (max-width: 375px) {

    .blog-section h1,
    .blog-section .font-sans.text-3xl {
        font-size: 1.375rem;
        line-height: 1.3;
        letter-spacing: -0.01em;
    }

    .blog-section h2,
    .blog-section .blog-h2 {
        font-size: 1.0625rem;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }

    .blog-section h3,
    .blog-section .text-xl {
        font-size: 1rem;
    }

    .blog-section p,
    .blog-section .blog-content {
        font-size: 0.875rem;
        line-height: 1.6;
    }

    .blog-section .text-lg {
        font-size: 0.875rem;
    }

    .blog-section .text-sm {
        font-size: 0.75rem;
    }

    .blog-section .text-xs {
        font-size: 0.625rem;
    }

    /* Prevent zoom on input focus (iOS) */
    .blog-section textarea,
    .blog-section input {
        font-size: 16px;
    }

    /* Sidebar recent posts titles */
    .blog-section .flex.gap-3 h4,
    .blog-section .line-clamp-2 {
        font-size: 0.8125rem;
        line-height: 1.35;
    }
}

/* === TINY SCREENS (< 320px) === */
@media (max-width: 319px) {

    .blog-section h1,
    .blog-section .font-sans.text-3xl {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    .blog-section h2,
    .blog-section .blog-h2 {
        font-size: 1rem;
    }

    .blog-section p,
    .blog-section .blog-content {
        font-size: 0.8125rem;
        line-height: 1.55;
    }

    .blog-section .text-lg {
        font-size: 0.8125rem;
    }

    .blog-section .text-sm {
        font-size: 0.6875rem;
    }
}

/* === BUTTON & TAG FONT SIZES === */

/* Share buttons */
.blog-section button,
.blog-section .h-9 {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
}

/* Tags/Badges */
.blog-section [class*="rounded-full"][class*="px-"] {
    font-size: clamp(0.6875rem, 1.8vw, 0.75rem);
    padding: 0.25rem 0.625rem;
}

/* Navigation links (Previous/Next post) */
.blog-section .group h4,
.blog-section a h4 {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.4;
}

/* === PRINT STYLES === */

@media print {
    .blog-section .lg\\:col-span-1 {
        display: none;
    }

    .blog-section .grid.lg\\:grid-cols-3 {
        display: block;
    }

    .blog-section h1 {
        font-size: 24pt;
    }

    .blog-section p {
        font-size: 11pt;
        line-height: 1.5;
    }
}
/* ===============================================
   RICHER EDITOR CONTENT STYLES
   Comprehensive styling for all RichEditor output
   =============================================== */

/* --- HEADINGS --- */
.blog-section .blog-content h1,
.blog-section .blog-content h2,
.blog-section .blog-content h3,
.blog-section .blog-content h4,
.blog-section .blog-content h5,
.blog-section .blog-content h6 {
    font-family: Inter, sans-serif;
    color: rgb(21, 34, 176);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

.blog-section .blog-content h1:first-child,
.blog-section .blog-content h2:first-child,
.blog-section .blog-content h3:first-child {
    margin-top: 0;
}

.blog-section .blog-content h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.blog-section .blog-content h2 {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
}

.blog-section .blog-content h3 {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
}

.blog-section .blog-content h4 {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.blog-section .blog-content h5 {
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
}

.blog-section .blog-content h6 {
    font-size: clamp(0.875rem, 1.8vw, 1rem);
    color: rgb(20, 24, 76);
}

/* --- PARAGRAPHS --- */
.blog-section .blog-content p {
    font-family: Inter, sans-serif;
    color: rgb(20, 24, 76);
    line-height: 1.8;
    margin-bottom: 1.25em;
    font-size: inherit;
}

.blog-section .blog-content p:last-child {
    margin-bottom: 0;
}

/* --- LINKS --- */
.blog-section .blog-content a {
    color: rgb(21, 34, 176);
    text-decoration: underline;
    text-decoration-color: rgba(21, 34, 176, 0.3);
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}

.blog-section .blog-content a:hover {
    color: rgb(50, 80, 220);
    text-decoration-color: rgba(50, 80, 220, 0.5);
}

/* --- LISTS --- */
.blog-section .blog-content ul,
.blog-section .blog-content ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}

.blog-section .blog-content ul {
    list-style-type: disc;
}

.blog-section .blog-content ol {
    list-style-type: decimal;
}

.blog-section .blog-content li {
    font-family: Inter, sans-serif;
    color: rgb(20, 24, 76);
    line-height: 1.7;
    margin-bottom: 0.5em;
}

.blog-section .blog-content li:last-child {
    margin-bottom: 0;
}

.blog-section .blog-content ul ul,
.blog-section .blog-content ol ul,
.blog-section .blog-content ul ol,
.blog-section .blog-content ol ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.blog-section .blog-content ul ul {
    list-style-type: circle;
}

.blog-section .blog-content ul ul ul {
    list-style-type: square;
}

/* --- BLOCKQUOTE --- */
.blog-section .blog-content blockquote {
    border-left: 4px solid rgb(21, 34, 176);
    background-color: rgba(21, 34, 176, 0.04);
    padding: 1em 1.5em;
    margin: 1.5em 0;
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
}

.blog-section .blog-content blockquote p {
    font-style: inherit;
    margin-bottom: 0.5em;
}

.blog-section .blog-content blockquote p:last-child {
    margin-bottom: 0;
}

/* --- CODE --- */
.blog-section .blog-content code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    background-color: rgba(21, 34, 176, 0.08);
    color: rgb(21, 34, 176);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

.blog-section .blog-content pre {
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 1.25em;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5em 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
}

.blog-section .blog-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
    border-radius: 0;
}

/* --- TABLES --- */
.blog-section .blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.9375rem;
}

.blog-section .blog-content thead {
    background-color: rgb(21, 34, 176);
    color: white;
}

.blog-section .blog-content th {
    font-weight: 600;
    text-align: left;
    padding: 0.75em 1em;
    border: 1px solid rgb(21, 34, 176);
}

.blog-section .blog-content tbody tr {
    border-bottom: 1px solid rgb(229, 231, 235);
}

.blog-section .blog-content tbody tr:nth-child(even) {
    background-color: rgba(21, 34, 176, 0.03);
}

.blog-section .blog-content td {
    padding: 0.75em 1em;
    border: 1px solid rgb(229, 231, 235);
    color: rgb(20, 24, 76);
}

/* --- IMAGES --- */
.blog-section .blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5em 0;
}

.blog-section .blog-content figure {
    margin: 1.5em 0;
}

.blog-section .blog-content figcaption {
    font-size: 0.875rem;
    color: rgb(107, 114, 128);
    text-align: center;
    margin-top: 0.5em;
    font-style: italic;
}

/* --- HORIZONTAL RULE --- */
.blog-section .blog-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(21, 34, 176, 0.3), transparent);
    margin: 2em 0;
}

/* --- TEXT FORMATTING --- */
.blog-section .blog-content em {
    font-style: italic;
}

.blog-section .blog-content u {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-section .blog-content s {
    text-decoration: line-through;
}

.blog-section .blog-content sub {
    vertical-align: sub;
    font-size: 0.75em;
}

.blog-section .blog-content sup {
    vertical-align: super;
    font-size: 0.75em;
}

/* --- RESPONSIVE FOR RICH EDITOR CONTENT --- */
@media (max-width: 768px) {
    .blog-section .blog-content h1 {
        font-size: 1.75rem;
    }
    
    .blog-section .blog-content h2 {
        font-size: 1.5rem;
        margin-top: 1.25em;
    }
    
    .blog-section .blog-content h3 {
        font-size: 1.25rem;
    }
    
    .blog-section .blog-content ul,
    .blog-section .blog-content ol {
        padding-left: 1.25em;
    }
    
    .blog-section .blog-content table {
        font-size: 0.875rem;
    }
    
    .blog-section .blog-content th,
    .blog-section .blog-content td {
        padding: 0.5em 0.75em;
    }
    
    .blog-section .blog-content pre {
        padding: 1em;
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .blog-section .blog-content h1 {
        font-size: 1.5rem;
    }
    
    .blog-section .blog-content h2 {
        font-size: 1.25rem;
    }
    
    .blog-section .blog-content h3 {
        font-size: 1.125rem;
    }
    
    .blog-section .blog-content blockquote {
        padding: 0.75em 1em;
    }
    
    .blog-section .blog-content pre {
        padding: 0.875em;
        font-size: 0.75rem;
    }
}