/*
 * home.css — styles for home.php
 * Moved out of the template in v2.3.0: it used to be an inline <style>
 * block printed AFTER the page content (unstyled flash + reflow, never cached).
 * Loaded in <head> only when WordPress renders home.php (see ewt_template_styles()).
 */

.blg-hero { padding-bottom: 2.5rem; }
.blg-hero__eyebrow { margin-bottom: 1rem; }
.blg-hero__title { font-family: var(--ewt-font-display); font-weight: 400; font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -.02em; color: var(--ewt-ink); margin: 0 0 1rem; }
.blg-hero__intro { font-weight: 400; font-size: 16px; line-height: 1.75; color: var(--ewt-ink-soft); max-width: 640px; margin: 0 0 2.5rem; }

.blg-filters { display: flex; flex-wrap: wrap; gap: .75rem; }
.blg-filter { display: inline-block; padding: .625rem 1.25rem; border: .5px solid var(--ewt-border); font-size: .6875rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ewt-muted); transition: border-color .2s, color .2s, background-color .2s; }
.blg-filter:hover { border-color: var(--ewt-bronze); color: var(--ewt-bronze); }
.blg-filter.is-active { background: var(--ewt-bronze); border-color: var(--ewt-bronze); color: var(--ewt-ink); }

.blg-listing { padding-top: 0; }
.blg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.blg-pagination { margin-top: 3rem; display: flex; justify-content: center; }
.blg-pagination .nav-links { display: flex; align-items: center; gap: 1.5rem; }
.blg-pagination a, .blg-pagination span { font-size: .75rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ewt-muted); }
.blg-pagination a:hover { color: var(--ewt-bronze); }
.blg-pagination .current { color: var(--ewt-bronze); }
.blg-empty { color: var(--ewt-ink-soft); font-size: .9375rem; }

/* --- Blog card (shared with front-page.php's Blog Preview and archive.php) --- */
.ewt-blog-card { background: var(--ewt-surface); overflow: hidden; display: flex; flex-direction: column; }
.ewt-blog-card__img { display: block; aspect-ratio: 16/9; overflow: hidden; }
.ewt-blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ewt-ease); }
.ewt-blog-card:hover .ewt-blog-card__img img { transform: scale(1.04); }
.ewt-blog-card__no-img { width: 100%; height: 100%; background: linear-gradient(135deg, var(--ewt-surface-2), var(--ewt-border)); }
.ewt-blog-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.ewt-blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-bottom: .75rem; }
.ewt-blog-card__cat { font-size: .625rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ewt-bronze); }
.ewt-blog-card__date, .ewt-blog-card__read { font-size: .6875rem; color: var(--ewt-muted); }
.ewt-blog-card__meta > *:not(:last-child)::after { content: '·'; margin-left: .625rem; color: var(--ewt-ghost); }
.ewt-blog-card__title { font-family: var(--ewt-font-display); font-size: 1.25rem; font-weight: 400; color: var(--ewt-ink); line-height: 1.3; margin: 0 0 .75rem; }
.ewt-blog-card__title a:hover { color: var(--ewt-bronze); }
.ewt-blog-card__excerpt { font-size: .875rem; color: var(--ewt-ink-soft); line-height: 1.7; margin: 0 0 1.25rem; flex-grow: 1; }
.ewt-blog-card__btn { display: inline-flex; align-self: flex-start; align-items: center; gap: .5rem; padding: .625rem 1.25rem; border: .5px solid var(--ewt-bronze); font-size: .6875rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ewt-bronze); transition: background-color .25s var(--ewt-ease), color .25s var(--ewt-ease); }
.ewt-blog-card__btn:hover { background: var(--ewt-bronze); color: var(--ewt-ink); }

.ewt-blog-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; background: transparent; margin-bottom: 1rem; }
.ewt-blog-card--featured .ewt-blog-card__img { aspect-ratio: 4/3; }
.ewt-blog-card--featured .ewt-blog-card__body { padding: 0; justify-content: center; }
.ewt-blog-card--featured .ewt-blog-card__title { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.ewt-blog-card--featured .ewt-blog-card__excerpt { font-size: 1rem; }

@media (max-width: 1024px) {
  .blg-grid { grid-template-columns: repeat(2, 1fr); }
  .ewt-blog-card--featured { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 640px) {
  .blg-grid { grid-template-columns: 1fr; }
  .blg-filters { gap: .5rem; }
}