/* =============================================================================
 * Component Supply — the blog index and the post card
 *
 * SOW §2.2, "Blog and posts". Two things, because they are one piece of work:
 *
 *   1. THE POST CARD — Theme Builder loop item 1041. It is the card on the
 *      blog index (Archive template 1000) and in every post's Related Posts,
 *      so both get it from here. Was: a shadowed box with 15px corners and a
 *      tinted overlay on hover, an inner frame in #1F547B, a 5px category
 *      badge, a #1F547B title, a #939598 excerpt (3.0:1) over a dashed rule.
 *      Now the system's card (visual-design-production-specs.md §3.3): one
 *      hairline, the one 2px radius, no shadow; title in ink, deep blue on hover;
 *      excerpt and meta in ink-3; Read More as a blue text link.
 *
 *   2. THE BLOG INDEX — Archive template 1000 at /blog/: every section in
 *      the header's band, the Categories sidebar and the pagination in the
 *      system's type.
 *
 * HOW IT WINS: the templates' compiled CSS is (0,3,0) to (0,5,1) —
 * `.elementor-1041 .elementor-element.elementor-element-{id} …`. These rules
 * sit above it, and above site-custom.css's category list (0,1,2). No
 * !important, no element or template IDs: the card is selected as a post's
 * loop item (`.e-loop-item.type-post` — product cards are `type-product`),
 * and its parts by position inside it.
 *
 * Tokens are literal (csc-shared.css scopes them to .csc-widget); each value
 * names its token. Loaded where post cards render: the blog index, post
 * archives and single posts — IFE_SO_Assets::enqueue_blog().
 * ========================================================================== */


/* --- 1. The card -------------------------------------------------------------
 * Card  = the loop item's one container:  .e-loop-item > .e-con
 * Frame = the image and its badge:         … > .e-con-inner > .e-con
 * Body  = title, excerpt, meta, Read More: … > .e-con-inner > .elementor-widget */

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con {
	--padding-top:    0px;
	--padding-right:  0px;
	--padding-bottom: 0px;
	--padding-left:   0px;
	--gap:            0px;
	--row-gap:        0px;
	--border-radius:  2px;
	height:           100%;
	overflow:         hidden;
	border:           1px solid #D5DEE8;       /* --csc-rule */
	border-radius:    2px;
	background-color: #FFFFFF;
	box-shadow:       none;
}

/* Pro drew a tinted overlay over the whole card on hover. The title's colour
 * is the hover cue now. */
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con:hover,
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .e-con:hover {
	--overlay-opacity: 0;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner {
	height: 100%;
}

/* The frame: flush to the card's edge, a hairline under it. */
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .e-con {
	--padding-top:    0px;
	--padding-right:  0px;
	--padding-bottom: 0px;
	--padding-left:   0px;
	--border-radius:  0px;
	position:         relative;
	border:           0;
	border-bottom:    1px solid #D5DEE8;
	border-radius:    0;
}

/* 64 of the 72 featured images are 1584 × 440 strips; the other eight are
 * ~770 wide and taller. One ratio keeps a row's titles on one line; `contain`
 * means the taller eight are never cropped. */
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .e-con > .elementor-widget-image img {
	display:          block;
	width:            100%;
	height:           auto;
	aspect-ratio:     1584 / 440;
	object-fit:       contain;
	background-color: #FFFFFF;
	border-radius:    0;
	box-shadow:       none;
}

/* The category badge, on the frame's lower edge: the system's tag — ink,
 * 2px, mono eyebrow. Was #1F547B with 5px corners at 14px. */
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .e-con > .elementor-widget-post-info {
	right:  20px;
	bottom: -12px;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .e-con > .elementor-widget-post-info > .elementor-widget-container {
	margin:           0;
	padding:          0 10px;
	background-color: #0E1A2A;                  /* --csc-ink */
	border-radius:    2px;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .e-con > .elementor-widget-post-info:hover > .elementor-widget-container {
	background-color: #2E3F55;                  /* --csc-ink-2 */
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .e-con > .elementor-widget-post-info .elementor-icon-list-item {
	font-family:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;   /* --csc-font-mono */
	font-size:      11px;
	font-weight:    700;
	line-height:    24px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .e-con > .elementor-widget-post-info :is(.elementor-icon-list-text, a) {
	color: #FFFFFF;                             /* 17.5:1 on ink */
}

/* The category links are 11px type, so an inline link is 13px tall: under the
   24px minimum target (WCAG 2.2, 2.5.8; axe, 14 Oct). An inline block on the
   line's own 24px height reaches it without moving the text. */
body .elementor-widget-loop-grid .e-loop-item.type-post .elementor-post-info__terms-list-item {
	display:     inline-block;
	min-height:  24px;
	line-height: 24px;
}

/* The body: 20px in from the card's edge. */
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget {
	padding-inline: 20px;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget > .elementor-widget-container {
	margin:  0;
	padding: 0;
	border:  0;
}

/* Title: ink, blue under the pointer. */
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-theme-post-title {
	padding-top: 28px;                          /* clears the badge */
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-theme-post-title .elementor-heading-title,
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-theme-post-title .elementor-heading-title a {
	color:       #0E1A2A;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size:   18px;
	font-weight: 700;
	line-height: 1.3;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-theme-post-title .elementor-heading-title a:hover,
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-theme-post-title .elementor-heading-title a:focus-visible {
	color: #1E5C8E;                             /* --csc-blue-deep, 6.9:1 — the site's link hover. 18px bold
	                                             * is not "large text" (18.66px), so --csc-blue's 4.21 would fail */
}

/* Excerpt: card copy in ink-3. The dashed rule under it goes. */
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-theme-post-excerpt {
	padding-top: 8px;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-theme-post-excerpt,
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-theme-post-excerpt > .elementor-widget-container {
	color:       #5C6B7E;                       /* --csc-ink-3  5.44:1 (was #939598, 3.0:1) */
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size:   14px;
	font-weight: 400;
	line-height: 1.55;
}

/* Date and time: pushed to the card's foot so a row's metas line up, over
 * a hairline. */
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-post-info {
	margin-top: auto;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-post-info > .elementor-widget-container {
	margin-top:  16px;
	padding-top: 12px;
	border-top:  1px solid #D5DEE8;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-post-info .elementor-icon-list-item {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size:   13px;
	font-weight: 400;
	line-height: 1.4;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-post-info .elementor-icon-list-text {
	color: #5C6B7E;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-post-info .elementor-icon-list-icon {
	width: 13px;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-post-info .elementor-icon-list-icon i {
	color:     #5C6B7E;
	font-size: 13px;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-post-info .elementor-icon-list-icon svg {
	fill:                    #5C6B7E;
	--e-icon-list-icon-size: 13px;
}

/* Read More: a link, not a button. Blue text, 14/700 — the system's link
 * type — deep blue under the pointer. */
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-button {
	padding-top:    8px;
	padding-bottom: 20px;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-button .elementor-button {
	padding:          0;
	background-color: transparent;
	border:           0;
	border-radius:    0;
	color:            #2974B2;                  /* --csc-link; the icon keeps --csc-blue */
	fill:             #2D80C3;
	font-family:      'Roboto', Helvetica, Arial, sans-serif;
	font-size:        14px;
	font-weight:      700;
	line-height:      1.4;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-button .elementor-button:hover,
body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-button .elementor-button:focus-visible {
	background-color: transparent;
	color:            #1E5C8E;                  /* --csc-blue-deep */
	fill:             #1E5C8E;
}

body .elementor-widget-loop-grid .e-loop-item.type-post > .e-con > .e-con-inner > .elementor-widget-button .elementor-button-icon svg {
	width:  12px;
	height: 12px;
}


/* --- 2. The blog index -------------------------------------------------------
 * Archive template 1000 at /blog/: a banner, then the card grid (70%) beside
 * a Categories sidebar (30%). */

body.blog .elementor-location-archive > .e-con {
	--content-width: 1200px;                    /* --csc-band */
	--padding-left:  20px;                      /* --csc-gutter */
	--padding-right: 20px;
}

body.blog .elementor-location-archive > .e-con:has(> .e-con-inner > .elementor-widget-image) {
	--padding-top: 32px;
}

/* The template set every row to the tallest card on the page (1fr), so one
 * long title left a gap in every card, and on a phone every card took the
 * tallest's height. Rows follow their content; a row's cards still match,
 * because grid items stretch. */
body.blog .elementor-location-archive .elementor-widget-loop-grid .elementor-loop-container {
	grid-auto-rows: auto;
}

body.blog .elementor-location-archive > .e-con > .e-con-inner > .elementor-widget-image img {
	display:       block;
	width:         100%;
	height:        auto;
	border-radius: 0;
	box-shadow:    none;
}

/* The two columns: no padding of their own, so the grid starts on the band's
 * edge; the sidebar stands 40px off the grid, its heading close to its list. */
body.blog .elementor-location-archive > .e-con > .e-con-inner > .e-con {
	--padding-top:    0px;
	--padding-right:  0px;
	--padding-bottom: 0px;
	--padding-left:   0px;
}

body.blog .elementor-location-archive > .e-con > .e-con-inner > .e-con:has(.styled-post-categories) {
	--padding-left: 40px;
	--gap:          0px;
	--row-gap:      0px;
}

body.blog .elementor-location-archive > .e-con > .e-con-inner > .e-con:has(.styled-post-categories) > .elementor-widget > .elementor-widget-container {
	padding: 0;
}

/* "CATEGORIES": the system's eyebrow — mono, 12px, 700, 0.12em, ink-3. */
body.blog .elementor-location-archive > .e-con > .e-con-inner > .e-con > .elementor-widget-heading h2.elementor-heading-title {
	margin:         0 0 8px;
	color:          #5C6B7E;
	font-family:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size:      12px;
	font-weight:    700;
	line-height:    1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* The category list ([styled_post_categories]). site-custom.css drew it in
 * #1F547B with a font the site never loads (Titillium Web); hairlines and
 * body type now. */
body.blog .styled-post-categories li {
	margin:        0;
	padding:       10px 0;
	border-bottom: 1px solid #D5DEE8;
}

body.blog .styled-post-categories li a {
	color:       #2E3F55;                       /* --csc-ink-2 */
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size:   15px;
	font-weight: 400;
	line-height: 1.4;
}

body.blog .styled-post-categories li a:hover,
body.blog .styled-post-categories li a:focus-visible {
	color: #1E5C8E;                             /* --csc-blue-deep */
}

body.blog .styled-post-categories .arrow-icon {
	color:       #5C6B7E;
	font-weight: 400;
	transform:   none;
}

/* Previous / Next: links in the link type; the one that goes nowhere in
 * ink-3. */
body.blog .elementor-location-archive .elementor-pagination .page-numbers {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size:   14px;
	font-weight: 700;
}

body.blog .elementor-location-archive .elementor-pagination a.page-numbers {
	color: #2974B2;
}

body.blog .elementor-location-archive .elementor-pagination a.page-numbers:hover,
body.blog .elementor-location-archive .elementor-pagination a.page-numbers:focus-visible {
	color: #1E5C8E;
}

body.blog .elementor-location-archive .elementor-pagination span.page-numbers:not(.current) {
	color: #5C6B7E;
}


/* --- 3. Tablet and phone ------------------------------------------------------
 * At tablet the template shrank the sidebar to 20% (~190px). It goes under
 * the grid instead, full width, and the grid keeps its two columns. */

@media (max-width: 1024px) {
	body.blog .elementor-location-archive > .e-con {
		--padding-left:  32px;
		--padding-right: 32px;
	}

	body.blog .elementor-location-archive > .e-con > .e-con-inner:has(> .e-con > .elementor-widget-loop-grid) {
		flex-wrap: wrap;
	}

	body.blog .elementor-location-archive > .e-con > .e-con-inner > .e-con {
		--width: 100%;
	}

	body.blog .elementor-location-archive > .e-con > .e-con-inner > .e-con:has(.styled-post-categories) {
		--padding-left: 0px;
		--padding-top:  48px;
	}
}

@media (max-width: 767px) {
	body.blog .elementor-location-archive > .e-con {
		--padding-left:  16px;
		--padding-right: 16px;
	}

	body.blog .elementor-location-archive > .e-con:has(> .e-con-inner > .elementor-widget-image) {
		--padding-top: 16px;
	}
}