:root {--blog-gap: clamp(1rem, 2vw, 2rem);--featured-min: 280px;--thumb-size: 90px;}.blog-home, .blog-archive {padding: var(--blog-gap);max-width: 1200px;margin-inline: auto;display: flex;flex-direction: column;gap: var(--blog-gap);}.grid {display: grid;gap: 1.5rem;}.grid-featured, .grid-secondary, .related-grid, .archive-grid {display: grid;gap: var(--blog-gap);}.grid-featured {grid-template-columns: 1fr;}.grid-secondary {grid-template-columns: 1fr;}.related-grid {grid-template-columns: 1fr;}.archive-grid {grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}@media (min-width: 600px) {.archive-grid {grid-template-columns: repeat(2, 1fr);}.related-grid {grid-template-columns: repeat(2, 1fr);}}@media (min-width: 640px) {.grid-featured {grid-template-columns: repeat(auto-fit, minmax(var(--featured-min), 1fr));}}@media (min-width: 700px) {.grid-secondary {grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));}}@media (min-width: 1024px) {.archive-grid {grid-template-columns: repeat(3, 1fr);}}#post-list .archive-card:first-child {grid-column: 1 / -1;}#post-list .archive-card:first-child img {height: 400px;object-fit: cover;}#post-list .archive-card:first-child .archive-info h4 {font-size: 2rem;}#post-list .archive-card:first-child .archive-info p {font-size: 1.2rem;}section[class^="cols-"] {display: grid;gap: var(--gap, 1.5rem);margin: var(--section-space) 0;align-items: start;}.cols-2 {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}.cols-3 {grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}.cols-4 {grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));}.featured-card, .post-card, .archive-card, .card, section.hero-card {background: var(--card-bg);border: 1px solid var(--border);border-radius: var(--radius-card);box-shadow: 0 2px 6px var(--shadow);overflow: hidden;transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;}.featured-card:hover, .post-card:hover, .archive-card:hover, .card:hover, section.hero-card:hover {transform: translateY(-2px);}.featured-card:hover {box-shadow: 0 4px 14px rgba(0, 0, 0, .12);}.post-card:hover {box-shadow: 0 3px 8px rgba(0, 0, 0, .1);}.archive-card:hover {box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);}.card:hover, section.hero-card:hover {border-color: var(--accent-color);box-shadow: 0 4px 12px var(--shadow);}.related-card {background: var(--card-bg);border-radius: var(--radius-card);overflow: hidden;transition: transform .2s ease;}.related-card:hover {transform: scale(1.02);}section[class^="cols-"] div {height: -webkit-fill-available;background: var(--card-bg);color: var(--text);padding: 1.25rem;border-radius: var(--radius-card);box-shadow: var(--shadow);transition: transform 0.2s ease, box-shadow 0.2s ease;}section[class^="cols-"] div:hover {transform: translateY(-3px);box-shadow: var(--shadow);}.featured-card img, .post-card img, .archive-card img, .related-card img {width: 100%;object-fit: cover;}.featured-card img, .post-card img {aspect-ratio: 16/9;}.archive-card img, .related-card img {height: 180px;}.featured-card .content {padding: 1.25rem;}.post-card .info {padding: 1rem 1.25rem;}.archive-card div {padding: 0.75rem 1rem;}.card {padding: var(--space);}.featured-card h2 {color: var(--text);font-size: clamp(1.2rem, 2vw, 1.6rem);margin-bottom: 0.4em;}.post-card h3, .archive-card h4 {padding: 0 0 0 1rem;margin: 1rem 0;font-size: 1.6rem;font-weight: 700;color: var(--text);}.card h3 {margin: 0 0 0.5rem 0;font-size: 1.15rem;font-weight: 700;color: var(--text);}.related-card h4 {padding: 0 1rem 1rem 1rem;font-size: 1.2rem;color: var(--text);font-weight: 600;}.post-title h1 {margin: 0;}.post-title h2 {margin: 8px 0 0 0;}.featured-card .content p, .post-card p, .archive-card p, .card p {color: var(--text-secondary);}.post-card p, .archive-card p {padding: 0 1rem 0 1rem;margin: 0 0 2rem 0;font-size: 1.2rem;font-weight: 400;}.card p {margin: 0;font-size: 0.95rem;line-height: 1.5;}.archive-meta, .card-meta {font-weight: 700;color: var(--accent-color);}.archive-meta {padding: 0 1rem 0 1rem;margin: 0 0 2rem 0;font-size: 0.8rem;}.card-meta {display: inline-block;margin-top: 1.2rem;font-size: 0.75rem;text-transform: uppercase;letter-spacing: 0.05em;}.post-title {display: flex;flex-direction: column;margin: 2rem 0 3rem 0;}#post-date {margin: 0 0 1.5rem 0;}.post-date {display: flex;align-items: center;}.breadcrumb {font-size: 1rem;margin: 2rem 0;font-weight: 700;}.breadcrumb a {font-size: 1rem;text-decoration: none;color: var(--accent-color);}.blog-controls {display: flex;flex-direction: column;gap: 1rem;margin-bottom: 2.5rem;width: 100%;}.search-wrapper {position: relative;flex-grow: 1;}#search-input, .sort-trigger {width: -webkit-fill-available;padding: 1rem 16px 1.25rem;font-family: inherit;font-size: 1rem;color: var(--text);background-color: var(--card-bg);border: 1px solid var(--border);border-radius: 12px;box-shadow: inset 0 1px 2px var(--shadow);box-sizing: border-box;transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;display: flex;align-items: center;gap: 9px;}#search-input:focus, .sort-trigger:focus, .sort-trigger:hover, .custom-sort-container.active .sort-trigger {outline: none;border-color: var(--accent-color);background-color: var(--bg);box-shadow: 0 0 0 4px rgba(85, 18, 212, 0.15);}.custom-sort-container {position: relative;perspective: 600px;min-width: 190px;}.sort-trigger::after {content: "";position: absolute;right: 1.2rem;top: 50%;transform: translateY(-50%) rotate(0deg);width: 12px;height: 12px;background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat: no-repeat;background-size: contain;transition: transform 0.3s ease;}.custom-sort-container.active .sort-trigger::after {transform: translateY(-50%) rotate(180deg);}.sort-menu {position: absolute;top: calc(100% + 8px);right: 0;width: -webkit-fill-available;font-size: 1rem;color: var(--text);background-color: var(--card-bg);border: 1px solid var(--border);box-sizing: border-box;border-radius: 18px;padding: 0;margin: 0;list-style: none;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);z-index: 100;opacity: 0;visibility: hidden;transform-style: preserve-3d;transform: rotateX(-15deg) translateY(10px);transform-origin: top center;transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.3s ease;overflow: hidden;}.custom-sort-container.active .sort-menu {opacity: 1;visibility: visible;transform: rotateX(0deg) translateY(0px);}.sort-menu li {padding: 0.7rem 1.2rem;font-size: 0.95rem;color: var(--text-muted);cursor: pointer;transition: all 0.2s ease;}.sort-menu li:hover {background-color: var(--bg-hover);color: var(--text);padding-left: 1.5rem;}.sort-menu li.selected {font-weight: 600;color: var(--accent-color);background-color: var(--bg);}.sort-icon {opacity: 0.6;flex-shrink: 0;}#sort-select {padding: 0.8rem 2.5rem 0.8rem 1.2rem;font-size: 1rem;font-family: inherit;color: var(--text-color, #333);background-color: var(--bg-surface, #fff);border: 2px solid var(--border-color, #e0e0e0);border-radius: 50px;cursor: pointer;transition: all 0.3s ease;outline: none;appearance: none;background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat: no-repeat;background-position: right 1rem center;background-size: 1em;}#sort-select:focus {border-color: var(--primary, #0076ff);box-shadow: 0 0 0 4px var(--primary-alpha, rgba(0, 118, 255, 0.15));}.category-filter {display: flex;flex-wrap: wrap;gap: .5rem;margin: 1rem 0 2rem;}.filter-btn {background: var(--card-bg);border: 1px solid var(--accent-color);color: var(--accent-color);padding: .4rem .8rem;border-radius: 2rem;font-size: .9rem;cursor: pointer;transition: all .2s ease;margin: 4px;}.filter-btn.active, .filter-btn:hover {background: var(--accent-color);color: var(--text-reverse);}.no-results {text-align: center;padding: 3rem 1rem;font-size: 1.1rem;color: var(--text-muted, #666);grid-column: 1 / -1;}@media (min-width: 768px) {.blog-controls {flex-direction: row;align-items: center;justify-content: space-between;}#sort-select {width: auto;min-width: 180px;}#search-input {width: 70%;}}.pagination-controls, #pagination {display: flex;justify-content: center;align-items: center;gap: .4rem;margin: 2rem 0;flex-wrap: wrap;}.pagination-controls button, .page-btn {background: var(--card-bg);color: var(--text);border: none;padding: .5rem .75rem;border-radius: .4rem;cursor: pointer;transition: background .2s ease;}.pagination-controls button:hover:not(:disabled), .page-btn:hover:not(:disabled) {background: var(--bg-CTA);}.pagination-controls button.active, .page-btn.active {background: var(--accent-color);color: var(--text-reverse);font-weight: 600;font-size: 1rem;padding: 8px 14px;}.pagination-controls button.active:hover, .page-btn.active {background: var(--text-reverse);color: var(--accent-color);}.pagination-controls button[disabled], .page-btn:disabled {opacity: 0.4;cursor: default;}.dots {padding: 0 .5rem;color: var(--text-muted, #888);}.cta-center {text-align: center;margin-top: 2rem;}.cta-center .btn {display: inline-block;background: var(--accent, #0066ff);color: #fff;padding: 0.8rem 1.6rem;border-radius: var(--radius-btn);font-weight: 600;text-decoration: none;transition: background .3s ease;}.cta-center .btn:hover {background: var(--accent-hover, #004ecc);}.social-links {display: flex;gap: 0.5rem;align-items: center;}.icon-share {width: 2rem;height: 2rem;fill: currentColor;}.toast {visibility: hidden;opacity: 0;position: fixed;bottom: 2rem;right: 2rem;background: var(--accent-color, #0073b1);color: #fff;padding: 0.75rem 1rem;border-radius: 0.5rem;transition: opacity 0.3s ease, visibility 0.3s ease;z-index: 999;}.toast.show {visibility: visible;opacity: 1;}section.code {background: var(--bg-CTA-reverse);color: var(--text-reverse);padding: 1.25rem;border-radius: var(--radius-card);overflow-x: auto;margin: var(--section-space) 0;font-family: monospace;font-size: 0.9rem;}section.code pre {margin: 0;white-space: pre-wrap;}.language-html, .language-css {border-radius: var(--radius-image);white-space: pre-wrap !important;word-wrap: break-word !important;}section.youtube {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;border-radius: var(--radius-card);margin: var(--section-space) 0;box-shadow: var(--shadow);}section.youtube iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;border-radius: inherit;}.audio-summary {margin: 0 0 5rem 0;}.visually-hidden {position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0, 0, 0, 0);}