/* ==========================================================================
   SGNS TECHNO — Brand pages responsive fixes
   --------------------------------------------------------------------------
   Loads ONLY on the brand pages (see sgns-responsive.php).
   Everything lives inside max-width media queries, so the DESKTOP layout
   (>= 1025px) is completely untouched.
   No links, no images, no Elementor page data is changed by this file.
   ========================================================================== */


/* ==========================================================================
   TABLET  —  768px to 1024px   ->   2 cards per row
   ========================================================================== */
@media (max-width: 1024px) {

	/* side gutter so nothing touches the screen edge */
	[data-elementor-type="wp-page"] .e-con.e-parent {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	/* the card rows may wrap instead of squeezing 4 cards side by side */
	[data-elementor-type="wp-page"] .e-con-inner {
		flex-wrap: wrap !important;
		align-items: stretch !important;
	}

	/* 2 columns, 20px gutter between them */
	[data-elementor-type="wp-page"] .e-con-inner > .bdt-element-link {
		width: calc(50% - 10px) !important;
		max-width: calc(50% - 10px) !important;
		flex: 0 0 calc(50% - 10px) !important;
	}

	/* leftover empty columns of the old 4-column grid add dead space once wrapped */
	[data-elementor-type="wp-page"] .e-con-inner > .e-con.e-child:not(.bdt-element-link) {
		display: none !important;
	}

	/* ---- card footer: title on the left, arrow icon on the right ---- */
	[data-elementor-type="wp-page"] .bdt-element-link > .e-con {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 12px !important;
	}

	/* title takes whatever space is left (was locked to 65%) */
	[data-elementor-type="wp-page"] .bdt-element-link > .e-con > .elementor-widget-text-editor {
		width: auto !important;
		max-width: none !important;
		flex: 1 1 auto !important;
	}

	/* arrow icon: fixed size, never 0px, never full width */
	[data-elementor-type="wp-page"] .bdt-element-link > .e-con > .elementor-widget-image {
		width: auto !important;
		max-width: none !important;
		flex: 0 0 auto !important;
		text-align: right !important;
	}
	[data-elementor-type="wp-page"] .bdt-element-link > .e-con > .elementor-widget-image img {
		width: 34px !important;
		height: auto !important;
		max-width: none !important;
		display: inline-block !important;
	}

	/* product photo always fills the card width */
	[data-elementor-type="wp-page"] .bdt-element-link > .elementor-widget-image img {
		width: 100% !important;
		height: auto !important;
	}
}


/* ==========================================================================
   MOBILE  —  767px and below
   ========================================================================== */
@media (max-width: 767px) {

	/* side gutter so the banner and the cards don't touch the screen edge */
	[data-elementor-type="wp-page"] .e-con.e-parent {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* rows sit closer together on a phone */
	[data-elementor-type="wp-page"] .e-con.e-parent + .e-con.e-parent {
		margin-top: 20px !important;
	}

	[data-elementor-type="wp-page"] .e-con-inner {
		gap: 16px !important;
	}

	[data-elementor-type="wp-page"] .e-con-inner > .bdt-element-link {
		width: calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
		flex: 0 0 calc(50% - 8px) !important;
	}

	/* smaller title so two-word names don't break awkwardly in a narrow card */
	[data-elementor-type="wp-page"] .bdt-element-link > .e-con > .elementor-widget-text-editor {
		font-size: 15px !important;
		line-height: 1.3 !important;
	}
	[data-elementor-type="wp-page"] .bdt-element-link > .e-con {
		gap: 8px !important;
	}
	[data-elementor-type="wp-page"] .bdt-element-link > .e-con > .elementor-widget-image img {
		width: 26px !important;
	}
}


/* ==========================================================================
   SMALL PHONES  —  480px and below   ->   1 card per row
   ========================================================================== */
@media (max-width: 480px) {

	[data-elementor-type="wp-page"] .e-con-inner > .bdt-element-link {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}

	[data-elementor-type="wp-page"] .bdt-element-link > .e-con > .elementor-widget-text-editor {
		font-size: 18px !important;
	}
	[data-elementor-type="wp-page"] .bdt-element-link > .e-con > .elementor-widget-image img {
		width: 32px !important;
	}
}