/* * GridMode Vote Button Styles * Aligned with "Project Nova" design system from the design spec. *//* 1. CSS Variables for Theming */:root { --vote-icon-default: #A0A0A0; --vote-icon-hover: #C0C0C0; --vote-text-dark: #FFFFFF; --vote-text-light: #333333; --vote-bg-hover: rgba(255, 255, 255, 0.1); --vote-border-default: #505050; --like-active-icon: #28A745; --like-active-bg: rgba(40, 167, 69, 0.2); --dislike-active-icon: #DC3545; --dislike-active-bg: rgba(220, 53, 69, 0.2); --disabled-color: #707070; --disabled-opacity: 0.6; --approval-high: #28A745; --approval-medium: #FFC107; --approval-low: #DC3545; --approval-new: #A0A0A0; --transition-speed: 0.15s ease-in-out;}/* Assuming a dark mode body class for simplicity */body.dark-mode .gridmode-vote__button { color: var(--vote-text-dark);}body:not(.dark-mode) .gridmode-vote__button { color: var(--vote-text-light);}/* 2. Vote Button General Styles */.gridmode-vote { display: flex; gap: 12px; align-items: center; margin: 20px 0;}.gridmode-vote__button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--vote-border-default); border-radius: 20px; /* Rounded shape */ background-color: transparent; cursor: pointer; transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed), border-color var(--transition-speed); font-size: 14px; line-height: 1; color: var(--vote-icon-default); /* Default icon and text color */}.gridmode-vote__icon { font-size: 1.2em;}.gridmode-vote__count { font-weight: 600;}/* 3. Button States *//* Hover State */.gridmode-vote__button:not(:disabled):hover { background-color: var(--vote-bg-hover); color: var(--vote-icon-hover); transform: scale(1.05);}/* Active State - Like */.gridmode-vote__button--like.is_active { background-color: var(--like-active-bg); color: var(--like-active-icon); border-color: var(--like-active-icon);}/* Active State - Dislike */.gridmode-vote__button--dislike.is_active { background-color: var(--dislike-active-bg); color: var(--dislike-active-icon); border-color: var(--dislike-active-icon);}/* Pulse animation on click */.gridmode-vote__button:active { transform: scale(1.1);}/* Disabled State */.gridmode-vote__button:disabled { color: var(--disabled-color); opacity: var(--disabled-opacity); cursor: not-allowed; border-color: var(--disabled-color);}.gridmode-vote__button:disabled:hover { background-color: transparent; transform: none;}/* 4. Approval Rate Styles */.gridmode-approval-rate-wrapper { margin: 20px 0; font-size: 1.1em; font-weight: bold;}.gridmode-approval-rate { display: inline-block; padding: 4px 8px; border-radius: 4px; cursor: help; transition: color var(--transition-speed), background-color var(--transition-speed);}.gridmode-approval-rate--green .gridmode-approval-rate__percentage { color: var(--approval-high);}.gridmode-approval-rate--orange .gridmode-approval-rate__percentage { color: var(--approval-medium);}.gridmode-approval-rate--red .gridmode-approval-rate__percentage { color: var(--approval-low);}.gridmode-approval-rate--new .gridmode-approval-rate__text { color: var(--approval-new);}/* 5. Tooltip Styles (Basic) *//* For more advanced tooltips, a library might be better, but this covers the spec. */.gridmode-vote[title],.gridmode-approval-rate[title] { position: relative;}/* Note: Custom tooltip styling is complex and often requires JS. The default browser tooltip will be used based on the `title` attribute, which is consistent with the PHP implementation. *//** * Topics Feature Styles * * Styling for topic archives, single topic pages, and topic cards * * @package GridMode WordPress Theme * @subpackage Topics * @since 1.0.0 *//* ========================================================================== Topic Archive Styles ========================================================================== */.gridmode-topics-archive-header { margin-bottom: 30px; padding: 30px; background: #f9f9f9; border-radius: 4px;}.gridmode-topics-archive-header .page-title { font-size: 32px; margin: 0 0 15px 0; color: #333;}.gridmode-topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; margin-bottom: 40px; align-items: start; /* Fix alignment - ensure first card aligns to top */}/* Fix clearfix pseudo-elements interfering with grid layout */.gridmode-topics-grid::before,.gridmode-topics-grid::after { display: none !important; /* Prevent clearfix from creating grid items */}@media (max-width: 768px) { .gridmode-topics-grid { grid-template-columns: 1fr; gap: 20px; }}/* ========================================================================== Topic Card Styles ========================================================================== */.gridmode-topic-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;}.gridmode-topic-card:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);}.gridmode-topic-card-inside { display: flex; flex-direction: column; height: 100%; position: relative; /* For absolute positioning of badge */}/* Topic cards now use theme's standard gridmode_media_content_grid() function *//* This provides consistent thumbnail display and hover sharing buttons *//* ========================================================================== Topic Badge - Distinguishes topics from regular posts ========================================================================== */.gridmode-topic-badge { position: absolute; top: 12px; left: 12px; z-index: 10; display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 4px; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4); transition: all 0.3s ease;}.gridmode-topic-badge i { font-size: 12px;}.gridmode-topic-card:hover .gridmode-topic-badge { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);}/* Alternative badge styles (commented out - can be swapped in) *//* Badge Style 2: Solid color.gridmode-topic-badge { background: #667eea;}*//* Badge Style 3: With border.gridmode-topic-badge { background: rgba(255, 255, 255, 0.95); color: #667eea; border: 2px solid #667eea;}*//* Badge Style 4: Ribbon style (requires different HTML).gridmode-topic-badge { padding: 8px 20px 8px 12px; border-radius: 0; clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);}*/.gridmode-topic-card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column;}/* Categories now use theme's standard gridmode-grid-post-categories class *//* This ensures consistent styling with posts (including "Uncategorized" label) */.gridmode-topic-card-title { font-size: 20px; line-height: 1.4; margin: 0 0 15px 0;}.gridmode-topic-card-title a { color: #333; text-decoration: none; transition: color 0.2s ease;}.gridmode-topic-card-title a:hover { color: #007bff;}.gridmode-topic-card-excerpt { color: #666; font-size: 14px; line-height: 1.6; margin-bottom: 15px; flex-grow: 1;}.gridmode-topic-card-meta { display: flex; flex-wrap: wrap; gap: 15px; font-size: 13px; color: #777; margin-bottom: 15px; padding-top: 15px; border-top: 1px solid #eee;}.gridmode-topic-card-meta span { display: flex; align-items: center; gap: 5px;}.gridmode-topic-card-meta i { color: #999;}.gridmode-topic-card-button { margin-top: auto;}.gridmode-topic-view-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #007bff; color: #fff; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: 600; transition: background 0.2s ease;}.gridmode-topic-view-button:hover { background: #0056b3; color: #fff;}.gridmode-topic-view-button i { transition: transform 0.2s ease;}.gridmode-topic-view-button:hover i { transform: translateX(3px);}/* ========================================================================== Single Topic Page Styles ========================================================================== */.gridmode-topic-single { margin-bottom: 40px;}.gridmode-topic-header { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 2px solid #eee;}.gridmode-topic-categories { margin-bottom: 15px;}.gridmode-topic-categories a { display: inline-block; padding: 6px 15px; background: #007bff; color: #fff; border-radius: 4px; font-size: 13px; text-decoration: none; margin-right: 8px; transition: background 0.2s ease;}.gridmode-topic-categories a:hover { background: #0056b3;}.gridmode-topic-title { font-size: 36px; line-height: 1.3; margin: 15px 0; color: #333;}.gridmode-topic-excerpt { font-size: 18px; line-height: 1.6; color: #666; margin: 20px 0;}.gridmode-topic-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; color: #777; margin-top: 20px;}.gridmode-topic-meta span { display: flex; align-items: center; gap: 6px;}.gridmode-topic-meta i { color: #999;}.gridmode-topic-thumbnail { margin: 30px 0; border-radius: 8px; overflow: hidden;}.gridmode-topic-thumbnail img { width: 100%; height: auto; display: block;}.gridmode-topic-content { margin: 30px 0; font-size: 16px; line-height: 1.8; color: #444;}/* Topic Posts Section */.gridmode-topic-posts-section { margin-top: 50px; padding-top: 40px; border-top: 3px solid #007bff;}.gridmode-topic-posts-title { font-size: 28px; margin-bottom: 30px; color: #333;}/* Topic posts content wrapper - for masonry layout */.gridmode-topic-posts-content { margin-top: 20px;}/* Topic posts grid - uses same masonry layout as homepage */.gridmode-topic-posts-grid { /* Position relative for masonry positioning */ position: relative; /* Height will be set by masonry-custom.js */}/* Individual topic post cards inherit homepage grid post styles *//* No custom overrides needed - use theme's existing grid post styles */.gridmode-topic-no-posts { padding: 40px; text-align: center; background: #f9f9f9; border-radius: 8px; color: #666;}/* Topic Navigation */.gridmode-topic-navigation { margin: 40px 0; padding: 30px 0; border-top: 1px solid #eee;}.gridmode-topic-nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 30px;}@media (max-width: 768px) { .gridmode-topic-nav-links { grid-template-columns: 1fr; gap: 20px; }}.gridmode-topic-nav-previous,.gridmode-topic-nav-next { padding: 20px; background: #f9f9f9; border-radius: 6px; transition: background 0.2s ease;}.gridmode-topic-nav-previous:hover,.gridmode-topic-nav-next:hover { background: #f0f0f0;}.gridmode-topic-nav-next { text-align: right;}.gridmode-topic-nav-previous a,.gridmode-topic-nav-next a { text-decoration: none; color: #333; display: block;}.gridmode-topic-nav-subtitle { display: block; font-size: 12px; color: #999; text-transform: uppercase; margin-bottom: 8px;}.gridmode-topic-nav-title { display: block; font-size: 16px; font-weight: 600; color: #007bff;}/* ========================================================================== Post Topics Section (on single post pages) ========================================================================== */.gridmode-post-topics-section { margin-top: 40px; padding: 30px; background: #f9f9f9; border-radius: 8px;}.gridmode-post-topics-title { font-size: 20px; margin: 0 0 20px 0; color: #333;}.gridmode-post-topics-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;}@media (max-width: 768px) { .gridmode-post-topics-list { grid-template-columns: 1fr; }}.gridmode-post-topics-list .gridmode-topic-card { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);}/* Compact Topic Card (used in sidebars and posts) */.gridmode-topic-card-compact .gridmode-topic-card-thumbnail img { height: 150px;}.gridmode-topic-card-compact .gridmode-topic-card-content { padding: 15px;}.gridmode-topic-card-compact .gridmode-topic-card-title { font-size: 16px;}.gridmode-topic-card-compact .gridmode-topic-card-excerpt { font-size: 13px;}.gridmode-topic-card-compact .gridmode-topic-card-meta { font-size: 12px; gap: 10px;}/* ========================================================================== Responsive Adjustments ========================================================================== */@media (max-width: 992px) { .gridmode-topic-title { font-size: 28px; } .gridmode-topic-excerpt { font-size: 16px; } .gridmode-topic-posts-title { font-size: 24px; }}@media (max-width: 576px) { .gridmode-topic-title { font-size: 24px; } .gridmode-topic-meta { gap: 10px; font-size: 12px; } .gridmode-topics-archive-header { padding: 20px; } .gridmode-topics-archive-header .page-title { font-size: 24px; }}/* ========================================================================== Integration with Existing Theme Styles ========================================================================== *//* Ensure topic cards work with existing masonry layout if needed */.gridmode-posts-grid .gridmode-topic-card { break-inside: avoid;}/* Match existing GridMode theme color scheme */.gridmode-topic-card-approval span { color: #28a745;}.gridmode-topic-card-approval.low-approval span { color: #dc3545;}/** * Multiple Featured Images Slider Styles * * Smooth, modern slider with touch/swipe support. * * @package GridMode WordPress Theme *//* ========================================================================== Slider Container ========================================================================== */.gridmode-featured-images-slider { position: relative; width: 100%; overflow: hidden; background: transparent; border-radius: 0; user-select: none;}/* Single post page slider - constrained height (reduced to ~50% of original) */.gridmode-post-thumbnail-single .gridmode-featured-images-slider { max-height: 300px; display: flex; align-items: center; justify-content: center;}/* ========================================================================== Single Post Gallery Mode (Side-by-side images with carousel) ========================================================================== */.gridmode-featured-images-slider.gridmode-slider-gallery-mode { max-height: none; overflow: visible;}.gridmode-slider-gallery-mode .gridmode-slider-track { display: flex; gap: 0; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: default; align-items: center;}.gridmode-slider-gallery-mode .gridmode-slider-image { flex: 0 0 auto !important; width: auto !important; height: auto; max-height: 400px; margin: 0;}.gridmode-slider-gallery-mode .gridmode-slider-image img { object-fit: contain; width: auto; height: auto; max-height: 400px; max-width: 100%; border-radius: 0; box-shadow: none;}/* Gallery navigation buttons - semi-transparent overlay */.gridmode-slider-gallery-mode .gridmode-slider-nav { position: absolute; top: 0; bottom: 0; width: 60px; height: 100%; border-radius: 0; background: rgba(0, 0, 0, 0.15); z-index: 20; transform: none; transition: background 0.3s ease;}.gridmode-slider-gallery-mode .gridmode-slider-nav:hover { background: rgba(0, 0, 0, 0.35); transform: none;}.gridmode-slider-gallery-mode .gridmode-slider-nav:active { background: rgba(0, 0, 0, 0.45); transform: none;}.gridmode-slider-gallery-mode .gridmode-slider-nav svg { width: 28px; height: 28px; fill: rgba(255, 255, 255, 0.9); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));}.gridmode-slider-gallery-mode .gridmode-slider-prev { left: 0;}.gridmode-slider-gallery-mode .gridmode-slider-next { right: 0;}/* Hide indicators and counter in gallery mode */.gridmode-slider-gallery-mode .gridmode-slider-indicators,.gridmode-slider-gallery-mode .gridmode-slider-counter { display: none;}/* Gallery wrapper for centering */.gridmode-post-thumbnail-single.gridmode-gallery-wrapper { position: relative; padding: 0; margin-bottom: 20px;}.gridmode-post-thumbnail-single.gridmode-gallery-wrapper .gridmode-featured-images-slider { overflow: hidden;}/* Gallery viewport */.gridmode-slider-gallery-mode .gridmode-slider-viewport { overflow: hidden; width: 100%;}/* Responsive adjustments for gallery mode */@media (max-width: 768px) { .gridmode-slider-gallery-mode .gridmode-slider-nav { width: 45px; } .gridmode-slider-gallery-mode .gridmode-slider-nav svg { width: 24px; height: 24px; } .gridmode-slider-gallery-mode .gridmode-slider-image { max-height: 280px; /* On small screens, each image fills the viewport width */ flex: 0 0 calc(100vw - 90px) !important; width: calc(100vw - 90px) !important; } .gridmode-slider-gallery-mode .gridmode-slider-image img { max-height: 280px; max-width: 100%; width: 100%; object-fit: contain; }}/* ========================================================================== Slider Track and Images ========================================================================== */.gridmode-slider-track { display: flex; height: 100%; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: grab; will-change: transform;}/* Single post page - track adjustments */.gridmode-post-thumbnail-single .gridmode-slider-track { width: 100%; align-items: center;}.gridmode-slider-track:active { cursor: grabbing;}.gridmode-slider-image { flex: 0 0 100%; width: 100%; height: 100%; position: relative;}/* Single post page - image container */.gridmode-post-thumbnail-single .gridmode-slider-image { display: flex; align-items: center; justify-content: center; height: auto;}.gridmode-slider-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}/* Single post page - contain images to avoid black bars */.gridmode-post-thumbnail-single .gridmode-slider-image img { object-fit: contain; max-height: 300px; width: auto; max-width: 100%; margin: 0 auto;}/* Override pin-style.css height:auto rule for slider images */.gridmode-grid-post .gridmode-grid-post-thumbnail .gridmode-slider-image img { height: 100% !important; aspect-ratio: unset !important;}.gridmode-slider-image a { display: block; width: 100%; height: 100%;}/* ========================================================================== Navigation Buttons ========================================================================== */.gridmode-slider-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 10; backdrop-filter: blur(4px);}.gridmode-slider-nav:hover { background: rgba(0, 0, 0, 0.8); transform: translateY(-50%) scale(1.1);}.gridmode-slider-nav:active { transform: translateY(-50%) scale(0.95);}.gridmode-slider-nav.disabled { opacity: 0.3; cursor: not-allowed;}.gridmode-slider-prev { left: 10px;}.gridmode-slider-next { right: 10px;}.gridmode-slider-nav svg { width: 20px; height: 20px; fill: currentColor;}/* Hide navigation on single image */.gridmode-featured-images-slider[data-count="1"] .gridmode-slider-nav { display: none;}/* ========================================================================== Indicators (Dots) ========================================================================== */.gridmode-slider-indicators { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; padding: 6px 12px; background: rgba(0, 0, 0, 0.3); border-radius: 20px; backdrop-filter: blur(4px);}.gridmode-slider-indicator { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); border: none; padding: 0; cursor: pointer; transition: all 0.2s ease;}.gridmode-slider-indicator:hover { background: rgba(255, 255, 255, 0.8); transform: scale(1.2);}.gridmode-slider-indicator.active { background: #fff; width: 24px; border-radius: 4px;}/* Hide indicators on single image */.gridmode-featured-images-slider[data-count="1"] .gridmode-slider-indicators { display: none;}/* ========================================================================== Image Counter Badge ========================================================================== */.gridmode-slider-counter { position: absolute; top: 12px; right: 12px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; z-index: 10; backdrop-filter: blur(4px); display: flex; align-items: center; gap: 4px;}.gridmode-slider-counter svg { width: 14px; height: 14px; fill: currentColor;}/* Hide counter on single image */.gridmode-featured-images-slider[data-count="1"] .gridmode-slider-counter { display: none;}/* ========================================================================== Loading State ========================================================================== */.gridmode-slider-image.loading { background: #f0f0f0; position: relative;}.gridmode-slider-image.loading::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 4px solid #ddd; border-top-color: #666; border-radius: 50%; animation: gridmode-spinner 0.8s linear infinite;}@keyframes gridmode-spinner { to { transform: translate(-50%, -50%) rotate(360deg); }}/* ========================================================================== Responsive Adjustments ========================================================================== */@media (max-width: 768px) { .gridmode-slider-nav { width: 36px; height: 36px; } .gridmode-slider-nav svg { width: 18px; height: 18px; } .gridmode-slider-prev { left: 6px; } .gridmode-slider-next { right: 6px; } .gridmode-slider-indicators { bottom: 8px; gap: 6px; padding: 4px 8px; } .gridmode-slider-indicator { width: 6px; height: 6px; } .gridmode-slider-indicator.active { width: 18px; } .gridmode-slider-counter { top: 8px; right: 8px; font-size: 11px; padding: 3px 8px; }}/* ========================================================================== Accessibility ========================================================================== */.gridmode-slider-nav:focus,.gridmode-slider-indicator:focus { outline: 2px solid #fff; outline-offset: 2px;}/* Screen reader only text */.gridmode-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;}/* ========================================================================== Integration with Post Grid ========================================================================== */.gridmode-grid-post-thumbnail .gridmode-featured-images-slider { aspect-ratio: 4 / 3; height: auto;}/* Ensure sharing buttons overlay works with slider */.gridmode-grid-post-thumbnail { position: relative;}.gridmode-grid-post-thumbnail .gridmode-post-share-buttons { z-index: 15; /* Above slider controls */}/* ========================================================================== Touch Optimization ========================================================================== */@media (hover: none) and (pointer: coarse) { /* Increase touch target size on touch devices */ .gridmode-slider-nav { width: 44px; height: 44px; } .gridmode-slider-indicator { width: 10px; height: 10px; } .gridmode-slider-indicator.active { width: 30px; }}/* ========================================================================== YouTube Embed Styles ========================================================================== *//* Responsive 16:9 aspect ratio container */.gridmode-youtube-embed { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; background: #000; border-radius: 0;}.gridmode-youtube-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}/* YouTube Thumbnail Container */.gridmode-youtube-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;}.gridmode-youtube-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block;}/* Play Button - Centered, YouTube-style red button */.gridmode-youtube-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; padding: 0; /* Override generic button padding from pin-style.css */ background: rgba(255, 0, 0, 0.9); border: none; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); z-index: 10;}.gridmode-youtube-play-btn:hover { background: rgba(255, 0, 0, 1); transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);}.gridmode-youtube-play-btn:active { transform: translate(-50%, -50%) scale(0.95);}.gridmode-youtube-play-btn svg { width: 28px; height: 28px; color: white; margin-left: 3px; /* Optical alignment for play icon */}/* Hover overlay effect */.gridmode-youtube-thumbnail::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0); transition: background 0.3s ease; pointer-events: none;}.gridmode-youtube-thumbnail:hover::before { background: rgba(0, 0, 0, 0.1);}/* When video is playing (iframe loaded) */.gridmode-youtube-embed.playing .gridmode-youtube-thumbnail { display: none;}/* Grid view specific styles */.gridmode-youtube-grid { max-width: 100%;}.gridmode-grid-post-thumbnail .gridmode-youtube-embed { aspect-ratio: 4 / 3; padding-bottom: 0; height: auto;}/* Single post view specific styles */.gridmode-youtube-single { max-width: 800px; margin: 0 auto 20px;}/* Mobile responsive */@media (max-width: 768px) { .gridmode-youtube-single { max-width: 100%; } .gridmode-grid-post-thumbnail .gridmode-youtube-embed { border-radius: 2px; } .gridmode-youtube-play-btn { width: 40px; height: 40px; padding: 0; /* Ensure no padding on mobile */ /* Reset centering from base styles */ top: auto; left: auto; transform: none; /* Position at bottom-right on mobile */ bottom: 8px; right: 8px; border-radius: 6px; } .gridmode-youtube-play-btn svg { width: 20px; height: 20px; margin-left: 2px; /* Optical alignment for play icon */ }}/* Loading state for YouTube embeds */.gridmode-youtube-embed.loading { background: #f0f0f0;}.gridmode-youtube-embed.loading::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 4px solid #ddd; border-top-color: #666; border-radius: 50%; animation: gridmode-spinner 0.8s linear infinite;}/**
 * Legal Pages Styling
 *
 * Styles for Privacy Policy and Terms of Service pages.
 *
 * @package GridMode WordPress Theme
 * @since 1.0.0
 */

/* Legal Page Container */
.legal-page {
 max-width: 900px;
 margin: 0 auto;
}

.legal-page .entry-content-wrapper {
 padding: 30px 40px;
}

/* Legal Header */
.legal-header {
 text-align: center;
 margin-bottom: 40px;
 padding-bottom: 30px;
 border-bottom: 2px solid #e0e0e0;
}

.legal-title {
 font-size: 2.2rem;
 font-weight: 700;
 color: #1a1a1a;
 margin: 0;
 line-height: 1.3;
}

/* Legal Content */
.legal-content {
 font-size: 1rem;
 line-height: 1.8;
 color: #333;
}

.legal-updated {
 background: #f8f9fa;
 padding: 12px 20px;
 border-radius: 6px;
 font-size: 0.95rem;
 color: #555;
 margin-bottom: 35px;
 border-left: 4px solid #007bff;
}

/* Legal Sections */
.legal-section {
 margin-bottom: 40px;
 padding-bottom: 30px;
 border-bottom: 1px solid #eee;
}

.legal-section:last-child {
 border-bottom: none;
 padding-bottom: 0;
}

.legal-section h2 {
 font-size: 1.5rem;
 font-weight: 600;
 color: #1a1a1a;
 margin: 0 0 20px 0;
 padding-bottom: 10px;
 border-bottom: 2px solid #007bff;
 display: inline-block;
}

.legal-section h3 {
 font-size: 1.2rem;
 font-weight: 600;
 color: #333;
 margin: 25px 0 15px 0;
}

.legal-section h4 {
 font-size: 1.1rem;
 font-weight: 600;
 color: #444;
 margin: 20px 0 12px 0;
}

/* Paragraphs */
.legal-section p {
 margin: 0 0 15px 0;
 text-align: justify;
}

/* Lists */
.legal-section ul,
.legal-section ol {
 margin: 15px 0 20px 0;
 padding-left: 25px;
}

.legal-section li {
 margin-bottom: 10px;
 line-height: 1.7;
}

.legal-section li strong {
 color: #1a1a1a;
}

.legal-section ul ul,
.legal-section ol ol,
.legal-section ul ol,
.legal-section ol ul {
 margin: 10px 0;
}

/* Links */
.legal-content a {
 color: #007bff;
 text-decoration: none;
 border-bottom: 1px solid transparent;
 transition: all 0.2s ease;
}

.legal-content a:hover {
 color: #0056b3;
 border-bottom-color: #0056b3;
}

/* Emphasis */
.legal-section strong {
 font-weight: 600;
}

/* Warning/Important Text */
.legal-section p:has(strong:first-child) {
 background: #fff3cd;
 padding: 15px 20px;
 border-radius: 6px;
 border-left: 4px solid #ffc107;
}

/* Uppercase text (disclaimers) */
.legal-section p {
 text-transform: none;
}

/* Table of Contents styling (if needed) */
.legal-toc {
 background: #f8f9fa;
 padding: 25px 30px;
 border-radius: 8px;
 margin-bottom: 35px;
}

.legal-toc h3 {
 font-size: 1.1rem;
 margin: 0 0 15px 0;
 color: #1a1a1a;
}

.legal-toc ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.legal-toc li {
 margin-bottom: 8px;
}

.legal-toc a {
 color: #007bff;
 text-decoration: none;
}

.legal-toc a:hover {
 text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
 .legal-page .entry-content-wrapper {
 padding: 20px 20px;
 }

 .legal-header {
 margin-bottom: 30px;
 padding-bottom: 20px;
 }

 .legal-title {
 font-size: 1.8rem;
 }

 .legal-section h2 {
 font-size: 1.3rem;
 }

 .legal-section h3 {
 font-size: 1.1rem;
 }

 .legal-section p {
 text-align: left;
 }

 .legal-content {
 font-size: 0.95rem;
 }

 .legal-section ul,
 .legal-section ol {
 padding-left: 20px;
 }
}

@media (max-width: 480px) {
 .legal-page .entry-content-wrapper {
 padding: 15px 15px;
 }

 .legal-title {
 font-size: 1.5rem;
 }

 .legal-section {
 margin-bottom: 30px;
 padding-bottom: 20px;
 }

 .legal-section h2 {
 font-size: 1.2rem;
 }

 .legal-updated {
 padding: 10px 15px;
 font-size: 0.9rem;
 }
}

/* Print Styles */
@media print {
 .legal-page {
 max-width: 100%;
 }

 .legal-page .entry-content-wrapper {
 padding: 0;
 }

 .legal-header {
 border-bottom-color: #000;
 }

 .legal-section h2 {
 border-bottom-color: #000;
 }

 .legal-content a {
 color: #000;
 text-decoration: underline;
 }

 .legal-content a::after {
 content: " (" attr(href) ")";
 font-size: 0.8em;
 }
}
/**
 * Search Autocomplete Styles
 *
 * Styles for the AJAX-powered search suggestions dropdown.
 *
 * @package GridMode WordPress Theme
 * @since 1.0.0
 */

/* Container */
.search-autocomplete-container {
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background: #fff;
 border-radius: 8px;
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
 z-index: 10002;
 max-height: 400px;
 overflow-y: auto;
 opacity: 0;
 visibility: hidden;
 transform: translateY(-10px);
 transition: all 0.2s ease;
 margin-top: 8px;
}

.search-autocomplete-container.active {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}

/* For pin-search overlay positioning */
.pin-search-form {
 position: relative;
}

.pin-search-form .search-autocomplete-container {
 left: 0;
 right: auto;
 width: 100%;
 min-width: 400px;
}

/* Group headers */
.search-autocomplete-group {
 padding: 8px 0;
}

.search-autocomplete-group:not(:first-child) {
 border-top: 1px solid #eee;
}

.search-autocomplete-group-label {
 padding: 8px 16px 4px;
 font-size: 11px;
 font-weight: 600;
 text-transform: uppercase;
 color: #888;
 letter-spacing: 0.5px;
}

/* Individual items */
.search-autocomplete-item {
 display: flex;
 align-items: center;
 padding: 10px 16px;
 cursor: pointer;
 transition: background-color 0.15s ease;
 gap: 12px;
}

.search-autocomplete-item:hover,
.search-autocomplete-item.selected {
 background-color: #f5f5f5;
}

/* Thumbnail */
.search-autocomplete-thumb {
 flex-shrink: 0;
 width: 48px;
 height: 48px;
 border-radius: 6px;
 overflow: hidden;
 background: #f0f0f0;
}

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

.search-autocomplete-thumb-placeholder,
.search-autocomplete-thumb-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 color: #aaa;
 font-size: 18px;
}

.search-autocomplete-item-category .search-autocomplete-thumb-icon {
 background: #e8f4fd;
 color: #1976d2;
}

.search-autocomplete-item-topic .search-autocomplete-thumb-icon {
 background: #fef3e2;
 color: #f57c00;
}

/* Content */
.search-autocomplete-content {
 flex: 1;
 min-width: 0;
}

.search-autocomplete-title {
 font-size: 14px;
 font-weight: 500;
 color: #333;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 1.4;
}

.search-autocomplete-title mark {
 background: #fff3cd;
 color: #856404;
 padding: 0 2px;
 border-radius: 2px;
}

.search-autocomplete-meta {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-top: 2px;
 font-size: 12px;
 color: #888;
}

.search-autocomplete-category {
 color: #dd3333;
 font-weight: 500;
}

.search-autocomplete-type {
 background: #f0f0f0;
 padding: 2px 6px;
 border-radius: 3px;
 font-size: 10px;
 text-transform: uppercase;
 font-weight: 600;
}

/* Footer - View all link */
.search-autocomplete-footer {
 border-top: 1px solid #eee;
 padding: 12px 16px;
 background: #fafafa;
 border-radius: 0 0 8px 8px;
}

.search-autocomplete-view-all {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 color: #dd3333;
 font-size: 13px;
 font-weight: 500;
 text-decoration: none;
 transition: color 0.15s ease;
}

.search-autocomplete-view-all:hover {
 color: #b71c1c;
}

/* Loading state */
.search-autocomplete-loading {
 padding: 24px 16px;
 text-align: center;
 color: #888;
 font-size: 14px;
}

.search-autocomplete-loading i {
 margin-right: 8px;
}

/* Empty state */
.search-autocomplete-empty {
 padding: 24px 16px;
 text-align: center;
 color: #888;
 font-size: 14px;
}

.search-autocomplete-empty i {
 display: block;
 font-size: 24px;
 margin-bottom: 8px;
 opacity: 0.5;
}

/* Scrollbar styling */
.search-autocomplete-container::-webkit-scrollbar {
 width: 6px;
}

.search-autocomplete-container::-webkit-scrollbar-track {
 background: #f0f0f0;
 border-radius: 3px;
}

.search-autocomplete-container::-webkit-scrollbar-thumb {
 background: #ccc;
 border-radius: 3px;
}

.search-autocomplete-container::-webkit-scrollbar-thumb:hover {
 background: #aaa;
}

/* Responsive adjustments */
@media (max-width: 768px) {
 .pin-search-form .search-autocomplete-container {
 min-width: 280px;
 max-height: 350px;
 }

 .search-autocomplete-thumb {
 width: 40px;
 height: 40px;
 }

 .search-autocomplete-title {
 font-size: 13px;
 }

 .search-autocomplete-meta {
 font-size: 11px;
 }
}

/* Dark overlay background adjustment */
.pin-search-overlay .search-autocomplete-container {
 box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}
/**
 * Login Modal Styles
 *
 * Popup modal for social login integration.
 *
 * @package GridMode WordPress Theme
 * @since 1.0.0
 */

/* Modal Container */
.pin-login-modal {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 100000;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
}

/* Overlay */
.pin-login-modal-overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.7);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
}

/* Content Container */
.pin-login-modal-content {
 position: relative;
 background: #fff;
 border-radius: 16px;
 padding: 40px 32px 32px;
 max-width: 420px;
 width: 100%;
 box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
 animation: pinLoginModalSlideIn 0.3s ease-out;
}

@keyframes pinLoginModalSlideIn {
 from {
 opacity: 0;
 transform: translateY(-30px) scale(0.95);
 }
 to {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
}

/* Close Button */
.pin-login-modal-close {
 position: absolute;
 top: 16px;
 right: 16px;
 background: #f5f5f5;
 border: none;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 font-size: 16px;
 color: #666;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s ease;
}

.pin-login-modal-close:hover {
 background: #e0e0e0;
 color: #333;
}

.pin-login-modal-close:focus {
 outline: 2px solid #dd3333;
 outline-offset: 2px;
}

/* Header */
.pin-login-modal-header {
 text-align: center;
 margin-bottom: 28px;
}

.pin-login-modal-header h3 {
 font-size: 24px;
 font-weight: 700;
 margin: 0 0 8px;
 color: #1a1a1a;
 line-height: 1.3;
}

.pin-login-modal-subtitle {
 color: #666;
 margin: 0;
 font-size: 15px;
 line-height: 1.5;
}

/* Body */
.pin-login-modal-body {
 margin-bottom: 24px;
}

/* Social Login Buttons Container */
.pin-social-login-buttons {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

/* Override NextendSocialLogin default styles */
.pin-login-modal .nsl-container {
 margin: 0 !important;
 padding: 0 !important;
}

.pin-login-modal .nsl-container-block {
 display: flex !important;
 flex-direction: column !important;
 gap: 12px !important;
}

.pin-login-modal .nsl-container-buttons {
 display: flex !important;
 flex-direction: column !important;
 gap: 12px !important;
}

.pin-login-modal .nsl-button {
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 100% !important;
 padding: 14px 20px !important;
 border-radius: 10px !important;
 font-size: 15px !important;
 font-weight: 600 !important;
 text-decoration: none !important;
 transition: transform 0.2s ease, box-shadow 0.2s ease !important;
 box-sizing: border-box !important;
}

.pin-login-modal .nsl-button:hover {
 transform: translateY(-2px) !important;
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

.pin-login-modal .nsl-button:active {
 transform: translateY(0) !important;
}

/* Google Button */
.pin-login-modal .nsl-button-google {
 background: #fff !important;
 border: 2px solid #e0e0e0 !important;
 color: #333 !important;
}

.pin-login-modal .nsl-button-google:hover {
 border-color: #4285f4 !important;
 background: #f8f9ff !important;
}

/* Facebook Button */
.pin-login-modal .nsl-button-facebook {
 background: #1877f2 !important;
 border: none !important;
 color: #fff !important;
}

.pin-login-modal .nsl-button-facebook:hover {
 background: #166fe5 !important;
}

/* Apple Button */
.pin-login-modal .nsl-button-apple {
 background: #000 !important;
 border: none !important;
 color: #fff !important;
}

.pin-login-modal .nsl-button-apple:hover {
 background: #333 !important;
}

/* Twitter/X Button */
.pin-login-modal .nsl-button-twitter {
 background: #000 !important;
 border: none !important;
 color: #fff !important;
}

.pin-login-modal .nsl-button-twitter:hover {
 background: #333 !important;
}

/* Button Icons */
.pin-login-modal .nsl-button svg,
.pin-login-modal .nsl-button img {
 width: 20px !important;
 height: 20px !important;
 margin-right: 12px !important;
}

/* Fallback (when NextendSocialLogin not configured) */
.pin-login-fallback {
 text-align: center;
 padding: 20px;
}

.pin-login-fallback p {
 color: #666;
 margin-bottom: 16px;
}

.pin-login-fallback-btn {
 display: inline-block;
 padding: 12px 24px;
 background: #dd3333;
 color: #fff;
 text-decoration: none;
 border-radius: 8px;
 font-weight: 600;
 transition: background 0.2s ease;
}

.pin-login-fallback-btn:hover {
 background: #c62828;
 color: #fff;
}

/* Footer */
.pin-login-modal-footer {
 text-align: center;
 padding-top: 20px;
 border-top: 1px solid #eee;
}

.pin-privacy-note {
 font-size: 12px;
 color: #888;
 margin: 0;
 line-height: 1.6;
}

.pin-privacy-note a {
 color: #666;
 text-decoration: underline;
}

.pin-privacy-note a:hover {
 color: #333;
}

/* Body scroll lock when modal is open */
body.pin-login-modal-open {
 overflow: hidden;
}

/* Responsive */
@media (max-width: 480px) {
 .pin-login-modal {
 padding: 16px;
 }

 .pin-login-modal-content {
 padding: 32px 20px 24px;
 border-radius: 12px;
 }

 .pin-login-modal-header h3 {
 font-size: 20px;
 }

 .pin-login-modal-subtitle {
 font-size: 14px;
 }

 .pin-login-modal .nsl-button {
 padding: 12px 16px !important;
 font-size: 14px !important;
 }
}

/* Focus trap indicator */
.pin-login-modal-content:focus {
 outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
 .pin-login-modal-content {
 border: 2px solid #000;
 }

 .pin-login-modal .nsl-button {
 border: 2px solid currentColor !important;
 }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
 .pin-login-modal-content {
 animation: none;
 }

 .pin-login-modal .nsl-button {
 transition: none !important;
 }
}

/* ==========================================================================
 Comment Login Prompt Card
 ========================================================================== */

.comment-login-prompt {
 background: #ffffff;
 border: 1px solid #e5e5e5;
 border-radius: 12px;
 padding: 32px 24px;
 text-align: center;
 margin-bottom: 24px;
 box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
 animation: commentPromptFadeIn 0.4s ease-out;
}

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

.comment-login-prompt__icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 56px;
 height: 56px;
 background: #fef2f2;
 border-radius: 50%;
 margin-bottom: 16px;
 color: #dd3333;
}

.comment-login-prompt__icon svg {
 width: 24px;
 height: 24px;
}

.comment-login-prompt__title {
 font-size: 20px;
 font-weight: 700;
 color: #333333;
 margin: 0 0 8px 0;
 line-height: 1.3;
}

.comment-login-prompt__text {
 font-size: 15px;
 color: #666666;
 margin: 0 0 24px 0;
 line-height: 1.6;
 max-width: 320px;
 margin-left: auto;
 margin-right: auto;
}

.comment-login-prompt__btn {
 display: inline-block;
 background: #dd3333;
 color: #ffffff;
 padding: 14px 32px;
 border-radius: 8px;
 font-size: 15px;
 font-weight: 600;
 text-decoration: none;
 border: none;
 cursor: pointer;
 transition: all 0.2s ease;
 line-height: 1;
}

.comment-login-prompt__btn:hover {
 background: #c62828;
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(221, 51, 51, 0.3);
 color: #ffffff;
}

.comment-login-prompt__btn:active {
 transform: translateY(0);
 box-shadow: 0 2px 6px rgba(221, 51, 51, 0.2);
}

.comment-login-prompt__btn:focus {
 outline: 2px solid #dd3333;
 outline-offset: 2px;
}

/* First comment variant - slightly more emphasis */
.comment-login-prompt--first {
 background: linear-gradient(135deg, #ffffff 0%, #fef9f9 100%);
 border-color: #f0d0d0;
}

.comment-login-prompt--first .comment-login-prompt__icon {
 background: #dd3333;
 color: #ffffff;
}

/* Mobile responsive */
@media (max-width: 480px) {
 .comment-login-prompt {
 padding: 24px 16px;
 border-radius: 8px;
 margin-bottom: 16px;
 }

 .comment-login-prompt__icon {
 width: 48px;
 height: 48px;
 margin-bottom: 12px;
 }

 .comment-login-prompt__icon svg {
 width: 20px;
 height: 20px;
 }

 .comment-login-prompt__title {
 font-size: 18px;
 }

 .comment-login-prompt__text {
 font-size: 14px;
 margin-bottom: 20px;
 }

 .comment-login-prompt__btn {
 display: block;
 width: 100%;
 padding: 12px 24px;
 }
}

/* High contrast mode */
@media (prefers-contrast: high) {
 .comment-login-prompt {
 border: 2px solid #000;
 }

 .comment-login-prompt__btn {
 border: 2px solid transparent;
 }

 .comment-login-prompt__btn:focus {
 border-color: #000;
 }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
 .comment-login-prompt {
 animation: none;
 }

 .comment-login-prompt__btn {
 transition: none;
 }

 .comment-login-prompt__btn:hover {
 transform: none;
 }
}
/**
 * Author Profile Styles
 *
 * Styles for the author profile page.
 * Follows Pin theme design system.
 *
 * @package GridMode WordPress Theme
 * @since 1.0.0
 */

/* ==========================================================================
 Author Header
 ========================================================================== */

.pin-author-header {
 background: var(--pin-card-bg, #ffffff);
 padding: 40px 30px;
 margin-bottom: 0;
}

.pin-author-header-inner {
 max-width: 100%;
}

.pin-author-header-main {
 display: flex;
 align-items: flex-start;
 gap: 24px;
 margin-bottom: 30px;
}

.pin-author-avatar {
 flex-shrink: 0;
}

.pin-author-avatar-img {
 width: 120px;
 height: 120px;
 border-radius: 50%;
 object-fit: cover;
 border: 4px solid var(--pin-page-bg, #f6f5f2);
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.pin-author-name {
 font-size: 28px;
 font-weight: 700;
 color: var(--pin-title-color, #333333);
 margin: 0 0 10px 0;
 line-height: 1.2;
}

.pin-author-bio {
 font-size: 15px;
 color: var(--pin-text-secondary, #666666);
 line-height: 1.6;
 margin: 0 0 12px 0;
}

.pin-author-joined {
 font-size: 14px;
 color: var(--pin-text-secondary, #666666);
 margin: 0;
 display: flex;
 align-items: center;
 gap: 6px;
}

.pin-author-joined i {
 color: var(--pin-primary-color, #dd3333);
}

/* ==========================================================================
 Statistics Cards
 ========================================================================== */

.pin-author-stats-cards {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 16px;
}

.pin-stat-card {
 text-align: center;
 padding: 20px 16px;
 background: var(--pin-page-bg, #f6f5f2);
 border-radius: 8px;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pin-stat-card:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pin-stat-number {
 display: block;
 font-size: 28px;
 font-weight: 700;
 color: var(--pin-title-color, #333333);
 line-height: 1.2;
 margin-bottom: 4px;
}

.pin-stat-label {
 display: block;
 font-size: 13px;
 font-weight: 500;
 color: var(--pin-text-secondary, #666666);
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

/* Approval rate colors */
.pin-stat-approval--high {
 color: var(--approval-high, #28A745) !important;
}

.pin-stat-approval--medium {
 color: var(--approval-medium, #FFC107) !important;
}

.pin-stat-approval--low {
 color: var(--approval-low, #DC3545) !important;
}

/* ==========================================================================
 Tab Navigation
 ========================================================================== */

.pin-author-tabs {
 display: flex;
 gap: 0;
 background: var(--pin-card-bg, #ffffff);
 border-bottom: 1px solid var(--pin-border-color, #e5e5e5);
 margin-bottom: 0;
}

.pin-author-tab {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 16px 20px;
 background: none;
 border: none;
 font-family: inherit;
 font-size: 14px;
 font-weight: 600;
 color: var(--pin-text-secondary, #666666);
 cursor: pointer;
 transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
 border-bottom: 3px solid transparent;
 margin-bottom: -1px;
}

.pin-author-tab:hover {
 color: var(--pin-title-color, #333333);
 background-color: rgba(0, 0, 0, 0.02);
}

.pin-author-tab.is-active {
 color: var(--pin-primary-color, #dd3333);
 border-bottom-color: var(--pin-primary-color, #dd3333);
}

.pin-author-tab i {
 font-size: 16px;
}

.pin-tab-count {
 background: var(--pin-page-bg, #f6f5f2);
 padding: 2px 8px;
 border-radius: 12px;
 font-size: 12px;
 font-weight: 600;
 min-width: 24px;
}

.pin-author-tab.is-active .pin-tab-count {
 background: var(--pin-primary-color, #dd3333);
 color: #ffffff;
}

/* ==========================================================================
 Tab Content Areas
 ========================================================================== */

.pin-author-tab-content {
 display: none;
 background: var(--pin-card-bg, #ffffff);
 min-height: 300px;
}

.pin-author-tab-content.is-active {
 display: block;
}

/* Posts tab content uses existing grid styles */
#author-posts-tab .gridmode-posts-grid {
 padding: 20px;
}

/* ==========================================================================
 Empty States
 ========================================================================== */

.pin-author-empty-state {
 text-align: center;
 padding: 60px 20px;
 color: var(--pin-text-secondary, #666666);
}

.pin-author-empty-state i {
 font-size: 48px;
 color: var(--pin-border-color, #e5e5e5);
 margin-bottom: 16px;
 display: block;
}

.pin-author-empty-state p {
 font-size: 16px;
 margin: 0;
}

/* ==========================================================================
 Loading Indicator
 ========================================================================== */

.pin-loading-indicator {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 40px 20px;
 color: var(--pin-text-secondary, #666666);
}

.pin-loading-indicator .loader {
 width: 32px;
 height: 32px;
 border: 3px solid var(--pin-border-color, #e5e5e5);
 border-top-color: var(--pin-primary-color, #dd3333);
 border-radius: 50%;
 animation: pin-spin 0.8s linear infinite;
 margin-bottom: 12px;
}

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

/* ==========================================================================
 Votes Tab
 ========================================================================== */

.pin-votes-filter {
 display: flex;
 gap: 8px;
 padding: 16px 20px;
 border-bottom: 1px solid var(--pin-border-color, #e5e5e5);
 background: var(--pin-page-bg, #f6f5f2);
}

.pin-filter-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 16px;
 background: var(--pin-card-bg, #ffffff);
 border: 1px solid var(--pin-border-color, #e5e5e5);
 border-radius: 20px;
 font-family: inherit;
 font-size: 13px;
 font-weight: 500;
 color: var(--pin-text-secondary, #666666);
 cursor: pointer;
 transition: all 0.2s ease;
}

.pin-filter-btn:hover {
 border-color: var(--pin-primary-color, #dd3333);
 color: var(--pin-primary-color, #dd3333);
}

.pin-filter-btn.is-active {
 background: var(--pin-primary-color, #dd3333);
 border-color: var(--pin-primary-color, #dd3333);
 color: #ffffff;
}

.pin-votes-list {
 padding: 0;
}

.pin-vote-item {
 display: flex;
 gap: 16px;
 padding: 16px 20px;
 border-bottom: 1px solid var(--pin-border-color, #e5e5e5);
 transition: background-color 0.2s ease;
}

.pin-vote-item:hover {
 background-color: rgba(0, 0, 0, 0.01);
}

.pin-vote-item:last-child {
 border-bottom: none;
}

.pin-vote-thumb {
 flex-shrink: 0;
 width: 80px;
 height: 60px;
 border-radius: 6px;
 overflow: hidden;
 background: var(--pin-page-bg, #f6f5f2);
}

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

.pin-vote-thumb-placeholder {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--pin-border-color, #e5e5e5);
}

.pin-vote-thumb-placeholder i {
 font-size: 24px;
}

.pin-vote-info {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.pin-vote-title {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 6px 0;
 line-height: 1.4;
}

.pin-vote-title a {
 color: var(--pin-title-color, #333333);
 text-decoration: none;
}

.pin-vote-title a:hover {
 color: var(--pin-primary-color, #dd3333);
}

.pin-vote-meta {
 display: flex;
 align-items: center;
 gap: 12px;
}

.pin-vote-type {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-size: 13px;
 font-weight: 500;
}

.pin-vote-type--like {
 color: var(--pin-like-color, #6ecb0a);
}

.pin-vote-type--dislike {
 color: var(--pin-dislike-color, #fe6969);
}

/* ==========================================================================
 Comments Tab
 ========================================================================== */

.pin-comments-list {
 padding: 0;
}

.pin-comment-item {
 padding: 20px;
 border-bottom: 1px solid var(--pin-border-color, #e5e5e5);
 transition: background-color 0.2s ease;
}

.pin-comment-item:hover {
 background-color: rgba(0, 0, 0, 0.01);
}

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

.pin-comment-content {
 margin-bottom: 12px;
}

.pin-comment-content p {
 margin: 0;
 font-size: 15px;
 line-height: 1.6;
 color: var(--pin-text-color, #414141);
}

.pin-comment-meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 16px;
 font-size: 13px;
 color: var(--pin-text-secondary, #666666);
}

.pin-comment-post-link {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 color: var(--pin-primary-color, #dd3333);
 text-decoration: none;
 font-weight: 500;
}

.pin-comment-post-link:hover {
 text-decoration: underline;
}

.pin-comment-date {
 display: inline-flex;
 align-items: center;
 gap: 4px;
}

/* ==========================================================================
 Load More Button
 ========================================================================== */

.pin-load-more-wrapper {
 padding: 20px;
 text-align: center;
 border-top: 1px solid var(--pin-border-color, #e5e5e5);
}

.pin-load-more-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 200px;
 padding: 12px 24px;
 background: var(--pin-primary-color, #dd3333);
 border: none;
 border-radius: 6px;
 font-family: inherit;
 font-size: 14px;
 font-weight: 600;
 color: #ffffff;
 cursor: pointer;
 transition: background-color 0.2s ease, transform 0.2s ease;
}

.pin-load-more-btn:hover {
 background: var(--pin-primary-hover, #c62828);
 transform: translateY(-1px);
}

.pin-load-more-btn:disabled {
 background: var(--pin-border-color, #e5e5e5);
 color: var(--pin-text-secondary, #666666);
 cursor: not-allowed;
 transform: none;
}

.pin-load-more-btn.is-loading {
 pointer-events: none;
}

/* ==========================================================================
 Responsive Design
 ========================================================================== */

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

@media screen and (max-width: 768px) {
 .pin-author-header {
 padding: 24px 16px;
 }

 .pin-author-header-main {
 flex-direction: column;
 align-items: center;
 text-align: center;
 }

 .pin-author-avatar-img {
 width: 100px;
 height: 100px;
 }

 .pin-author-name {
 font-size: 24px;
 }

 .pin-author-joined {
 justify-content: center;
 }

 .pin-author-stats-cards {
 grid-template-columns: repeat(2, 1fr);
 gap: 12px;
 }

 .pin-stat-card {
 padding: 16px 12px;
 }

 .pin-stat-number {
 font-size: 24px;
 }

 .pin-stat-label {
 font-size: 11px;
 }

 /* Tabs */
 .pin-author-tab {
 flex-direction: column;
 padding: 12px 8px;
 font-size: 12px;
 gap: 4px;
 }

 .pin-tab-text {
 display: none;
 }

 .pin-author-tab i {
 font-size: 18px;
 }

 /* Votes */
 .pin-votes-filter {
 padding: 12px 16px;
 overflow-x: auto;
 }

 .pin-filter-btn {
 padding: 6px 12px;
 font-size: 12px;
 white-space: nowrap;
 }

 .pin-vote-item {
 padding: 12px 16px;
 }

 .pin-vote-thumb {
 width: 60px;
 height: 45px;
 }

 .pin-vote-title {
 font-size: 14px;
 }

 /* Comments */
 .pin-comment-item {
 padding: 16px;
 }

 .pin-comment-meta {
 flex-direction: column;
 align-items: flex-start;
 gap: 8px;
 }
}

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

 .pin-author-tab {
 padding: 10px 6px;
 }

 .pin-tab-count {
 padding: 2px 6px;
 font-size: 11px;
 }
}