/* ============================================================
   LEVEL UP SMARTER — BLOG CARDS (loop template 172)
   Added 2026-08-20. Owner's request: restyle the cards.

   WHAT THE CARD IS
   ----------------
   Loop template 172 renders each post as:

     section .loop-item-e   featured image as a BACKGROUND, min-height
                            300px, content anchored to the bottom
       column .blur-col-e   translucent white panel, backdrop blur
         heading            .post-title-blog-line, dynamic post title
         icon               arrow, links to the post

   WHAT WAS WRONG
   --------------
   An Elementor snippet ("Text - blog same size", post 190) ran on
   DOMContentLoaded and did two things in JavaScript:

     1. cut every title to SIX WORDS and appended "..."
     2. measured every title and set a matching inline pixel height

   That is why the grid read "THE GROUP THAT READ IT 14..." and
   "BRAIN HACKS FOR LEARNING FASTER: LESSONS..." — titles cut
   mid-thought, sometimes mid-number. The full title was always in the
   HTML; the browser threw it away after load.

   The snippet is now set to draft. Both jobs are done here instead,
   in CSS, where they belong:

     - line-clamp gives a clean ellipsis at a LINE boundary, never
       mid-word, and never mid-number
     - a fixed clamp height makes every title block the same height
       without measuring anything, so there is no layout thrash on
       resize and no flash of untruncated text

   If the snippet is ever re-published it will start cutting titles
   again and fight this file. It should stay a draft.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   1 — TITLES: CLAMP BY LINE, NOT BY WORD
   ══════════════════════════════════════════════════════════ */

.e-loop-item .post-title-blog-line {
	/* The old JS wrote an inline height here. Nothing sets it now, but
	   be explicit so a cached page with the old script cannot leave a
	   stale pixel height behind. */
	height: auto !important;
}

.e-loop-item .post-title-blog-line .elementor-heading-title,
.e-loop-item .post-title-blog-line a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;

	/* 28px type on a 28px line was set tight for six-word stubs. Real
	   titles run three lines, so they need room to breathe between
	   them. */
	line-height: 1.15;
	text-wrap: balance;
}


/* ══════════════════════════════════════════════════════════
   2 — THE CARD ITSELF
   ══════════════════════════════════════════════════════════ */

.e-loop-item .loop-item-e {
	position: relative;
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease;
}

/* The featured image is a background on the section, so it cannot be
   scaled directly without moving the text with it. A pseudo-element
   inherits the same background and sits behind the content, which can
   be scaled on its own. */
.e-loop-item .loop-item-e::before {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	transition: transform .45s cubic-bezier(.2, .6, .2, 1);
	z-index: 0;
}

.e-loop-item .loop-item-e > * {
	position: relative;
	z-index: 1;
}

/* ── Hover ──────────────────────────────────────────────── */

@media (hover: hover) {
	.e-loop-item .loop-item-e:hover {
		box-shadow: 0 12px 28px rgba(16, 16, 24, .16);
	}

	.e-loop-item .loop-item-e:hover::before {
		transform: scale(1.04);
	}

	/* The panel goes from translucent to solid so the title sharpens
	   on approach rather than staying washed out over the photo. */
	.e-loop-item .loop-item-e:hover .blur-col-e {
		background-color: #fff !important;
	}

	.e-loop-item .loop-item-e:hover .elementor-widget-icon i {
		transform: translateX(4px);
	}
}

.e-loop-item .blur-col-e {
	transition: background-color .25s ease;
}

.e-loop-item .elementor-widget-icon i {
	transition: transform .25s ease;
}

/* Keyboard users get the same affordance as mouse users. */
.e-loop-item .loop-item-e:focus-within {
	box-shadow: 0 0 0 3px #7C6AF7, 0 12px 28px rgba(16, 16, 24, .16);
}


/* ══════════════════════════════════════════════════════════
   3 — DATE, CATEGORY AND DECK
   Added 2026-08-20 alongside three new widgets in loop template
   172 (date, category, deck). None of them existed in the markup
   before, which is why this could not be done in CSS alone.

   Each is a heading widget driven by a dynamic tag, so they arrive
   as block-level divs at heading size. This turns them into what
   they actually are: a small meta line and a two-line deck.
   ══════════════════════════════════════════════════════════ */

/* ── The meta line: AUG 12, 2026 · BLOG ─────────────────── */

.e-loop-item .lus-card-meta {
	display: inline-block;
	margin: 0;
}

.e-loop-item .lus-card-meta .elementor-heading-title {
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.4;
	color: #6b6b78;
}

/* The separator lives on the date so it never orphans: if the
   category is ever empty the dot goes with it. */
.e-loop-item .lus-card-date::after {
	content: "·";
	margin: 0 .5em;
	color: #b9b9c4;
	font-weight: 700;
}

.e-loop-item .lus-card-meta + .lus-card-meta {
	margin-left: 0;
}

/* Push the whole meta row off the title. */
.e-loop-item .lus-card-cat {
	margin-bottom: 6px;
}


/* ── The deck ───────────────────────────────────────────── */

.e-loop-item .lus-card-deck {
	margin-top: 8px;
}

.e-loop-item .lus-card-deck .elementor-heading-title {
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: #3f3f4a;

	/* Two lines, clamped at a line boundary. Without this the deck
	   runs five or six lines, every card ends up a different height,
	   and the grid rows stretch to whichever post has the longest
	   excerpt. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The title no longer needs three lines now that a deck carries the
   detail — two keeps every card the same shape. */
.e-loop-item .post-title-blog-line .elementor-heading-title,
.e-loop-item .post-title-blog-line a {
	-webkit-line-clamp: 2;
	font-size: 24px;
}

/* The arrow was pulled up 25px to sit against the old title-only
   card. With a deck under the title it has room of its own. */
.e-loop-item .elementor-widget-icon {
	margin-top: 0 !important;
}

/* ── Put the meta pair on ONE line ───────────────────────────────
   Elementor columns lay their widgets out as a flex COLUMN, so the
   date and the category each took a full row and inline-block on the
   widget did nothing.

   The wrap becomes a wrapping flex ROW, every widget is forced back
   to full width, and only the two meta widgets are allowed to size
   to their content. Title, deck and arrow keep stacking exactly as
   before.
   ─────────────────────────────────────────────────────────────── */

.e-loop-item .blur-col-e > .elementor-widget-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

.e-loop-item .blur-col-e > .elementor-widget-wrap > .elementor-widget {
	width: 100%;
}

.e-loop-item .blur-col-e > .elementor-widget-wrap > .elementor-widget.lus-card-meta {
	width: auto;
}

/* ── The separator ───────────────────────────────────────────────
   ::after on the date widget produced nothing usable once the wrap
   became a flex row - the date and category ran together as
   "OCTOBER 13, 2025BLOG". The gap is now owned by the flex
   container, and the dot hangs off the CATEGORY instead, so it can
   never be left orphaned at the end of a line when a category is
   missing.
   ─────────────────────────────────────────────────────────────── */

.e-loop-item .blur-col-e > .elementor-widget-wrap {
	column-gap: .55em;
	row-gap: 0;
}

.e-loop-item .lus-card-date::after { content: none; }

.e-loop-item .lus-card-cat::before {
	content: "·";
	margin-right: .55em;
	color: #b9b9c4;
	font-weight: 700;
	font-size: 11px;
}

/* The category box was sizing narrow and wrapping its own text, so
   the dot sat at the end of line one and "BLOG" dropped to line two.
   Meta items size to content and never wrap internally. */
.e-loop-item .blur-col-e > .elementor-widget-wrap > .elementor-widget.lus-card-meta {
	flex: 0 0 auto;
	white-space: nowrap;
}
.e-loop-item .lus-card-meta .elementor-heading-title { white-space: nowrap; }

/* The dynamic-tag headings render with header_size "div", so the text
   is a BLOCK element. An inline ::before dot therefore took line one
   and the block text dropped to line two - the category looked
   wrapped even though its flex item was correctly sized and sitting
   beside the date. Inline text keeps the dot and the label together. */
.e-loop-item .lus-card-meta .elementor-heading-title {
	display: inline;
}
/* ============================================================
   LEVEL UP SMARTER — SUPPLEMENTS PAGE (page 1165)
   Added 2026-08-20. Owner: "it uses the old theme and looks
   terrible" — it was raw WordPress output, default headings and
   default red links, with none of the article treatment.

   The page content was flat siblings:

     h2  category
     h3  compound
     p   description
     p   > a  buy link
     h3  compound ...

   CSS cannot box a group of siblings, so the content itself was
   rewritten into card markup. The TEXT was not touched: the
   rewrite was verified by stripping all tags from the old and new
   content and comparing character for character. Only wrappers and
   class names changed. The original content is in the
   _lus_content_backup meta on page 1165.
   ============================================================ */

/* ── Intro ──────────────────────────────────────────────── */

.lus-supp-intro {
	font-size: 18px;
	line-height: 1.6;
	max-width: 68ch;
	color: #2f2f39;
}

/* ── Category heading ───────────────────────────────────── */

.lus-supp-cat {
	margin: 56px 0 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #ece9ff;
	font-size: 15px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #7C6AF7;
}

/* The first category should not push away from the intro as hard. */
.lus-supp-intro + .lus-supp-cat,
.lus-supp-intro ~ .lus-supp-cat:first-of-type {
	margin-top: 40px;
}

/* ── The grid ───────────────────────────────────────────── */

.lus-supp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-bottom: 8px;
}

/* ── The card ───────────────────────────────────────────── */

.lus-supp-card {
	display: flex;
	flex-direction: column;
	padding: 24px 24px 20px;
	border: 1px solid #e8e6f2;
	border-radius: 14px;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

@media (hover: hover) {
	.lus-supp-card:hover {
		border-color: #cfc8ff;
		box-shadow: 0 10px 24px rgba(16, 16, 24, .08);
		transform: translateY(-2px);
	}
}

.lus-supp-name {
	margin: 0 0 10px;
	font-size: 21px;
	line-height: 1.2;
	color: #14141c;
}

.lus-supp-desc {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
	color: #4a4a57;
}

/* The buy link is the last thing in the card and is pinned to the
   bottom, so every button in a row lines up even when the
   descriptions differ in length. */
.lus-supp-buy {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: 10px 18px;
	border-radius: 999px;
	background: #7C6AF7;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	transition: background-color .2s ease, transform .2s ease;
}

.lus-supp-buy::after {
	content: "\2192";
	font-size: 15px;
	transition: transform .2s ease;
}

.lus-supp-buy:hover {
	background: #6753e3;
	color: #fff !important;
}

.lus-supp-buy:hover::after {
	transform: translateX(3px);
}

.lus-supp-buy:focus-visible {
	outline: 3px solid #14141c;
	outline-offset: 2px;
}

/* A compound with no link still needs to sit level with its row. */
.lus-supp-card > .lus-supp-desc:last-child {
	margin-bottom: 0;
}

/* The buy button's `margin-top: auto` was being overridden by a theme rule on
   content links, so buttons sat directly under their description instead of at
   the card's bottom edge - three buttons in a row at three different heights.
   The grid is told to stretch explicitly too: one card was 314px next to two
   at 338px. */
.lus-supp-grid { align-items: stretch; }

.lus-supp-card > .lus-supp-buy {
	margin-top: auto !important;
	margin-bottom: 0 !important;
}

/* wpautop wraps a bare <a> in a <p> on output, so .lus-supp-buy is never a
   direct flex child of the card and margin-top:auto on it did nothing. Pin the
   card's LAST child instead, whatever it turns out to be - the wrapping
   paragraph when there is a buy link, the description when there is not. */
.lus-supp-card > *:last-child {
	margin-top: auto !important;
	margin-bottom: 0 !important;
}