/* Gorriceta Practice Areas Grid — structural CSS.
   Colors, typography, padding, and spacing are all controlled from
   Elementor's Style tab (inline selectors). This file only defines
   the structural rules that Elementor controls can't express. */

.gpag-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 100%;
	position: relative;
}

.gpag-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	box-sizing: border-box;
	border-style: solid;
	border-color: transparent;
	border-width: 0;
	border-bottom-width: 1px;
	text-decoration: none;
	cursor: pointer;
	transition-property: background-color, padding, border-color;
	transition-timing-function: ease;
	z-index: 1;
}

/* Vertical divider between left/right columns.
   This assumes the default 2-column layout. If you switch the
   Columns setting to 3, the divider pattern will need a matching
   nth-child(3n) adjustment in this file. */
.gpag-grid .gpag-item:nth-child(odd) {
	border-right-width: 1px;
}

/* Remove the vertical divider effect when only 1 column is active (mobile) */
@media (max-width: 767px) {
	.gpag-grid .gpag-item {
		border-right-width: 0 !important;
	}
}

.gpag-item:hover,
.gpag-item.gpag-active {
	z-index: 2;
}

.gpag-number {
	flex: 0 0 44px;
	max-width: 44px;
	margin-top: 3px;
}

.gpag-content {
	flex: 1 1 auto;
	min-width: 0;
}

.gpag-title {
	margin: 0 0 8px 0;
}

.gpag-tags {
	margin: 0;
}

.gpag-description {
	margin: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
}

.gpag-item:hover .gpag-description,
.gpag-item.gpag-active .gpag-description {
	max-height: 500px;
	opacity: 1;
}

/* Stacked number layout variant (number above title instead of side column) */
.gpag-number-position-stacked .gpag-item {
	flex-direction: column;
}

.gpag-number-position-stacked .gpag-number {
	flex: 0 0 auto;
	max-width: 100%;
	margin-bottom: 8px;
}

/* Responsive: single column on small screens regardless of setting */
@media (max-width: 767px) {
	.gpag-grid {
		grid-template-columns: 1fr !important;
	}
	.gpag-number {
	display: none;
}
}