← All changes | assets/css/shortcodes/destination-shortcode.css +37 -2 3.0.3 → 3.0.16 View file →

		@@ -59,10 +59,14 @@
59	59
60	60	.yatra-category-card-content {
61	61	color: #ffffff;
62	62	width: 100%;
63		- z-index: 2;
64		- position: relative;
	63	+ /* No `position: relative` here: it would become the nearest positioned
	64	+ ancestor for the title link's stretched `::after`, trapping the click
	65	+ overlay to the bottom-strip content area instead of the whole card.
	66	+ The overlay above (`.yatra-category-card-overlay`) is `position:
	67	+ absolute; inset: 0` so the link's `::after` correctly fills the full
	68	+ card via that wrapper. */
65	69	}
66	70
67	71	.yatra-category-card-title {
68	72	margin: 0 0 16px 0;
		@@ -78,8 +82,39 @@
78	82	}
79	83
80	84	.yatra-category-card-title-link:hover {
81	85	color: var(--yatra-primary-light, #60a5fa);
	86	+}
	87	+
	88	+/*
	89	+ * Whole-card click target.
	90	+ *
	91	+ * Promote the title link to a "stretched link" so the entire card is
	92	+ * navigable, while keeping the visible <a> on the title for screen readers
	93	+ * and SEO. The pseudo-element fills the overlay (which is `inset: 0` on the
	94	+ * image wrapper), giving us a single canonical link target without nesting
	95	+ * <a> elements. The featured badge is made non-interactive so clicks on it
	96	+ * pass through to the stretched link.
	97	+ */
	98	+.yatra-category-card {
	99	+ cursor: pointer;
	100	+}
	101	+
	102	+.yatra-category-card-title-link::after {
	103	+ content: "";
	104	+ position: absolute;
	105	+ inset: 0;
	106	+ z-index: 1;
	107	+ border-radius: inherit;
	108	+}
	109	+
	110	+.yatra-category-card-title-link:focus-visible::after {
	111	+ outline: 2px solid var(--yatra-primary, #2563eb);
	112	+ outline-offset: -2px;
	113	+}
	114	+
	115	+.yatra-category-featured-badge {
	116	+ pointer-events: none;
82	117	}
83	118
84	119	.yatra-category-card-stats {
85	120	display: flex;