/**
 * CWE Agency Theme - Main Stylesheet
 * Version: 1.0.0
 * 
 * Table of Contents:
 * 1. CSS Reset & Normalize
 * 2. CSS Custom Properties (Variables)
 * 3. Base Elements
 * 4. Typography
 * 5. Accessibility
 * 6. Layout & Grid System
 * 7. Utility Classes
 * 8. Animations
 * 9. Dark Mode Support
 * 10. Responsive Utilities
 */

/* ============================================
   1. CSS RESET & NORMALIZE
   ============================================ */

/* Box sizing rules */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Remove default margin and padding */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol, li,
pre, fieldset, legend,
hr, table, caption {
    margin: 0;
    padding: 0;
}

/* Remove list styles on ul, ol elements */
ul, ol {
    list-style: none;
}

/* Set core root defaults */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Make images easier to work with */
img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
}

/* Remove default button styles */
button {
    background: none;
    border: none;
    cursor: pointer;
}

/* Remove default anchor styles */
a {
    text-decoration: none;
    color: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   2. CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */

:root {
    /* Colors - Will be overridden by Customizer */
    --cwe-primary: #a08d69;
    --cwe-primary-hover: #76674c;
    --cwe-secondary: #64ffda;
    --cwe-text: #333333;
    --cwe-heading: #1a1a1a;
    --cwe-link: #a08d69;
    --cwe-link-hover: #76674c;
    --cwe-background: #ffffff;
    --cwe-header-bg: #ffffff;
    --cwe-header-text: #333333;
    --cwe-footer-bg: #1a1a1a;
    --cwe-footer-text: #888888;
    --cwe-footer-link: #888888;
    --cwe-button-bg: #a08d69;
    --cwe-button-hover: #76674c;
    --cwe-button-text: #ffffff;
    
    /* Fonts */
    --cwe-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --cwe-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    
    /* Spacing */
    --cwe-spacing-xs: 0.25rem;
    --cwe-spacing-sm: 0.5rem;
    --cwe-spacing-md: 1rem;
    --cwe-spacing-lg: 1.5rem;
    --cwe-spacing-xl: 2rem;
    --cwe-spacing-2xl: 3rem;
    --cwe-spacing-3xl: 4rem;
    --cwe-spacing-4xl: 6rem;
    
    /* Container widths */
    --cwe-container-sm: 640px;
    --cwe-container-md: 768px;
    --cwe-container-lg: 1024px;
    --cwe-container-xl: 1280px;
    --cwe-container-2xl: 1440px;
    
    /* Border radius */
    --cwe-radius-sm: 0.25rem;
    --cwe-radius-md: 0.5rem;
    --cwe-radius-lg: 0.75rem;
    --cwe-radius-xl: 1rem;
    --cwe-radius-full: 9999px;
    
    /* Shadows */
    --cwe-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --cwe-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --cwe-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --cwe-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --cwe-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Transitions */
    --cwe-transition-fast: 150ms ease;
    --cwe-transition-base: 250ms ease;
    --cwe-transition-slow: 350ms ease;
    
    /* Z-index layers */
    --cwe-z-negative: -1;
    --cwe-z-elevate: 1;
    --cwe-z-sticky: 100;
    --cwe-z-header: 200;
    --cwe-z-overlay: 300;
    --cwe-z-modal: 400;
    --cwe-z-popover: 500;
    --cwe-z-tooltip: 600;
}

/* ============================================
   3. BASE ELEMENTS
   ============================================ */

body {
    font-family: var(--cwe-font-body);
    font-size: clamp(0.875rem, 1rem + 0.5vw, 1.125rem);
    color: var(--cwe-text);
    background-color: var(--cwe-background);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cwe-font-heading);
    font-weight: 600;
    line-height: 1.3;
    color: var(--cwe-heading);
    margin-bottom: var(--cwe-spacing-md);
}

/* Fluid typography for headings */
h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

h5 {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
}

h6 {
    font-size: 1rem;
}

/* Links */
a {
    color: var(--cwe-link);
    text-decoration: none;
    transition: color var(--cwe-transition-fast);
}

a:hover {
    color: var(--cwe-link-hover);
}

/* Paragraphs */
p {
    margin-bottom: var(--cwe-spacing-md);
}

/* Lists */
ul, ol {
    margin-bottom: var(--cwe-spacing-md);
    padding-left: var(--cwe-spacing-xl);
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li {
    margin-bottom: var(--cwe-spacing-xs);
}

/* Blockquotes */
blockquote {
    margin: var(--cwe-spacing-lg) 0;
    padding: var(--cwe-spacing-lg) var(--cwe-spacing-xl);
    border-left: 4px solid var(--cwe-primary);
    background: rgba(0, 0, 0, 0.02);
    font-style: italic;
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* Code blocks */
code,
pre {
    font-family: 'Courier New', monospace;
    background: #f4f4f4;
    border-radius: var(--cwe-radius-sm);
}

code {
    padding: 0.2em 0.4em;
    font-size: 0.875em;
}

pre {
    padding: var(--cwe-spacing-md);
    overflow-x: auto;
    margin-bottom: var(--cwe-spacing-md);
}

pre code {
    padding: 0;
    background: none;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--cwe-spacing-md);
}

th,
td {
    padding: var(--cwe-spacing-sm) var(--cwe-spacing-md);
    border: 1px solid #e5e5e5;
    text-align: left;
}

th {
    background: #f9f9f9;
    font-weight: 600;
}

/* Horizontal rule */
hr {
    margin: var(--cwe-spacing-xl) 0;
    border: none;
    border-top: 1px solid #e5e5e5;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   4. ACCESSIBILITY
   ============================================ */

/* Focus visible styles for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--cwe-primary);
    outline-offset: 2px;
    border-radius: var(--cwe-radius-sm);
}

/* Skip to content link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--cwe-z-tooltip);
    background: var(--cwe-primary);
    color: white;
    padding: var(--cwe-spacing-sm) var(--cwe-spacing-md);
    text-decoration: none;
    border-radius: var(--cwe-radius-sm);
}

.skip-link:focus-visible {
    left: var(--cwe-spacing-md);
    top: var(--cwe-spacing-md);
    outline: none;
}

/* Screen reader only text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

.screen-reader-text:focus-visible {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ============================================
   5. LAYOUT & GRID SYSTEM
   ============================================ */

/* Container */
.container {
    width: 100%;
    max-width: var(--cwe-container-xl);
    margin: 0 auto;
    padding: 0 var(--cwe-spacing-lg);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--cwe-spacing-lg);
}

/* Responsive containers */
@media (min-width: 640px) {
    .container-sm {
        max-width: var(--cwe-container-sm);
        margin: 0 auto;
        padding: 0 var(--cwe-spacing-lg);
    }
}

@media (min-width: 768px) {
    .container-md {
        max-width: var(--cwe-container-md);
        margin: 0 auto;
        padding: 0 var(--cwe-spacing-lg);
    }
}

@media (min-width: 1024px) {
    .container-lg {
        max-width: var(--cwe-container-lg);
        margin: 0 auto;
        padding: 0 var(--cwe-spacing-lg);
    }
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--cwe-spacing-lg);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Responsive grid */
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--cwe-spacing-sm); }
.gap-md { gap: var(--cwe-spacing-md); }
.gap-lg { gap: var(--cwe-spacing-lg); }

/* ============================================
   6. UTILITY CLASSES
   ============================================ */

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text colors */
.text-primary { color: var(--cwe-primary); }
.text-secondary { color: var(--cwe-secondary); }
.text-white { color: #ffffff; }
.text-dark { color: #1a1a1a; }

/* Background colors */
.bg-primary { background-color: var(--cwe-primary); }
.bg-secondary { background-color: var(--cwe-secondary); }
.bg-white { background-color: #ffffff; }
.bg-dark { background-color: #1a1a1a; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }

/* Spacing utilities */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--cwe-spacing-xs); }
.mt-2 { margin-top: var(--cwe-spacing-sm); }
.mt-3 { margin-top: var(--cwe-spacing-md); }
.mt-4 { margin-top: var(--cwe-spacing-lg); }
.mt-5 { margin-top: var(--cwe-spacing-xl); }

.mb-1 { margin-bottom: var(--cwe-spacing-xs); }
.mb-2 { margin-bottom: var(--cwe-spacing-sm); }
.mb-3 { margin-bottom: var(--cwe-spacing-md); }
.mb-4 { margin-bottom: var(--cwe-spacing-lg); }
.mb-5 { margin-bottom: var(--cwe-spacing-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--cwe-spacing-xs); }
.p-2 { padding: var(--cwe-spacing-sm); }
.p-3 { padding: var(--cwe-spacing-md); }
.p-4 { padding: var(--cwe-spacing-lg); }
.p-5 { padding: var(--cwe-spacing-xl); }

/* Border radius */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--cwe-radius-sm); }
.rounded-md { border-radius: var(--cwe-radius-md); }
.rounded-lg { border-radius: var(--cwe-radius-lg); }
.rounded-xl { border-radius: var(--cwe-radius-xl); }
.rounded-full { border-radius: var(--cwe-radius-full); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--cwe-shadow-sm); }
.shadow-md { box-shadow: var(--cwe-shadow-md); }
.shadow-lg { box-shadow: var(--cwe-shadow-lg); }
.shadow-xl { box-shadow: var(--cwe-shadow-xl); }

/* Display utilities */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Position utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Overflow utilities */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* ============================================
   7. ANIMATIONS
   ============================================ */

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

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

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

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

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

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Animation classes */
.animate-fadeIn {
    animation: fadeIn var(--cwe-transition-base);
}

.animate-fadeInUp {
    animation: fadeInUp var(--cwe-transition-base);
}

.animate-fadeInDown {
    animation: fadeInDown var(--cwe-transition-base);
}

.animate-zoomIn {
    animation: zoomIn var(--cwe-transition-base);
}

/* ============================================
   8. DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --cwe-text: #e5e5e5;
        --cwe-heading: #ffffff;
        --cwe-background: #1a1a1a;
        --cwe-header-bg: #1a1a1a;
        --cwe-header-text: #e5e5e5;
    }
    
    body {
        background-color: var(--cwe-background);
    }
    
    .bg-white {
        background-color: #2d2d2d;
    }
    
    .bg-gray-50,
    .bg-gray-100 {
        background-color: #2a2a2a;
    }
    
    blockquote {
        background: rgba(255, 255, 255, 0.05);
    }
    
    code,
    pre {
        background: #2d2d2d;
        color: #e5e5e5;
    }
    
    th,
    td {
        border-color: #404040;
    }
    
    th {
        background: #2a2a2a;
    }
}

/* ============================================
   9. RESPONSIVE UTILITIES
   ============================================ */

/* Mobile first - hide on mobile */
.hide-on-mobile {
    display: block;
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
}

/* Hide on desktop */
.hide-on-desktop {
    display: none;
}

@media (max-width: 768px) {
    .hide-on-desktop {
        display: block;
    }
}

/* Print styles */
@media print {
    header,
    footer,
    .site-header,
    .site-footer,
    .sidebar,
    .back-to-top {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    a {
        text-decoration: underline;
    }
    
    img {
        max-width: 100% !important;
    }
}

/**
 * CWE Agency Theme - Responsive Breakpoints & Utilities
 * Part 2: Responsive Design System
 * 
 * Mobile-first approach with progressive enhancement
 */

/* ============================================
   10. RESPONSIVE BREAKPOINTS
   ============================================ */

/* Breakpoint variables (for reference in JS) */
:root {
    --cwe-breakpoint-sm: 640px;
    --cwe-breakpoint-md: 768px;
    --cwe-breakpoint-lg: 1024px;
    --cwe-breakpoint-xl: 1280px;
    --cwe-breakpoint-2xl: 1440px;
    --cwe-breakpoint-3xl: 1920px;
}

/* Mobile-first approach - Base styles (mobile) */
/* All base styles are for mobile devices */

/* Tablet breakpoint (640px and up) */
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
    
    /* Tablet grid enhancements */
    .grid-cols-1\@sm { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-2\@sm { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3\@sm { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-4\@sm { grid-template-columns: repeat(4, 1fr); }
    
    /* Tablet spacing */
    .p-sm\@sm { padding: var(--cwe-spacing-sm); }
    .p-md\@sm { padding: var(--cwe-spacing-md); }
    .p-lg\@sm { padding: var(--cwe-spacing-lg); }
    .p-xl\@sm { padding: var(--cwe-spacing-xl); }
    
    /* Tablet typography */
    .text-sm\@sm { font-size: 0.875rem; }
    .text-base\@sm { font-size: 1rem; }
    .text-lg\@sm { font-size: 1.125rem; }
    .text-xl\@sm { font-size: 1.25rem; }
    .text-2xl\@sm { font-size: 1.5rem; }
}

/* Medium tablet breakpoint (768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
    
    /* Medium tablet grid */
    .grid-cols-1\@md { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-2\@md { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3\@md { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-4\@md { grid-template-columns: repeat(4, 1fr); }
    .grid-cols-5\@md { grid-template-columns: repeat(5, 1fr); }
    .grid-cols-6\@md { grid-template-columns: repeat(6, 1fr); }
    
    /* Medium tablet flex directions */
    .flex-row\@md { flex-direction: row; }
    .flex-col\@md { flex-direction: column; }
    
    /* Medium tablet spacing */
    .gap-sm\@md { gap: var(--cwe-spacing-sm); }
    .gap-md\@md { gap: var(--cwe-spacing-md); }
    .gap-lg\@md { gap: var(--cwe-spacing-lg); }
    
    /* Medium tablet typography */
    .text-center\@md { text-align: center; }
    .text-left\@md { text-align: left; }
    .text-right\@md { text-align: right; }
}

/* Desktop breakpoint (1024px and up) */
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
    
    /* Desktop grid */
    .grid-cols-1\@lg { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-2\@lg { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3\@lg { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-4\@lg { grid-template-columns: repeat(4, 1fr); }
    .grid-cols-5\@lg { grid-template-columns: repeat(5, 1fr); }
    .grid-cols-6\@lg { grid-template-columns: repeat(6, 1fr); }
    
    /* Desktop flex alignment */
    .items-start\@lg { align-items: flex-start; }
    .items-center\@lg { align-items: center; }
    .items-end\@lg { align-items: flex-end; }
    .justify-start\@lg { justify-content: flex-start; }
    .justify-center\@lg { justify-content: center; }
    .justify-end\@lg { justify-content: flex-end; }
    .justify-between\@lg { justify-content: space-between; }
    
    /* Desktop spacing */
    .p-sm\@lg { padding: var(--cwe-spacing-sm); }
    .p-md\@lg { padding: var(--cwe-spacing-md); }
    .p-lg\@lg { padding: var(--cwe-spacing-lg); }
    .p-xl\@lg { padding: var(--cwe-spacing-xl); }
    .p-2xl\@lg { padding: var(--cwe-spacing-2xl); }
    
    .m-sm\@lg { margin: var(--cwe-spacing-sm); }
    .m-md\@lg { margin: var(--cwe-spacing-md); }
    .m-lg\@lg { margin: var(--cwe-spacing-lg); }
    .m-xl\@lg { margin: var(--cwe-spacing-xl); }
    
    /* Desktop typography */
    .text-sm\@lg { font-size: 0.875rem; }
    .text-base\@lg { font-size: 1rem; }
    .text-lg\@lg { font-size: 1.125rem; }
    .text-xl\@lg { font-size: 1.25rem; }
    .text-2xl\@lg { font-size: 1.5rem; }
    .text-3xl\@lg { font-size: 1.875rem; }
    .text-4xl\@lg { font-size: 2.25rem; }
    
    /* Desktop display utilities */
    .block\@lg { display: block; }
    .inline-block\@lg { display: inline-block; }
    .inline\@lg { display: inline; }
    .flex\@lg { display: flex; }
    .grid\@lg { display: grid; }
    .hidden\@lg { display: none; }
}

/* Wide desktop breakpoint (1280px and up) */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
    
    /* Wide desktop grid */
    .grid-cols-1\@xl { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-2\@xl { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3\@xl { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-4\@xl { grid-template-columns: repeat(4, 1fr); }
    .grid-cols-5\@xl { grid-template-columns: repeat(5, 1fr); }
    .grid-cols-6\@xl { grid-template-columns: repeat(6, 1fr); }
    .grid-cols-7\@xl { grid-template-columns: repeat(7, 1fr); }
    .grid-cols-8\@xl { grid-template-columns: repeat(8, 1fr); }
    
    /* Wide desktop spacing */
    .p-sm\@xl { padding: var(--cwe-spacing-sm); }
    .p-md\@xl { padding: var(--cwe-spacing-md); }
    .p-lg\@xl { padding: var(--cwe-spacing-lg); }
    .p-xl\@xl { padding: var(--cwe-spacing-xl); }
    .p-2xl\@xl { padding: var(--cwe-spacing-2xl); }
    .p-3xl\@xl { padding: var(--cwe-spacing-3xl); }
    
    /* Wide desktop typography */
    .text-base\@xl { font-size: 1rem; }
    .text-lg\@xl { font-size: 1.125rem; }
    .text-xl\@xl { font-size: 1.25rem; }
    .text-2xl\@xl { font-size: 1.5rem; }
    .text-3xl\@xl { font-size: 1.875rem; }
    .text-4xl\@xl { font-size: 2.25rem; }
    .text-5xl\@xl { font-size: 3rem; }
    .text-6xl\@xl { font-size: 3.75rem; }
}

/* Ultra-wide breakpoint (1440px and up) */
@media (min-width: 1440px) {
    .container {
        max-width: 1440px;
    }
    
    /* Ultra-wide grid */
    .grid-cols-1\@2xl { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-2\@2xl { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3\@2xl { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-4\@2xl { grid-template-columns: repeat(4, 1fr); }
    .grid-cols-5\@2xl { grid-template-columns: repeat(5, 1fr); }
    .grid-cols-6\@2xl { grid-template-columns: repeat(6, 1fr); }
    .grid-cols-7\@2xl { grid-template-columns: repeat(7, 1fr); }
    .grid-cols-8\@2xl { grid-template-columns: repeat(8, 1fr); }
    .grid-cols-9\@2xl { grid-template-columns: repeat(9, 1fr); }
    .grid-cols-10\@2xl { grid-template-columns: repeat(10, 1fr); }
    .grid-cols-11\@2xl { grid-template-columns: repeat(11, 1fr); }
    .grid-cols-12\@2xl { grid-template-columns: repeat(12, 1fr); }
}

/* ============================================
   11. CONTAINER QUERIES (Modern CSS)
   ============================================ */

/* Define containment contexts */
.card-container {
    container-type: inline-size;
    container-name: card;
}

.widget-container {
    container-type: inline-size;
    container-name: widget;
}

/* Container query for cards - changes layout based on parent width */
@container card (min-width: 400px) {
    .card-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--cwe-spacing-md);
    }
}

@container card (max-width: 399px) {
    .card-layout {
        display: flex;
        flex-direction: column;
    }
    
    .card-image {
        margin-bottom: var(--cwe-spacing-md);
    }
}

/* Container query for widgets */
@container widget (min-width: 300px) {
    .widget-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--cwe-spacing-md);
    }
}

@container widget (min-width: 500px) {
    .widget-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@container widget (min-width: 700px) {
    .widget-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   12. RESPONSIVE SPACING UTILITIES
   ============================================ */

/* Responsive padding utilities */
.p-responsive {
    padding: clamp(var(--cwe-spacing-md), 5vw, var(--cwe-spacing-3xl));
}

.py-responsive {
    padding-top: clamp(var(--cwe-spacing-md), 5vw, var(--cwe-spacing-3xl));
    padding-bottom: clamp(var(--cwe-spacing-md), 5vw, var(--cwe-spacing-3xl));
}

.px-responsive {
    padding-left: clamp(var(--cwe-spacing-md), 5vw, var(--cwe-spacing-3xl));
    padding-right: clamp(var(--cwe-spacing-md), 5vw, var(--cwe-spacing-3xl));
}

/* Responsive margin utilities */
.m-responsive {
    margin: clamp(var(--cwe-spacing-sm), 3vw, var(--cwe-spacing-xl));
}

.my-responsive {
    margin-top: clamp(var(--cwe-spacing-sm), 3vw, var(--cwe-spacing-xl));
    margin-bottom: clamp(var(--cwe-spacing-sm), 3vw, var(--cwe-spacing-xl));
}

.mx-responsive {
    margin-left: clamp(var(--cwe-spacing-sm), 3vw, var(--cwe-spacing-xl));
    margin-right: clamp(var(--cwe-spacing-sm), 3vw, var(--cwe-spacing-xl));
}

/* Responsive gap utilities */
.gap-responsive {
    gap: clamp(var(--cwe-spacing-sm), 2vw, var(--cwe-spacing-lg));
}

/* ============================================
   13. RESPONSIVE TYPOGRAPHY UTILITIES
   ============================================ */

/* Fluid typography scale */
.fluid-text-xs {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
}

.fluid-text-sm {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.fluid-text-base {
    font-size: clamp(1rem, 3vw, 1.125rem);
}

.fluid-text-lg {
    font-size: clamp(1.125rem, 3.5vw, 1.25rem);
}

.fluid-text-xl {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
}

.fluid-text-2xl {
    font-size: clamp(1.5rem, 5vw, 1.875rem);
}

.fluid-text-3xl {
    font-size: clamp(1.875rem, 6vw, 2.25rem);
}

.fluid-text-4xl {
    font-size: clamp(2.25rem, 7vw, 3rem);
}

.fluid-text-5xl {
    font-size: clamp(3rem, 8vw, 3.75rem);
}

/* Responsive line heights */
.line-height-tight {
    line-height: clamp(1.2, 3vw, 1.3);
}

.line-height-normal {
    line-height: clamp(1.4, 4vw, 1.6);
}

.line-height-loose {
    line-height: clamp(1.6, 5vw, 1.8);
}

/* ============================================
   14. RESPONSIVE DISPLAY UTILITIES
   ============================================ */

/* Hide on specific breakpoints */
.hide-on-mobile {
    display: block;
}

@media (max-width: 639px) {
    .hide-on-mobile {
        display: none !important;
    }
}

.hide-on-tablet {
    display: block;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .hide-on-tablet {
        display: none !important;
    }
}

.hide-on-desktop {
    display: block;
}

@media (min-width: 1024px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* Show on specific breakpoints */
.show-on-mobile {
    display: none;
}

@media (max-width: 639px) {
    .show-on-mobile {
        display: block !important;
    }
}

.show-on-tablet {
    display: none;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .show-on-tablet {
        display: block !important;
    }
}

.show-on-desktop {
    display: none;
}

@media (min-width: 1024px) {
    .show-on-desktop {
        display: block !important;
    }
}

/* Responsive order utilities */
.order-first\@sm { order: -9999; }
.order-last\@sm { order: 9999; }
.order-none\@sm { order: 0; }

@media (min-width: 640px) {
    .order-first\@sm { order: -9999; }
    .order-last\@sm { order: 9999; }
    .order-none\@sm { order: 0; }
}

@media (min-width: 768px) {
    .order-first\@md { order: -9999; }
    .order-last\@md { order: 9999; }
    .order-none\@md { order: 0; }
}

@media (min-width: 1024px) {
    .order-first\@lg { order: -9999; }
    .order-last\@lg { order: 9999; }
    .order-none\@lg { order: 0; }
}

/* ============================================
   15. RESPONSIVE FLEX & GRID UTILITIES
   ============================================ */

/* Responsive flex direction */
.flex-col\@sm { flex-direction: column; }
.flex-row\@sm { flex-direction: row; }

@media (min-width: 640px) {
    .flex-col\@sm { flex-direction: column; }
    .flex-row\@sm { flex-direction: row; }
}

@media (min-width: 768px) {
    .flex-col\@md { flex-direction: column; }
    .flex-row\@md { flex-direction: row; }
}

@media (min-width: 1024px) {
    .flex-col\@lg { flex-direction: column; }
    .flex-row\@lg { flex-direction: row; }
}

/* Responsive flex wrap */
.flex-wrap\@sm { flex-wrap: wrap; }
.flex-nowrap\@sm { flex-wrap: nowrap; }

@media (min-width: 640px) {
    .flex-wrap\@sm { flex-wrap: wrap; }
    .flex-nowrap\@sm { flex-wrap: nowrap; }
}

/* Responsive justify content */
.justify-start\@sm { justify-content: flex-start; }
.justify-center\@sm { justify-content: center; }
.justify-end\@sm { justify-content: flex-end; }
.justify-between\@sm { justify-content: space-between; }

@media (min-width: 640px) {
    .justify-start\@sm { justify-content: flex-start; }
    .justify-center\@sm { justify-content: center; }
    .justify-end\@sm { justify-content: flex-end; }
    .justify-between\@sm { justify-content: space-between; }
}

/* Responsive align items */
.items-start\@sm { align-items: flex-start; }
.items-center\@sm { align-items: center; }
.items-end\@sm { align-items: flex-end; }
.items-stretch\@sm { align-items: stretch; }

@media (min-width: 640px) {
    .items-start\@sm { align-items: flex-start; }
    .items-center\@sm { align-items: center; }
    .items-end\@sm { align-items: flex-end; }
    .items-stretch\@sm { align-items: stretch; }
}

/* ============================================
   16. RESPONSIVE COLUMN SPANS
   ============================================ */

/* Grid column spans */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-full { grid-column: 1 / -1; }

/* Responsive column spans */
@media (min-width: 640px) {
    .col-span-1\@sm { grid-column: span 1 / span 1; }
    .col-span-2\@sm { grid-column: span 2 / span 2; }
    .col-span-3\@sm { grid-column: span 3 / span 3; }
    .col-span-4\@sm { grid-column: span 4 / span 4; }
    .col-span-full\@sm { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
    .col-span-1\@md { grid-column: span 1 / span 1; }
    .col-span-2\@md { grid-column: span 2 / span 2; }
    .col-span-3\@md { grid-column: span 3 / span 3; }
    .col-span-4\@md { grid-column: span 4 / span 4; }
    .col-span-5\@md { grid-column: span 5 / span 5; }
    .col-span-6\@md { grid-column: span 6 / span 6; }
    .col-span-full\@md { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .col-span-1\@lg { grid-column: span 1 / span 1; }
    .col-span-2\@lg { grid-column: span 2 / span 2; }
    .col-span-3\@lg { grid-column: span 3 / span 3; }
    .col-span-4\@lg { grid-column: span 4 / span 4; }
    .col-span-5\@lg { grid-column: span 5 / span 5; }
    .col-span-6\@lg { grid-column: span 6 / span 6; }
    .col-span-7\@lg { grid-column: span 7 / span 7; }
    .col-span-8\@lg { grid-column: span 8 / span 8; }
    .col-span-9\@lg { grid-column: span 9 / span 9; }
    .col-span-10\@lg { grid-column: span 10 / span 10; }
    .col-span-11\@lg { grid-column: span 11 / span 11; }
    .col-span-12\@lg { grid-column: span 12 / span 12; }
    .col-span-full\@lg { grid-column: 1 / -1; }
}

/* ============================================
   17. RESPONSIVE IMAGES & MEDIA
   ============================================ */

/* Responsive images */
.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

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

.img-contain {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

/* Responsive aspect ratios */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-portrait {
    aspect-ratio: 3 / 4;
}

.aspect-landscape {
    aspect-ratio: 4 / 3;
}

/* Responsive aspect ratios with breakpoints */
@media (max-width: 639px) {
    .aspect-square\@sm {
        aspect-ratio: 1 / 1;
    }
    .aspect-video\@sm {
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .aspect-square\@md {
        aspect-ratio: 1 / 1;
    }
    .aspect-video\@md {
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 1024px) {
    .aspect-square\@lg {
        aspect-ratio: 1 / 1;
    }
    .aspect-video\@lg {
        aspect-ratio: 16 / 9;
    }
}

/* ============================================
   18. RESPONSIVE TABLE UTILITIES
   ============================================ */

/* Responsive tables */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    width: 100%;
    min-width: 600px;
}

/* Stack table on mobile */
@media (max-width: 767px) {
    .table-stack-mobile,
    .table-stack-mobile thead,
    .table-stack-mobile tbody,
    .table-stack-mobile th,
    .table-stack-mobile td,
    .table-stack-mobile tr {
        display: block;
    }
    
    .table-stack-mobile thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .table-stack-mobile tr {
        border: 1px solid #ccc;
        margin-bottom: var(--cwe-spacing-md);
    }
    
    .table-stack-mobile td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }
    
    .table-stack-mobile td:before {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        content: attr(data-label);
    }
}

/* ============================================
   19. RESPONSIVE FORM UTILITIES
   ============================================ */

/* Responsive form elements */
@media (max-width: 767px) {
    .form-stack-mobile .form-group {
        display: block;
        margin-bottom: var(--cwe-spacing-md);
    }
    
    .form-stack-mobile label {
        display: block;
        margin-bottom: var(--cwe-spacing-xs);
    }
    
    .form-stack-mobile input,
    .form-stack-mobile select,
    .form-stack-mobile textarea {
        width: 100%;
    }
    
    .form-inline-mobile {
        flex-direction: column;
    }
    
    .form-inline-mobile .form-group {
        width: 100%;
        margin-bottom: var(--cwe-spacing-sm);
    }
}

/* Responsive button sizes */
.btn-responsive {
    padding: clamp(0.5rem, 2vw, 1rem) clamp(1rem, 3vw, 2rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
}

/* ============================================
   20. PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Will-change optimization for animated elements */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

.will-change-scroll {
    will-change: scroll-position;
}

/* Content visibility for off-screen content */
.content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* Reduce motion performance */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        will-change: auto !important;
    }
}

/* Lazy loading placeholder */
.lazy-load {
    background: #f0f0f0;
    min-height: 200px;
}

.lazy-load.loaded {
    background: transparent;
}

/* ============================================
   21. RESPONSIVE HELPER CLASSES
   ============================================ */

/* Text truncation */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

/* Responsive text truncation */
@media (max-width: 639px) {
    .truncate-2\@sm {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Clearfix */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* Visually hidden but accessible */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive container max-width */
.container-responsive {
    width: 100%;
    max-width: min(90%, 1280px);
    margin-left: auto;
    margin-right: auto;
}

/* Responsive container with padding */
.container-padding {
    width: 100%;
    padding-left: max(20px, 5%);
    padding-right: max(20px, 5%);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   HEADER STYLES - Clean Flex Layout
   ============================================ */

/* Header Container */
.site-header {
    position: relative;
    background: var(--cwe-header-bg, #ffffff);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 1000;
    transition: all 0.3s ease;
}

/* Sticky Header */
.site-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--cwe-header-bg, #ffffff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Hide sticky header on scroll down (optional) */
.site-header.sticky.hidden {
    transform: translateY(-100%);
}

/* Header Inner - Clean Flex Layout */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 25px 0;
    min-height: 80px;
}

/* Site Branding */
.site-branding {
    flex-shrink: 0;
}

.site-logo img {
    max-height: 50px;
    width: auto;
    display: block;
}

.site-title {
    font-size: 24px;
    margin: 0;
    line-height: 1.2;
}

.site-title a {
    color: var(--cwe-heading, #1a1a1a);
    text-decoration: none;
}

/* Main Navigation - Desktop */
.main-navigation {
    flex: 1;
}

.primary-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 32px;
}

.primary-menu > li {
    position: relative;
}

.primary-menu > li > a {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    color: var(--cwe-header-text, #333);
    font-weight: 600;
    font-size: 16px;
    transition: color 0.2s ease;
}

.primary-menu > li > a:hover {
    color: var(--cwe-primary, #a08d69);
}

/* Dropdown Menu */
.primary-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 12px 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 100;
}

.primary-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.primary-menu .sub-menu li {
    position: relative;
}

.primary-menu .sub-menu a {
    display: block;
    padding: 8px 20px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: all 0.2s ease;
}

.primary-menu .sub-menu a:hover {
    background: #f5f5f5;
    color: var(--cwe-primary, #a08d69);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Search Toggle */
.header-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cwe-header-text, #333);
    transition: color 0.2s ease;
}

.header-search-toggle:hover {
    color: var(--cwe-primary, #a08d69);
}

.header-search-toggle .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Search Popout/Sidebar */
.header-search-popout {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-search-popout.active {
    opacity: 1;
    visibility: visible;
}

.header-search-popout .search-container {
    width: 90%;
    max-width: 600px;
    padding: 40px;
}

.header-search-popout .search-form {
    display: flex;
    gap: 15px;
}

.header-search-popout .search-field {
    flex: 1;
    padding: 18px 20px;
    font-size: 18px;
    border: none;
    border-radius: 12px;
    background: #fff;
    outline: none;
}

.header-search-popout .search-submit {
    padding: 0 30px;
    background: var(--cwe-primary, #a08d69);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s ease;
}

.header-search-popout .search-submit:hover {
    background: var(--cwe-primary-hover, #76674c);
}

.search-popout-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 10px;
}

.search-popout-close .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

/* CTA Button */
.header-cta-button {
    padding: 10px 24px;
    background: var(--cwe-primary, #a08d69);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
}

.header-cta-button:hover {
    background: var(--cwe-primary-hover, #76674c);
    color: #fff;
}

/* Mobile Menu Toggle - HIDDEN ON DESKTOP */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.hamburger-box {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 2px;
    background-color: var(--cwe-header-text, #333);
    border-radius: 4px;
    position: absolute;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: '';
    display: block;
}

.hamburger-inner::before {
    top: -8px;
}

.hamburger-inner::after {
    bottom: -8px;
}

/* Animated hamburger to X */
.mobile-menu-toggle.active .hamburger-inner {
    transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-inner::before {
    opacity: 0;
    transform: rotate(0deg);
}

.mobile-menu-toggle.active .hamburger-inner::after {
    transform: translateY(16px) rotate(-90deg);
}

/* Mobile Navigation Panel */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 380px;
    height: 100%;
    background: var(--cwe-header-bg, #fff);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
    z-index: 1002;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.mobile-nav-panel.active {
    right: 0;
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-logo img {
    max-height: 40px;
    width: auto;
}

.mobile-nav-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--cwe-text, #333);
}

.mobile-nav-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu li {
    margin-bottom: 5px;
}

.mobile-menu a {
    display: block;
    padding: 12px 0;
    text-decoration: none;
    color: var(--cwe-text, #333);
    font-size: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-menu a:hover {
    color: var(--cwe-primary, #a08d69);
}

/* Mobile submenu */
.mobile-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding-left: 20px;
    display: none;
}

.mobile-menu .menu-item-has-children.active > .sub-menu {
    display: block;
}

/* Mobile Social Icons */
.mobile-nav-footer {
    padding: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.mobile-social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.mobile-social-icons a {
    color: var(--cwe-text, #666);
    text-decoration: none;
}

.mobile-social-icons a:hover {
    color: var(--cwe-primary, #a08d69);
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet & Mobile */
@media (max-width: 1024px) {
    .main-navigation {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions {
        gap: 12px;
    }
    
    .header-cta-button {
        padding: 8px 18px;
        font-size: 13px;
    }
}

/* Mobile Small */
@media (max-width: 576px) {
    .header-inner {
        gap: 15px;
    }
    
    .site-logo img {
        max-height: 40px;
    }
    
    .header-cta-button {
        display: none;
    }
    
    .header-search-toggle .dashicons {
        font-size: 18px;
    }
}

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

/* Transparent header base */
.header-transparent {
    position: relative;
    background: var(--cwe-header-bg, #ffffff);
    transition: all 0.3s ease;
}

/* Transparent header when not sticky - absolute positioning */
.header-transparent:not(.sticky) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    box-shadow: none;
    z-index: 1000;
}

/* Light text on transparent header (white background, dark text) */
.header-transparent:not(.sticky) .primary-menu > li > a,
.header-transparent:not(.sticky) .site-title a,
.header-transparent:not(.sticky) .header-search-toggle,
.header-transparent:not(.sticky) .mobile-menu-toggle {
    color: #ffffff;
}

.header-transparent:not(.sticky) .primary-menu > li > a:hover {
    color: var(--cwe-primary, #a08d69);
}

.header-transparent:not(.sticky) .primary-menu .current-menu-item > a {
    color: var(--cwe-primary, #a08d69);
}

/* Invert logo for transparent header */
/* .header-transparent:not(.sticky) .custom-logo-link img {
    filter: brightness(0) invert(1);
} */

/* Transparent header when sticky - solid background */
.header-transparent.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--cwe-header-bg, #ffffff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    animation: slideDown 0.3s ease;
}

.header-transparent.sticky .custom-logo-link img {
    filter: none;
}

/* Ensure content doesn't hide under transparent header */
.has-transparent-header .site-content {
    padding-top: 0;
}

/* Animation for sticky header */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .header-transparent:not(.sticky) .header-actions {
        color: #ffffff;
    }
}

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

.site-footer {
    background: var(--cwe-footer-bg, #0a0a0a);
    color: var(--cwe-footer-text, #888);
    margin-top: 60px;
}

/* Footer Widgets Section */
.footer-widgets {
    padding: 60px 0 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-widgets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.footer-widget-area {
    min-width: 0;
}

.footer-widget-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
}

.footer-widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--cwe-primary, #a08d69);
}

.footer-widget-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget-area ul li {
    margin-bottom: 12px;
}

.footer-widget-area ul li a {
    color: var(--cwe-footer-text, #888);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-widget-area ul li a:hover {
    color: var(--cwe-primary, #a08d69);
    padding-left: 5px;
}

/* Footer Bottom Bar */
.footer-bottom {
    padding: 25px 0;
    background: rgba(0, 0, 0, 0.2);
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-copyright {
    font-size: 14px;
}

.footer-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 25px;
    flex-wrap: wrap;
}

.footer-menu a {
    color: var(--cwe-footer-text, #888);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-menu a:hover {
    color: var(--cwe-primary, #a08d69);
}

.footer-credit {
    font-size: 12px;
}

.footer-credit a {
    color: var(--cwe-footer-text, #888);
    text-decoration: none;
}

.footer-credit a:hover {
    color: var(--cwe-primary, #a08d69);
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: var(--cwe-primary, #a08d69);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--cwe-primary-hover, #76674c);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.back-to-top .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Responsive Footer */
@media (max-width: 1024px) {
    .footer-widgets-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .footer-widgets {
        padding: 40px 0 30px;
    }
    
    .footer-widgets-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-menu {
        justify-content: center;
    }
    
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .footer-widget-title {
        color: #fff;
    }
}

/* ============================================
   PAGE HERO SECTION
   ============================================ */

.cwe-page-hero {
    position: relative;
    padding: 100px 0;
    text-align: center;
    overflow: hidden;
}

.cwe-page-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 1;
}

.cwe-page-hero .container {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .cwe-page-hero {
        padding: 60px 0;
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
}

/* ============================================
   BREADCRUMBS STYLES
   ============================================ */

.cwe-breadcrumbs {
    background: var(--cwe-breadcrumbs-bg, #f5f5f5);
    padding: var(--cwe-breadcrumbs-padding, 15px 0);
    margin: var(--cwe-breadcrumbs-margin, 0 0 30px 0);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* Add minimum height to make background visible */
    min-height: var(--cwe-breadcrumbs-min-height, 2500px);
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Page Title inside breadcrumbs area */
.cwe-breadcrumbs.has-page-title {
    padding: var(--cwe-breadcrumbs-with-title-padding, 40px 0);
    min-height: var(--cwe-breadcrumbs-with-title-min-height, 300px);
}

.breadcrumbs-wrapper {
    width: 100%;
}

.page-title-area {
    text-align: var(--cwe-breadcrumbs-alignment, left);
}

.page-title-area .page-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: var(--cwe-breadcrumbs-title-color, #1a1a1a);
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.page-title-area .page-description {
    font-size: 16px;
    color: var(--cwe-breadcrumbs-text-color, #666);
    margin: 0;
}

/* Breadcrumb list */
.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

/* Layout options - Title above breadcrumbs */
.breadcrumbs-layout-stacked .page-title-area {
    margin-bottom: 15px;
}

/* Layout options - Title inline with breadcrumbs */
.breadcrumbs-layout-inline .breadcrumbs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.breadcrumbs-layout-inline .page-title-area {
    flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .cwe-breadcrumbs {
        min-height: 60px;
    }
    
    .cwe-breadcrumbs.has-page-title {
        min-height: 120px;
        padding: 30px 0;
    }
    
    .breadcrumbs-layout-inline .breadcrumbs-wrapper {
        flex-direction: column;
        text-align: center;
    }
    
    .page-title-area .page-title {
        font-size: 28px;
    }
}

/* Single Portfolio Styles */
.cwe-single-portfolio {
    padding: 60px 0;
}

.content-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 50px;
}

/* Portfolio Hero */
.portfolio-hero {
    position: relative;
    margin-bottom: 50px;
    border-radius: 20px;
    overflow: hidden;
}

.portfolio-hero-image {
    position: relative;
    min-height: 400px;
}

.portfolio-hero-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    padding: 40px;
}

.hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    color: #fff;
}

.portfolio-categories {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.portfolio-category {
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.portfolio-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.portfolio-meta {
    display: flex;
    gap: 30px;
}

.meta-item {
    display: flex;
    gap: 8px;
    font-size: 14px;
}

.meta-item .label {
    opacity: 0.7;
}

.meta-item .value {
    font-weight: 500;
}

/* Portfolio Body */
.portfolio-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
}

.content-section {
    margin-bottom: 40px;
}

.content-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--cwe-primary, #a08d69);
    display: inline-block;
}

.section-content {
    line-height: 1.8;
    color: #555;
}

/* Portfolio Sidebar */
.portfolio-sidebar .info-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
}

.portfolio-sidebar .info-card h3 {
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tech-tag {
    background: #e9ecef;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: #495057;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cwe-primary, #a08d69);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

.project-link:hover {
    background: var(--cwe-primary-hover, #76674c);
    color: #fff;
    transform: translateY(-2px);
}

/* Portfolio Gallery */
.portfolio-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gallery-item {
    overflow: hidden;
    border-radius: 12px;
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-lightbox {
    display: block;
}

/* ============================================
   CWE PORTFOLIO WIDGET - DUAL STYLE
   Modern card designs inspired by the example
   ============================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap');

/* Section Title */
.cwe-portfolio-section-title {
    font-family: 'Lexend', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
}

/* Empty State */
.cwe-portfolio-empty {
    text-align: center;
    padding: 3rem;
    background: #f8f9fa;
    border-radius: 1rem;
    color: #6c757d;
    font-family: 'Lexend', sans-serif;
}

/* Grid Layout */
.cwe-portfolio {
    display: grid;
    gap: 1.75rem;
    max-width: 1400px;
    margin: 0 auto;
}

.cwe-portfolio.columns-1 { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
.cwe-portfolio.columns-2 { grid-template-columns: repeat(2, 1fr); }
.cwe-portfolio.columns-3 { grid-template-columns: repeat(3, 1fr); }
.cwe-portfolio.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* Filter Buttons */
.cwe-portfolio-filters {
    text-align: center;
    margin-bottom: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.filter-btn {
    font-family: 'Lexend', sans-serif;
    background: transparent;
    border: none;
    padding: 0.5rem 1.5rem;
    margin: 0;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
    border-radius: 40px;
    transition: all 0.2s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--cwe-primary, #a08d69);
    color: #fff;
}

/* ============================================
   STYLE 1 - CLEAN CARD WITH STATS
   Inspired by the example design
   ============================================ */
.cwe-portfolio.style-1 .portfolio-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    padding: 1.25rem;
    position: relative;
    transition: all 0.2s ease-in;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 30px -10px rgba(0, 0, 0, 0.08);
}

.cwe-portfolio.style-1 .portfolio-card:hover {
    box-shadow: 0 0 0 2px var(--cwe-primary, #a08d69), 0 10px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* Card Image */
.cwe-portfolio.style-1 .card-image {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.cwe-portfolio.style-1 .card-image img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.cwe-portfolio.style-1 .portfolio-card:hover .card-image img {
    transform: scale(1.03);
}

/* Card Header */
.cwe-portfolio.style-1 .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.75rem 0;
}

.cwe-portfolio.style-1 .project-links {
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.3;
    text-decoration: none;
    color: #1a1a1a;
    transition: color 0.2s ease;
}

.cwe-portfolio.style-1 .project-links:hover {
    color: var(--cwe-primary, #a08d69);
}

/* Like Button */
.cwe-portfolio.style-1 .like-button {
    border: 0;
    background: #fff;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    color: #565656;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 8px rgba(0, 0, 0, 0.1);
}

.cwe-portfolio.style-1 .like-button:hover {
    background: var(--cwe-primary, #a08d69);
    color: #fff;
    transform: scale(1.05);
}

.cwe-portfolio.style-1 .like-button svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* Card Footer (Meta) */
.cwe-portfolio.style-1 .card-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.cwe-portfolio.style-1 .card-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: #6c757d;
}

.cwe-portfolio.style-1 .card-meta svg {
    width: 0.9rem;
    height: 0.9rem;
    stroke: #9ca3af;
}

.cwe-portfolio.style-1 .card-meta:not(:last-child):after {
    content: "•";
    margin-left: 0.25rem;
    color: #d1d5db;
}

/* Card Excerpt */
.cwe-portfolio.style-1 .card-excerpt {
    font-family: 'Lexend', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #6b7280;
    margin-bottom: 1rem;
}

/* Read More Link */
.cwe-portfolio.style-1 .read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cwe-primary, #a08d69);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.cwe-portfolio.style-1 .read-more-link svg {
    transition: transform 0.2s ease;
}

.cwe-portfolio.style-1 .read-more-link:hover {
    gap: 0.6rem;
}

.cwe-portfolio.style-1 .read-more-link:hover svg {
    transform: translateX(3px);
}

/* ============================================
   STYLE 2 - OVERLAY CARD WITH HOVER
   Modern overlay design
   ============================================ */
.cwe-portfolio.style-2 .portfolio-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cwe-portfolio.style-2 .portfolio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.2);
}

.cwe-portfolio.style-2 .card-inner {
    position: relative;
}

.cwe-portfolio.style-2 .card-image {
    margin: 0;
    overflow: hidden;
}

.cwe-portfolio.style-2 .card-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cwe-portfolio.style-2 .portfolio-card:hover .card-image img {
    transform: scale(1.05);
}

/* Overlay */
.cwe-portfolio.style-2 .card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.85) 100%);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 1.5rem;
}

.cwe-portfolio.style-2 .portfolio-card:hover .card-overlay {
    opacity: 1;
}

.cwe-portfolio.style-2 .overlay-content {
    color: #fff;
    width: 100%;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.cwe-portfolio.style-2 .portfolio-card:hover .overlay-content {
    transform: translateY(0);
}

/* Categories in Style 2 */
.cwe-portfolio.style-2 .project-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cwe-portfolio.style-2 .category-tag {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
}

/* Project Title */
.cwe-portfolio.style-2 .project-title {
    font-family: 'Lexend', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.cwe-portfolio.style-2 .project-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cwe-portfolio.style-2 .project-title a:hover {
    color: var(--cwe-primary, #a08d69);
}

/* Project Excerpt */
.cwe-portfolio.style-2 .project-excerpt {
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Project Meta */
.cwe-portfolio.style-2 .project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
}

.cwe-portfolio.style-2 .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cwe-portfolio.style-2 .meta-item svg {
    stroke: rgba(255, 255, 255, 0.6);
}

/* Read More */
.cwe-portfolio.style-2 .read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.cwe-portfolio.style-2 .read-more:hover {
    gap: 0.75rem;
    color: var(--cwe-primary, #a08d69);
}

.cwe-portfolio.style-2 .read-more svg {
    transition: transform 0.2s ease;
}

.cwe-portfolio.style-2 .read-more:hover svg {
    transform: translateX(3px);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .cwe-portfolio.columns-3,
    .cwe-portfolio.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cwe-portfolio-section-title {
        font-size: 1.6rem;
    }
    
    .cwe-portfolio.columns-2,
    .cwe-portfolio.columns-3,
    .cwe-portfolio.columns-4 {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto;
    }
    
    .filter-btn {
        padding: 0.4rem 1rem;
        font-size: 0.75rem;
    }
    
    /* Style 1 Responsive */
    .cwe-portfolio.style-1 .portfolio-card {
        padding: 1rem;
    }
    
    .cwe-portfolio.style-1 .project-link {
        font-size: 1rem;
    }
    
    /* Style 2 Responsive */
    .cwe-portfolio.style-2 .project-title {
        font-size: 1rem;
    }
    
    .cwe-portfolio.style-2 .overlay-content {
        transform: translateY(0);
    }
    
    .cwe-portfolio.style-2 .portfolio-card:hover .card-overlay {
        opacity: 0.95;
    }
}

@media (max-width: 480px) {
    .cwe-portfolio.style-1 .card-footer {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .cwe-portfolio.style-1 .card-excerpt {
        font-size: 0.75rem;
    }
    
    .cwe-portfolio.style-2 .project-excerpt {
        display: none;
    }
    
    .cwe-portfolio-filters {
        gap: 0.3rem;
    }
    
    .filter-btn {
        padding: 0.3rem 0.8rem;
        font-size: 0.7rem;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cwe-portfolio .portfolio-card {
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

.cwe-portfolio .portfolio-card:nth-child(1) { animation-delay: 0.05s; }
.cwe-portfolio .portfolio-card:nth-child(2) { animation-delay: 0.1s; }
.cwe-portfolio .portfolio-card:nth-child(3) { animation-delay: 0.15s; }
.cwe-portfolio .portfolio-card:nth-child(4) { animation-delay: 0.2s; }
.cwe-portfolio .portfolio-card:nth-child(5) { animation-delay: 0.25s; }
.cwe-portfolio .portfolio-card:nth-child(6) { animation-delay: 0.3s; }

/* Recent List - Current Item Highlight */
.recent-list .current-item a {
    color: var(--cwe-primary, #a08d69);
    font-weight: 600;
    padding-left: 8px;
}

.recent-list .current-item {
    position: relative;
}

.recent-list .current-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: var(--cwe-primary, #a08d69);
    border-radius: 2px;
}

/* Consistent hover and active styles for all navigation */
.cpt-navigation a:hover,
.cpt-navigation li.active a,
.recent-list a:hover,
.related-list a:hover {
    color: var(--cwe-primary, #a08d69);
}

.recent-list a {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    color: #444;
    font-size: 14px;
    line-height: 1.4;
    transition: all 0.2s;
}

/* ============================================
   SINGLE REPORT STYLES
   ============================================ */

.cwe-single-report {
    padding: 60px 0;
}

.content-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 50px;
}

/* Report Hero */
.report-hero {
    position: relative;
    margin-bottom: 50px;
    border-radius: 20px;
    overflow: hidden;
}

.report-hero-image {
    position: relative;
    min-height: 350px;
}

.report-hero-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 40px;
}

.hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    color: #fff;
}

.report-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.topic-tag {
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.report-badge {
    display: inline-block;
    background: var(--cwe-primary, #a08d69);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 15px;
}

.report-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
}

.report-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 20px;
}

.report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    opacity: 0.8;
}

.meta-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Report Body */
.report-body {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.report-summary {
    margin-bottom: 40px;
}

.summary-content {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

.summary-content h2,
.summary-content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
}

.summary-content h2:first-child,
.summary-content h3:first-child {
    margin-top: 0;
}

/* Key Findings */
.key-findings {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 24px;
    margin-top: 30px;
    border-left: 4px solid var(--cwe-primary, #a08d69);
}

.key-findings h3 {
    font-size: 18px;
    margin-bottom: 15px;
}

.findings-list ul {
    margin: 0;
    padding-left: 20px;
}

.findings-list li {
    margin-bottom: 8px;
}

/* Download Section */
.report-download-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #eee;
}

.download-card {
    background: linear-gradient(135deg, #f8f9fa, #fff);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    border: 1px solid #e0e0e0;
}

.download-icon {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--cwe-primary, #a08d69);
}

.download-info {
    flex: 1;
}

.download-info h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.download-info p {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
}

.download-meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #888;
}

.download-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cwe-primary, #a08d69);
    color: #fff;
    padding: 14px 28px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.download-button:hover {
    background: var(--cwe-primary-hover, #76674c);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(160,141,105,0.3);
}

/* Related Reports */
.related-reports {
    margin-top: 50px;
    padding-top: 30px;
}

.related-reports h3 {
    font-size: 24px;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--cwe-primary, #a08d69);
    display: inline-block;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.related-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.related-card a {
    text-decoration: none;
}

.related-thumbnail img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.related-card h4 {
    padding: 15px;
    font-size: 15px;
    color: #333;
    margin: 0;
}

/* Reports Widget */
.cwe-reports-section-title {
    font-size: 28px;
    margin-bottom: 30px;
    text-align: center;
}

.cwe-reports-grid {
    display: grid;
    gap: 30px;
}

.cwe-reports-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.cwe-reports-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.cwe-reports-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }

.report-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.report-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

.report-card-link {
    text-decoration: none;
    display: block;
}

.report-cover {
    position: relative;
    overflow: hidden;
}

.report-cover img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.3s;
    max-height: 297px !important;
}

.report-card:hover .report-cover img {
    transform: scale(1.05);
}

.report-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.report-card:hover .report-overlay {
    opacity: 1;
}

.overlay-icon {
    width: 50px !important;
    height: 50px !important;
    background: #fff;
    border-radius: 50%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--cwe-primary, #a08d69);
    font-size: 24px !important;
}

.report-info {
    padding: 20px;
}

.report-date {
    font-size: 12px;
    color: var(--cwe-primary, #a08d69);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.report-title {
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0;
    color: #1a1a1a;
    line-height: 1.4;
}

.report-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
}

.report-read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--cwe-primary, #a08d69);
}

.report-read-more .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.report-card:hover .report-read-more .dashicons {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1024px) {
    .content-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .cwe-reports-grid.columns-3,
    .cwe-reports-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .report-title {
        font-size: 32px;
    }
    
    .report-body {
        padding: 24px;
    }
    
    .download-card {
        flex-direction: column;
        text-align: center;
    }
    
    .download-meta {
        justify-content: center;
    }
    
    .cwe-reports-grid.columns-2,
    .cwe-reports-grid.columns-3,
    .cwe-reports-grid.columns-4 {
        grid-template-columns: 1fr;
    }
    
    .related-grid {
        grid-template-columns: 1fr;
    }
    
    .report-meta {
        flex-direction: column;
        gap: 8px;
    }
}

/* ============================================
   REPORTS ARCHIVE PAGE STYLES
   ============================================ */

/* Archive Header */
.cwe-archive-reports .archive-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem 0;
}

.cwe-archive-reports .archive-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cwe-archive-reports .archive-description {
    font-size: 1.1rem;
    color: #6c757d;
    max-width: 700px;
    margin: 0 auto;
}

/* Filters Bar */
.cwe-archive-reports .reports-filters-bar {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
}

.cwe-archive-reports .filters-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.cwe-archive-reports .filter-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cwe-archive-reports .filter-group label {
    font-weight: 500;
    font-size: 0.9rem;
    color: #495057;
}

.cwe-archive-reports .filter-select {
    padding: 0.5rem 2rem 0.5rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
}

.cwe-archive-reports .reports-search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cwe-archive-reports .reports-search-form input {
    padding: 0.5rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    width: 250px;
    font-size: 0.9rem;
}

.cwe-archive-reports .search-submit {
    background: #58AAE8;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.cwe-archive-reports .search-submit:hover {
    background: #3a8bc8;
}

.cwe-archive-reports .search-submit svg {
    stroke: white;
}

.cwe-archive-reports .clear-filters {
    color: #dc3545;
    text-decoration: none;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.cwe-archive-reports .clear-filters:hover {
    text-decoration: underline;
}

/* Results Info */
.cwe-archive-reports .reports-results-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

.cwe-archive-reports .results-count {
    font-size: 0.85rem;
    color: #6c757d;
}

.cwe-archive-reports .active-filter {
    background: #e9ecef;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #495057;
}

/* Reports Grid */
.cwe-archive-reports .reports-grid {
    display: grid;
    gap: 30px;
    margin: 2rem 0;
}

.cwe-archive-reports .reports-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.cwe-archive-reports .reports-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.cwe-archive-reports .reports-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* Report Card Enhancements */
.cwe-archive-reports .report-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cwe-archive-reports .report-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -12px rgba(0,0,0,0.15);
}

.cwe-archive-reports .report-cover {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/12;
}

.cwe-archive-reports .report-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.cwe-archive-reports .report-card:hover .report-cover img {
    transform: scale(1.05);
}

.cwe-archive-reports .report-cover-placeholder {
    width: 100%;
    height: 100%;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
}

.cwe-archive-reports .report-type-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    z-index: 2;
}

.cwe-archive-reports .report-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.cwe-archive-reports .report-card:hover .report-overlay {
    opacity: 1;
}

.cwe-archive-reports .overlay-icon {
    width: 50px !important;
    height: 50px !important;
    background: #fff;
    border-radius: 50%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #58AAE8;
    font-size: 24px !important;
}

.cwe-archive-reports .report-info {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.cwe-archive-reports .report-date {
    font-size: 0.75rem;
    color: #58AAE8;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.cwe-archive-reports .report-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.5rem 0;
    color: #1a1a2e;
    line-height: 1.4;
}

.cwe-archive-reports .report-subtitle {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.cwe-archive-reports .report-excerpt {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cwe-archive-reports .report-meta-footer {
    margin-top: auto;
}

.cwe-archive-reports .report-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #58AAE8;
}

.cwe-archive-reports .report-read-more .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}

.cwe-archive-reports .report-card:hover .report-read-more .dashicons {
    transform: translateX(4px);
}

/* Pagination */
.cwe-archive-reports .pagination {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem 0;
}

.cwe-archive-reports .pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1a2e;
    background: #f8f9fa;
    transition: all 0.2s ease;
}

.cwe-archive-reports .pagination .page-numbers.current {
    background: #58AAE8;
    color: white;
}

.cwe-archive-reports .pagination .page-numbers:hover:not(.current) {
    background: #e9ecef;
}

/* No Results */
.cwe-archive-reports .no-results {
    text-align: center;
    padding: 4rem 2rem;
    background: #f8f9fa;
    border-radius: 16px;
}

.cwe-archive-reports .no-results svg {
    stroke: #adb5bd;
    margin-bottom: 1rem;
}

.cwe-archive-reports .no-results h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.cwe-archive-reports .no-results p {
    color: #6c757d;
}

.cwe-archive-reports .reset-button {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    background: #58AAE8;
    color: white;
    border-radius: 30px;
    text-decoration: none;
}

/* CTA Section */
.cwe-archive-reports .reports-cta {
    margin-top: 3rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    color: white;
}

.cwe-archive-reports .cta-content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.cwe-archive-reports .cta-content p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.cwe-archive-reports .cta-button {
    display: inline-block;
    background: #58AAE8;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}

.cwe-archive-reports .cta-button:hover {
    background: #3a8bc8;
}

/* Responsive */
@media (max-width: 1024px) {
    .cwe-archive-reports .reports-grid.columns-3,
    .cwe-archive-reports .reports-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cwe-archive-reports .archive-title {
        font-size: 1.8rem;
    }
    
    .cwe-archive-reports .filters-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cwe-archive-reports .filter-group {
        justify-content: space-between;
    }
    
    .cwe-archive-reports .reports-search-form input {
        width: 100%;
    }
    
    .cwe-archive-reports .reports-grid.columns-2,
    .cwe-archive-reports .reports-grid.columns-3,
    .cwe-archive-reports .reports-grid.columns-4 {
        grid-template-columns: 1fr;
    }
    
    .cwe-archive-reports .reports-cta {
        padding: 2rem 1rem;
    }
}

/* ============================================
   MODERN EVENTS WIDGET - DUAL STYLE
   Inspired by modern card designs with smooth transitions
   ============================================ */

/* Base Grid Styles */
.cwe-events-section-title {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2.5rem;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cwe-events-grid {
    display: grid;
    gap: 1.75rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Responsive Columns */
.cwe-events-grid.columns-1 { grid-template-columns: 1fr; max-width: 700px; }
.cwe-events-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.cwe-events-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.cwe-events-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* Empty State */
.cwe-events-empty {
    text-align: center;
    padding: 3rem;
    background: #f8f9fa;
    border-radius: 1rem;
    color: #6c757d;
}

/* ============================================
   STYLE 1 - Date Badge + Overlay Menu
   Inspired by the first example
   ============================================ */
.cwe-card.style-1 {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.cwe-card.style-1 .card-wrapper {
    position: relative;
    min-height: 420px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cwe-card.style-1:hover .card-wrapper {
    /* transform: translateY(-8px); */
    box-shadow: 0 30px 45px -15px rgba(0, 0, 0, 0.3);
}

/* Date Badge */
.cwe-card.style-1 .date-block {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    text-align: center;
    z-index: 10;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    background: var(--cwe-primary, rgba(119, 215, 185, 0.95));
}

.cwe-card.style-1:hover .date-block {
    transform: scale(1.02);
    background: rgba(91, 189, 155, 0.98);
}

.cwe-card.style-1 .date-block .day {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.cwe-card.style-1 .date-block .month,
.cwe-card.style-1 .date-block .year {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cwe-card.style-1 .date-block .month {
    margin-top: 0.2rem;
}

/* Card Data Overlay */
.cwe-card.style-1 .card-data {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
    padding: 1.5rem;
    transform: translateY(calc(93px + 0.5rem));
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.cwe-card.style-1:hover .card-data {
    transform: translateY(0);
}

.cwe-card.style-1 .content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.cwe-card.style-1 .event-location-mini {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.cwe-card.style-1 .event-location-mini .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.cwe-card.style-1 .title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0.5rem 0 1.5rem;
    line-height: 1.3;
}

.cwe-card.style-1 .title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

/* .cwe-card.style-1 .title a:hover {
    color: var(--cwe-primary, #77d7b9);
} */

.cwe-card.style-1 .text {
    font-size: 0.8rem;
    line-height: 1.5;
    opacity: 0.85;
    margin-bottom: 1.75rem;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Menu Button */
.cwe-card.style-1 .menu-button {
    position: absolute;
    top: -0.5rem;
    right: 0;
    width: 30px;
    cursor: pointer;
    z-index: 20;
}

.cwe-card.style-1 .menu-button span {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
}

.cwe-card.style-1 .menu-button span::before,
.cwe-card.style-1 .menu-button span::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
}

.cwe-card.style-1 .menu-button span::before {
    left: -10px;
}

.cwe-card.style-1 .menu-button span::after {
    right: -10px;
}

/* Menu Toggle */
.cwe-card.style-1 .menu-toggle {
    display: none;
}

.cwe-card.style-1 .menu-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    z-index: 15;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.cwe-card.style-1 .menu-toggle:checked ~ .menu-content {
    transform: translateY(0);
}

.cwe-card.style-1 .menu-content li {
    flex: 1;
    background: #77d7b9;
    text-align: center;
    padding: 0.75rem;
    transition: background 0.2s;
}

.cwe-card.style-1 .menu-content li:hover {
    background: #5bbd9b;
}

.cwe-card.style-1 .menu-content a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    position: relative;
    display: inline-block;
}

.cwe-card.style-1 .menu-content a span {
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 0.65rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.1rem 0.3rem;
    border-radius: 20px;
}

/* Footer Action Button */
.cwe-card.style-1 .card-footer-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    transform: translateY(100%);
    transition: transform 0.3s ease 0.05s;
    z-index: 8;
}

.cwe-card.style-1:hover .card-footer-overlay {
    transform: translateY(0);
}

.cwe-card.style-1 .event-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: gap 0.2s;
}

.cwe-card.style-1 .event-action-btn:hover {
    gap: 0.75rem;
}

.cwe-card.style-1 .event-action-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* ============================================
   STYLE 2 - Clean Header + Hover Animation
   Inspired by the second example
   ============================================ */
.cwe-card.style-2 {
    border-radius: 1.25rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cwe-card.style-2:hover {
    transform: translateY(-6px);
}

.cwe-card.style-2 .card-wrapper {
    position: relative;
    min-height: 420px;
    background-size: cover;
    background-position: center;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 15px 30px -12px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s;
}

.cwe-card.style-2:hover .card-wrapper {
    box-shadow: 0 25px 40px -15px rgba(0, 0, 0, 0.3);
}

/* Card Header */
.cwe-card.style-2 .card-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 10;
}

.cwe-card.style-2 .date {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    padding: 0.5rem 0.9rem;
    border-radius: 2rem;
    text-align: center;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cwe-card.style-2 .date .day {
    font-size: 1.1rem;
    font-weight: 700;
}

.cwe-card.style-2 .date .month,
.cwe-card.style-2 .date .year {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.cwe-card.style-2 .menu-content {
    display: flex;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
}

.cwe-card.style-2 .menu-content a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: transform 0.2s, color 0.2s;
    display: inline-block;
}

.cwe-card.style-2 .menu-content a:hover {
    transform: scale(1.1);
    color: #77d7b9;
}

.cwe-card.style-2 .menu-content a span {
    font-size: 0.7rem;
    margin-left: 0.2rem;
}

/* Card Data */
.cwe-card.style-2 .card-data {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    transform: translateY(calc(80px + 1.7rem));
    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.cwe-card.style-2:hover .card-data {
    transform: translateY(0);
}

.cwe-card.style-2 .content {
    color: #fff;
}

.cwe-card.style-2 .location {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 2rem;
    margin-bottom: 0.75rem;
}

.cwe-card.style-2 .location .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

.cwe-card.style-2 .title {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    line-height: 1.3;
}

.cwe-card.style-2 .title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

/* .cwe-card.style-2 .title a:hover {
    color: var(--cwe-primary-hover, #a08d69);;
} */

.cwe-card.style-2 .text {
    font-size: 0.8rem;
    line-height: 1.5;
    opacity: 0.85;
    margin-bottom: 1rem;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Read More Button */
.cwe-card.style-2 .read-more {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
}

.cwe-card.style-2 .read-more:after {
    content: '→';
    margin-left: 0.4rem;
    transition: transform 0.2s, margin-left 0.2s;
    display: inline-block;
}

.cwe-card.style-2 .read-more:hover:after {
    transform: translateX(4px);
    margin-left: 0.6rem;
    color: #77d7b9;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .cwe-events-grid.columns-3,
    .cwe-events-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cwe-events-section-title {
        font-size: 1.6rem;
    }
    
    .cwe-events-grid.columns-2,
    .cwe-events-grid.columns-3,
    .cwe-events-grid.columns-4 {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto;
    }
    
    .cwe-card.style-1 .card-wrapper,
    .cwe-card.style-2 .card-wrapper {
        min-height: 380px;
    }
    
    .cwe-card.style-1 .title,
    .cwe-card.style-2 .title {
        font-size: 1.15rem;
    }
    
    .cwe-card.style-1 .card-data {
        transform: translateY(calc(70px + 0.5rem));
    }
    
    .cwe-card.style-2 .card-data {
        transform: translateY(calc(65px + 0.5rem));
    }
}

@media (max-width: 480px) {
    .cwe-card.style-2 .card-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .cwe-card.style-2 .menu-content {
        align-self: flex-start;
    }
    
    .cwe-card.style-1 .date-block {
        top: 0.75rem;
        left: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
    
    .cwe-card.style-1 .date-block .day {
        font-size: 1.4rem;
    }
}

/* Smooth Hover Transitions for all interactive elements */
.cwe-card.style-1 .event-action-btn,
.cwe-card.style-2 .read-more,
.cwe-card.style-1 .title a,
.cwe-card.style-2 .title a,
.cwe-card.style-1 .menu-content a,
.cwe-card.style-2 .menu-content a {
    transition: all 0.2s ease;
}

/* Optional: Animation on page load */
@keyframes cardFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cwe-card {
    animation: cardFadeInUp 0.5s ease forwards;
}

.cwe-card:nth-child(1) { animation-delay: 0.05s; }
.cwe-card:nth-child(2) { animation-delay: 0.1s; }
.cwe-card:nth-child(3) { animation-delay: 0.15s; }
.cwe-card:nth-child(4) { animation-delay: 0.2s; }
.cwe-card:nth-child(5) { animation-delay: 0.25s; }
.cwe-card:nth-child(6) { animation-delay: 0.3s; }



/* ============================================
   MODERN ARTICLES WIDGET - DUAL STYLE
   Inspired by modern blog card designs
   ============================================ */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Section Title */
.cwe-articles-section-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2.5rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
}

/* Empty State */
.cwe-articles-empty {
    text-align: center;
    padding: 3rem;
    background: #f8f9fa;
    border-radius: 1rem;
    color: #6c757d;
    font-family: 'Inter', sans-serif;
}

/* Grid Layout */
.cwe-articles {
    display: grid;
    gap: 1.75rem;
    max-width: 1400px;
    margin: 0 auto;
}

.cwe-articles.columns-1 { grid-template-columns: 1fr; max-width: 700px; }
.cwe-articles.columns-2 { grid-template-columns: repeat(2, 1fr); }
.cwe-articles.columns-3 { grid-template-columns: repeat(3, 1fr); }
.cwe-articles.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================
   STYLE 1 - SLANTED DESIGN (inspired by example)
   ============================================ */
.cwe-articles.style-1 .article-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.cwe-articles.style-1 .article-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.25);
}

.cwe-articles.style-1 .card-inner {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Category Badge */
.cwe-articles.style-1 .category-badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    display: inline-block;
    background: #e23f7e;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cwe-articles.style-1 .category-badge:hover {
    transform: scale(1.02);
}

/* Content Mask - White overlay with diagonal cut */
.cwe-articles.style-1 .content-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: auto;
    background: rgba(255, 255, 255, 0.95);
    padding: 1.5rem;
    clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
    transition: all 0.35s ease;
}

/* .cwe-articles.style-1 .article-card:hover .content-mask {
    width: 75%;
    background: rgba(255, 255, 255, 0.98);
} */

/* Diagonal cut element */
.cwe-articles.style-1 .diagonal-cut {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.3) 50%);
    pointer-events: none;
}

/* Mask Content Typography */
.cwe-articles.style-1 .article-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.75rem 0;
}

.cwe-articles.style-1 .article-title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cwe-articles.style-1 .article-title a:hover {
    color: #e23f7e;
}

.cwe-articles.style-1 .article-excerpt {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #555;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Post Meta */
.cwe-articles.style-1 .post-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.7rem;
    color: #888;
}

.cwe-articles.style-1 .post-date,
.cwe-articles.style-1 .post-author {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cwe-articles.style-1 .post-date svg,
.cwe-articles.style-1 .post-author svg {
    opacity: 0.6;
}

/* Read More Button */
.cwe-articles.style-1 .read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cwe-primary, #0a0a0a);
    text-decoration: none;
    transition: all 0.25s ease;
}

.cwe-articles.style-1 .read-more .arrow-icon {
    transition: transform 0.25s ease;
}

.cwe-articles.style-1 .read-more:hover {
    gap: 0.75rem;
}

.cwe-articles.style-1 .read-more:hover .arrow-icon {
    transform: translateX(4px);
}

/* ============================================
   STYLE 2 - CLEAN OVERLAY CARD
   ============================================ */
.cwe-articles.style-2 .article-card {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.cwe-articles.style-2 .article-card:hover {
    transform: translateY(-8px);
}

.cwe-articles.style-2 .card-inner {
    position: relative;
    min-height: 380px;
    background-size: cover;
    background-position: center;
    border-radius: 1.25rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cwe-articles.style-2 .category-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: inline-block;
    background: #e23f7e;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border-radius: 2rem;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.cwe-articles.style-2 .content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.5rem 1.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    transform: translateY(calc(75px + 0.5rem));
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.cwe-articles.style-2 .article-card:hover .content-overlay {
    transform: translateY(0);
}

/* Post Date in Style 2 */
.cwe-articles.style-2 .post-date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.75rem;
}

.cwe-articles.style-2 .post-date .calendar-icon {
    stroke: #e23f7e;
}

/* Article Title - Style 2 */
.cwe-articles.style-2 .article-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.75rem 0;
}

.cwe-articles.style-2 .article-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cwe-articles.style-2 .article-title a:hover {
    color: #e23f7e;
}

/* Excerpt - Style 2 */
.cwe-articles.style-2 .article-excerpt {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Author - Style 2 */
.cwe-articles.style-2 .article-author {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1rem;
}

/* Read More - Style 2 */
.cwe-articles.style-2 .read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: all 0.25s ease;
}

.cwe-articles.style-2 .read-more .arrow-icon {
    transition: transform 0.25s ease;
}

.cwe-articles.style-2 .read-more:hover {
    gap: 0.75rem;
}

.cwe-articles.style-2 .read-more:hover .arrow-icon {
    transform: translateX(4px);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .cwe-articles.columns-3,
    .cwe-articles.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cwe-articles-section-title {
        font-size: 1.75rem;
    }
    
    .cwe-articles.columns-2,
    .cwe-articles.columns-3,
    .cwe-articles.columns-4 {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto;
    }
    
    /* Style 1 Responsive */
    .cwe-articles.style-1 .content-mask {
        width: 85%;
        padding: 1.25rem;
    }
    
    /* .cwe-articles.style-1 .article-card:hover .content-mask {
        width: 90%;
    } */
    
    .cwe-articles.style-1 .article-title {
        font-size: 1.2rem;
    }
    
    .cwe-articles.style-1 .article-excerpt {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
    }
    
    /* Style 2 Responsive */
    .cwe-articles.style-2 .card-inner {
        min-height: 340px;
    }
    
    .cwe-articles.style-2 .article-title {
        font-size: 1.2rem;
    }
    
    .cwe-articles.style-2 .content-overlay {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .cwe-articles.style-1 .content-mask {
        width: 100%;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    
    .cwe-articles.style-1 .diagonal-cut {
        display: none;
    }
    
    .cwe-articles.style-1 .category-badge {
        font-size: 0.65rem;
        padding: 0.3rem 0.8rem;
    }
    
    .cwe-articles.style-2 .category-badge {
        font-size: 0.65rem;
        padding: 0.25rem 0.8rem;
    }
    
    .cwe-articles.style-2 .article-title {
        font-size: 1.1rem;
    }
}

/* Animation on Scroll / Load */
@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cwe-articles .article-card {
    animation: cardReveal 0.5s ease forwards;
    opacity: 0;
}

.cwe-articles .article-card:nth-child(1) { animation-delay: 0.05s; }
.cwe-articles .article-card:nth-child(2) { animation-delay: 0.1s; }
.cwe-articles .article-card:nth-child(3) { animation-delay: 0.15s; }
.cwe-articles .article-card:nth-child(4) { animation-delay: 0.2s; }
.cwe-articles .article-card:nth-child(5) { animation-delay: 0.25s; }
.cwe-articles .article-card:nth-child(6) { animation-delay: 0.3s; }

/* Hover transition utilities */
.cwe-articles .article-card,
.cwe-articles .card-inner,
.cwe-articles .content-mask,
.cwe-articles .content-overlay,
.cwe-articles .category-badge,
.cwe-articles .read-more,
.cwe-articles .read-more .arrow-icon {
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* ============================================
   CWE POST WIDGET - TRADITIONAL STYLES
   Clean, classic design with category badges
   NO hover effects on content mask
   Follows CWE_Articles_Widget convention
   ============================================ */

/* Widget Container */
.cwe-post-widget {
    margin-bottom: 2rem;
}

/* Widget Title */
.cwe-post-widget-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    position: relative;
    font-family: inherit;
}

.cwe-post-widget-title:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: #2271b1;
    transition: width 0.2s ease;
}

/* Empty State */
.cwe-post-widget-empty {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
    color: #6c757d;
}

/* ============================================
   TRADITIONAL LAYOUT (Horizontal)
   ============================================ */
.cwe-post-widget.layout-traditional .post-card {
    display: flex;
    gap: 1.5rem;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

.cwe-post-widget.layout-traditional .post-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Thumbnail Positioning */
.cwe-post-widget.layout-traditional .post-card.thumbnail-left {
    flex-direction: row;
}

.cwe-post-widget.layout-traditional .post-card.thumbnail-right {
    flex-direction: row-reverse;
}

/* Thumbnail Styles */
.cwe-post-widget.layout-traditional .post-thumbnail {
    flex: 0 0 220px;
    overflow: hidden;
}

.cwe-post-widget.layout-traditional .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 10;
    display: block;
}

/* Content Mask - NO HOVER EFFECTS */
.cwe-post-widget.layout-traditional .post-content-mask {
    flex: 1;
    padding: 1.25rem 1.25rem 1.25rem 0;
}

.cwe-post-widget.layout-traditional .post-card.thumbnail-right .post-content-mask {
    padding: 1.25rem 0 1.25rem 1.25rem;
}

/* ============================================
   VERTICAL LAYOUT (Grid)
   ============================================ */
.cwe-post-widget.layout-vertical {
    display: grid;
    gap: 1.5rem;
}

.cwe-post-widget.layout-vertical.columns-1 {
    grid-template-columns: 1fr;
}

.cwe-post-widget.layout-vertical.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cwe-post-widget.layout-vertical.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cwe-post-widget.layout-vertical .post-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
    height: 100%;
}

.cwe-post-widget.layout-vertical .post-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cwe-post-widget.layout-vertical .post-thumbnail {
    width: 100%;
    overflow: hidden;
}

.cwe-post-widget.layout-vertical .post-thumbnail img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.cwe-post-widget.layout-vertical .post-content-mask {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================
   COMPACT LAYOUT
   ============================================ */
.cwe-post-widget.layout-compact .post-card {
    display: flex;
    gap: 1rem;
    background: #fff;
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    transition: background 0.2s ease;
}

.cwe-post-widget.layout-compact .post-card:hover {
    background: #f8f9fa;
}

.cwe-post-widget.layout-compact .post-thumbnail {
    flex: 0 0 80px;
}

.cwe-post-widget.layout-compact .post-thumbnail img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.cwe-post-widget.layout-compact .post-content-mask {
    flex: 1;
}

.cwe-post-widget.layout-compact .category-badge-list {
    margin-bottom: 0.25rem;
}

.cwe-post-widget.layout-compact .category-badge {
    font-size: 0.6rem;
    padding: 0.15rem 0.5rem;
}

.cwe-post-widget.layout-compact .post-title {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.cwe-post-widget.layout-compact .post-title a {
    font-weight: 600;
}

.cwe-post-widget.layout-compact .post-excerpt {
    display: none;
}

.cwe-post-widget.layout-compact .post-meta {
    margin-bottom: 0.25rem;
}

.cwe-post-widget.layout-compact .read-more-link {
    display: none;
}

/* ============================================
   COMMON STYLES (All Layouts)
   ============================================ */

/* Category Badges */
.category-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.category-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.category-badge:hover {
    opacity: 0.85;
    color: #fff;
}

/* Post Title */
.post-title {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.5rem 0;
}

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

.post-title a:hover {
    color: #2271b1;
}

/* Post Meta */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: #6c757d;
}

.post-meta .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 0.2rem;
}

.post-author,
.post-date {
    display: inline-flex;
    align-items: center;
}

/* Post Excerpt */
.post-excerpt {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #555;
    margin-bottom: 1rem;
}

/* Read More Link */
.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--cwe-primary, #a08d69);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.read-more-link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-top: 2.5px;
}

.read-more-link:hover {
    gap: 0.6rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    /* Traditional Layout */
    .cwe-post-widget.layout-traditional .post-card,
    .cwe-post-widget.layout-traditional .post-card.thumbnail-left,
    .cwe-post-widget.layout-traditional .post-card.thumbnail-right {
        flex-direction: column;
    }
    
    .cwe-post-widget.layout-traditional .post-thumbnail {
        flex: none;
        width: 100%;
    }
    
    .cwe-post-widget.layout-traditional .post-thumbnail img {
        aspect-ratio: 16 / 9;
    }
    
    .cwe-post-widget.layout-traditional .post-content-mask,
    .cwe-post-widget.layout-traditional .post-card.thumbnail-right .post-content-mask {
        padding: 1rem;
    }
    
    .cwe-post-widget.layout-traditional .post-title {
        font-size: 1.1rem;
    }
    
    /* Vertical Layout */
    .cwe-post-widget.layout-vertical.columns-2,
    .cwe-post-widget.layout-vertical.columns-3 {
        grid-template-columns: 1fr;
    }
    
    /* Compact Layout */
    .cwe-post-widget.layout-compact .post-title {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .cwe-post-widget-title {
        font-size: 1.25rem;
    }
    
    .post-title {
        font-size: 1rem;
    }
    
    .category-badge {
        font-size: 0.6rem;
        padding: 0.2rem 0.6rem;
    }
    
    .post-meta {
        gap: 0.75rem;
        font-size: 0.7rem;
    }
    
    .post-excerpt {
        font-size: 0.8rem;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
@media (prefers-color-scheme: dark) {
    .cwe-post-widget .post-card {
        background: #1e1e1e;
    }
    
    .cwe-post-widget .post-content-mask {
        background: #1e1e1e;
    }
    
    .cwe-post-widget .post-title a {
        color: #e0e0e0;
    }
    
    .cwe-post-widget .post-title a:hover {
        color: #4a9eff;
    }
    
    .cwe-post-widget .post-excerpt {
        color: #aaa;
    }
    
    .cwe-post-widget.layout-compact .post-card:hover {
        background: #2a2a2a;
    }
}

/* ============================================
   ANIMATIONS (Subtle, only on interactive elements)
   ============================================ */
.category-badge,
.read-more-link,
.post-title a,
.post-card {
    transition: all 0.2s ease;
}


/* ============================================
   WEBINARS WIDGET - MODERN MOVIE CARD STYLE
   Inspired by cinematic card designs
   ============================================ */

/* Section Title */
.webinars-section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2.5rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Empty State */
.webinars-empty {
    text-align: center;
    padding: 3rem;
    background: #f8f9fa;
    border-radius: 1rem;
    color: #6c757d;
}

/* Grid Layout - 2 columns default (landscape orientation) */
.webinars-grid {
    display: grid;
    gap: 1.75rem;
    max-width: 1400px;
    margin: 0 auto;
}

.webinars-grid.cols-1 { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
.webinars-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.webinars-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.webinars-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================
   STYLE 1 - MOVIE CARD (Slide-up Effect)
   Inspired by the cinematic example
   ============================================ */
.webinar-card.style-1 {
    --transition-duration: 500ms;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #1a1a2e;
    box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-duration) ease;
}

.webinar-card.style-1:hover {
    transform: scale(1.02);
}

.webinar-card.style-1 .card-inner {
    position: relative;
    height: 100%;
    width: 100%;
}

.webinar-card.style-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-duration) ease;
}

.webinar-card.style-1:hover img {
    transform: scale(1.03);
}

/* Gradient Overlay */
.webinar-card.style-1 .card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% -150%, transparent 10%, rgba(0, 0, 0, 0.6));
    pointer-events: none;
}

/* Card Content - Slide up from bottom */
.webinar-card.style-1 .card-content {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    color: #fff;
    z-index: 2;
    transition: transform var(--transition-duration) cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.webinar-card.style-1:not(:hover) .card-content {
    transform: translateY(calc(100% - 4rem));
}

.webinar-card.style-1:hover .card-content {
    transform: translateY(0);
}

/* Title */
.webinar-card.style-1 .webinar-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    color: #fff;
}

.webinar-card.style-1 .webinar-title a {
    color: #fff;
    text-decoration: none;
}

/* Infos (Rating + Meta) */
.webinar-card.style-1 .infos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    font-weight: 500;
    color: #eee;
}

.webinar-card.style-1 .infos span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.webinar-card.style-1 .infos svg {
    height: 1rem;
    width: auto;
}

.webinar-card.style-1 .rating-stars {
    display: flex;
    gap: 0.1rem;
}

.webinar-card.style-1 .rating-stars svg {
    width: 14px;
    height: 14px;
    fill: #FFD700;
    color: #FFD700;
}

/* Synopsis */
.webinar-card.style-1 .synopsis {
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0.5rem 0 0.75rem 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity calc(var(--transition-duration) / 2), transform calc(var(--transition-duration) / 2);
    transition-delay: 0s;
}

.webinar-card.style-1:hover .synopsis {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--transition-duration) / 3);
}

/* Action Icons */
.webinar-card.style-1 .action-icons {
    display: flex;
    gap: 0.75rem;
}

.webinar-card.style-1 .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(20px);
}

.webinar-card.style-1 .icon-btn svg {
    width: 1rem;
    height: 1rem;
    stroke: #fff;
}

.webinar-card.style-1 .icon-btn:hover {
    background: var(--cwe-primary-hover, #a08d69);
    transform: scale(1.1);
}

.webinar-card.style-1:hover .icon-btn {
    opacity: 1;
    transform: translateY(0);
}

.webinar-card.style-1:hover .icon-btn:nth-child(1) { transition-delay: calc(var(--transition-duration) / 5); }
.webinar-card.style-1:hover .icon-btn:nth-child(2) { transition-delay: calc(var(--transition-duration) / 4); }
.webinar-card.style-1:hover .icon-btn:nth-child(3) { transition-delay: calc(var(--transition-duration) / 3.5); }

/* ============================================
   STYLE 2 - CLEAN CARD WITH BADGE
   Modern card with overlay badges
   ============================================ */
.webinar-card.style-2 {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.webinar-card.style-2:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.15);
}

.webinar-card.style-2 .card-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.webinar-card.style-2 .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.webinar-card.style-2:hover .card-image img {
    transform: scale(1.05);
}

/* Play Overlay */
.webinar-card.style-2 .play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.webinar-card.style-2 .card-image:hover .play-overlay {
    opacity: 1;
}

.webinar-card.style-2 .play-btn {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #58AAE8;
    transition: transform 0.2s;
}

.webinar-card.style-2 .play-btn svg {
    max-width: 15px;
    fill: var(--cwe-primary, #a08d69);
}

.webinar-card.style-2 .play-btn:hover {
    transform: scale(1.1);
}

/* Register Overlay */
.webinar-card.style-2 .register-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    text-align: center;
}

.webinar-card.style-2 .register-btn-sm {
    display: inline-block;
    background: #58AAE8;
    color: #fff;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    text-decoration: none;
}

/* Card Content */
.webinar-card.style-2 .card-content {
    padding: 1.5rem;
}

.webinar-card.style-2 .badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    margin-bottom: 0.75rem;
}

.webinar-card.style-2 .upcoming-badge {
    background: #58AAE8;
    color: #fff;
}

.webinar-card.style-2 .recorded-badge {
    background: #6c757d;
    color: #fff;
}

.webinar-card.style-2 .webinar-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.webinar-card.style-2 .webinar-title a {
    color: #1a1a1a;
    text-decoration: none;
}

.webinar-card.style-2 .webinar-title a:hover {
    color: var(--cwe-primary-hover, #a08d69);
}

/* Meta */
.webinar-card.style-2 .webinar-meta {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.7rem;
    color: #6c757d;
}

.webinar-card.style-2 .webinar-meta svg {
    width: 12px;
    height: 12px;
    margin-right: 0.2rem;
    vertical-align: middle;
}

.webinar-card.style-2 .webinar-meta span {
    display: inline-flex;
    align-items: center;
}

/* Excerpt */
.webinar-card.style-2 .webinar-excerpt {
    font-size: 1rem;
    line-height: 1.5;
    color: #6b7280;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Speakers */
.webinar-card.style-2 .webinar-speakers {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.webinar-card.style-2 .webinar-speakers svg {
    width: 12px;
    height: 12px;
}

/* Buttons */
.webinar-card.style-2 .register-btn,
.webinar-card.style-2 .watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: .8rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.2s;
}

.webinar-card.style-2 .register-btn {
    background: #58AAE8;
    color: #fff;
}

.webinar-card.style-2 .register-btn:hover {
    background: #3a8bc8;
    gap: 0.5rem;
}

.webinar-card.style-2 .watch-btn {
    background: #f0f0f0;
    color: #333;
}

.webinar-card.style-2 .watch-btn:hover {
    background: #e0e0e0;
    gap: 0.5rem;
}

.webinar-card.style-2 .arrow {
    transition: transform 0.2s;
}

.webinar-card.style-2 .register-btn:hover .arrow,
.webinar-card.style-2 .watch-btn:hover .arrow {
    transform: translateX(3px);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .webinars-grid.cols-3,
    .webinars-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .webinars-section-title {
        font-size: 1.6rem;
    }
    
    .webinars-grid.cols-2,
    .webinars-grid.cols-3,
    .webinars-grid.cols-4 {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto;
    }
    
    /* Style 1 Responsive */
    .webinar-card.style-1 .card-content {
        transform: translateY(calc(100% - 3.5rem));
    }
    
    .webinar-card.style-1 .webinar-title {
        font-size: 1rem;
    }
    
    .webinar-card.style-1 .infos {
        font-size: 0.65rem;
    }
    
    /* Style 2 Responsive */
    .webinar-card.style-2 .webinar-title {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .webinar-card.style-1 .action-icons {
        gap: 0.5rem;
    }
    
    .webinar-card.style-1 .icon-btn {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    .webinar-card.style-2 .card-content {
        padding: 0.75rem;
    }
    
    .webinar-card.style-2 .webinar-excerpt {
        -webkit-line-clamp: 2;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.webinar-card {
    animation: cardReveal 0.4s ease forwards;
    opacity: 0;
}

.webinar-card:nth-child(1) { animation-delay: 0.05s; }
.webinar-card:nth-child(2) { animation-delay: 0.1s; }
.webinar-card:nth-child(3) { animation-delay: 0.15s; }
.webinar-card:nth-child(4) { animation-delay: 0.2s; }
.webinar-card:nth-child(5) { animation-delay: 0.25s; }
.webinar-card:nth-child(6) { animation-delay: 0.3s; }

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .webinar-card.style-2 {
        background: #1e1e2e;
    }
    
    .webinar-card.style-2 .webinar-title a {
        color: #e0e0e0;
    }
    
    .webinar-card.style-2 .webinar-title a:hover {
        color: #58AAE8;
    }
    
    .webinar-card.style-2 .webinar-excerpt {
        color: #a0a0b0;
    }
    
    .webinar-card.style-2 .watch-btn {
        background: #2a2a3a;
        color: #e0e0e0;
    }
}

/* Hidden Card Radial Gradien Background Display */
.radial-custom-card {
	background-image: radial-gradient(#737373 1px, transparent 1px);
    background-size: 10px 10px;
    outline-color: color-mix(in oklab, #a1a1a1 50%, transparent);
    opacity: .25;
}

.webinar-card.style-1 {
    min-height: 269px;
}

/* ============================================
   WEBINARS ARCHIVE PAGE STYLES
   Additional styles for the archive page
   ============================================ */

/* Archive Header */
.cwe-archive-webinars .archive-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0 1rem;
}

.cwe-archive-webinars .archive-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cwe-archive-webinars .archive-description {
    font-size: 1.1rem;
    color: #6c757d;
    max-width: 700px;
    margin: 0 auto;
}

/* Section Headers */
.cwe-archive-webinars .webinars-section {
    margin-bottom: 4rem;
}

.cwe-archive-webinars .section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.cwe-archive-webinars .section-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.cwe-archive-webinars .section-description {
    font-size: 1rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

/* Grid Layouts */
.cwe-archive-webinars .webinars-grid {
    display: grid;
    gap: 1.75rem;
    max-width: 1400px;
    margin: 0 auto;
}

.cwe-archive-webinars .webinars-grid.cols-1 { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
.cwe-archive-webinars .webinars-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cwe-archive-webinars .webinars-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cwe-archive-webinars .webinars-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Pagination */
.cwe-archive-webinars .pagination {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem 0;
}

.cwe-archive-webinars .pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1a2e;
    background: #f8f9fa;
    transition: all 0.2s ease;
}

.cwe-archive-webinars .pagination .page-numbers.current {
    background: #58AAE8;
    color: white;
}

.cwe-archive-webinars .pagination .page-numbers:hover:not(.current) {
    background: #e9ecef;
}

/* Responsive */
@media (max-width: 1024px) {
    .cwe-archive-webinars .webinars-grid.cols-3,
    .cwe-archive-webinars .webinars-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cwe-archive-webinars .archive-title {
        font-size: 1.8rem;
    }
    
    .cwe-archive-webinars .section-title {
        font-size: 1.4rem;
    }
    
    .cwe-archive-webinars .webinars-grid.cols-2,
    .cwe-archive-webinars .webinars-grid.cols-3,
    .cwe-archive-webinars .webinars-grid.cols-4 {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto;
    }
}

/* ============================================
   SINGLE WEBINAR PAGE STYLES
   ============================================ */

/* Hero Section */
.cwe-single-webinar .webinar-hero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 4rem 0;
    margin-bottom: 2rem;
    position: relative;
    min-height: 550px;
}

.cwe-single-webinar .hero-content {
    text-align: center;
    color: white;
}

.cwe-single-webinar .webinar-badge {
    margin-bottom: 1rem;
}

.cwe-single-webinar .badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.cwe-single-webinar .live-badge {
    background: #dc3545;
    color: white;
}

.cwe-single-webinar .recording-badge {
    background: #28a745;
    color: white;
}

.cwe-single-webinar .webinar-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.cwe-single-webinar .webinar-meta-bar {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.cwe-single-webinar .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.cwe-single-webinar .meta-item svg {
    width: 16px;
    height: 16px;
}

.cwe-single-webinar .hero-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #58AAE8;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.cwe-single-webinar .hero-cta .btn-primary:hover {
    background: #3a8bc8;
    transform: scale(1.02);
}

/* Layout */
.cwe-single-webinar .webinar-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

/* Video Container */
.cwe-single-webinar .webinar-video-wrapper {
    margin-bottom: 2rem;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.cwe-single-webinar .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.cwe-single-webinar .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cwe-single-webinar .video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a1a2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.cwe-single-webinar .video-placeholder svg {
    margin-bottom: 1rem;
}

/* Content Sections */
.cwe-single-webinar .section-header {
    margin-bottom: 1.5rem;
}

.cwe-single-webinar .section-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cwe-single-webinar .section-divider {
    width: 60px;
    height: 3px;
    background: #58AAE8;
    border-radius: 3px;
}

.cwe-single-webinar .section-header.centered {
    text-align: center;
}

.cwe-single-webinar .section-header.centered .section-divider {
    margin: 0 auto;
}

.cwe-single-webinar .webinar-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #4a5568;
}

/* Speakers Grid */
.cwe-single-webinar .speakers-grid {
    display: grid;
    gap: 2rem;
    margin-top: 1rem;
}

.cwe-single-webinar .speaker-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 16px;
    transition: transform 0.2s ease;
}

.cwe-single-webinar .speaker-card:hover {
    transform: translateX(5px);
}

.cwe-single-webinar .speaker-avatar {
    flex-shrink: 0;
}

.cwe-single-webinar .speaker-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.cwe-single-webinar .speaker-info h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.cwe-single-webinar .speaker-role {
    color: #58AAE8;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.cwe-single-webinar .speaker-bio {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.5;
}

/* Sidebar Cards */
.cwe-single-webinar .sidebar-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.cwe-single-webinar .sidebar-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.cwe-single-webinar .sidebar-card p {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.cwe-single-webinar .btn-register,
.cwe-single-webinar .btn-watch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.cwe-single-webinar .btn-register {
    background: #58AAE8;
    color: white;
}

.cwe-single-webinar .btn-register:hover {
    background: #3a8bc8;
}

.cwe-single-webinar .btn-watch {
    background: #1a1a2e;
    color: white;
}

.cwe-single-webinar .btn-watch:hover {
    background: #2d2d44;
}

/* Share Buttons */
.cwe-single-webinar .share-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.cwe-single-webinar .share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.cwe-single-webinar .share-btn.facebook {
    background: #1877f2;
    color: white;
}

.cwe-single-webinar .share-btn.twitter {
    background: #1da1f2;
    color: white;
}

.cwe-single-webinar .share-btn.linkedin {
    background: #0077b5;
    color: white;
}

.cwe-single-webinar .share-btn.email {
    background: #6c757d;
    color: white;
}

.cwe-single-webinar .share-btn:hover {
    transform: scale(1.1);
}

/* Related Webinars Section */
.cwe-single-webinar .related-webinars-section {
    background: #f8f9fa;
    padding: 4rem 0;
    margin-top: 3rem;
}

.cwe-single-webinar .related-webinars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.cwe-single-webinar .related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cwe-single-webinar .related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

.cwe-single-webinar .related-link {
    text-decoration: none;
    color: inherit;
}

.cwe-single-webinar .related-image {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.cwe-single-webinar .related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cwe-single-webinar .related-card:hover .related-image img {
    transform: scale(1.05);
}

.cwe-single-webinar .related-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cwe-single-webinar .related-card:hover .related-overlay {
    opacity: 1;
}

.cwe-single-webinar .watch-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
}

.cwe-single-webinar .related-content {
    padding: 1rem;
}

.cwe-single-webinar .related-content h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cwe-single-webinar .related-meta {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Floating CTA (Mobile) */
.cwe-single-webinar .floating-cta {
    position: fixed;
    bottom: 1rem;
    left: 0;
    right: 0;
    z-index: 100;
    display: none;
    padding: 0 1rem;
}

.cwe-single-webinar .floating-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #58AAE8;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Responsive Single Webinar */
@media (max-width: 992px) {
    .cwe-single-webinar .webinar-layout {
        grid-template-columns: 1fr;
    }
    
    .cwe-single-webinar .related-webinars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cwe-single-webinar .webinar-hero {
        padding: 2rem 0;
    }
    
    .cwe-single-webinar .webinar-title {
        font-size: 1.6rem;
    }
    
    .cwe-single-webinar .webinar-meta-bar {
        gap: 1rem;
    }
    
    .cwe-single-webinar .speaker-card {
        flex-direction: column;
        text-align: center;
    }
    
    .cwe-single-webinar .speaker-avatar img {
        width: 100px;
        height: 100px;
    }
    
    .cwe-single-webinar .related-webinars-grid {
        grid-template-columns: 1fr;
    }
    
    .cwe-single-webinar .floating-cta {
        display: block;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .cwe-single-webinar .webinar-content {
        color: #cbd5e0;
    }
    
    .cwe-single-webinar .speaker-card {
        background: #2d3748;
    }
    
    .cwe-single-webinar .sidebar-card {
        background: #2d3748;
    }
    
    .cwe-single-webinar .sidebar-card p,
    .cwe-single-webinar .related-meta {
        color: #a0aec0;
    }
    
    .cwe-single-webinar .related-webinars-section {
        background: #1a202c;
    }
    
    .cwe-single-webinar .related-card {
        background: #2d3748;
        color: #e2e8f0;
    }
}

/* ============================================
   ARCHIVE PAGE STYLES
   ============================================ */

/* Archive Header */
.cwe-archive-publication .archive-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.cwe-archive-publication .archive-title {
    font-family: 'Lexend', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cwe-archive-publication .archive-description {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    color: #6b7280;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Pagination */
.cwe-pagination {
    text-align: center;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.cwe-pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    font-family: 'Lexend', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4b5563;
    background: #f9fafb;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cwe-pagination .page-numbers.current,
.cwe-pagination .page-numbers:hover {
    background: var(--cwe-primary, #a08d69);
    color: #fff;
}

.cwe-pagination .page-numbers.prev,
.cwe-pagination .page-numbers.next {
    font-weight: 600;
}

.cwe-pagination .dots {
    background: transparent;
    color: #9ca3af;
}

/* Responsive Archive */
@media (max-width: 768px) {
    .cwe-archive-publication .archive-title {
        font-size: 1.8rem;
    }
    
    .cwe-archive-publication .archive-description {
        font-size: 0.95rem;
    }
    
    .cwe-pagination .page-numbers {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ============================================
   PORTFOLIO ARCHIVE PAGE STYLES
   ============================================ */

/* Archive Header */
.cwe-archive-portfolio .archive-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.cwe-archive-portfolio .archive-title {
    font-family: 'Lexend', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cwe-archive-portfolio .archive-description {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    color: #6b7280;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Pagination */
.cwe-pagination {
    text-align: center;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.cwe-pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    font-family: 'Lexend', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4b5563;
    background: #f9fafb;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cwe-pagination .page-numbers.current,
.cwe-pagination .page-numbers:hover {
    background: var(--cwe-primary, #a08d69);
    color: #fff;
}

.cwe-pagination .page-numbers.prev,
.cwe-pagination .page-numbers.next {
    font-weight: 600;
}

.cwe-pagination .dots {
    background: transparent;
    color: #9ca3af;
}

/* Like Button Active State */
.cwe-portfolio.style-1 .like-button.liked svg {
    fill: #16C79A;
    stroke: #16C79A;
}

/* Responsive Archive */
@media (max-width: 768px) {
    .cwe-archive-portfolio .archive-title {
        font-size: 1.8rem;
    }
    
    .cwe-archive-portfolio .archive-description {
        font-size: 0.95rem;
    }
    
    .cwe-pagination .page-numbers {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* Taxonomy Page Specific */
.tax-portfolio-category .cwe-archive-portfolio .archive-header {
    border-bottom: none;
    padding-bottom: 0;
}

.tax-portfolio-category .cwe-archive-portfolio .archive-title {
    background: none;
    color: #1a1a2e;
    -webkit-background-clip: unset;
    background-clip: unset;
}


/* ============================================
   EVENTS ARCHIVE PAGE STYLES
   ============================================ */

.cwe-archive-events .archive-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.cwe-archive-events .archive-title {
    font-family: 'Lexend', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cwe-archive-events .archive-description {
    font-size: 1.1rem;
    color: #6b7280;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Section Headers */
.cwe-archive-events .events-section {
    margin-bottom: 4rem;
}

.cwe-archive-events .section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.cwe-archive-events .section-header h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
    padding-bottom: 0.75rem;
}

.cwe-archive-events .section-header h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--cwe-primary, #a08d69);
    border-radius: 3px;
}

.cwe-archive-events .section-header .section-description {
    color: #6b7280;
    max-width: 600px;
    margin: 1rem auto 0;
}

/* No Events Message */
.cwe-archive-events .no-events-message {
    text-align: center;
    padding: 3rem;
    background: #f9fafb;
    border-radius: 1rem;
    color: #6b7280;
}

/* Pagination */
.cwe-pagination {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.cwe-pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4b5563;
    background: #f9fafb;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cwe-pagination .page-numbers.current,
.cwe-pagination .page-numbers:hover {
    background: var(--cwe-primary, #a08d69);
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .cwe-archive-events .archive-title {
        font-size: 1.8rem;
    }
    
    .cwe-archive-events .archive-description {
        font-size: 0.95rem;
    }
    
    .cwe-archive-events .section-header h2 {
        font-size: 1.5rem;
    }
    
    .cwe-pagination .page-numbers {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
}