/*
 * Blogs section — title row with view-all link, three-column post grid.
 * docs/step-19-blogs-section.md, measured live at 1440px against
 * https://stodio.webflow.io/.
 *
 * The view-all link chassis (.idia-gallery__view-all-link,
 * .idia-gallery__view-all-mask) is defined once in gallery.css and reused
 * here unmodified — see blogs-section.php's own comment for why. This file
 * does not redeclare it.
 */

/* ---- Section / container ----
   Rail padding for CONTAINER is a literal CSS rule reading --wp--custom--rail
   directly, the same mechanism pricing.css and faq.css use — WRAPPER
   (.idia-blogs) is align:full with layout:constrained, so WordPress's
   has-global-padding de-dup rule would otherwise zero CONTAINER's own
   auto-applied root padding. !important for the same reason documented in
   pricing.css: CONTAINER itself carries has-global-padding, tying on
   specificity with core's own zero-padding de-dup rule, which prints after
   this enqueued file. */
.idia-blogs__container {
	padding-left: var(--wp--custom--rail) !important;
	padding-right: var(--wp--custom--rail) !important;
}

/* ---- Title row ---- */

.idia-blogs__title-row {
	gap: var(--wp--preset--spacing--32);
}

.idia-blogs__heading-accent {
	color: var(--wp--preset--color--main-accent);
}

@media (max-width: 767px) {

	.idia-blogs__title-row {
		flex-direction: column;
		align-items: flex-start !important;
	}
}

/* ---- Card grid ----
   The grid itself is core/post-template's own `layout: {"type": "grid",
   "columnCount": 3}` support — WordPress emits
   `grid-template-columns: repeat(3, minmax(0, 1fr))` inline, the same
   fluid-track choice pricing.css and counter.css make for the same reason:
   changing the query's post count in the editor (this section's own
   acceptance test) reflows real columns instead of stretching or leaving
   gaps in fixed-width tracks. !important on the breakpoint override below
   for the same specificity fight documented in pricing.css/gallery.css:
   WordPress prints this generated grid-template-columns as inline
   per-instance CSS after every enqueued theme stylesheet. */
.idia-blogs__collection-list .wp-block-post-template {
	gap: var(--wp--preset--spacing--20);
}

/* Reference (.collection-list.blogs) drops to 2 columns at 991px, then to 1
   column at 767px — confirmed by extracting all @media blocks directly from
   the crawled CSS (docs/step-homepage-responsiveness-audit.md): the 767px
   block contains `.collection-list.blogs{grid-template-columns:1fr}`
   verbatim. A prior version of this comment claimed the reference stays
   2-up through 767/479 with no further collapse; that was wrong — re-checked
   against the source file directly, not re-derived from memory. */
@media (max-width: 991px) {

	.idia-blogs__collection-list .wp-block-post-template {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 767px) {

	.idia-blogs__collection-list .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}

/* ---- Card ----
   Tag top-left, 180x144 image top-right, content below — see
   blogs-section.php's own comment on why this is a plain vertical stack
   rather than the reference's relatively-positioned overlap construction. */
.idia-blogs__single-card {
	width: 100%;
}

.idia-blogs__card-top-wrapper {
	width: 100%;
}

.idia-blogs__tag {
	display: inline-flex;
	align-items: center;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--preset--border-radius--sm);
	padding: 0 var(--wp--preset--spacing--12);
	color: var(--wp--preset--color--main);
	text-decoration: none;
}

.idia-blogs__image-wrapper {
	border-radius: var(--wp--custom--radius--12);
	overflow: hidden;
	flex-shrink: 0;
}

.idia-blogs__image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The hover: image scale only, clipped by this wrapper's own
	   overflow:hidden — a third distinct hover gesture on the site
	   alongside the button radius change (§11.1) and the view-all link's
	   slide-in reveal. AGENTS.md §11.1 asks for one gesture, consistently
	   applied; this section adds a third because the reference does it and
	   the doc explicitly asks it be built and flagged, not skipped. */
	transition: transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
}

.idia-blogs__single-card:hover .idia-blogs__image-wrapper img {
	transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {

	.idia-blogs__image-wrapper img {
		transition: none;
	}
}

.idia-blogs__info {
	width: 100%;
}

.idia-blogs__read-time {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
}

.idia-blogs__read-time-circle {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: var(--wp--preset--border-radius--full);
	background-color: var(--wp--preset--color--primary-dark);
	flex-shrink: 0;
}

/* Card title: AGENTS.md §9.3 reserves weight 600 for emphasis inside body
   copy, not headings. The reference's card title is weight 600 on an <h2>;
   here it is a genuine heading (core/post-title, level 3 — see
   blogs-section.php's comment on why level 3), so the fix is not
   reproducing 600 at all, rather than moving it to a non-heading element
   the way pricing.css and counter.css do for their own weight-600 cases.
   No override needed here — h3's own theme.json element default (500)
   applies with nothing to countermand. */
.idia-blogs__card-title a {
	text-decoration: none;
	color: var(--wp--preset--color--main);
}

.idia-blogs__excerpt {
	margin: 0;
}

/* ---- Title + card entrance — starting state ----
   Standard "Fade In" family (blur + rise + fade — same mechanism as the hero
   and CTA), applied to the title block (single row, 300ms) and every card
   (uniform 300ms, not staggered). Unlike marquee/gallery/service/pricing/FAQ,
   the blogs title row is NOT split into slideInLeft/Right columns — the tag
   +heading and the "View all" link sit inline in one row here, a genuine
   design difference confirmed in the reference's own IX2 data (the title
   uses the same blur-fade family as everything else, not slideInLeft). The
   "View all posts" link has no entrance of its own — hover only, same
   shared mechanism as gallery's identical link. See
   animation-map-remaining-sections.json, blogs section. Opt-in only: scoped
   to prefers-reduced-motion: no-preference, so a reduced-motion visitor's
   section renders complete and settled immediately — blogs-reveal.js
   independently checks the same media query before running these tweens. */
@media (prefers-reduced-motion: no-preference) {

	.idia-blogs__title-row > .is-measure-aside,
	.idia-blogs__single-card {
		opacity: 0;
		transform: translateY(50px);
		filter: blur(5px);
	}
}