/* BlogV1 — Castle Windows (Figma 15301:27910): dark cards with date + category
   tag rows and a centered CTA below. The header kicker's flanking accent rules
   come from the shared treatment in /styles/site/kicker-flair.css, which the
   ta_ header picks up on its own.

   Card text per the comp's blog card: entry title is the t-2 role (DM Sans
   Bold 30, white — the markup's fnt_t-3 class is re-pointed), the tag pill is
   14px regular as-typed with a 1px accent ring, and Read More is body-face
   16px in the link color with an underline (not the button face). */

.blg.v1 {

	[data-role="item"] > .crd {

		.fnt_t-3 {
			font-family: var(--fnt-t-2-ff);
			font-size: var(--fnt-t-2-s);
			letter-spacing: var(--fnt-t-2-ls);
			line-height: var(--fnt-t-2-lh);
			font-weight: var(--fnt-t-2-w);
			text-transform: var(--fnt-t-2-tt);
			--title-color: var(--fnt-t-2);
		}

		.tag.ctg {
			border: 1px solid var(--accent);
			border-radius: 0;
			padding: 0.125rem 0.5rem;
			font-size: 0.875rem;
			font-weight: 400;
			text-transform: none;
			color: var(--text-color);
		}

		.btn.txt-und {
			font-family: var(--fnt-m);
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.5;
			text-transform: none;
			letter-spacing: normal;

			/* Rollover. The label already swaps to --link-hover with the card, but
			   on the dark surface that tint change is easy to miss, so the rule
			   redraws with it: the comp's resting underline stays put and a second
			   bar in the hover colour wipes across it, left to right. Drawn as two
			   bars rather than text-decoration because a decoration line cannot be
			   animated independently of the text. Borrows the button arrow's speed
			   and easing so the card's two rollovers read as one gesture. */
			text-decoration: none;

			&::before,
			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: var(--bdr-w);
			}

			/* Pinned to --link-color, not currentColor: the label goes white on
			   hover, and a white bar under a white wipe would show nothing. */
			&::before {
				background-color: var(--link-color);
			}

			&::after {
				background-color: var(--link-hover);
				transform: scaleX(0);
				transform-origin: 0 50%;
				transition: transform var(--btn-arw-sp) var(--btn-arw-tf) 0s;
			}
		}

		@media (hover: hover) and (pointer: fine) {

			&:is(:hover, :focus-visible) .btn.txt-und::after {
				transform: scaleX(1);
			}

		}

		/* Same call as the ServicesV8 cards: the catalog's hvr_op-lst fades every
		   sibling to 50% while hvr_zm gives the hovered card a 1.05 photo scale, so
		   the entries you are NOT pointing at carry all the motion. Siblings hold
		   still; the hovered card answers on its own with a slightly deeper zoom.
		   No arrow rule here — this card's CTA is the underlined "Read More" text,
		   not an arrow button. */
		--hvr-zm-amt: 1.08;
	}

	@media (hover: hover) and (pointer: fine) {

		ul:has(.hvr_op-lst:is(:hover, :focus-visible)) .hvr_op-lst:not(:is(:hover, :focus-visible)) {
			opacity: 1;
		}

	}

}