/**
 * Global Responsive Utilities for Company Widgets
 * Phase 6 - Responsive Design & Mobile Optimization
 * Created: November 21, 2025
 *
 * Mobile-First Responsive Design
 * Breakpoints: Mobile (<768px), Tablet (768-1023px), Desktop (1024px+)
 */

/* ==========================================================================
   Container Max Widths
   ========================================================================== */

.drvws-widget-container {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.drvws-widget-container {
		max-width: 540px;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.drvws-widget-container {
		max-width: 720px;
	}
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
	.drvws-widget-container {
		max-width: 960px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.drvws-widget-container {
		max-width: 1140px;
	}
}

/* ==========================================================================
   Responsive Display Utilities
   ========================================================================== */

/* Hide on mobile (< 768px) */
.drvws-hide-mobile {
	display: none !important;
}

@media (min-width: 768px) {
	.drvws-hide-mobile {
		display: block !important;
	}

	/* Hide on tablet and up */
	.drvws-hide-tablet-up {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	/* Hide on desktop */
	.drvws-hide-desktop {
		display: none !important;
	}

	/* Show only on desktop */
	.drvws-show-desktop {
		display: block !important;
	}
}

/* Show only on mobile */
.drvws-show-mobile {
	display: block !important;
}

@media (min-width: 768px) {
	.drvws-show-mobile {
		display: none !important;
	}
}

/* ==========================================================================
   Responsive Spacing
   ========================================================================== */

/* Mobile spacing (default) */
.drvws-spacing-responsive {
	padding: 12px;
	margin: 8px 0;
}

/* Tablet spacing */
@media (min-width: 768px) {
	.drvws-spacing-responsive {
		padding: 16px;
		margin: 12px 0;
	}
}

/* Desktop spacing */
@media (min-width: 1024px) {
	.drvws-spacing-responsive {
		padding: 24px;
		margin: 16px 0;
	}
}

/* Padding utilities */
.drvws-p-mobile {
	padding: 12px;
}

.drvws-p-tablet {
	padding: 12px;
}

.drvws-p-desktop {
	padding: 12px;
}

@media (min-width: 768px) {
	.drvws-p-tablet {
		padding: 16px;
	}
}

@media (min-width: 1024px) {
	.drvws-p-desktop {
		padding: 24px;
	}
}

/* Margin utilities */
.drvws-m-mobile {
	margin: 8px 0;
}

.drvws-m-tablet {
	margin: 8px 0;
}

.drvws-m-desktop {
	margin: 8px 0;
}

@media (min-width: 768px) {
	.drvws-m-tablet {
		margin: 12px 0;
	}
}

@media (min-width: 1024px) {
	.drvws-m-desktop {
		margin: 16px 0;
	}
}

/* ==========================================================================
   Touch-Optimized Targets (WCAG 2.1 Level AAA)
   ========================================================================== */

/**
 * All interactive elements must meet WCAG 2.1 Level AAA
 * Minimum touch target size: 44x44px
 */

.drvws-touch-target {
	min-width: 44px;
	min-height: 44px;
	padding: 12px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Expand touch area without changing visual size */
.drvws-touch-target-expand::before {
	content: '';
	position: absolute;
	top: -12px;
	left: -12px;
	right: -12px;
	bottom: -12px;
	z-index: -1;
}

/* Hover effects only on desktop */
@media (min-width: 1024px) {
	.drvws-touch-target:hover {
		transform: scale(1.05);
		transition: transform 0.2s ease;
	}

	.drvws-touch-target:active {
		transform: scale(0.98);
	}
}

/* Mobile tap feedback */
@media (max-width: 1023px) {
	.drvws-touch-target:active {
		opacity: 0.7;
		transition: opacity 0.1s ease;
	}
}

/* ==========================================================================
   Responsive Grid Utilities
   ========================================================================== */

/* Responsive grid (mobile-first) */
.drvws-grid-responsive {
	display: grid;
	grid-gap: 16px;
	grid-template-columns: 1fr; /* Mobile: 1 column */
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
	.drvws-grid-responsive {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20px;
	}
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
	.drvws-grid-responsive {
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 24px;
	}
}

/* 2-column grid for tablet and up */
.drvws-grid-2col {
	display: grid;
	grid-gap: 16px;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.drvws-grid-2col {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20px;
	}
}

/* ==========================================================================
   Responsive Flex Utilities
   ========================================================================== */

/* Flex container that stacks on mobile */
.drvws-flex-responsive {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 768px) {
	.drvws-flex-responsive {
		flex-direction: row;
		gap: 16px;
	}
}

/* Flex wrap utilities */
.drvws-flex-wrap-mobile {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@media (min-width: 768px) {
	.drvws-flex-wrap-mobile {
		flex-wrap: nowrap;
		gap: 12px;
	}
}

/* ==========================================================================
   Responsive Image Utilities
   ========================================================================== */

/* Responsive images (never exceed container) */
.drvws-img-responsive {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Avatar sizes */
.drvws-avatar {
	border-radius: 50%;
	object-fit: cover;
}

.drvws-avatar-mobile {
	width: 40px;
	height: 40px;
}

@media (min-width: 768px) {
	.drvws-avatar-mobile {
		width: 48px;
		height: 48px;
	}
}

@media (min-width: 1024px) {
	.drvws-avatar-mobile {
		width: 56px;
		height: 56px;
	}
}

/* ==========================================================================
   Responsive Text Alignment
   ========================================================================== */

/* Center on mobile, left on desktop */
.drvws-text-center-mobile {
	text-align: center;
}

@media (min-width: 768px) {
	.drvws-text-center-mobile {
		text-align: left;
	}
}

/* ==========================================================================
   Responsive Border Radius
   ========================================================================== */

.drvws-rounded-responsive {
	border-radius: 8px;
}

@media (min-width: 768px) {
	.drvws-rounded-responsive {
		border-radius: 12px;
	}
}

@media (min-width: 1024px) {
	.drvws-rounded-responsive {
		border-radius: 16px;
	}
}

/* ==========================================================================
   Responsive Shadows
   ========================================================================== */

.drvws-shadow-responsive {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
	.drvws-shadow-responsive {
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}
}

@media (min-width: 1024px) {
	.drvws-shadow-responsive {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}
}

/* ==========================================================================
   Responsive Overflow Utilities
   ========================================================================== */

/* Prevent horizontal scroll on mobile */
.drvws-no-scroll-mobile {
	overflow-x: hidden;
	max-width: 100%;
}

/* Horizontal scroll with hidden scrollbar on mobile */
.drvws-scroll-x-mobile {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

.drvws-scroll-x-mobile::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

/* ==========================================================================
   Responsive Loading States
   ========================================================================== */

.drvws-skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: drvws-skeleton-shimmer 1.5s ease-in-out infinite;
	border-radius: 4px;
}

@keyframes drvws-skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

.drvws-skeleton-pulse {
	animation: drvws-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes drvws-skeleton-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
}

/* ==========================================================================
   Responsive Transitions
   ========================================================================== */

/* Disable transitions on mobile for better performance */
@media (max-width: 767px) {
	.drvws-no-transition-mobile * {
		transition: none !important;
		animation: none !important;
	}
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Accessibility: Focus Indicators
   ========================================================================== */

/* Visible focus indicators for keyboard navigation */
.drvws-touch-target:focus,
button:focus,
a:focus {
	outline: 2px solid #7C3AED;
	outline-offset: 2px;
}

/* Remove outline only when not using keyboard */
.drvws-touch-target:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   Responsive Print Styles
   ========================================================================== */

@media print {
	.drvws-hide-print {
		display: none !important;
	}

	.drvws-widget-container {
		max-width: 100%;
		box-shadow: none;
	}

	/* Hide interactive elements */
	.drvws-touch-target,
	button,
	.drvws-carousel-navigation {
		display: none !important;
	}
}

/* ==========================================================================
   Safe Area Insets for iPhone notch, etc.
   ========================================================================== */

@supports (padding: max(0px)) {
	.drvws-safe-area-padding {
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
		padding-top: max(12px, env(safe-area-inset-top));
		padding-bottom: max(12px, env(safe-area-inset-bottom));
	}
}

/* ==========================================================================
   PHASE 4 HOVER EFFECTS (Company Widget Redesign)
   Added: November 21, 2025
   ========================================================================== */

/* Hover Effect: Lift - Card elevates on hover */
.drvws-card-hover-lift {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform, box-shadow;
}

.drvws-card-hover-lift:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}

/* Hover Effect: Scale - Card grows on hover */
.drvws-card-hover-scale {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform, box-shadow;
}

.drvws-card-hover-scale:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

/* Hover Effect: Glow - Card glows with purple light on hover */
.drvws-card-hover-glow {
	transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: box-shadow, border-color;
}

.drvws-card-hover-glow:hover {
	box-shadow: 0 0 20px rgba(124, 58, 237, 0.4),
	            0 0 40px rgba(124, 58, 237, 0.2) !important;
	border-color: rgba(124, 58, 237, 0.5) !important;
}

/* Disable hover effects on touch devices to prevent sticky hover states */
@media (hover: none) and (pointer: coarse) {
	.drvws-card-hover-lift:hover,
	.drvws-card-hover-scale:hover,
	.drvws-card-hover-glow:hover {
		transform: none;
		box-shadow: initial !important;
		border-color: initial !important;
	}
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.drvws-card-hover-lift,
	.drvws-card-hover-scale,
	.drvws-card-hover-glow {
		transition: none;
	}
}

/* ==========================================================================
   End of Responsive Utilities
   ========================================================================== */