/* ==========================================================================
   Components — buttons, cards, the glow, reveals.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Buttons
   Square, hairline, wide-tracked caps. The primary button fills from the
   bottom rather than swapping colour, which reads as light rising.
   --------------------------------------------------------------------------- */
.lb-btn,
.ast-button,
.button,
button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lb-space-xs);
	isolation: isolate;
	overflow: hidden;
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-small);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	/* 2em rather than 2.4: at 2.4 the hero's two calls to action came to
	   477px against a 463px column and wrapped onto separate lines, which
	   made the secondary action look like an afterthought. */
	padding: 1.15em 2em;
	border: 1px solid var(--lb-on-surface);
	border-radius: var(--lb-radius-sm);
	background-color: transparent;
	color: var(--lb-on-surface);
	cursor: pointer;
	transition: color var(--lb-dur) var(--lb-ease), border-color var(--lb-dur) var(--lb-ease);
}

/* The fill: a pseudo-element scaling up from the bottom edge. */
.lb-btn::before,
.ast-button::before,
.button::before,
.wp-block-button__link::before,
.woocommerce a.button::before,
.woocommerce button.button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--lb-on-surface);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--lb-dur) var(--lb-ease-out);
}

.lb-btn:hover::before,
.ast-button:hover::before,
.button:hover::before,
.wp-block-button__link:hover::before,
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before { transform: scaleY(1); }

.lb-btn:hover,
.ast-button:hover,
.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { color: var(--lb-surface); }

/* Primary: gold-filled from the start, brightening on hover. Used once per
   view — the quote request. */
.lb-btn--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button {
	border-color: var(--lb-gold);
	color: var(--lb-ink);
}

.lb-btn--primary::before,
.woocommerce a.button.alt::before,
.woocommerce button.button.alt::before,
.woocommerce .single_add_to_cart_button::before {
	background-color: var(--lb-gold);
	transform: scaleY(1);
}

.lb-btn--primary:hover::before,
.woocommerce a.button.alt:hover::before,
.woocommerce button.button.alt:hover::before,
.woocommerce .single_add_to_cart_button:hover::before {
	background-color: var(--lb-gold-bright);
	transform: scaleY(1);
}

.lb-btn--primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover { color: var(--lb-ink); }

/* On dark sections the outline button needs the inverted palette. */
.lb-on-ink .lb-btn,
.lb-hero .lb-btn {
	border-color: rgba(236, 233, 226, 0.55);
	color: var(--lb-text-on-ink);
}
.lb-on-ink .lb-btn::before,
.lb-hero .lb-btn::before { background-color: var(--lb-text-on-ink); }
.lb-on-ink .lb-btn:hover,
.lb-hero .lb-btn:hover { color: var(--lb-ink); }

.lb-hero .lb-btn--primary,
.lb-on-ink .lb-btn--primary { border-color: var(--lb-gold); color: var(--lb-ink); }
.lb-hero .lb-btn--primary::before,
.lb-on-ink .lb-btn--primary::before { background-color: var(--lb-gold); }

/* Quiet variant: a text link with an arrow that steps forward on hover. */
.lb-btn--quiet {
	border: 0;
	padding: 0.35em 0;
	background: none;
	overflow: visible;
}
.lb-btn--quiet::before { display: none; }
.lb-btn--quiet:hover { color: var(--lb-accent); }
.lb-btn--quiet .lb-btn__arrow { transition: transform var(--lb-dur) var(--lb-ease-out); }
.lb-btn--quiet:hover .lb-btn__arrow { transform: translateX(0.4em); }
.lb-on-ink .lb-btn--quiet:hover { color: var(--lb-gold-bright); }

/* ---------------------------------------------------------------------------
   The crystal glow.

   Shared by every product image. A soft radial light blooms behind the object
   on hover, as if a lamp behind it had been switched on. This is the single
   signature interaction of the site, so it is defined once and reused.
   --------------------------------------------------------------------------- */
.lb-glow {
	position: relative;
	/* No isolation: the product image blends with what is behind it — now the
	   ink plinth rather than the page — and an isolated stacking context here
	   would confine that blend to this element and bring the square edge back. */
	overflow: hidden;
	/* Ink, matching the product stages in woocommerce.css. This used to be
	   transparent on the argument that the page itself was ink; the page is
	   alabaster now, and a transparent stage under a `lighten` blend would put
	   the photograph against paper and wash the object out completely. */
	background-color: var(--lb-ink);
}

.lb-glow::after {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle at 50% 45%,
		rgba(255, 249, 232, 0.26) 0%,
		rgba(230, 207, 155, 0.15) 34%,
		rgba(220, 230, 240, 0.06) 56%,
		transparent 74%);
	opacity: 0;
	transform: scale(0.85);
	transition:
		opacity var(--lb-dur-slow) var(--lb-ease-out),
		transform var(--lb-dur-slow) var(--lb-ease-out);
}

.lb-glow:hover::after,
.lb-glow:focus-within::after {
	opacity: 1;
	transform: scale(1);
}

/* The object fills its stage and is centred in it.

   This rule used to set only position:relative, which collided with the loop
   rule in woocommerce.css that sizes the image to the frame. The image kept
   its natural aspect instead, so a square photograph sat in the top 280px of
   a 373px stage with a band of dead ink under it, and the objects across a
   row never shared a baseline. Sizing belongs here, with the stage. */
.lb-glow img {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--lb-dur-slow) var(--lb-ease-out);
}

.lb-glow:hover img,
.lb-glow:focus-within img { transform: scale(1.035); }

/* ---------------------------------------------------------------------------
   Collection card — the editorial tile for Maria Theresa, Brilliant, etc.
   Dark, image-led, caption resting on the image.
   --------------------------------------------------------------------------- */
.lb-collection {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--lb-radius);
	background-color: var(--lb-ink);
	color: var(--lb-text-on-ink);
	isolation: isolate;
}

.lb-collection img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--lb-ease-out);
}

.lb-collection:hover img { transform: scale(1.06); }

.lb-collection__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(11, 13, 18, 0.85) 0%,
		rgba(11, 13, 18, 0.25) 45%,
		rgba(11, 13, 18, 0.05) 100%);
}

.lb-collection__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--lb-space-lg);
}

.lb-collection__title {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	color: var(--lb-text-on-ink);
	margin: 0 0 var(--lb-space-2xs);
}

.lb-collection__meta {
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	font-variant-numeric: lining-nums;
	color: var(--lb-gold-bright);
}

/* A gold hairline that draws itself along the bottom edge on hover. */
.lb-collection::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--lb-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--lb-dur-slow) var(--lb-ease-out);
	z-index: 2;
}
.lb-collection:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------------
   Spec list — weight / dimensions / wattage, straight from the GLASS LPS data.
   Presented as a hairline-ruled table, which is how a real catalogue does it.
   --------------------------------------------------------------------------- */
.lb-specs {
	width: 100%;
	border-collapse: collapse;
	margin-block: var(--lb-space-md);
}

.lb-specs th,
.lb-specs td {
	padding: var(--lb-space-sm) 0;
	border-bottom: 1px solid var(--lb-rule);
	text-align: left;
	font-size: var(--lb-size-small);
	vertical-align: baseline;
}

.lb-specs th {
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
	width: 42%;
	font-size: var(--lb-size-micro);
}

.lb-specs td { color: var(--lb-on-surface); }

/* ---------------------------------------------------------------------------
   Trust strip — the exclusivity claim. Understated, hairline-ruled.
   --------------------------------------------------------------------------- */
.lb-trust {
	display: grid;
	gap: var(--lb-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	padding-block: var(--lb-space-lg);
	border-block: 1px solid var(--lb-rule);
}

.lb-trust__item { text-align: center; }

.lb-trust__value {
	font-family: var(--lb-font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	font-weight: 300;
	font-variant-numeric: lining-nums;
	color: var(--lb-accent);
	line-height: 1.1;
}

.lb-trust__label {
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
	margin-top: var(--lb-space-xs);
}

/* ---------------------------------------------------------------------------
   Scroll reveal. Progressive enhancement: without JS the elements are simply
   visible, because the class that hides them (.lb-js) is added by script.
   --------------------------------------------------------------------------- */
.lb-js .lb-reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity var(--lb-dur-slow) var(--lb-ease-out),
		transform var(--lb-dur-slow) var(--lb-ease-out);
}

.lb-js .lb-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Staggered children, for grids. --lb-i is set inline by theme.js. */
.lb-js .lb-reveal-group > * {
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity var(--lb-dur-slow) var(--lb-ease-out),
		transform var(--lb-dur-slow) var(--lb-ease-out);
	transition-delay: calc(var(--lb-i, 0) * 90ms);
}

.lb-js .lb-reveal-group.is-visible > * {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lb-js .lb-reveal,
	.lb-js .lb-reveal-group > * { opacity: 1; transform: none; }
	.lb-hero__media img { animation: none; }
}


/* ---------------------------------------------------------------------------
   Legal documents.

   Terms, privacy and returns are long-form reading, not marketing. They get a
   narrow measure, generous leading and a visible heading hierarchy, because a
   consumer who cannot find the withdrawal clause has, in practice, not been
   informed of it.
   --------------------------------------------------------------------------- */
.lb-legal-page .entry-content,
.lb-legal-page .ast-container .entry-content {
	max-width: var(--lb-container-text);
	margin-inline: auto;
	font-size: var(--lb-size-body);
	line-height: var(--lb-leading-body);
}

.lb-legal-page .entry-content h2 {
	font-family: var(--lb-font-display);
	font-size: var(--lb-size-h3);
	margin-top: var(--lb-space-xl);
	margin-bottom: var(--lb-space-sm);
	padding-top: var(--lb-space-md);
	border-top: 1px solid var(--lb-rule);
}

.lb-legal-page .entry-content h3 {
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0;
	margin-top: var(--lb-space-lg);
	margin-bottom: var(--lb-space-xs);
}

.lb-legal-page .entry-content li + li { margin-top: var(--lb-space-2xs); }

.lb-legal__updated {
	font-size: var(--lb-size-small);
	color: var(--lb-on-surface-muted);
}

/* A clause a customer will be held to — the made-to-order return exclusion,
   the five-day damage window — gets a gold rule so it survives skimming. It is
   a rule and not a colour fill: shouting at the reader in a legal document
   reads as a disclaimer they are meant to ignore. */
.lb-legal__flag {
	border-top: 2px solid var(--lb-gold) !important;
}

.lb-legal__form {
	border-left: 2px solid var(--lb-rule);
	padding: var(--lb-space-md) var(--lb-space-lg);
	margin: var(--lb-space-lg) 0;
	background: var(--lb-raised);
	font-size: var(--lb-size-small);
}

.lb-legal__form p { margin: 0 0 var(--lb-space-sm); }

/* Tables carry the GDPR purpose/basis matrix and the cookie categories, which
   are wide by nature. They scroll inside their own box rather than forcing the
   page to scroll sideways on a phone. */
.lb-table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--lb-space-md) 0 var(--lb-space-lg);
	font-size: var(--lb-size-small);
	display: block;
	overflow-x: auto;
}

.lb-table th,
.lb-table td {
	border: 1px solid var(--lb-rule);
	padding: var(--lb-space-sm) var(--lb-space-md);
	text-align: left;
	vertical-align: top;
}

.lb-table thead th {
	background: var(--lb-raised);
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	font-weight: 500;
}

.lb-table tbody th[scope="row"] {
	background: var(--lb-raised);
	font-weight: 500;
	white-space: nowrap;
}

.lb-table code {
	font-size: 0.95em;
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   Browse-by-type tile.

   Deliberately not a card: no border, no fill, no shadow. The product
   photography arrives on a black background, so the frame itself is ink and
   the caption sits on the page ground below it. That keeps the black image
   from looking like a mistake inside a white box, which is the failure mode
   this catalogue's photography invites.

   object-fit is `contain`, not `cover`: a chandelier's silhouette *is* the
   product, and cropping it is what makes a lighting shop look like a
   marketplace.
   --------------------------------------------------------------------------- */
.lb-type {
	display: grid;
	gap: var(--lb-space-sm);
	color: var(--lb-on-surface);
}

.lb-type__frame {
	position: relative;
	display: block;
	/* Square, because the source files are. Every catalogue image is a square
	   JPEG (712x712, 800x800, 864x864), and `contain` fits it to the narrower
	   axis: a 3:4 frame therefore letterboxed a quarter of every tile with
	   black that read as part of the photograph. */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* The same ink plinth the product tiles get, and for the same reason:
	   on a light page it is what turns a category thumbnail into a lit
	   object rather than a photograph with a visible rectangular edge. */
	background-color: var(--lb-ink);
	border-radius: var(--lb-radius);
}

/* The same light-behind-the-object bloom used on product images, tuned
   warmer here because it sits on ink rather than on bone. */
.lb-type__frame::after {
	content: "";
	position: absolute;
	inset: -15%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle at 50% 42%,
		rgba(255, 249, 232, 0.30) 0%,
		rgba(230, 207, 155, 0.16) 35%,
		transparent 68%);
	opacity: 0;
	transform: scale(0.9);
	transition:
		opacity var(--lb-dur-slow) var(--lb-ease-out),
		transform var(--lb-dur-slow) var(--lb-ease-out);
}

.lb-type:hover .lb-type__frame::after,
.lb-type:focus-visible .lb-type__frame::after {
	opacity: 1;
	transform: scale(1);
}

.lb-type__frame img {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Barely any inset. object-fit already keeps the whole silhouette inside
	   the box; padding on top of it only shrinks the object and grows the
	   emptiness around it. */
	padding: var(--lb-space-xs);
	transition: transform var(--lb-dur-slow) var(--lb-ease-out);
}

.lb-type:hover .lb-type__frame img { transform: scale(1.04); }

.lb-type__body {
	display: grid;
	gap: 0.15rem;
	padding-top: var(--lb-space-2xs);
	border-top: 1px solid var(--lb-rule);
	transition: border-color var(--lb-dur) var(--lb-ease);
}

.lb-type:hover .lb-type__body { border-top-color: var(--lb-gold); }

.lb-type__title {
	font-family: var(--lb-font-display);
	font-size: var(--lb-size-h3);
	font-weight: 300;
	line-height: 1.2;
}

.lb-type__note {
	font-size: var(--lb-size-small);
	color: var(--lb-on-surface-muted);
}

.lb-type__count {
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	font-variant-numeric: lining-nums;
	color: var(--lb-accent);
	margin-top: var(--lb-space-2xs);
}

.lb-on-ink .lb-type__count { color: var(--lb-gold); }

/* ---------------------------------------------------------------------------
   Figures — the scale of the catalogue, stated as a spec table rather than as
   an adjective. Real numbers, parsed from the product titles.
   --------------------------------------------------------------------------- */
.lb-figures {
	display: grid;
	gap: 0;
	margin: 0;
	align-content: start;
}

.lb-figures__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lb-space-sm);
	padding-block: var(--lb-space-md);
	border-top: 1px solid var(--lb-rule);
}

.lb-figures__item:last-child { border-bottom: 1px solid var(--lb-rule); }

.lb-figures dt {
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
}

.lb-figures dd {
	margin: 0;
	font-family: var(--lb-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	font-weight: 300;
	font-variant-numeric: lining-nums;
	/* The accent, not --lb-gold: the panel is light, and the bright gold
	   measured 2.3:1 against it, well under the 4.5:1 text needs. */
	color: var(--lb-accent);
	line-height: 1.15;
}

/* ---------------------------------------------------------------------------
   Closing call to action. A band, not a card — hairline top and bottom, so it
   reads as a considered pause rather than as a promo box.
   --------------------------------------------------------------------------- */
.lb-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--lb-space-lg);
	padding-block: var(--lb-space-xl);
	border-block: 1px solid var(--lb-rule);
}

.lb-cta > div:first-child { max-width: 46ch; }

.lb-cta__title {
	font-size: var(--lb-size-h2);
	margin: 0 0 var(--lb-space-md);
	max-width: 22ch;
}

.lb-cta__text {
	color: var(--lb-on-surface-muted);
	margin: 0;
}

.lb-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-sm);
}

/* ---------------------------------------------------------------------------
   Contact details.

   Phone numbers are the primary conversion on a catalogue where the median
   piece costs 6.600 lei, so they are set at reading size, not as small print,
   and every one of them dials on tap.
   --------------------------------------------------------------------------- */
.lb-contact__heading {
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-micro);
	font-weight: 500;
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
	margin: var(--lb-space-xl) 0 var(--lb-space-md);
}

.lb-contact__heading:first-child { margin-top: 0; }

.lb-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--lb-space-md);
}

.lb-contact__label {
	display: block;
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
	margin-bottom: 0.15rem;
}

.lb-contact__value {
	font-family: var(--lb-font-display);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	font-weight: 300;
	font-variant-numeric: lining-nums;
	line-height: 1.2;
	background-image: linear-gradient(var(--lb-gold), var(--lb-gold));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size var(--lb-dur) var(--lb-ease-out), color var(--lb-dur-fast) var(--lb-ease);
}

.lb-contact__value:hover,
.lb-contact__value:focus-visible {
	color: var(--lb-accent);
	background-size: 100% 1px;
}

.lb-contact__hours,
.lb-contact__address {
	color: var(--lb-on-surface-muted);
	font-size: var(--lb-size-small);
	margin-top: var(--lb-space-sm);
}

/* The identification line the law requires, set on ink so it reads as a
   statement of record rather than as small print. */
.lb-identity {
	max-width: 90ch;
	font-size: var(--lb-size-small);
	color: var(--lb-on-surface-muted);
}

/* ---------------------------------------------------------------------------
   Aside note — the "what to tell us" panel. Bone fill with a gold hairline on
   the leading edge; the one place on the site a filled box is warranted,
   because it is genuinely a parenthesis to the column beside it.
   --------------------------------------------------------------------------- */
/* A note is advice, not a product, so by the page's own rule it belongs on
   paper. It used to paint itself --lb-ink-raised unconditionally without
   flipping its text tokens with it; once the page went light that left
   #1a1d24 type on a #12151d panel, a contrast ratio of 1.08, which is to say
   the contact page's entire "what to tell us" checklist was invisible.

   Bone on alabaster gives the panel its own surface without a border box, and
   the accent rule carries the emphasis. */
.lb-note {
	background: var(--lb-raised);
	border-left: 2px solid var(--lb-accent);
	padding: var(--lb-space-lg);
}

/* Inside an ink band it steps the other way, and takes the ink text tokens
   with it — the bug above was this rule's absence, not its presence. */
.lb-on-ink .lb-note {
	--lb-on-surface:       var(--lb-text-on-ink);
	--lb-on-surface-muted: var(--lb-text-on-ink-muted);
	--lb-rule:             var(--lb-ink-line);
	background: var(--lb-ink-soft);
	border-left-color: var(--lb-gold);
	color: var(--lb-on-surface);
}

.lb-note__title {
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-micro);
	font-weight: 500;
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
	margin: 0 0 var(--lb-space-md);
}

.lb-note__text {
	font-size: var(--lb-size-small);
	color: var(--lb-on-surface-muted);
	margin-bottom: var(--lb-space-md);
}

.lb-note__list {
	margin: 0 0 var(--lb-space-md);
	padding-left: 1.1rem;
	font-size: var(--lb-size-small);
	display: grid;
	gap: var(--lb-space-2xs);
}

.lb-note .lb-figures { margin-bottom: var(--lb-space-md); }

/* ---------------------------------------------------------------------------
   Numbered steps.

   The numbering is real information here — this is a sequence a client moves
   through in order — so the counter earns its place rather than decorating.
   --------------------------------------------------------------------------- */
.lb-steps {
	list-style: none;
	counter-reset: lb-step;
	margin: var(--lb-space-lg) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
}

/* The number sits in the first column; everything else goes in the second.

   Without pinning them, grid auto-placement filled the cells in order: the
   ::before counter took row 1 column 1, the title took row 1 column 2, and
   the description dropped into row 2 column 1 — the 3rem number column. At
   48px wide that set the paragraph one word per line, which is what the
   Proiecte page was doing to all four steps.

   Pinning the counter to row 1 and sending every real child to column 2 is
   the fix, and it also stops a step breaking if it ever gains a third
   element. */
.lb-steps__item {
	counter-increment: lb-step;
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 0 var(--lb-space-md);
	padding-block: var(--lb-space-lg);
	border-top: 1px solid var(--lb-rule);
}

.lb-steps__item::before {
	grid-column: 1;
	grid-row: 1;
}

.lb-steps__item > * {
	grid-column: 2;
}

.lb-steps__item:last-child { border-bottom: 1px solid var(--lb-rule); }

.lb-steps__item::before {
	content: counter(lb-step, decimal-leading-zero);
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-micro);
	font-variant-numeric: lining-nums;
	letter-spacing: var(--lb-tracking-eyebrow);
	color: var(--lb-accent);
	padding-top: 0.45em;
}

.lb-on-ink .lb-steps__item::before { color: var(--lb-gold); }

.lb-steps__title {
	font-family: var(--lb-font-display);
	font-size: var(--lb-size-h3);
	font-weight: 400;
	margin: 0 0 var(--lb-space-2xs);
}

.lb-steps__item p {
	margin: 0;
	color: var(--lb-on-surface-muted);
	font-size: var(--lb-size-small);
}

@media (max-width: 34rem) {
	.lb-steps__item { grid-template-columns: 2rem 1fr; gap: var(--lb-space-sm); }
}

/* ---------------------------------------------------------------------------
   Steps, laid out as a row.

   The vertical variant above suits a page where the steps are the content
   (/proiecte/). On the homepage they are one section among seven, so they run
   across instead: four columns divided by hairlines, the number set above the
   title rather than beside it. Same markup, same counter.
   --------------------------------------------------------------------------- */
.lb-steps--row {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	border-top: 1px solid var(--lb-rule);
	border-bottom: 1px solid var(--lb-rule);
}

.lb-steps--row .lb-steps__item {
	grid-template-columns: 1fr;
	gap: var(--lb-space-2xs);
	border-top: 0;
	border-left: 1px solid var(--lb-rule);
	padding: var(--lb-space-lg) var(--lb-space-md);
}

.lb-steps--row .lb-steps__item:last-child { border-bottom: 0; }

/* The first column aligns with the container edge, so it carries no rule and
   no left padding. auto-fit means the row can wrap, so the rule is also
   dropped from whichever item starts a new line. */
.lb-steps--row .lb-steps__item:first-child { border-left: 0; padding-left: 0; }

.lb-steps--row .lb-steps__item::before { padding-top: 0; }

@media (max-width: 52rem) {
	.lb-steps--row .lb-steps__item {
		border-left: 0;
		border-top: 1px solid var(--lb-rule);
		padding-inline: 0;
	}
	.lb-steps--row .lb-steps__item:first-child { border-top: 0; }
}

/* A single line of qualifying prose under a block, with its link inline.
   Smaller and muted, because it is a caveat rather than a claim. */
.lb-note-line {
	margin-top: var(--lb-space-md);
	max-width: 78ch;
	font-size: var(--lb-size-small);
	color: var(--lb-on-surface-muted);
}

.lb-note-line a {
	color: var(--lb-gold);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-color: var(--lb-ink-line);
}

.lb-note-line a:hover { text-decoration-color: var(--lb-gold); }

/* Grouped numbers under one label each take their own line. `table` rather
   than `block` so the gold hover underline stays as wide as the number
   instead of stretching to the column. */
.lb-contact__list .lb-contact__value { display: table; }