/*
Theme Name: Prepistry
Theme URI: https://prepistry.com/
Author: Audai Mousa
Author URI: https://prepistry.com/about-audai
Description: A WordPress theme for recipe blogs with TL;DR and FAQ functionality.
Version: 1.0.0
License: GPL v2 or later
License URI: ./LICENSE
Text Domain: prepistry
*/

/*
 * @package Prepistry
 * @version 1.0.1
 * File Name: style.css
 * File Description: Main stylesheet with combined CSS from all HTML proofs
 */

/* SHARED CSS - USED BY ALL TEMPLATES */
/* CSS CUSTOM PROPERTIES - Single source of truth */
:root {
    --primary: #2f463c;
    --primary-light: #4a6b5d;
    --bg: #fff;
    --text: #1a1a1a;
    --text-light: #666;
    --border: #e5e5e5;
    --accent: #f5f7f6;
    --orange: #d4471b;
    --orange-light: #ff6b35;
    --orange-dark: #e55a2b;
    
    /* Responsive Spacing System */
    --space-xs: clamp(.25rem,.4vw,.4rem);
    --space-sm: clamp(.4rem,.8vw,.6rem);
    --space-md: clamp(.6rem,1.6vw,1rem);
    --space-lg: clamp(.8rem,2.4vw,1.6rem);
    --space-xl: clamp(1.2rem,3.2vw,2.4rem);
    --space-xxl: clamp(1.6rem,4.8vw,3.2rem);
    
    /* Simplified Typography Scale */
    --font-xs: clamp(.9rem, 1.5vw, 1rem);
    --font-sm: clamp(.975rem, 1.8vw, 1.175rem);
    --font-base: clamp(1rem, 2vw, 1.2rem);
    --font-md: clamp(1rem, 2.2vw, 1.275rem);
    --font-lg: clamp(1.175rem, 2.8vw, 1.575rem);
    --font-xl: clamp(1.275rem, 4vw, 2.225rem);
    --font-xxl: clamp(1.575rem, 6vw, 3.225rem);
    
    /* Design System */
    --radius: clamp(.2rem,.4vw,.4rem);
    --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* BASE STYLES WITH LOGICAL PROPERTIES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    inline-size: 100%;
    overflow-x: hidden;
    font-size: var(--font-sm);
}

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* HEADER COMPONENT WITH CONTAINMENT */
.header {
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-md);
    inline-size: 100%;
    contain: layout style;
}

.header-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-sm);
    align-items: center;
}

.logo {
    grid-column: 1;
    grid-row: 1;
}

.logo img {
    inline-size: clamp(80px,16vw,140px);
    block-size: auto;
    object-fit: contain;
}

.nav {
    display: none;
    grid-column: 1/-1;
    grid-row: 2;
    background: rgba(255,255,255,.05);
    margin-block-start: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 0;
    inline-size: 100%;
}

.nav a {
    color: var(--bg);
    text-decoration: none;
    padding: var(--space-sm);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--font-sm);
    text-align: center;
    display: block;
    inline-size: 100%;
}

.nav a:hover {
    background: rgba(255,255,255,.1);
}

.search {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    background: var(--bg);
    border-radius: 50px;
    overflow: hidden;
    border: 2px solid transparent;
    align-items: center;
    inline-size: clamp(100px,20vw,180px);
}

.search:focus-within {
    border-color: var(--orange);
}

.search input {
    border: none;
    outline: none;
    padding-inline: var(--space-sm);
    padding-block: var(--space-xs);
    background: var(--bg);
    color: var(--text);
    font-size: var(--font-xs);
    flex: 1;
    inline-size: 100%;
    min-inline-size: 0;
}

.search input::placeholder {
    color: var(--text-light);
}

.search button {
    background: var(--orange-light);
    color: var(--bg);
    border: none;
    padding: var(--space-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: clamp(24px,4.8vw,36px);
    block-size: clamp(24px,4.8vw,36px);
    border-radius: 50%;
    margin: 2px;
    flex-shrink: 0;
}

.search button:hover {
    background: var(--orange-dark);
}

.search svg {
    inline-size: clamp(12px,2.4vw,16px);
    block-size: clamp(12px,2.4vw,16px);
    stroke-width: 2.5;
}

.mobile-toggle {
    display: none;
}

.mobile-btn {
    display: block;
    grid-column: 3;
    grid-row: 1;
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius);
    color: var(--bg);
    margin-inline-start: var(--space-xs);
}

.mobile-btn:hover {
    background: rgba(255,255,255,.1);
}

.mobile-btn svg {
    inline-size: clamp(18px,3.6vw,22px);
    block-size: clamp(18px,3.6vw,22px);
}

.mobile-toggle:checked + .header-wrap .nav {
    display: flex;
}

/* Missing class definitions */
.chef-content {
    inline-size: 100%;
}

.quote-icon {
    flex-shrink: 0;
    opacity: 0.7;
}

/* FOOTER COMPONENT WITH CONTAINMENT */
.footer {
    background: var(--primary);
    color: var(--bg);
    padding-block-end: var(--space-md);
    text-align: center;
    inline-size: 100%;
    contain: layout style;
}

.footer-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.footer-newsletter {
    background: #40534b;
    color: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
}

.footer-newsletter-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
    text-align: center;
}

.footer-newsletter-title {
    font-size: var(--font-xl);
    margin-block-end: var(--space-md);
    font-weight: 700;
    line-height: 1.2;
    inline-size: 100%;
}

.footer-newsletter-desc {
    margin-block-end: var(--space-lg);
    line-height: 1.7;
    font-size: var(--font-base);
    inline-size: 100%;
}

.footer-newsletter-form {
    inline-size: 100%;
    max-inline-size: 800px;
    margin-inline: auto;
    margin-block-end: var(--space-md);
}

.footer-newsletter-input-group {
    display: flex;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
    background: rgba(255,255,255,.1);
    padding: var(--space-xs);
    border-radius: calc(var(--radius) + 4px);
    border: 1px solid rgba(255,255,255,.2);
    flex-direction: column;
    inline-size: 100%;
}

.footer-newsletter-input {
    flex: 1;
    padding: var(--space-md);
    border: none;
    border-radius: var(--radius);
    font-size: var(--font-sm);
    outline: none;
    background: var(--bg);
    color: var(--text);
    inline-size: 100%;
}

.footer-newsletter-input::placeholder {
    color: var(--text-light);
}

.footer-newsletter-btn {
    background: var(--orange-light);
    color: var(--bg);
    border: none;
    padding: var(--space-md);
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    font-size: var(--font-sm);
    white-space: nowrap;
    text-transform: uppercase;
    inline-size: 100%;
}

.footer-newsletter-btn:hover {
    background: var(--orange-dark);
}

.footer-newsletter-privacy {
    font-size: var(--font-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    inline-size: 100%;
}

.footer-newsletter-privacy svg {
    inline-size: 16px;
    block-size: 16px;
    opacity: .6;
    flex-shrink: 0;
}

.footer-content {
    background: var(--primary);
    padding-block-start: var(--space-xl);
    inline-size: 100%;
}

.footer-brand {
    margin-block-end: var(--space-md);
    inline-size: 100%;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
    flex-wrap: wrap;
    inline-size: 100%;
}

.footer-link {
    color: var(--bg);
    text-decoration: none;
    font-size: var(--font-xs);
    padding: var(--space-xs);
}

.footer-link:hover {
    opacity: .8;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
    flex-wrap: wrap;
    inline-size: 100%;
}

.footer-social-link {
    color: var(--bg);
    text-decoration: none;
    font-size: var(--font-xs);
    padding: var(--space-xs);
}

.footer-social-link:hover {
    opacity: .8;
}

.footer-copyright {
    font-size: var(--font-xs);
    border-block-start: 1px solid var(--primary-light);
    padding-block-start: var(--space-md);
    inline-size: 100%;
}

/* RECENT POSTS COMPONENT WITH CONTAINMENT */
.recent {
    background: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.recent-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.recent-title {
    font-size: var(--font-xl);
    color: var(--primary);
    margin-block-end: var(--space-lg);
    font-weight: 700;
    text-align: center;
    inline-size: 100%;
}

.recent-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    inline-size: 100%;
}

.recent-item {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    inline-size: 100%;
    contain: layout paint;
}

.recent-item:hover {
    border-color: var(--primary);
}

.recent-img {
    aspect-ratio: 1.91;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    position: relative;
    inline-size: 100%;
}

.recent-date {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-end: var(--space-xs);
    background: var(--primary);
    color: var(--bg);
    padding: var(--space-xs);
    border-radius: var(--radius);
    font-size: var(--font-xs);
    font-weight: 600;
    min-inline-size: clamp(2.4rem,8vw,4rem);
    text-align: center;
}

.recent-info {
    padding: var(--space-sm);
    inline-size: 100%;
}

.recent-item-title {
    font-weight: 600;
    color: var(--primary);
    line-height: 1.3;
    font-size: var(--font-sm);
    inline-size: 100%;
}

/* HOMEPAGE-SPECIFIC CSS */

/* HERO SECTION WITH CONTAINMENT */
.hero {
    background: var(--accent);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.hero-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
}

.hero-content {
    inline-size: 100%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    border-radius: 50px;
    font-size: var(--font-xs);
    font-weight: 600;
    margin-block-end: var(--space-md);
}

.hero-badge::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    background: var(--orange-light);
    border-radius: 50%;
    flex-shrink: 0;
}

.hero-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    line-height: 1.1;
    font-weight: 800;
    inline-size: 100%;
}

.hero-highlight {
    color: var(--orange-light);
}

.hero-subtitle {
    font-size: var(--font-xl);
    color: var(--primary-light);
    margin-block-end: var(--space-lg);
    font-weight: 500;
    line-height: 1.4;
    inline-size: 100%;
}

.hero-desc {
    color: var(--text-light);
    margin-block-end: 0;
    font-size: var(--font-base);
    line-height: 1.5;
    inline-size: 100%;
}

.hero-visual {
    position: relative;
    inline-size: 100%;
    max-inline-size: 500px;
    margin-inline: auto;
}

.hero-img-wrap {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--border);
    aspect-ratio: 1.2;
    inline-size: 100%;
}

.hero-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    will-change: auto;
    transform: translateZ(0);
}

.hero-card {
    position: absolute;
    inset-block-end: clamp(-8px,1.6vw,-12px);
    inset-inline-end: clamp(-8px,1.6vw,-12px);
    background: var(--bg);
    padding: var(--space-sm);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    min-inline-size: clamp(80px,16vw,120px);
    contain: layout paint;
}

.hero-card h3 {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--primary);
    margin-block-end: var(--space-xs);
}

.hero-stats {
    display: flex;
    gap: var(--space-sm);
}

.hero-stat {
    text-align: center;
    flex: 1;
}

.hero-stat-num {
    display: block;
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--orange);
    line-height: 1;
}

.hero-stat-label {
    font-size: var(--font-xs);
    color: var(--text-light);
    text-transform: uppercase;
}

.hero-actions {
    margin-block-start: var(--space-xl);
    text-align: center;
    inline-size: 100%;
}

.hero-btns {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-direction: column;
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.hero-btn {
    padding-block: var(--space-md);
    padding-inline: var(--space-lg);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    display: block;
    text-align: center;
    inline-size: 100%;
    max-inline-size: 280px;
    margin-inline: auto;
    font-size: var(--font-sm);
    border: 2px solid transparent;
}

.hero-btn--primary {
    background: var(--orange-light);
    color: var(--bg);
    border-color: var(--orange-light);
}

.hero-btn--primary:hover {
    background: var(--orange-dark);
}

.hero-btn--secondary {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.hero-btn--secondary:hover {
    background: var(--primary);
    color: var(--bg);
}

.hero-features {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-direction: column;
    inline-size: 100%;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-xs);
    color: var(--text-light);
    justify-content: center;
}

/* CORE CONTENT SECTION WITH CONTAINMENT */
.core {
    background: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.core-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.core-header {
    text-align: center;
    margin-block-end: var(--space-xl);
    inline-size: 100%;
}

.core-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    font-weight: 800;
    inline-size: 100%;
}

.core-subtitle {
    font-size: var(--font-md);
    color: var(--text-light);
    inline-size: 100%;
    line-height: 1.5;
}

.core-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-block-end: var(--space-xl);
    inline-size: 100%;
}

.featured {
    background: var(--primary);
    color: var(--bg);
    padding: var(--space-lg);
    border-radius: var(--radius);
    border: 1px solid var(--primary);
    text-decoration: none;
    display: block;
    inline-size: 100%;
    contain: layout paint;
}

.featured:hover {
    background: var(--primary-light);
}

.featured-title {
    font-size: var(--font-xl);
    font-weight: 800;
    margin-block-end: var(--space-sm);
    inline-size: 100%;
}

.featured-desc {
    font-size: var(--font-base);
    margin-block-end: var(--space-md);
    line-height: 1.5;
    inline-size: 100%;
}

.featured-count {
    display: inline-block;
    background: var(--orange-light);
    color: var(--bg);
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    border-radius: 50px;
    font-weight: 700;
    font-size: var(--font-sm);
}

.core-item {
    background: var(--accent);
    padding: var(--space-md);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    display: block;
    border: 2px solid transparent;
    inline-size: 100%;
    contain: layout paint;
}

.core-item:hover {
    border-color: var(--orange-light);
    background: #f0f4f0;
}

.core-item--orange {
    background: #fff5f2;
    border-color: #ffe4dc;
}

.core-item--orange:hover {
    background: #ffede6;
    border-color: var(--orange-light);
}

.core-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-sm);
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.core-item-title {
    font-size: var(--font-lg);
    color: var(--primary);
    font-weight: 700;
    line-height: 1.2;
    flex: 1;
    min-inline-size: 0;
}

.core-item-count {
    font-size: var(--font-xs);
    color: var(--orange);
    font-weight: 700;
    background: rgba(255,107,53,.1);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.core-item-desc {
    font-size: var(--font-sm);
    color: var(--text-light);
    line-height: 1.4;
    inline-size: 100%;
}

.core-spotlight {
    margin-block-start: var(--space-xl);
    padding: var(--space-lg);
    background: linear-gradient(135deg,var(--orange-light),var(--orange-dark));
    color: var(--bg);
    border-radius: var(--radius);
    text-align: center;
    inline-size: 100%;
    contain: layout paint;
}

.core-spotlight-title {
    font-size: var(--font-xl);
    font-weight: 800;
    margin-block-end: var(--space-sm);
    inline-size: 100%;
}

.core-spotlight-desc {
    font-size: var(--font-base);
    margin-block-end: var(--space-lg);
    line-height: 1.5;
    inline-size: 100%;
}

.core-spotlight-btn {
    display: inline-block;
    background: var(--bg);
    color: var(--orange);
    padding-block: var(--space-md);
    padding-inline: var(--space-xl);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: var(--font-sm);
    max-inline-size: 100%;
}

.core-spotlight-btn:hover {
    background: #f8f8f8;
}

/* CHEF SECTION WITH CONTAINMENT */
.chef {
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.chef-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
}

.chef-greeting {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-lg);
    justify-content: center;
}

.chef-title {
    font-size: var(--font-xl);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    inline-size: 100%;
}

.chef-message {
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.chef-message p {
    margin-block-end: var(--space-md);
    line-height: 1.7;
    font-size: var(--font-base);
    inline-size: 100%;
}

.chef-message p:last-child {
    margin-block-end: 0;
}

.chef-message strong {
    color: var(--orange-light);
    font-weight: 700;
}

.chef-signature {
    border-block-start: 1px solid rgba(255,255,255,.2);
    padding-block-start: var(--space-md);
    inline-size: 100%;
}

.chef-sig-line {
    margin-block-end: var(--space-sm);
    inline-size: 100%;
}

.chef-sig-text {
    font-size: var(--font-sm);
}

.chef-name {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--orange-light);
    margin-inline-start: var(--space-xs);
    font-style: italic;
}

.chef-creds {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--font-xs);
    justify-content: center;
    inline-size: 100%;
}

.chef-cred {
    white-space: nowrap;
}

.chef-cred-sep {
    color: var(--orange-light);
}

.chef-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    inline-size: 100%;
}

.chef-portrait {
    inline-size: clamp(100px,20vw,160px);
    block-size: clamp(100px,20vw,160px);
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,.2);
    aspect-ratio: 1;
}

.chef-stats {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    inline-size: 100%;
}

.chef-stat {
    text-align: center;
    padding: var(--space-sm);
    background: rgba(255,255,255,.1);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.1);
    min-inline-size: clamp(50px,12vw,70px);
    flex: 1;
    max-inline-size: 100px;
    contain: layout paint;
}

.chef-stat-num {
    display: block;
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--orange-light);
    margin-block-end: var(--space-xs);
}

.chef-stat-label {
    font-size: var(--font-xs);
    text-transform: uppercase;
    line-height: 1.2;
}

/* RECIPE CATEGORIES SECTION WITH CONTAINMENT */
.cat-section {
    padding-block: var(--space-xl);
    background: #fff;
    inline-size: 100%;
    contain: layout;
}

.cat-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.cat-header {
    text-align: center;
    margin-block-end: var(--space-xl);
    inline-size: 100%;
}

.cat-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    font-weight: 800;
    inline-size: 100%;
}

.cat-subtitle {
    font-size: var(--font-md);
    color: var(--text-light);
    line-height: 1.5;
    inline-size: 100%;
}

.cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    inline-size: 100%;
    max-inline-size: 900px;
    margin-inline: auto;
}

.cat-item {
    background: #fafbfa;
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border: 1px solid #e8ede8;
    inline-size: 100%;
    contain: layout paint;
}

.cat-item:hover {
    border-color: var(--orange-light);
    background: #f8faf8;
}

.cat-icon {
    inline-size: clamp(36px,3vw,38px);
    block-size: clamp(36px,3vw,38px);
    background: var(--orange-light);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg);
    font-weight: 700;
    font-size: var(--font-xs);
    flex-shrink: 0;
}

.cat-content {
    flex: 1;
    min-inline-size: 0;
}

.cat-name {
    font-size: var(--font-sm);
    color: var(--primary);
    font-weight: 700;
    line-height: 1.2;
    inline-size: 100%;
}

.cat-desc {
    font-size: var(--font-xs);
    color: var(--orange);
    font-weight: 600;
    inline-size: 100%;
}

/* TAXONOMY SECTIONS WITH CONTAINMENT */
.tax {
    padding-block: var(--space-lg);
    inline-size: 100%;
    contain: layout;
}

.tax--alt {
    background: var(--accent);
}

.tax-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.tax-header {
    text-align: center;
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.tax-main-title {
    font-size: var(--font-xl);
    color: var(--primary);
    margin-block-end: var(--space-sm);
    font-weight: 800;
    letter-spacing: -.02em;
    inline-size: 100%;
}

.tax-main-subtitle {
    font-size: var(--font-base);
    color: var(--text-light);
    line-height: 1.5;
    inline-size: 100%;
}

.tax-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    inline-size: 100%;
}

.tax-section {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: var(--space-sm);
    inline-size: 100%;
    contain: layout paint;
}

.tax-section--alt {
    background: var(--accent);
    border-color: #e8ede8;
}

.tax-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-sm);
    padding-block-end: var(--space-xs);
    border-block-end: 1px solid var(--border);
    inline-size: 100%;
}

.tax-section--alt .tax-section-header {
    border-block-end-color: #e8ede8;
}

.tax-section-title {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    line-height: 1.2;
    flex: 1;
}

.tax-section-title:hover {
    color: var(--orange-light);
}

.tax-section-count {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--orange);
    background: rgba(255,107,53,.1);
    padding: var(--space-xs);
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tax-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    inline-size: 100%;
}

/* CARD COMPONENT WITH CONTAINMENT */
.card {
    background: rgba(255,255,255,.6);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(0,0,0,.05);
    inline-size: 100%;
    contain: layout paint;
}

.card:hover {
    background: var(--bg);
    border-color: var(--orange-light);
}

.tax-section--alt .card {
    background: var(--bg);
    border-color: var(--border);
}

.tax-section--alt .card:hover {
    border-color: var(--orange-light);
}

.card-content {
    flex: 1;
    min-inline-size: 0;
}

.card-name {
    font-size: var(--font-xs);
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary);
    inline-size: 100%;
}

.card-count {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--orange);
    background: rgba(255,107,53,.1);
    padding: var(--space-xs);
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* BLOG POST PAGE-SPECIFIC CSS */

/* BREADCRUMBS WITH CONTAINMENT */
.breadcrumbs {
    background: var(--bg);
    padding-block: var(--space-sm);
    border-block-end: 1px solid var(--border);
    inline-size: 100%;
    contain: layout;
}

.breadcrumbs-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.breadcrumbs-list {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-xs);
    color: var(--text-light);
    flex-wrap: wrap;
}

.breadcrumbs-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.breadcrumbs-link {
    color: var(--text-light);
    text-decoration: none;
}

.breadcrumbs-link:hover {
    color: var(--primary);
}

.breadcrumbs-separator {
    color: var(--border);
}

.breadcrumbs-current {
    color: var(--primary);
    font-weight: 600;
}

/* POST STRUCTURE WITH CONTAINMENT */
.post {
    background: var(--bg);
    inline-size: 100%;
    contain: layout;
}

.post-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

/* POST HEADER WITH CONTAINMENT */
.post-header {
    padding-block: var(--space-xl);
    text-align: center;
    inline-size: 100%;
    contain: layout;
}

.post-category {
    display: inline-block;
    background: var(--orange-light);
    color: var(--bg);
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    border-radius: 50px;
    font-size: var(--font-xs);
    font-weight: 700;
    margin-block-end: var(--space-md);
    text-decoration: none;
}

.post-category:hover {
    background: var(--orange-dark);
}

.post-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    line-height: 1.1;
    font-weight: 800;
    inline-size: 100%;
}

.post-subtitle {
    font-size: var(--font-xl);
    color: var(--primary-light);
    margin-block-end: var(--space-lg);
    font-weight: 500;
    line-height: 1.4;
    inline-size: 100%;
}

.post-excerpt {
    color: var(--text-light);
    margin-block-end: var(--space-lg);
    font-size: var(--font-base);
    line-height: 1.5;
    inline-size: 100%;
}

/* POST META WITH CONTAINMENT */
.post-meta {
    background: var(--accent);
    padding: var(--space-sm);
    border-radius: var(--radius);
    border: 1px solid var(--primary-light);
    margin-block-end: var(--space-lg);
    inline-size: 100%;
    contain: layout style;
}

.post-meta-container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-md);
    inline-size: 100%;
    text-align: start;
}

.post-author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    grid-column: 1;
    grid-row: 1;
}

.post-author-avatar {
    inline-size: clamp(50px,10vw,70px);
    block-size: clamp(50px,10vw,70px);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--orange-light);
    aspect-ratio: 1;
}

.post-author-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.post-author-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.post-author-name-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.post-author-name {
    font-weight: 700;
    color: var(--primary);
    font-size: var(--font-sm);
    line-height: 1.2;
}

.post-author-info-icon {
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.post-author-info-icon:hover .post-author-bio {
    opacity: 1;
    visibility: visible;
}

.post-author-bio {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: var(--bg);
    color: var(--text);
    padding: var(--space-md);
    border-radius: var(--radius);
    font-size: var(--font-xs);
    line-height: 1.4;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    margin-block-start: var(--space-xs);
    border: 1px solid var(--border);
    min-inline-size: clamp(240px,40vw,300px);
    text-align: start;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.post-author-bio::before {
    content: '';
    position: absolute;
    inset-block-start: -4px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 0;
    block-size: 0;
    border-inline: 4px solid transparent;
    border-block-end: 4px solid var(--bg);
}

.post-author-bio-text {
    margin-block-end: var(--space-sm);
}

.post-author-expertise {
    margin-block-end: var(--space-sm);
}

.post-author-expertise-title {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--primary);
    margin-block-end: var(--space-xs);
}

.post-author-expertise-list {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.post-author-expertise-item {
    background: var(--accent);
    color: var(--primary);
    padding: var(--space-xs);
    border-radius: 12px;
    font-size: var(--font-xs);
    font-weight: 600;
}

.post-author-social {
    display: flex;
    gap: var(--space-sm);
}

.post-author-social a {
    color: var(--primary);
    text-decoration: none;
    font-size: var(--font-xs);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    background: var(--accent);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.post-author-social a:hover {
    background: var(--primary);
    color: var(--bg);
}

.post-author-title {
    font-size: var(--font-xs);
    color: var(--text-light);
    line-height: 1.2;
}

.post-author-credentials {
    font-size: var(--font-xs);
    color: var(--orange);
    font-weight: 600;
}

.post-meta-stats {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    justify-self: end;
    align-self: center;
    font-size: var(--font-xs);
    color: var(--text-light);
    text-align: start;
}

.post-meta-dates {
    grid-column: 1/-1;
    grid-row: 2;
    display: flex;
    gap: var(--space-md);
    font-size: var(--font-xs);
    color: var(--text-light);
    flex-wrap: wrap;
}

.post-meta-item {
    white-space: nowrap;
}

/* TL;DR SECTION WITH CONTAINMENT */
.tldr {
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: style;
}

.tldr-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.tldr-header {
    text-align: start;
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.tldr-header-top {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
}

.tldr-icon {
    color: var(--orange-light);
    flex-shrink: 0;
}

.tldr-title {
    font-size: var(--font-xl);
    font-weight: 700;
    margin: 0;
    inline-size: 100%;
}

.tldr-desc {
    font-size: var(--font-base);
    line-height: 1.7;
    margin-block-end: var(--space-md);
    inline-size: 100%;
    text-align: start;
}

.tldr-desc:last-of-type {
    margin-block-end: var(--space-lg);
}

.tldr-takeaways-section {
    inline-size: 100%;
}

.tldr-takeaways-title {
    font-size: var(--font-lg);
    color: var(--orange-light);
    font-weight: 700;
    margin-block-end: var(--space-lg);
    text-align: start;
}

.tldr-takeaways {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    inline-size: 100%;
}

.tldr-takeaway {
    background: rgba(255,255,255,.1);
    padding: var(--space-md);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.2);
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    contain: layout paint;
}

.tldr-takeaway-badge {
    background: var(--orange-light);
    color: var(--bg);
    inline-size: clamp(20px,3.2vw,24px);
    block-size: clamp(20px,3.2vw,24px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.tldr-takeaway-title {
    font-weight: 400;
    font-size: var(--font-sm);
    color: var(--bg);
    line-height: 1.3;
    flex: 1;
}

/* FEATURED IMAGE WITH CONTAINMENT */
.post-featured {
    margin-block: var(--space-lg);
    inline-size: 100%;
    contain: layout;
}

.post-featured-wrap {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--border);
    aspect-ratio: 1.91;
    inline-size: 100%;
}

.post-featured-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* POST CONTENT WITH CONTAINMENT */
.post-content {
    padding-block: var(--space-md);
    inline-size: 100%;
    contain: layout;
}

.post-content h2 {
    font-size: var(--font-xl);
    color: var(--primary);
    margin-block: var(--space-md) var(--space-md);
    font-weight: 700;
    line-height: 1.2;
}

.post-content h3 {
    font-size: var(--font-lg);
    color: var(--primary);
    margin-block: var(--space-lg) var(--space-md);
    font-weight: 600;
    line-height: 1.3;
}

.post-content p {
    margin-block-end: var(--space-md);
    line-height: 1.7;
    font-size: var(--font-base);
    inline-size: 100%;
}

.post-content p:last-child {
    margin-block-end: 0;
}

.post-content strong {
    color: var(--orange-light);
    font-weight: 700;
}

.post-content ul {
    margin-block: var(--space-md) var(--space-md);
    padding-inline-start: var(--space-lg);
}

.post-content li {
    margin-block-end: var(--space-sm);
    line-height: 1.6;
}

/* POST FOOTER WITH CONTAINMENT */
.post-footer {
    padding-block: var(--space-xl);
    border-block-start: 1px solid var(--border);
    inline-size: 100%;
    contain: layout;
}

.post-tags {
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.post-tags-title {
    font-weight: 700;
    color: var(--primary);
    margin-block-end: var(--space-sm);
    font-size: var(--font-sm);
}

.post-tags-list {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.post-tag {
    background: var(--accent);
    color: var(--primary);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-radius: 50px;
    text-decoration: none;
    font-size: var(--font-xs);
    border: 1px solid var(--border);
}

.post-tag:hover {
    border-color: var(--orange-light);
    background: #f0f4f0;
}

/* SHARE SECTION WITH CONTAINMENT */
.post-share {
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100vw;
    margin-inline-start: calc(-50vw + 50%);
    margin-block-end: var(--space-xl);
    contain: layout;
}

.post-share-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
    text-align: center;
}

.post-share-title {
    font-size: var(--font-xl);
    font-weight: 700;
    margin-block-end: var(--space-sm);
    color: var(--bg);
}

.post-share-subtitle {
    font-size: var(--font-base);
    margin-block-end: var(--space-lg);
    color: rgba(255,255,255,.8);
    line-height: 1.5;
}

.post-share-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.post-share-btn {
    background: rgba(255,255,255,.1);
    color: var(--bg);
    padding-block: var(--space-md);
    padding-inline: var(--space-lg);
    border-radius: var(--radius);
    text-decoration: none;
    font-size: var(--font-sm);
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-inline-size: clamp(100px,20vw,120px);
    justify-content: center;
}

.post-share-btn:hover {
    background: var(--orange-light);
    border-color: var(--orange-light);
}

.post-share-btn svg {
    inline-size: 18px;
    block-size: 18px;
    flex-shrink: 0;
}

/* FAQ SECTION WITH CONTAINMENT */
.faq {
    background: var(--accent);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.faq-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.faq-title {
    font-size: var(--font-xl);
    color: var(--primary);
    margin-block-end: var(--space-lg);
    font-weight: 800;
    text-align: center;
    inline-size: 100%;
}

.faq-item {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-block-end: var(--space-sm);
    inline-size: 100%;
    contain: layout paint;
}

.faq-question {
    padding: var(--space-md);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--primary);
    font-size: var(--font-sm);
    inline-size: 100%;
}

.faq-question:hover {
    background: var(--accent);
}

.faq-toggle {
    color: var(--orange-light);
    font-size: var(--font-lg);
    line-height: 1;
    flex-shrink: 0;
}

.faq-answer {
    padding-inline: var(--space-md);
    padding-block-end: var(--space-md);
    color: var(--text-light);
    line-height: 1.6;
    display: none;
    font-size: var(--font-sm);
    inline-size: 100%;
}

.faq-answer.show {
    display: block;
}

/* BLOG CATEGORY PAGE-SPECIFIC CSS */

/* CATEGORY HERO WITH CONTAINMENT */
.category-hero {
    background: var(--accent);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.category-hero-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
    text-align: center;
}

.category-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    border-radius: 50px;
    font-size: var(--font-xs);
    font-weight: 600;
    margin-block-end: var(--space-md);
}

.category-hero-badge::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    background: var(--orange-light);
    border-radius: 50%;
    flex-shrink: 0;
}

.category-hero-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    line-height: 1.1;
    font-weight: 800;
    inline-size: 100%;
}

.category-hero-subtitle {
    font-size: var(--font-xl);
    color: var(--primary-light);
    margin-block-end: var(--space-lg);
    font-weight: 500;
    line-height: 1.4;
    inline-size: 100%;
}

.category-hero-desc {
    color: var(--text-light);
    margin-block-end: var(--space-lg);
    font-size: var(--font-base);
    line-height: 1.5;
    inline-size: 100%;
}

.category-hero-stats {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    inline-size: 100%;
}

.category-hero-stat {
    text-align: center;
    flex: 1;
    min-inline-size: clamp(80px,15vw,120px);
}

.category-hero-stat-num {
    display: block;
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--orange);
    line-height: 1;
    margin-block-end: var(--space-xs);
}

.category-hero-stat-label {
    font-size: var(--font-xs);
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 600;
}

/* CATEGORY HERO SUBCATEGORIES */
.category-hero-subcategories {
    margin-block-start: var(--space-xl);
    inline-size: 100%;
}

.category-hero-subcategories-title {
    font-size: var(--font-lg);
    color: var(--primary);
    font-weight: 700;
    text-align: center;
    margin-block-end: var(--space-md);
    inline-size: 100%;
}

.category-hero-subcategories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    inline-size: 100%;
}

.category-hero-subcategory {
    background: var(--bg);
    padding: var(--space-md);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
}

.category-hero-subcategory:hover {
    border-color: var(--orange-light);
    background: #f8faf8;
}

.category-hero-subcategory-name {
    font-size: var(--font-sm);
    color: var(--primary);
    font-weight: 600;
    flex: 1;
}

.category-hero-subcategory-count {
    font-size: var(--font-xs);
    color: var(--orange);
    font-weight: 700;
    background: rgba(255,107,53,.1);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-radius: 20px;
    flex-shrink: 0;
}

/* FEATURED POSTS SECTION WITH CONTAINMENT */
.featured-posts {
    background: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.featured-posts-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.featured-posts-header {
    text-align: center;
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.featured-posts-title {
    font-size: var(--font-xl);
    color: var(--primary);
    margin-block-end: var(--space-sm);
    font-weight: 700;
    inline-size: 100%;
}

.featured-posts-subtitle {
    font-size: var(--font-base);
    color: var(--text-light);
    inline-size: 100%;
}

.featured-posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    inline-size: 100%;
}

.featured-post {
    background: var(--primary);
    color: var(--bg);
    padding: var(--space-lg);
    border-radius: var(--radius);
    text-decoration: none;
    display: block;
    inline-size: 100%;
    contain: layout paint;
}

.featured-post:hover {
    background: var(--primary-light);
}

.featured-post-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
    flex-wrap: wrap;
}

.featured-post-badge {
    background: var(--orange-light);
    color: var(--bg);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-radius: 20px;
    font-size: var(--font-xs);
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

.featured-post-meta {
    display: flex;
    gap: var(--space-sm);
    font-size: var(--font-xs);
    opacity: .8;
    flex-wrap: wrap;
}

.featured-post-meta-item {
    white-space: nowrap;
}

.featured-post-title {
    font-size: var(--font-xl);
    font-weight: 800;
    margin-block-end: var(--space-sm);
    line-height: 1.2;
    inline-size: 100%;
}

.featured-post-excerpt {
    font-size: var(--font-base);
    line-height: 1.5;
    opacity: .9;
    inline-size: 100%;
}

/* POSTS GRID WITH CONTAINMENT */
.posts-grid-section {
    background: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.posts-grid-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    inline-size: 100%;
}

.post-card {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    inline-size: 100%;
    contain: layout paint;
}

.post-card:hover {
    border-color: var(--primary);
}

.post-card-img {
    aspect-ratio: 1.91;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    position: relative;
    inline-size: 100%;
}

.post-card-date {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-end: var(--space-xs);
    background: var(--primary);
    color: var(--bg);
    padding: var(--space-xs);
    border-radius: var(--radius);
    font-size: var(--font-xs);
    font-weight: 600;
    min-inline-size: clamp(2.4rem,8vw,4rem);
    text-align: center;
}

.post-card-content {
    padding: var(--space-sm);
    inline-size: 100%;
}

.post-card-title {
    font-weight: 600;
    color: var(--primary);
    line-height: 1.3;
    font-size: var(--font-sm);
    inline-size: 100%;
}

/* PAGINATION WITH CONTAINMENT */
.pagination {
    background: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.pagination-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.pagination-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg);
    color: var(--primary);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--font-sm);
    font-weight: 600;
}

.pagination-btn:hover {
    border-color: var(--orange-light);
    background: #f8faf8;
}

.pagination-btn svg {
    inline-size: 16px;
    block-size: 16px;
    stroke-width: 2;
}

.pagination-numbers {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.pagination-number {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: clamp(36px,6vw,44px);
    block-size: clamp(36px,6vw,44px);
    background: var(--bg);
    color: var(--primary);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--font-sm);
    font-weight: 600;
}

.pagination-number:hover {
    border-color: var(--orange-light);
    background: #f8faf8;
}

.pagination-number--active {
    background: var(--primary);
    color: var(--bg);
    border-color: var(--primary);
}

.pagination-number--active:hover {
    background: var(--primary-light);
}

.pagination-dots {
    color: var(--text-light);
    font-weight: 600;
    padding-inline: var(--space-xs);
}

/* SIDEBAR WITH CONTAINMENT */
.sidebar {
    background: var(--accent);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.sidebar-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.sidebar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    inline-size: 100%;
}

.sidebar-section {
    background: var(--bg);
    padding: var(--space-lg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    inline-size: 100%;
    contain: layout paint;
}

.sidebar-section-title {
    font-size: var(--font-lg);
    color: var(--primary);
    font-weight: 700;
    margin-block-end: var(--space-md);
    inline-size: 100%;
}

.sidebar-categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sidebar-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm);
    background: var(--accent);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
}

.sidebar-category:hover {
    border-color: var(--orange-light);
    background: #f0f4f0;
}

.sidebar-category-name {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--primary);
}

.sidebar-category-count {
    font-size: var(--font-xs);
    color: var(--orange);
    font-weight: 700;
    background: rgba(255,107,53,.1);
    padding: var(--space-xs);
    border-radius: 12px;
}

.sidebar-tags {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.sidebar-tag {
    background: var(--accent);
    color: var(--primary);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-radius: 20px;
    font-size: var(--font-xs);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border);
}

.sidebar-tag:hover {
    border-color: var(--orange-light);
    background: #f0f4f0;
}

/* AUTHOR PAGE-SPECIFIC CSS */

/* AUTHOR HERO WITH CONTAINMENT */
.author-hero {
    background: var(--accent);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.author-hero-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
}

.author-image {
    inline-size: clamp(120px,24vw,200px);
    block-size: clamp(120px,24vw,200px);
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--orange-light);
    margin-inline: auto;
    margin-block-end: var(--space-md);
    aspect-ratio: 1;
}

.author-image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.author-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    border-radius: 50px;
    font-size: var(--font-xs);
    font-weight: 600;
    margin-block-end: var(--space-md);
}

.author-badge::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    background: var(--orange-light);
    border-radius: 50%;
    flex-shrink: 0;
}

.author-name {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-sm);
    line-height: 1.1;
    font-weight: 800;
    inline-size: 100%;
}

.author-title {
    font-size: var(--font-xl);
    color: var(--primary-light);
    margin-block-end: var(--space-md);
    font-weight: 500;
    line-height: 1.4;
    inline-size: 100%;
}

.author-bio {
    color: var(--text-light);
    margin-block-end: var(--space-lg);
    font-size: var(--font-base);
    line-height: 1.5;
    inline-size: 100%;
}

.author-stats {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    inline-size: 100%;
}

.author-stat {
    text-align: center;
    flex: 1;
    min-inline-size: clamp(80px,15vw,120px);
}

.author-stat-num {
    display: block;
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--orange);
    line-height: 1;
    margin-block-end: var(--space-xs);
}

.author-stat-label {
    font-size: var(--font-xs);
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 600;
}

/* AUTHOR ABOUT SECTION WITH CONTAINMENT */
.author-about {
    background: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.author-about-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.author-bio-section {
    inline-size: 100%;
}

.author-bio-title {
    font-size: var(--font-xl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    font-weight: 700;
    inline-size: 100%;
}

.author-bio-text {
    margin-block-end: var(--space-md);
    line-height: 1.7;
    font-size: var(--font-base);
    inline-size: 100%;
}

.author-bio-text:last-child {
    margin-block-end: 0;
}

.author-bio-text strong {
    color: var(--orange-light);
    font-weight: 700;
}

/* AUTHOR EXPERTISE SECTION (TL;DR STYLE) WITH CONTAINMENT */
.author-expertise {
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: style;
}

.author-expertise-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.author-expertise-header {
    text-align: start;
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.author-expertise-header-top {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
}

.author-expertise-icon {
    color: var(--orange-light);
    flex-shrink: 0;
}

.author-expertise-title {
    font-size: var(--font-xl);
    font-weight: 700;
    margin: 0;
    inline-size: 100%;
}

.author-expertise-desc {
    font-size: var(--font-base);
    line-height: 1.7;
    margin-block-end: var(--space-md);
    inline-size: 100%;
    text-align: start;
}

.author-expertise-desc:last-of-type {
    margin-block-end: var(--space-lg);
}

.author-expertise-takeaways-section {
    inline-size: 100%;
}

.author-expertise-takeaways-title {
    font-size: var(--font-lg);
    color: var(--orange-light);
    font-weight: 700;
    margin-block-end: var(--space-lg);
    text-align: start;
}

.author-expertise-takeaways {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    inline-size: 100%;
}

.author-expertise-takeaway {
    background: rgba(255,255,255,.1);
    padding: var(--space-md);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.2);
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    contain: layout paint;
}

.author-expertise-takeaway-badge {
    background: var(--orange-light);
    color: var(--bg);
    inline-size: clamp(20px,3.2vw,24px);
    block-size: clamp(20px,3.2vw,24px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.author-expertise-takeaway-title {
    font-weight: 400;
    font-size: var(--font-sm);
    color: var(--bg);
    line-height: 1.3;
    flex: 1;
}

.author-social-section {
    margin-block-start: var(--space-lg);
    inline-size: 100%;
}

.author-social-links {
    display: flex;
    gap: var(--space-md);
    justify-content: flex-start;
    flex-wrap: wrap;
}

.author-social-link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border-radius: 50px;
    text-decoration: none;
    font-size: var(--font-sm);
    font-weight: 600;
    border: 2px solid rgba(255,255,255,.2);
}

.author-social-link:hover {
    background: var(--orange-light);
    border-color: var(--orange-light);
}

.author-social-link svg {
    inline-size: 18px;
    block-size: 18px;
    flex-shrink: 0;
}

/* AUTHOR CONTRIBUTIONS SECTION WITH CONTAINMENT */
.author-contributions {
    background: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout;
}

.author-contributions-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.author-contributions-header {
    text-align: center;
    margin-block-end: var(--space-xl);
    inline-size: 100%;
}

.author-contributions-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    font-weight: 800;
    inline-size: 100%;
}

.author-contributions-subtitle {
    font-size: var(--font-md);
    color: var(--text-light);
    line-height: 1.5;
    inline-size: 100%;
}

.author-content-types {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    inline-size: 100%;
}

.recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-md);
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.recent-count {
    font-size: var(--font-sm);
    color: var(--orange);
    font-weight: 700;
    background: rgba(255,107,53,.1);
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.recent-desc {
    font-size: var(--font-base);
    color: var(--text-light);
    line-height: 1.5;
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.recent-posts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    inline-size: 100%;
}

/* RESPONSIVE BREAKPOINTS */
@media (min-width: 280px) {
    .cat-grid {
        grid-template-columns: repeat(2,1fr);
    }
    
    .tax-items {
        grid-template-columns: repeat(2,1fr);
    }
    
    .tldr-takeaways {
        grid-template-columns: repeat(2,1fr);
    }
    
    .author-expertise-takeaways {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (min-width: 480px) {
    .mobile-btn {
        display: none;
    }
    
    .header-wrap {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto;
        gap: var(--space-lg);
    }
    
    .nav {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        background: transparent;
        margin-block-start: 0;
        padding: 0;
        border-radius: 0;
        flex-direction: row;
        gap: var(--space-md);
        justify-content: center;
    }
    
    .nav a {
        padding-block: var(--space-sm);
        padding-inline: var(--space-md);
        border-radius: 50px;
    }
    
    .search {
        grid-column: 3;
        grid-row: 1;
        inline-size: clamp(160px,20vw,220px);
    }
    
    .search input {
        padding-block: var(--space-sm);
        padding-inline: var(--space-md);
        font-size: var(--font-sm);
    }
    
    .search button {
        inline-size: clamp(32px,4.8vw,44px);
        block-size: clamp(32px,4.8vw,44px);
        margin: 3px;
    }
    
    .search svg {
        inline-size: clamp(14px,2.8vw,18px);
        block-size: clamp(14px,2.8vw,18px);
    }
    
    .recent-grid {
        grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    }
    
    .footer-newsletter-input-group {
        flex-direction: row;
    }
    
    .footer-newsletter-btn {
        inline-size: auto;
    }
    
    .hero-wrap {
        grid-template-columns: 1.2fr .8fr;
        text-align: start;
        align-items: center;
    }
    
    .hero-content {
        padding-inline-end: var(--space-md);
    }
    
    .hero-btns {
        flex-direction: row;
        max-inline-size: none;
    }
    
    .hero-btn {
        inline-size: auto;
        max-inline-size: none;
        margin-inline: 0;
    }
    
    .hero-features {
        flex-direction: row;
    }
    
    .hero-feature {
        justify-content: flex-start;
    }
    
    .core-content {
        grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    }
    
    .featured {
        grid-column: span 2;
    }

    .chef-wrap {
        grid-template-columns: minmax(260px,2fr) minmax(160px,1fr);
        text-align: start;
        align-items: center;
    }
    
    .chef-greeting {
        justify-content: flex-start;
    }
    
    .chef-creds {
        justify-content: flex-start;
    }
    
    .cat-grid {
        grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    }
    
    .tax-grid {
        grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    }
    
    .tax-items {
        grid-template-columns: repeat(2,1fr);
    }
    
    .post-meta-container {
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto;
        align-items: center;
        gap: var(--space-lg);
    }
    
    .post-author {
        grid-column: 1;
        grid-row: 1;
    }
    
    .post-meta-stats {
        grid-column: 3;
        grid-row: 1;
        flex-direction: column;
        gap: var(--space-xs);
        text-align: start;
    }
    
    .post-meta-dates {
        grid-column: 4;
        grid-row: 1;
        flex-direction: column;
        gap: var(--space-xs);
        text-align: start;
    }
    
    .post-header {
        text-align: start;
    }
    
    .tldr-takeaways {
        grid-template-columns: repeat(2,1fr);
    }
    
    .featured-posts-grid {
        grid-template-columns: repeat(2,1fr);
    }
    
    .posts-grid {
        grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    }
    
    .category-hero-stats {
        gap: var(--space-lg);
    }
    
    .category-hero-subcategories-grid {
        grid-template-columns: repeat(2,1fr);
    }
    
    .sidebar-grid {
        grid-template-columns: repeat(2,1fr);
    }
    
    .author-hero-wrap {
        grid-template-columns: auto 1fr;
        text-align: start;
        align-items: center;
        gap: var(--space-xl);
    }
    
    .author-image {
        margin-inline: 0;
        margin-block-end: 0;
    }
    
    .author-stats {
        justify-content: flex-start;
        gap: var(--space-lg);
    }
    
    .author-social-links {
        justify-content: flex-start;
    }
    
    .author-expertise-takeaways {
        grid-template-columns: repeat(2,1fr);
    }
    
    .recent-posts {
        grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    }
}

@media (min-width: 768px) {
    .category-hero-subcategories-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

/* ULTRA-SMALL SCREENS */
@media (max-width: 279px) {
    .cat-grid {
        grid-template-columns: 1fr;
    }
    
    .tax-items {
        grid-template-columns: 1fr;
    }
    
    .cat-icon {
        inline-size: clamp(20px,4vw,28px);
        block-size: clamp(20px,4vw,28px);
    }
    
    .hero-card {
        min-inline-size: clamp(60px,12vw,90px);
    }
    
    .tldr-takeaways {
        grid-template-columns: 1fr;
    }
    
    .post-author-bio {
        min-inline-size: clamp(200px,30vw,260px);
    }
    
    .featured-posts-grid {
        grid-template-columns: 1fr;
    }
    
    .posts-grid {
        grid-template-columns: 1fr;
    }
    
    .category-hero-stats {
        flex-direction: row;
        gap: var(--space-sm);
    }
    
    .category-hero-subcategories-grid {
        grid-template-columns: 1fr;
        text-align: -webkit-left;
    }
    
    .sidebar-grid {
        grid-template-columns: 1fr;
    }
    
    .pagination-nav {
        flex-direction: column;
        gap: var(--space-md);
    }
    
    .pagination-numbers {
        order: -1;
    }
    
    .author-stats {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .author-expertise-takeaways {
        grid-template-columns: 1fr;
    }
    
    .recent-header {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* BLOG CATEGORY ARCHIVE PAGE-SPECIFIC CSS */
/* ARCHIVE HERO SECTION WITH CONTAINMENT */
.archive-hero {
    background: var(--accent);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout; /* CSS Containment for hero section */
}

.archive-hero-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
    text-align: center;
}

.archive-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    border-radius: 50px;
    font-size: var(--font-xs);
    font-weight: 600;
    margin-block-end: var(--space-md);
}

.archive-hero-badge::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    background: var(--orange-light);
    border-radius: 50%;
    flex-shrink: 0;
}

.archive-hero-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    line-height: 1.1;
    font-weight: 800;
    inline-size: 100%;
}

.archive-hero-subtitle {
    font-size: var(--font-xl);
    color: var(--primary-light);
    margin-block-end: var(--space-lg);
    font-weight: 500;
    line-height: 1.4;
    inline-size: 100%;
}

.archive-hero-desc {
    color: var(--text-light);
    margin-block-end: var(--space-lg);
    font-size: var(--font-base);
    line-height: 1.5;
    inline-size: 100%;
}

.archive-hero-stats {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    inline-size: 100%;
}

.archive-hero-stat {
    text-align: center;
    flex: 1;
    min-inline-size: clamp(80px,15vw,120px);
}

.archive-hero-stat-num {
    display: block;
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--orange);
    line-height: 1;
    margin-block-end: var(--space-xs);
}

.archive-hero-stat-label {
    font-size: var(--font-xs);
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 600;
}

/* FEATURED CATEGORY SECTION WITH CONTAINMENT */
.featured-cat {
    background: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout; /* CSS Containment for featured section */
}

.featured-cat-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.featured-cat-header {
    text-align: center;
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.featured-cat-title {
    font-size: var(--font-xl);
    color: var(--primary);
    margin-block-end: var(--space-sm);
    font-weight: 700;
    inline-size: 100%;
}

.featured-cat-subtitle {
    font-size: var(--font-base);
    color: var(--text-light);
    inline-size: 100%;
}

.featured-cat-card {
    background: var(--primary);
    color: var(--bg);
    padding: var(--space-lg);
    border-radius: var(--radius);
    text-decoration: none;
    display: block;
    inline-size: 100%;
    contain: layout paint; /* CSS Containment for featured card */
}

.featured-cat-card:hover {
    background: var(--primary-light);
}

.featured-cat-card-header {
    margin-block-end: var(--space-md);
    inline-size: 100%;
}

.featured-cat-card-title {
    font-size: var(--font-xl);
    font-weight: 800;
    margin-block-end: var(--space-sm);
    inline-size: 100%;
}

.featured-cat-card-desc {
    font-size: var(--font-base);
    margin-block-end: var(--space-md);
    line-height: 1.5;
    inline-size: 100%;
}

.featured-cat-card-stats {
    display: flex;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
    flex-wrap: wrap;
}

.featured-cat-card-stat {
    background: rgba(255,255,255,.1);
    padding: var(--space-sm);
    border-radius: var(--radius);
    text-align: center;
    flex: 1;
    min-inline-size: clamp(80px,15vw,120px);
}

.featured-cat-card-stat-num {
    display: block;
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--orange-light);
    line-height: 1;
    margin-block-end: var(--space-xs);
}

.featured-cat-card-stat-label {
    font-size: var(--font-xs);
    text-transform: uppercase;
    font-weight: 600;
}

.featured-cat-posts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    inline-size: 100%;
}

.featured-cat-post {
    background: rgba(255,255,255,.1);
    padding: var(--space-sm);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.2);
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    inline-size: 100%;
}

.featured-cat-post:hover {
    background: rgba(255,255,255,.2);
}

.featured-cat-post-content {
    flex: 1;
    min-inline-size: 0;
}

.featured-cat-post-title {
    font-size: var(--font-sm);
    font-weight: 600;
    line-height: 1.3;
    margin-block-end: var(--space-xs);
    inline-size: 100%;
}

.featured-cat-post-meta {
    font-size: var(--font-xs);
    opacity: .8;
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.featured-cat-post-meta-item {
    white-space: nowrap;
}

/* CATEGORY GRID SECTION WITH CONTAINMENT */
.cat-grid-section {
    background: var(--accent);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout; /* CSS Containment for category grid */
}

.cat-grid-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
}

.cat-grid-header {
    text-align: center;
    margin-block-end: var(--space-xl);
    inline-size: 100%;
}

.cat-grid-title {
    font-size: var(--font-xxl);
    color: var(--primary);
    margin-block-end: var(--space-md);
    font-weight: 800;
    inline-size: 100%;
}

.cat-grid-subtitle {
    font-size: var(--font-md);
    color: var(--text-light);
    line-height: 1.5;
    inline-size: 100%;
}

.cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    inline-size: 100%;
}

.cat-card {
    background: var(--bg);
    padding: var(--space-md);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    display: block;
    inline-size: 100%;
    contain: layout paint; /* CSS Containment for category cards */
}

.cat-card:hover {
    border-color: var(--orange-light);
    background: #f8faf8;
}

.cat-card--orange {
    background: #fff5f2;
    border-color: #ffe4dc;
}

.cat-card--orange:hover {
    background: #ffede6;
    border-color: var(--orange-light);
}

.cat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-sm);
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.cat-card-title {
    font-size: var(--font-lg);
    color: var(--primary);
    font-weight: 700;
    line-height: 1.2;
    flex: 1;
    min-inline-size: 0;
}

.cat-card-title a {
    color: var(--primary);
    text-decoration: none;
    display: block;
}

.cat-card-title a:hover {
    color: var(--orange-light);
}

.cat-card-count {
    font-size: var(--font-xs);
    color: var(--orange);
    font-weight: 700;
    background: rgba(255,107,53,.1);
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cat-card-desc {
    font-size: var(--font-sm);
    color: var(--text-light);
    line-height: 1.4;
    margin-block-end: var(--space-sm);
    inline-size: 100%;
}

.cat-card-meta {
    display: flex;
    gap: var(--space-sm);
    font-size: var(--font-xs);
    color: var(--text-light);
    align-items: center;
    flex-wrap: wrap;
}

.cat-card-meta-item {
    display: inline-flex;
    align-items: center;
    margin-block-end: var(--space-xs);
    margin-inline-end: var(--space-xs);
}

.cat-card-meta-item a {
    color: var(--text-light);
    text-decoration: none;
    font-size: var(--font-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius);
    background: rgba(255,107,53,.05);
    border: 1px solid rgba(255,107,53,.1);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
}

.cat-card-meta-item a:hover {
    color: var(--orange-light);
    background: rgba(255,107,53,.1);
    border-color: var(--orange-light);
}

.cat-card-meta-icon {
    inline-size: 12px;
    block-size: 12px;
    opacity: .6;
    flex-shrink: 0;
    stroke-width: 2;
}

/* BLOG STATS SECTION WITH CONTAINMENT */
.blog-stats {
    background: var(--primary);
    color: var(--bg);
    padding-block: var(--space-xl);
    inline-size: 100%;
    contain: layout; /* CSS Containment for stats section */
}

.blog-stats-wrap {
    inline-size: 100%;
    max-inline-size: 1000px;
    margin-inline: auto;
    padding-inline: clamp(.8rem,3.2vw,1.6rem);
    text-align: center;
}

.blog-stats-title {
    font-size: var(--font-xl);
    font-weight: 700;
    margin-block-end: var(--space-lg);
    inline-size: 100%;
}

.blog-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    inline-size: 100%;
}

.blog-stat-card {
    background: rgba(255,255,255,.1);
    padding: var(--space-lg);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.2);
    inline-size: 100%;
    contain: layout paint; /* CSS Containment for stat cards */
}

.blog-stat-card-num {
    font-size: var(--font-xxl);
    font-weight: 800;
    color: var(--orange-light);
    line-height: 1;
    margin-block-end: var(--space-sm);
    inline-size: 100%;
}

.blog-stat-card-label {
    font-size: var(--font-lg);
    font-weight: 600;
    margin-block-end: var(--space-sm);
    inline-size: 100%;
}

.blog-stat-card-desc {
    font-size: var(--font-sm);
    opacity: .9;
    line-height: 1.5;
    inline-size: 100%;
}

/* RESPONSIVE BREAKPOINTS FOR BLOG CATEGORY ARCHIVE */
@media (min-width: 480px) {
    .archive-hero-stats {
        gap: var(--space-lg);
    }
    
    .featured-cat-posts {
        grid-template-columns: repeat(2,1fr);
    }
    
    .cat-grid {
        grid-template-columns: repeat(2,1fr);
    }
    
    .blog-stats-grid {
        grid-template-columns: repeat(3,1fr);
    }
    
    .featured-cat-card-stats {
        gap: var(--space-lg);
    }
}

@media (min-width: 768px) {
    .cat-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

/* ULTRA-SMALL SCREENS - Single column layout */
@media (max-width: 479px) {
    .cat-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .archive-hero-stats {
        flex-direction: row;
        gap: var(--space-sm);
    }
}