/**
 * RM_A Profile Page Layout Styles
 *
 * MINIMAL CSS for profile-specific layout only.
 * All other styling (typography, image captions, etc.) is inherited from:
 * - custom.css: .rma-project-text, .rma-gallery-image, .rma-image-caption, etc.
 * - responsive.css: .rma-project-text-content width constraints
 *
 * 12-COLUMN GRID SYSTEM:
 * Element widths are set via inline styles using flex percentages based on a
 * 12-column grid. Column counts are configured in the backend and converted
 * to percentages in PHP (e.g., 6 cols = 50%, 9 cols = 75%, 3 cols = 25%).
 *
 * Profile-specific classes:
 * - .rma-profile-rows: Flex container for all profile rows
 * - .rma-profile-row: Individual row with two-column flex layout
 * - .rma-profile-element: Flex child with inline flex/max-width from 12-col grid
 */

/* ==========================================================================
   Project Text 1 Spacing (Profile Page)
   ========================================================================== */

.rma-project-text-content {
	margin-bottom: 30px;
}

/* ==========================================================================
   Profile Rows Container
   ========================================================================== */

.rma-profile-rows {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin-top: var(--wp--preset--spacing--50, 2rem);
}

/* ==========================================================================
   Individual Row (Two-Column Layout)
   ========================================================================== */

.rma-profile-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	width: 100%;
}

/* ==========================================================================
   Profile Element (Flex Child)
   Width and margins are controlled via inline styles from backend settings.
   ========================================================================== */

.rma-profile-element {
	box-sizing: border-box;
}

/* Ensure images within profile elements fill their container */
.rma-profile-element .rma-gallery-image {
	margin-bottom: 0; /* Override gallery default margin */
}

.rma-profile-element .rma-gallery-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   RESPONSIVE: Mobile (< 576px) - Single Column
   ========================================================================== */

@media (max-width: 575.98px) {
	.rma-profile-row {
		flex-direction: column;
	}

	.rma-profile-element {
		/* Override inline flex/max-width to full width on mobile */
		flex: 0 0 100% !important;
		max-width: 100% !important;
		/* Reset horizontal margins on mobile, keep vertical */
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Add spacing between stacked elements */
	.rma-profile-row .rma-profile-element:not(:last-child) {
		margin-bottom: var(--wp--preset--spacing--30, 1rem);
	}
}

/* ==========================================================================
   RESPONSIVE: Small+ (≥ 576px) - Two-Column Layout
   ========================================================================== */

@media (min-width: 576px) {
	.rma-profile-row {
		flex-wrap: nowrap;
	}
}

/* ==========================================================================
   RESPONSIVE: Large+ (≥ 992px) - Increased Row Gap
   ========================================================================== */

@media (min-width: 992px) {
	.rma-profile-rows {
		gap: var(--wp--preset--spacing--50, 2rem);
	}
}

/* ==========================================================================
   RESPONSIVE: Extra Extra Large+ (≥ 1600px)
   ========================================================================== */

@media (min-width: 1600px) {
	.rma-profile-rows {
		gap: var(--wp--preset--spacing--60, 2.5rem);
	}
}

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

@media print {
	.rma-profile-row {
		break-inside: avoid;
	}

	.rma-profile-element {
		break-inside: avoid;
	}
}