/* =====================================================================
   Infinity Rise — Blogs listing page
   Reuses home.css for the card grid (.lp-blog / .lp-blog-grid / .lp-blog__card)
   and .lp-section spacing; this file styles the banner, the "Featured Blogs"
   heading, the product-category filter tabs and the search box.
   Uses the shared design tokens (--color-*, --fs-*, --bnr-* / --sec-* spacing).
   ===================================================================== */

/* ---------- BANNER ---------- */
.blog-banner { position: relative; background-size: cover; background-position: center; color: var(--color-white);
	display: flex; align-items: center; min-height: var(--bnr-h);
	padding: var(--bnr-pt) var(--bnr-pr) var(--bnr-pb) var(--bnr-pl); }
.blog-banner__overlay { position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 42%, rgba(0,0,0,0) 72%); }
.blog-banner__inner { position: relative; z-index: 1; }
.blog-banner__title { color: var(--color-white); font-size: var(--fs-h1); font-weight: 600; line-height: 1; margin: 0;
	max-width: 640px; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
@media (min-width: 1025px) { .blog-banner { padding-top: 60px; padding-bottom: 60px; } }
@media (min-width: 1537px) { .blog-banner { min-height: 600px; } }
@media (min-width: 1281px) and (max-width: 1536px) { .blog-banner { min-height: 480px; } }
@media (min-width: 1025px) and (max-width: 1280px) { .blog-banner { min-height: 400px; } }

/* ---------- FEATURED BLOGS ---------- */
/* Figma: Inter Tight, 500, 56px, line-height 100%. */
/* 52px gap from the heading down to the "All Blogs" tabs row. */
.blog-list__heading { font-size: var(--fs-h2); font-weight: 500; line-height: 1; margin: 0 0 52px; color: var(--color-black); }

/* Controls row: filter tabs on the left, search on the right. */
.blog-list__controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 72px; flex-wrap: wrap; }

/* Keep the tabs within the width of the 1st + 2nd cards (two card columns + the
   25px gap) so the row never runs under the 3rd card. Tighter gap so all tabs
   fit on a single line within that width. */
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; max-width: calc((200% - 25px) / 3); }
/* Inter Tight, 400, 20px. Tab pill uses a tight line-height so the pill height
   matches the design (the 150% text line-height made the pills too tall). */
.blog-filter { appearance: none; cursor: pointer; border: 0; font-family: inherit;
	background: #EFEADF; color: var(--color-black); font-size: 20px; font-weight: 400;
	padding: 12px 14px; border-radius: 0; line-height: 1; white-space: nowrap;
	transition: background-color .2s ease, color .2s ease; }
.blog-filter:hover { background: var(--color-ancient); }
.blog-filter.is-active { background: var(--color-secondary); color: var(--color-white); }

/* Search box — 487px wide, right-aligned with the 3rd card. Height auto-matches
   the filter-tab height at every breakpoint: align-self: stretch makes it take
   the row's height (= the tabs), and the input carries no vertical padding so the
   box never grows taller than the tabs. */
.blog-search { display: flex; align-items: center; align-self: stretch; gap: 8px; background: transparent;
	border: 1px solid var(--color-black); border-radius: 4px; padding: 0 14px; width: 487px; }
/* Search text/placeholder — Figma: Almarena Neue (Display Regular), 400, 20px,
   line-height 100%, letter-spacing 0%, Title case. Almarena Neue is a commercial
   font not yet loaded, so it falls back to Inter Tight until the files are added. */
.blog-search__input { flex: 1; border: 0; outline: 0; background: transparent;
	font-family: 'Almarena Neue', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: capitalize;
	color: var(--color-black); padding: 8px 0; }
.blog-search__input::placeholder { color: #00000066; }
/* Search icon — Figma green #06402A (var(--color-primary)). */
.blog-search__btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	border: 0; background: transparent; color: var(--color-primary); padding: 4px; }
.blog-search__btn:hover { color: var(--color-secondary); }

/* Grid: reuses .lp-blog-grid from home.css; top spacing is 0 (the controls row
   provides the gap). Card gaps: 52px between rows, 25px between columns. */
.blog-list__grid { margin-top: 0; gap: 52px 25px; }

/* The gold underline appears on hover only (base .lp-blog__card::after) — no
   card is accented by default. */

/* Card title — Figma: Inter Tight, 500, 28px, line-height 150%. Scoped to the
   Blogs listing so the shared .lp-blog cards on other pages are unaffected. */
.blog-card .lp-blog__title { line-height: 1.5; }

/* "Read More" — design line-height 150% (was browser-default "normal"). */
.blog-card .lp-blog__more { line-height: 1.5; }

/* Card meta ("date | category") — Figma: Aeonik, 400, 16px, line-height 13.96px,
   letter-spacing 0.28px. Aeonik is a commercial font not yet loaded on the site,
   so it falls back to Inter Tight until the font files + @font-face are added. */
.blog-card .lp-blog__meta { font-family: 'Aeonik', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 16px; font-weight: 400; line-height: 13.96px; letter-spacing: 0.28px; }

/* Cards that don't match the active filter / search term. */
.blog-card.is-filtered { display: none; }

/* Empty state (no search results). */
.blog-list__empty { margin: 8px 0 0; font-size: var(--fs-p); color: #5a5a5a; }

/* ---------- Responsive ---------- */
@media (max-width: 1536px) {
	.blog-list__heading { font-size: 44px; }
	.blog-filter { font-size: 18px; }
	.blog-search__input { font-size: 15px; }
}
@media (max-width: 1280px) {
	.blog-list__heading { font-size: 38px; }
	.blog-filter { font-size: 16px; }
}
@media (max-width: 1024px) {
	.blog-list__heading { font-size: 32px; }
	.blog-list__controls { flex-direction: column; align-items: stretch; }
	/* Mobile: tabs use the full width (drop the desktop 2-card cap) so they wrap
	   evenly instead of squeezing into a narrow ~2/3 column. */
	.blog-filters { max-width: none; }
	.blog-search { min-width: 0; width: 100%; align-self: stretch; }
}
/* Mobile: tighten the Featured Blogs heading->filters and filters->cards gaps,
   and turn the filter chips into a single-row manual horizontal scroll strip. */
@media (max-width: 600px) {
	.blog-list__heading { margin-bottom: 20px; }
	.blog-list__controls { margin-bottom: 24px; }
	.blog-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		min-width: 0;
		max-width: 100%;
		padding-bottom: 4px;
	}
	.blog-filters::-webkit-scrollbar { display: none; }
	.blog-filters .blog-filter { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 425px) {
	.blog-list__heading { font-size: 28px; }
	.blog-filter { padding: 10px 16px; font-size: 14px; }
}

/* 1920 screens only (real 1920 monitor viewport ≈ 1905px) — tighter tab padding
   and a wider gap between tabs. Other breakpoints keep the base values. */
@media (min-width: 1900px) {
	.blog-filter { padding: 10px 10px; }
	.blog-filters { gap: 20px; }
	.blog-search__btn svg { width: 22px; height: 22px; }
}

/* 1536 screen only (viewport ~1441–1536) — smaller tab font + padding so all 8
   tabs stay on one line within the 2-card width; keep the tabs and the search on
   the SAME row (no wrap) by letting the search shrink to fill the remaining
   space (capped at its 487px). Other breakpoints untouched. */
@media (min-width: 1441px) and (max-width: 1536px) {
	.blog-filter { font-size: 16px; padding: 10px; }
	.blog-list__controls { flex-wrap: nowrap; }
	.blog-search { width: 350px; flex: 0 0 auto; }
	.blog-card .lp-blog__title { font-size: 20px; }
}

/* 1280 screen (viewport ~1200–1280) — same treatment as 1536: shrink the tabs so
   all 8 fit on one line, keep the tabs + search on the same row, narrower search
   (which auto-matches the tab height via .blog-search align-self: stretch).
   Band starts at 1200 (not 1025): below that the tabs can't fit one line, so we
   let them wrap normally instead of forcing a too-tall search row. */
@media (min-width: 1200px) and (max-width: 1280px) {
	.blog-filter { font-size: 14px; padding: 10px 5px; }
	.blog-filters { gap: 5px; }
	.blog-list__controls { flex-wrap: nowrap; }
	.blog-search { width: 300px; flex: 0 0 auto; }
	.blog-card .lp-blog__title { font-size: 18px; }
}

/* Mobile: normalize the blog listing section to the site's 24px rhythm and align
   the banner title + "Featured Blogs" heading to the site scale (banner 26, H2 22). */
@media (max-width: 600px) {
	.blog-list.lp-section { padding-top: 24px !important; padding-bottom: 24px !important; }
	.blog-banner__title { font-size: 26px; }
	.blog-list__heading { font-size: 22px; }
}