/* "כל המדריכים" - guides index page */

.gdx__hero {
	background: var(--c-primary-050, #EDF2FF);
	border-radius: 0 0 32px 32px;
	padding: min(11vw, 180px) 24px clamp(40px, 5vw, 64px);
	text-align: center;
}
.gdx__hero-inner { max-width: 760px; margin-inline: auto; }
.gdx__title { color: var(--c-heading, #19235F); font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 14px; }
.gdx__sub { color: var(--c-text, #3d4670); font-size: clamp(1rem, 2vw, 1.2rem); margin: 0; line-height: 1.6; }

.gdx { max-width: 1394px; margin-inline: auto; padding: clamp(24px, 4vw, 48px) 24px 0; }

.gdx__group { margin-bottom: clamp(32px, 4vw, 56px); }
.gdx__group-title {
	color: var(--c-heading, #19235F);
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	margin: 0 0 18px;
	padding-inline-start: 14px;
	border-inline-start: 4px solid var(--c-primary, #1582FF);
}
.gdx__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.gdx__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #fff;
	border: 1px solid #E3EAFB;
	border-radius: 14px;
	padding: 16px 18px;
	color: var(--c-heading, #19235F);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
	height: 100%;
}
.gdx__card svg { flex: 0 0 auto; color: var(--c-primary, #1582FF); transition: transform .18s ease; }
[dir="rtl"] .gdx__card svg { transform: scaleX(-1); }
.gdx__card:hover {
	border-color: var(--c-primary, #1582FF);
	box-shadow: 0 8px 24px rgba(21, 130, 255, .12);
	transform: translateY(-2px);
}
.gdx__card:hover svg { transform: translateX(3px); }
[dir="rtl"] .gdx__card:hover svg { transform: scaleX(-1) translateX(3px); }

@media (max-width: 900px) {
	.gdx__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.gdx__list { grid-template-columns: 1fr; }
}

/* ==== Mobile type scale - aligned with the sitewide Figma mobile pass ==== */
@media (max-width: 760px) {
	.gdx__title { font-size: 22px; }
	.gdx__sub { font-size: 16px; }
	.gdx__group-title { font-size: 18px; }
}