/**
 * Pin Theme Style Overrides
 *
 * This stylesheet transforms GridMode to match the Pin theme visual style.
 * All classes use the 'pin-' prefix for easy identification and rollback.
 *
 * @package GridMode WordPress Theme
 * @since 1.0.0
 */

/* ==========================================================================
   Google Fonts - Ruda (Primary font for Pin theme)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Ruda:wght@400;500;600;700&display=swap');

/* ==========================================================================
   CSS Variables / Color Scheme
   Calibrated based on Pin theme DevTools analysis (Section 15)
   ========================================================================== */
:root {
    /* === Primary Colors (DevTools验证) === */
    --pin-primary-color: #dd3333;
    --pin-primary-hover: #c62828;
    --pin-success-color: #0fbe7c;       /* Upload button green */
    --pin-success-hover: #0da86d;

    /* === Background Colors === */
    --pin-nav-bg: #000000;
    --pin-nav-border: #333333;
    --pin-page-bg: #f6f5f2;             /* 米色背景 */
    --pin-card-bg: #ffffff;

    /* === Text Colors (Section 2.3 DevTools验证) === */
    --pin-text-color: #414141;          /* 正文内容 - 修正自#333333 */
    --pin-title-color: #333333;         /* 文章标题、Widget标题 */
    --pin-text-secondary: #666666;      /* 摘要、描述性文本 */
    --pin-text-muted: #999999;          /* 时间戳、版权信息 */
    --pin-text-light: #666666;
    --pin-author-color: #94979c;        /* 作者署名颜色 */

    /* === Functional Colors (Section 2.4) === */
    --pin-like-color: #6ecb0a;          /* 点赞数（绿色） */
    --pin-dislike-color: #fe6969;       /* 踩数（红色） */
    --pin-rating-color: #ffc107;        /* 评分星标 */
    --pin-border-color: #e5e5e5;        /* 分隔线、边框 */

    /* === Shadows === */
    --pin-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    --pin-shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.15);

    /* === Typography (Section 3 DevTools验证) === */
    --pin-font-primary: 'Ruda', Helvetica, Arial, sans-serif;  /* 修正自Open Sans */
    --pin-font-heading: 'Merriweather', Georgia, serif;
    --pin-font-size-base: 14px;
    --pin-line-height-base: 22px;

    /* === Navigation (Section 5.1-5.2 DevTools验证) === */
    --pin-header-height: 135px;         /* 总高度 90+45 */
    --pin-main-nav-height: 90px;        /* 主导航高度 */
    --pin-category-nav-height: 45px;    /* 分类导航高度 */
    --pin-nav-font-size: 13px;          /* 修正自14px */
    --pin-nav-font-weight: 700;         /* 修正自400 */

    /* === Card Dimensions (Section 4.1 DevTools验证) === */
    --pin-card-width: 300px;            /* 修正自290px */
    --pin-card-gap: 25px;
    --pin-sidebar-width: 300px;

    /* === Spacing System (Section 4.3) === */
    --pin-spacing-xs: 5px;
    --pin-spacing-sm: 10px;
    --pin-spacing-md: 15px;
    --pin-spacing-lg: 20px;
    --pin-spacing-xl: 25px;
    --pin-spacing-xxl: 30px;
    --pin-spacing-section: 40px;

    /* === Other === */
    --pin-border-radius: 0px;           /* 无圆角 */
    --pin-transition: all 0.3s ease;
    --pin-transition-menu: 0.3s ease;   /* 菜单容器 */
    --pin-transition-sticky: 1.5s ease; /* Sticky导航 */
    --pin-transition-back-top: 1s ease; /* 返回顶部 */
    --pin-transition-card: 0.2s ease-in-out; /* 卡片hover */
}

/* ==========================================================================
   Base Overrides - Section 3 Typography System
   ========================================================================== */
body {
    background-color: var(--pin-page-bg);
    font-family: var(--pin-font-primary);
    font-size: var(--pin-font-size-base);
    line-height: var(--pin-line-height-base);
    color: var(--pin-text-color);
}

/* ==========================================================================
   Dual-Layer Navigation System - Section 5.1-5.2
   Total Header Height: 135px (90px main nav + 45px category nav)
   ========================================================================== */

/* Main Navigation Container - Primary Nav */
.pin-nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--pin-nav-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.admin-bar .pin-nav-wrapper {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .pin-nav-wrapper {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    body.admin-bar .pin-nav-wrapper {
        top: 0;
    }
}

/* Primary Navigation Bar - 90px height */
.pin-primary-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;                /* 全宽显示 */
    margin: 0 auto;
    padding: 0 30px;
    min-height: var(--pin-main-nav-height);  /* 90px */
    height: var(--pin-main-nav-height);
}

/* Logo Section */
.pin-nav-logo {
    flex: 0 0 auto;
}

.pin-nav-logo a {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-family: var(--pin-font-heading);
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}

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

/* Main Menu */
.pin-nav-menu {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.pin-nav-menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.pin-nav-menu > ul > li {
    position: relative;
}

.pin-nav-menu > ul > li > a {
    display: block;
    padding: 20px 18px;
    color: #ffffff;
    font-size: var(--pin-nav-font-size);   /* 13px - 目标值 */
    font-weight: var(--pin-nav-font-weight); /* 700 - 目标值 */
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: var(--pin-transition);
}

.pin-nav-menu > ul > li > a:hover,
.pin-nav-menu > ul > li.current-menu-item > a,
.pin-nav-menu > ul > li.current-menu-parent > a {
    color: var(--pin-primary-color);
    background: rgba(255, 255, 255, 0.05);
}

/* Dropdown Indicator */
.pin-nav-menu > ul > li.menu-item-has-children > a::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 6px;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.pin-nav-menu > ul > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.pin-nav-menu ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--pin-nav-bg);
    border-top: 3px solid var(--pin-primary-color);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--pin-transition);
    z-index: 100;
}

.pin-nav-menu > ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pin-nav-menu ul ul li {
    border-bottom: 1px solid #222;
}

.pin-nav-menu ul ul li:last-child {
    border-bottom: none;
}

.pin-nav-menu ul ul li a {
    display: block;
    padding: 12px 18px;
    color: #cccccc;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: var(--pin-transition);
}

.pin-nav-menu ul ul li a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    padding-left: 22px;
}

/* Nested Dropdown */
.pin-nav-menu ul ul ul {
    top: 0;
    left: 100%;
}

/* Navigation Right Section */
.pin-nav-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Search Button */
.pin-nav-search-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    padding: 10px;
    transition: var(--pin-transition);
}

.pin-nav-search-btn:hover {
    color: var(--pin-primary-color);
}

/* User Button */
.pin-nav-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--pin-primary-color);
    color: #ffffff;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--pin-transition);
}

.pin-nav-user-btn:hover {
    background: var(--pin-primary-hover);
    color: #ffffff;
}

/* User Avatar in Navigation */
.pin-nav-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* User Dropdown Menu */
.pin-nav-user-dropdown {
    position: relative;
}

.pin-nav-user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.pin-nav-user-dropdown:hover .pin-nav-user-menu,
.pin-nav-user-dropdown.is-open .pin-nav-user-menu,
.pin-nav-user-dropdown.active .pin-nav-user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pin-nav-user-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s ease;
}

.pin-nav-user-menu a:hover {
    background: #f5f5f5;
    color: var(--pin-primary-color);
}

.pin-nav-user-menu a i {
    width: 16px;
    color: #666;
}

.pin-nav-user-menu a:hover i {
    color: var(--pin-primary-color);
}

.pin-nav-user-divider {
    margin: 8px 0;
    border: none;
    border-top: 1px solid #eee;
}

/* Login trigger button (for non-logged-in users) */
.pin-nav-login-trigger {
    background: var(--pin-primary-color);
    color: #fff;
}

/* ==========================================================================
   Secondary Category Navigation Bar - 45px height, red background
   ========================================================================== */
.pin-category-nav {
    background: var(--pin-primary-color);  /* #dd3333 红色背景 */
    border-top: none;
    height: var(--pin-category-nav-height); /* 45px */
}

.pin-category-nav-inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: 100%;
}

.pin-category-nav-inner::-webkit-scrollbar {
    display: none;
}

.pin-category-list {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    height: 100%;
    align-items: center;
}

.pin-category-list li a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 15px;
    color: rgba(255, 255, 255, 0.85);  /* 白色带透明度 */
    font-size: var(--pin-nav-font-size);  /* 13px */
    font-weight: 400;                     /* 分类导航用普通字重 */
    text-decoration: none;
    white-space: nowrap;
    transition: var(--pin-transition);
}

.pin-category-list li a:hover,
.pin-category-list li.current-cat a {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.1);  /* 深色背景悬停效果 */
}

.pin-category-list li a i {
    font-size: 14px;
    color: #ffffff;
}

/* Category Count Badge */
.pin-category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--pin-primary-color);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
}

/* ==========================================================================
   Mobile Navigation
   ========================================================================== */
.pin-mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
    line-height: 1;
}

@media screen and (max-width: 1000px) {
    /* On mobile, only primary nav shows (90px), no category nav */
    .pin-primary-nav {
        min-height: var(--pin-main-nav-height);  /* 90px */
        height: var(--pin-main-nav-height);
    }

    .pin-nav-menu {
        display: none;
    }

    .pin-mobile-menu-toggle {
        display: block;
    }

    .pin-category-nav {
        display: none;
    }

    /* Mobile Slide Menu */
    .pin-mobile-menu {
        position: fixed;
        top: 0;
        left: -300px;
        width: 300px;
        height: 100vh;
        background: var(--pin-nav-bg);
        z-index: 10000;
        overflow-y: auto;
        transition: left 0.3s ease;
    }

    .pin-mobile-menu.active {
        left: 0;
    }

    .pin-mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: var(--pin-transition);
    }

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

    .pin-mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        border-bottom: 1px solid #333;
    }

    .pin-mobile-menu-close {
        background: none;
        border: none;
        color: #ffffff;
        font-size: 24px;
        cursor: pointer;
        padding: 5px;
    }

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

    .pin-mobile-nav-list li {
        border-bottom: 1px solid #222;
    }

    .pin-mobile-nav-list li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        color: #ffffff;
        font-size: 14px;
        text-decoration: none;
    }

    .pin-mobile-nav-list li a:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    /* Mobile Submenu Accordion */
    .pin-mobile-nav-list .sub-menu {
        display: none;
        background: #111;
    }

    .pin-mobile-nav-list .sub-menu.active {
        display: block;
    }

    .pin-mobile-nav-list .sub-menu li a {
        padding-left: 40px;
        font-size: 13px;
        color: #cccccc;
    }

    .pin-mobile-submenu-toggle {
        background: none;
        border: none;
        color: #ffffff;
        padding: 15px;
        cursor: pointer;
    }
}

/* ==========================================================================
   Card Styles - Pinterest/Pin Style
   ========================================================================== */

/* Card Container */
.pin-card {
    position: relative;
    background: var(--pin-card-bg);
    border-radius: var(--pin-border-radius);
    overflow: hidden;
    box-shadow: var(--pin-shadow);
    transition: var(--pin-transition);
}

.pin-card:hover {
    box-shadow: var(--pin-shadow-hover);
    transform: translateY(-2px);
}

/* Card Thumbnail */
.pin-card-thumbnail {
    position: relative;
    overflow: hidden;
}

.pin-card-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.pin-card:hover .pin-card-thumbnail img {
    transform: scale(1.05);
}

/* Comment Count Badge */
.pin-comment-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: var(--pin-primary-color);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    z-index: 10;
}

/* Hover Social Share Buttons */
.pin-card-share {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    opacity: 0;
    transform: translateY(10px);
    transition: var(--pin-transition);
}

.pin-card:hover .pin-card-share {
    opacity: 1;
    transform: translateY(0);
}

.pin-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #ffffff;
    color: var(--pin-text-color);
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
    transition: var(--pin-transition);
    margin: 0 3px;
}

.pin-share-btn:hover {
    transform: scale(1.1);
}

.pin-share-btn.pin-share-facebook:hover {
    background: #1877f2;
    color: #ffffff;
}

.pin-share-btn.pin-share-twitter:hover {
    background: #1da1f2;
    color: #ffffff;
}

.pin-share-btn.pin-share-pinterest:hover {
    background: #bd081c;
    color: #ffffff;
}

.pin-share-btn.pin-share-whatsapp:hover {
    background: #25d366;
    color: #ffffff;
}

.pin-share-btn.pin-share-email:hover {
    background: var(--pin-text-color);
    color: #ffffff;
}

/* Card Content */
.pin-card-content {
    padding: 20px;
}

/* Category Label */
.pin-card-category {
    display: inline-block;
    margin-bottom: 10px;
}

.pin-card-category a {
    display: inline-block;
    padding: 4px 12px;
    background: var(--pin-primary-color);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    border-radius: 2px;
    transition: var(--pin-transition);
}

.pin-card-category a:hover {
    background: var(--pin-primary-hover);
}

/* Card Title */
.pin-card-title {
    margin: 0 0 12px;
    font-family: var(--pin-font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.pin-card-title a {
    color: var(--pin-text-color);
    text-decoration: none;
    transition: var(--pin-transition);
}

.pin-card-title a:hover {
    color: var(--pin-primary-color);
}

/* Card Excerpt */
.pin-card-excerpt {
    margin-bottom: 15px;
    color: var(--pin-text-light);
    font-size: 13px;
    line-height: 1.6;
}

/* Card Meta - Author and Stats */
.pin-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid var(--pin-border-color);
}

.pin-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pin-card-author-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
}

.pin-card-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pin-card-author-info {
    font-size: 12px;
}

.pin-card-author-name {
    color: var(--pin-text-color);
    font-weight: 600;
}

.pin-card-author-name a {
    color: inherit;
    text-decoration: none;
}

.pin-card-author-name a:hover {
    color: var(--pin-primary-color);
}

.pin-card-date {
    color: var(--pin-text-muted);
    font-size: 11px;
}

/* Card Stats */
.pin-card-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pin-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--pin-text-muted);
    font-size: 12px;
}

.pin-stat i {
    font-size: 14px;
}

.pin-stat-likes,
.pin-stat-dislikes {
    color: #888;  /* Gray icons */
}

.pin-stat-likes .stat-num {
    color: #6ecb0a;  /* Green for likes */
}

.pin-stat-dislikes .stat-num {
    color: #fe6969;  /* Red for dislikes */
}

/* ==========================================================================
   Layout Adjustments
   ========================================================================== */

/* Main Content Area */
.pin-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 100%;              /* 全宽显示 */
    margin: 0 auto;
    padding: 30px 30px;
}

.pin-main-content {
    flex: 1 1 0;
    min-width: 0;
}

/* Sticky Sidebar */
.pin-sidebar {
    flex: 0 0 300px;
    width: 300px;
}

.pin-sidebar-inner {
    position: sticky;
    top: 90px;
}

body.admin-bar .pin-sidebar-inner {
    top: 122px;
}

@media screen and (max-width: 1000px) {
    .pin-sidebar {
        flex: 0 0 100%;
        width: 100%;
    }

    .pin-sidebar-inner {
        position: static;
    }
}

/* ==========================================================================
   Masonry Grid
   ========================================================================== */
.pin-masonry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pin-card-gap);
}

@media screen and (max-width: 1200px) {
    .pin-masonry-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 900px) {
    .pin-masonry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .pin-masonry-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Sidebar Widgets - Section 5.5
   ========================================================================== */
/* Widget container - target: margin 0 0 30px, NO shadow, no border-radius */
.pin-widget {
    background: var(--pin-card-bg);
    border-radius: var(--pin-border-radius);  /* 0px */
    margin: 0 0 var(--pin-spacing-xxl);  /* 30px */
    overflow: hidden;
    box-shadow: none;  /* Widgets没有阴影 */
}

.pin-widget-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--pin-border-color);
}

/* Widget title - matches target: 14px/700/uppercase/#333, red underline on first ~4 letters */
.pin-widget-title {
    margin: 0 0 5px;
    font-family: var(--pin-font-primary);
    font-size: var(--pin-font-size-base);  /* 14px */
    font-weight: 700;
    color: var(--pin-title-color);  /* #333 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 0;
    border-bottom: none;
}

/* Red underline decoration - 30px width matches ~4 letters (Pin theme style) */
.pin-widget-title::after {
    display: block;
    content: "";
    width: 30px;
    height: 2px;
    background: var(--pin-primary-color);  /* #dd3333 */
    margin-top: 5px;
    margin-bottom: 15px;
}

/* Widget content - matches target: padding 0 25px 20px */
.pin-widget-content {
    padding: 0 25px 20px;
}

/* Most Liked Widget */
.pin-most-liked-item {
    display: flex;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pin-border-color);
}

.pin-most-liked-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pin-most-liked-item:first-child {
    padding-top: 0;
}

.pin-most-liked-thumb {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    border-radius: 0;
    overflow: visible;
    position: relative;
}

.pin-most-liked-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.pin-most-liked-info {
    flex: 1;
    min-width: 0;
}

.pin-most-liked-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.pin-most-liked-title a {
    color: var(--pin-text-color);
    text-decoration: none;
}

.pin-most-liked-title a:hover {
    color: var(--pin-primary-color);
}

.pin-most-liked-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--pin-text-muted);
}

/* Comment badge for sidebar widgets - inherit post list styles */
.pin-most-liked-thumb .article-comm,
.pin-best-review-thumb .article-comm {
    position: absolute;
    top: 0;
    left: -1px;
    margin: 5px 0 0;  /* Smaller margin for smaller thumbnails */
}

.pin-most-liked-thumb .article-comm a,
.pin-best-review-thumb .article-comm a {
    padding: 0 5px;
    min-width: 28px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    gap: 3px;
}

.pin-most-liked-thumb .article-comm i,
.pin-best-review-thumb .article-comm i {
    font-size: 9px;
}

/* Comment badge and category badge for featured item in Most Liked widget */
/* Use same styles as post list cards for consistency */
.pin-widget-featured-thumb .article-comm,
.pin-widget-featured-thumb .article-category {
    /* Inherit default styles from .article-comm and .article-category */
}

/* YouTube thumbnail in sidebar widgets */
.pin-widget-youtube-thumb {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.pin-widget-youtube-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pin-widget-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: rgba(255, 0, 0, 0.9);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    transition: background 0.2s ease;
}

.pin-widget-youtube-thumb:hover .pin-widget-play-icon {
    background: rgba(255, 0, 0, 1);
}

/* Categories Widget - Two column layout matching Pin theme */
.pin-categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;  /* Two columns */
    gap: 0;
}

.pin-categories-list li {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: none;  /* No borders in Pin theme */
}

.pin-categories-list li a {
    display: inline;
    color: #000;  /* Black text */
    font-size: 12px;  /* Matches target */
    font-weight: 400;
    text-decoration: none;
    transition: var(--pin-transition);
}

.pin-categories-list li a:hover {
    color: var(--pin-primary-color);
    text-decoration: underline;
}

/* Category count - red color in parentheses */
.pin-categories-list .cat-count {
    display: inline;
    margin-left: 3px;
    color: var(--pin-primary-color);  /* Red #dd3333 */
    font-size: 12px;
    font-weight: 400;
}

/* Subscribe Widget */
.pin-subscribe-widget {
    text-align: center;
}

.pin-subscribe-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: var(--pin-primary-color);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.pin-subscribe-text {
    margin-bottom: 15px;
    color: var(--pin-text-light);
    font-size: 14px;
}

.pin-subscribe-form input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--pin-border-color);
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 14px;
}

.pin-subscribe-form button {
    width: 100%;
    padding: 12px 20px;
    background: var(--pin-primary-color);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pin-transition);
}

.pin-subscribe-form button:hover {
    background: var(--pin-primary-hover);
}

/* Ad Widget */
.pin-widget-ad {
    background: transparent;
}

.pin-ad-widget {
    width: 100%;
}

.pin-ad-widget img {
    width: 100%;
    height: auto;
    border-radius: 2px 2px 0 0;
    display: block;
}

.pin-ad-widget a {
    display: block;
}

/* Ad placeholder (when no actual ad) */
.pin-ad-placeholder {
    background: #f5f5f5;
    width: 100%;
    height: 250px;
}

.pin-ad-placeholder.pin-ad-300x600 {
    height: 600px;
}

.pin-ad-label {
    display: block;
    color: #999;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 5px;
}

/* Main content area ads - force square corners (no border-radius) */
.local-grid-ad,
.local-grid-ad div,
.local-grid-ad *,
.gridmode-grid-post-inside.gridmode-ad-container,
.gridmode-grid-post-inside.gridmode-ad-container *,
.gridmode-grid-ad-post,
.gridmode-grid-ad-post *,
.gridmode-grid-ad-post .gridmode-grid-post-inside,
.gridmode-grid-ad-post .gridmode-grid-post-inside * {
    border-radius: 0 !important;
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */
.pin-footer {
    background: var(--pin-nav-bg);
    color: #ffffff;
    margin-top: 40px;
}

/* Social Media Bar */
.pin-footer-social {
    padding: 25px 0;
    border-bottom: 1px solid #222;
}

.pin-footer-social-inner {
    max-width: 100%;              /* 全宽显示 */
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pin-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #222;
    color: #ffffff;
    border-radius: 50%;
    font-size: 16px;
    text-decoration: none;
    transition: var(--pin-transition);
}

.pin-social-link:hover {
    background: var(--pin-primary-color);
    color: #ffffff;
    transform: translateY(-3px);
}

/* Social Icon Brand Colors on Hover */
.pin-social-facebook:hover { background: #1877f2; }
.pin-social-twitter:hover { background: #1da1f2; }
.pin-social-googleplus:hover { background: #dd4b39; }
.pin-social-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.pin-social-pinterest:hover { background: #bd081c; }
.pin-social-youtube:hover { background: #ff0000; }
.pin-social-linkedin:hover { background: #0a66c2; }
.pin-social-tiktok:hover { background: #000000; }
.pin-social-vimeo:hover { background: #1ab7ea; }
.pin-social-tumblr:hover { background: #35465c; }
.pin-social-dribbble:hover { background: #ea4c89; }
.pin-social-flickr:hover { background: #0063dc; }
.pin-social-reddit:hover { background: #ff4500; }
.pin-social-whatsapp:hover { background: #25d366; }
.pin-social-telegram:hover { background: #0088cc; }

/* Random Articles Section */
.pin-footer-articles {
    padding: 40px 0;
    border-bottom: 1px solid #222;
}

.pin-footer-articles-inner {
    max-width: 100%;              /* 全宽显示 */
    margin: 0 auto;
    padding: 0 30px;
}

/* Header with title and navigation arrows */
.pin-footer-articles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.pin-footer-section-title {
    margin: 0;
    font-family: var(--pin-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.pin-footer-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--pin-primary-color);
}

/* Random Articles Arrow Navigation */
.pin-random-nav {
    display: flex;
    gap: 8px;
}

.pin-random-nav-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 4px;
    background: #333;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.pin-random-nav-btn:hover {
    background: var(--pin-primary-color);
}

.pin-random-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pin-random-nav-btn i {
    font-size: 14px;
}

/* Scrollable wrapper */
.pin-random-articles-wrapper {
    overflow: hidden;
    position: relative;
}

.pin-random-articles-grid {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;            /* 单行显示，不换行 */
    transition: transform 0.4s ease;
}

.pin-random-article {
    flex: 0 0 200px;              /* 固定宽度，单行轮播 */
    width: 200px;
}

@media screen and (max-width: 1000px) {
    .pin-random-article {
        flex: 0 0 180px;          /* 固定宽度，单行轮播 */
        width: 180px;
    }
}

@media screen and (max-width: 600px) {
    .pin-random-article {
        flex: 0 0 160px;          /* 固定宽度，单行轮播 */
        width: 160px;
    }

    .pin-footer-articles-header {
        flex-wrap: wrap;
        gap: 15px;
    }
}

.pin-random-article {
    position: relative;
    border-radius: 0;
    overflow: visible;  /* Allow badges to protrude */
}

/* Random article link wrapper for image overflow */
.pin-random-article-link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

.pin-random-article img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pin-random-article:hover img {
    transform: scale(1.1);
}

/* Badge positioning for random articles - match post list exactly */
.pin-random-article .article-comm {
    position: absolute;
    top: 0;
    left: -1px;
    z-index: 10;
    margin: 10px 0 0;
    background-color: #000000;
    border-radius: 0;
}

.pin-random-article .article-comm a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 1px 8px 0;
    min-width: 36px;
    height: 22px;
    line-height: 22px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 400;
    text-decoration: none;
}

.pin-random-article .article-comm i {
    font-size: 11px;
}

.pin-random-article .article-category {
    position: absolute;
    top: 0;
    left: -1px;
    margin: 10px 0 0 42px;  /* Same as post list */
    z-index: 10;
    color: #ffffff !important;  /* Ensure white text */
    font-size: 11px;
    font-weight: 400;
    text-decoration: none;
    line-height: 22px;
}

.pin-random-article-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 10px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.pin-random-article-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}

.pin-random-article-title a {
    color: #ffffff;
    text-decoration: none;
}

/* YouTube Play Icon for Featured/Random Articles */
.pin-youtube-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: rgba(255, 0, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    z-index: 5;
    transition: all 0.3s ease;
    pointer-events: none;
}

.pin-youtube-play-icon i {
    margin-left: 2px; /* Optical alignment for play icon */
}

.pin-random-article:hover .pin-youtube-play-icon,
.pin-featured-bar-item:hover .pin-youtube-play-icon {
    background: rgba(255, 0, 0, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Footer Widgets */
.pin-footer-widgets {
    padding: 40px 0;
    border-bottom: 1px solid #222;
}

.pin-footer-widgets-inner {
    max-width: 100%;              /* 全宽显示 */
    margin: 0 auto;
    padding: 0 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pin-spacing-xxl);  /* 30px */
}

@media screen and (max-width: 900px) {
    .pin-footer-widgets-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .pin-footer-widgets-inner {
        grid-template-columns: 1fr;
    }
}

.pin-footer-widget-title {
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
}

.pin-footer-widget-title::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: var(--pin-primary-color);
    margin-top: 10px;
}

/* Copyright */
.pin-footer-copyright {
    padding: 20px 0;
}

.pin-footer-copyright-inner {
    max-width: 100%;              /* 全宽显示 */
    margin: 0 auto;
    padding: 0 30px;
    text-align: center;
    font-size: var(--pin-font-size-base);  /* 14px */
    color: var(--pin-text-muted);          /* #999 */
}

.pin-footer-copyright a {
    color: var(--pin-primary-color);
    text-decoration: none;
}

.pin-footer-copyright a:hover {
    text-decoration: underline;
}

/* Footer Legal Links */
.pin-footer-legal-links {
    margin-top: 10px;
    font-size: 11px;
    color: var(--pin-text-muted);
    opacity: 0.8;
}

.pin-footer-legal-links a {
    color: var(--pin-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pin-footer-legal-links a:hover {
    color: var(--pin-primary-color);
    text-decoration: underline;
}

.pin-footer-legal-links .legal-separator {
    margin: 0 8px;
    color: var(--pin-text-muted);
    opacity: 0.5;
}

/* ==========================================================================
   Animation Effects
   ========================================================================== */

/* Image Hover Zoom */
.pin-zoom-on-hover {
    overflow: hidden;
}

.pin-zoom-on-hover img {
    transition: transform 0.4s ease;
}

.pin-zoom-on-hover:hover img {
    transform: scale(1.05);
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Loading Animation */
.pin-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--pin-border-color);
    border-top-color: var(--pin-primary-color);
    border-radius: 50%;
    animation: pin-spin 0.8s linear infinite;
}

@keyframes pin-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Fade In Animation */
.pin-fade-in {
    animation: pin-fadeIn 0.5s ease forwards;
}

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

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.pin-text-center { text-align: center; }
.pin-text-left { text-align: left; }
.pin-text-right { text-align: right; }

.pin-mb-0 { margin-bottom: 0 !important; }
.pin-mb-1 { margin-bottom: 10px !important; }
.pin-mb-2 { margin-bottom: 20px !important; }
.pin-mb-3 { margin-bottom: 30px !important; }

.pin-mt-0 { margin-top: 0 !important; }
.pin-mt-1 { margin-top: 10px !important; }
.pin-mt-2 { margin-top: 20px !important; }
.pin-mt-3 { margin-top: 30px !important; }

.pin-hidden { display: none !important; }

@media screen and (max-width: 1000px) {
    .pin-hidden-mobile { display: none !important; }
}

@media screen and (min-width: 1001px) {
    .pin-hidden-desktop { display: none !important; }
}

/* ==========================================================================
   GridMode Grid Post Overrides - Pin Style Transformation
   ========================================================================== */

/* Transform existing GridMode grid posts to Pin style */
/* Target: 300px fixed width (Section 4.1), margin 0 0 25px 25px */
.gridmode-grid-post {
    background: var(--pin-card-bg);
    border-radius: var(--pin-border-radius);  /* 0px - 无圆角 */
    overflow: hidden;
    box-shadow: var(--pin-shadow);  /* 0 1px 5px rgba(0,0,0,0.1) */
    transition: var(--pin-transition-card);  /* 0.2s ease-in-out */
    border: none;
    width: var(--pin-card-width);      /* 300px - 目标值 */
    flex: 0 0 var(--pin-card-width);
    margin: 0 0 var(--pin-card-gap) var(--pin-card-gap);  /* 25px */
}

/* Adjust grid container for fixed-width cards */
.gridmode-posts-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--pin-card-gap));  /* -25px */
    justify-content: flex-start;
}

.gridmode-grid-post:hover {
    box-shadow: var(--pin-shadow-hover);
    transform: translateY(-2px);
}

.gridmode-grid-post-inside {
    background: transparent;
    border: none;
    padding: 0;
}

/* Thumbnail Area */
.gridmode-grid-post .gridmode-grid-post-thumbnail {
    position: relative;
    overflow: hidden;
    border-radius: var(--pin-border-radius) var(--pin-border-radius) 0 0;
}

.gridmode-grid-post .gridmode-grid-post-thumbnail img {
    transition: transform 0.4s ease;
    display: block;
    width: 100%;
    height: auto;
}

.gridmode-grid-post:hover .gridmode-grid-post-thumbnail img {
    transform: scale(1.05);
}

/* Remove old thumbnail borders/backgrounds */
.gridmode-grid-post .gridmode-grid-post-thumbnail-inside {
    border: none;
    background: none;
    padding: 0;
}

/* Card Details Area - padding 15px 25px 20px to match target (Section 5.4) */
.gridmode-grid-post-details {
    padding: var(--pin-spacing-md) var(--pin-spacing-xl) var(--pin-spacing-lg);  /* 15px 25px 20px */
    background: var(--pin-card-bg);
}

/* Category Labels - Pin Style */
.gridmode-grid-post .gridmode-grid-cats {
    margin-bottom: 10px;
}

.gridmode-grid-post .gridmode-grid-cats a {
    display: inline-block;
    padding: 4px 12px;
    background: var(--pin-primary-color);
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    border-radius: 2px;
    transition: var(--pin-transition);
    margin-right: 5px;
    margin-bottom: 5px;
}

.gridmode-grid-post .gridmode-grid-cats a:hover {
    background: var(--pin-primary-hover);
}

/* Post Title - Pin Style (Section 5.4: 16px/700/22px/margin:15px 0 0/#333) */
/* Using !important to override theme's style.css */
.gridmode-grid-post .gridmode-grid-post-title {
    margin: var(--pin-spacing-md) 0 0 !important;  /* 15px */
    font-family: var(--pin-font-primary) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    color: var(--pin-title-color) !important;  /* #333 */
    text-shadow: none !important;
    text-align: left !important;  /* LEFT aligned - matches Pin theme */
}

.gridmode-grid-post .gridmode-grid-post-title a {
    color: var(--pin-title-color) !important;  /* #333 */
    text-decoration: none !important;
    transition: var(--pin-transition);
}

.gridmode-grid-post .gridmode-grid-post-title a:hover {
    color: var(--pin-primary-color) !important;  /* #dd3333 */
    text-decoration: none !important;
}

/* Post Excerpt - Pin Style (Section 5.4: 14px/1.6/#666) */
.gridmode-grid-post-snippet {
    margin-bottom: var(--pin-spacing-md);  /* 15px */
    color: var(--pin-text-secondary);      /* #666 */
    font-size: var(--pin-font-size-base);  /* 14px */
    line-height: 1.6;
}

.gridmode-grid-post-snippet-inside {
    color: inherit;
}

/* Post Meta - Pin Style */
.gridmode-grid-post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid var(--pin-border-color);
    flex-wrap: wrap;
    gap: 10px;
}

.gridmode-grid-post-meta-item {
    color: var(--pin-text-muted);
    font-size: 12px;
}

.gridmode-grid-post-meta a {
    color: var(--pin-text-color);
    text-decoration: none;
}

.gridmode-grid-post-meta a:hover {
    color: var(--pin-primary-color);
}

/* Author Info in Grid */
.gridmode-grid-post .gridmode-post-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gridmode-grid-post .gridmode-post-author img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

/* Vote Buttons in Grid - Pin Style */
.gridmode-grid-post .gridmode-vote-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gridmode-vote-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--pin-page-bg);
    border: 1px solid var(--pin-border-color);
    border-radius: 15px;
    color: var(--pin-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: var(--pin-transition);
}

.gridmode-vote-button:hover {
    border-color: var(--pin-primary-color);
    color: var(--pin-primary-color);
}

.gridmode-vote-button.gridmode-like-button.voted,
.gridmode-vote-button.gridmode-like-button:hover {
    background: #e8f5e9;
    border-color: #4caf50;
    color: #4caf50;
}

.gridmode-vote-button.gridmode-dislike-button.voted,
.gridmode-vote-button.gridmode-dislike-button:hover {
    background: #ffebee;
    border-color: #f44336;
    color: #f44336;
}

/* Approval Rate Badge - Pin Style */
.gridmode-approval-rate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* ==========================================================================
   Sidebar Widget Overrides - Pin Style
   ========================================================================== */

/* Transform existing sidebar widgets */
.gridmode-side-widget,
.gridmode-widget-box {
    background: var(--pin-card-bg);
    border-radius: var(--pin-border-radius);
    margin-bottom: 25px;
    overflow: hidden;
    box-shadow: var(--pin-shadow);
    border: none;
}

.gridmode-widget-box-inside {
    padding: 0;
}

.gridmode-widget-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--pin-border-color);
    background: transparent;
}

/* Gridmode widget title - matches target: 14px/700/uppercase/#333, NO underline */
.gridmode-widget-title {
    margin: 0 0 5px;
    font-family: var(--pin-font-primary);
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 0;
    border-bottom: none;
}

/* Remove the underline decoration */
.gridmode-widget-title::after {
    display: none;
}

.gridmode-widget-title-inside {
    display: block;
}

/* Widget Content */
.gridmode-side-widget > ul,
.widget > ul {
    list-style: none;
    margin: 0;
    padding: 20px;
}

.gridmode-side-widget > ul li,
.widget > ul li {
    padding: 10px 0;
    border-bottom: 1px solid var(--pin-border-color);
}

.gridmode-side-widget > ul li:last-child,
.widget > ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.gridmode-side-widget > ul li:first-child,
.widget > ul li:first-child {
    padding-top: 0;
}

.gridmode-side-widget a,
.widget a {
    color: var(--pin-text-color);
    text-decoration: none;
    transition: var(--pin-transition);
}

.gridmode-side-widget a:hover,
.widget a:hover {
    color: var(--pin-primary-color);
}

/* ==========================================================================
   Layout Overrides - P0 Full-Width Layout Fix
   ========================================================================== */

/* CRITICAL: Override GridMode's max-width containers for full-width layout */
/* Target layout: Sidebar at absolute left edge, content fills remaining space */

/* Remove max-width from outer wrapper to allow full page width */
.gridmode-outer-wrapper {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Remove max-width from content wrapper container */
#gridmode-wrapper {
    max-width: none !important;
    width: 100% !important;
}

/* Adjust main content wrapper for Pin style */
.gridmode-content-wrapper {
    gap: 0;  /* Changed from 30px - using flexbox gap in three-column-layout */
    max-width: none !important;
    width: 100% !important;
}

.gridmode-main-wrapper {
    background: transparent;
}

.gridmode-main-wrapper-inside {
    padding: 30px 0;
}

/* Sidebar */
.gridmode-sidebar-one-wrapper-inside {
    padding: 30px 0 30px 0;
}

/* Make sidebar sticky */
.gridmode-sidebar-one-wrapper {
    position: relative;
}

.gridmode-sidebar-one-wrapper-inside {
    position: sticky;
    top: 90px;
}

body.admin-bar .gridmode-sidebar-one-wrapper-inside {
    top: 122px;
}

@media screen and (max-width: 960px) {
    .gridmode-sidebar-one-wrapper-inside {
        position: static;
    }
}

/* ==========================================================================
   Buttons and Links - Pin Style
   ========================================================================== */

/* Primary Buttons */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.gridmode-button,
.button {
    background: var(--pin-primary-color);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pin-transition);
    text-transform: none;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.gridmode-button:hover,
.button:hover {
    background: var(--pin-primary-hover);
}

/* Links */
a {
    color: var(--pin-text-color);
    transition: var(--pin-transition);
}

a:hover {
    color: var(--pin-primary-color);
}

/* ==========================================================================
   Grid Container Overrides
   ========================================================================== */

.gridmode-posts-container {
    gap: var(--pin-card-gap);
}

/* Remove old grid margins */
.gridmode-grid-post.gridmode-4-col {
    margin-right: 0;
    margin-bottom: var(--pin-card-gap);
}

/* Hide old navigation elements when Pin nav is active */
.gridmode-site-header,
.gridmode-primary-menu-container,
.gridmode-secondary-menu-container {
    display: none;
}

/* Show header image if used */
.gridmode-header-image {
    display: block;
}

/* ==========================================================================
   Three-Column Layout - Pin Style (P0 Fix - Full Width Layout)

   Target Layout:
   ┌─────────────────────────────────────────────────────────────────────┐
   │ Sidebar(300px) │         Main Content (dynamic fill)               │
   │ 贴左边缘       │         Cards expand based on screen width        │
   └─────────────────────────────────────────────────────────────────────┘
   ========================================================================== */

.pin-three-column-wrapper {
    background: var(--pin-page-bg);
    padding: 20px 0;  /* Remove horizontal padding - sidebar touches edge */
    /* Fix: Expand to fill parent flexbox (gridmode-content-wrapper) */
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}

.pin-three-column-layout {
    display: flex;
    gap: 0;  /* No gap - sidebar touches edge, cards have their own margin */
    max-width: none;  /* REMOVED max-width constraint for full-width layout */
    width: 100%;
    margin: 0;
    align-items: flex-start;
}

/* Left Sidebar - 300px, fixed to left edge (Section 4.1) */
.pin-sidebar-left {
    flex: 0 0 var(--pin-sidebar-width);  /* 300px */
    width: var(--pin-sidebar-width);
    background: var(--pin-card-bg);
    /* Sidebar touches left edge - no margin */
    margin-left: 0;
}

/* Main Content - Dynamically fill remaining space */
.pin-three-column-layout .pin-main-content {
    flex: 1 1 0;  /* Grow to fill available space */
    min-width: 0;
    padding: 0 var(--pin-card-gap);  /* 25px padding on sides for card margin */
}

/* Right Sidebar - 300px to match target (only shown on inner pages) */
.pin-sidebar-right {
    flex: 0 0 var(--pin-sidebar-width);  /* 300px */
    width: var(--pin-sidebar-width);
}

/* Sidebar Inner (Sticky) - sticky at header height + gap */
.pin-sidebar .pin-sidebar-inner {
    position: sticky;
    top: calc(var(--pin-header-height) + var(--pin-spacing-lg));  /* 135px + 20px = 155px */
}

body.admin-bar .pin-sidebar .pin-sidebar-inner {
    top: calc(var(--pin-header-height) + 32px + var(--pin-spacing-lg));  /* 135px + 32px + 20px */
}

/* Responsive Three-Column Layout - P0 Full Width Fix */

/* Large screens (1920px+): Keep sidebar visible, cards fill remaining space */
/* Masonry JS handles column count automatically based on container width */

/* Medium screens (1201px - 1919px): Same layout, fewer columns calculated by JS */

/* Tablet (992px - 1200px): Hide left sidebar, show content full width */
@media screen and (max-width: 1200px) {
    .pin-three-column-layout {
        flex-wrap: nowrap;
    }

    .pin-sidebar-left {
        display: none;  /* Hide left sidebar on tablets */
    }

    .pin-three-column-layout .pin-main-content {
        flex: 1;
        padding: 0 var(--pin-card-gap);
    }

    .pin-sidebar-right {
        flex: 0 0 300px;
        width: 300px;
    }

    .pin-sidebar .pin-sidebar-inner {
        position: sticky;
        top: calc(var(--pin-header-height) + var(--pin-spacing-lg));
    }
}

/* Mobile (< 992px): Stack everything */
@media screen and (max-width: 991px) {
    .pin-three-column-layout {
        flex-wrap: wrap;
    }

    .pin-sidebar-left {
        display: none;
    }

    .pin-three-column-layout .pin-main-content {
        flex: 0 0 100%;
        width: 100%;
        order: 1;
        padding: 0 15px;
    }

    .pin-sidebar-right {
        flex: 0 0 100%;
        width: 100%;
        order: 2;
        padding: 0 15px;
    }

    .pin-sidebar .pin-sidebar-inner {
        position: static;
    }
}

/* Small mobile (< 480px): Single column cards */
@media screen and (max-width: 480px) {
    .pin-three-column-wrapper {
        padding: 15px 0;
    }

    .pin-three-column-layout .pin-main-content {
        padding: 0 10px;
    }
}

/* ==========================================================================
   Additional Widget Styles for Sidebars
   ========================================================================== */

/* Best Review Item */
.pin-best-review-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pin-border-color);
}

.pin-best-review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pin-best-review-item:first-child {
    padding-top: 0;
}

.pin-best-review-thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 0;
    overflow: visible;
    position: relative;
}

.pin-best-review-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.pin-best-review-info {
    flex: 1;
    min-width: 0;
}

.pin-best-review-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.pin-best-review-title a {
    color: var(--pin-text-color);
    text-decoration: none;
}

.pin-best-review-title a:hover {
    color: var(--pin-primary-color);
}

.pin-best-review-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--pin-text-muted);
}

.pin-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: #ffc107;
    color: #000;
    font-weight: 600;
    border-radius: 3px;
}

.pin-rating-badge i {
    font-size: 10px;
}

/* Recent Posts Widget */
.pin-recent-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pin-border-color);
}

.pin-recent-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pin-recent-item:first-child {
    padding-top: 0;
}

.pin-recent-thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
}

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

.pin-recent-info {
    flex: 1;
    min-width: 0;
}

.pin-recent-title {
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.pin-recent-title a {
    color: var(--pin-text-color);
    text-decoration: none;
}

.pin-recent-title a:hover {
    color: var(--pin-primary-color);
}

.pin-recent-date {
    font-size: 11px;
    color: var(--pin-text-muted);
}

/* Featured Slider Widget */
.pin-featured-slider {
    position: relative;
    overflow: hidden;
}

.pin-featured-slide {
    display: none;
}

.pin-featured-slide.active {
    display: block;
}

.pin-featured-slide-image {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.pin-featured-slide-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.pin-featured-slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 15px 15px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

.pin-featured-category {
    display: inline-block;
    padding: 3px 10px;
    background: var(--pin-primary-color);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 2px;
    margin-bottom: 8px;
}

.pin-featured-slide-title {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.pin-featured-slide-title a {
    color: #fff;
    text-decoration: none;
}

.pin-featured-date {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

/* Featured Slider Navigation */
.pin-featured-slider-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    pointer-events: none;
}

.pin-featured-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transition: var(--pin-transition);
}

.pin-featured-nav-btn:hover {
    background: var(--pin-primary-color);
}

/* Featured Slider Dots */
.pin-featured-slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
}

.pin-featured-dot {
    width: 8px;
    height: 8px;
    background: var(--pin-border-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--pin-transition);
}

.pin-featured-dot.active,
.pin-featured-dot:hover {
    background: var(--pin-primary-color);
}

/* Ad Placeholders */
.pin-ad-300x250 {
    min-height: 250px;
}

.pin-ad-300x600 {
    min-height: 600px;
}

/* No Posts Message */
.pin-no-posts {
    color: var(--pin-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
}

/* ==========================================================================
   Navigation Adjustments (Task 11)
   ========================================================================== */

/* Main Navigation Height - 90px to match target */
.pin-primary-nav {
    min-height: 90px;
}

/* Category Navigation - Red background to match target */
.pin-category-nav {
    background: var(--pin-primary-color);
    border-top: none;
}

.pin-category-list li a {
    color: rgba(255, 255, 255, 0.85);
}

.pin-category-list li a:hover,
.pin-category-list li.current-cat a {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.1);
}

.pin-category-list li a i {
    color: #ffffff;
}

/* Upload/Sign In Button - Green to match target */
.pin-nav-user-btn {
    background: #0fbe7c;
}

.pin-nav-user-btn:hover {
    background: #0da86d;
}

/* ==========================================================================
   Card Stats Colors (Section 2.4)
   ========================================================================== */

/* Like color - green #6ecb0a */
.gridmode-vote-button.gridmode-like-button .count,
.thumbs-rating-up {
    color: var(--pin-like-color);  /* #6ecb0a */
}

/* Dislike color - red #fe6969 */
.gridmode-vote-button.gridmode-dislike-button .count,
.thumbs-rating-down {
    color: var(--pin-dislike-color);  /* #fe6969 */
}

/* ==========================================================================
   Card Overlay Elements (Task 10)
   ========================================================================== */

/* Thumbnail Wrapper - Container for all overlays */
.gridmode-grid-post-thumbnail-wrapper {
    position: relative;
    overflow: visible;  /* Allow badges to protrude beyond card edge */
    border-radius: var(--pin-border-radius) var(--pin-border-radius) 0 0;
}

/* Comment Badge - Top Left (Black background, matching target site) */
.gridmode-grid-post-thumbnail-wrapper .pin-comment-badge {
    position: absolute;
    top: 10px;
    left: 10px;  /* Moved to left side to match target */
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #000000;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    z-index: 15;  /* Higher than category overlay */
}

.gridmode-grid-post-thumbnail-wrapper .pin-comment-badge i {
    font-size: 10px;
}

/* Category Overlay - Top Left on Image (target: #dd3333 red background, NOT transparent!) */
/* P1 Fix: Flag-shaped category badge with triangular cut on right side
   Target effect:
   ┌────────────┐
   │  GALLERY   ▶   ← Right side has triangular cutout (like flag tail)
   └────────────┘
*/
.pin-category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.pin-category-overlay a {
    display: inline-block;
    position: relative;  /* Required for ::after positioning */
    padding: 1px 10px 0;
    margin-right: 10px;  /* Space for the flag triangle */
    background: #dd3333;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: var(--pin-transition);
    line-height: 22px;  /* Match height for proper triangle sizing */
}

/* Flag triangle - creates the pointed right edge */
.pin-category-overlay a::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 10px;  /* Creates right-pointing triangle */
    border-color: transparent transparent transparent #dd3333;
    transition: var(--pin-transition);
}

.pin-category-overlay a:hover {
    background: #c62828;
    color: #ffffff !important;
}

.pin-category-overlay a:hover::after {
    border-color: transparent transparent transparent #c62828;
}

/* ==========================================================================
   Social Share Buttons - Horizontal Color Bars (Target Site Style)
   ========================================================================== */

/* Container - Below thumbnail, clearfix for floated children */
.home-share {
    width: 100%;
    height: auto;
    text-align: center;
    overflow: hidden; /* Clearfix for floated children */
}

/* Share buttons - horizontal color bars */
.home-share a {
    float: left;
    width: 20%;
    height: 22px;
    line-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    text-decoration: none;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

/* Hover effect on card - all buttons become fully visible */
.gridmode-grid-post:hover .home-share a {
    opacity: 1;
}

/* Individual button colors (matching target site) */
.home-share a.fbbutton {
    background-color: #3b5998; /* Facebook blue */
}

.home-share a.twbutton {
    background-color: #000000; /* Twitter/X black */
}

.home-share a.pinbutton {
    background-color: #ca212a; /* Pinterest red */
}

.home-share a.whatsapp {
    background-color: #0dc143; /* WhatsApp green */
}

.home-share a.emailbutton {
    background-color: #00688a; /* Email teal */
}

/* Card Meta - Author and Stats Row (target: border-top #f1f1f1, padding 15px 25px) */
.gridmode-grid-post .pin-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;  /* Updated to match target: 15px 25px */
    margin-top: 10px;
    border-top: 1px solid #f1f1f1;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 14px;
}

.gridmode-grid-post .pin-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Hide avatar to match target (plain text only) */
.gridmode-grid-post .pin-card-author-avatar {
    display: none;
}

.gridmode-grid-post .pin-card-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Author text - matches target: 11px, #94979c (Section 5.4) */
.gridmode-grid-post .pin-card-author-name {
    font-size: 11px;
    color: var(--pin-author-color);  /* #94979c */
    font-weight: 400;
}

.gridmode-grid-post .pin-card-author-name a {
    color: inherit;
    text-decoration: none;
}

.gridmode-grid-post .pin-card-author-name a:hover {
    color: var(--pin-primary-color);  /* #dd3333 */
}

.gridmode-grid-post .pin-card-date {
    font-size: 11px;
    color: var(--pin-text-muted);
}

.gridmode-grid-post .pin-card-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gridmode-grid-post .pin-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.gridmode-grid-post .pin-stat i {
    font-size: 12px;
}

.gridmode-grid-post .pin-stat-views {
    color: var(--pin-text-muted);
}

/* Hide the old gridmode-grid-cats when using overlay */
.gridmode-grid-post-thumbnail-wrapper + .gridmode-grid-post-details .gridmode-grid-cats {
    display: none;
}

/* Hide old post meta when using new pin-card-meta */
.gridmode-grid-post .gridmode-grid-post-meta {
    display: none;
}

/* ==========================================================================
   Hide Legacy GridMode Elements in Pin Style Layout
   ========================================================================== */

/* Hide old widget wrappers that appear in main content area */
.pin-three-column-layout .gridmode-left-right-wrapper,
.pin-three-column-layout .gridmode-featured-posts-area,
.pin-three-column-layout .gridmode-top-widgets-wrapper,
.pin-three-column-layout .gridmode-bottom-widgets-wrapper {
    display: none !important;
}

/* Ensure mobile menu is hidden on desktop */
.pin-mobile-menu {
    display: none !important;
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background: #000;
    z-index: 10000;
}

.pin-mobile-menu-overlay {
    display: none !important;
}

@media screen and (max-width: 1000px) {
    .pin-mobile-menu {
        display: block !important;
        left: -300px;
    }

    .pin-mobile-menu.active {
        left: 0;
    }

    .pin-mobile-menu-overlay {
        display: none !important;
    }

    .pin-mobile-menu-overlay.active {
        display: block !important;
    }
}

/* Hide the old sidebar that might appear */
.pin-three-column-layout .gridmode-sidebar-one-wrapper {
    display: none !important;
}

/* ==========================================================================
   Featured Articles Bar - Full Width Below Navigation
   ========================================================================== */

.pin-featured-bar {
    background: #000;
    padding: 0;
    margin: 0;
}

.pin-featured-bar-inner {
    max-width: 100%;              /* 全宽显示 */
    margin: 0 auto;
    padding: 0 30px;
}

.pin-featured-bar-items {
    display: flex;
    gap: 2px;
    justify-content: center;      /* 居中显示 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pin-featured-bar-items::-webkit-scrollbar {
    display: none;
}

.pin-featured-bar-item {
    flex: 1 1 0;
    min-width: 200px;
    max-width: 280px;             /* 限制最大宽度避免图片过度拉伸 */
}

.pin-featured-bar-link {
    display: block;
    text-decoration: none;
}

.pin-featured-bar-image {
    position: relative;
    height: 165px;
    overflow: visible;  /* Allow badges to protrude */
}

.pin-featured-bar-image img {
    width: 100%;
    height: 165px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pin-featured-bar-item:hover .pin-featured-bar-image img {
    transform: scale(1.05);
}

/* Featured bar badges - inherit from post list card styles */
.pin-featured-bar-image .article-comm,
.pin-featured-bar-image .article-category {
    /* Same positioning as post list cards */
}

.pin-featured-bar-link {
    display: block;
    height: 165px;
    overflow: hidden;  /* Clip image zoom effect */
    position: relative;
}

.pin-featured-bar-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 15px 15px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

/* Old category style removed - now using .article-category class */

.pin-featured-bar-title {
    margin: 0;
    font-size: 14px;  /* Matches target site */
    font-weight: 700;
    line-height: 18px;  /* Matches target site */
    color: #fff;
    padding: 0 20px;
}

.pin-featured-bar-title a {
    color: #fff;
    text-decoration: none;
}

.pin-featured-bar-title a:hover {
    color: #fff;
    opacity: 0.9;
}

/* Responsive Featured Bar */
@media screen and (max-width: 1200px) {
    .pin-featured-bar-item {
        min-width: 250px;
    }
}

@media screen and (max-width: 768px) {
    .pin-featured-bar {
        display: none;
    }
}

/* ==========================================================================
   Post List Card Components - Phase 3 (Pin Theme Clone)
   Based on DevTools analysis of target site
   ========================================================================== */

/* Hide "Recent Posts" header above post list - Pin theme doesn't have this */
.gridmode-posts-header {
    display: none;
}

/* --- 3.1 Comment Badge (article-comm) --- */
/* Black square badge, top-left, height matches category badge */
.article-comm {
    position: absolute;
    top: 0;
    left: -1px;  /* Protrude 1px beyond left edge of card */
    background-color: #000000;
    border-radius: 0;
    margin: 10px 0 0;
    z-index: 20;
    text-align: center;
}

.article-comm a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 1px 8px 0;  /* Match category badge padding for same height */
    min-width: 36px;
    height: 22px;  /* Match category badge line-height */
    line-height: 22px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 400;
    text-decoration: none;
    transition: var(--pin-transition);
}

.article-comm a:hover {
    color: #ffffff;
    opacity: 0.9;
}

.article-comm i {
    font-size: 11px;
}

/* --- 3.2 Category Badge (article-category) --- */
/* Red ribbon badge positioned after comment badge with ~2px gap, matching Pin theme */
.article-category {
    position: absolute;
    top: 0;
    left: -1px;  /* Protrude 1px beyond left edge of card */
    margin: 10px 0 0 42px;  /* 42px from left - matches target site exactly */
    z-index: 15;
    font-size: 11px;
    text-transform: uppercase;
    padding: 1px 10px 0;
    background-color: #dd3333;
    border-radius: 2px 0 0 2px;  /* Slight rounding on left only */
}

.article-category a {
    display: inline-block;
    position: relative;
    padding: 0;
    background-color: transparent;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    line-height: 22px;
    transition: var(--pin-transition);
}

/* Ribbon V-notch - uses <i> element with border trick (matches Pin theme) */
.article-category i {
    float: right;
    border-style: solid;
    border-width: 11px 5px 11px 10px;
    margin: -1px -15px -5px 0;
    height: 1px;
    width: 0;
    border-color: #dd3333 transparent #dd3333 #dd3333;
}

.article-category:hover {
    opacity: 0.9;
}

.article-category:hover i {
    opacity: 0.9;
}

/* --- 3.3 Content Area (small-content) --- */
.small-content {
    padding: 15px 25px 15px;
    background: var(--pin-card-bg);
}

.small-content .an-widget-title {
    margin: 0 0 10px;
}

/* --- 3.3 Post Title (article-title) --- */
/* Pin theme: left-aligned, NOT centered */
.article-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;  /* LEFT aligned - matches Pin theme */
}

.article-title a {
    color: #000000;
    text-decoration: none;
    transition: var(--pin-transition);
}

.article-title a:hover {
    color: var(--pin-primary-color);  /* #dd3333 */
}

/* --- 3.4 Author Info (vcard.author) --- */
.vcard.author {
    display: block;
    font-size: 11px;
    color: #94979c;
    margin-bottom: 5px;
}

.vcard.author .fn {
    color: #94979c;
}

.vcard.author a {
    color: #000000;
    text-decoration: none;
    border-bottom: 1px solid #dd3333;  /* Red underline - key design element */
    transition: var(--pin-transition);
}

.vcard.author a:hover {
    color: var(--pin-primary-color);
}

/* --- 3.5 Excerpt Content (small-content p) --- */
.small-content p {
    margin: 0;
    padding: 10px 0 0;
    font-size: 13px;
    color: #94979c;
    line-height: 22px;
    /* Limit to approximately 5 lines */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 3.6 Footer Meta Bar (home-meta) --- */
.home-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    background-color: #f5f5f5;
    padding: 10px 25px;
}

/* Time display */
.an-display-time {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #94979c;
    font-size: 11px;
    line-height: 22px;
}

.an-display-time i {
    font-size: 11px;
    color: #94979c;
}

/* Views display - Only show icon and number, hide "Views" text (matches Pin theme) */
.an-display-view {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #94979c;
    font-size: 11px;
    line-height: 22px;
}

.an-display-view i {
    font-size: 11px;
    color: #94979c;
}

/* Hide "Views" text - Pin theme only shows icon + number */
.an-display-view span {
    display: none;
}

/* Thumbs rating container */
.home-data {
    margin-left: auto;  /* Push to right side */
}

.thumbs-rating-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Thumbs up - Green */
.thumbs-rating-up {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #6ecb0a;  /* Green color from target */
    font-size: 11px;
}

.thumbs-rating-up i {
    font-size: 11px;
}

/* Thumbs down - Pink/Red */
.thumbs-rating-down {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fe6969;  /* Pink/red color from target */
    font-size: 11px;
}

.thumbs-rating-down i {
    font-size: 11px;
}

/* ==========================================================================
   Additional Responsive Styles - Section 8.2
   ========================================================================== */

/* Tablet (768px - 991px): Cards become 218px wide, 2 columns */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .gridmode-grid-post {
        width: 218px;
        flex: 0 0 218px;
    }
}

/* Mobile (< 480px): Cards at full width, single column */
@media screen and (max-width: 480px) {
    .gridmode-grid-post {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;  /* Full width on mobile */
        margin-left: 0;
    }

    .gridmode-posts-grid {
        margin-left: 0;
        justify-content: center;
        padding: 0 10px;  /* Add horizontal padding for spacing from edges */
    }
}

/* ==========================================================================
   Single Post Page Sidebar - Same Style as Homepage Left Sidebar
   ========================================================================== */

/* Single post page layout: content + sidebar in flex container */
.single .gridmode-content-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--pin-card-gap);
    max-width: 100%;              /* 全宽显示 */
    margin: 0 auto;
    padding: var(--pin-spacing-lg) 30px;
}

/* Main content area in single post */
.single .gridmode-main-wrapper {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - var(--pin-sidebar-width) - var(--pin-card-gap));
}

/* Single post sidebar - positioned as right sidebar */
.pin-sidebar-single {
    flex: 0 0 var(--pin-sidebar-width);
    width: var(--pin-sidebar-width);
    background: var(--pin-card-bg);
}

.pin-sidebar-single .pin-sidebar-inner {
    position: sticky;
    top: calc(var(--pin-header-height) + var(--pin-spacing-lg));
}

body.admin-bar .pin-sidebar-single .pin-sidebar-inner {
    top: calc(var(--pin-header-height) + 32px + var(--pin-spacing-lg));
}

/* Responsive: Tablet */
@media screen and (max-width: 1200px) {
    .single .gridmode-content-wrapper {
        flex-wrap: nowrap;
    }

    .single .gridmode-main-wrapper {
        max-width: calc(100% - 300px - var(--pin-card-gap));
    }

    .pin-sidebar-single {
        flex: 0 0 300px;
        width: 300px;
    }
}

/* Responsive: Mobile */
@media screen and (max-width: 768px) {
    .single .gridmode-content-wrapper,
    .page .gridmode-content-wrapper {
        flex-wrap: wrap;
        padding: 15px 10px;  /* Reduce padding on mobile */
        gap: 0;  /* Remove gap on mobile */
        justify-content: flex-start;  /* Override space-between */
    }

    .single .gridmode-main-wrapper,
    .page .gridmode-main-wrapper {
        flex: 0 0 100%;  /* Force full width */
        width: 100%;
        max-width: 100%;
    }

    .pin-sidebar-single {
        flex: 0 0 100%;
        width: 100%;
        order: 2;
        padding: 0;
        margin-top: var(--pin-spacing-lg);
    }

    .pin-sidebar-single .pin-sidebar-inner {
        position: static;
    }
}

/* Responsive: Small Mobile */
@media screen and (max-width: 480px) {
    .single .gridmode-content-wrapper,
    .page .gridmode-content-wrapper {
        padding: 10px 5px;  /* Minimal padding on small screens */
    }

    /* Reduce inner box padding on mobile */
    .single .gridmode-box-inside,
    .page .gridmode-box-inside {
        padding: 10px;  /* Reduce from 20px to 10px */
    }
}

/* ==========================================================================
   Widget Featured Item Styles (First Post Highlight)
   ========================================================================== */

/* Featured Item - First post in Most Liked / Best Reviews */
.pin-widget-featured-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--pin-border-color);
}

.pin-widget-featured-thumb {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
    overflow: visible;  /* Allow badges to overflow like post cards */
}

.pin-widget-featured-thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16/10;
}

.pin-widget-featured-thumb > a {
    display: block;
}

/* Category badge on featured item */
.pin-widget-featured-category {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--pin-primary-color);
    z-index: 2;
}

/* Featured item info section */
.pin-widget-featured-info {
    position: relative;
}

.pin-widget-featured-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    padding-right: 45px;  /* Space for rating badge */
}

.pin-widget-featured-title a {
    color: var(--pin-text-color);
    text-decoration: none;
}

.pin-widget-featured-title a:hover {
    color: var(--pin-primary-color);
}

/* Rating badge - positioned on the right */
.pin-widget-featured-rating {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    background: var(--pin-primary-color);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

/* Stats row for Most Liked */
.pin-widget-featured-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--pin-text-muted);
}

/* Meta row for Best Reviews (author) */
.pin-widget-featured-meta {
    font-size: 12px;
    color: var(--pin-text-muted);
}

.pin-widget-featured-author a {
    color: var(--pin-text-color);
    text-decoration: none;
}

.pin-widget-featured-author a:hover {
    color: var(--pin-primary-color);
}

/* ==========================================================================
   Best Review List Item Styles (Non-featured items)
   ========================================================================== */

.pin-best-review-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pin-border-color);
}

.pin-best-review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pin-best-review-thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    position: relative;
}

.pin-best-review-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pin-best-review-info {
    flex: 1;
    min-width: 0;
}

.pin-best-review-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.pin-best-review-title a {
    color: var(--pin-text-color);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pin-best-review-title a:hover {
    color: var(--pin-primary-color);
}

.pin-best-review-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--pin-text-muted);
}

.pin-best-review-rating {
    color: var(--pin-primary-color);
    font-weight: 600;
}

.pin-best-review-rating i {
    margin-right: 2px;
}

.pin-best-review-author a {
    color: var(--pin-text-muted);
    text-decoration: none;
}

.pin-best-review-author a:hover {
    color: var(--pin-primary-color);
}