/*
Theme Name: DevPulse
Theme URI: https://tamdd.dev
Author: TamDD
Author URI: https://tamdd.dev
Description: A modern, light-themed WordPress theme for Developers and AI enthusiasts.
Version: 2.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
*/

/* ========================================
   BASE STYLES & DESIGN TOKENS
   Thiết lập các quy tắc chung cho toàn site
   ======================================== */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   SPACING SYSTEM - Thống nhất toàn site
   Sử dụng scale 4px: 4, 8, 12, 16, 24, 32, 48, 64
   ======================================== */
:root {
    /* Spacing tokens */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */

    /* Card padding - thống nhất cho tất cả cards */
    --card-padding: 1rem;  /* 16px */

    /* Section spacing */
    --section-gap: 2rem;   /* 32px - khoảng cách giữa các elements trong section */

    /* Grid gap */
    --grid-gap: 1.5rem;    /* 24px */
}

/* ========================================
   LINK STYLES - Thống nhất toàn site
   Primary: #0284c7 (Sky 600)
   Hover: #0369a1 (Sky 700)
   ======================================== */

/* Reset tất cả links - không gạch chân */
a {
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Link mặc định trong content */
.wp-block-group a:not(.wp-block-button__link),
.entry-content a:not(.wp-block-button__link),
article a:not(.wp-block-button__link) {
    color: #0284c7;
    text-decoration: none;
}

.wp-block-group a:not(.wp-block-button__link):hover,
.entry-content a:not(.wp-block-button__link):hover,
article a:not(.wp-block-button__link):hover {
    color: #0369a1;
}

/* Navigation links - Màu tối, hover thành primary */
nav a,
.wp-block-navigation a {
    color: #334155;
    text-decoration: none;
}

nav a:hover,
.wp-block-navigation a:hover {
    color: #0284c7;
}

/* Card title links - Màu tối (#1e293b), hover thành primary (#0284c7)
   QUAN TRỌNG: Thống nhất cho TẤT CẢ title links trong cards
   Bao gồm: discover-card, article-card, và các heading links */
.discover-title a,
.discover-card .wp-block-post-title a,
.article-card a,
.article-card .wp-block-post-title a,
.wp-block-post-template .wp-block-post-title a,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #1e293b !important;
    text-decoration: none !important;
}

.discover-title a:hover,
.discover-card .wp-block-post-title a:hover,
.article-card a:hover,
.article-card .wp-block-post-title a:hover,
.wp-block-post-template .wp-block-post-title a:hover,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #0284c7 !important;
}

/* Section "View All" links */
.discover-section > .wp-block-group a,
.featured-apps-section > .wp-block-group a,
.latest-articles-section > .wp-block-group a {
    color: #0284c7;
    font-weight: 500;
}

.discover-section > .wp-block-group a:hover,
.featured-apps-section > .wp-block-group a:hover,
.latest-articles-section > .wp-block-group a:hover {
    color: #0369a1;
}

/* Category/Tag links */
.discover-category a,
.post-category-badge a {
    color: #0284c7;
    text-decoration: none;
}

.discover-category a:hover,
.post-category-badge a:hover {
    color: #0369a1;
}

/* Footer links */
footer a,
.wp-block-template-part a {
    color: #64748b;
    text-decoration: none;
}

footer a:hover,
.wp-block-template-part a:hover {
    color: #0284c7;
}

/* Focus state cho accessibility */
a:focus-visible {
    outline: 2px solid #0284c7;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ========================================
   FIX WordPress Default Margin
   WordPress mặc định có 2 rules gây spacing 24px:
   1. :root :where(.is-layout-flow) > * { margin-block-start: 24px; }
   2. :where(.wp-site-blocks) > * { margin-block-start: 24px; }
   => Override cả 2 để xóa hoàn toàn
   ======================================== */
:root :where(.is-layout-flow) > *,
:where(.wp-site-blocks) > * {
    margin-block-start: 0 !important;
}

/* Grid gap override */
:root :where(.is-layout-grid) {
    gap: 18px !important;
}

/* Giữ lại margin cho các elements cần thiết */
:root :where(.is-layout-flow) > p + p,
:root :where(.is-layout-flow) > .wp-block-paragraph + .wp-block-paragraph {
    margin-block-start: 1rem !important; /* Paragraph cách nhau 1rem */
}

/* Headings trong content cần margin top */
:root :where(.is-layout-flow) > h1,
:root :where(.is-layout-flow) > h2,
:root :where(.is-layout-flow) > h3,
:root :where(.is-layout-flow) > h4,
:root :where(.is-layout-flow) > h5,
:root :where(.is-layout-flow) > h6,
:root :where(.is-layout-flow) > .wp-block-heading {
    margin-block-start: 1.5rem !important;
}

/* Các block đặc biệt cần margin */
:root :where(.is-layout-flow) > .wp-block-separator {
    margin-block-start: 2rem !important;
}

/* Entry content (bài viết) giữ margin cho readability */
.entry-content.is-layout-flow > * + * {
    margin-block-start: 1rem !important;
}

/* Glassmorphism Utilities - Light Theme */
.glass-effect {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.12), 0 4px 20px rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.2);
}

/* Text Gradients */
.text-gradient {
    background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* App Badges */
.app-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.app-badge-mobile {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.app-badge-web {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.app-badge-ai {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* ========================================
   HERO SECTION - Premium Design
   ======================================== */

/* Xóa margin mặc định của WordPress blocks trong hero */
.hero-section.wp-block-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Hero Container với animated mesh gradient background */
.hero-section {
    position: relative;
    min-height: auto; /* Bỏ min-height cố định */
    margin-top: 0 !important; /* Sát header hoàn toàn */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 !important;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(14, 165, 233, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 90% 80%, rgba(139, 92, 246, 0.12), transparent),
        radial-gradient(ellipse 50% 30% at 10% 60%, rgba(6, 182, 212, 0.1), transparent),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* Animated gradient orbs */
.hero-section::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 15%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0) 70%);
    border-radius: 50%;
    filter: blur(40px);
    animation: heroOrb1 15s ease-in-out infinite;
    pointer-events: none;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 15%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0) 70%);
    border-radius: 50%;
    filter: blur(40px);
    animation: heroOrb2 18s ease-in-out infinite;
    pointer-events: none;
}

/* Grid pattern overlay */
.hero-section .hero-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 165, 233, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
    pointer-events: none;
}

/* Floating geometric shapes */
.hero-floating-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-shape {
    position: absolute;
    opacity: 0.6;
}

.hero-shape-1 {
    top: 15%;
    left: 10%;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(14, 165, 233, 0.3);
    border-radius: 12px;
    animation: floatShape 8s ease-in-out infinite;
    transform: rotate(15deg);
}

.hero-shape-2 {
    top: 25%;
    right: 15%;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-radius: 50%;
    animation: floatShape 10s ease-in-out infinite reverse;
}

.hero-shape-3 {
    bottom: 30%;
    left: 8%;
    width: 80px;
    height: 80px;
    border: 2px solid rgba(6, 182, 212, 0.2);
    border-radius: 50%;
    animation: floatShape 12s ease-in-out infinite;
}

.hero-shape-4 {
    bottom: 20%;
    right: 10%;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, transparent 100%);
    border-radius: 8px;
    animation: floatShape 9s ease-in-out infinite;
    transform: rotate(-10deg);
}

.hero-shape-5 {
    top: 50%;
    left: 5%;
    width: 20px;
    height: 20px;
    background: rgba(139, 92, 246, 0.3);
    border-radius: 50%;
    animation: floatShape 6s ease-in-out infinite;
}

.hero-shape-6 {
    top: 40%;
    right: 8%;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(14, 165, 233, 0.25);
    transform: rotate(45deg);
    animation: floatShape 7s ease-in-out infinite reverse;
}

/* Thêm các shapes mới để trang trí phong phú hơn */
.hero-shape-7 {
    top: 60%;
    left: 12%;
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, transparent 100%);
    border-radius: 50%;
    animation: floatShape 11s ease-in-out infinite;
}

.hero-shape-8 {
    top: 70%;
    right: 18%;
    width: 45px;
    height: 45px;
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
    transform: rotate(30deg);
    animation: floatShape 9s ease-in-out infinite reverse;
}

.hero-shape-9 {
    top: 35%;
    left: 18%;
    width: 15px;
    height: 15px;
    background: rgba(14, 165, 233, 0.4);
    border-radius: 50%;
    animation: floatShape 5s ease-in-out infinite;
}

.hero-shape-10 {
    top: 55%;
    right: 5%;
    width: 35px;
    height: 35px;
    border: 2px solid rgba(6, 182, 212, 0.3);
    border-radius: 50%;
    animation: floatShape 13s ease-in-out infinite;
}

.hero-shape-11 {
    top: 10%;
    left: 25%;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(14, 165, 233, 0.1) 100%);
    border-radius: 4px;
    transform: rotate(15deg);
    animation: floatShape 8s ease-in-out infinite reverse;
}

.hero-shape-12 {
    top: 75%;
    right: 25%;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(14, 165, 233, 0.2);
    border-radius: 50%;
    animation: floatShape 10s ease-in-out infinite;
}

/* Hero Content Container */
.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
}

.hero-content > * {
    margin: 0 !important;
}

.hero-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.95rem, 2vw, 1.5rem);
    width: 100%;
    padding: clamp(0.85rem, 2vw, 1rem) 0;
    box-sizing: border-box;
}

.hero-main > * {
    margin: 0 !important;
}

/* Hero Badge / Tag */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 auto !important;
    color: #0284c7;
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.1);
    animation: fadeInDown 0.6s ease-out;
}

.hero-badge::before {
    content: '✨';
}

/* Hero Title - Giảm size để nằm 1 dòng */
.hero-title {
    font-size: clamp(2rem, 4.5vw, 3.5rem) !important; /* Giảm size từ 5rem xuống 3.5rem */
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    margin: 0 !important;
    animation: fadeInUp 0.8s ease-out;
}

/* Animated gradient text */
.hero-title .text-gradient {
    background: linear-gradient(
        135deg,
        #0ea5e9 0%,
        #8b5cf6 25%,
        #ec4899 50%,
        #8b5cf6 75%,
        #0ea5e9 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 5s linear infinite;
}

/* Hero Subtitle - Giới hạn 2 dòng */
.hero-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.25rem) !important; /* Giảm size nhẹ */
    color: #64748b;
    max-width: 680px;
    margin: 0 auto !important;
    line-height: 1.6;
    animation: fadeInUp 0.8s ease-out 0.1s both;
}

/* Hero Buttons Container */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 !important;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-buttons .wp-block-button {
    margin: 0 !important;
}

/* Hero Buttons - Shared base */
.hero-btn-primary .wp-block-button__link,
.hero-btn-secondary .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.05rem;
    padding: 0.9rem 2.2rem !important;
    border-radius: 9999px !important;
    border: none !important;
    transition: all 0.3s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Primary Button - Blue → Purple gradient */
.hero-btn-primary .wp-block-button__link {
    background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.35);
}

.hero-btn-primary .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.45);
}

/* Secondary Button - Cyan → Teal gradient */
.hero-btn-secondary .wp-block-button__link {
    background: linear-gradient(135deg, #06b6d4 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.35);
}

.hero-btn-secondary .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.45);
}

/* Hero Stats / Trust Indicators */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 130px));
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: clamp(0.5rem, 1.2vw, 0.9rem);
    margin: 0 !important;
    padding: clamp(0.9rem, 2vw, 1rem) 0 !important;
    border-top: 1px solid rgba(14, 165, 233, 0.1);
    animation: fadeInUp 0.8s ease-out 0.4s both;
    width: min(100%, 700px);
    margin-inline: auto !important;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    width: 100%;
    min-width: 0;
}

.hero-stat-value {
    display: block;
    font-size: 2.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-stat-label {
    font-size: 0.95rem;
    color: #64748b;
    font-weight: 500;
    margin-top: 0;
}

/* Tech Stack Icons */
.hero-tech-stack {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
    opacity: 0.7;
    animation: fadeInUp 0.8s ease-out 0.5s both;
}

.hero-tech-icon {
    width: 32px;
    height: 32px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.hero-tech-icon:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}


/* Keyframe Animations */
@keyframes heroOrb1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(50px, 30px) scale(1.1);
    }
    50% {
        transform: translate(20px, 60px) scale(0.95);
    }
    75% {
        transform: translate(-30px, 20px) scale(1.05);
    }
}

@keyframes heroOrb2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(-40px, -20px) scale(1.05);
    }
    50% {
        transform: translate(-20px, 40px) scale(1.1);
    }
    75% {
        transform: translate(30px, 10px) scale(0.95);
    }
}

@keyframes floatShape {
    0%, 100% {
        transform: translateY(0) rotate(var(--rotation, 0deg));
    }
    50% {
        transform: translateY(-20px) rotate(calc(var(--rotation, 0deg) + 5deg));
    }
}

@keyframes gradientFlow {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scrollBounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) translateY(10px);
        opacity: 0.5;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section {
        min-height: auto;
        padding: 0 !important;
    }

    .hero-content {
        padding: 0 1.25rem;
    }

    .hero-main {
        gap: 0.85rem;
        padding: 0.7rem 0 !important;
    }

    .hero-shape {
        display: none;
    }

    .hero-floating-shapes {
        display: none;
    }

    .hero-section::before,
    .hero-section::after {
        display: none;
    }

    .hero-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.5rem;
        padding: 0.7rem 0 !important;
        width: 100%;
    }

    .hero-stat-value {
        font-size: 1.35rem;
    }

    .hero-stat-label {
        font-size: 0.75rem;
    }

    .hero-buttons {
        flex-direction: row;
        justify-content: center;
        gap: 0.65rem;
    }

    /* Hero buttons mobile - nhỏ hơn, giữ gradient */
    .hero-buttons .wp-block-button {
        flex: 0 0 auto;
    }

    .hero-btn-primary .wp-block-button__link,
    .hero-btn-secondary .wp-block-button__link {
        padding: 0.55rem 1.25rem !important;
        font-size: 0.82rem !important;
    }

    .hero-badge {
        font-size: 0.72rem;
        padding: 0.3rem 0.75rem;
    }

    .hero-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    }

    .hero-subtitle {
        font-size: 0.95rem !important;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(30px, 30px);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Staggered animations cho các elements */
.animate-fade-in:nth-child(1) { animation-delay: 0s; }
.animate-fade-in:nth-child(2) { animation-delay: 0.1s; }
.animate-fade-in:nth-child(3) { animation-delay: 0.2s; }
.animate-fade-in:nth-child(4) { animation-delay: 0.3s; }

/* Scrollbar - Light Theme */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ========================================
   HOMEPAGE SECTIONS
   ======================================== */

/* ========================================
   DISCOVER SECTION - CLEAN GRID LAYOUT
   - Grid 3 cột đều nhau trên desktop
   - Cards đồng nhất, hình 16:9
   - Thiết kế đơn giản, chuyên nghiệp
   ======================================== */

/* Section container */
.discover-section {
    background: #f8fafc;
}

.hero-section + .discover-section {
    padding-top: clamp(0.55rem, 1.5vw, 0.9rem) !important;
}

/* Grid layout - 3 cột đều */
.discover-grid .discover-cards {
    gap: 1.5rem;
}

/* Card container - Đảm bảo chiều cao đồng đều trong grid */
.discover-card,
.article-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.discover-card:hover,
.article-card:hover {
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
    transform: translateY(-6px);
}

/* Card content phải fill hết không gian còn lại */
.discover-card .card-content,
.article-card .card-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Featured Image - Enforce 16:9 */
.discover-card .wp-block-post-featured-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
}

.discover-card .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.discover-card:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

/* Category badge - Giống hệt Latest Articles (.post-category-badge) */
.discover-category {
    display: inline-flex;
}

.discover-category a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: 9999px;
    color: #0284c7 !important;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.03em;
    transition: all 0.3s ease;
}

.discover-category a:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
}

/* Title - Giới hạn 2 dòng */
.discover-title,
.article-card .wp-block-post-title,
.card-content .wp-block-post-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.discover-title a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.discover-title a:hover {
    color: #0284c7;
}

/* ========================================
   CARD CONTENT - Spacing đồng nhất
   Vùng 1 = Vùng 2 = Vùng 3 = 0.5rem
   Vùng 4 = Vùng 5 = 0.75rem
   ======================================== */

/* Card content - Override padding và đảm bảo flex layout */
.card-content,
.card-content.wp-block-group,
.discover-card .card-content,
.article-card .card-content {
    padding: 0.5rem 1rem !important; /* Vùng 1 = 0.5rem (top) */
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0; /* Fix flex overflow issues */
}

/* Title - không margin, thêm padding top */
.card-content .wp-block-post-title {
    margin: 0 !important;
    padding-top: 5px;
}

/* Excerpt - margin top = Vùng 2, margin bottom = Vùng 3 */
.card-excerpt {
    margin-top: 0.5rem !important;  /* Vùng 2 */
    margin-bottom: 0.5rem !important; /* Vùng 3 */
}

.card-excerpt .wp-block-post-excerpt__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--wp--preset--color--muted, #64748b);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* Meta row - LUÔN ở đáy card */
.card-meta-row,
.card-meta-row.wp-block-group {
    margin-top: auto !important;
    padding: 8px 0px 0px 0px !important;
    border-top: 1px solid #f1f5f9;
    align-items: center;
}

/* Đảm bảo card container là flex column */
.discover-card.wp-block-group,
.article-card.wp-block-group {
    display: flex !important;
    flex-direction: column !important;
}

/* Meta left - Date và Views */
.card-meta-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

/* Icon styling trong meta */
.devpulse-post-date,
.devpulse-view-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    font-size: 0.75rem !important;
    color: #64748b !important;
    white-space: nowrap;
}

.devpulse-post-date svg,
.devpulse-view-count svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .discover-grid .discover-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .discover-grid .discover-cards {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
}

/* === LEGACY SUPPORT === */
/* Giữ lại cho các section khác có thể đang dùng */
.bento-card {
    overflow: hidden;
    height: 100%;
}

.bento-card .wp-block-post-featured-image {
    overflow: hidden;
}

.bento-card .wp-block-post-featured-image img {
    transition: transform 0.5s ease;
}

.bento-card:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

/* ========================================
   ARTICLE CARD - Featured Image
   ======================================== */

/* Featured Image - Enforce 16:9 */
.article-card .wp-block-post-featured-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
}

.article-card .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.article-card:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

/* Post Category Badge */
.post-category-badge {
    display: inline-flex;
}

.post-category-badge a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: 9999px;
    color: #0284c7 !important;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.post-category-badge a:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
}

/* Category Pills cho Browse Topics */
.category-pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.category-pills li {
    margin: 0;
}

.category-pills a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    color: #334155;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.category-pills a:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.25);
}

/* Post count trong category */
.category-pills .count,
.category-pills .wp-block-categories__count {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.8em;
    font-weight: 700;
}

.category-pills a:hover .count,
.category-pills a:hover .wp-block-categories__count {
    background: rgba(255, 255, 255, 0.2);
}

/* CTA Section với gradient */
.cta-section {
    background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
    position: relative;
    overflow: hidden;
}

/* Decorative pattern cho CTA */
.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* CTA Button */
.cta-btn .wp-block-button__link {
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    background: transparent !important;
    transition: all 0.3s ease;
}

.cta-btn .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
}

/* Featured Apps Section */
.featured-apps-section {
    position: relative;
}

/* ========================================
   BROWSE BY TOPIC SECTION - Hero Style
   Gradient background + animated orbs + grid overlay + floating shapes
   ======================================== */
.browse-topics-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(14, 165, 233, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 90% 80%, rgba(139, 92, 246, 0.12), transparent),
        radial-gradient(ellipse 50% 30% at 10% 60%, rgba(6, 182, 212, 0.1), transparent),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* Grid overlay - Lưới nền */
.browse-topics-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 165, 233, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Container cho content và floating shapes - position relative để shapes căn theo */
.browse-topics-content {
    position: relative;
    z-index: 1;
}

/* Floating shapes container - căn theo .browse-topics-content (1400px) */
.browse-floating-shapes {
    position: absolute;
    inset: 0;
    overflow: visible; /* Cho phép shapes hiển thị ra ngoài nếu cần */
    pointer-events: none;
    z-index: 0;
}

.browse-shape {
    position: absolute;
    opacity: 0.6;
}

/*
 * Phân bổ 8 shapes đều trên 4 vùng theo chiều ngang (sát biên):
 * - 4 vùng: 0-25%, 25-50%, 50-75%, 75-100%
 * - Hàng trên: 3%, 34%, 66%, 97% (sát biên 2 đầu)
 * - Hàng dưới: 15%, 42%, 58%, 85% (xen kẽ giữa hàng trên)
 */

/* Shape 1 - Vùng 1, trên, sát biên trái 3% */
.browse-shape-1 {
    top: 18%;
    left: 3%;
    width: 55px;
    height: 55px;
    border: 2px solid rgba(14, 165, 233, 0.3);
    border-radius: 12px;
    animation: floatShape 8s ease-in-out infinite;
    transform: rotate(15deg);
}

/* Shape 2 - Vùng 2, trên, 34% */
.browse-shape-2 {
    top: 15%;
    left: 34%;
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-radius: 50%;
    animation: floatShape 10s ease-in-out infinite reverse;
}

/* Shape 3 - Vùng 3, trên, 66% */
.browse-shape-3 {
    top: 20%;
    left: 66%;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(6, 182, 212, 0.25);
    border-radius: 8px;
    transform: rotate(45deg);
    animation: floatShape 12s ease-in-out infinite;
}

/* Shape 4 - Vùng 4, trên, sát biên phải 97% */
.browse-shape-4 {
    top: 16%;
    left: 97%;
    width: 30px;
    height: 30px;
    background: rgba(14, 165, 233, 0.2);
    border-radius: 50%;
    animation: floatShape 9s ease-in-out infinite;
    transform: translateX(-100%); /* Đảm bảo không bị tràn ra ngoài */
}

/* Shape 5 - Vùng 1, dưới, 15% (xen kẽ với shape 1) */
.browse-shape-5 {
    bottom: 18%;
    left: 15%;
    width: 45px;
    height: 45px;
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: 50%;
    animation: floatShape 6s ease-in-out infinite;
}

/* Shape 6 - Vùng 2, dưới, 42% (xen kẽ với shape 2) */
.browse-shape-6 {
    bottom: 22%;
    left: 42%;
    width: 50px;
    height: 50px;
    border: 2px solid rgba(14, 165, 233, 0.25);
    border-radius: 8px;
    transform: rotate(-15deg);
    animation: floatShape 7s ease-in-out infinite reverse;
}

/* Shape 7 - Vùng 3, dưới, 58% (xen kẽ với shape 3) */
.browse-shape-7 {
    bottom: 20%;
    left: 58%;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, transparent 100%);
    border-radius: 50%;
    animation: floatShape 11s ease-in-out infinite;
}

/* Shape 8 - Vùng 4, dưới, 85% (xen kẽ với shape 4) */
.browse-shape-8 {
    bottom: 25%;
    left: 85%;
    width: 45px;
    height: 45px;
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    transform: rotate(20deg);
    animation: floatShape 9s ease-in-out infinite reverse;
}

/* Latest Articles Section - Nền giống Discover */
.latest-articles-section {
    position: relative;
    background: #f8fafc;
}

/* Responsive Grid cho các sections */
@media (max-width: 768px) {
    .bento-grid .bento-grid-template > li:first-child {
        grid-column: span 1;
    }

    .bento-grid .bento-grid-template > li:first-child .bento-card {
        display: block;
    }

    .bento-grid .bento-grid-template > li:first-child .wp-block-post-featured-image {
        border-radius: 20px 20px 0 0 !important;
    }

    .category-pills {
        gap: 0.5rem;
    }

    .category-pills a {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
}

/* ========================================
   HEADER STYLES
   ======================================== */

/* Header Container - Fixed với glass effect */
.devpulse-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    min-height: 60px;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: nowrap;
}

/* Khi có admin bar (đăng nhập) - đẩy header xuống */
.admin-bar .devpulse-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .devpulse-header {
        top: 46px !important;
    }
}

/* Tạo khoảng trống cho content không bị header che */
body {
    --devpulse-header-offset: 60px;
    padding-top: var(--devpulse-header-offset);
}

body.admin-bar {
    --devpulse-header-offset: 92px; /* 60px header + 32px admin bar */
}

/* Hiệu ứng line gradient dưới header - Light Theme */
.devpulse-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(2, 132, 199, 0.2) 20%,
        rgba(2, 132, 199, 0.4) 50%,
        rgba(2, 132, 199, 0.2) 80%,
        transparent 100%
    );
}

/* Shadow nhẹ phía dưới header - Light Theme */
.devpulse-header::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.03) 0%,
        transparent 100%
    );
    pointer-events: none;
}

/* Logo - 55px cao, căn giữa theo chiều cao header */
.devpulse-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    min-width: max-content;
}

.devpulse-logo img {
    height: 55px !important;
    width: auto !important;
    max-height: 55px !important;
    object-fit: contain;
}

/* Navigation Menu Styles */
.devpulse-nav {
    flex: 1;
    justify-content: center !important;
    min-width: 0;
}

.devpulse-nav .wp-block-navigation__container {
    gap: 0.5rem;
    justify-content: center;
}

.devpulse-nav .wp-block-navigation-item__content {
    color: #334155;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    font-size: 0.92rem;
    line-height: 1.25;
}

.devpulse-nav .wp-block-navigation-item__content:hover {
    color: #0f172a;
    background: rgba(2, 132, 199, 0.08);
}

/* Active menu item */
.devpulse-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
    color: #0284c7;
    background: rgba(2, 132, 199, 0.1);
}

/* Navigation submenu - Light Theme */
.devpulse-nav .wp-block-navigation__submenu-container {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 0.5rem;
    min-width: 200px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-top: 0.5rem;
}

.devpulse-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: #334155 !important;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    display: block;
}

.devpulse-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: #0f172a !important;
    background: rgba(2, 132, 199, 0.1) !important;
}

/* Search Box Styles - Light Theme */
.devpulse-search {
    --wp--preset--color--contrast: #334155;
    flex: 0 0 200px;
    width: 200px;
}

.devpulse-search .wp-block-search__inside-wrapper {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    height: 32px;
    padding: 0 !important;
}

.devpulse-search .wp-block-search__inside-wrapper:focus-within {
    background: #ffffff !important;
    border-color: rgba(2, 132, 199, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.devpulse-search .wp-block-search__input {
    background: transparent !important;
    border: none !important;
    color: #334155 !important;
    padding: 0 0.75rem !important;
    font-size: 0.8rem;
    height: 30px !important;
    line-height: 30px !important;
    margin: 0 !important;
}

.devpulse-search .wp-block-search__input::placeholder {
    color: #94a3b8;
}

.devpulse-search .wp-block-search__button {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border: none !important;
    padding: 0 0.5rem !important;
    margin: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease;
    border-radius: 0 50px 50px 0 !important;
}

.devpulse-search .wp-block-search__button svg,
.devpulse-search .wp-block-search__button svg[width],
.devpulse-search .wp-block-search__button svg[height] {
    fill: #fff !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

.devpulse-search .wp-block-search__button:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
}

/* Mobile Menu Button - Light Theme */
.devpulse-nav .wp-block-navigation__responsive-container-open {
    color: #334155;
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0.5rem;
    border-radius: 14px;
    border: 1px solid rgba(191, 219, 254, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.92)),
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.15), transparent 52%);
    box-shadow:
        0 18px 44px -34px rgba(14, 116, 144, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.devpulse-nav .wp-block-navigation__responsive-container-open:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(224, 242, 254, 0.96)),
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.2), transparent 55%);
    border-color: rgba(125, 211, 252, 0.95);
    transform: translateY(-1px);
}

@media (max-width: 1200px) {
    .devpulse-header {
        padding-inline: 1.25rem;
        gap: 0.85rem;
    }

    .devpulse-nav .wp-block-navigation__container {
        gap: 0.25rem;
    }

    .devpulse-nav .wp-block-navigation-item__content {
        padding: 0.48rem 0.78rem;
        font-size: 0.88rem;
    }

    .devpulse-search {
        flex-basis: 180px;
        width: 180px;
    }
}

/* Responsive Header */
@media (max-width: 1024px) {

    .devpulse-nav .wp-block-navigation__responsive-container-open {
        display: inline-flex;
    }

    /* ============================
       MOBILE MENU OVERLAY - Redesign
       ============================ */

    /* Backdrop overlay - full screen, phủ cả admin bar */
    .devpulse-nav .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 100000 !important;
        background: rgba(15, 23, 42, 0.5) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        animation: menuFadeIn 0.25s ease-out;
    }

    /* Đảm bảo admin bar không đẩy overlay xuống */
    .admin-bar .devpulse-nav .wp-block-navigation__responsive-container.is-menu-open {
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    /* Ẩn header gradient line khi menu mở */
    .devpulse-header:has(.is-menu-open)::after,
    .devpulse-header:has(.is-menu-open)::before {
        display: none !important;
    }

    @keyframes menuFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes menuSlideIn {
        from { transform: translateX(-100%); }
        to { transform: translateX(0); }
    }

    /* Menu panel - full height, sát mép phải */
    .devpulse-nav .wp-block-navigation__responsive-dialog {
        width: min(320px, 80vw) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 auto 0 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border: none !important;
        border-right: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        box-shadow: 8px 0 40px rgba(15, 23, 42, 0.15) !important;
        outline: none !important;
        z-index: 100001 !important;
        overflow-x: hidden !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: menuSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Close button - góc trên phải */
    .devpulse-nav .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 0.6rem;
        right: 0.6rem;
        z-index: 10;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        background: #f8fafc;
        color: #334155;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .devpulse-nav .wp-block-navigation__responsive-container-close:hover {
        background: #fee2e2;
        border-color: #fca5a5;
        color: #dc2626;
    }

    /* Content container */
    .devpulse-nav .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 3rem 1rem 1.5rem !important;
        min-height: 100%;
    }

    /* Navigation container */
    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1px !important;
    }

    /* --- Menu items (cấp 1) --- */
    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
        display: flex !important;
        align-items: center;
        width: 100%;
        padding: 0.6rem 0.85rem !important;
        border-radius: 10px !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #1e293b !important;
        font-size: 0.92rem !important;
        font-weight: 600 !important;
        transition: all 0.2s ease;
        text-decoration: none !important;
    }

    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover {
        background: rgba(14, 165, 233, 0.06) !important;
        color: #0284c7 !important;
    }

    /* Active menu item */
    .devpulse-nav .wp-block-navigation__responsive-container-content .current-menu-item > .wp-block-navigation-item__content {
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(99, 102, 241, 0.06)) !important;
        color: #0284c7 !important;
    }

    /* Has submenu - parent items (section headers) */
    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
        font-weight: 700 !important;
        color: #0f172a !important;
        font-size: 0.72rem !important;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 0.85rem 0.85rem 0.3rem !important;
        border-radius: 0 !important;
    }

    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e2e8f0;
        margin-left: 0.75rem;
    }

    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child > .wp-block-navigation-item__content:hover {
        background: transparent !important;
        color: #0284c7 !important;
    }

    /* --- Submenu container --- */
    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0.1rem 0 0.35rem !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Submenu items */
    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding: 0.45rem 0.85rem 0.45rem 1.25rem !important;
        font-size: 0.88rem !important;
        font-weight: 500 !important;
        color: #475569 !important;
        border-radius: 8px !important;
        text-transform: none;
        letter-spacing: normal;
    }

    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #cbd5e1;
        margin-right: 0.65rem;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
        display: none !important;
    }

    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
        background: rgba(14, 165, 233, 0.06) !important;
        color: #0284c7 !important;
    }

    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::before {
        background: #0284c7;
        transform: scale(1.3);
    }

    /* Submenu icon (caret) ẩn đi */
    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
        display: none !important;
    }

    /* Ẩn mọi element thừa trong menu overlay */
    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-search,
    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-site-logo,
    .devpulse-nav .wp-block-navigation__responsive-container-content > *:not(.wp-block-navigation__container):not(.wp-block-navigation__responsive-container-close) {
        display: none !important;
    }

    /* Reset mọi border/outline/shadow thừa trong dialog */
    .devpulse-nav .wp-block-navigation__responsive-dialog *::before,
    .devpulse-nav .wp-block-navigation__responsive-dialog *::after {
        border: none !important;
        box-shadow: none !important;
    }

    .devpulse-nav .wp-block-navigation__responsive-container-content::after,
    .devpulse-nav .wp-block-navigation__responsive-container-content::before,
    .devpulse-nav .wp-block-navigation__responsive-dialog::after,
    .devpulse-nav .wp-block-navigation__responsive-dialog::before {
        display: none !important;
    }

    .devpulse-header,
    .devpulse-header.is-layout-flex,
    .devpulse-header.wp-block-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: stretch !important;
        min-height: 0;
        padding: 0.55rem 0.6rem !important;
        gap: 0.5rem;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 1px 0 rgba(226, 232, 240, 0.92), 0 10px 22px -24px rgba(15, 23, 42, 0.18) !important;
    }

    .devpulse-logo {
        flex: 0 0 auto;
        height: auto;
        min-height: 40px;
        padding: 0 !important;
        margin: 0 !important;
        margin-left: 0 !important;
    }

    .devpulse-logo img {
        height: 40px !important;
        max-height: 40px !important;
    }

    .devpulse-search {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0;
        order: 0;
    }

    .devpulse-nav {
        flex: 0 0 auto !important;
        order: 1;
    }

    /* Hamburger button nhỏ gọn hơn */
    .devpulse-nav .wp-block-navigation__responsive-container-open {
        width: 36px;
        height: 36px;
        padding: 0.35rem;
        border-radius: 10px;
    }

    .devpulse-search .wp-block-search__inside-wrapper {
        width: 100%;
        height: 36px;
        background: rgba(255, 255, 255, 0.94) !important;
        border-color: rgba(186, 230, 253, 0.92) !important;
    }

    .devpulse-search .wp-block-search__input {
        height: 34px !important;
        line-height: 34px !important;
        padding-inline: 0.75rem !important;
        font-size: 0.85rem;
    }

    .devpulse-search .wp-block-search__button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }
}

@media (max-width: 782px) {

    .devpulse-header,
    .devpulse-header.is-layout-flex,
    .devpulse-header.wp-block-group {
        padding: 0.45rem 0.5rem !important;
        gap: 0.4rem;
    }

    .devpulse-logo img {
        height: 44px !important;
        max-height: 44px !important;
    }

    .devpulse-nav .wp-block-navigation__responsive-dialog {
        width: calc(100vw - 1rem);
        min-height: calc(100dvh - 1rem);
        padding: 0.95rem;
        border-radius: 24px;
    }

    .devpulse-nav .wp-block-navigation__responsive-container-content {
        gap: 0.85rem;
    }

    .devpulse-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
        padding: 0.82rem 0.9rem;
        font-size: 0.96rem;
    }

    .devpulse-logo img {
        height: 36px !important;
        max-height: 36px !important;
    }

    .devpulse-search .wp-block-search__inside-wrapper {
        height: 32px;
        border-color: rgba(186, 230, 253, 0.9) !important;
    }

    .devpulse-search .wp-block-search__input {
        height: 30px !important;
        line-height: 30px !important;
        font-size: 0.8rem;
        padding-inline: 0.65rem !important;
    }

    .devpulse-search .wp-block-search__button {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
    }

    .devpulse-nav .wp-block-navigation__responsive-container-open {
        width: 32px;
        height: 32px;
        padding: 0.3rem;
        border-radius: 8px;
    }
}

/* ========================================
   FOOTER STYLES
   ======================================== */

/* Footer Container */
.devpulse-footer {
    border-top: 1px solid #e2e8f0;
}

/* Footer Links */
.devpulse-footer a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.devpulse-footer a:hover {
    color: #0284c7;
}

/* Footer Navigation Links - Thêm separator giữa các links */
.devpulse-footer .wp-block-group > p:not(:last-child)::after {
    content: '·';
    margin-left: 0.5rem;
    color: #cbd5e1;
}

/* Footer Separator */
.devpulse-footer .wp-block-separator {
    border: none !important;
    height: 1px !important;
    opacity: 1 !important;
}

/* Footer Social Icons */
.devpulse-footer .wp-block-social-link {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.devpulse-footer .wp-block-social-link:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}

/* Responsive Footer */
@media (max-width: 782px) {
    .devpulse-footer .wp-block-group.alignwide {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .devpulse-footer .wp-block-group.alignwide > .wp-block-group {
        justify-content: center !important;
    }

    /* Ẩn separator dots trên mobile */
    .devpulse-footer .wp-block-group > p::after {
        display: none;
    }
}

/* ========================================
   REDESIGN 2.0 - MODERN SECTIONS
   Thiết kế mới hiện đại, chuyên nghiệp
   ======================================== */

/* ========================================
   SECTION HEADER - Gradient Badge + Glow Style
   Modern design với gradient, glow và animations
   ======================================== */
.section-header {
    margin-bottom: 1.5rem;
    position: relative;
}

/* Badge container chứa icon + title */
.section-header .wp-block-group:first-child {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #8b5cf6 100%);
    padding: 0.2rem 1.25rem 0.2rem 1rem;
    border-radius: 50px;
    box-shadow:
        0 4px 15px rgba(99, 102, 241, 0.3),
        0 0 30px rgba(14, 165, 233, 0.15);
    position: relative;
    overflow: hidden;
}

/* Glow effect overlay */
.section-header .wp-block-group:first-child::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* Section icon với animation */
.section-icon {
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: sparkle 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

@keyframes sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
    }
    50% {
        transform: scale(1.1) rotate(5deg);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    }
}

/* Title trong badge */
.section-header .wp-block-group:first-child .wp-block-heading {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.section-subtitle {
    max-width: 600px;
    margin-top: 1rem;
}

/* View All Link - Modern pill style */
.view-all-link {
    position: relative;
}

.view-all-link a {
    color: #6366f1 !important;
    text-decoration: none;
    font-weight: 600 !important;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.view-all-link a:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    gap: 0.5rem;
    transform: translateY(-2px);
}

.view-all-link a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transition: transform 0.3s ease;
}

.view-all-link a:hover::after {
    transform: translateX(3px);
}

/* ========================================
   BENTO GRID - Discover Section
   Layout: 1 card lớn (chiếm 2 hàng) + 4 card nhỏ (auto height)
   Card nhỏ tự động chiều cao theo nội dung - responsive friendly
   ======================================== */
.bento-grid .bento-grid-template {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    /* Card nhỏ auto height theo nội dung */
    grid-template-rows: auto auto;
    gap: 1.25rem !important;
}

/* Tất cả grid items - width cố định theo grid column, không theo nội dung */
.bento-grid .bento-grid-template > li {
    min-width: 0; /* Ngăn nội dung làm stretch grid item */
    width: 100%;
}

/* Card đầu tiên - Featured (lớn hơn, chiếm 2 hàng, chiều cao theo 2 card nhỏ) */
.bento-grid .bento-grid-template > li:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
}

.bento-grid .bento-grid-template > li:first-child .bento-card {
    /* Chiều cao 100% theo grid row span - tự động bằng 2 card nhỏ + gap */
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Card đầu tiên - Hình ảnh width 100%, height auto để hiển thị đầy đủ */
.bento-grid .bento-grid-template > li:first-child .wp-block-post-featured-image {
    width: 100%;
    height: auto;
    flex-shrink: 0; /* Không co lại */
}

.bento-grid .bento-grid-template > li:first-child .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.bento-grid .bento-grid-template > li:first-child .card-title {
    font-size: 1.25rem !important;
}

.bento-grid .bento-grid-template > li:first-child .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Excerpt full không giới hạn */
.bento-grid .bento-grid-template > li:first-child .card-excerpt {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    margin-bottom: 0.5rem !important;
}

/* Content text fill phần trống */
.bento-grid .bento-grid-template > li:first-child .card-content-text {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #475569;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12;
    margin-top: 0.5rem;
    margin-bottom: 0.8rem; /* Khoảng cách với meta row ở dưới */
    text-align: justify; /* Canh đều 2 bên */
}

/* Ẩn hình và các element không cần thiết trong content */
.bento-grid .bento-grid-template > li:first-child .card-content-text img,
.bento-grid .bento-grid-template > li:first-child .card-content-text figure,
.bento-grid .bento-grid-template > li:first-child .card-content-text video,
.bento-grid .bento-grid-template > li:first-child .card-content-text iframe,
.bento-grid .bento-grid-template > li:first-child .card-content-text svg,
.bento-grid .bento-grid-template > li:first-child .card-content-text canvas,
.bento-grid .bento-grid-template > li:first-child .card-content-text table,
.bento-grid .bento-grid-template > li:first-child .card-content-text .wp-block-image,
.bento-grid .bento-grid-template > li:first-child .card-content-text .wp-block-embed,
.bento-grid .bento-grid-template > li:first-child .card-content-text .wp-block-table,
.bento-grid .bento-grid-template > li:first-child .card-content-text .wp-block-chart,
.bento-grid .bento-grid-template > li:first-child .card-content-text .wp-block-gallery,
.bento-grid .bento-grid-template > li:first-child .card-content-text .wp-block-columns,
.bento-grid .bento-grid-template > li:first-child .card-content-text .wp-block-buttons,
.bento-grid .bento-grid-template > li:first-child .card-content-text .wp-block-cover {
    display: none !important;
}

/* Reset tất cả định dạng trong content - hiển thị như text thuần */
.bento-grid .bento-grid-template > li:first-child .card-content-text p,
.bento-grid .bento-grid-template > li:first-child .card-content-text h1,
.bento-grid .bento-grid-template > li:first-child .card-content-text h2,
.bento-grid .bento-grid-template > li:first-child .card-content-text h3,
.bento-grid .bento-grid-template > li:first-child .card-content-text h4,
.bento-grid .bento-grid-template > li:first-child .card-content-text h5,
.bento-grid .bento-grid-template > li:first-child .card-content-text h6,
.bento-grid .bento-grid-template > li:first-child .card-content-text ul,
.bento-grid .bento-grid-template > li:first-child .card-content-text ol,
.bento-grid .bento-grid-template > li:first-child .card-content-text li,
.bento-grid .bento-grid-template > li:first-child .card-content-text blockquote,
.bento-grid .bento-grid-template > li:first-child .card-content-text pre,
.bento-grid .bento-grid-template > li:first-child .card-content-text code {
    margin: 0 0 0.3rem 0;
    padding: 0;
    font-size: inherit !important;
    font-weight: normal !important;
    font-style: normal !important;
    color: inherit !important;
    background: none !important;
    border: none !important;
    list-style: none !important;
    display: inline;
}

/* Reset bold, italic, links */
.bento-grid .bento-grid-template > li:first-child .card-content-text strong,
.bento-grid .bento-grid-template > li:first-child .card-content-text b,
.bento-grid .bento-grid-template > li:first-child .card-content-text em,
.bento-grid .bento-grid-template > li:first-child .card-content-text i,
.bento-grid .bento-grid-template > li:first-child .card-content-text a {
    font-weight: normal !important;
    font-style: normal !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* Ẩn tất cả div/span có thể gây tràn (charts, diagrams, etc) */
.bento-grid .bento-grid-template > li:first-child .card-content-text div,
.bento-grid .bento-grid-template > li:first-child .card-content-text span {
    display: inline !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
}

/* Card nhỏ - Chiều cao auto theo nội dung, giới hạn excerpt 2 dòng, ẩn content-text */

.bento-grid .bento-grid-template > li:not(:first-child) .card-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.bento-grid .bento-grid-template > li:not(:first-child) .card-content-text {
    display: none !important;
}

/* Bento Card - Styling chung */
.bento-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    width: 100%; /* Đảm bảo width theo container, không theo nội dung */
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.bento-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, transparent 0%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.3);
}

.bento-card:hover::before {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.5) 0%, rgba(139, 92, 246, 0.5) 100%);
    opacity: 1;
}

/* Card Featured Image */
.bento-card .wp-block-post-featured-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
}

.bento-card .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-card:hover .wp-block-post-featured-image img {
    transform: scale(1.08);
}

/* Card Badges - Category + Reading Time */
.card-badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.category-badge a {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: 6px;
    color: #0284c7 !important;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.3s ease;
}

.category-badge a:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
}

/* Single Category - Chỉ hiển thị 1 category đầu tiên, ẩn dấu phẩy */
.single-category {
    font-size: 0 !important; /* Ẩn dấu phẩy (text node) */
}

.single-category a {
    font-size: 0.7rem !important;
}

.single-category a:not(:first-of-type) {
    display: none !important;
}

/* Primary Category Badge - Chỉ hiển thị 1 category */
.primary-category-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: 6px;
    color: #0284c7 !important;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.3s ease;
}

.primary-category-badge:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
}

/* Reading Time Badge */
.devpulse-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.devpulse-post-date,
.devpulse-view-count,
.devpulse-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--wp--preset--color--muted);
}

.devpulse-reading-time.is-light {
    color: rgba(255, 255, 255, 0.85);
}

.devpulse-meta-icon {
    flex: none;
}

/* Card Title */
.card-title a {
    color: #1e293b !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.card-title a:hover {
    color: #0284c7 !important;
}

/* Bookmark Button */
.bookmark-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #94a3b8;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.bookmark-btn:hover {
    color: #0284c7;
    background: rgba(14, 165, 233, 0.1);
}

.bookmark-btn svg {
    display: block;
}

/* Responsive Bento Grid */
@media (max-width: 1024px) {
    .bento-grid .bento-grid-template {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .bento-grid .bento-grid-template > li:first-child {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .bento-grid .bento-grid-template > li:first-child .wp-block-post-featured-image {
        min-height: 200px;
    }
}

@media (max-width: 640px) {
    .bento-grid .bento-grid-template {
        grid-template-columns: 1fr;
    }

    .bento-grid .bento-grid-template > li:first-child {
        grid-column: 1;
    }
}

/* ========================================
   APPS & TOOLS SECTION - Premium Background
   Gradient + Grid overlay + Floating shapes
   ======================================== */
.apps-tools-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.12), transparent),
        radial-gradient(ellipse 60% 40% at 90% 80%, rgba(14, 165, 233, 0.1), transparent),
        radial-gradient(ellipse 50% 30% at 10% 60%, rgba(139, 92, 246, 0.08), transparent),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* Grid overlay - Lưới nền tinh tế */
.apps-tools-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Container cho content - position relative */
.apps-tools-content {
    position: relative;
    z-index: 1;
}

/* Floating shapes container */
.apps-floating-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Floating shapes - soft animated blobs */
.apps-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.5;
    animation: appsFloat 20s ease-in-out infinite;
}

.apps-shape-1 {
    width: 200px;
    height: 200px;
    background: rgba(99, 102, 241, 0.15);
    top: -50px;
    right: 10%;
    animation-delay: 0s;
}

.apps-shape-2 {
    width: 150px;
    height: 150px;
    background: rgba(14, 165, 233, 0.12);
    bottom: 20%;
    left: 5%;
    animation-delay: -5s;
}

.apps-shape-3 {
    width: 180px;
    height: 180px;
    background: rgba(139, 92, 246, 0.1);
    top: 40%;
    right: 5%;
    animation-delay: -10s;
}

.apps-shape-4 {
    width: 120px;
    height: 120px;
    background: rgba(6, 182, 212, 0.12);
    bottom: -30px;
    left: 30%;
    animation-delay: -15s;
}

@keyframes appsFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(20px, -20px) scale(1.05); }
    50% { transform: translate(-10px, 15px) scale(0.95); }
    75% { transform: translate(15px, 10px) scale(1.02); }
}

/* Apps Grid Container */
.apps-grid-container {
    position: relative;
    margin-top: 1.5rem;
    z-index: 1;
}

/* Grid layout 4 cột */
.apps-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.25rem !important;
    padding: 0.5rem 0 1rem;
}

/* ========================================
   APP CARD V2 - Premium Design
   Thiết kế sang trọng, hiện đại, đẳng cấp
   ======================================== */

/* App Card V2 Container */
.app-card-v2 {
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 16px !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    height: auto;
    min-height: 130px;
}

.app-card-v2:hover {
    border-color: #c7d2fe;
    box-shadow: 0 12px 28px -8px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

/* App Icon V2 - Vuông đẹp, shadow tinh tế */
.app-card-v2 .app-icon-v2,
.app-card-v2 .wp-block-post-featured-image {
    flex-shrink: 0 !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.app-card-v2 .app-icon-v2 a,
.app-card-v2 .wp-block-post-featured-image a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 0 !important;
}

.app-card-v2 .app-icon-v2 img,
.app-card-v2 .wp-block-post-featured-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
    object-fit: cover;
    vertical-align: top !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border: none !important;
    transition: all 0.3s ease;
}

.app-card-v2:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* App Info Container - Khoảng cách đều đặn */
.app-card-v2 .app-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    padding-top: 2px;
}

/* App Title V2 - Dòng 1 */
.app-card-v2 .wp-block-post-title {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.app-card-v2 .wp-block-post-title a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.938rem !important;
    line-height: 1.3 !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
    letter-spacing: -0.01em;
}

.app-card-v2:hover .wp-block-post-title a {
    color: #4f46e5 !important;
}

/* Category V2 - Dòng 2 */
.app-card-v2 .app-cat-v2,
.app-card-v2 .wp-block-post-terms {
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.app-card-v2 .app-cat-v2 a,
.app-card-v2 .wp-block-post-terms a {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #5f6368 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.app-card-v2 .app-cat-v2 a:hover,
.app-card-v2 .wp-block-post-terms a:hover {
    color: #4f46e5 !important;
}

/* Rating Row V2 - Dòng 3: Stars + Score */
.app-card-v2 .app-rating-row {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 0 8px 0 !important;
    height: 18px;
}

/* Stars Container V2 */
.app-card-v2 .app-stars,
.app-card-v2 .stars-container {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-right: 6px;
}

/* Individual Stars V2 - Sắc nét hơn */
.app-card-v2 .star {
    font-size: 0.813rem;
    line-height: 1;
}

.app-card-v2 .star-full {
    color: #f4b400;
}

.app-card-v2 .star-empty {
    color: #dadce0;
}

.app-card-v2 .star-partial {
    position: relative;
    color: #dadce0;
}

.app-card-v2 .star-partial::before {
    content: '★';
    position: absolute;
    left: 0;
    top: 0;
    color: #f4b400;
    width: var(--fill, 50%);
    overflow: hidden;
}

/* Score Number V2 */
.app-card-v2 .app-score {
    font-size: 0.813rem;
    font-weight: 500;
    color: #5f6368;
}

/* App Description V2 - Dòng 4-6: Tối đa 2 dòng */
.app-card-v2 .app-desc-v2,
.app-card-v2 .wp-block-post-excerpt {
    margin: 0 !important;
    padding: 0 !important;
}

.app-card-v2 .app-desc-v2 .wp-block-post-excerpt__excerpt,
.app-card-v2 .wp-block-post-excerpt__excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.813rem !important;
    line-height: 1.5 !important;
    color: #5f6368 !important;
    margin: 0 !important;
    letter-spacing: 0.01em;
}

/* Responsive Apps Grid */
@media (max-width: 1200px) {
    .apps-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 900px) {
    .apps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .app-card-v2 {
        padding: 16px !important;
        min-height: 120px;
    }

    .app-card-v2 .wp-block-post-featured-image,
    .app-card-v2 .wp-block-post-featured-image img {
        width: 72px !important;
        height: 72px !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 600px) {
    .apps-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .app-card-v2 {
        padding: 14px !important;
        min-height: auto;
        gap: 14px !important;
    }

    .app-card-v2 .wp-block-post-featured-image,
    .app-card-v2 .wp-block-post-featured-image img {
        width: 64px !important;
        height: 64px !important;
        border-radius: 16px !important;
    }

    .app-card-v2 .wp-block-post-title a {
        font-size: 0.875rem !important;
    }

    .app-card-v2 .wp-block-post-terms a {
        font-size: 0.75rem !important;
    }

    .app-card-v2 .star {
        font-size: 0.75rem;
    }

    .app-card-v2 .app-score {
        font-size: 0.75rem;
    }

    .app-card-v2 .wp-block-post-excerpt__excerpt {
        font-size: 0.75rem !important;
        -webkit-line-clamp: 2 !important;
    }
}

/* ========================================
   BROWSE BY TOPIC - Visual Cards
   ======================================== */
.topic-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}

.topic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    min-height: 180px;
    justify-content: center;
}

.topic-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.topic-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -15px rgba(14, 165, 233, 0.2);
    border-color: rgba(14, 165, 233, 0.3);
}

.topic-card:hover::before {
    opacity: 1;
}

/* Topic Card - Color Variants */
.topic-card[data-color="blue"]:hover {
    border-color: rgba(14, 165, 233, 0.5);
    box-shadow: 0 20px 40px -15px rgba(14, 165, 233, 0.25);
}

.topic-card[data-color="purple"]:hover {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 20px 40px -15px rgba(139, 92, 246, 0.25);
}

.topic-card[data-color="cyan"]:hover {
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 20px 40px -15px rgba(6, 182, 212, 0.25);
}

.topic-card[data-color="green"]:hover {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 20px 40px -15px rgba(16, 185, 129, 0.25);
}

.topic-card[data-color="orange"]:hover {
    border-color: rgba(249, 115, 22, 0.5);
    box-shadow: 0 20px 40px -15px rgba(249, 115, 22, 0.25);
}

.topic-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    transition: transform 0.4s ease;
}

.topic-card:hover .topic-icon {
    transform: scale(1.15);
}

.topic-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.35rem;
    transition: color 0.3s ease;
}

.topic-card:hover .topic-title {
    color: #0284c7;
}

.topic-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0 0 0.75rem;
    line-height: 1.4;
}

.topic-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.topic-card:hover .topic-count {
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7;
}

.topic-arrow {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 1rem;
    color: #cbd5e1;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.topic-card:hover .topic-arrow {
    opacity: 1;
    transform: translateX(0);
    color: #0284c7;
}

/* Responsive Topic Cards */
@media (max-width: 1024px) {
    .topic-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .topic-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .topic-cards-grid {
        grid-template-columns: 1fr;
    }

    .topic-card {
        flex-direction: row;
        text-align: left;
        padding: 1rem;
        gap: 1rem;
    }

    .topic-icon {
        font-size: 2rem;
        margin-bottom: 0;
    }

    .topic-arrow {
        position: static;
        opacity: 1;
        margin-left: auto;
    }
}

/* ========================================
   LATEST ARTICLES - Filter Chips + Grid
   ======================================== */

/* Filter Chips Wrapper - Căn giữa */
.filter-chips-wrapper {
    margin: 1.5rem 0 2rem;
    display: flex;
    justify-content: center;
}

/* Filter Chips Container */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
    align-items: center;
}

/* Individual Filter Chip - Thiết kế đẹp hơn */
.filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    line-height: 1;
}

.filter-chip .chip-text {
    display: block;
    line-height: 1.4;
}

.filter-chip:hover {
    border-color: #0ea5e9;
    color: #0284c7;
    background: rgba(14, 165, 233, 0.04);
    transform: translateY(-1px);
}

.filter-chip.active {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
    transform: translateY(-1px);
}

.filter-chip.active:hover {
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.4);
}

/* Article Excerpt - 2 dòng với ellipsis */
.article-excerpt,
.article-card .wp-block-post-excerpt {
    margin: 0.5rem 0 0 !important;
    padding: 0 !important;
}

.article-excerpt .wp-block-post-excerpt__excerpt,
.article-card .wp-block-post-excerpt__excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.813rem !important;
    line-height: 1.5 !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* No posts message */
.no-posts-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: #64748b;
    font-size: 1rem;
}

/* Articles Grid */
.articles-grid .articles-grid-template {
    gap: 1.25rem !important;
}

@media (max-width: 1200px) {
    .articles-grid .articles-grid-template {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 900px) {
    .articles-grid .articles-grid-template {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .articles-grid .articles-grid-template {
        grid-template-columns: 1fr !important;
    }
}

/* Article Image Wrapper - For New Badge */
.article-image-wrapper {
    position: relative;
    overflow: hidden;
}

.new-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Load More Button */
.load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0284c7;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.load-more-btn span,
.load-more-btn svg {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.load-more-btn:hover {
    border-color: #0284c7;
    background: rgba(14, 165, 233, 0.05);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.15);
}

/* Hover: cả text và icon đều nhảy lên cùng nhau */
.load-more-btn:hover span,
.load-more-btn:hover svg {
    transform: translateY(-2px);
}

/* Loading state */
.load-more-btn.loading {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

.load-more-btn.loading span,
.load-more-btn.loading svg {
    animation: loadingPulse 1s ease-in-out infinite;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================
   WHY CHOOSE US SECTION - Redesigned
   ======================================== */
.why-choose-section {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    position: relative;
    overflow: hidden;
    /* Tăng padding-bottom để tạo khoảng cách đẹp với footer */
    padding-bottom: var(--wp--preset--spacing--70) !important;
}

/* Background decorations - nhẹ hơn cho nền sáng */
.why-choose-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(14, 165, 233, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.why-choose-section::after {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* Header styles - Clean Gradient Text */
.why-choose-header {
    text-align: center;
    margin-bottom: 2rem;
}

.why-choose-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-choose-title .title-icon {
    font-size: 1.35rem;
    -webkit-text-fill-color: initial;
}

.why-choose-subtitle {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}

/* Feature Card Base - 3D Gradient Style */
.feature-card {
    padding: 1.5rem;
    background: var(--card-bg);
    border-radius: 16px;
    border: none;
    box-shadow: var(--card-shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Shine effect overlay */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.feature-card:hover::before {
    left: 100%;
}

/* Glow effect */
.feature-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: var(--card-glow);
    z-index: -1;
    opacity: 0;
    filter: blur(12px);
    transition: opacity 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px) rotateX(5deg);
    box-shadow: var(--card-shadow-hover);
}

.feature-card:hover::after {
    opacity: 0.6;
}

/* Blue card */
.feature-card[data-color="blue"] {
    --card-bg: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
    --card-shadow: 0 4px 20px rgba(14, 165, 233, 0.3);
    --card-shadow-hover: 0 20px 40px rgba(14, 165, 233, 0.4);
    --card-glow: linear-gradient(135deg, #0ea5e9, #38bdf8);
    --icon-bg: rgba(255, 255, 255, 0.2);
}

/* Purple card */
.feature-card[data-color="purple"] {
    --card-bg: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
    --card-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
    --card-shadow-hover: 0 20px 40px rgba(139, 92, 246, 0.4);
    --card-glow: linear-gradient(135deg, #8b5cf6, #a78bfa);
    --icon-bg: rgba(255, 255, 255, 0.2);
}

/* Green card */
.feature-card[data-color="green"] {
    --card-bg: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    --card-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
    --card-shadow-hover: 0 20px 40px rgba(16, 185, 129, 0.4);
    --card-glow: linear-gradient(135deg, #10b981, #34d399);
    --icon-bg: rgba(255, 255, 255, 0.2);
}

/* Orange card */
.feature-card[data-color="orange"] {
    --card-bg: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    --card-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
    --card-shadow-hover: 0 20px 40px rgba(245, 158, 11, 0.4);
    --card-glow: linear-gradient(135deg, #f59e0b, #fbbf24);
    --icon-bg: rgba(255, 255, 255, 0.2);
}

/* Icon wrapper */
.feature-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--icon-bg, rgba(255, 255, 255, 0.2));
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.feature-card:hover .feature-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.3);
}

.feature-icon {
    font-size: 1.25rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.feature-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.35rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.feature-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-choose-header {
        padding: 1.25rem 1.5rem;
    }

    .why-choose-title {
        font-size: 1.35rem;
    }
}

@media (max-width: 600px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .feature-card {
        padding: 1rem;
    }

    .feature-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .feature-icon {
        font-size: 1rem;
    }

    .feature-title {
        font-size: 0.85rem;
    }

    .feature-desc {
        font-size: 0.75rem;
    }

    .why-choose-header {
        padding: 1rem;
    }

    .why-choose-title {
        font-size: 1.15rem;
    }

    .why-choose-title .title-icon {
        font-size: 1.25rem;
    }

    .why-choose-subtitle {
        font-size: 0.8rem;
    }
}

/* ========================================
   FOOTER NEW - Modern Professional Design
   Nền gradient nhẹ, text rõ ràng, hiện đại
   ======================================== */
.devpulse-footer-new {
    position: relative;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    overflow: hidden;
}

/* Gradient decoration background */
.footer-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.5), rgba(139, 92, 246, 0.5), transparent);
}

/* Main content container */
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 1.25rem;
}

/* Main footer layout */
.footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 2.6rem;
    margin-bottom: 1.5rem;
}

/* Brand Section */
.footer-brand-section {
    max-width: 320px;
    flex-shrink: 0;
}

.footer-social-column {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.footer-logo .logo-icon {
    font-size: 1.25rem;
}

.footer-logo .logo-text {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-description {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 1rem;
}

/* Social Links */
.footer-social-links {
    display: flex;
    gap: 0.75rem;
}

.footer-social-links .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social-links .social-link:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
}

/* Links Wrapper */
.footer-links-wrapper {
    display: flex;
    gap: 3rem;
    justify-self: end;
}

.footer-links-col {
    min-width: 100px;
}

.footer-col-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    margin: 0 0 0.75rem;
}

.footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav li {
    margin-bottom: 0.5rem;
}

.footer-nav a {
    font-size: 0.85rem;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-nav a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-copyright {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
}

.footer-credit {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
}

.footer-credit a {
    color: #0ea5e9;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.footer-credit a:hover {
    color: #38bdf8;
    text-decoration: underline;
}

/* Responsive Footer */
@media (max-width: 900px) {
    .footer-main {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.75rem;
    }

    .footer-brand-section {
        max-width: 100%;
        text-align: center;
    }

    .footer-brand-section .footer-description {
        margin-bottom: 0;
    }

    .footer-social-column {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: auto;
        padding-block: 0.5rem;
    }

    .footer-social-links {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .footer-links-wrapper {
        justify-content: center;
        gap: 2.5rem;
    }

    .footer-links-col {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .footer-content {
        padding: 1.75rem 1rem 1.25rem;
    }

    .footer-links-wrapper {
        flex-direction: column;
        gap: 1.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

/* ========================================
   SCROLL ANIMATIONS
   Hiệu ứng fade-in khi scroll
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bento-card,
.app-card-new,
.topic-card,
.article-card,
.feature-card {
    animation: fadeInUp 0.6s ease-out backwards;
}

/* Staggered animation delays */
.bento-grid-template > li:nth-child(1) .bento-card { animation-delay: 0s; }
.bento-grid-template > li:nth-child(2) .bento-card { animation-delay: 0.1s; }
.bento-grid-template > li:nth-child(3) .bento-card { animation-delay: 0.15s; }
.bento-grid-template > li:nth-child(4) .bento-card { animation-delay: 0.2s; }
.bento-grid-template > li:nth-child(5) .bento-card { animation-delay: 0.25s; }

.topic-cards-grid > .topic-card:nth-child(1) { animation-delay: 0s; }
.topic-cards-grid > .topic-card:nth-child(2) { animation-delay: 0.05s; }
.topic-cards-grid > .topic-card:nth-child(3) { animation-delay: 0.1s; }
.topic-cards-grid > .topic-card:nth-child(4) { animation-delay: 0.15s; }
.topic-cards-grid > .topic-card:nth-child(5) { animation-delay: 0.2s; }

.features-grid > .feature-card:nth-child(1) { animation-delay: 0s; }
.features-grid > .feature-card:nth-child(2) { animation-delay: 0.1s; }
.features-grid > .feature-card:nth-child(3) { animation-delay: 0.2s; }
.features-grid > .feature-card:nth-child(4) { animation-delay: 0.3s; }

/* ========================================
   ARTICLES PAGE STYLES
   Trang hiển thị tất cả bài viết
   ======================================== */
.articles-page-hero {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    text-align: center;
}

.articles-page-title {
    margin: 0 0 0.75rem;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.articles-page-desc {
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Articles Grid on archive page */
.articles-page-grid .articles-grid-template {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .articles-page-grid .articles-grid-template {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .articles-page-grid .articles-grid-template {
        grid-template-columns: repeat(2, 1fr);
    }

    .articles-page-title {
        font-size: 2rem !important;
    }
}

@media (max-width: 500px) {
    .articles-page-grid .articles-grid-template {
        grid-template-columns: 1fr;
    }

    .articles-page-title {
        font-size: 1.75rem !important;
    }
}

/* Pagination Styles */
.wp-block-query-pagination {
    gap: 0.5rem;
}

.wp-block-query-pagination-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
    text-decoration: none;
    transition: all 0.3s ease;
}

.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
    text-decoration: none;
    color: inherit;
}

.wp-block-query-pagination-numbers .page-numbers {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #ffffff;
}

.wp-block-query-pagination-numbers .page-numbers.current {
    background: #0ea5e9;
    color: #ffffff;
}

/* ========================================
   INNER PAGE SYSTEM
   Shared design language for non-home templates
   ======================================== */

.inner-page-shell {
    position: relative;
    overflow: hidden;
    padding: clamp(1.75rem, 4vw, 3.5rem) 0 var(--wp--preset--spacing--70) !important;
    background:
        radial-gradient(ellipse 80% 55% at 50% -15%, rgba(14, 165, 233, 0.16), transparent),
        radial-gradient(ellipse 55% 40% at 92% 18%, rgba(139, 92, 246, 0.12), transparent),
        radial-gradient(ellipse 42% 32% at 8% 82%, rgba(6, 182, 212, 0.1), transparent),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.inner-page-shell::before,
.inner-page-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(54px);
    pointer-events: none;
    opacity: 0.55;
}

.inner-page-shell::before {
    top: 4%;
    left: 8%;
    width: 280px;
    height: 280px;
    background: rgba(14, 165, 233, 0.16);
}

.inner-page-shell::after {
    right: 7%;
    bottom: 10%;
    width: 320px;
    height: 320px;
    background: rgba(139, 92, 246, 0.14);
}

.page-shell-stack {
    position: relative;
    z-index: 2;
}

.page-shell-stack > .devpulse-breadcrumbs {
    margin-bottom: 1rem !important;
}

.page-shell-stack > .devpulse-breadcrumbs a:hover {
    color: #0284c7 !important;
}

.page-hero-surface,
.page-shell-card,
.collection-shell,
.content-shell,
.sidebar-card,
.related-section-shell,
.empty-state-card {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    box-shadow:
        0 20px 50px -34px rgba(15, 23, 42, 0.28),
        0 10px 28px -24px rgba(14, 165, 233, 0.22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.page-hero-surface,
.collection-shell,
.content-shell,
.sidebar-card,
.related-section-shell,
.empty-state-card {
    padding: clamp(1.35rem, 3vw, 2rem);
}

.page-hero-surface {
    overflow: hidden;
}

.page-hero-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(14, 165, 233, 0.12), transparent 35%),
        radial-gradient(circle at 85% 18%, rgba(139, 92, 246, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.86));
    pointer-events: none;
}

.page-hero-surface > * {
    position: relative;
    z-index: 1;
}

.page-hero-surface--center {
    text-align: center;
}

.page-hero-kicker,
.section-label,
.error-code-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-hero-kicker,
.section-label {
    color: #0284c7;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.16);
}

.error-code-pill {
    color: #7c3aed;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.16);
}

.page-hero-title {
    margin: 0.85rem 0 0;
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #0f172a;
}

.page-hero-desc,
.page-hero-note {
    max-width: 760px;
    margin: 1rem auto 0;
    font-size: 1rem;
    line-height: 1.75;
    color: #64748b;
}

.page-hero-note {
    font-size: 0.95rem;
}

.page-hero-note p {
    margin: 0;
}

.collection-hero--term {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.7rem, 1.3vw, 1rem);
    text-align: center;
}

.collection-hero--term .archive-hero-kicker {
    margin: 0;
    background:
        linear-gradient(135deg, rgba(239, 249, 255, 0.96), rgba(226, 244, 255, 0.9)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52));
    border-color: rgba(14, 165, 233, 0.22);
    box-shadow: 0 12px 24px -20px rgba(14, 165, 233, 0.28);
}

.collection-hero--term .archive-hero-title {
    margin: 0 !important;
    max-width: min(100%, 16ch);
    text-wrap: balance;
}

.collection-hero--term .archive-hero-desc {
    max-width: 62ch;
    margin: 0 !important;
    text-wrap: pretty;
}

.collection-hero--term .project-filter-chips {
    justify-content: center;
    margin-top: 0.4rem;
}

.page-hero-surface:not(.page-hero-surface--center) .page-hero-desc,
.page-hero-surface:not(.page-hero-surface--center) .page-hero-note {
    margin-left: 0;
    margin-right: 0;
}

.page-shell-card {
    overflow: hidden;
    padding: 0;
}

.page-shell-card .content-prose {
    padding: 0;
}

.page-shell-card .content-prose > .alignfull:first-child,
.page-shell-card .content-prose > .wp-block-group:first-child {
    margin: 0 !important;
    padding: clamp(1.5rem, 3vw, 2.5rem) !important;
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.09), transparent 35%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.86), rgba(255, 255, 255, 0.98));
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.standard-page-shell .standard-page-content {
    max-width: none !important;
}

.standard-page-shell .page-shell-card {
    padding: clamp(1rem, 1.45vw, 1.3rem) !important;
}

.standard-page-shell .page-shell-card .content-prose > .alignfull:first-child,
.standard-page-shell .page-shell-card .content-prose > .wp-block-group:first-child {
    padding: clamp(1.5rem, 2.1vw, 1.95rem) !important;
    border-radius: 26px !important;
    overflow: hidden;
}

.page-shell-card .content-prose > .alignfull:first-child > *,
.page-shell-card .content-prose > .wp-block-group:first-child > * {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.page-shell-card .content-prose > .alignfull:first-child > * + *,
.page-shell-card .content-prose > .wp-block-group:first-child > * + * {
    margin-top: 1.25rem !important;
}

.page-shell-card .content-prose > .alignfull:first-child .wp-block-heading:first-child,
.page-shell-card .content-prose > .wp-block-group:first-child .wp-block-heading:first-child {
    font-size: clamp(2.3rem, 4vw, 3.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em;
    margin-bottom: 0 !important;
}

.page-shell-card .content-prose > .alignfull:first-child .wp-block-separator,
.page-shell-card .content-prose > .wp-block-group:first-child .wp-block-separator {
    max-width: 120px;
    border-color: rgba(14, 165, 233, 0.2);
    opacity: 1;
}

.page-shell-card .content-prose .wp-block-columns {
    gap: 1.25rem;
}

.page-shell-card .content-prose .wp-block-column {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 1.35rem;
    box-shadow: 0 14px 30px -26px rgba(15, 23, 42, 0.32);
}

.content-shell,
.related-section-shell {
    background: rgba(255, 255, 255, 0.94);
}

.content-prose {
    color: #334155;
}

.content-prose > * + * {
    margin-top: 1.35rem !important;
}

.content-prose h2,
.content-prose h3,
.content-prose h4 {
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.content-prose h2 {
    font-size: clamp(1.45rem, 2vw, 2rem);
    margin-top: 2rem !important;
}

.content-prose h3 {
    font-size: 1.2rem;
}

.content-prose p,
.content-prose li {
    font-size: 1rem;
    line-height: 1.85;
    color: #475569;
}

.content-prose ul,
.content-prose ol {
    padding-left: 1.3rem;
}

.content-prose li + li {
    margin-top: 0.5rem;
}

.content-prose strong {
    color: #0f172a;
}

.content-prose blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.35rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(139, 92, 246, 0.06));
    border-left: 4px solid #0ea5e9;
    border-radius: 18px;
    color: #0f172a;
}

.content-prose blockquote p {
    margin: 0;
    color: inherit;
}

.content-prose code:not(.wp-block-code code) {
    background: #eff6ff;
    color: #0369a1;
    padding: 0.18rem 0.45rem;
    border-radius: 8px;
    font-size: 0.92em;
}

.content-prose pre {
    overflow-x: auto;
    border-radius: 18px;
}

.content-prose img,
.content-prose .wp-block-post-featured-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.content-prose table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
}

.content-prose th,
.content-prose td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}

.content-prose th {
    color: #0f172a;
    background: #f8fafc;
}

.detail-content-grid {
    align-items: flex-start !important;
}

.hero-meta-cluster {
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.hero-meta-cluster > * {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px -20px rgba(15, 23, 42, 0.3);
}

.hero-meta-cluster .devpulse-post-date,
.hero-meta-cluster .devpulse-view-count,
.hero-meta-cluster .devpulse-reading-time {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 0.8rem !important;
}

.detail-hero-media,
.project-hero-media {
    margin-top: 2rem;
}

.detail-hero-media img,
.project-hero-icon img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 24px 50px -34px rgba(15, 23, 42, 0.45);
}

.project-hero-grid {
    align-items: center !important;
}

.project-hero-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-hero-icon {
    margin: 0;
}

.project-hero-icon img {
    max-width: 180px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 28px;
}

.project-hero-term-row {
    margin: 0;
}

.project-hero-term-row a {
    display: inline-flex;
    align-items: center;
    margin: 0 0.4rem 0.4rem 0;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7 !important;
    border: 1px solid rgba(14, 165, 233, 0.16);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-hero-meta {
    margin-bottom: 1.5rem;
}

.app-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.16);
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7;
    font-size: 0.85rem;
    font-weight: 700;
}

.project-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.35rem;
}

.project-cta-group-center {
    justify-content: center;
}

.project-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.8rem 1.25rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.project-cta-button:hover {
    transform: translateY(-2px);
}

.project-cta-button-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
    box-shadow: 0 16px 32px -20px rgba(14, 165, 233, 0.42);
}

.project-cta-button-secondary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #06b6d4 0%, #0d9488 100%);
    border: 0;
    box-shadow: 0 16px 32px -20px rgba(6, 182, 212, 0.34);
}

.project-cta-group--stores {
    gap: 0.7rem;
}

.project-store-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 48px;
    padding: 0.8rem 1.05rem !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 16px 28px -22px rgba(15, 23, 42, 0.28) !important;
}

.project-store-button:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
}

.project-store-button--google-play,
.project-meta-action--store.project-store-button--google-play {
    background: linear-gradient(135deg, #0f172a 0%, #111827 100%) !important;
}

.project-store-button--app-store,
.project-meta-action--store.project-store-button--app-store {
    background: linear-gradient(135deg, #111827 0%, #020617 100%) !important;
}

.project-store-button__text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
}

.project-store-button__icon {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}

.project-download-button__icon {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08));
}

.project-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}

.project-meta-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem 1.1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.28);
}

.project-meta-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.project-meta-value {
    font-size: 1rem;
    color: #0f172a;
    line-height: 1.45;
}

.project-meta-value a {
    color: #0284c7;
}

.project-meta-card--actions {
    align-items: stretch;
}

.project-store-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.project-store-links--single {
    grid-template-columns: minmax(0, 1fr);
}

.project-store-links > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.project-meta-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.72rem 0.95rem;
    border-radius: 14px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.project-meta-action:hover {
    transform: translateY(-1px);
}

.project-meta-action--download {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
    box-shadow: 0 16px 28px -22px rgba(14, 165, 233, 0.35);
}

.project-meta-action--store {
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 16px 28px -22px rgba(15, 23, 42, 0.3) !important;
}

.project-detail-shell .project-sidebar-card .project-store-links--meta {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.54rem;
    align-items: stretch;
    margin-top: 0 !important;
}

.project-detail-shell .project-sidebar-card .project-meta-action {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.74rem 0.92rem;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.project-detail-shell .project-sidebar-card .project-store-links--meta > * {
    grid-column: auto !important;
}

.project-detail-shell .project-sidebar-card .project-meta-card--actions {
    gap: 0.75rem !important;
}

.project-detail-shell .project-sidebar-card .project-meta-card--actions .project-meta-label {
    margin: 0 !important;
}

@media (min-width: 1025px) {
    .project-detail-shell .project-sidebar-card .project-meta-card--actions {
        gap: 0.75rem !important;
    }

    .project-detail-shell .project-sidebar-card .project-meta-card--actions .project-store-links--meta {
        margin-top: 0.02rem !important;
        align-self: stretch !important;
    }
}

@media (min-width: 1025px) {
    .project-detail-shell .project-sidebar-card .project-store-links--meta:not(.project-store-links--single) {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.48rem;
        align-items: stretch;
    }

    .project-detail-shell .project-sidebar-card .project-store-links--meta:not(.project-store-links--single) > * {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .project-detail-shell .project-sidebar-card .project-meta-action {
        min-height: 42px;
        padding: 0.7rem 0.7rem;
        gap: 0.42rem;
        font-size: 0.76rem;
    }

    .project-detail-shell .project-sidebar-card .project-store-button__text {
        font-size: 0.76rem;
    }

    .project-detail-shell .project-sidebar-card .project-store-button__icon,
    .project-detail-shell .project-sidebar-card .project-download-button__icon {
        width: 16px;
        height: 16px;
    }
}

.sidebar-card .project-meta-grid {
    grid-template-columns: 1fr;
    margin-top: 1rem;
}

.project-filter-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.project-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    border: 1px solid #dbe3ee;
    background: rgba(255, 255, 255, 0.92);
    color: #334155 !important;
    font-size: 0.88rem;
    font-weight: 600;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.project-filter-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 165, 233, 0.4);
    background: rgba(14, 165, 233, 0.06);
    box-shadow: 0 16px 28px -24px rgba(14, 165, 233, 0.35);
}

.project-filter-chip.is-active {
    color: #ffffff !important;
    border-color: transparent;
    background: linear-gradient(135deg, #0ea5e9 0%, #7c3aed 100%);
    box-shadow: 0 18px 32px -22px rgba(14, 165, 233, 0.5);
}

.sidebar-card-title {
    margin: 0;
    font-size: 1.1rem;
}

.sidebar-copy {
    margin: 0.8rem 0 0;
    color: #64748b;
    line-height: 1.7;
}

.sidebar-separator {
    margin: 1.2rem 0 !important;
    border-color: rgba(148, 163, 184, 0.18);
}

.sidebar-list-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.sidebar-tax-list {
    margin: 0.55rem 0 0;
    color: #475569;
    line-height: 1.75;
}

.sidebar-tax-list a {
    color: #0284c7;
    font-weight: 600;
}

.section-shell-header {
    margin-bottom: 1.35rem;
}

.related-feed {
    margin-top: 1.35rem;
}

.related-articles-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 0;
    margin: 0;
}

.related-articles-grid > li {
    margin: 0;
}

.related-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.related-project-card {
    height: 100%;
}

.posts-feed-grid .articles-grid-template,
.project-archive-grid {
    gap: 1rem !important;
}

.result-context-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.15rem;
}

.result-context-badge a,
.result-context-badge span {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.result-context-badge--article a,
.result-context-badge--article span {
    color: #0284c7 !important;
    background: rgba(14, 165, 233, 0.1);
}

.result-context-badge--project a,
.result-context-badge--project span {
    color: #7c3aed !important;
    background: rgba(139, 92, 246, 0.1);
}

.result-context-badge--page a,
.result-context-badge--page span {
    color: #0f766e !important;
    background: rgba(16, 185, 129, 0.12);
}

.search-result-image:empty,
.project-hero-media:empty {
    display: none;
}

.search-result-image:not(:has(img)),
.detail-hero-media:not(:has(img)) {
    display: none;
}

.search-meta-note {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.search-hero-form {
    width: 100%;
    max-width: 760px;
    margin: 1.5rem auto 0;
}

.search-hero-form .wp-block-search__inside-wrapper {
    min-height: 56px;
    padding: 0.3rem 0.3rem 0.3rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.18);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 36px -26px rgba(14, 165, 233, 0.24);
}

.search-hero-form .wp-block-search__input {
    padding: 0;
    border: none;
    font-size: 0.96rem;
    background: transparent;
}

.search-hero-form .wp-block-search__button {
    min-width: 46px;
    min-height: 46px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #0ea5e9 0%, #7c3aed 100%);
    color: #ffffff;
}

.error-page-shell {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
}

.error-hero-surface {
    max-width: 900px;
    margin: 0 auto;
}

.error-cta-group {
    margin-top: 1.5rem;
}

.empty-state-card {
    text-align: center;
}

.empty-state-card h3 {
    margin-top: 0;
}

@media (max-width: 1200px) {
    .project-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .posts-feed-grid .articles-grid-template {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .project-archive-grid,
    .related-projects-grid,
    .related-articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .detail-content-grid {
        flex-direction: column;
    }

    .detail-content-grid > .wp-block-column {
        flex-basis: 100% !important;
    }
}

@media (max-width: 780px) {
    .inner-page-shell {
        padding-top: 1.35rem !important;
    }

    .page-hero-surface,
    .collection-shell,
    .content-shell,
    .sidebar-card,
    .related-section-shell,
    .empty-state-card {
        border-radius: 22px;
        padding: 1.25rem;
    }

    .page-shell-card {
        border-radius: 22px;
    }

    .page-shell-card .content-prose > .alignfull:first-child,
    .page-shell-card .content-prose > .wp-block-group:first-child {
        padding: 1.35rem !important;
    }

    .page-shell-card .content-prose .wp-block-column {
        padding: 1.1rem;
    }

    .project-hero-grid {
        flex-direction: column;
    }

    .project-cta-group {
        flex-direction: column;
    }

    .project-cta-button {
        width: 100%;
    }

    .posts-feed-grid .articles-grid-template,
    .project-archive-grid,
    .related-projects-grid,
    .related-articles-grid,
    .project-meta-grid {
        grid-template-columns: 1fr !important;
    }

    .search-hero-form .wp-block-search__inside-wrapper {
        min-height: 52px;
    }
}

/* ========================================
   INNER PAGE PREMIUM REFINEMENTS
   Tighten spacing, improve typography,
   and align all secondary pages with the homepage
   ======================================== */

.inner-page-shell {
    padding: clamp(2.1rem, 4vw, 4.6rem) 0 clamp(4rem, 7vw, 6.5rem) !important;
    background:
        radial-gradient(circle at 14% 18%, rgba(56, 189, 248, 0.2), transparent 24%),
        radial-gradient(circle at 86% 14%, rgba(168, 85, 247, 0.14), transparent 23%),
        radial-gradient(circle at 24% 88%, rgba(14, 165, 233, 0.12), transparent 24%),
        linear-gradient(180deg, #f5fbff 0%, #ffffff 42%, #fbfdff 100%);
}

.inner-page-shell::before {
    top: 7%;
    left: 7%;
    width: 320px;
    height: 320px;
    background: rgba(125, 211, 252, 0.2);
}

.inner-page-shell::after {
    right: 5%;
    bottom: 8%;
    width: 380px;
    height: 380px;
    background: rgba(196, 181, 253, 0.18);
}

.page-shell-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(1.05rem, 2vw, 1.55rem);
}

.page-shell-stack > * {
    margin: 0 !important;
}

.page-hero-surface,
.page-shell-card,
.collection-shell,
.content-shell,
.sidebar-card,
.related-section-shell,
.empty-state-card {
    border-radius: 32px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(219, 234, 254, 0.18));
    box-shadow:
        0 28px 70px -46px rgba(15, 23, 42, 0.34),
        0 18px 42px -34px rgba(14, 165, 233, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.page-hero-surface,
.collection-shell,
.content-shell,
.sidebar-card,
.related-section-shell,
.empty-state-card {
    padding: clamp(1.45rem, 2.6vw, 2.35rem);
}

.page-shell-card {
    overflow: hidden;
    padding: clamp(1.45rem, 2.6vw, 2.35rem);
}

.page-hero-surface::before {
    background:
        radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.16), transparent 34%),
        radial-gradient(circle at 84% 16%, rgba(168, 85, 247, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(255, 255, 255, 0.9));
}

.page-hero-surface::after,
.page-shell-card::before,
.collection-shell::before,
.content-shell::before,
.sidebar-card::before,
.related-section-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.58), transparent 42%);
    pointer-events: none;
}

.page-hero-title {
    margin-top: 0.95rem;
    font-size: clamp(2.6rem, 4.8vw, 4.35rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.page-hero-desc,
.page-hero-note {
    max-width: 820px;
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.85;
    color: #5b6b83;
}

.page-hero-kicker,
.section-label,
.error-code-pill {
    min-height: 2.15rem;
    padding: 0.48rem 0.95rem;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.collection-shell,
.content-shell,
.related-section-shell {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94)),
        radial-gradient(circle at top right, rgba(191, 219, 254, 0.24), transparent 44%);
}

.page-shell-card .content-prose,
.content-shell .content-prose {
    max-width: none;
}

.content-prose {
    color: #334155;
}

.content-prose > * + * {
    margin-top: 1.4rem !important;
}

.content-prose h2,
.content-prose h3,
.content-prose h4 {
    color: #0f172a;
    letter-spacing: -0.03em;
}

.content-prose h2 {
    font-size: clamp(1.62rem, 2.3vw, 2.35rem);
    line-height: 1.14;
    margin-top: 2.7rem !important;
}

.content-prose h3 {
    font-size: clamp(1.16rem, 1.5vw, 1.45rem);
    line-height: 1.22;
    margin-top: 1.9rem !important;
}

.content-prose p,
.content-prose li {
    font-size: clamp(1rem, 1.05vw, 1.05rem);
    line-height: 1.92;
    color: #43546b;
}

.content-prose ul,
.content-prose ol {
    padding-left: 1.4rem;
}

.content-prose li::marker {
    color: #38bdf8;
}

.content-prose blockquote {
    padding: 1.4rem 1.5rem;
    border-left-width: 5px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(168, 85, 247, 0.08)),
        #ffffff;
    box-shadow: 0 24px 50px -40px rgba(14, 165, 233, 0.35);
}

.content-prose pre,
.content-prose .wp-block-code {
    border: 1px solid rgba(191, 219, 254, 0.8);
    background: linear-gradient(180deg, #f8fbff, #eef7ff);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.content-prose code:not(.wp-block-code code) {
    background: #eef6ff;
    color: #0369a1;
    border: 1px solid rgba(125, 211, 252, 0.3);
}

.content-prose img,
.content-prose .wp-block-post-featured-image img,
.content-prose .wp-block-image img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 22px 50px -40px rgba(15, 23, 42, 0.28);
}

.content-prose table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 22px;
    box-shadow: 0 22px 50px -42px rgba(15, 23, 42, 0.2);
    overflow: hidden;
}

.content-prose th {
    background: linear-gradient(180deg, #f8fbff, #eef6ff);
}

.content-prose tr:nth-child(even) td {
    background: rgba(248, 250, 252, 0.8);
}

.sidebar-card {
    padding: 1.4rem 1.3rem;
}

.sidebar-card-title {
    font-size: 1.18rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.sidebar-copy,
.sidebar-tax-list,
.project-meta-value,
.search-meta-note {
    color: #5b6b83;
}

.article-sidebar-card,
.project-sidebar-card {
    position: sticky;
    top: 6.75rem;
}

.detail-content-grid {
    gap: 1.25rem;
}

.detail-hero-media {
    position: relative;
    margin-top: 1.85rem;
    aspect-ratio: 16 / 9;
    min-height: clamp(280px, 36vw, 560px);
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(191, 219, 254, 0.55);
    background: linear-gradient(135deg, #eff8ff, #f8fbff);
}

.detail-hero-media a,
.detail-hero-media img {
    display: block;
    width: 100%;
    height: 100% !important;
}

.detail-hero-media img {
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
}

.detail-hero-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 44%;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.08));
    pointer-events: none;
}

.article-detail-shell .detail-hero-desc {
    max-width: 760px;
    font-size: clamp(1.02rem, 1.35vw, 1.12rem);
}

.article-content-shell {
    padding: clamp(1.6rem, 2.4vw, 2.35rem);
}

.article-content-prose {
    max-width: none !important;
}

.article-content-prose > p:first-of-type {
    font-size: clamp(1.05rem, 1.35vw, 1.14rem);
    line-height: 1.95;
    color: #334155;
}

.article-content-prose > h2:first-of-type {
    margin-top: 2.4rem !important;
}

.project-hero-grid {
    align-items: flex-start !important;
}

.project-hero-media {
    margin-top: 0;
    padding: 0.9rem;
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88)),
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 56%);
    border: 1px solid rgba(191, 219, 254, 0.52);
    box-shadow:
        0 22px 48px -38px rgba(14, 165, 233, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.project-hero-icon,
.project-hero-icon a {
    width: clamp(176px, 16vw, 216px) !important;
    height: clamp(176px, 16vw, 216px) !important;
}

.project-hero-icon img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 24px !important;
    object-fit: cover;
    box-shadow: 0 26px 50px -36px rgba(15, 23, 42, 0.4);
}

.project-hero-term-row {
    margin-bottom: 0.45rem;
}

.project-hero-term-row a {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.project-hero-meta {
    margin-bottom: 1.35rem;
}

.project-meta-grid {
    gap: 1rem;
    margin-top: 1.45rem;
}

.project-meta-card {
    min-height: 108px;
    padding: 1.05rem 1.05rem 1.1rem;
    border-radius: 22px;
    border: 1px solid rgba(203, 213, 225, 0.82);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
        radial-gradient(circle at top left, rgba(125, 211, 252, 0.1), transparent 45%);
}

.project-meta-label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

.project-meta-value {
    font-size: 1.02rem;
    color: #0f172a;
}

.project-content-shell {
    padding: clamp(1.55rem, 2.4vw, 2.2rem);
}

.project-content-prose {
    max-width: none !important;
}

.project-content-prose > p:first-of-type {
    font-size: 1.06rem;
    color: #334155;
}

.project-cta-group {
    gap: 0.8rem;
}

.project-cta-button {
    min-height: 50px;
    padding: 0.85rem 1.3rem;
    font-size: 0.94rem;
    box-shadow: 0 18px 38px -26px rgba(15, 23, 42, 0.2);
}

.project-cta-button-secondary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #06b6d4 0%, #0d9488 100%);
    border: 0;
    box-shadow: 0 16px 32px -20px rgba(6, 182, 212, 0.34);
}

.collection-hero {
    padding: clamp(1.8rem, 3vw, 2.7rem);
}

.project-filter-chips {
    margin-top: 1.6rem;
}

.project-filter-chip {
    min-height: 44px;
    padding: 0.68rem 1.08rem;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
        rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.18);
}

.posts-feed-grid .articles-grid-template,
.project-archive-grid,
.related-articles-grid,
.related-projects-grid {
    gap: 1.25rem !important;
}

.article-card,
.search-result-card,
.collection-card,
.related-articles-grid .article-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px !important;
    border: 1px solid rgba(191, 219, 254, 0.38);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)),
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 42%);
    box-shadow:
        0 24px 54px -42px rgba(15, 23, 42, 0.28),
        0 18px 36px -34px rgba(14, 165, 233, 0.24);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.article-card:hover,
.search-result-card:hover,
.collection-card:hover,
.related-articles-grid .article-card:hover {
    transform: translateY(-6px);
    border-color: rgba(56, 189, 248, 0.36);
    box-shadow:
        0 32px 68px -42px rgba(15, 23, 42, 0.32),
        0 22px 46px -34px rgba(14, 165, 233, 0.3);
}

.article-image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #e8f5ff, #f8fbff);
    border-bottom: 1px solid rgba(191, 219, 254, 0.34);
}

.article-image-wrapper .wp-block-post-featured-image,
.article-image-wrapper .wp-block-post-featured-image a {
    height: 100%;
    margin: 0;
}

.article-image-wrapper .wp-block-post-featured-image img,
.related-articles-grid .article-image-wrapper img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    transition: transform 0.55s ease;
}

.article-card:hover .article-image-wrapper img,
.search-result-card:hover .article-image-wrapper img,
.collection-card:hover .article-image-wrapper img {
    transform: scale(1.045);
}

.card-content,
.card-content.wp-block-group,
.article-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.12rem 1.12rem 1.18rem !important;
}

.card-title,
.card-content .wp-block-post-title {
    margin: 0 !important;
}

.card-title a,
.card-content .wp-block-post-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: clamp(1rem, 1.15vw, 1.08rem) !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    color: #122033 !important;
}

.article-excerpt,
.article-card .wp-block-post-excerpt__excerpt {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.68 !important;
    color: #5b6b83 !important;
}

.card-meta-row,
.card-meta-row.wp-block-group {
    margin-top: auto !important;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(226, 232, 240, 0.88);
}

.new-badge {
    top: 0.95rem;
    left: 0.95rem;
    min-height: 1.8rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #ffffff;
    box-shadow: 0 16px 36px -24px rgba(15, 23, 42, 0.7);
}

.project-collection-shell .app-card-v2,
.related-project-card.app-card-v2 {
    position: relative;
    overflow: hidden;
    min-height: 152px;
    gap: 1rem !important;
    padding: 1.15rem !important;
    border-radius: 24px !important;
    border: 1px solid rgba(191, 219, 254, 0.38);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 42%);
    box-shadow:
        0 24px 54px -42px rgba(15, 23, 42, 0.28),
        0 18px 34px -34px rgba(14, 165, 233, 0.22);
}

.project-collection-shell .app-card-v2:hover,
.related-project-card.app-card-v2:hover {
    transform: translateY(-6px);
    border-color: rgba(56, 189, 248, 0.36);
    box-shadow:
        0 32px 68px -40px rgba(15, 23, 42, 0.3),
        0 22px 46px -34px rgba(14, 165, 233, 0.28);
}

.project-collection-shell .app-card-v2 .app-icon-v2,
.project-collection-shell .app-card-v2 .wp-block-post-featured-image,
.related-project-card.app-card-v2 .app-icon-v2,
.related-project-card.app-card-v2 .wp-block-post-featured-image {
    width: 88px !important;
    height: 88px !important;
    border-radius: 24px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #eef7ff, #f8fbff);
}

.project-collection-shell .app-card-v2 .wp-block-post-featured-image img,
.related-project-card.app-card-v2 .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 22px !important;
    object-fit: cover;
}

.project-collection-shell .app-card-v2 .wp-block-post-title a,
.related-project-card.app-card-v2 .wp-block-post-title a {
    font-size: 1.02rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.project-collection-shell .app-card-v2 .app-cat-v2 a,
.project-collection-shell .app-card-v2 .wp-block-post-terms a,
.related-project-card.app-card-v2 .app-cat-v2 a,
.related-project-card.app-card-v2 .wp-block-post-terms a {
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0284c7 !important;
}

.project-collection-shell .app-card-v2 .app-desc-v2 .wp-block-post-excerpt__excerpt,
.project-collection-shell .app-card-v2 .wp-block-post-excerpt__excerpt,
.related-project-card.app-card-v2 .app-desc-v2 .wp-block-post-excerpt__excerpt,
.related-project-card.app-card-v2 .wp-block-post-excerpt__excerpt {
    -webkit-line-clamp: 3 !important;
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    color: #5b6b83 !important;
}

.project-collection-shell .app-card-v2 .app-score,
.related-project-card.app-card-v2 .app-score {
    font-size: 0.86rem;
    font-weight: 700;
    color: #334155;
}

.search-result-image:empty,
.project-hero-media:empty {
    display: none;
}

.devpulse-view--article #ez-toc-container,
.devpulse-view--project #ez-toc-container,
.devpulse-page--info #ez-toc-container {
    display: none !important;
}

.standard-page-content {
    width: 100%;
    max-width: min(1120px, 100%) !important;
    margin: 0 auto !important;
}

.standard-page-content > * + * {
    margin-top: 1.25rem !important;
}

.devpulse-page--info .standard-page-content {
    max-width: min(1140px, 100%) !important;
}

.devpulse-page--info .standard-page-content > .alignfull:first-child > h1:first-of-type,
.devpulse-page--info .standard-page-content > .wp-block-group:first-child > h1:first-of-type {
    max-width: 14ch;
    margin: 0 auto !important;
    text-align: center;
    font-size: clamp(2.8rem, 5vw, 4.5rem) !important;
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.devpulse-page--info .standard-page-content > .alignfull:first-child > p:first-of-type,
.devpulse-page--info .standard-page-content > .wp-block-group:first-child > p:first-of-type {
    max-width: 760px;
    margin: 1rem auto 0 !important;
    text-align: center;
    font-size: clamp(1.02rem, 1.25vw, 1.1rem);
    color: #5b6b83;
}

.devpulse-page--info .standard-page-content > .alignfull:first-child > .wp-block-separator:first-of-type,
.devpulse-page--info .standard-page-content > .wp-block-group:first-child > .wp-block-separator:first-of-type,
.devpulse-page--info .standard-page-content > .alignfull:first-child > h1:first-of-type + p + .wp-block-separator,
.devpulse-page--info .standard-page-content > .wp-block-group:first-child > h1:first-of-type + p + .wp-block-separator {
    max-width: 110px;
    margin: 1.5rem auto 0 !important;
    border-color: rgba(56, 189, 248, 0.28);
    opacity: 1;
}

.devpulse-page--info .standard-page-content > .alignfull:first-child > h2,
.devpulse-page--info .standard-page-content > .wp-block-group:first-child > h2 {
    font-size: clamp(1.58rem, 2vw, 2.2rem);
    margin-top: 2.75rem !important;
}

.devpulse-page--info .standard-page-content > .alignfull:first-child > h2::before,
.devpulse-page--info .standard-page-content > .wp-block-group:first-child > h2::before {
    content: "";
    display: block;
    width: 54px;
    height: 6px;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #38bdf8, #8b5cf6);
    opacity: 0.9;
}

.devpulse-page--info .standard-page-content > .alignfull:first-child .wp-block-columns,
.devpulse-page--info .standard-page-content > .wp-block-group:first-child .wp-block-columns {
    gap: 1.2rem;
    margin-top: 1.4rem !important;
}

.devpulse-page--info .standard-page-content > .alignfull:first-child .wp-block-column,
.devpulse-page--info .standard-page-content > .wp-block-group:first-child .wp-block-column {
    border-radius: 24px;
    border: 1px solid rgba(191, 219, 254, 0.48);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)),
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.1), transparent 48%);
    box-shadow:
        0 22px 52px -42px rgba(15, 23, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.devpulse-page--legal .standard-page-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.devpulse-page--legal .standard-page-content > .alignfull:first-child,
.devpulse-page--legal .standard-page-content > .wp-block-group:first-child {
    display: block !important;
    max-width: none !important;
}

.devpulse-page--legal .standard-page-content > .alignfull:first-child > #ez-toc-container,
.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > #ez-toc-container {
    width: min(360px, 100%) !important;
    max-width: 360px !important;
    margin: 1rem 0 1.5rem !important;
    position: relative !important;
    top: auto !important;
}

.devpulse-page--legal .standard-page-content > .alignfull:first-child > *:not(#ez-toc-container),
.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > *:not(#ez-toc-container) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

.devpulse-page--legal .standard-page-content > .alignfull:first-child > h1:first-of-type,
.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > h1:first-of-type {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: none !important;
    text-align: left !important;
    font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
    line-height: 1;
    letter-spacing: -0.055em;
}

.devpulse-page--legal .standard-page-content > .alignfull:first-child > p:first-of-type,
.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > p:first-of-type {
    max-width: none !important;
    margin: 0.8rem 0 0 !important;
    font-size: 1.04rem;
    color: #5b6b83;
}

.devpulse-page--legal .standard-page-content > .alignfull:first-child > .wp-block-separator:first-of-type,
.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > .wp-block-separator:first-of-type,
.devpulse-page--legal .standard-page-content > .alignfull:first-child > h1:first-of-type + p + .wp-block-separator,
.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > h1:first-of-type + p + .wp-block-separator {
    max-width: 110px !important;
    margin: 1.1rem 0 1.25rem !important;
}

.devpulse-page--legal .standard-page-content > .alignfull:first-child > h2,
.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > h2 {
    margin-top: 2.55rem !important;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(226, 232, 240, 0.88);
}

.devpulse-ez-toc,
.devpulse-page--legal #ez-toc-container {
    position: relative;
    padding: 1.15rem 1.05rem 1.1rem !important;
    border-radius: 24px;
    border: 1px solid rgba(191, 219, 254, 0.55);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.92)),
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.11), transparent 48%);
    box-shadow:
        0 22px 54px -42px rgba(15, 23, 42, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.devpulse-page--legal #ez-toc-container .ez-toc-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.devpulse-page--legal #ez-toc-container .ez-toc-title,
.devpulse-page--legal .ez-toc-box-title {
    margin: 0 !important;
    position: static !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0284c7 !important;
}

.devpulse-page--legal #ez-toc-container nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.devpulse-page--legal #ez-toc-container nav ul ul {
    margin-top: 0.45rem;
    padding-left: 0.92rem;
    border-left: 1px solid rgba(203, 213, 225, 0.82);
}

.devpulse-page--legal #ez-toc-container li {
    margin: 0;
}

.devpulse-page--legal #ez-toc-container li + li {
    margin-top: 0.5rem;
}

.devpulse-page--legal #ez-toc-container a {
    display: block;
    color: #334155 !important;
    font-size: 0.9rem !important;
    line-height: 1.45;
    font-weight: 600 !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

.devpulse-page--legal #ez-toc-container a:hover {
    color: #0284c7 !important;
    transform: translateX(2px);
}

.devpulse-page--legal #ez-toc-container .ez-toc-title-toggle a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    background: rgba(255, 255, 255, 0.88);
}

.devpulse-page--legal #ez-toc-container .ez-toc-title-toggle {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    flex: 0 0 auto;
}

.devpulse-page--legal #ez-toc-container .ez-toc-title-toggle a.ez-toc-toggle {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #64748b !important;
}

.devpulse-page--legal #ez-toc-container .ez-toc-js-icon-con,
.devpulse-page--legal #ez-toc-container .ez-toc-icon-toggle-span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
    left: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.devpulse-page--legal #ez-toc-container .ez-toc-title-toggle svg {
    display: block;
}

.devpulse-page--legal #ez-toc-container .ez-toc-title-toggle .ez-toc-icon-toggle-span {
    gap: 0 !important;
}

.devpulse-page--legal #ez-toc-container .ez-toc-title-toggle .ez-toc-icon-toggle-span svg + svg {
    display: none !important;
}

.devpulse-page--legal .ez-toc-counter nav ul li a::before {
    min-width: 2.2em;
    color: #94a3b8;
    font-weight: 700;
}

@media (max-width: 1200px) {
    .devpulse-page--legal .standard-page-content > .alignfull:first-child,
    .devpulse-page--legal .standard-page-content > .wp-block-group:first-child {
        gap: 0 !important;
    }
}

@media (max-width: 1024px) {
    .page-shell-stack {
        gap: 1rem;
    }

    .article-sidebar-card,
    .project-sidebar-card {
        position: static;
    }

    .devpulse-page--legal .standard-page-content > .alignfull:first-child,
    .devpulse-page--legal .standard-page-content > .wp-block-group:first-child {
        display: block !important;
    }

    .devpulse-page--legal .standard-page-content > .alignfull:first-child > #ez-toc-container,
    .devpulse-page--legal .standard-page-content > .wp-block-group:first-child > #ez-toc-container {
        position: relative;
        top: auto;
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 780px) {
    .inner-page-shell {
        padding-bottom: 3rem !important;
    }

    .page-hero-surface,
    .page-shell-card,
    .collection-shell,
    .content-shell,
    .sidebar-card,
    .related-section-shell,
    .empty-state-card {
        border-radius: 24px;
        padding: 1.25rem;
    }

    .page-shell-stack > * {
        margin-top: 0 !important;
    }

    .detail-hero-media {
        min-height: 220px;
        border-radius: 24px;
    }

    .card-content,
    .card-content.wp-block-group,
    .article-card .card-content {
        padding: 1rem !important;
    }

    .project-collection-shell .app-card-v2,
    .related-project-card.app-card-v2 {
        min-height: auto;
        padding: 1rem !important;
    }

    .project-collection-shell .app-card-v2 .app-icon-v2,
    .project-collection-shell .app-card-v2 .wp-block-post-featured-image,
    .related-project-card.app-card-v2 .app-icon-v2,
    .related-project-card.app-card-v2 .wp-block-post-featured-image {
        width: 74px !important;
        height: 74px !important;
    }

    .devpulse-page--info .standard-page-content > .alignfull:first-child > h1:first-of-type,
    .devpulse-page--info .standard-page-content > .wp-block-group:first-child > h1:first-of-type,
    .devpulse-page--legal .standard-page-content > .alignfull:first-child > h1:first-of-type,
    .devpulse-page--legal .standard-page-content > .wp-block-group:first-child > h1:first-of-type {
        font-size: clamp(2.1rem, 9vw, 3rem) !important;
    }

    .devpulse-page--info .standard-page-content > .alignfull:first-child > p:first-of-type,
    .devpulse-page--info .standard-page-content > .wp-block-group:first-child > p:first-of-type {
        font-size: 1rem;
    }
}

/* Strong desktop overrides for Gutenberg constrained layouts */
body.devpulse-page--info .standard-page-content > .alignfull:first-child > h1:first-of-type,
body.devpulse-page--info .standard-page-content > .wp-block-group:first-child > h1:first-of-type {
    font-size: clamp(2.9rem, 5vw, 4.6rem) !important;
}

body.devpulse-page--info .standard-page-content > .alignfull:first-child > p:first-of-type,
body.devpulse-page--info .standard-page-content > .wp-block-group:first-child > p:first-of-type {
    font-size: 1.08rem !important;
}

body.devpulse-page--legal .standard-page-content > .alignfull:first-child,
body.devpulse-page--legal .standard-page-content > .wp-block-group:first-child {
    display: block !important;
}

body.devpulse-page--legal .standard-page-content > .alignfull:first-child > #ez-toc-container,
body.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > #ez-toc-container {
    width: min(360px, 100%) !important;
    max-width: 360px !important;
    margin: 1rem 0 1.5rem !important;
}

body.devpulse-page--legal .standard-page-content > .alignfull:first-child > *:not(#ez-toc-container),
body.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > *:not(#ez-toc-container) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

body.devpulse-page--legal .standard-page-content > .alignfull:first-child > h1:first-of-type,
body.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > h1:first-of-type {
    text-align: left !important;
    max-width: none !important;
}

body.devpulse-page--legal .standard-page-content > .alignfull:first-child > p:first-of-type,
body.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > p:first-of-type {
    margin: 0.8rem 0 0 !important;
}

body.devpulse-page--legal .standard-page-content > .alignfull:first-child > .wp-block-separator:first-of-type,
body.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > .wp-block-separator:first-of-type,
body.devpulse-page--legal .standard-page-content > .alignfull:first-child > h1:first-of-type + p + .wp-block-separator,
body.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > h1:first-of-type + p + .wp-block-separator {
    max-width: 110px !important;
    margin: 1.1rem 0 1.25rem !important;
}

body.devpulse-page--legal #ez-toc-container {
    padding: 1.25rem 1.15rem !important;
    border-radius: 28px !important;
}

body.devpulse-page--legal #ez-toc-container .ez-toc-title,
body.devpulse-page--legal .ez-toc-box-title {
    font-size: 0.8rem !important;
    color: #0f172a !important;
}

body.devpulse-page--legal #ez-toc-container nav ul ul {
    padding-left: 0.85rem !important;
}

body.devpulse-page--legal #ez-toc-container a {
    font-size: 0.9rem !important;
    line-height: 1.42 !important;
}

@media (min-width: 1025px) {
    .detail-content-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1.62fr) minmax(290px, 0.7fr) !important;
        gap: 1.25rem !important;
        align-items: start !important;
    }

    .project-detail-grid {
        grid-template-columns: minmax(0, 1.48fr) minmax(300px, 0.76fr) !important;
    }

    .detail-content-grid > .wp-block-column {
        width: auto !important;
        flex-basis: auto !important;
        margin: 0 !important;
    }
}

@media (max-width: 1024px) {
    body.devpulse-page--legal .standard-page-content > .alignfull:first-child,
    body.devpulse-page--legal .standard-page-content > .wp-block-group:first-child {
        display: block !important;
    }

    body.devpulse-page--legal .standard-page-content > .alignfull:first-child > #ez-toc-container,
    body.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > #ez-toc-container {
        margin-bottom: 1.45rem !important;
        padding: 1rem 0.95rem !important;
        border-radius: 22px !important;
    }

    body.devpulse-page--legal #ez-toc-container nav ul {
        max-height: 13rem;
        overflow: auto;
        padding-right: 0.35rem;
        scrollbar-width: thin;
    }

    body.devpulse-page--legal #ez-toc-container nav ul ul {
        padding-left: 0.72rem !important;
    }

    body.devpulse-page--legal .standard-page-content > .alignfull:first-child > *:not(#ez-toc-container),
    body.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > *:not(#ez-toc-container) {
        text-align: inherit !important;
    }
}

@media (max-width: 640px) {
    body.devpulse-page--legal #ez-toc-container nav ul {
        max-height: 11rem;
    }

    body.devpulse-page--legal .standard-page-content > .alignfull:first-child > h1:first-of-type,
    body.devpulse-page--legal .standard-page-content > .wp-block-group:first-child > h1:first-of-type {
        margin-top: 0.95rem !important;
    }
}

/* ========================================
   HOMEPAGE-ALIGNED SECONDARY PAGES
   Final alignment layer for breadcrumbs,
   desktop hero rhythm, and detail copy width
   ======================================== */

.page-shell-stack {
    gap: clamp(1.25rem, 2vw, 1.85rem);
}

.page-shell-stack > .devpulse-breadcrumbs {
    align-self: flex-start;
}

.devpulse-breadcrumbs {
    max-width: min(100%, 980px);
    padding: 0.8rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(191, 219, 254, 0.82);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.82)),
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 48%);
    box-shadow:
        0 18px 40px -34px rgba(15, 23, 42, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.devpulse-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.devpulse-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    position: relative;
    min-width: 0;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.3;
}

.devpulse-breadcrumbs__item + .devpulse-breadcrumbs__item {
    margin-left: 0.62rem;
    padding-left: 1.05rem;
}

.devpulse-breadcrumbs__item + .devpulse-breadcrumbs__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.42rem;
    height: 0.42rem;
    border-top: 1.5px solid #94a3b8;
    border-right: 1.5px solid #94a3b8;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0.8;
}

.devpulse-breadcrumbs__link {
    color: #64748b !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.devpulse-breadcrumbs__link:hover {
    color: #0284c7 !important;
}

.devpulse-breadcrumbs__current {
    display: inline-block;
    max-width: min(44ch, 100%);
    overflow: hidden;
    color: #0f172a;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-hero,
.search-hero-surface,
.error-hero-surface {
    padding: clamp(2rem, 4vw, 3rem);
}

.collection-hero .page-hero-title,
.collection-hero .page-hero-desc,
.collection-hero .page-hero-note,
.search-hero-surface .page-hero-title,
.search-hero-surface .page-hero-desc,
.error-hero-surface .page-hero-title,
.error-hero-surface .page-hero-desc {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.detail-hero-surface {
    padding: clamp(2rem, 4vw, 3rem);
}

.detail-hero-copy {
    position: relative;
    z-index: 1;
}

.detail-hero-copy > * {
    margin: 0 !important;
}

.article-detail-shell .detail-hero-copy {
    width: min(100%, 920px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.95rem;
    text-align: center;
}

.article-detail-shell .detail-hero-copy .category-badge {
    display: flex;
    justify-content: center;
    width: 100%;
}

.article-detail-shell .detail-hero-copy .category-badge a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.16);
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7 !important;
    font-size: 0.76rem !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.article-detail-shell .detail-hero-desc {
    width: min(100%, 64ch);
    max-width: none !important;
    margin: 0 auto !important;
    font-size: clamp(1.05rem, 1.22vw, 1.18rem) !important;
    line-height: 1.8 !important;
    text-wrap: pretty;
}

.article-detail-shell .hero-meta-cluster {
    justify-content: center !important;
    margin-top: 0.25rem;
}

.article-detail-shell .detail-hero-media {
    margin-top: clamp(1.7rem, 3vw, 2.4rem) !important;
    min-height: clamp(320px, 34vw, 600px);
}

.project-detail-shell .project-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    max-width: 760px;
}

.project-detail-shell .project-hero-copy-main {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-width: 0;
}

.project-detail-shell .project-hero-copy .detail-hero-title {
    max-width: min(100%, 18ch);
    margin: 0 !important;
    text-wrap: balance;
}

.project-detail-shell .project-hero-copy .detail-hero-desc {
    max-width: 60ch;
    margin: 0 !important;
}

.project-detail-shell .project-hero-copy .project-hero-meta {
    margin-bottom: 0 !important;
}

.project-detail-shell .project-hero-meta-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
    flex-wrap: nowrap !important;
}

@media (min-width: 1025px) {
    .project-detail-shell .project-hero-grid {
        display: grid !important;
        grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) !important;
        gap: clamp(1.5rem, 2.5vw, 2.25rem) !important;
        align-items: center !important;
    }

    .project-detail-shell .project-hero-grid > .wp-block-column {
        width: auto !important;
        flex-basis: auto !important;
        margin: 0 !important;
    }
}

@media (max-width: 1024px) {
    .devpulse-breadcrumbs {
        padding: 0.72rem 0.9rem;
    }

    .article-detail-shell .detail-hero-copy {
        width: 100%;
    }

    .article-detail-shell .detail-hero-title {
        width: min(100%, 18ch);
    }
}

@media (max-width: 780px) {
    .devpulse-breadcrumbs {
        width: 100%;
        padding: 0.68rem 0.85rem;
        border-radius: 18px;
    }

    .devpulse-breadcrumbs__current {
        max-width: min(28ch, 100%);
    }

    .article-detail-shell .detail-hero-copy {
        align-items: flex-start;
        text-align: left;
    }

    .article-detail-shell .detail-hero-copy .category-badge {
        justify-content: flex-start;
    }

    .article-detail-shell .hero-meta-cluster {
        justify-content: flex-start !important;
    }

    .article-detail-shell .detail-hero-title,
    .project-detail-shell .project-hero-copy .detail-hero-title {
        width: 100%;
        max-width: none !important;
    }

    .article-detail-shell .detail-hero-desc,
    .project-detail-shell .project-hero-copy .detail-hero-desc {
        width: 100%;
        max-width: none !important;
    }
}

/* Sharpen editorial surfaces and fix article detail spacing */
.page-shell-card,
.collection-shell,
.content-shell,
.sidebar-card,
.related-section-shell {
    overflow: hidden;
    isolation: isolate;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.page-shell-card::before,
.collection-shell::before,
.content-shell::before,
.sidebar-card::before,
.related-section-shell::before {
    display: none;
}

.content-shell,
.sidebar-card,
.related-section-shell {
    background: #ffffff;
    border-color: rgba(220, 228, 238, 0.92);
    box-shadow: 0 20px 48px -40px rgba(15, 23, 42, 0.16);
}

.article-content-shell,
.article-sidebar-card,
.explore-sidebar-card,
.article-related-shell {
    border-radius: 30px;
}

.detail-content-grid {
    gap: 1.4rem !important;
}

.article-content-shell {
    padding: clamp(1.4rem, 2.3vw, 1.95rem);
}

.article-content-prose > h1:first-child {
    display: none;
}

.content-prose,
.content-prose * {
    text-shadow: none !important;
}

.content-prose p,
.content-prose li {
    color: #334155 !important;
    font-size: 1.04rem;
    line-height: 1.9;
}

.content-prose strong,
.content-prose b,
.content-prose h2,
.content-prose h3,
.content-prose h4 {
    color: #0f172a !important;
}

.content-prose img,
.content-prose .wp-block-post-featured-image img,
.content-prose .wp-block-image img,
.detail-hero-media img {
    filter: none !important;
    opacity: 1 !important;
}

.detail-hero-media img {
    transform: none;
}

.hero-meta-cluster > * {
    background: #ffffff;
    border-color: rgba(220, 228, 238, 0.96);
}

.sidebar-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.45rem 1.35rem;
}

.sidebar-card > * {
    margin: 0 !important;
    position: relative;
    z-index: 1;
}

.sidebar-card-title {
    font-size: 1.05rem;
    line-height: 1.2;
}

.sidebar-meta-list {
    display: flex;
    flex-direction: column;
    gap: 0.72rem !important;
}

.sidebar-meta-list > * {
    margin: 0 !important;
}

.sidebar-meta-list .devpulse-post-date,
.sidebar-meta-list .devpulse-reading-time,
.sidebar-meta-list .devpulse-view-count {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 2.4rem;
    padding: 0.55rem 0.8rem;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #f8fbff;
    color: #475569 !important;
    font-size: 0.86rem !important;
    line-height: 1.2;
}

.sidebar-separator {
    margin: 0.1rem 0 !important;
}

.sidebar-list-label {
    margin-top: 0.1rem !important;
    font-size: 0.74rem;
    color: #64748b;
}

.sidebar-tax-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 !important;
    font-size: 0;
    line-height: 0;
}

.sidebar-tax-list a {
    display: inline-flex;
    align-items: center;
    min-height: 2.3rem;
    padding: 0.5rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(219, 234, 254, 0.96);
    background: #f8fbff;
    color: #0284c7 !important;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 !important;
    white-space: nowrap;
}

.explore-sidebar-card {
    margin-top: 1.2rem !important;
}

.explore-sidebar-card .project-cta-group {
    margin-top: 0.2rem;
    gap: 0.8rem;
}

.explore-sidebar-card .project-cta-button {
    flex: 1 1 0;
    min-width: 0;
}

.article-related-shell {
    margin-top: 0.95rem !important;
    padding: 1.35rem;
}

.article-related-shell .section-shell-header {
    margin-bottom: 1rem;
}

.article-related-shell .related-feed {
    margin-top: 0;
}

.article-related-shell .related-articles-grid {
    gap: 1rem;
}

.article-related-shell .article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(220, 228, 238, 0.92);
    box-shadow: 0 16px 36px -34px rgba(15, 23, 42, 0.14);
}

.article-related-shell .article-image-wrapper {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f8fafc;
}

.article-related-shell .article-image-wrapper a,
.article-related-shell .article-image-wrapper img {
    display: block;
    width: 100%;
    height: 100% !important;
}

.article-related-shell .article-image-wrapper img {
    object-fit: cover;
    border-radius: 0 !important;
}

.article-related-shell .card-content {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    padding: 1rem 1rem 1.05rem !important;
    flex: 1 1 auto;
}

.article-related-shell .card-title,
.article-related-shell .card-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 1rem !important;
    line-height: 1.34 !important;
}

.article-related-shell .article-excerpt,
.article-related-shell .article-excerpt p,
.article-related-shell .wp-block-post-excerpt__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #64748b !important;
    font-size: 0.9rem !important;
    line-height: 1.58 !important;
    margin: 0 !important;
}

.article-related-shell .card-meta-row {
    margin-top: auto !important;
    padding-top: 0.85rem;
    border-top: 1px solid #e8eef5;
    gap: 0.7rem !important;
    flex-wrap: wrap !important;
}

.article-related-shell .card-meta-row .devpulse-post-date {
    font-size: 0.8rem !important;
    color: #64748b !important;
}

.article-related-shell .card-meta-row .category-badge a {
    min-height: 2rem;
    padding: 0.4rem 0.68rem;
    border-radius: 999px;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* ========================================
   ARTICLE DETAIL DESKTOP REFINEMENT
   ======================================== */

.page-shell-stack > .devpulse-breadcrumbs {
    margin-bottom: 1.2rem !important;
}

.devpulse-breadcrumbs {
    max-width: min(100%, 1040px);
    padding: 0.92rem 1.35rem;
    border-radius: 999px;
}

.devpulse-breadcrumbs__list {
    gap: 0 !important;
}

.devpulse-breadcrumbs__item {
    min-height: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.35;
}

.devpulse-breadcrumbs__item + .devpulse-breadcrumbs__item {
    margin-left: 0.72rem;
    padding-left: 1.05rem;
}

.devpulse-breadcrumbs__item + .devpulse-breadcrumbs__item::before {
    content: ">";
    left: 0.12rem;
    width: auto;
    height: auto;
    border: 0;
    transform: translateY(-50%);
    font-size: 0.76rem;
    line-height: 1;
    font-weight: 700;
    color: #94a3b8;
    opacity: 1;
}

.devpulse-breadcrumbs__link,
.devpulse-breadcrumbs__current {
    line-height: 1.35;
}

.devpulse-breadcrumbs__current {
    max-width: min(56ch, 100%);
}

.devpulse-date-separator {
    font: inherit;
    color: currentColor;
    display: inline-block;
    line-height: 1;
}

.article-detail-shell .detail-hero-copy {
    width: min(100%, 1040px) !important;
    gap: 1.05rem;
}

.article-detail-shell .detail-hero-desc {
    width: min(100%, 60ch);
    font-size: clamp(1.02rem, 1.15vw, 1.14rem) !important;
    line-height: 1.72 !important;
    color: #52637a !important;
}

.article-detail-shell .hero-meta-cluster {
    gap: 0.8rem !important;
    margin-top: 1.05rem !important;
}

.article-detail-shell .hero-meta-cluster > * {
    min-height: 2.35rem;
    padding: 0.46rem 0.92rem;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.68);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.64)),
        radial-gradient(circle at top left, rgba(125, 211, 252, 0.2), transparent 58%),
        radial-gradient(circle at bottom right, rgba(196, 181, 253, 0.18), transparent 52%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 18px 30px -28px rgba(14, 165, 233, 0.4),
        0 14px 28px -24px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(14px) saturate(145%);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.article-detail-shell .hero-meta-cluster .devpulse-post-date,
.article-detail-shell .hero-meta-cluster .devpulse-view-count,
.article-detail-shell .hero-meta-cluster .devpulse-reading-time {
    font-size: 0.79rem !important;
    font-weight: 600;
    line-height: 1.05;
    color: #64748b !important;
}

.article-detail-shell .hero-meta-cluster .devpulse-post-date svg,
.article-detail-shell .hero-meta-cluster .devpulse-view-count svg,
.article-detail-shell .hero-meta-cluster .devpulse-reading-time svg {
    width: 0.94rem;
    height: 0.94rem;
    color: #74849b;
}

.article-detail-shell .detail-hero-media {
    margin-top: clamp(1.55rem, 2.5vw, 2.1rem) !important;
    border-radius: 30px;
    overflow: hidden;
}

.page-shell-card::before,
.collection-shell::before,
.content-shell::before,
.sidebar-card::before,
.related-section-shell::before {
    display: none !important;
}

.page-shell-card,
.collection-shell,
.content-shell,
.sidebar-card,
.related-section-shell {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #ffffff !important;
    background-clip: padding-box;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(223, 231, 241, 0.96) !important;
    box-shadow: 0 22px 48px -40px rgba(15, 23, 42, 0.16) !important;
}

.detail-content-grid {
    align-items: flex-start !important;
    gap: 1.6rem !important;
}

.detail-content-grid > .wp-block-column {
    min-width: 0;
}

.article-sidebar-column {
    align-self: start;
}

.article-content-shell {
    padding: clamp(1.75rem, 2.4vw, 2.25rem) !important;
}

.article-content-shell > * {
    position: relative;
    z-index: 1;
}

.article-content-prose {
    max-width: none !important;
}

.article-content-prose h1:first-of-type {
    display: none;
}

.content-prose,
.content-prose * {
    text-shadow: none !important;
}

.content-prose p,
.content-prose li {
    color: #334155 !important;
    font-size: 1.03rem !important;
    line-height: 1.92 !important;
}

.content-prose strong,
.content-prose b,
.content-prose h2,
.content-prose h3,
.content-prose h4 {
    color: #0f172a !important;
}

.article-content-prose h2 {
    font-size: clamp(1.85rem, 2.2vw, 2.2rem) !important;
    line-height: 1.14 !important;
    margin-top: 2.35rem !important;
}

.article-content-prose h3 {
    font-size: clamp(1.35rem, 1.6vw, 1.55rem) !important;
    line-height: 1.2 !important;
    margin-top: 1.85rem !important;
}

.content-prose figure,
.content-prose .wp-block-image {
    margin: 1.75rem 0 !important;
}

.content-prose img,
.content-prose .wp-block-post-featured-image img,
.content-prose .wp-block-image img,
.detail-hero-media img {
    display: block;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.content-prose .wp-block-image img,
.content-prose figure img {
    border-radius: 24px;
}

.sidebar-card {
    gap: 1.05rem !important;
    padding: 1.6rem 1.45rem !important;
}

.article-sidebar-card {
    position: static !important;
    top: auto !important;
    padding: 1.32rem 1.22rem !important;
}

.article-sidebar-card + .explore-sidebar-card {
    margin-top: 1.5rem !important;
}

.sidebar-card > * {
    margin: 0 !important;
    position: relative;
    z-index: 1;
}

.sidebar-card-title {
    margin: 0 !important;
    font-size: 0.94rem !important;
    line-height: 1.18 !important;
    color: #1e293b;
}

.sidebar-copy {
    margin: 0 !important;
    color: #52637a !important;
    font-size: 0.89rem;
    line-height: 1.62;
}

.sidebar-meta-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
}

.sidebar-meta-list > * {
    margin: 0 !important;
    min-width: 0;
    flex: 0 1 auto;
}

.sidebar-meta-list .devpulse-post-date,
.sidebar-meta-list .devpulse-reading-time,
.sidebar-meta-list .devpulse-view-count {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-height: 2.15rem;
    padding: 0.48rem 0.66rem;
    border-radius: 15px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #f8fbff;
    color: #475569 !important;
    font-size: 0.76rem !important;
    line-height: 1.15;
    white-space: nowrap;
    box-sizing: border-box;
}

.sidebar-meta-list .devpulse-post-date svg,
.sidebar-meta-list .devpulse-reading-time svg,
.sidebar-meta-list .devpulse-view-count svg {
    width: 12px;
    height: 12px;
}

.sidebar-separator {
    margin: 0.05rem 0 !important;
    opacity: 0.5;
}

.sidebar-list-label {
    margin: 0.22rem 0 0 !important;
    font-size: 0.68rem !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b !important;
}

.sidebar-tax-list {
    gap: 0.6rem !important;
    line-height: normal !important;
}

.sidebar-tax-list a {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 1.88rem;
    padding: 0.34rem 0.62rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.76rem;
    font-weight: 600;
}

.sidebar-tax-list--keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 !important;
}

.sidebar-keyword-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.82rem;
    padding: 0.3rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(219, 234, 254, 0.96);
    background: #f2f8ff;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
}

.sidebar-tax-list--categories a {
    color: #0369a1 !important;
    background: #f0f9ff;
    border-color: rgba(186, 230, 253, 0.92);
}

.sidebar-tax-list--tags a {
    color: #334155 !important;
    background: #f8fafc;
    border-color: rgba(226, 232, 240, 0.96);
}

.explore-sidebar-card .project-cta-group {
    gap: 0.72rem !important;
}

.explore-sidebar-card .project-cta-button {
    min-height: 2.7rem;
    font-size: 0.9rem;
}

.article-related-shell {
    margin-top: 1.2rem !important;
    padding: 1.12rem 1.12rem 1.18rem !important;
}

.article-related-shell > * {
    margin: 0 !important;
    position: relative;
    z-index: 1;
}

.article-related-shell .section-shell-header {
    margin-bottom: 1rem !important;
}

.article-related-shell .section-shell-header > * {
    margin: 0 !important;
}

.article-related-shell .section-shell-header .wp-block-heading {
    margin: 0 !important;
    font-size: clamp(1.45rem, 1.9vw, 1.85rem);
    line-height: 1.1;
}

.article-related-shell .related-feed {
    margin-top: 0 !important;
}

.article-related-shell .related-articles-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    align-items: start !important;
}

.article-related-shell .related-articles-grid > li {
    align-self: start;
}

.article-related-shell .article-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
    border-radius: 24px !important;
}

.article-related-shell .card-content > * {
    margin: 0 !important;
}

.article-related-shell .card-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    padding: 1.12rem 1.12rem 1.18rem !important;
    flex: 1 1 auto !important;
}

.article-related-shell .card-title,
.article-related-shell .card-title a {
    min-height: 0;
    font-size: clamp(1rem, 1.15vw, 1.08rem) !important;
    line-height: 1.45 !important;
}

.article-related-shell .article-excerpt,
.article-related-shell .article-excerpt p,
.article-related-shell .wp-block-post-excerpt__excerpt {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    min-height: 0;
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.68 !important;
}

.article-related-shell .card-meta-row {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    margin-top: auto !important;
    padding-top: 0.8rem !important;
    border-top: 1px solid rgba(226, 232, 240, 0.88);
}

.article-related-shell .card-meta-row .devpulse-post-date {
    min-width: 0;
    font-size: 0.75rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-related-shell .card-meta-row > p,
.article-related-shell .card-content .wp-block-post-excerpt__excerpt {
    margin: 0 !important;
}

.article-related-shell .card-meta-row .category-badge {
    min-width: 0;
    max-width: 100%;
}

.article-related-shell .card-meta-row .category-badge a {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: auto;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem !important;
    letter-spacing: 0.03em;
}

.article-related-shell .article-image-wrapper {
    aspect-ratio: 16 / 10 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(220, 228, 238, 0.92);
}

.article-related-shell .article-image-wrapper .wp-block-post-featured-image,
.article-related-shell .article-image-wrapper .wp-block-post-featured-image a,
.article-related-shell .article-image-wrapper > a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.article-related-shell .article-image-wrapper .wp-block-post-featured-image a {
    font-size: 0;
    line-height: 0;
}

.article-related-shell .article-image-wrapper .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

@media (max-width: 781px) {
    .devpulse-breadcrumbs {
        border-radius: 24px;
        padding: 0.82rem 1rem;
    }

    .article-detail-shell .detail-hero-title {
        width: min(100%, 17ch);
        font-size: clamp(2.15rem, 8vw, 3rem) !important;
    }

    .sidebar-meta-list {
        justify-content: flex-start;
    }

    .sidebar-meta-list .devpulse-post-date,
    .sidebar-meta-list .devpulse-reading-time,
    .sidebar-meta-list .devpulse-view-count {
        width: auto;
    }

    .article-related-shell .card-meta-row {
        display: grid !important;
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .article-related-shell .card-meta-row .category-badge {
        justify-self: flex-start;
    }
}

@media (max-width: 1200px) {
    .article-related-shell .related-articles-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .article-related-shell .related-articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .article-related-shell .related-articles-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Refine project detail pages to match article detail and homepage surfaces */
.project-detail-shell .project-hero-surface {
    width: 100%;
    max-width: none;
    margin-inline: 0 !important;
    padding: clamp(1.75rem, 2.8vw, 2.4rem) !important;
    border-radius: 34px !important;
    border-color: rgba(191, 219, 254, 0.28) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.92)),
        radial-gradient(circle at top left, rgba(125, 211, 252, 0.08), transparent 34%);
    box-shadow:
        0 26px 60px -46px rgba(15, 23, 42, 0.2),
        0 12px 28px -24px rgba(14, 165, 233, 0.12) !important;
}

.project-detail-shell .project-hero-surface::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(14, 165, 233, 0.08), transparent 32%),
        radial-gradient(circle at 88% 16%, rgba(96, 165, 250, 0.06), transparent 24%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.74), rgba(255, 255, 255, 0.82));
}

.project-detail-shell .project-hero-grid {
    align-items: center !important;
    gap: clamp(1.35rem, 2.6vw, 2rem) !important;
}

.project-detail-shell .project-hero-grid > .wp-block-column {
    min-width: 0;
}

.project-detail-shell .project-hero-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: auto;
    margin: 0;
}

.project-detail-shell .project-hero-icon,
.project-detail-shell .project-hero-icon a {
    display: block;
    width: clamp(160px, 15vw, 188px) !important;
    height: clamp(160px, 15vw, 188px) !important;
}

.project-detail-shell .project-hero-icon img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border-radius: 22px !important;
    object-fit: cover;
    border: 1px solid rgba(226, 232, 240, 0.92);
    box-shadow: 0 20px 42px -34px rgba(15, 23, 42, 0.24);
}

.project-detail-shell .project-hero-copy {
    width: 100%;
    max-width: 760px;
    gap: 0.46rem;
}

.project-detail-shell .project-hero-copy-main {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.project-detail-shell .project-hero-copy .detail-hero-title {
    max-width: min(100%, 14ch);
    font-size: clamp(2.2rem, 3.3vw, 3.3rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
}

.project-detail-shell .project-hero-copy .detail-hero-desc {
    max-width: 52ch;
    font-size: 1rem !important;
    line-height: 1.58 !important;
    color: #52637a !important;
    margin: 0 !important;
}

.project-detail-shell .project-hero-inline-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.38rem !important;
    width: auto;
    margin-top: 0.02rem;
}

.project-detail-shell .project-hero-inline-bar > * {
    margin: 0 !important;
    flex: 0 0 auto;
}

.project-detail-shell .project-hero-meta-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 0.38rem !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

.project-detail-shell .project-hero-term-row,
.project-detail-shell .project-hero-meta,
.project-detail-shell .project-cta-group {
    display: flex !important;
    align-items: stretch !important;
}

.project-detail-shell .project-hero-term-row a,
.project-detail-shell .project-hero-meta > *,
.project-detail-shell .project-cta-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.28rem !important;
    min-height: 2.28rem !important;
    padding: 0 0.82rem !important;
    border-radius: 999px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    white-space: nowrap;
}

.project-detail-shell .project-hero-term-row {
    margin: 0 !important;
}

.project-detail-shell .project-hero-term-row a {
    border: 1px solid rgba(14, 165, 233, 0.16);
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.project-detail-shell .project-hero-meta {
    margin: 0 !important;
    gap: 0.38rem !important;
    flex-wrap: nowrap !important;
}

.project-detail-shell .project-hero-meta > * {
    border: 1px solid rgba(203, 213, 225, 0.88);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: none;
}

.project-detail-shell .project-hero-meta .app-rating,
.project-detail-shell .project-hero-meta .devpulse-view-count {
    font-size: 0.76rem !important;
    gap: 0.26rem !important;
}

.project-detail-shell .project-hero-meta .app-rating {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #0284c7 !important;
    line-height: 1 !important;
}

.project-detail-shell .project-hero-meta .devpulse-view-count svg {
    width: 13px;
    height: 13px;
}

.project-detail-shell .project-cta-group {
    margin-top: 0 !important;
    gap: 0.38rem !important;
    flex-wrap: nowrap !important;
}

.project-detail-shell .project-cta-button {
    box-shadow: 0 12px 24px -22px rgba(15, 23, 42, 0.14);
}

.project-detail-shell .project-cta-group .project-store-button {
    height: 2.28rem !important;
    min-height: 2.28rem !important;
    padding: 0 1rem !important;
    border-radius: 999px !important;
}

.project-detail-shell .project-cta-group .project-store-button__text,
.project-detail-shell .project-cta-group .project-cta-button-download span {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.project-detail-shell .project-cta-group .project-store-button__icon {
    width: 16px;
    height: 16px;
}

.project-detail-shell .project-cta-group .project-cta-button-download {
    gap: 0.5rem !important;
    padding: 0 1rem !important;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    box-shadow: 0 16px 30px -22px rgba(37, 99, 235, 0.38) !important;
}

@media (min-width: 1025px) {
    .project-detail-shell .project-hero-grid {
        display: grid !important;
        grid-template-columns: minmax(160px, 188px) minmax(0, 1fr) !important;
        justify-content: stretch !important;
        align-items: center !important;
        width: 100%;
        max-width: none;
        margin-inline: 0 !important;
    }

    .project-detail-shell .project-hero-grid > .wp-block-column {
        width: auto !important;
        flex-basis: auto !important;
        margin: 0 !important;
    }
}

@media (max-width: 860px) {
    .project-detail-shell .project-hero-inline-bar {
        flex-wrap: wrap !important;
    }

    .project-detail-shell .project-cta-group {
        flex-wrap: wrap !important;
    }
}

.project-detail-shell .project-content-shell,
.project-detail-shell .project-sidebar-card,
.project-detail-shell .explore-sidebar-card,
.project-detail-shell .project-related-shell {
    border-radius: 26px !important;
    border-color: rgba(203, 213, 225, 0.54) !important;
    box-shadow:
        0 20px 46px -40px rgba(15, 23, 42, 0.18),
        0 10px 24px -24px rgba(14, 165, 233, 0.08) !important;
}

.project-detail-shell .project-sidebar-card,
.project-detail-shell .explore-sidebar-card {
    padding: 1rem !important;
}

.project-detail-shell .project-sidebar-card .project-meta-card {
    padding: 0.78rem 0.84rem;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.94);
}

.project-detail-shell .project-sidebar-card .project-meta-label {
    font-size: 0.62rem;
}

.project-detail-shell .project-sidebar-card .project-meta-value,
.project-detail-shell .project-sidebar-card .project-meta-value a {
    font-size: 0.84rem;
    line-height: 1.38;
}

.project-detail-shell .explore-sidebar-card .project-cta-button {
    min-height: 2.3rem;
    padding: 0.52rem 0.88rem;
    font-size: 0.8rem;
}

.project-detail-shell .project-detail-grid {
    align-items: start !important;
    gap: 1.5rem !important;
}

.project-detail-shell .project-main-column,
.project-detail-shell .project-sidebar-column {
    min-width: 0;
}

.project-detail-shell .project-content-shell,
.project-detail-shell .project-sidebar-card,
.project-detail-shell .explore-sidebar-card,
.project-detail-shell .project-related-shell {
    border-radius: 30px;
}

.project-detail-shell .project-content-shell {
    padding: clamp(1.55rem, 2.25vw, 2rem) !important;
}

.project-detail-shell .project-content-shell > * {
    position: relative;
    z-index: 1;
    margin: 0 !important;
}

.project-detail-shell .project-content-shell > * + * {
    margin-top: 1rem !important;
}

.project-detail-shell .project-content-shell .section-label {
    width: fit-content;
    min-height: 1.9rem;
    padding: 0.36rem 0.78rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

.project-detail-shell .project-content-shell .wp-block-heading {
    font-size: clamp(1.28rem, 1.55vw, 1.55rem);
    line-height: 1.16;
}

.project-detail-shell .project-content-prose {
    max-width: none !important;
}

.project-detail-shell .project-content-prose > h1:first-of-type {
    display: none;
}

.project-detail-shell .project-content-prose > h2:first-child {
    margin-top: 0 !important;
}

.project-detail-shell .project-content-prose > * + * {
    margin-top: 1.35rem !important;
}

.project-detail-shell .project-content-prose p,
.project-detail-shell .project-content-prose li {
    color: #334155 !important;
    font-size: 0.96rem !important;
    line-height: 1.8 !important;
}

.project-detail-shell .project-content-prose ul,
.project-detail-shell .project-content-prose ol {
    padding-left: 1.1rem;
}

.project-detail-shell .project-content-prose li + li {
    margin-top: 0.55rem;
}

.project-detail-shell .project-content-prose h2,
.project-detail-shell .project-content-prose h3,
.project-detail-shell .project-content-prose h4,
.project-detail-shell .project-content-prose strong,
.project-detail-shell .project-content-prose b {
    color: #0f172a !important;
}

.project-detail-shell .project-content-prose h2 {
    font-size: clamp(1.4rem, 1.7vw, 1.7rem) !important;
    line-height: 1.16 !important;
    margin-top: 1.85rem !important;
}

.project-detail-shell .project-content-prose h3 {
    font-size: clamp(1.12rem, 1.3vw, 1.28rem) !important;
    line-height: 1.24 !important;
    margin-top: 1.45rem !important;
}

.project-detail-shell .project-content-prose figure,
.project-detail-shell .project-content-prose .wp-block-image {
    margin: 1.6rem 0 !important;
}

.project-detail-shell .project-content-prose img {
    border-radius: 24px;
}

.project-detail-shell .project-sidebar-column {
    align-self: start;
}

.project-detail-shell .project-sidebar-card {
    position: sticky;
    top: 1.25rem;
    gap: 1rem !important;
    padding: 1.2rem 1.08rem !important;
}

.project-detail-shell .project-sidebar-card .sidebar-card-title,
.project-detail-shell .explore-sidebar-card .sidebar-card-title {
    font-size: 0.96rem !important;
    line-height: 1.2 !important;
}

.project-detail-shell .project-sidebar-card .project-meta-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem !important;
    margin-top: 0.05rem;
}

.project-detail-shell .project-sidebar-card .project-meta-card {
    min-height: 0;
    gap: 0.45rem;
    padding: 0.82rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.96);
    background: #f8fbff;
    box-shadow: none;
}

.project-detail-shell .project-sidebar-card .project-meta-label {
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    color: #64748b;
}

.project-detail-shell .project-sidebar-card .project-meta-value,
.project-detail-shell .project-sidebar-card .project-meta-value a {
    font-size: 0.88rem;
    line-height: 1.42;
    word-break: break-word;
}

.project-detail-shell .project-sidebar-card .project-meta-value a {
    color: #0369a1;
}

.project-detail-shell .sidebar-copy {
    margin: 0 !important;
    font-size: 0.84rem;
    line-height: 1.62;
}

.project-detail-shell .explore-sidebar-card {
    gap: 0.9rem !important;
}

.project-detail-shell .explore-sidebar-card .project-cta-group {
    margin-top: 0.1rem;
}

.project-detail-shell .project-related-shell {
    margin-top: 1.3rem !important;
    padding: 1.2rem 1.2rem 1.3rem !important;
}

.project-detail-shell .project-related-shell > * {
    margin: 0 !important;
    position: relative;
    z-index: 1;
}

.project-detail-shell .project-related-shell .section-shell-header {
    margin-bottom: 1rem !important;
}

.project-detail-shell .project-related-shell .section-shell-header .wp-block-heading {
    margin: 0 !important;
    font-size: clamp(1.22rem, 1.45vw, 1.45rem);
    line-height: 1.14;
}

.project-detail-shell .project-related-shell .related-feed,
.project-detail-shell .project-related-shell .related-feed-projects,
.project-detail-shell .project-related-shell .related-projects-grid {
    width: 100% !important;
    max-width: none !important;
}

.project-detail-shell .project-related-shell .related-projects-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    column-gap: 1rem !important;
    row-gap: 1rem !important;
}

.project-detail-shell .related-project-card.app-card-v2 {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    min-height: 0;
    height: auto !important;
    align-items: flex-start !important;
    padding: 1rem !important;
    margin: 0 !important;
}

.project-detail-shell .related-project-card .app-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0.22rem !important;
    min-width: 0;
    flex: 1 1 auto;
    padding-top: 0 !important;
}

.project-detail-shell .related-project-card .app-info > * + * {
    margin-top: 0.02rem !important;
}

.project-detail-shell .related-project-card .wp-block-post-title,
.project-detail-shell .related-project-card .wp-block-post-terms,
.project-detail-shell .related-project-card .app-rating-row,
.project-detail-shell .related-project-card .wp-block-post-excerpt {
    margin: 0 !important;
}

.project-detail-shell .related-project-card .wp-block-post-title a {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
}

.project-detail-shell .related-project-card .wp-block-post-excerpt__excerpt {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
}

.project-detail-shell .related-project-card .app-cat-v2 a,
.project-detail-shell .related-project-card .wp-block-post-terms a {
    font-size: 0.66rem !important;
}

.project-detail-shell .related-project-card .app-score {
    font-size: 0.78rem;
}

@media (max-width: 1024px) {
    .project-detail-shell .project-sidebar-card {
        position: static;
        top: auto;
    }

    .project-detail-shell .project-related-shell .related-projects-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .project-detail-shell .related-project-card.app-card-v2 {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }
}

@media (max-width: 640px) {
    .project-detail-shell .project-related-shell .related-projects-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 780px) {
    .project-detail-shell .project-hero-grid {
        gap: 1.15rem !important;
    }

    .project-detail-shell .project-hero-media {
        justify-content: flex-start;
    }

    .project-detail-shell .project-hero-copy .detail-hero-title,
    .project-detail-shell .project-hero-copy .detail-hero-desc {
        max-width: none !important;
    }

    .project-detail-shell .project-hero-meta {
        gap: 0.6rem !important;
    }

    .project-detail-shell .project-hero-meta > * {
        min-height: 2.3rem;
        padding: 0.52rem 0.75rem;
    }

    .project-detail-shell .project-content-shell,
    .project-detail-shell .project-sidebar-card,
    .project-detail-shell .explore-sidebar-card,
    .project-detail-shell .project-related-shell {
        border-radius: 24px;
    }
}

@media (max-width: 640px) {
    .project-detail-shell .project-related-shell .related-projects-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .project-detail-shell .related-project-card.app-card-v2 {
        max-width: 100%;
        width: 100%;
        padding: 1rem !important;
    }

    .project-detail-shell .related-project-card .app-icon-v2,
    .project-detail-shell .related-project-card .wp-block-post-featured-image {
        width: 74px !important;
        height: 74px !important;
    }
}

/* Global inner-page normalization derived from homepage scale */
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack {
    --dp-shell-pad: clamp(1.3rem, 2vw, 1.6rem);
    --dp-label-height: 1.82rem;
    --dp-label-font-size: 0.72rem;
    --dp-label-pad-x: 0.82rem;
    --dp-section-heading-size: clamp(1.52rem, 1.85vw, 1.82rem);
    --dp-sidebar-heading-size: 1.02rem;
    --dp-page-hero-size: clamp(2.6rem, 4.8vw, 4.35rem);
    --dp-detail-hero-size: clamp(2.4rem, 3.85vw, 3.55rem);
    --dp-body-lg-size: clamp(1rem, 1.08vw, 1.08rem);
    --dp-body-md-size: 0.98rem;
    --dp-card-title-size: clamp(0.98rem, 1.05vw, 1.04rem);
    --dp-card-body-size: 0.88rem;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .content-shell,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .collection-shell,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .sidebar-card,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .related-section-shell {
    padding: var(--dp-shell-pad) !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .page-hero-kicker,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .section-label,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .error-code-pill {
    min-height: var(--dp-label-height) !important;
    padding: 0.28rem var(--dp-label-pad-x) !important;
    font-size: var(--dp-label-font-size) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    border-radius: 999px !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .content-shell > .section-label + .wp-block-heading {
    margin-top: 0.68rem !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .section-shell-header .wp-block-group {
    gap: 0.62rem !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .page-hero-title {
    font-size: var(--dp-page-hero-size) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .page-hero-desc,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .page-hero-note {
    font-size: var(--dp-body-lg-size) !important;
    line-height: 1.82 !important;
    color: #5b6b83 !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .detail-hero-title {
    font-size: var(--dp-detail-hero-size) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.05em !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .detail-hero-desc {
    font-size: var(--dp-body-lg-size) !important;
    line-height: 1.76 !important;
    color: #5b6b83 !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .section-shell-header {
    margin-bottom: 1rem !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .section-shell-header .wp-block-heading,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .content-shell > .wp-block-heading {
    margin: 0 !important;
    font-size: var(--dp-section-heading-size) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    color: #0f172a !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .sidebar-card-title {
    margin: 0 !important;
    font-size: var(--dp-sidebar-heading-size) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .content-prose p,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .content-prose li {
    font-size: var(--dp-body-md-size) !important;
    line-height: 1.8 !important;
    color: #334155 !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .content-prose h2 {
    font-size: clamp(1.58rem, 2.1vw, 2rem) !important;
    line-height: 1.16 !important;
    margin-top: 2.15rem !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .content-prose h3 {
    font-size: clamp(1.16rem, 1.45vw, 1.34rem) !important;
    line-height: 1.24 !important;
    margin-top: 1.55rem !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .card-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
    padding: 1.05rem 1.05rem 1.1rem !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .card-title a,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .card-content .wp-block-post-title a {
    font-size: var(--dp-card-title-size) !important;
    line-height: 1.42 !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .article-excerpt,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .article-excerpt p,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .card-content .wp-block-post-excerpt__excerpt {
    font-size: var(--dp-card-body-size) !important;
    line-height: 1.66 !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .app-card-v2,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .related-project-card.app-card-v2 {
    gap: 0.95rem !important;
    padding: 1.05rem !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .app-card-v2 .wp-block-post-title a,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .related-project-card.app-card-v2 .wp-block-post-title a {
    font-size: 0.96rem !important;
    line-height: 1.38 !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .app-card-v2 .wp-block-post-excerpt__excerpt,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .related-project-card.app-card-v2 .wp-block-post-excerpt__excerpt {
    font-size: 0.84rem !important;
    line-height: 1.62 !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .sidebar-copy,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .project-meta-value,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .project-meta-value a,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .sidebar-tax-list a,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .sidebar-keywords a,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .sidebar-meta-list > * {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
}

:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .project-meta-label,
:is(.detail-page-shell, .collection-page-shell) .page-shell-stack .sidebar-list-label {
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
}

/* ========================================
   MOBILE COMPREHENSIVE FIX
   Sửa toàn diện giao diện mobile cho tất cả trang
   ======================================== */

/* Chống scroll ngang toàn site */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Giảm spacing preset trên mobile - WP inline styles dùng CSS vars */
@media (max-width: 768px) {
    :root {
        --wp--preset--spacing--50: 1.5rem;  /* 2.5rem → 1.5rem */
        --wp--preset--spacing--60: 2rem;     /* 4rem → 2rem */
        --wp--preset--spacing--70: 3rem;     /* 6rem → 3rem */
    }
}

@media (max-width: 480px) {
    :root {
        --wp--preset--spacing--50: 1.25rem;
        --wp--preset--spacing--60: 1.5rem;
        --wp--preset--spacing--70: 2rem;
    }
}

/* ---- MOBILE: <= 768px ---- */
@media (max-width: 768px) {

    /* === GLOBAL SECTION PADDING === */
    /* Đảm bảo tất cả sections có padding ngang trên mobile */
    .discover-section,
    .apps-tools-section,
    .latest-articles-section,
    .browse-topics-section,
    .why-choose-section,
    .articles-page-hero {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* WordPress block groups alignwide cần padding */
    .wp-site-blocks > * > .alignwide,
    .wp-site-blocks > .alignwide {
        max-width: 100% !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* === SECTION HEADER BADGE === */
    .section-header {
        gap: 0.75rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .section-header .wp-block-group:first-child {
        padding: 0.15rem 1rem 0.15rem 0.75rem;
        box-shadow: 0 3px 10px rgba(99, 102, 241, 0.2);
    }

    .section-header .wp-block-group:first-child .wp-block-heading {
        font-size: 1.1rem !important;
    }

    .section-icon {
        font-size: 1rem;
    }

    .section-subtitle {
        font-size: 0.85rem;
    }

    .section-header .section-header__right,
    .section-header > .view-all-link {
        margin-left: auto;
    }

    body.home .apps-tools-section {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    body.home .apps-tools-content {
        gap: 0 !important;
    }

    body.home .apps-tools-content > .section-header {
        margin-block-start: 0 !important;
    }

    body.home .apps-tools-section .section-header {
        margin-bottom: 1rem !important;
    }

    body.home .apps-tools-section .apps-grid-container.alignwide,
    body.home .apps-tools-section .apps-grid-container {
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* View all link nhỏ hơn */
    .view-all-link a {
        padding: 0.4rem 0.8rem;
        font-size: 0.78rem;
    }

    /* === FILTER CHIPS === */
    .filter-chips-wrapper {
        margin: 1rem 0 1.25rem;
        overflow: visible;
        justify-content: center;
        padding: 0;
    }

    .filter-chips {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 0;
        width: 100%;
        min-width: 0;
        gap: 0.55rem;
    }

    .filter-chip {
        padding: 0.48rem 0.92rem;
        font-size: 0.78rem;
        flex-shrink: 0;
    }

    .filter-chip.active {
        background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
        border-color: transparent;
        box-shadow: 0 3px 10px rgba(14, 165, 233, 0.18);
        transform: none;
    }

    .filter-chip.active:hover {
        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
    }

    .filter-chips-wrapper br {
        display: none !important;
    }

    /* === BENTO GRID MOBILE === */
    .bento-grid .bento-grid-template {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .bento-grid .bento-grid-template > li:first-child {
        grid-column: 1;
        grid-row: auto;
    }

    .bento-grid .bento-grid-template > li:first-child .bento-card {
        display: flex;
        flex-direction: column;
    }

    .bento-grid .bento-grid-template > li:first-child .wp-block-post-featured-image {
        border-radius: 16px 16px 0 0 !important;
    }

    /* Ẩn nội dung bài viết trên mobile - chỉ hiện excerpt */
    .bento-grid .bento-grid-template > li:first-child .card-content-text {
        display: none !important;
    }

    /* Featured card excerpt hiện lại trên mobile */
    .bento-grid .bento-grid-template > li:first-child .card-excerpt {
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .bento-card {
        border-radius: 16px !important;
    }

    /* Fix inline border-radius trên card images */
    .bento-card .wp-block-post-featured-image img,
    .article-card .wp-block-post-featured-image img {
        border-radius: 16px 16px 0 0 !important;
    }

    /* === APPS GRID MOBILE === */
    .apps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .app-card-v2 {
        padding: 12px !important;
        min-height: auto;
        gap: 10px !important;
        border-radius: 14px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }

    .app-card-v2 .wp-block-post-featured-image,
    .app-card-v2 .wp-block-post-featured-image img {
        width: 56px !important;
        height: 56px !important;
        border-radius: 14px !important;
    }

    .app-card-v2 .wp-block-post-title a {
        font-size: 0.8rem !important;
        white-space: normal !important;
        text-align: center;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Ẩn description và rating trên mobile để gọn */
    .app-card-v2 .app-desc-v2,
    .app-card-v2 .wp-block-post-excerpt,
    .app-card-v2 .app-rating-row {
        display: none !important;
    }

    .app-card-v2 .app-cat-v2 a,
    .app-card-v2 .wp-block-post-terms a {
        font-size: 0.7rem !important;
    }

    .apps-floating-shapes {
        display: none;
    }

    /* === TOPIC CARDS MOBILE === */
    .topic-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .topic-card {
        padding: 1.25rem 1rem;
        min-height: 140px;
        border-radius: 14px;
    }

    .topic-icon {
        font-size: 2rem;
    }

    .topic-title {
        font-size: 0.9rem;
    }

    .topic-desc {
        font-size: 0.7rem;
    }

    /* === WHY CHOOSE SECTION === */
    .why-choose-header {
        margin-bottom: 1.25rem;
    }

    .why-choose-title {
        font-size: 1.15rem;
    }

    .why-choose-subtitle {
        font-size: 0.8rem;
    }

    /* === FEATURE CARDS (WHY CHOOSE) === */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .feature-card {
        padding: 1rem;
        border-radius: 14px;
    }

    /* === ARTICLE CARDS MOBILE === */
    .articles-grid .articles-grid-template {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .article-card {
        border-radius: 16px !important;
    }

    .article-image-wrapper {
        aspect-ratio: 16 / 9;
    }

    /* Article image đảm bảo fill container */
    .article-image-wrapper .wp-block-post-featured-image,
    .article-image-wrapper .wp-block-post-featured-image a,
    .article-image-wrapper .wp-block-post-featured-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .card-content,
    .card-content.wp-block-group,
    .article-card .card-content {
        padding: 0.85rem !important;
        gap: 0.45rem;
    }

    /* Card title size trên mobile */
    .card-title a,
    .card-content .wp-block-post-title a {
        font-size: 0.95rem !important;
        line-height: 1.35 !important;
    }

    /* Card excerpt */
    .article-excerpt .wp-block-post-excerpt__excerpt,
    .article-card .wp-block-post-excerpt__excerpt {
        -webkit-line-clamp: 2 !important;
        font-size: 0.8rem !important;
    }

    /* Card meta */
    .card-meta-row {
        padding-top: 0.6rem !important;
    }

    .devpulse-post-date,
    .devpulse-view-count {
        font-size: 0.7rem !important;
    }

    .category-badge a,
    .single-category a {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.5rem;
    }

    /* === DISCOVER CARDS MOBILE === */
    .discover-card {
        border-radius: 16px !important;
    }

    .discover-grid .discover-cards {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* === LOAD MORE BUTTON === */
    .load-more-container {
        margin-top: 1.15rem;
    }

    .load-more-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.85rem;
        width: 100%;
        max-width: 280px;
    }

    /* === FOOTER MOBILE === */
    .footer-content {
        padding: 1.5rem 1rem 1rem;
    }

    .footer-main {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .footer-brand-section {
        max-width: 100%;
        text-align: center;
    }

    .footer-brand-section .footer-description {
        margin-bottom: 0;
    }

    .footer-social-column {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: auto;
        padding-block: 0.5rem;
    }

    .footer-social-links {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .footer-links-wrapper {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
        align-items: start;
        gap: 1rem;
        width: 100%;
    }

    .footer-links-col {
        text-align: center;
    }

    .footer-logo .logo-text {
        font-size: 1rem;
    }

    .footer-description {
        font-size: 0.8rem;
    }

    .footer-col-title {
        font-size: 0.7rem;
    }

    .footer-nav a {
        font-size: 0.8rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .footer-copyright,
    .footer-credit {
        font-size: 0.75rem;
    }
}

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

    /* Hero stats mobile - 1 hàng, giãn đều, canh giữa dọc */
    .hero-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.35rem !important;
        padding: 0.65rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-buttons {
        margin-bottom: 0 !important;
    }

    .hero-stat-value {
        font-size: 1.25rem !important;
    }

    .hero-stat-label {
        font-size: 0.7rem !important;
        margin-top: 0 !important;
    }

    .hero-title {
        font-size: clamp(1.5rem, 8vw, 2rem) !important;
    }

    .hero-subtitle {
        font-size: 0.875rem !important;
    }

    /* Section padding chặt hơn */
    .discover-section,
    .apps-tools-section,
    .latest-articles-section,
    .browse-topics-section,
    .why-choose-section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    body.home .apps-tools-section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    body.home .latest-articles-section {
        padding-bottom: 0.75rem !important;
    }

    body.home .why-choose-section {
        padding-top: 0.85rem !important;
        padding-bottom: 1.5rem !important;
    }

    body.home .apps-tools-section .apps-tools-content.alignwide,
    body.home .apps-tools-section .apps-tools-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    body.home .apps-tools-content > .section-header {
        margin-block-start: 0 !important;
    }

    body.home .apps-tools-section .section-header {
        margin-bottom: 0.875rem !important;
    }

    body.home .apps-tools-section .apps-grid-container.alignwide,
    body.home .apps-tools-section .apps-grid-container {
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* Apps grid 1 cột trên small mobile */
    .apps-grid {
        grid-template-columns: 1fr !important;
    }

    .app-card-v2 {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left;
        padding: 12px !important;
        gap: 10px !important;
    }

    body.home .apps-tools-section {
        padding-top: 1.45rem !important;
    }

    body.home .apps-tools-section .section-header {
        margin-bottom: 0.9rem !important;
    }

    body.home .apps-tools-section .app-card-v2 .wp-block-post-featured-image,
    body.home .apps-tools-section .app-card-v2 .app-icon-v2 {
        width: 76px !important;
        height: 76px !important;
        padding: 2px !important;
        box-sizing: border-box !important;
    }

    body.home .apps-tools-section .app-card-v2 .wp-block-post-featured-image img,
    body.home .apps-tools-section .app-card-v2 .app-icon-v2 img {
        width: 72px !important;
        height: 72px !important;
        border-radius: 16px !important;
    }

    body.home .apps-tools-section .app-card-v2 .app-info {
        padding-top: 0 !important;
    }

    .app-card-v2 .wp-block-post-title a {
        text-align: left;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
    }

    body.home .apps-tools-section .app-card-v2 .wp-block-post-title {
        margin-bottom: 0.25rem !important;
    }

    body.home .apps-tools-section .app-card-v2 .app-cat-v2,
    body.home .apps-tools-section .app-card-v2 .wp-block-post-terms {
        margin-bottom: 0.2rem !important;
    }

    body.home .apps-tools-section .app-card-v2 .app-cat-v2 a,
    body.home .apps-tools-section .app-card-v2 .wp-block-post-terms a {
        font-size: 0.72rem !important;
    }

    /* Hiện lại excerpt trên 1 cột */
    .app-card-v2 .app-desc-v2,
    .app-card-v2 .wp-block-post-excerpt {
        display: block !important;
    }

    body.home .apps-tools-section .app-card-v2 {
        width: 100% !important;
    }

    body.home .apps-tools-section .app-card-v2 .app-rating-row {
        display: flex !important;
        margin: 0.05rem 0 0.28rem 0 !important;
    }

    body.home .apps-tools-section .app-card-v2 .star,
    body.home .apps-tools-section .app-card-v2 .app-score {
        font-size: 0.72rem !important;
    }

    .app-card-v2 .wp-block-post-excerpt__excerpt {
        -webkit-line-clamp: 2 !important;
        font-size: 0.72rem !important;
        line-height: 1.38 !important;
    }

    /* Topic cards 1 cột */
    .topic-cards-grid {
        grid-template-columns: 1fr;
    }

    .topic-card {
        flex-direction: row;
        text-align: left;
        padding: 1rem;
        gap: 1rem;
        min-height: auto;
    }

    .topic-icon {
        font-size: 1.75rem;
        margin-bottom: 0;
    }

    .topic-arrow {
        position: static;
        opacity: 1;
        margin-left: auto;
    }

    /* Feature cards nhỏ hơn */
    .feature-card {
        padding: 0.75rem;
    }

    .feature-icon-wrapper {
        width: 36px;
        height: 36px;
    }

    .feature-icon {
        font-size: 0.9rem;
    }

    .feature-title {
        font-size: 0.8rem;
    }

    .feature-desc {
        font-size: 0.7rem;
    }

    /* Footer links 1 column */
    .footer-links-wrapper {
        flex-direction: column;
        gap: 1.25rem;
    }
}

/* ---- INNER PAGES MOBILE: <= 780px ---- */
@media (max-width: 780px) {

    /* Inner page shell giảm padding */
    .inner-page-shell {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Tất cả surfaces giảm border-radius */
    .page-hero-surface,
    .page-shell-card,
    .collection-shell,
    .content-shell,
    .sidebar-card,
    .related-section-shell,
    .empty-state-card {
        border-radius: 20px;
        padding: 1rem;
    }

    .page-shell-card {
        border-radius: 20px;
        padding: 0.75rem;
    }

    /* Hero title nhỏ hơn */
    .page-hero-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
        line-height: 1.08;
    }

    .page-hero-desc,
    .page-hero-note {
        font-size: 0.9rem;
    }

    /* Article detail hero */
    .article-detail-shell .detail-hero-title {
        font-size: clamp(1.65rem, 7vw, 2.2rem) !important;
        width: 100% !important;
        max-width: none !important;
    }

    .article-detail-shell .detail-hero-desc {
        font-size: 0.9rem !important;
    }

    .article-detail-shell .detail-hero-media {
        min-height: 180px;
        border-radius: 18px;
    }

    /* Hero meta cluster */
    .hero-meta-cluster {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .hero-meta-cluster > * {
        padding: 0.4rem 0.65rem;
        font-size: 0.75rem;
    }

    /* Content prose */
    .content-prose p,
    .content-prose li {
        font-size: 0.95rem !important;
        line-height: 1.75 !important;
    }

    .content-prose h2 {
        font-size: clamp(1.25rem, 5vw, 1.6rem) !important;
    }

    .content-prose h3 {
        font-size: clamp(1.05rem, 4vw, 1.25rem) !important;
    }

    /* Content images */
    .content-prose img,
    .content-prose .wp-block-image img {
        border-radius: 16px;
    }

    /* Tables scroll ngang */
    .content-prose .wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .content-prose table {
        min-width: 500px;
        border-radius: 14px;
    }

    .content-prose th,
    .content-prose td {
        padding: 0.65rem 0.75rem;
        font-size: 0.85rem;
    }

    /* Code blocks scroll ngang */
    .content-prose pre {
        border-radius: 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .content-prose pre code {
        font-size: 0.82rem;
    }

    .content-prose blockquote {
        padding: 1rem;
        border-radius: 14px;
    }

    /* Sidebar card tighter */
    .sidebar-card {
        padding: 1rem !important;
        gap: 0.8rem !important;
    }

    .sidebar-card-title {
        font-size: 0.9rem !important;
    }

    .sidebar-meta-list .devpulse-post-date,
    .sidebar-meta-list .devpulse-reading-time,
    .sidebar-meta-list .devpulse-view-count {
        padding: 0.35rem 0.55rem;
        font-size: 0.72rem !important;
        min-height: 1.8rem;
    }

    /* Breadcrumbs */
    .devpulse-breadcrumbs {
        width: 100%;
        padding: 0.6rem 0.85rem;
        border-radius: 16px;
        overflow: hidden;
    }

    .devpulse-breadcrumbs__item {
        font-size: 0.78rem;
    }

    .devpulse-breadcrumbs__current {
        max-width: min(22ch, 60vw);
    }

    .devpulse-breadcrumbs__item + .devpulse-breadcrumbs__item {
        margin-left: 0.4rem;
        padding-left: 0.75rem;
    }

    /* Project detail hero */
    .project-detail-shell .project-hero-surface {
        padding: 1.25rem !important;
        border-radius: 22px !important;
    }

    .project-detail-shell .project-hero-icon,
    .project-detail-shell .project-hero-icon a {
        width: 120px !important;
        height: 120px !important;
    }

    .project-detail-shell .project-hero-copy .detail-hero-title {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    .project-detail-shell .project-hero-copy .detail-hero-desc {
        font-size: 0.9rem !important;
    }

    .project-detail-shell .project-hero-inline-bar {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .project-detail-shell .project-hero-term-row a,
    .project-detail-shell .project-hero-meta > *,
    .project-detail-shell .project-cta-button {
        height: auto !important;
        min-height: 2rem !important;
        padding: 0.4rem 0.7rem !important;
        font-size: 0.72rem !important;
    }

    .project-detail-shell .project-cta-group {
        flex-wrap: wrap !important;
    }

    /* Project content/sidebar */
    .project-detail-shell .project-content-shell,
    .project-detail-shell .project-sidebar-card,
    .project-detail-shell .explore-sidebar-card,
    .project-detail-shell .project-related-shell {
        border-radius: 18px !important;
        padding: 1rem !important;
    }

    .project-detail-shell .project-sidebar-card .project-meta-card {
        padding: 0.65rem 0.75rem;
        border-radius: 12px;
    }

    /* Article related */
    .article-related-shell {
        padding: 1rem !important;
        border-radius: 18px;
    }

    .article-related-shell .related-articles-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    /* Article content */
    .article-content-shell {
        padding: 1.1rem !important;
        border-radius: 18px;
    }

    /* Search page */
    .search-hero-form {
        margin-top: 1rem;
    }

    .search-hero-form .wp-block-search__inside-wrapper {
        min-height: 48px;
    }

    /* 404 page */
    .error-page-shell {
        min-height: calc(100vh - 200px);
    }

    /* Explore sidebar CTA */
    .explore-sidebar-card .project-cta-group {
        flex-direction: column;
    }

    .explore-sidebar-card .project-cta-button {
        width: 100%;
    }

    /* Collection hero */
    .collection-hero,
    .search-hero-surface,
    .error-hero-surface {
        padding: 1.25rem;
    }

    /* Project filter chips scrollable */
    .project-filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        padding-bottom: 0.25rem;
    }

    .project-filter-chips::-webkit-scrollbar {
        display: none;
    }

    .project-filter-chip {
        flex-shrink: 0;
        min-height: 38px;
        padding: 0.5rem 0.85rem;
        font-size: 0.82rem;
    }
}

/* ---- ARTICLES PAGE MOBILE ---- */
@media (max-width: 640px) {
    .articles-page-hero {
        padding: 1.5rem 1rem !important;
    }

    .articles-page-title {
        font-size: 1.5rem !important;
    }

    .articles-page-desc {
        font-size: 0.85rem;
    }

    .articles-page-grid .articles-grid-template {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
}

/* ---- FIX: WP Block spacing override trên mobile ---- */
@media (max-width: 768px) {
    /* Fix WordPress block margins/padding trên mobile */
    .wp-block-group.alignwide,
    .wp-block-group.alignfull {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Fix page-shell-card content padding */
    .page-shell-card .content-prose > .alignfull:first-child,
    .page-shell-card .content-prose > .wp-block-group:first-child {
        padding: 1rem !important;
        border-radius: 16px;
    }

    /* Standard page card padding */
    .standard-page-shell .page-shell-card {
        padding: 0.75rem !important;
    }

    .standard-page-shell .page-shell-card .content-prose > .alignfull:first-child,
    .standard-page-shell .page-shell-card .content-prose > .wp-block-group:first-child {
        padding: 1rem !important;
        border-radius: 16px !important;
    }

    /* Legal page fixes */
    .devpulse-page--legal .standard-page-content > .alignfull:first-child > #ez-toc-container,
    .devpulse-page--legal .standard-page-content > .wp-block-group:first-child > #ez-toc-container {
        width: 100% !important;
        max-width: none !important;
    }

    /* Columns stacking trên mobile */
    .content-prose .wp-block-columns {
        flex-direction: column !important;
    }

    .content-prose .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    .page-shell-card .content-prose .wp-block-column {
        padding: 1rem;
        border-radius: 16px;
    }

    /* Info page h1 nhỏ hơn */
    .devpulse-page--info .standard-page-content > .alignfull:first-child > h1:first-of-type,
    .devpulse-page--info .standard-page-content > .wp-block-group:first-child > h1:first-of-type {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    }
}

/* ---- INNER PAGES MOBILE SYSTEM ---- */
@media (max-width: 768px) {
    .inner-page-shell .wp-block-group.alignwide,
    .inner-page-shell .wp-block-group.alignfull {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .inner-page-shell {
        padding: 1.15rem 0 2.35rem !important;
    }

    .inner-page-shell::before,
    .inner-page-shell::after {
        opacity: 0.32;
        filter: blur(48px);
    }

    .inner-page-shell .wp-block-group.alignwide.page-shell-stack,
    .inner-page-shell .page-shell-stack {
        gap: 0.9rem !important;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    .inner-page-shell .page-shell-stack > .devpulse-breadcrumbs {
        margin-bottom: 0 !important;
    }

    .inner-page-shell .devpulse-breadcrumbs {
        width: 100%;
        padding: 0.62rem 0.85rem !important;
        border-radius: 16px !important;
    }

    .inner-page-shell .devpulse-breadcrumbs__item {
        font-size: 0.76rem !important;
    }

    .inner-page-shell .devpulse-breadcrumbs__list {
        display: inline-flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        column-gap: 0 !important;
        row-gap: 0.28rem !important;
    }

    .inner-page-shell .devpulse-breadcrumbs__current {
        max-width: none;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .inner-page-shell .devpulse-breadcrumbs__item + .devpulse-breadcrumbs__item {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .inner-page-shell .devpulse-breadcrumbs__item + .devpulse-breadcrumbs__item::before {
        content: none !important;
        display: none !important;
    }

    .inner-page-shell .devpulse-breadcrumbs__item:not(:last-child)::after {
        content: ">";
        position: static !important;
        display: inline-block;
        vertical-align: middle;
        width: auto;
        height: auto;
        margin: 0 0.34rem 0 0.34rem;
        border: 0 !important;
        transform: none !important;
        font-size: 0.72rem;
        line-height: 1;
        font-weight: 700;
        color: #94a3b8;
        opacity: 1;
    }

    .inner-page-shell .page-hero-surface,
    .inner-page-shell .page-shell-card,
    .inner-page-shell .collection-shell,
    .inner-page-shell .content-shell,
    .inner-page-shell .sidebar-card,
    .inner-page-shell .related-section-shell,
    .inner-page-shell .empty-state-card {
        border-radius: 24px !important;
    }

    .inner-page-shell .page-hero-surface,
    .inner-page-shell .collection-shell,
    .inner-page-shell .content-shell,
    .inner-page-shell .sidebar-card,
    .inner-page-shell .related-section-shell,
    .inner-page-shell .empty-state-card {
        padding: 1rem !important;
    }

    .inner-page-shell .page-shell-card {
        padding: 0.75rem !important;
    }

    .inner-page-shell .page-hero-title {
        font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.045em !important;
        text-wrap: balance;
    }

    .inner-page-shell .page-hero-desc,
    .inner-page-shell .page-hero-note {
        font-size: 0.9rem !important;
        line-height: 1.65 !important;
        text-wrap: pretty;
    }

    .inner-page-shell .page-hero-kicker,
    .inner-page-shell .section-label,
    .inner-page-shell .error-code-pill {
        min-height: 1.8rem !important;
        padding: 0.3rem 0.68rem !important;
        font-size: 0.66rem !important;
        letter-spacing: 0.1em !important;
    }

    .inner-page-shell .content-prose p,
    .inner-page-shell .content-prose li {
        font-size: 0.92rem !important;
        line-height: 1.72 !important;
    }

    .inner-page-shell .content-prose h2 {
        font-size: 1.26rem !important;
        line-height: 1.18 !important;
        margin-top: 1.45rem !important;
    }

    .inner-page-shell .content-prose h3 {
        font-size: 1.06rem !important;
        line-height: 1.24 !important;
        margin-top: 1.05rem !important;
    }

    .inner-page-shell .content-prose > * + * {
        margin-top: 0.95rem !important;
    }

    .inner-page-shell .content-prose blockquote {
        padding: 1rem !important;
        border-radius: 16px !important;
    }

    .inner-page-shell .content-prose pre,
    .inner-page-shell .content-prose .wp-block-code,
    .inner-page-shell .content-prose table {
        border-radius: 16px !important;
    }

    .inner-page-shell .content-prose img,
    .inner-page-shell .content-prose .wp-block-post-featured-image img,
    .inner-page-shell .content-prose .wp-block-image img {
        border-radius: 18px !important;
    }

    .inner-page-shell .detail-content-grid {
        margin-top: 1rem !important;
        gap: 0.95rem !important;
    }

    .inner-page-shell .detail-content-grid > .wp-block-column,
    .inner-page-shell .project-hero-grid > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    .article-detail-shell .detail-hero-copy {
        gap: 0.65rem !important;
        align-items: center !important;
        text-align: center !important;
    }

    .article-detail-shell .detail-hero-desc {
        font-size: 0.9rem !important;
        line-height: 1.62 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .article-detail-shell .hero-meta-cluster {
        width: 100%;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 0.35rem !important;
    }

    .article-detail-shell .hero-meta-cluster > * {
        min-height: 1.95rem !important;
        min-width: 0 !important;
        padding: 0.34rem 0.56rem !important;
        font-size: 0.7rem !important;
        flex: 0 1 auto !important;
    }

    .article-detail-shell .detail-hero-media {
        margin-top: 1rem !important;
        min-height: 180px !important;
        overflow: hidden !important;
        border-radius: 20px !important;
    }

    .article-detail-shell .detail-hero-media a,
    .article-detail-shell .detail-hero-media img {
        border-radius: inherit !important;
    }

    .article-detail-shell .detail-hero-media img {
        transform: none !important;
    }

    .article-detail-shell .article-content-shell {
        padding: 1rem !important;
    }

    .article-related-shell {
        padding: 0.95rem !important;
    }

    .article-related-shell .section-shell-header {
        margin-bottom: 0.8rem !important;
    }

    .article-related-shell .section-shell-header .wp-block-group {
        gap: 0.55rem !important;
        flex-wrap: wrap !important;
    }

    .article-related-shell .section-shell-header .wp-block-heading {
        font-size: 1.24rem !important;
    }

    .article-related-shell .related-articles-grid {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }

    .article-related-shell .article-card {
        border-radius: 18px !important;
    }

    .article-related-shell .article-image-wrapper {
        aspect-ratio: 16 / 9 !important;
    }

    .article-related-shell .card-content {
        padding: 0.85rem !important;
        gap: 0.42rem !important;
    }

    .article-related-shell .card-title a {
        font-size: 0.92rem !important;
    }

    .article-related-shell .wp-block-post-excerpt__excerpt {
        -webkit-line-clamp: 2 !important;
        font-size: 0.78rem !important;
        line-height: 1.55 !important;
    }

    .article-related-shell .card-meta-row {
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
    }

    .project-detail-shell .project-hero-surface {
        padding: 1rem !important;
        border-radius: 24px !important;
    }

    .project-detail-shell .project-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.9rem !important;
    }

    .project-detail-shell .project-hero-media {
        justify-content: flex-start !important;
    }

    .project-detail-shell .project-hero-icon,
    .project-detail-shell .project-hero-icon a {
        width: 84px !important;
        height: 84px !important;
    }

    .project-detail-shell .project-hero-icon img {
        border-radius: 20px !important;
    }

    .project-detail-shell .project-hero-copy {
        gap: 0.6rem !important;
    }

    .project-detail-shell .project-hero-copy .detail-hero-title {
        max-width: none !important;
        font-size: clamp(1.75rem, 8vw, 2.15rem) !important;
        line-height: 1.02 !important;
    }

    .project-detail-shell .project-hero-copy .detail-hero-desc {
        max-width: none !important;
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    .project-detail-shell .project-hero-inline-bar {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        margin-top: 0.1rem !important;
    }

    .project-detail-shell .project-hero-term-row a,
    .project-detail-shell .project-hero-meta > *,
    .project-detail-shell .project-cta-button {
        min-height: 2rem !important;
        height: auto !important;
        padding: 0.44rem 0.72rem !important;
        font-size: 0.72rem !important;
    }

    .project-detail-shell .project-cta-group {
        width: 100%;
        flex-direction: column !important;
    }

    .project-detail-shell .project-cta-button {
        width: 100%;
    }

    .project-detail-shell .project-content-shell,
    .project-detail-shell .project-sidebar-card,
    .project-detail-shell .explore-sidebar-card,
    .project-detail-shell .project-related-shell {
        padding: 1rem !important;
        border-radius: 20px !important;
    }

    .project-detail-shell .project-content-shell > * + * {
        margin-top: 0.85rem !important;
    }

    .project-detail-shell .project-content-shell .section-label {
        min-height: 1.75rem !important;
        padding: 0.3rem 0.7rem !important;
        font-size: 0.64rem !important;
    }

    .project-detail-shell .project-content-shell .wp-block-heading {
        font-size: 1.4rem !important;
    }

    .project-detail-shell .project-content-prose > * + * {
        margin-top: 0.95rem !important;
    }

    .project-detail-shell .project-content-prose p,
    .project-detail-shell .project-content-prose li {
        font-size: 0.92rem !important;
        line-height: 1.7 !important;
    }

    .project-detail-shell .project-content-prose h2 {
        font-size: 1.22rem !important;
        margin-top: 1.35rem !important;
    }

    .project-detail-shell .project-content-prose h3 {
        font-size: 1.02rem !important;
        margin-top: 1rem !important;
    }

    .project-detail-shell .project-sidebar-card,
    .project-detail-shell .explore-sidebar-card {
        gap: 0.85rem !important;
    }

    .project-detail-shell .project-sidebar-card .project-meta-grid {
        gap: 0.65rem !important;
    }

    .project-detail-shell .project-sidebar-card .project-meta-card {
        padding: 0.72rem 0.78rem !important;
        border-radius: 14px !important;
    }

    .project-detail-shell .project-sidebar-card .project-meta-card--actions {
        gap: 0.5rem !important;
    }

    .project-detail-shell .project-sidebar-card .project-store-links--meta:not(.project-store-links--single) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.38rem !important;
        align-items: stretch !important;
    }

    .project-detail-shell .project-sidebar-card .project-store-links--meta:not(.project-store-links--single) > * {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .project-detail-shell .project-sidebar-card .project-meta-action {
        min-height: 2.2rem !important;
        padding: 0 0.42rem !important;
        font-size: 0.72rem !important;
        gap: 0.32rem !important;
    }

    .project-detail-shell .project-sidebar-card .project-store-button__icon,
    .project-detail-shell .project-sidebar-card .project-download-button__icon {
        width: 14px !important;
        height: 14px !important;
    }

    .project-detail-shell .project-sidebar-card .project-store-button__text,
    .project-detail-shell .project-sidebar-card .project-meta-action span {
        font-size: 0.7rem !important;
        line-height: 1 !important;
    }

    .project-detail-shell .project-sidebar-card .project-meta-value,
    .project-detail-shell .project-sidebar-card .project-meta-value a,
    .project-detail-shell .sidebar-copy {
        font-size: 0.82rem !important;
    }

    .project-detail-shell .explore-sidebar-card .project-cta-group {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        margin-top: 0.12rem !important;
    }

    .project-detail-shell .explore-sidebar-card .project-cta-button {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
    }

    .project-detail-shell .project-related-shell {
        padding: 0.95rem !important;
    }

    .project-detail-shell .project-related-shell .section-shell-header {
        margin-bottom: 0.8rem !important;
    }

    .project-detail-shell .project-related-shell .section-shell-header .wp-block-group {
        gap: 0.55rem !important;
        flex-wrap: wrap !important;
    }

    .project-detail-shell .project-related-shell .section-shell-header .wp-block-heading {
        font-size: 1.24rem !important;
    }

    .project-detail-shell .project-related-shell .related-projects-grid {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }

    .project-detail-shell .related-project-card.app-card-v2 {
        padding: 0.9rem !important;
        gap: 0.8rem !important;
        border-radius: 18px !important;
    }

    .project-detail-shell .related-project-card .app-icon-v2,
    .project-detail-shell .related-project-card .wp-block-post-featured-image {
        width: 72px !important;
        height: 72px !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        flex-shrink: 0 !important;
    }

    .project-detail-shell .related-project-card .wp-block-post-featured-image img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        max-width: none !important;
        min-width: 100% !important;
        min-height: 100% !important;
        border-radius: inherit !important;
    }

    .project-detail-shell .related-project-card .wp-block-post-title a {
        font-size: 0.9rem !important;
    }

    .project-detail-shell .related-project-card .app-cat-v2 a,
    .project-detail-shell .related-project-card .wp-block-post-terms a {
        font-size: 0.68rem !important;
    }

    .project-detail-shell .related-project-card .wp-block-post-excerpt__excerpt {
        -webkit-line-clamp: 2 !important;
        font-size: 0.78rem !important;
        line-height: 1.5 !important;
    }

    .project-detail-shell .related-project-card .app-rating-row {
        display: flex !important;
        align-items: center !important;
        gap: 0.28rem !important;
        margin: 0.08rem 0 0 0 !important;
    }

    .project-detail-shell .related-project-card .app-stars,
    .project-detail-shell .related-project-card .stars-container {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.08rem !important;
    }

    .project-detail-shell .related-project-card .star {
        font-size: 0.72rem !important;
    }

    .project-detail-shell .related-project-card .app-score {
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    .standard-page-shell .page-shell-card .content-prose > .alignfull:first-child,
    .standard-page-shell .page-shell-card .content-prose > .wp-block-group:first-child {
        padding: 1rem !important;
        border-radius: 18px !important;
    }

    .page-shell-card .content-prose > .alignfull:first-child .wp-block-heading:first-child,
    .page-shell-card .content-prose > .wp-block-group:first-child .wp-block-heading:first-child {
        font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
        line-height: 1.05 !important;
        text-wrap: balance;
    }

    .page-shell-card .content-prose .wp-block-column {
        padding: 0.9rem !important;
        border-radius: 18px !important;
    }

    .search-page-shell .page-hero-surface,
    .error-page-shell .page-hero-surface {
        text-align: left;
    }

    .search-page-shell .page-hero-title,
    .error-page-shell .page-hero-title {
        text-align: left !important;
    }

    .search-page-shell .page-hero-desc,
    .error-page-shell .page-hero-desc {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }

    .collection-page-shell .collection-hero--term {
        align-items: center !important;
        gap: 0.72rem !important;
        text-align: center !important;
    }

    .collection-page-shell .collection-hero--term .archive-hero-title,
    .collection-page-shell .collection-hero--term .archive-hero-desc {
        max-width: none !important;
        text-align: center !important;
    }

    .collection-page-shell .collection-hero--term .project-filter-chips {
        justify-content: center !important;
        margin-top: 0.18rem !important;
    }

    .collection-page-shell .project-filter-chips {
        gap: 0.45rem !important;
        padding-bottom: 0.1rem !important;
    }

    .collection-page-shell .project-filter-chip {
        min-height: 2rem !important;
        padding: 0.45rem 0.72rem !important;
        font-size: 0.74rem !important;
    }

    .articles-page-shell .collection-hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0.94rem 0.82rem 0.88rem !important;
        border-radius: 24px !important;
        gap: 0 !important;
    }

    .articles-page-shell .collection-hero > * {
        margin: 0 !important;
    }

    .articles-page-shell .collection-hero > * + * {
        margin-top: 0.7rem !important;
    }

    .articles-page-shell .collection-hero .page-hero-kicker {
        min-height: 1.68rem !important;
        padding: 0.16rem 0.68rem !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.07em !important;
    }

    .articles-page-shell .collection-hero .page-hero-title {
        font-size: clamp(2rem, 9.2vw, 2.4rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.045em !important;
        max-width: none !important;
    }

    .articles-page-shell .collection-hero .page-hero-desc {
        width: 100% !important;
        max-width: none !important;
        font-size: 0.82rem !important;
        line-height: 1.54 !important;
        text-wrap: balance !important;
    }

    .projects-collection-shell .project-collection-hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0.94rem 0.82rem 0.88rem !important;
        border-radius: 24px !important;
        gap: 0 !important;
    }

    .projects-collection-shell .project-collection-hero > * {
        margin: 0 !important;
    }

    .projects-collection-shell .project-collection-hero > * + * {
        margin-top: 0.7rem !important;
    }

    .projects-collection-shell .project-collection-hero .page-hero-kicker {
        min-height: 1.68rem !important;
        padding: 0.16rem 0.68rem !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.07em !important;
    }

    .projects-collection-shell .project-collection-hero .page-hero-title {
        font-size: clamp(2rem, 9.4vw, 2.4rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.045em !important;
        max-width: none !important;
    }

    .projects-collection-shell .project-collection-hero .page-hero-desc {
        width: 100% !important;
        max-width: none !important;
        font-size: 0.82rem !important;
        line-height: 1.54 !important;
        text-wrap: balance !important;
    }

    .projects-collection-shell .project-collection-hero .project-filter-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: center !important;
        gap: 0.38rem !important;
        margin-top: 0.78rem !important;
        padding-bottom: 0.06rem !important;
        scrollbar-width: none !important;
    }

    .projects-collection-shell .project-collection-hero .project-filter-chips::-webkit-scrollbar {
        display: none !important;
    }

    .projects-collection-shell .project-collection-hero .project-filter-chip {
        flex-shrink: 0 !important;
        min-height: 1.56rem !important;
        padding: 0.14rem 0.54rem !important;
        font-size: 0.72rem !important;
        box-shadow: 0 8px 18px -18px rgba(15, 23, 42, 0.12) !important;
    }

    .collection-page-shell .project-archive-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .collection-page-shell .related-project-card.app-card-v2,
    .collection-page-shell .app-card-v2.related-project-card {
        padding: 0.9rem !important;
        gap: 0.8rem !important;
        border-radius: 18px !important;
    }

    .collection-page-shell .related-project-card .app-icon-v2,
    .collection-page-shell .related-project-card .wp-block-post-featured-image {
        width: 72px !important;
        height: 72px !important;
    }

    .collection-page-shell .related-project-card .app-rating-row,
    .collection-page-shell .app-card-v2.related-project-card .app-rating-row,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-rating-row {
        display: flex !important;
        align-items: center !important;
        gap: 0.24rem !important;
        margin: 0.08rem 0 0 0 !important;
        height: auto !important;
    }

    .collection-page-shell .related-project-card .app-stars,
    .collection-page-shell .app-card-v2.related-project-card .app-stars,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-stars,
    .collection-page-shell .related-project-card .stars-container,
    .collection-page-shell .app-card-v2.related-project-card .stars-container,
    .projects-collection-shell .project-archive-grid .app-card-v2 .stars-container {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.06rem !important;
        margin-right: 0.22rem !important;
    }

    .collection-page-shell .related-project-card .star,
    .collection-page-shell .app-card-v2.related-project-card .star,
    .projects-collection-shell .project-archive-grid .app-card-v2 .star {
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }

    .collection-page-shell .related-project-card .app-score,
    .collection-page-shell .app-card-v2.related-project-card .app-score,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-score {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: #475569 !important;
    }

    .search-hero-form {
        margin-top: 0.85rem !important;
    }

    .search-hero-form .wp-block-search__inside-wrapper {
        min-height: 46px !important;
        border-radius: 16px !important;
    }

    .error-page-shell .project-cta-group {
        width: 100%;
        flex-direction: column !important;
    }

    .error-page-shell .project-cta-button {
        width: 100%;
    }

    .inner-page-shell .page-shell-stack,
    .inner-page-shell .page-shell-stack > *,
    .inner-page-shell .detail-content-grid > *,
    .inner-page-shell .project-detail-grid > *,
    .inner-page-shell .card-content,
    .inner-page-shell .content-shell,
    .inner-page-shell .sidebar-card,
    .inner-page-shell .related-section-shell,
    .inner-page-shell .collection-shell,
    .inner-page-shell .article-card,
    .inner-page-shell .app-card-v2,
    .inner-page-shell .related-project-card {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .inner-page-shell .page-hero-title,
    .inner-page-shell .detail-hero-title,
    .inner-page-shell .sidebar-card-title,
    .inner-page-shell .section-shell-header .wp-block-heading,
    .inner-page-shell .card-title a,
    .inner-page-shell .wp-block-post-title a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .inner-page-shell .devpulse-breadcrumbs__link,
    .inner-page-shell .devpulse-breadcrumbs__current {
        display: inline !important;
    }

    .inner-page-shell .page-hero-desc,
    .inner-page-shell .detail-hero-desc,
    .inner-page-shell .sidebar-copy,
    .inner-page-shell .search-meta-note,
    .inner-page-shell .project-meta-value,
    .inner-page-shell .project-meta-value a,
    .inner-page-shell .wp-block-post-excerpt__excerpt,
    .inner-page-shell .content-prose p,
    .inner-page-shell .content-prose li {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .inner-page-shell .content-prose pre,
    .inner-page-shell .content-prose .wp-block-code {
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 0.95rem !important;
    }

    .inner-page-shell .content-prose pre code,
    .inner-page-shell .content-prose .wp-block-code code {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: break-spaces !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        font-size: 0.78rem !important;
        line-height: 1.58 !important;
    }

    .inner-page-shell .content-prose pre[class*="language-"],
    .inner-page-shell .content-prose pre[class*="language-"] code[class*="language-"] {
        white-space: break-spaces !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        tab-size: 2;
    }

    .inner-page-shell .content-prose code:not(.wp-block-code code) {
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .inner-page-shell .content-prose .wp-block-table {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .inner-page-shell .content-prose table {
        min-width: 520px !important;
        width: max-content !important;
        max-width: none !important;
    }

    .inner-page-shell .content-prose th,
    .inner-page-shell .content-prose td {
        white-space: nowrap;
    }

    .inner-page-shell .sidebar-tax-list,
    .inner-page-shell .sidebar-tax-list--keywords,
    .inner-page-shell .sidebar-keywords {
        gap: 0.45rem !important;
    }

    .inner-page-shell .sidebar-tax-list a,
    .inner-page-shell .sidebar-keyword-chip,
    .inner-page-shell .sidebar-keywords a {
        max-width: 100%;
        min-height: 1.95rem !important;
        padding: 0.34rem 0.62rem !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.25 !important;
        text-align: left;
    }

    .inner-page-shell .hero-meta-cluster > *,
    .inner-page-shell .project-hero-term-row a,
    .inner-page-shell .project-hero-meta > *,
    .inner-page-shell .project-cta-button,
    .inner-page-shell .project-filter-chip,
    .inner-page-shell .wp-block-query-pagination-numbers .page-numbers,
    .inner-page-shell .wp-block-query-pagination-previous a,
    .inner-page-shell .wp-block-query-pagination-next a {
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        text-align: center;
    }

    .inner-page-shell .search-hero-form,
    .inner-page-shell .search-hero-form .wp-block-search__inside-wrapper {
        max-width: 100% !important;
    }

    .inner-page-shell .search-hero-form .wp-block-search__inside-wrapper {
        padding-left: 0.8rem !important;
        padding-right: 0.25rem !important;
    }

    .inner-page-shell .search-hero-form .wp-block-search__input {
        min-width: 0 !important;
        font-size: 0.9rem !important;
    }

    .inner-page-shell .wp-block-query-pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.4rem !important;
        margin-top: 1rem !important;
    }

    .inner-page-shell .wp-block-query-pagination > * {
        margin: 0 !important;
    }

    .inner-page-shell .wp-block-query-pagination-numbers,
    .inner-page-shell .wp-block-query-pagination-previous,
    .inner-page-shell .wp-block-query-pagination-next {
        min-width: 0 !important;
    }

    .search-page-shell .article-card {
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .search-page-shell .article-image-wrapper {
        aspect-ratio: 16 / 9 !important;
    }

    .search-page-shell .card-content {
        padding: 0.88rem !important;
        gap: 0.44rem !important;
    }

    .search-page-shell .card-title a {
        font-size: 0.95rem !important;
        line-height: 1.34 !important;
    }

    .search-page-shell .wp-block-post-excerpt__excerpt {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        font-size: 0.8rem !important;
        line-height: 1.56 !important;
    }

    .search-page-shell .card-meta-row {
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        padding-top: 0.65rem !important;
    }

    .standard-page-shell .content-prose .wp-block-columns {
        gap: 0.75rem !important;
    }
}

/* ---- MOBILE TYPOGRAPHY OPTIMIZATION ---- */
@media (max-width: 768px) {
    body.home .hero-badge {
        font-size: 0.68rem !important;
    }

    body.home .hero-title {
        font-size: clamp(1.6rem, 6.8vw, 2rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.04em !important;
    }

    body.home .hero-subtitle {
        max-width: 34ch;
        font-size: 0.88rem !important;
        line-height: 1.58 !important;
    }

    body.home .hero-stat-value {
        font-size: 1.28rem !important;
    }

    body.home .hero-stat-label {
        font-size: 0.68rem !important;
    }

    body.home .section-header .wp-block-group:first-child .wp-block-heading {
        font-size: 1rem !important;
    }

    body.home .section-subtitle,
    body.home .view-all-link a {
        font-size: 0.76rem !important;
    }

    body.home .bento-grid .bento-grid-template > li:first-child .card-title a {
        font-size: 1rem !important;
        line-height: 1.28 !important;
    }

    body.home .card-title a,
    body.home .card-content .wp-block-post-title a,
    body.home .article-card .wp-block-post-title a {
        font-size: 0.92rem !important;
        line-height: 1.32 !important;
    }

    body.home .article-excerpt .wp-block-post-excerpt__excerpt,
    body.home .article-card .wp-block-post-excerpt__excerpt,
    body.home .bento-grid .bento-grid-template > li:first-child .card-excerpt {
        font-size: 0.78rem !important;
        line-height: 1.52 !important;
    }

    body.home .devpulse-post-date,
    body.home .devpulse-view-count,
    body.home .devpulse-reading-time,
    body.home .category-badge a,
    body.home .single-category a {
        font-size: 0.68rem !important;
    }

    body.home .topic-title {
        font-size: 0.84rem !important;
        line-height: 1.28 !important;
    }

    body.home .topic-desc {
        font-size: 0.68rem !important;
        line-height: 1.5 !important;
    }

    body.home .why-choose-title {
        font-size: 1.02rem !important;
        line-height: 1.2 !important;
    }

    body.home .why-choose-subtitle,
    body.home .feature-desc {
        font-size: 0.76rem !important;
        line-height: 1.56 !important;
    }

    body.home .feature-title {
        font-size: 0.8rem !important;
        line-height: 1.28 !important;
    }

    body.home .footer-logo .logo-text {
        font-size: 0.94rem !important;
    }

    body.home .footer-description,
    body.home .footer-nav a {
        font-size: 0.76rem !important;
        line-height: 1.55 !important;
    }

    body.home .footer-col-title {
        font-size: 0.66rem !important;
    }

    body.home .footer-copyright,
    body.home .footer-credit {
        font-size: 0.68rem !important;
        line-height: 1.5 !important;
    }

    .inner-page-shell .devpulse-breadcrumbs__item {
        font-size: 0.73rem !important;
        line-height: 1.28 !important;
    }

    .inner-page-shell .page-hero-title {
        font-size: clamp(1.65rem, 7vw, 2rem) !important;
        line-height: 1.03 !important;
    }

    .project-detail-shell .project-hero-copy .detail-hero-title {
        font-size: clamp(1.48rem, 6.8vw, 1.78rem) !important;
        line-height: 1.1 !important;
    }

    .inner-page-shell .page-hero-desc,
    .inner-page-shell .detail-hero-desc,
    .inner-page-shell .page-hero-note {
        font-size: 0.86rem !important;
        line-height: 1.58 !important;
    }

    .inner-page-shell .page-hero-kicker,
    .inner-page-shell .section-label,
    .inner-page-shell .error-code-pill,
    .inner-page-shell .hero-meta-cluster > *,
    .inner-page-shell .project-hero-term-row a,
    .inner-page-shell .project-hero-meta > *,
    .inner-page-shell .project-cta-button,
    .inner-page-shell .project-filter-chip,
    .inner-page-shell .wp-block-query-pagination-numbers .page-numbers,
    .inner-page-shell .wp-block-query-pagination-previous a,
    .inner-page-shell .wp-block-query-pagination-next a {
        font-size: 0.67rem !important;
    }

    .inner-page-shell .content-prose p,
    .inner-page-shell .content-prose li,
    .project-detail-shell .project-content-prose p,
    .project-detail-shell .project-content-prose li {
        font-size: 0.89rem !important;
        line-height: 1.68 !important;
    }

    .inner-page-shell .content-prose h2,
    .project-detail-shell .project-content-prose h2 {
        font-size: 1.18rem !important;
        line-height: 1.18 !important;
    }

    .inner-page-shell .content-prose h3,
    .project-detail-shell .project-content-prose h3 {
        font-size: 1rem !important;
        line-height: 1.24 !important;
    }

    .inner-page-shell .sidebar-card-title {
        font-size: 0.92rem !important;
        line-height: 1.2 !important;
    }

    .inner-page-shell .sidebar-copy,
    .inner-page-shell .project-meta-value,
    .inner-page-shell .project-meta-value a,
    .inner-page-shell .sidebar-tax-list a,
    .inner-page-shell .sidebar-keyword-chip,
    .inner-page-shell .sidebar-keywords a,
    .inner-page-shell .sidebar-meta-list > * {
        font-size: 0.79rem !important;
        line-height: 1.52 !important;
    }

    .project-detail-shell .page-shell-stack .project-related-shell .related-project-card.app-card-v2 {
        align-items: flex-start !important;
    }

    .project-detail-shell .page-shell-stack .project-related-shell .related-project-card .app-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 0.42rem !important;
        padding-top: 0 !important;
    }

    .project-detail-shell .page-shell-stack .project-related-shell .related-project-card .wp-block-post-title {
        margin: 0 0 0.1rem 0 !important;
    }

    .project-detail-shell .page-shell-stack .project-related-shell .related-project-card .wp-block-post-terms,
    .project-detail-shell .page-shell-stack .project-related-shell .related-project-card .app-rating-row {
        margin: 0.06rem 0 0 0 !important;
    }

    .project-detail-shell .page-shell-stack .project-related-shell .related-project-card .wp-block-post-excerpt {
        margin: 0.1rem 0 0 0 !important;
    }

    .article-related-shell .section-shell-header .wp-block-heading,
    .project-detail-shell .project-related-shell .section-shell-header .wp-block-heading,
    .inner-page-shell .content-shell > .wp-block-heading {
        font-size: 1.14rem !important;
        line-height: 1.15 !important;
    }

    .article-related-shell .card-title a,
    .project-detail-shell .related-project-card .wp-block-post-title a,
    .collection-page-shell .card-title a,
    .search-page-shell .card-title a {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    .article-related-shell .wp-block-post-excerpt__excerpt,
    .project-detail-shell .related-project-card .wp-block-post-excerpt__excerpt,
    .collection-page-shell .wp-block-post-excerpt__excerpt,
    .search-page-shell .wp-block-post-excerpt__excerpt {
        font-size: 0.76rem !important;
        line-height: 1.58 !important;
    }

    .search-hero-form .wp-block-search__input {
        font-size: 0.86rem !important;
    }
}

@media (max-width: 480px) {
    body.home .hero-title {
        font-size: clamp(1.48rem, 7.8vw, 1.86rem) !important;
    }

    body.home .hero-subtitle {
        font-size: 0.84rem !important;
        line-height: 1.55 !important;
    }

    .inner-page-shell .page-hero-title {
        font-size: clamp(1.56rem, 7.6vw, 1.88rem) !important;
    }

    .article-detail-shell .detail-hero-title,
    .project-detail-shell .project-hero-copy .detail-hero-title {
        font-size: clamp(1.44rem, 7vw, 1.72rem) !important;
    }

    .inner-page-shell .page-hero-desc,
    .inner-page-shell .detail-hero-desc,
    .inner-page-shell .page-hero-note,
    .inner-page-shell .content-prose p,
    .inner-page-shell .content-prose li {
        font-size: 0.85rem !important;
    }
}

/* ---- ARTICLE HERO TITLE FINAL OVERRIDE ---- */
.article-detail-shell .page-shell-stack {
    --dp-page-hero-size: clamp(1.65rem, 2.15vw, 2.45rem);
    --dp-detail-hero-size: clamp(1.65rem, 2.15vw, 2.45rem);
    --dp-article-hero-copy-width: min(100%, 64rem);
    --dp-article-hero-title-width: min(100%, 36ch);
    --dp-article-hero-desc-width: min(100%, 68ch);
}

.article-detail-shell .page-shell-stack .detail-hero-copy {
    width: var(--dp-article-hero-copy-width) !important;
}

.article-detail-shell .page-shell-stack .page-hero-title.detail-hero-title {
    width: var(--dp-article-hero-title-width) !important;
    max-width: none !important;
    margin: 0 auto !important;
    font-size: var(--dp-detail-hero-size) !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-wrap: balance;
}

.article-detail-shell .page-shell-stack .page-hero-title {
    font-size: var(--dp-page-hero-size) !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
}

.article-detail-shell .page-shell-stack .detail-hero-title {
    font-size: var(--dp-detail-hero-size) !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
}

.article-detail-shell .page-shell-stack .detail-hero-desc {
    width: var(--dp-article-hero-desc-width) !important;
    max-width: none !important;
    margin: 0 auto !important;
}

@media (min-width: 781px) {
    .article-detail-shell .page-shell-stack .hero-meta-cluster {
        gap: 0.8rem !important;
        margin-top: 0 !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster > * {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        min-height: 2.24rem !important;
        padding: 0.38rem 0.9rem !important;
        border-radius: 999px !important;
        border: 1px solid rgba(96, 165, 250, 0.42) !important;
        background:
            linear-gradient(135deg, rgba(239, 249, 255, 0.98) 0%, rgba(228, 244, 255, 0.92) 30%, rgba(255, 255, 255, 0.86) 60%, rgba(223, 249, 238, 0.88) 100%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.56)),
            radial-gradient(circle at 16% 18%, rgba(56, 189, 248, 0.24), transparent 52%),
            radial-gradient(circle at 88% 84%, rgba(45, 212, 191, 0.19), transparent 44%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.98),
            inset 0 -1px 0 rgba(255, 255, 255, 0.42),
            0 0 0 1px rgba(186, 230, 253, 0.42),
            0 18px 32px -26px rgba(14, 165, 233, 0.32),
            0 14px 26px -22px rgba(34, 197, 94, 0.08),
            0 10px 20px -18px rgba(15, 23, 42, 0.12) !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster > *::before {
        content: "" !important;
        position: absolute !important;
        inset: 1px 1px auto 1px !important;
        height: 52% !important;
        border-radius: inherit !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.1)) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster > *::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        border-radius: inherit !important;
        background: linear-gradient(100deg, rgba(56, 189, 248, 0.09) 8%, rgba(96, 165, 250, 0.05) 46%, rgba(45, 212, 191, 0.045) 100%) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster > p {
        margin: 0 !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster > p > span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.38rem !important;
        position: relative !important;
        z-index: 1 !important;
        opacity: 1 !important;
        filter: none !important;
        text-shadow: none !important;
        transform: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        line-height: 1 !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster .devpulse-post-date,
    .article-detail-shell .page-shell-stack .hero-meta-cluster .devpulse-view-count,
    .article-detail-shell .page-shell-stack .hero-meta-cluster .devpulse-reading-time {
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        color: #5f7389 !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster .devpulse-post-date svg,
    .article-detail-shell .page-shell-stack .hero-meta-cluster .devpulse-view-count svg,
    .article-detail-shell .page-shell-stack .hero-meta-cluster .devpulse-reading-time svg {
        width: 0.92rem !important;
        height: 0.92rem !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        color: #627c94 !important;
    }
}

@media (max-width: 780px) {
    .article-detail-shell .page-shell-stack .detail-hero-surface {
        padding: 1.15rem 0.95rem 1rem !important;
        border-radius: 28px !important;
    }

    .article-detail-shell .page-shell-stack .detail-hero-copy {
        gap: 0.85rem !important;
        width: 100% !important;
    }

    .article-detail-shell .page-shell-stack .detail-hero-copy .category-badge {
        width: 100% !important;
        justify-content: center !important;
    }

    .article-detail-shell .page-shell-stack .detail-hero-copy .category-badge a {
        min-height: 2rem !important;
        padding: 0.44rem 0.9rem !important;
        border-radius: 999px !important;
        border: 1px solid rgba(125, 211, 252, 0.34) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52)),
            linear-gradient(135deg, rgba(224, 242, 254, 0.74), rgba(255, 255, 255, 0.52), rgba(232, 250, 245, 0.54)) !important;
        color: #0284c7 !important;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 14px 24px -22px rgba(14, 165, 233, 0.24) !important;
    }

    .article-detail-shell .page-shell-stack .page-hero-title.detail-hero-title {
        width: min(100%, 16.8ch) !important;
        max-width: none !important;
        margin: 0 auto !important;
        font-size: clamp(1.5rem, 6.7vw, 1.84rem) !important;
        line-height: 1.14 !important;
        letter-spacing: -0.02em !important;
        text-wrap: balance !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster {
        width: 100% !important;
        margin-top: 0.05rem !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-evenly !important;
        align-items: center !important;
        gap: 0 !important;
        padding-inline: 0 !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster > * {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        min-height: 2rem !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 0.3rem 0.46rem !important;
        border-radius: 999px !important;
        border: 1px solid rgba(96, 165, 250, 0.28) !important;
        background:
            linear-gradient(135deg, rgba(239, 249, 255, 0.96) 0%, rgba(228, 244, 255, 0.88) 34%, rgba(255, 255, 255, 0.82) 64%, rgba(223, 249, 238, 0.74) 100%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.54)),
            radial-gradient(circle at 16% 18%, rgba(56, 189, 248, 0.18), transparent 52%),
            radial-gradient(circle at 88% 84%, rgba(45, 212, 191, 0.12), transparent 44%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.96),
            0 0 0 1px rgba(186, 230, 253, 0.24),
            0 14px 24px -22px rgba(14, 165, 233, 0.18) !important;
        flex: 0 1 auto !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster > *::before {
        content: "" !important;
        position: absolute !important;
        inset: 1px 1px auto 1px !important;
        height: 50% !important;
        border-radius: inherit !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08)) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster > p {
        margin: 0 !important;
        width: auto !important;
        flex: 0 1 auto !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster > p > span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.2rem !important;
        position: relative !important;
        z-index: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster .devpulse-post-date,
    .article-detail-shell .page-shell-stack .hero-meta-cluster .devpulse-view-count,
    .article-detail-shell .page-shell-stack .hero-meta-cluster .devpulse-reading-time {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        color: #5f7389 !important;
        white-space: nowrap !important;
    }

    .article-detail-shell .page-shell-stack .hero-meta-cluster .devpulse-post-date svg,
    .article-detail-shell .page-shell-stack .hero-meta-cluster .devpulse-view-count svg,
    .article-detail-shell .page-shell-stack .hero-meta-cluster .devpulse-reading-time svg {
        width: 0.74rem !important;
        height: 0.74rem !important;
        flex: 0 0 auto !important;
        color: #627c94 !important;
    }

    .article-detail-shell .page-shell-stack .detail-hero-media {
        margin-top: 0.95rem !important;
        border-radius: 22px !important;
        min-height: 0 !important;
    }

    .article-detail-shell .page-shell-stack .detail-hero-media a,
    .article-detail-shell .page-shell-stack .detail-hero-media img {
        border-radius: inherit !important;
    }

    .article-detail-shell .page-shell-stack .explore-sidebar-card .project-cta-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.45rem !important;
        width: 100% !important;
    }

    .article-detail-shell .page-shell-stack .explore-sidebar-card .project-cta-button {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 2.42rem !important;
        padding: 0 0.82rem !important;
        border-radius: 9999px !important;
        font-size: 0.76rem !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(14, 165, 233, 0.22) !important;
    }

    .article-detail-shell .page-shell-stack .explore-sidebar-card .project-cta-button-primary {
        color: #ffffff !important;
        background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%) !important;
        box-shadow: 0 4px 15px rgba(14, 165, 233, 0.28) !important;
    }

    .article-detail-shell .page-shell-stack .explore-sidebar-card .project-cta-button-secondary {
        color: #ffffff !important;
        background: linear-gradient(135deg, #06b6d4 0%, #0d9488 100%) !important;
        box-shadow: 0 4px 15px rgba(6, 182, 212, 0.26) !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-surface {
        padding: 1.02rem !important;
        border-radius: 28px !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-grid {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr) !important;
        align-items: start !important;
        column-gap: 0.95rem !important;
        row-gap: 0.62rem !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-grid > .wp-block-column {
        display: contents !important;
        width: auto !important;
        flex-basis: auto !important;
        margin: 0 !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-media {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-icon,
    .project-detail-shell .page-shell-stack .project-hero-icon a {
        width: 88px !important;
        height: 88px !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-icon img {
        border-radius: 22px !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        box-shadow: 0 16px 30px -24px rgba(15, 23, 42, 0.18) !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-copy {
        display: contents !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-copy-main {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-self: start !important;
        gap: 0.42rem !important;
        min-width: 0 !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-copy .detail-hero-title {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        font-size: clamp(1.46rem, 6.1vw, 1.8rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.02em !important;
        text-align: left !important;
        text-wrap: pretty !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-copy .detail-hero-desc {
        max-width: none !important;
        margin: 0 !important;
        font-size: 0.86rem !important;
        line-height: 1.5 !important;
        text-align: left !important;
        text-wrap: pretty !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-inline-bar {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 0.18rem !important;
        gap: 0.5rem !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-meta-row {
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.42rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-term-row,
    .project-detail-shell .page-shell-stack .project-hero-meta {
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-term-row a,
    .project-detail-shell .page-shell-stack .project-hero-meta > * {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 1.98rem !important;
        min-height: 1.98rem !important;
        padding: 0 0.76rem !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-term-row a {
        border: 1px solid rgba(14, 165, 233, 0.16) !important;
        background: rgba(14, 165, 233, 0.1) !important;
        color: #0284c7 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-meta {
        gap: 0.42rem !important;
        flex-wrap: wrap !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-meta > * {
        border: 1px solid rgba(203, 213, 225, 0.88) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        box-shadow: none !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-meta .app-rating {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 1.98rem !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        color: #0f172a !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        gap: 0.28rem !important;
        box-sizing: border-box !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-meta .devpulse-view-count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 1.98rem !important;
        padding: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        gap: 0.28rem !important;
        box-sizing: border-box !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-meta .devpulse-view-count svg {
        width: 12px !important;
        height: 12px !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-inline-bar .project-cta-group {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.4rem !important;
        width: 100% !important;
        max-width: 26rem !important;
        margin: 0 !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-inline-bar .project-cta-group > :last-child:nth-child(odd) {
        grid-column: auto !important;
        width: 100% !important;
        justify-self: stretch !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-inline-bar .project-cta-button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 2.28rem !important;
        padding: 0 0.48rem !important;
        border-radius: 999px !important;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-shadow: 0 14px 26px -20px rgba(15, 23, 42, 0.22) !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-inline-bar .project-store-button {
        width: 100% !important;
        min-height: 2.28rem !important;
        padding: 0 0.48rem !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-inline-bar .project-store-button__icon {
        width: 14px !important;
        height: 14px !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-inline-bar .project-store-button__text,
    .project-detail-shell .page-shell-stack .project-hero-inline-bar .project-cta-button-download span {
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-inline-bar .project-cta-button-download {
        gap: 0.34rem !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-inline-bar .project-cta-button-primary {
        color: #ffffff !important;
        background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%) !important;
        border: 0 !important;
    }

    .project-detail-shell .page-shell-stack .project-hero-inline-bar .project-cta-button-secondary {
        color: #ffffff !important;
        background: linear-gradient(135deg, #06b6d4 0%, #0d9488 100%) !important;
        border: 0 !important;
    }
}
@media (min-width: 1025px) {
    .project-detail-shell .project-sidebar-card .project-meta-card.project-meta-card--actions {
        display: grid !important;
        grid-template-rows: auto auto !important;
        align-content: start !important;
        row-gap: 0.75rem !important;
    }

    .project-detail-shell .project-sidebar-card .project-meta-card.project-meta-card--actions .project-store-links--meta {
        align-self: start !important;
    }

    .project-detail-shell .project-cta-group .project-store-button__text,
    .project-detail-shell .project-cta-group .project-cta-button-download span {
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }
}

/* ========================================
   COLLECTION PAGINATION
   Refined archive/search/article pagination
   ======================================== */

.archive-page-shell .wp-block-query-pagination,
.collection-page-shell .wp-block-query-pagination,
.search-page-shell .wp-block-query-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.55rem !important;
    margin-top: 1.9rem !important;
    padding-top: 0.2rem !important;
}

.archive-page-shell .wp-block-query-pagination > *,
.collection-page-shell .wp-block-query-pagination > *,
.search-page-shell .wp-block-query-pagination > * {
    margin: 0 !important;
}

.archive-page-shell .wp-block-query-pagination-numbers,
.collection-page-shell .wp-block-query-pagination-numbers,
.search-page-shell .wp-block-query-pagination-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.archive-page-shell .wp-block-query-pagination-numbers .page-numbers,
.collection-page-shell .wp-block-query-pagination-numbers .page-numbers,
.search-page-shell .wp-block-query-pagination-numbers .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.35rem !important;
    height: 2.35rem !important;
    padding: 0 0.7rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(203, 213, 225, 0.92) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
    color: #334155 !important;
    font-size: 0.89rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 8px 18px -16px rgba(15, 23, 42, 0.12) !important;
    transition:
        transform 0.22s cubic-bezier(0.2, 0, 0, 1),
        background-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease !important;
}

.archive-page-shell .wp-block-query-pagination-numbers .page-numbers:hover,
.collection-page-shell .wp-block-query-pagination-numbers .page-numbers:hover,
.search-page-shell .wp-block-query-pagination-numbers .page-numbers:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(125, 211, 252, 0.9) !important;
    background: rgba(240, 249, 255, 0.98) !important;
    color: #0284c7 !important;
    box-shadow: 0 10px 18px -16px rgba(14, 165, 233, 0.22) !important;
}

.archive-page-shell .wp-block-query-pagination-numbers .page-numbers.current,
.collection-page-shell .wp-block-query-pagination-numbers .page-numbers.current,
.search-page-shell .wp-block-query-pagination-numbers .page-numbers.current {
    background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    border-color: rgba(14, 165, 233, 0.12) !important;
    box-shadow:
        0 14px 22px -18px rgba(14, 165, 233, 0.48),
        0 12px 20px -18px rgba(139, 92, 246, 0.36) !important;
}

.archive-page-shell .wp-block-query-pagination-previous,
.archive-page-shell .wp-block-query-pagination-next,
.collection-page-shell .wp-block-query-pagination-previous,
.collection-page-shell .wp-block-query-pagination-next,
.search-page-shell .wp-block-query-pagination-previous,
.search-page-shell .wp-block-query-pagination-next {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.archive-page-shell :is(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next, .wp-block-query-pagination-previous > a, .wp-block-query-pagination-next > a),
.collection-page-shell :is(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next, .wp-block-query-pagination-previous > a, .wp-block-query-pagination-next > a),
.search-page-shell :is(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next, .wp-block-query-pagination-previous > a, .wp-block-query-pagination-next > a) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 4.55rem !important;
    height: 2.35rem !important;
    padding: 0 1rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(203, 213, 225, 0.92) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
    color: #0f172a !important;
    font-size: 0.89rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 8px 18px -16px rgba(15, 23, 42, 0.12) !important;
    transition:
        transform 0.22s cubic-bezier(0.2, 0, 0, 1),
        box-shadow 0.22s ease,
        color 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease !important;
}

.archive-page-shell :is(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next, .wp-block-query-pagination-previous > a, .wp-block-query-pagination-next > a):hover,
.collection-page-shell :is(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next, .wp-block-query-pagination-previous > a, .wp-block-query-pagination-next > a):hover,
.search-page-shell :is(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next, .wp-block-query-pagination-previous > a, .wp-block-query-pagination-next > a):hover {
    transform: translateY(-1px) !important;
    border-color: rgba(125, 211, 252, 0.95) !important;
    background: rgba(240, 249, 255, 0.98) !important;
    color: #0369a1 !important;
    box-shadow:
        0 10px 18px -16px rgba(14, 165, 233, 0.22) !important;
}

@media (max-width: 780px) {
    .archive-page-shell .wp-block-query-pagination,
    .collection-page-shell .wp-block-query-pagination,
    .search-page-shell .wp-block-query-pagination {
        gap: 0.5rem !important;
        margin-top: 1.7rem !important;
        padding-top: 0.15rem !important;
    }

    .archive-page-shell .wp-block-query-pagination-numbers,
    .collection-page-shell .wp-block-query-pagination-numbers,
    .search-page-shell .wp-block-query-pagination-numbers {
        gap: 0.42rem !important;
        padding: 0 !important;
    }

    .archive-page-shell .wp-block-query-pagination-numbers .page-numbers,
    .collection-page-shell .wp-block-query-pagination-numbers .page-numbers,
    .search-page-shell .wp-block-query-pagination-numbers .page-numbers {
        min-width: 2.15rem !important;
        height: 2.15rem !important;
        padding: 0 0.56rem !important;
        font-size: 0.8rem !important;
    }

    .archive-page-shell :is(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next, .wp-block-query-pagination-previous > a, .wp-block-query-pagination-next > a),
    .collection-page-shell :is(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next, .wp-block-query-pagination-previous > a, .wp-block-query-pagination-next > a),
    .search-page-shell :is(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next, .wp-block-query-pagination-previous > a, .wp-block-query-pagination-next > a) {
        min-width: 4.1rem !important;
        height: 2.15rem !important;
        padding: 0 0.82rem !important;
        font-size: 0.79rem !important;
    }
}

@media (min-width: 781px) {
    .articles-page-shell .collection-hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 1.58rem 2.1rem 1.95rem !important;
        border-radius: 34px !important;
        gap: 0 !important;
    }

    .articles-page-shell .collection-hero > * {
        margin: 0 !important;
    }

    .articles-page-shell .collection-hero > * + * {
        margin-top: 0.82rem !important;
    }

    .articles-page-shell .collection-hero .page-hero-kicker {
        min-height: 2.08rem !important;
        padding: 0.26rem 0.98rem !important;
        font-size: 0.82rem !important;
        letter-spacing: 0.085em !important;
        border-radius: 999px !important;
        box-shadow: 0 10px 22px -20px rgba(14, 165, 233, 0.22) !important;
    }

    .articles-page-shell .collection-hero .page-hero-title {
        max-width: none !important;
        font-size: clamp(3.25rem, 4.4vw, 4.3rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.05em !important;
        text-wrap: balance !important;
    }

    .articles-page-shell .collection-hero .page-hero-desc {
        max-width: 52rem !important;
        font-size: 1rem !important;
        line-height: 1.6 !important;
        color: #64748b !important;
        text-wrap: pretty !important;
    }

    .projects-collection-shell .project-collection-hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 1.58rem 2.1rem 1.95rem !important;
        border-radius: 34px !important;
        gap: 0 !important;
    }

    .projects-collection-shell .project-collection-hero > * {
        margin: 0 !important;
    }

    .projects-collection-shell .project-collection-hero > * + * {
        margin-top: 0.82rem !important;
    }

    .projects-collection-shell .project-collection-hero .page-hero-kicker {
        min-height: 2.08rem !important;
        padding: 0.26rem 0.98rem !important;
        font-size: 0.82rem !important;
        letter-spacing: 0.085em !important;
        border-radius: 999px !important;
        box-shadow: 0 10px 22px -20px rgba(14, 165, 233, 0.22) !important;
    }

    .projects-collection-shell .project-collection-hero .page-hero-title {
        max-width: none !important;
        font-size: clamp(3.25rem, 4.4vw, 4.3rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.05em !important;
        text-wrap: balance !important;
    }

    .projects-collection-shell .project-collection-hero .page-hero-desc {
        max-width: 52rem !important;
        font-size: 1rem !important;
        line-height: 1.6 !important;
        text-wrap: pretty !important;
        color: #64748b !important;
    }

    .projects-collection-shell .project-collection-hero .project-filter-chips {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.58rem !important;
        margin-top: 1.12rem !important;
        padding-bottom: 0 !important;
    }

    .projects-collection-shell .project-collection-hero .project-filter-chip {
        min-height: 2.18rem !important;
        padding: 0.26rem 1rem !important;
        border-radius: 999px !important;
        border: 1px solid rgba(203, 213, 225, 0.9) !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
        box-shadow: 0 10px 18px -18px rgba(15, 23, 42, 0.1) !important;
        color: #334155 !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        transform: none !important;
    }

    .projects-collection-shell .project-collection-hero .project-filter-chip:hover {
        border-color: rgba(14, 165, 233, 0.32) !important;
        background: linear-gradient(180deg, rgba(240, 249, 255, 0.98), rgba(248, 250, 252, 0.98)) !important;
        box-shadow: 0 12px 20px -18px rgba(14, 165, 233, 0.18) !important;
        transform: translateY(-1px) !important;
    }

    .projects-collection-shell .project-collection-hero .project-filter-chip.is-active {
        border-color: transparent !important;
        background: linear-gradient(135deg, #0ea5e9 0%, #7c3aed 100%) !important;
        box-shadow: 0 14px 24px -18px rgba(14, 165, 233, 0.3) !important;
        color: #ffffff !important;
    }
}

@media (max-width: 780px) {
    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-rating-row,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-rating-row,
    .collection-page-shell.projects-collection-shell .project-archive-grid .app-card-v2 .app-rating-row {
        display: flex !important;
        align-items: center !important;
        gap: 0.24rem !important;
        margin: 0.12rem 0 0 0 !important;
        height: auto !important;
        min-height: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-stars,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-stars,
    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .stars-container,
    .projects-collection-shell .project-archive-grid .app-card-v2 .stars-container {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.06rem !important;
        margin-right: 0.18rem !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .star,
    .projects-collection-shell .project-archive-grid .app-card-v2 .star {
        display: inline-flex !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-score,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-score {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: #475569 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-info,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding-top: 0 !important;
    }

    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-info > * + *,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-info > * + * {
        margin-top: 0 !important;
    }

    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .wp-block-post-title,
    .projects-collection-shell .project-archive-grid .app-card-v2 .wp-block-post-title,
    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-cat-v2,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-cat-v2,
    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .wp-block-post-terms,
    .projects-collection-shell .project-archive-grid .app-card-v2 .wp-block-post-terms,
    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-rating-row,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-rating-row,
    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-desc-v2,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-desc-v2,
    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .wp-block-post-excerpt,
    .projects-collection-shell .project-archive-grid .app-card-v2 .wp-block-post-excerpt {
        margin: 0 !important;
    }

    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-cat-v2,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-cat-v2,
    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .wp-block-post-terms,
    .projects-collection-shell .project-archive-grid .app-card-v2 .wp-block-post-terms {
        margin-top: 0.41rem !important;
    }

    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-rating-row,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-rating-row {
        margin-top: 0.41rem !important;
    }

    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-desc-v2,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-desc-v2,
    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .wp-block-post-excerpt,
    .projects-collection-shell .project-archive-grid .app-card-v2 .wp-block-post-excerpt {
        margin-top: 0.41rem !important;
    }

    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .wp-block-post-title a,
    .projects-collection-shell .project-archive-grid .app-card-v2 .wp-block-post-title a {
        line-height: 1.18 !important;
    }

    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-cat-v2 a,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-cat-v2 a,
    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .wp-block-post-terms a,
    .projects-collection-shell .project-archive-grid .app-card-v2 .wp-block-post-terms a {
        line-height: 1.15 !important;
    }

    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .app-desc-v2 .wp-block-post-excerpt__excerpt,
    .projects-collection-shell .project-archive-grid .app-card-v2 .app-desc-v2 .wp-block-post-excerpt__excerpt,
    .projects-collection-shell .project-archive-grid .app-card-v2.related-project-card .wp-block-post-excerpt__excerpt,
    .projects-collection-shell .project-archive-grid .app-card-v2 .wp-block-post-excerpt__excerpt {
        line-height: 1.4 !important;
    }
}