/* Blog index + article styling (June 2026) */

/* ---- Index grid ---- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
}

.blog-card {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 2.8rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1.6rem;
    background: var(--white);
    color: var(--black);
    text-decoration: none;
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.blog-card:hover {
    border-color: #FF6E30;
    transform: translateY(-0.4rem);
    box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.08);
}

.blog-card-tag {
    align-self: flex-start;
    padding: 0.5rem 1.1rem;
    border-radius: 10rem;
    background: rgba(255, 110, 48, 0.10);
    color: #E9402B;
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.blog-card h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.blog-card p {
    margin: 0;
    font-size: 1.45rem;
    line-height: 155%;
    color: rgba(0, 0, 0, 0.6);
}

.blog-card-meta {
    margin-top: auto;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.45);
    display: flex;
    gap: 0.8rem;
    align-items: center;
}
.blog-card-meta span { display: inline-flex; }
.blog-card-meta i { width: 0.3rem; height: 0.3rem; border-radius: 50%; background: rgba(0,0,0,0.25); align-self: center; }

/* ---- Article (centered reading column) ---- */
.blog-article-head { max-width: 76rem; margin-left: auto; margin-right: auto; }
.blog-meta {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    margin-top: 2rem;
    font-size: 1.4rem;
    color: rgba(0, 0, 0, 0.5);
}
.blog-meta i { width: 0.3rem; height: 0.3rem; border-radius: 50%; background: rgba(0,0,0,0.25); }

.blog-body {
    max-width: 76rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.7rem;
    line-height: 172%;
    color: rgba(0, 0, 0, 0.82);
}
.blog-body > p:first-child { margin-top: 0; }
.blog-body p { margin: 0 0 2rem; }
.blog-body h2 {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 125%;
    letter-spacing: -0.01em;
    color: var(--black);
    margin: 4rem 0 1.6rem;
}
.blog-body ul, .blog-body ol { margin: 0 0 2rem; padding-left: 2rem; }
.blog-body li { margin-bottom: 0.8rem; }
.blog-body a { color: #E9402B; text-decoration: underline; text-underline-offset: 0.3rem; }
.blog-body a:hover { color: var(--orange); }
.blog-body strong { font-weight: 500; color: var(--black); }

@media screen and (max-width: 1100px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 700px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-body { font-size: 1.6rem; }
    .blog-body h2 { font-size: 2.3rem; }
}


/* ---- Blog index: search + tag filter + pagination (June 2026) ---- */
.blog-controls { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 3.2rem; align-items: center; }
.blog-search {
    flex: 1 1 28rem; min-width: 0; padding: 1.3rem 1.6rem;
    font: inherit; font-size: 1.5rem; color: var(--black); background: var(--white);
    border: 1px solid rgba(0,0,0,0.14); border-radius: 1rem; outline: none;
    transition: border-color var(--transition-fast);
}
.blog-search:focus { border-color: #FF6E30; }
.blog-search::placeholder { color: rgba(0,0,0,0.4); }
.blog-filter-wrap { flex: 0 0 auto; }
.blog-tag-filter {
    padding: 1.3rem 3.6rem 1.3rem 1.6rem;
    font: inherit; font-size: 1.5rem; color: var(--black); cursor: pointer;
    border: 1px solid rgba(0,0,0,0.14); border-radius: 1rem; outline: none;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-color: var(--white);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1.2rem center; background-size: 1.4rem;
    transition: border-color var(--transition-fast);
}
.blog-tag-filter:focus { border-color: #FF6E30; }
.blog-noresults { font-size: 1.6rem; color: rgba(0,0,0,0.55); padding: 1.6rem 0; }
.blog-pagination { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 4rem; }
.blog-page-btn {
    min-width: 4rem; padding: 0.9rem 1.3rem; font: inherit; font-size: 1.4rem;
    color: var(--black); background: var(--white); border: 1px solid rgba(0,0,0,0.12);
    border-radius: 0.8rem; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.blog-page-btn:hover:not(:disabled):not(.is-active) { border-color: #FF6E30; color: #E9402B; }
.blog-page-btn.is-active { background: var(--gradient-orange); color: var(--white); border-color: transparent; }
.blog-page-btn:disabled { opacity: 0.4; cursor: default; }
@media screen and (max-width: 560px) {
    .blog-controls { flex-direction: column; align-items: stretch; }
    .blog-tag-filter { width: 100%; }
}