/**
 * Reference Detail Page Column Widths
 * 
 * 🇹🇷 TR: Referans detay sayfalarında sidebar ve content genişliklerini 30/70 yapar
 * 🇬🇧 EN: Forces 30/70 sidebar/content width on reference detail pages
 * 🎯 PURPOSE: Match archive page layout for consistent user experience
 * 
 * @package GRPCMedia
 * @since 1.0.0
 */

/* ========================================
   REFERENCE DETAIL PAGE: 30/70 LAYOUT
   ======================================== */

/* 🎨 Desktop: Force 30/70 split */
@media (min-width: 992px) {
	/* Sidebar Column (Reference Category Menu widget parent) */
	.single-reference .elementor-column:has(.elementor-widget-grpcmedia-reference-category-menu) {
		flex: 0 0 30% !important;
		max-width: 30% !important;
		width: 30% !important;
	}
	
	/* Content Column (Sidebar'ın kardeş column'u) */
	.single-reference .elementor-column:has(.elementor-widget-grpcmedia-reference-category-menu) + .elementor-column {
		flex: 0 0 70% !important;
		max-width: 70% !important;
		width: 70% !important;
	}
	
	/* Row gap ayarı */
	.single-reference .elementor-section:has(.elementor-widget-grpcmedia-reference-category-menu) > .elementor-container > .elementor-row {
		gap: 30px !important;
	}
}

/* 📱 Tablet: 40/60 split */
@media (min-width: 768px) and (max-width: 991px) {
	.single-reference .elementor-column:has(.elementor-widget-grpcmedia-reference-category-menu) {
		flex: 0 0 40% !important;
		max-width: 40% !important;
	}
	
	.single-reference .elementor-column:has(.elementor-widget-grpcmedia-reference-category-menu) + .elementor-column {
		flex: 0 0 60% !important;
		max-width: 60% !important;
	}
	
	.single-reference .elementor-section:has(.elementor-widget-grpcmedia-reference-category-menu) > .elementor-container > .elementor-row {
		gap: 20px !important;
	}
}

/* 📱 Mobile: Full width stack */
@media (max-width: 767px) {
	.single-reference .elementor-column:has(.elementor-widget-grpcmedia-reference-category-menu),
	.single-reference .elementor-column:has(.elementor-widget-grpcmedia-reference-category-menu) + .elementor-column {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}

/* ========================================
   FALLBACK: MANUEL CLASS DESTEĞI
   ======================================== */

/* Kullanıcı Elementor'da "Advanced → CSS Classes" field'ına bu class'ları ekleyebilir */
.reference-sidebar-column {
	flex: 0 0 30% !important;
	max-width: 30% !important;
}

.reference-content-column {
	flex: 0 0 70% !important;
	max-width: 70% !important;
}

@media (max-width: 767px) {
	.reference-sidebar-column,
	.reference-content-column {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}