/**
 * RMH Premium Comparison Widget - Responsive Styles
 *
 * @package RMH_Premium_Comparison
 * @version 1.0.0
 */

/* ============================================
   Large Screens (1200px+)
   ============================================ */

@media (min-width: 1201px) {
	.rmh-pc-cards {
		gap: 40px;
	}

	.rmh-pc-card {
		padding: 50px 40px;
	}
}

/* ============================================
   Desktop (992px - 1200px)
   ============================================ */

@media (min-width: 992px) and (max-width: 1200px) {
	.rmh-pc-container {
		max-width: 960px;
	}

	.rmh-pc-section {
		padding: 60px 15px;
	}

	.rmh-pc-heading {
		font-size: 40px;
	}

	.rmh-pc-card {
		padding: 35px 25px;
	}

	.rmh-pc-card-title {
		font-size: 22px;
	}

	.rmh-pc-list-icon {
		width: 28px;
		height: 28px;
		font-size: 16px;
	}

	.rmh-pc-list-title {
		font-size: 14px;
	}
}

/* ============================================
   Tablet (768px - 991px)
   ============================================ */

@media (min-width: 768px) and (max-width: 991px) {
	.rmh-pc-container {
		max-width: 720px;
	}

	.rmh-pc-section {
		padding: 50px 15px;
	}

	.rmh-pc-header {
		margin-bottom: 40px;
	}

	.rmh-pc-heading {
		font-size: 36px;
	}

	.rmh-pc-description {
		font-size: 16px;
	}

	.rmh-pc-cards {
		gap: 20px;
	}

	.rmh-pc-card {
		padding: 30px 20px;
	}

	.rmh-pc-card-title {
		font-size: 20px;
	}

	.rmh-pc-list-item {
		padding: 12px 0;
	}

	.rmh-pc-list-title {
		font-size: 14px;
	}

	.rmh-pc-button {
		padding: 14px 32px;
		font-size: 15px;
	}

	.rmh-pc-button-wrap {
		margin-top: 40px;
	}
}

/* ============================================
   Small Tablet (601px - 767px)
   ============================================ */

@media (min-width: 601px) and (max-width: 767px) {
	.rmh-pc-section {
		padding: 40px 15px;
	}

	.rmh-pc-heading {
		font-size: 30px;
	}

	.rmh-pc-card {
		padding: 25px 18px;
	}

	.rmh-pc-card-title {
		font-size: 18px;
	}

	.rmh-pc-list-title {
		font-size: 13px;
	}

	.rmh-pc-list-description {
		font-size: 12px;
	}
}

/* ============================================
   Mobile (max-width: 600px)
   ============================================ */

@media (max-width: 600px) {
	.rmh-pc-section {
		padding: 40px 12px;
	}

	.rmh-pc-header {
		margin-bottom: 30px;
	}

	.rmh-pc-badge {
		font-size: 10px;
		padding: 6px 14px;
		letter-spacing: 1.5px;
	}

	.rmh-pc-heading {
		font-size: clamp(26px, 8vw, 34px);
		margin-bottom: 14px;
	}

	.rmh-pc-description {
		font-size: 14px;
		line-height: 1.6;
	}

	.rmh-pc-cards {
		flex-direction: column;
		gap: 16px;
		align-items: center;
	}

	.rmh-pc-card {
		max-width: 100% !important;
		padding: 24px 16px;
		border-radius: 16px;
	}

	.rmh-pc-card-header {
		margin-bottom: 20px;
		padding-bottom: 14px;
	}

	.rmh-pc-card-title {
		font-size: 18px;
		margin-bottom: 6px;
	}

	.rmh-pc-card-badge {
		font-size: 9px;
		padding: 3px 10px;
	}

	.rmh-pc-list-item {
		gap: 12px;
		padding: 10px 0;
	}

	.rmh-pc-list-icon {
		width: 26px;
		height: 26px;
		font-size: 14px;
	}

	.rmh-pc-list-title {
		font-size: 13px;
	}

	.rmh-pc-list-description {
		font-size: 11px;
	}

	.rmh-pc-button-wrap {
		margin-top: 30px;
	}

	.rmh-pc-button {
		width: 100%;
		padding: 14px 24px;
		font-size: 14px;
		border-radius: 10px;
	}

	/* Adjust animation delays for mobile */
	.rmh-pc-section.rmh-pc-visible .rmh-pc-card:nth-child(2) {
		transition-delay: 0.1s;
	}
}

/* ============================================
   Extra Small (max-width: 400px)
   ============================================ */

@media (max-width: 400px) {
	.rmh-pc-section {
		padding: 30px 10px;
	}

	.rmh-pc-heading {
		font-size: 24px;
	}

	.rmh-pc-card {
		padding: 20px 14px;
	}

	.rmh-pc-card-title {
		font-size: 16px;
	}

	.rmh-pc-list-title {
		font-size: 12px;
	}

	.rmh-pc-button {
		padding: 12px 20px;
		font-size: 13px;
	}
}

/* ============================================
   Dark Mode Override (respects system preference)
   ============================================ */

@media (prefers-color-scheme: light) {
	/* Keep dark theme regardless of system preference
	   as this is a premium dark comparison widget */
}

/* ============================================
   High Contrast Mode
   ============================================ */

@media (forced-colors: active) {
	.rmh-pc-card {
		border: 2px solid ButtonText;
	}

	.rmh-pc-button {
		border: 2px solid ButtonText;
	}

	.rmh-pc-list-icon--left {
		color: LinkText;
		background: Canvas;
	}

	.rmh-pc-list-icon--right {
		color: LinkText;
		background: Canvas;
	}
}