/**
 * WF Infographics — Front-end Carousel Styles
 *
 * Self-contained. No dependency on the active theme stylesheet.
 *
 * FONT NOTE: This plugin uses Bebas Neue (--gcig-title-font) for section
 * and card headings. If the active theme does not load this font, the display
 * falls back to sans-serif automatically. To use Bebas Neue, add the Google
 * Fonts URL to your theme's enqueue or child theme stylesheet:
 *   https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap
 *
 * THEMING: Override the five --gcig-* variables in your theme or child
 * theme stylesheet to reskin without editing plugin files. Example:
 *   :root {
 *     --gcig-title-font:   'Montserrat', sans-serif;
 *     --gcig-nav-color:    #005a9c;
 *     --gcig-focus-color:  #e63946;
 *   }
 *
 * @package GcInfographics
 */

/* ============================================================
   Plugin-scoped custom property defaults.

   Each variable cascades through the active theme token first
   (e.g. var(--font-heading, ...)), then falls back to the
   hardcoded value, so:
     - Sites with matching theme tokens  → match the theme automatically
     - Sites without matching tokens → render correctly out of the box
   ============================================================ */

:root {
	--gcig-title-font:   var(--font-heading,    'Bebas Neue', sans-serif);
	--gcig-title-color:  var(--color-dark-text,  #313031);
	--gcig-nav-color:    var(--color-navy,        #2B3157);
	--gcig-nav-hover-bg: var(--color-navy,        #2B3157);
	--gcig-focus-color:  var(--color-orange,      #FF7A3D);
}

/* ============================================================
   Section wrapper
   ============================================================ */

.infographics {
	padding: 3rem;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
	background: #fff;
}

/* ============================================================
   Header row: title + nav arrows
   ============================================================ */

.infographics__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
}

.infographics__title {
	font-family: var(--gcig-title-font);
	font-size: 1.75rem;
	letter-spacing: 0.01em;
	margin: 0;
	color: var(--gcig-title-color);
}

/* ============================================================
   Navigation arrows
   ============================================================ */

.infographics__nav-wrap {
	display: flex;
	gap: 0.5rem;
}

.infographics__nav {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--gcig-nav-color);
	background: transparent;
	color: var(--gcig-nav-color);
	cursor: pointer;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s;
	padding: 0;
}

.infographics__nav:hover {
	background: var(--gcig-nav-hover-bg);
	color: #fff;
}

.infographics__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.infographics__nav:focus-visible {
	outline: 2px solid var(--gcig-focus-color);
	outline-offset: 2px;
}

.infographics__nav[hidden] {
	display: none;
}

/* ============================================================
   Card track (horizontal scroll container)
   ============================================================ */

.infographics__track {
	display: flex;
	gap: 24px;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

/* ============================================================
   Individual cards — desktop: 3 per row
   ============================================================ */

.infographic-card {
	flex: 0 0 calc((100% - 48px) / 3);
	min-width: 0;
}

.infographic-card__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.infographic-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.infographic-card__label {
	font-family: var(--gcig-title-font);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 0.25rem;
	color: var(--gcig-title-color);
}

.infographic-card__body {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--gcig-title-color);
	margin: 0;
}

/* ============================================================
   Responsive — tablet (768px – 1023px): 2 cards per row
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
	.infographic-card {
		flex: 0 0 calc((100% - 24px) / 2);
	}
}

/* ============================================================
   Responsive — mobile (< 768px): 1 card, no arrows
   Touch/swipe handled natively by overflow-x on the track.
   ============================================================ */

@media (max-width: 767px) {
	.infographics {
		padding: 2rem 1rem;
	}

	.infographic-card {
		flex: 0 0 100%;
	}

	.infographics__nav-wrap {
		display: none;
	}
}