/*
 * SHOWA SEO — the few pieces the theme's long-description block has no style for.
 *
 * The body of these pages is deliberately the theme's own "read more" section
 * (.blf-archive__longdesc), so headings, paragraphs and the sticky table of
 * contents are already styled. Only what the workbook adds on top needs rules:
 * the shared industry anchors, the visible FAQ, the CTA, the professional
 * disclaimer and the related-category list.
 *
 * Loaded only on the SHOWA pages themselves (see Frontend::assets()), and using
 * the theme's --bl-* tokens with literal fallbacks so it degrades gracefully if
 * it is ever pulled in without main.css.
 */

/* The 13 shared anchors are a link target: keep the sticky header off them. */
.blf-showa-anchor,
.blf-showa-faq__q,
.blf-archive__longdesc [id^="showa-"] {
	scroll-margin-top: 110px;
}

.blf-showa-anchor {
	margin-top: 1.6em;
	padding-left: .7em;
	border-left: 3px solid var(--bl-orange, #E8550D);
}

/* --- Visible FAQ ------------------------------------------------------- */

.blf-showa-faq {
	margin-top: 1em;
}

.blf-showa-faq__q {
	margin-bottom: .35em;
	font-size: 1.05rem;
	color: var(--bl-navy, #0B2C5A);
}

.blf-showa-faq__a {
	margin-top: 0;
	color: var(--bl-ink, #1A1F2B);
}

/* --- CTA and disclaimer ------------------------------------------------ */

.blf-showa-cta {
	margin: 1.8em 0 1.2em;
}

.blf-showa-notice {
	margin: 1.5em 0;
	padding: 1em 1.15em;
	border: 1px solid var(--bl-line, #E5E7EB);
	border-left: 4px solid var(--bl-blue, #1858A8);
	border-radius: var(--bl-radius, 10px);
	background: var(--bl-soft, #F6F8FB);
}

.blf-showa-notice p {
	margin: 0;
	font-size: .95rem;
	color: var(--bl-muted, #6B7280);
}

.blf-showa-notice strong {
	color: var(--bl-navy, #0B2C5A);
}

/* --- Related categories -------------------------------------------------
 *
 * A card grid in the SHOWA microsite's own language: the photo with its one
 * rounded bottom-right corner, the green ring hanging off it with the icon on
 * a dark disc, the bold title turning green on hover. The same shape as the
 * cards on the two „Kesztyűkeresés …” overview pages
 * (page-showa_landing/assets/css/hazard.css, .icon-card) — but written out
 * here rather than borrowed, because the markup underneath is different: the
 * long description goes through wpautop() and wp_kses_post(), so the cards are
 * a <ul> of <li>s built from <span>s (see Content::related_card()), and a
 * <div>-shaped stylesheet would not fit them.
 *
 * Pictures come from the finder tiles' own files, so a card here and the same
 * tile on the overview page show the same photo.
 * ------------------------------------------------------------------------ */

.blf-showa-relcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 26px 22px;
	margin: 1.1em 0 .4em;
	padding: 0;
	list-style: none;
}

/* The long-description column styles its own lists and links — a bulleted ul,
   an underlined blue a — with selectors that outrank a single class. So the
   three properties the cards need back are repeated one level deeper, the same
   way the theme itself does it for .blf-btn inside this column. */
.blf-archive__longdesc-inner ul.blf-showa-relcards {
	margin: 1.1em 0 .4em;
	padding-left: 0;
	list-style: none;
}

.blf-showa-relcards > li,
.blf-archive__longdesc-inner ul.blf-showa-relcards > li {
	margin: 0;
}

.blf-archive__longdesc-inner a.blf-showa-relcard {
	color: inherit;
	text-decoration: none;
}

.blf-showa-relcard {
	position: relative;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.blf-showa-relcard__media {
	position: relative;
	display: block;
}

/* The picture is clipped so it can be zoomed on hover; the ring below sits
   outside this box, which is why it is not one element. */
.blf-showa-relcard__frame {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 379 / 162;
	border-radius: 0 0 25px;
	/* Also the plate a card keeps when it has no photo at all. */
	background: linear-gradient(135deg, #2b2929 0%, #1c1b1a 60%, #232121 100%);
}

.blf-showa-relcard__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .4s ease-in-out;
}

.blf-showa-relcard:hover .blf-showa-relcard__photo,
.blf-showa-relcard:focus-visible .blf-showa-relcard__photo {
	transform: scale(1.05);
}

.blf-showa-relcard__veil {
	position: absolute;
	inset: 0;
	background-color: rgba(33, 32, 32, .3);
	transition: background-color .5s ease-in-out;
}

.blf-showa-relcard:hover .blf-showa-relcard__veil {
	background-color: rgba(33, 32, 32, .12);
}

/* The two rings of the overview cards, scaled to this narrower column. */
.blf-showa-relcard__ring {
	position: absolute;
	right: 14px;
	bottom: -16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 2px solid #fff;
	border-radius: 50%;
	background-color: var(--green, #8fc547);
}

.blf-showa-relcard__disc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 2px solid #fff;
	border-radius: 50%;
	background-color: #231f20;
}

/* The icon files are inconsistent — some are drawn white, some near-black, and
   both sit on the same dark disc. brightness(0) flattens whatever colour the
   file uses to black and invert(1) turns it white, so every icon reads. */
.blf-showa-relcard__disc img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

/* Clear of the ring, the way the overview cards keep their title clear of it. */
.blf-showa-relcard__title {
	display: block;
	max-width: calc(100% - 78px);
	margin-top: 12px;
	color: #000;
	font-size: 15px;
	font-weight: 900;
	line-height: 20px;
	transition: color .4s ease-in-out;
}

.blf-showa-relcard:hover .blf-showa-relcard__title,
.blf-showa-relcard:focus-visible .blf-showa-relcard__title {
	color: var(--green, #8fc547);
}

.blf-showa-relcard:focus-visible {
	outline: 2px solid var(--green, #8fc547);
	outline-offset: 4px;
}

@media (max-width: 480px) {
	.blf-showa-relcards {
		grid-template-columns: 1fr 1fr;
		gap: 22px 14px;
	}

	.blf-showa-relcard__ring {
		right: 10px;
		width: 46px;
		height: 46px;
		bottom: -14px;
	}

	.blf-showa-relcard__disc {
		width: 38px;
		height: 38px;
	}

	.blf-showa-relcard__disc img {
		width: 22px;
		height: 22px;
	}

	.blf-showa-relcard__title {
		max-width: calc(100% - 62px);
		font-size: 14px;
		line-height: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.blf-showa-relcard__photo,
	.blf-showa-relcard__veil,
	.blf-showa-relcard__title {
		transition: none;
	}

	.blf-showa-relcard:hover .blf-showa-relcard__photo {
		transform: none;
	}
}

/* The pill list the block used to be. Still styled: a category whose long
   description was copied into it by SHOWA SEO → „Beírás a kategóriákba” has
   that older markup frozen in its own field. */

.blf-showa-related {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	margin: .75em 0 0;
	padding: 0;
	list-style: none;
}

.blf-showa-related li {
	margin: 0;
}

.blf-showa-related a {
	display: inline-block;
	padding: .4em .85em;
	border: 1px solid var(--bl-line, #E5E7EB);
	border-radius: 999px;
	background: #fff;
	color: var(--bl-navy, #0B2C5A);
	font-size: .9rem;
	text-decoration: none;
}

.blf-showa-related a:hover,
.blf-showa-related a:focus-visible {
	border-color: var(--bl-blue, #1858A8);
	color: var(--bl-blue, #1858A8);
}

/* The "this filtered view continues here" link on a noindex view. */
.blf-showa-viewlink {
	margin-top: .6em;
	font-weight: 600;
}