/**
 * Layout fixes for 200% browser zoom - WCAG 1.4.4 (Resize Text) and
 * 1.4.10 (Reflow).
 *
 * At 200% zoom a 1280px screen reports a 640px viewport, so anything that only
 * reflows for phones has to reflow here too. The carousels below stop being
 * carousels under the desktop breakpoint and lay their items out as a wrapped
 * grid, which keeps every logo and link on screen instead of parked off it.
 *
 * These rules live outside assets/scss/ deliberately: that directory compiles
 * to assets/css/style.css, and this file has to survive a rebuild.
 */

/* ---------------------------------------------------------------------------
 * Header: Tailwind's `xl` is 1280px but the nav collapses to its slide-in
 * panel at 1200px. Between the two the hamburger sat next to the full desktop
 * nav, and pressing it made the page inert with no menu to show for it.
 * ------------------------------------------------------------------------ */

@media (min-width: 1201px) {
	.menu-main .hamburger {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * "India's top banks trust Fisdom": tiny-slider is disabled below 1200px
 * (see assets/js/app.js), so the slides need a layout of their own. Without
 * this the logos stack one per row.
 * ------------------------------------------------------------------------ */

@media (max-width: 1199px) {
	.trusted-bank-logos-slider {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
		/* The marquee bleeds to the viewport edge by design; the wrapped
		   grid needs the gutter back. */
		padding: 0 16px;
	}

	.trusted-bank-logos-slider > * {
		flex: 1 1 240px;
		max-width: 360px;
	}

	/* tiny-slider leaves its wrapper behind when disabled; let it grow. */
	.trusted-bank-logos-slider .single-logo-slider {
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------------------------
 * "Featured in": no longer a carousel at any width, so every publication link
 * is present and focusable. Above 1200px the theme's own rule spaces them out.
 * ------------------------------------------------------------------------ */

.featured-logo-slider {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 32px;
}

.featured-logo-slider img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 1199px) {
	.featured-logo-slider {
		justify-content: center;
	}

	.featured-logo-slider > * {
		flex: 0 1 auto;
		max-width: 45%;
	}
}