/*
 * Chapter catalog (/kapitel/): layout details the Elementor controls cannot express.
 * Classes are set under Advanced → CSS Classes in the page and in the "Kapitelkort katalog (loop)" template.
 * Editable effects live in Elementor instead: card hover lift (card → Advanced → Transform → Hover),
 * card hover shadow + photo zoom (card → Advanced → Custom CSS), locked-card opacity (the "Låst" badge →
 * Style → Låst kort), hero photo crop + shadow (hero image → Advanced → Custom CSS).
 */

/* Hero: the photo reaches the viewport edge on desktop; its square and rotated shape must not scroll the page sideways. */
.tv-catalog-hero { overflow-x: clip; }

/* Band sections: land below the sticky header + level navigation when jumped to. */
.tv-catalog-band { scroll-margin-top: 9rem; }

/* Chapter card (loop item) is a link when the chapter is open. */
a.tv-catalog-card,
a.tv-catalog-card:hover,
a.tv-catalog-card:focus { color: inherit; text-decoration: none; }
a.tv-catalog-card:focus-visible { outline: 2px solid var(--e-global-color-b1a8e7f, #44a8e7); outline-offset: 3px; }

/* The dynamic excerpt is printed without a <p>: keep the design's balanced line breaks. */
.tv-catalog-card .elementor-widget-text-editor { text-wrap: pretty; }

/* Card photo: 16:10 crop. */
.tv-catalog-photo .elementor-widget-image,
.tv-catalog-photo .elementor-widget-image .elementor-widget-container { width: 100%; }
.tv-catalog-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Tailwind sm (640px): two card columns already on large phones, before Elementor's tablet breakpoint. */
@media (min-width: 640px) and (max-width: 767px) {
	.elementor-widget-loop-grid.tv-catalog-grid .elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}