/**
 * ATGS Custom Blog Templates - Stylesheet
 * 
 * Complete styling for blog archive and single post templates
 * for At The Grime Scene website.
 * 
 * @package ATGS_Blog_Templates
 * @version 1.0.0
 */

/* ========================================
   TABLE OF CONTENTS
   ========================================
   1. Reset & Base Styles
   2. CSS Variables
   3. Header Styles
   4. Blog Hero Section
   5. Blog Archive Grid
   6. Post Cards
   7. Featured Post
   8. Pagination
   9. Single Post Hero
   10. Post Content & Typography
   11. Post Tags & Share
   12. Author Bio
   13. Post Navigation
   14. Related Posts
   15. Comments Section
   16. Newsletter Section
   17. CTA Section
   18. Footer
   19. Responsive Styles
   20. Animations
   ======================================== */

/* ========================================
   1. RESET & BASE STYLES
   ======================================== */
.atgs-blog-wrapper,
.atgs-blog-wrapper * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.atgs-blog-wrapper {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.atgs-blog-wrapper h1,
.atgs-blog-wrapper h2,
.atgs-blog-wrapper h3,
.atgs-blog-wrapper h4,
.atgs-blog-wrapper h5,
.atgs-blog-wrapper h6 {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.atgs-blog-wrapper a {
    text-decoration: none;
    transition: all 0.3s ease;
}

.atgs-blog-wrapper img {
    max-width: 100%;
    height: auto;
}

.atgs-blog-wrapper ul,
.atgs-blog-wrapper ol {
    list-style: none;
}

/* ========================================
   2. CSS VARIABLES
   ======================================== */
.atgs-blog-wrapper {
    --primary-dark: #2D2D2D;
    --primary-charcoal: #3D3D3D;
    --secondary-teal: #00B4D8;
    --secondary-teal-dark: #0096B4;
    --accent-lime: #8BC34A;
    --accent-lime-dark: #689F38;
    --accent-yellow: #FFD700;
    --text-dark: #333333;
    --text-light: #666666;
    --text-muted: #999999;
    --bg-light: #F8F9FA;
    --bg-white: #FFFFFF;
    --border-light: #EEEEEE;
    --gradient-teal: linear-gradient(135deg, #00B4D8 0%, #0096B4 100%);
    --gradient-dark: linear-gradient(135deg, #3D3D3D 0%, #2D2D2D 100%);
    --gradient-lime: linear-gradient(135deg, #8BC34A 0%, #689F38 100%);
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 5px 25px rgba(0, 0, 0, 0.08);
    --shadow-heavy: 0 15px 50px rgba(0, 0, 0, 0.12);
    --shadow-teal: 0 4px 15px rgba(0, 180, 216, 0.4);
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 15px;
    --radius-xl: 20px;
    --radius-full: 50px;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;

    /* ---- Nav / Submenu color overrides (set via dynamic CSS from admin settings) ---- */
    --nav-active-color: #00B4D8;       /* active/current nav link + underline color   */
    --submenu-text-color: #3D3D3D;     /* desktop dropdown link text (rest state)      */
    --submenu-hover-color: #00B4D8;    /* desktop dropdown link text (hover state)     */
}

/* ========================================
   3. HEADER STYLES
   ======================================== */
.atgs-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--bg-white);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all var(--transition-normal);
}

.atgs-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

.atgs-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.atgs-logo {
    display: inline-block;
}

.atgs-logo img {
    height: 70px;
    width: auto;
    transition: transform var(--transition-normal);
}

.atgs-logo:hover img {
    transform: scale(1.05);
}

.atgs-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.atgs-nav-links {
    display: flex;
    list-style: none;
    gap: 5px;
    margin: 0;
    padding: 0;
}

.atgs-nav-links > li {
    margin: 0;
}

.atgs-nav-links > li > a {
    display: block;
    color: var(--primary-charcoal);
    font-weight: 600;
    padding: 12px 20px;
    border-radius: var(--radius-small);
    font-size: 15px;
    position: relative;
}

.atgs-nav-links > li > a:hover {
    color: var(--secondary-teal);
    background: rgba(0, 180, 216, 0.1);
}

.atgs-nav-links > li > a.active {
    color: var(--secondary-teal);
}

.atgs-nav-links > li > a.active::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: var(--secondary-teal);
    border-radius: 2px;
}

/* Dropdown Styles */
.atgs-dropdown {
    position: relative;
}

.atgs-dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-white);
    min-width: 200px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-medium);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-normal);
    padding: 10px;
    z-index: 100;
}

.atgs-dropdown:hover .atgs-dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Desktop dropdown sub-link text — uses CSS variable set by dynamic CSS (admin-configurable) */
.atgs-dropdown-content a {
    display: block;
    padding: 12px 15px;
    color: var(--submenu-text-color, var(--primary-charcoal));
    border-radius: var(--radius-small);
    font-weight: 500;
    font-size: 14px;
}

/* Desktop dropdown sub-link hover — uses CSS variable set by dynamic CSS (admin-configurable) */
.atgs-dropdown-content a:hover {
    background: var(--bg-light);
    color: var(--submenu-hover-color, var(--secondary-teal));
    padding-left: 20px;
}

/* ================================
   DESKTOP DROPDOWN ARROW INDICATOR
   Desktop only (min-width 769px).
   Mobile uses dynamic CSS ::after that rotates open/closed.
   Uses display:inline (NOT position:absolute) so it sits
   inline after the link text and does NOT conflict with the
   absolute-positioned active-underline ::after rule below.
   For active/current dropdown parents the active-underline
   rule overrides this via cascade order (same specificity,
   underline comes later in the file = wins).
   ================================ */
@media (min-width: 769px) {
    .atgs-nav-links > li.atgs-dropdown > a::after,
    .atgs-nav-links > li.menu-item-has-children > a::after {
        content: ' \25BE'; /* Unicode ▾ small triangle */
        display: inline;
        font-size: 0.72em;
        opacity: 0.7;
        vertical-align: middle;
    }
}

/* ================================
   DESKTOP NAV ACTIVE / HIGHLIGHT STATE
   --nav-active-color set via dynamic CSS from admin settings.
   Covers manual nav (.active on a) and WP menu (current-menu-item on li).
   opacity:1 on the ::after pill ensures full opacity even when the
   dropdown arrow rule above has set opacity:0.7 on the same ::after.
   ================================ */

.atgs-nav-links > li > a:hover {
    color: var(--secondary-teal);
    background: rgba(0, 180, 216, 0.1);
}

.atgs-nav-links > li > a.active,
.atgs-nav-links > li.current-menu-item > a,
.atgs-nav-links > li.current_page_item > a,
.atgs-nav-links > li.current-menu-ancestor > a {
    color: var(--nav-active-color, var(--secondary-teal));
}

/* Rounded underline pill beneath the active / current nav item */
.atgs-nav-links > li > a.active::after,
.atgs-nav-links > li.current-menu-item > a::after,
.atgs-nav-links > li.current_page_item > a::after,
.atgs-nav-links > li.current-menu-ancestor > a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: var(--nav-active-color, var(--secondary-teal));
    border-radius: 2px;
    opacity: 1;
}

/* CTA Button */
.atgs-cta-btn {
    display: inline-block;
    background: var(--gradient-teal);
    color: white !important;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
    box-shadow: var(--shadow-teal);
    transition: all var(--transition-normal);
}

.atgs-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 180, 216, 0.5);
    color: white;
}


/* Mobile Menu Toggle */
.atgs-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    background: none;
    border: none;
}

.atgs-mobile-toggle span {
    width: 28px;
    height: 3px;
    /* color set dynamically via --header-icon-bg CSS variable */
    background: var(--header-icon-bg, var(--primary-charcoal));
    border-radius: 3px;
    transition: all var(--transition-normal);
}

.atgs-mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.atgs-mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.atgs-mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ========================================
   MOBILE OVERLAY (slide-left / slide-right styles)
   ======================================== */
.atgs-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    /* background color set dynamically via CSS variable */
    background: var(--mobile-overlay-bg, rgba(0,0,0,0.5));
}

.atgs-mobile-overlay.active {
    display: block;
}

/* Slide-in panels get close button offset */
.atgs-mobile-slide-left .atgs-nav-links,
.atgs-mobile-slide-right .atgs-nav-links {
    padding-top: 70px;
}


/* ========================================
   4. BLOG HERO SECTION
   ======================================== */
.atgs-blog-hero {
    position: relative;
    padding: 160px 30px 80px;
    background: var(--gradient-dark);
    overflow: hidden;
}

.atgs-blog-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image injected dynamically via atgs_output_dynamic_css() in plugin */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.1;
}


.atgs-blog-hero::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: rgba(0, 180, 216, 0.1);
    border-radius: 50%;
    transform: rotate(-15deg);
}

.atgs-blog-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    color: white;
}

.atgs-blog-hero-content h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    color: white;
}

.atgs-blog-hero-content h1 span {
    color: var(--secondary-teal);
}

.atgs-blog-hero-content > p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto;
}

/* Breadcrumb */
.atgs-breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    font-size: 14px;
}

.atgs-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
}

.atgs-breadcrumb a:hover {
    color: var(--secondary-teal);
}

.atgs-breadcrumb > span {
    color: rgba(255, 255, 255, 0.5);
}

.atgs-breadcrumb .current {
    color: var(--secondary-teal);
}

/* ========================================
   5. BLOG ARCHIVE GRID
   ======================================== */
.atgs-blog-content {
    padding: 80px 30px;
    background: var(--bg-light);
}

.atgs-blog-content-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.atgs-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}

/* ========================================
   6. POST CARDS
   ======================================== */
.atgs-post-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    /* Transition here only for HOVER states; JS handles entrance */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}


/* Post Thumbnail */
.atgs-post-thumbnail {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.atgs-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.atgs-post-card:hover .atgs-post-thumbnail img {
    transform: scale(1.08);
}

.atgs-post-thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.atgs-post-card:hover .atgs-post-thumbnail-overlay {
    opacity: 1;
}

/* Post Category Badge */
.atgs-post-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--gradient-teal);
    color: white;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.atgs-post-category:hover {
    color: white;
    transform: translateY(-2px);
}

/* Post Content */
.atgs-post-content {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Post Meta */
.atgs-post-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 13px;
    color: var(--text-light);
}

.atgs-post-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.atgs-post-meta-item svg {
    width: 16px;
    height: 16px;
    fill: var(--secondary-teal);
    flex-shrink: 0;
}

/* Specific styling for the eye icon to ensure it looks flat and centered */
.atgs-post-meta-item.views svg {
    width: 18px;
    height: 18px;
    transform: translateY(1px);
}


/* Post Title */
.atgs-post-title {
    margin-bottom: 15px;
}

.atgs-post-title a {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-charcoal);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.atgs-post-title a:hover {
    color: var(--secondary-teal);
}

/* Post Excerpt */
.atgs-post-excerpt {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Post Footer */
.atgs-post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

.atgs-post-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.atgs-post-author-avatar {
    width: 40px;
    height: 40px;
    background: var(--gradient-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 14px;
}

.atgs-post-author-info {
    display: flex;
    flex-direction: column;
}

.atgs-post-author-name {
    font-weight: 600;
    color: var(--primary-charcoal);
    font-size: 14px;
}

.atgs-post-author-role {
    font-size: 12px;
    color: var(--text-light);
}

/* Read More Button */
.atgs-post-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-light);
    color: var(--primary-charcoal);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 13px;
}

.atgs-post-read-more:hover {
    background: var(--gradient-teal);
    color: white;
    gap: 12px;
}

.atgs-post-read-more svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform var(--transition-normal);
}

.atgs-post-read-more:hover svg {
    transform: translateX(3px);
}

/* ========================================
   7. FEATURED POST
   ======================================== */
.atgs-featured-post {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    margin-bottom: 20px;
    /* Constraint for desktop to prevent full-page height stretching */
    max-height: 530px; 
}

.atgs-featured-post .atgs-post-thumbnail {
    height: 100%;
    min-height: 350px;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.atgs-featured-post .atgs-post-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Ensure content stays within the max-height on desktop */
    overflow: hidden;
}

.atgs-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 193, 7, 0.2) 100%);
    color: #B8860B;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    width: fit-content;
}

.atgs-featured-badge svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.atgs-featured-post .atgs-post-title a {
    font-size: 1.8rem;
    -webkit-line-clamp: 3;
}

.atgs-featured-post .atgs-post-excerpt {
    -webkit-line-clamp: 4;
}


/* ========================================
   8. PAGINATION
   ======================================== */
.atgs-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #ddd;
}

.atgs-pagination a,
.atgs-pagination > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    border-radius: var(--radius-medium);
    font-weight: 600;
    font-size: 14px;
}

.atgs-pagination a {
    background: var(--bg-white);
    color: var(--primary-charcoal);
    box-shadow: var(--shadow-light);
}

.atgs-pagination a:hover {
    background: var(--secondary-teal);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 180, 216, 0.3);
}

.atgs-pagination > span.current {
    background: var(--gradient-teal);
    color: white;
    box-shadow: 0 5px 20px rgba(0, 180, 216, 0.3);
}

.atgs-pagination > span.dots {
    background: transparent;
    color: var(--text-light);
    box-shadow: none;
}

.atgs-pagination .prev,
.atgs-pagination .next {
    gap: 8px;
}

.atgs-pagination svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* No Posts Message */
.atgs-no-posts {
    grid-column: span 2;
    text-align: center;
    padding: 80px 40px;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
}

.atgs-no-posts-icon {
    width: 100px;
    height: 100px;
    background: var(--bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.atgs-no-posts-icon svg {
    width: 50px;
    height: 50px;
    fill: var(--text-light);
}

.atgs-no-posts h3 {
    font-size: 1.5rem;
    color: var(--primary-charcoal);
    margin-bottom: 10px;
}

.atgs-no-posts p {
    color: var(--text-light);
    margin-bottom: 25px;
}

.atgs-no-posts a {
    display: inline-block;
    padding: 14px 30px;
    background: var(--gradient-teal);
    color: white;
    border-radius: var(--radius-full);
    font-weight: 700;
}

.atgs-no-posts a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 180, 216, 0.3);
    color: white;
}

/* ========================================
   9. SINGLE POST HERO
   ======================================== */
.atgs-post-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
    padding-top: 100px;
    overflow: hidden;
}

.atgs-post-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.atgs-post-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.atgs-post-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 2;
}

.atgs-post-hero-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 30px;
    color: white;
}

/* Post Breadcrumb */
.atgs-post-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.atgs-post-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
}

.atgs-post-breadcrumb a:hover {
    color: var(--secondary-teal);
}

.atgs-post-breadcrumb > span {
    color: rgba(255, 255, 255, 0.5);
}

.atgs-post-breadcrumb .current {
    color: rgba(255, 255, 255, 0.9);
}

/* Category Badge in Hero */
.atgs-post-hero-category {
    display: inline-block;
    background: var(--gradient-teal);
    color: white;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.atgs-post-hero-category:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 180, 216, 0.4);
    color: white;
}

/* Post Title in Hero */
.atgs-post-hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    color: white;
}

/* Post Meta in Hero */
.atgs-post-hero-meta {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.atgs-post-meta-author {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.atgs-post-meta-author-avatar {
    width: 45px;
    height: 45px;
    background: var(--gradient-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: white;
    border: 2px solid white;
}

.atgs-post-meta-author-info {
    display: flex;
    flex-direction: column;
}

.atgs-post-meta-author-name {
    font-weight: 600;
    color: white;
}

.atgs-post-meta-author-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   10. POST CONTENT & TYPOGRAPHY
   ======================================== */
.atgs-post-content-wrapper {
    padding: 60px 30px 80px;
    background: var(--bg-white);
}

.atgs-post-content-inner {
    max-width: 800px;
    margin: 0 auto;
}

/* Article Content */
.atgs-post-article {
    font-size: 17px;
    line-height: 1.9;
    color: var(--text-dark);
}

.atgs-post-article p {
    margin-bottom: 25px;
}

.atgs-post-article h2 {
    font-size: 1.8rem;
    color: var(--primary-charcoal);
    margin: 45px 0 20px;
    padding-top: 20px;
}

.atgs-post-article h3 {
    font-size: 1.4rem;
    color: var(--primary-charcoal);
    margin: 35px 0 15px;
}

.atgs-post-article h4 {
    font-size: 1.2rem;
    color: var(--primary-charcoal);
    margin: 30px 0 15px;
}

.atgs-post-article a {
    color: var(--secondary-teal);
    border-bottom: 1px solid transparent;
}

.atgs-post-article a:hover {
    border-bottom-color: var(--secondary-teal);
}

.atgs-post-article ul,
.atgs-post-article ol {
    margin: 25px 0 25px 30px;
    list-style: disc;
}

.atgs-post-article ol {
    list-style: decimal;
}

.atgs-post-article ul li,
.atgs-post-article ol li {
    margin-bottom: 12px;
    padding-left: 5px;
}

.atgs-post-article ul li::marker {
    color: var(--secondary-teal);
}

.atgs-post-article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-large);
    margin: 30px 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.atgs-post-article blockquote {
    margin: 35px 0;
    padding: 30px 35px;
    background: var(--bg-light);
    border-left: 4px solid var(--secondary-teal);
    border-radius: 0 var(--radius-large) var(--radius-large) 0;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.atgs-post-article blockquote p:last-child {
    margin-bottom: 0;
}

.atgs-post-article blockquote cite {
    display: block;
    margin-top: 15px;
    font-size: 14px;
    font-style: normal;
    color: var(--text-light);
}

/* Callout Box */
.atgs-post-callout {
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.1) 0%, rgba(139, 195, 74, 0.1) 100%);
    border-radius: var(--radius-large);
    padding: 30px;
    margin: 35px 0;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.atgs-post-callout-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.atgs-post-callout-icon svg {
    width: 26px;
    height: 26px;
    fill: white;
}

.atgs-post-callout-content h4 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    color: var(--primary-charcoal);
}

.atgs-post-callout-content p {
    margin: 0;
    font-size: 15px;
}

/* ========================================
   11. POST TAGS & SHARE
   ======================================== */
.atgs-post-tags {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border-light);
}

.atgs-post-tags-label {
    font-weight: 700;
    color: var(--primary-charcoal);
    font-size: 14px;
}

.atgs-post-tag {
    display: inline-block;
    padding: 6px 16px;
    background: var(--bg-light);
    color: var(--text-light);
    border-radius: var(--radius-full);
    font-size: 13px;
}

.atgs-post-tag:hover {
    background: var(--secondary-teal);
    color: white;
}

/* Social Share */
.atgs-post-share {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    padding: 25px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.atgs-post-share-label {
    font-weight: 700;
    color: var(--primary-charcoal);
    font-size: 14px;
}

.atgs-post-share-buttons {
    display: flex;
    gap: 10px;
}

.atgs-share-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atgs-share-btn svg {
    width: 20px;
    height: 20px;
    fill: white;
}

.atgs-share-btn.facebook {
    background: #1877F2;
}

.atgs-share-btn.twitter {
    background: #1DA1F2;
}

.atgs-share-btn.linkedin {
    background: #0A66C2;
}

.atgs-share-btn.pinterest {
    background: #E60023;
}

.atgs-share-btn.email {
    background: var(--primary-charcoal);
}

.atgs-share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* ========================================
   12. AUTHOR BIO
   ======================================== */
.atgs-author-bio {
    display: flex;
    gap: 25px;
    margin-top: 50px;
    padding: 35px;
    background: var(--bg-light);
    border-radius: var(--radius-xl);
}

.atgs-author-bio-avatar {
    width: 100px;
    height: 100px;
    background: var(--gradient-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.atgs-author-bio-content h4 {
    font-size: 1.3rem;
    color: var(--primary-charcoal);
    margin-bottom: 5px;
}

.atgs-author-bio-content .role {
    font-size: 14px;
    color: var(--secondary-teal);
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
}

.atgs-author-bio-content p {
    color: var(--text-light);
    font-size: 15px;
    margin-bottom: 15px;
}

.atgs-author-bio-social {
    display: flex;
    gap: 10px;
}

.atgs-author-bio-social a {
    width: 35px;
    height: 35px;
    background: var(--bg-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atgs-author-bio-social a:hover {
    background: var(--secondary-teal);
}

.atgs-author-bio-social svg {
    width: 16px;
    height: 16px;
    fill: var(--primary-charcoal);
    transition: fill var(--transition-normal);
}

.atgs-author-bio-social a:hover svg {
    fill: white;
}

/* ========================================
   13. POST NAVIGATION
   ======================================== */
.atgs-post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 50px;
}

.atgs-post-nav-item {
    background: var(--bg-light);
    border-radius: var(--radius-large);
    padding: 25px;
    display: block;
}

.atgs-post-nav-item:hover {
    background: var(--bg-white);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.atgs-post-nav-item.prev {
    text-align: left;
}

.atgs-post-nav-item.next {
    text-align: right;
}

.atgs-post-nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-teal);
    margin-bottom: 10px;
}

.atgs-post-nav-item.next .atgs-post-nav-label {
    justify-content: flex-end;
}

.atgs-post-nav-label svg {
    width: 16px;
    height: 16px;
    fill: var(--secondary-teal);
}

.atgs-post-nav-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-charcoal);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   14. RELATED POSTS
   ======================================== */
.atgs-related-posts {
    padding: 80px 30px;
    background: var(--bg-light);
}

.atgs-related-posts-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.atgs-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.atgs-section-header h2 {
    font-size: 2.2rem;
    color: var(--primary-charcoal);
    margin-bottom: 10px;
}

.atgs-section-header h2 span {
    color: var(--secondary-teal);
}

.atgs-section-header p {
    color: var(--text-light);
    font-size: 1.1rem;
}

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

.atgs-related-post-card {
    background: var(--bg-white);
    border-radius: var(--radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    /* Transition here only for HOVER states; JS handles entrance */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}


.atgs-related-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.atgs-related-post-thumbnail {
    height: 180px;
    overflow: hidden;
}

.atgs-related-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.atgs-related-post-card:hover .atgs-related-post-thumbnail img {
    transform: scale(1.08);
}

.atgs-related-post-content {
    padding: 25px;
}

.atgs-related-post-meta {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 10px;
}

.atgs-related-post-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
}

.atgs-related-post-title a {
    color: var(--primary-charcoal);
}

.atgs-related-post-title a:hover {
    color: var(--secondary-teal);
}

.atgs-related-post-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--secondary-teal);
    font-weight: 600;
    font-size: 13px;
}

.atgs-related-post-link:hover {
    gap: 12px;
    color: var(--secondary-teal-dark);
}

.atgs-related-post-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ========================================
   15. COMMENTS SECTION
   ======================================== */
.atgs-comments-section {
    padding: 80px 30px;
    background: var(--bg-white);
}

.atgs-comments-inner {
    max-width: 800px;
    margin: 0 auto;
}

.atgs-comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--bg-light);
}

.atgs-comments-header h3 {
    font-size: 1.5rem;
    color: var(--primary-charcoal);
}

.atgs-comments-count {
    background: var(--bg-light);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-weight: 600;
    color: var(--text-light);
    font-size: 14px;
}

/* Comments List */
.atgs-comments-list {
    margin-bottom: 50px;
}

/* Individual Comment */
.atgs-comment {
    display: flex;
    gap: 20px;
    margin-bottom: 35px;
    padding-bottom: 35px;
    border-bottom: 1px solid var(--border-light);
}

.atgs-comment:last-child {
    border-bottom: none;
}

.atgs-comment-avatar {
    width: 55px;
    height: 55px;
    background: var(--gradient-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.atgs-comment-content {
    flex: 1;
}

.atgs-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.atgs-comment-author {
    font-weight: 700;
    color: var(--primary-charcoal);
    margin-bottom: 3px;
}

.atgs-comment-date {
    font-size: 13px;
    color: var(--text-light);
}

.atgs-comment-reply-btn {
    font-size: 13px;
    color: var(--secondary-teal);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.atgs-comment-reply-btn:hover {
    color: var(--secondary-teal-dark);
}

.atgs-comment-reply-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.atgs-comment-text,
.atgs-comment-text p {
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
}

/* Nested Comments */
.atgs-comment .children {
    margin-left: 75px;
    margin-top: 25px;
    padding-left: 0;
    list-style: none;
}

/* Comment Form */
.atgs-comment-form {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 2px solid var(--bg-light);
}

.atgs-comment-form h4,
.atgs-comment-form .comment-reply-title {
    font-size: 1.3rem;
    color: var(--primary-charcoal);
    margin-bottom: 25px;
}

.atgs-comment-form-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.atgs-comment-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.atgs-comment-form input[type="text"],
.atgs-comment-form input[type="email"],
.atgs-comment-form input[type="url"],
.atgs-comment-form textarea {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-medium);
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    transition: border-color var(--transition-normal);
    background: var(--bg-white);
}

.atgs-comment-form input:focus,
.atgs-comment-form textarea:focus {
    outline: none;
    border-color: var(--secondary-teal);
}

.atgs-comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

.atgs-comment-form button,
.atgs-comment-form input[type="submit"],
.atgs-comment-form .submit {
    align-self: flex-start;
    padding: 16px 35px;
    background: var(--gradient-teal);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.atgs-comment-form button:hover,
.atgs-comment-form input[type="submit"]:hover,
.atgs-comment-form .submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 180, 216, 0.4);
}

/* Comment Navigation */
.atgs-comment-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

.atgs-comment-navigation a {
    color: var(--secondary-teal);
    font-weight: 600;
}

/* ========================================
   16. NEWSLETTER SECTION
   ======================================== */
.atgs-blog-newsletter {
    background: var(--gradient-dark);
    padding: 80px 30px;
}

.atgs-blog-newsletter-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.atgs-blog-newsletter h2 {
    font-size: 2rem;
    color: white;
    margin-bottom: 15px;
}

.atgs-blog-newsletter h2 span {
    color: var(--secondary-teal);
}

.atgs-blog-newsletter > p,
.atgs-blog-newsletter-inner > p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
}

.atgs-newsletter-form {
    display: flex;
    gap: 15px;
    max-width: 500px;
    margin: 0 auto;
}

.atgs-newsletter-form input[type="email"] {
    flex: 1;
    padding: 16px 25px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
}

.atgs-newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.atgs-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--secondary-teal);
    background: rgba(255, 255, 255, 0.15);
}

.atgs-newsletter-form button {
    padding: 16px 35px;
    background: var(--gradient-teal);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.atgs-newsletter-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 180, 216, 0.4);
}

/* ========================================
   17. CTA SECTION
   ======================================== */
.atgs-post-cta {
    padding: 80px 30px;
    background: var(--gradient-dark);
    text-align: center;
}

.atgs-post-cta-inner {
    max-width: 700px;
    margin: 0 auto;
}

.atgs-post-cta h2 {
    font-size: 2rem;
    color: white;
    margin-bottom: 15px;
}

.atgs-post-cta h2 span {
    color: var(--secondary-teal);
}

.atgs-post-cta p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.atgs-post-cta-btn {
    display: inline-block;
    padding: 18px 40px;
    background: var(--gradient-teal);
    color: white;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 16px;
}

.atgs-post-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 180, 216, 0.4);
    color: white;
}

/* ========================================
   18. FOOTER
   ======================================== */
.atgs-footer {
    background: var(--primary-dark);
    color: white;
    padding: 80px 30px 30px;
}

.atgs-footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
}

.atgs-footer-brand img {
    height: 80px;
    margin-bottom: 20px;
}

.atgs-footer-brand p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
    max-width: 300px;
}

.atgs-footer-social {
    display: flex;
    gap: 15px;
}

.atgs-footer-social a {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atgs-footer-social a:hover {
    background: var(--secondary-teal);
    transform: translateY(-3px);
}

.atgs-footer-social svg {
    width: 20px;
    height: 20px;
    fill: white;
}

.atgs-footer-column h4 {
    color: white;
    font-size: 18px;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
}

.atgs-footer-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--secondary-teal);
    border-radius: 2px;
}

.atgs-footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.atgs-footer-column ul li {
    margin-bottom: 12px;
}

.atgs-footer-column ul a {
    color: rgba(255, 255, 255, 0.7);
}

.atgs-footer-column ul a:hover {
    color: var(--secondary-teal);
    padding-left: 5px;
}

.atgs-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.7);
}

.atgs-footer-contact-item svg {
    width: 20px;
    height: 20px;
    fill: var(--secondary-teal);
    flex-shrink: 0;
    margin-top: 3px;
}

.atgs-footer-contact-item strong {
    color: white;
    display: block;
    margin-bottom: 5px;
}

.atgs-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.atgs-footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin: 0;
}

.atgs-footer-bottom-links {
    display: flex;
    gap: 30px;
}

.atgs-footer-bottom-links a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.atgs-footer-bottom-links a:hover {
    color: var(--secondary-teal);
}

/* ========================================
   19. RESPONSIVE STYLES
   ======================================== */

/* Large Tablets & Small Desktops */
@media (max-width: 1024px) {
    .atgs-blog-hero-content h1,
    .atgs-post-hero-title {
        font-size: 2.5rem;
    }
    
    .atgs-posts-grid {
        grid-template-columns: 1fr;
    }
    
    .atgs-featured-post {
        grid-column: span 1;
        grid-template-columns: 1fr;
        /* Unset height constraint for vertical stacking on mobile/tablet */
        max-height: none; 
    }
    
    .atgs-featured-post .atgs-post-thumbnail {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        min-height: 250px;
    }
    
    .atgs-no-posts {
        grid-column: span 1;
    }
    
    .atgs-related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .atgs-footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Tablets */
@media (max-width: 768px) {
    /* Header Mobile */
    .atgs-nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        z-index: 999;
        padding: 20px;
    }
    
    .atgs-nav-links.active {
        display: flex;
    }
    
    .atgs-nav-links > li {
        width: 100%;
        text-align: center;
    }
    
    .atgs-nav-links > li > a {
        display: block;
        padding: 20px;
        font-size: 18px;
    }
    
    .atgs-nav-links > li > a.active::after {
        display: none;
    }
    
    .atgs-dropdown-content {
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: var(--bg-light);
        border-radius: var(--radius-medium);
        margin-top: 10px;
    }
    
    .atgs-mobile-toggle {
        display: flex;
    }
    
    .atgs-header .atgs-cta-btn {
        display: none;
    }
    
    /* Hero Sections */
    .atgs-blog-hero {
        padding: 140px 20px 60px;
    }
    
    .atgs-blog-hero-content h1 {
        font-size: 2rem;
    }
    
    .atgs-blog-hero-content > p {
        font-size: 1rem;
    }
    
    .atgs-post-hero {
        min-height: 400px;
    }
    
    .atgs-post-hero-title {
        font-size: 1.8rem;
    }
    
    .atgs-post-hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    /* Content */
    .atgs-blog-content {
        padding: 50px 20px;
    }
    
    .atgs-post-content-wrapper {
        padding: 40px 20px 60px;
    }
    
    .atgs-post-article {
        font-size: 16px;
    }
    
    .atgs-post-article h2 {
        font-size: 1.5rem;
    }
    
    .atgs-post-article h3 {
        font-size: 1.2rem;
    }
    
    .atgs-post-callout {
        flex-direction: column;
        text-align: center;
    }
    
    /* Post Card */
    .atgs-post-title a {
        font-size: 1.2rem;
    }
    
    .atgs-featured-post .atgs-post-title a {
        font-size: 1.4rem;
    }
    
    .atgs-post-footer {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    /* Author Bio */
    .atgs-author-bio {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }
    
    .atgs-author-bio-social {
        justify-content: center;
    }
    
    /* Navigation */
    .atgs-post-navigation {
        grid-template-columns: 1fr;
    }
    
    .atgs-post-nav-item.next {
        text-align: left;
    }
    
    .atgs-post-nav-item.next .atgs-post-nav-label {
        justify-content: flex-start;
    }
    
    /* Related Posts */
    .atgs-related-posts {
        padding: 50px 20px;
    }
    
    .atgs-related-posts-grid {
        grid-template-columns: 1fr;
    }
    
    /* Comments */
    .atgs-comments-section {
        padding: 50px 20px;
    }
    
    .atgs-comment {
        flex-direction: column;
    }
    
    .atgs-comment .children {
        margin-left: 30px;
    }
    
    .atgs-comment-form-row {
        grid-template-columns: 1fr;
    }
    
    /* Newsletter */
    .atgs-blog-newsletter {
        padding: 50px 20px;
    }
    
    .atgs-newsletter-form {
        flex-direction: column;
    }
    
    /* Pagination */
    .atgs-pagination {
        flex-wrap: wrap;
    }
    
    /* Footer */
    .atgs-footer {
        padding: 50px 20px 30px;
    }
    
    .atgs-footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    
    .atgs-footer-brand p {
        max-width: 100%;
    }
    
    .atgs-footer-column h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .atgs-footer-social {
        justify-content: center;
    }
    
    .atgs-footer-contact-item {
        justify-content: center;
    }
    
    .atgs-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .atgs-footer-bottom-links {
        gap: 20px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .atgs-header-inner {
        padding: 10px 15px;
    }
    
    .atgs-logo img {
        height: 50px;
    }
    
    .atgs-blog-hero-content h1 {
        font-size: 1.75rem;
    }
    
    .atgs-post-hero-title {
        font-size: 1.5rem;
    }
    
    .atgs-section-header h2 {
        font-size: 1.75rem;
    }
    
    .atgs-post-share {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .atgs-breadcrumb {
        font-size: 12px;
        flex-wrap: wrap;
    }
}

/* ========================================
   20. ANIMATIONS & ENTRANCE EFFECTS
   ======================================== */

/* Initial state for elements to be revealed via JS */
.atgs-post-card,
.atgs-related-post-card,
.atgs-comment {
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity;
}

/* The Reveal Class - matching the snappy feel of the reference site */
.atgs-reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Fallback for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .atgs-post-card,
    .atgs-related-post-card,
    .atgs-comment {
        opacity: 1;
        transform: none;
        transition: none !important;
    }
}