/**
 * Device-tier rendering CSS — complements frontend.css.
 *
 * Targets:
 *   .top-device-wrapper     — SSR_ALL outer container
 *   .top-device-tier        — per-tier block wrapper (SSR_ALL)
 *   .top-offer-block-wrap   — SSR_SINGLE outer wrapper (added by DeviceRenderStrategy)
 *   [data-device-tier]      — JS can read detected tier for analytics
 *
 * Breakpoints (match RenderContext / frontend.css):
 *   desktop  ≥ 1280 px
 *   tablet    768–1279 px
 *   mobile   <  768 px
 *
 * @package TravelOffersPlugin
 */

/* =============================================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================================= */

:root {
	--top-breakpoint-tablet:  1279px;
	--top-breakpoint-mobile:   767px;
}

/* =============================================================================
   2. SSR_SINGLE — single-tier wrapper
   ============================================================================= */

.top-offer-block-wrap {
	/* No special display rules needed — inner .top-offer-block handles layout. */
	container-type: inline-size;
	container-name: top-offer-block-wrap;
}

/* =============================================================================
   3. SSR_ALL — multi-tier tier wrappers
   ============================================================================= */

/**
 * Hide all tier wrappers by default; show only the active one.
 * Desktop tier is visible by default (progressive enhancement —
 * if CSS fails to load, desktop content is visible).
 */
.top-device-wrapper {
	/* No extra chrome needed — tiers handle their own layouts. */
}

.top-device-tier {
	display: none;
}

/* Desktop tier: visible by default (≥ 1280px). */
.top-device-tier--desktop {
	display: block;
}

/* Tablet tier: visible at 768–1279px. */
@media screen and (max-width: 1279px) {
	.top-device-tier--desktop {
		display: none;
	}

	.top-device-tier--tablet {
		display: block;
	}
}

/* Mobile tier: visible below 768px. */
@media screen and (max-width: 767px) {
	.top-device-tier--tablet {
		display: none;
	}

	.top-device-tier--mobile {
		display: block;
	}
}

/**
 * Mirror tiers (data-mirror attribute): identical item sets share HTML.
 * The mirror element is aria-hidden="true" so screen readers skip it.
 * JS (offer-blocks.js) can clone the source tier's content into the mirror
 * if visual differentiation is needed between identical tiers.
 */
.top-device-tier[data-mirror] {
	display: none !important;
}

/* =============================================================================
   4. JS-DETECTED TIER OVERRIDES (data-device-tier on outer wrap)
   ─────────────────────────────────────────────────────────────────
   When JS detects the viewport tier it writes data-device-tier on
   .top-device-wrapper. This provides a CSS hook for more precise control
   than media-query-only approaches (e.g. orientationchange edge cases).
   ============================================================================= */

[data-device-tier="desktop"] .top-device-tier--tablet,
[data-device-tier="desktop"] .top-device-tier--mobile {
	display: none !important;
}

[data-device-tier="desktop"] .top-device-tier--desktop {
	display: block !important;
}

[data-device-tier="tablet"] .top-device-tier--desktop,
[data-device-tier="tablet"] .top-device-tier--mobile {
	display: none !important;
}

[data-device-tier="tablet"] .top-device-tier--tablet {
	display: block !important;
}

[data-device-tier="mobile"] .top-device-tier--desktop,
[data-device-tier="mobile"] .top-device-tier--tablet {
	display: none !important;
}

[data-device-tier="mobile"] .top-device-tier--mobile {
	display: block !important;
}

/* =============================================================================
   5. DEVICE-SPECIFIC GRID COLUMN OVERRIDES
   ─────────────────────────────────────────
   Inside each tier wrapper, override the CSS variables set by
   RenderContext::gridColumnVars() to respect the tier's configured column count.
   These rules only apply when the wrapper carries data-cols-* attributes,
   emitted by the offer-block--device.php template.
   ============================================================================= */

.top-device-tier--desktop [data-device-cols] {
	--top-cols-desktop: attr(data-device-cols number, 3);
}

.top-device-tier--tablet [data-device-cols] {
	--top-cols-tablet: attr(data-device-cols number, 2);
}

.top-device-tier--mobile [data-device-cols] {
	--top-cols-mobile: attr(data-device-cols number, 1);
}

/* =============================================================================
   6. REDUCED MOTION — disable all tier-switch transitions
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	.top-device-tier,
	.top-offer-block-wrap {
		transition: none !important;
		animation: none !important;
	}
}

/* =============================================================================
   7. PRINT — always show desktop tier
   ============================================================================= */

@media print {
	.top-device-tier {
		display: none !important;
	}

	.top-device-tier--desktop {
		display: block !important;
	}
}

/* =============================================================================
   8. HIGH CONTRAST MODE
   ============================================================================= */

@media (forced-colors: active) {
	.top-device-tier {
		border: 1px solid ButtonText;
	}
}