/**
 * Shared responsive column layout for all Phone Directory templates.
 * Works with: column1, column2, column3, column4 (on ul / ca-menu)
 * and opd-column-1 … opd-column-4 (on list wrappers).
 */

/* Base column grids */
.qcpnd-list-wrapper ul.column1,
.qcpnd-list-wrapper ul.column2,
.qcpnd-list-wrapper ul.column3,
.qcpnd-list-wrapper ul.column4,
.qcpnd-list-wrapper .ca-menu.column1,
.qcpnd-list-wrapper .ca-menu.column2,
.qcpnd-list-wrapper .ca-menu.column3,
.qcpnd-list-wrapper .ca-menu.column4 {
	display: grid;
	gap: 18px;
	width: 100%;
	padding: 0 !important;
	margin: 20px auto;
	grid-auto-rows: 1fr;
	box-sizing: border-box;
}

.qcpnd-list-wrapper ul.column1,
.qcpnd-list-wrapper .ca-menu.column1 {
	grid-template-columns: 1fr;
}

.qcpnd-list-wrapper ul.column2,
.qcpnd-list-wrapper .ca-menu.column2 {
	grid-template-columns: 1fr 1fr;
}

.qcpnd-list-wrapper ul.column3,
.qcpnd-list-wrapper .ca-menu.column3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.qcpnd-list-wrapper ul.column4,
.qcpnd-list-wrapper .ca-menu.column4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.qcpnd-list-wrapper ul[class*="column"] > li,
.qcpnd-list-wrapper .ca-menu[class*="column"] > li {
	margin: 0;
	list-style: none;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* List wrappers full width inside grid cells */
.qcpnd-list-wrapper .opd-column-1,
.qcpnd-list-wrapper .opd-column-2,
.qcpnd-list-wrapper .opd-column-3,
.qcpnd-list-wrapper .opd-column-4 {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Mobile */
@media (min-width: 320px) {
	.qcpnd-list-wrapper ul.column1,
	.qcpnd-list-wrapper ul.column2,
	.qcpnd-list-wrapper ul.column3,
	.qcpnd-list-wrapper ul.column4,
	.qcpnd-list-wrapper .ca-menu.column1,
	.qcpnd-list-wrapper .ca-menu.column2,
	.qcpnd-list-wrapper .ca-menu.column3,
	.qcpnd-list-wrapper .ca-menu.column4 {
		grid-template-columns: 1fr;
	}
}

/* Small tablet */
@media (min-width: 480px) {
	.qcpnd-list-wrapper ul.column2,
	.qcpnd-list-wrapper ul.column3,
	.qcpnd-list-wrapper ul.column4,
	.qcpnd-list-wrapper .ca-menu.column2,
	.qcpnd-list-wrapper .ca-menu.column3,
	.qcpnd-list-wrapper .ca-menu.column4 {
		grid-template-columns: 1fr 1fr;
	}

	.qcpnd-list-wrapper ul.column1,
	.qcpnd-list-wrapper .ca-menu.column1 {
		grid-template-columns: 1fr;
	}
}

/* Desktop */
@media (min-width: 992px) {
	.qcpnd-list-wrapper ul.column3,
	.qcpnd-list-wrapper ul.column4,
	.qcpnd-list-wrapper .ca-menu.column3,
	.qcpnd-list-wrapper .ca-menu.column4 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.qcpnd-list-wrapper ul.column2,
	.qcpnd-list-wrapper .ca-menu.column2 {
		grid-template-columns: 1fr 1fr;
	}

	.qcpnd-list-wrapper ul.column1,
	.qcpnd-list-wrapper .ca-menu.column1 {
		grid-template-columns: 1fr;
	}
}

/* Large desktop */
@media (min-width: 1220px) {
	.qcpnd-list-wrapper ul.column4,
	.qcpnd-list-wrapper .ca-menu.column4 {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.qcpnd-list-wrapper ul.column3,
	.qcpnd-list-wrapper .ca-menu.column3 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.qcpnd-list-wrapper ul.column2,
	.qcpnd-list-wrapper .ca-menu.column2 {
		grid-template-columns: 1fr 1fr;
	}

	.qcpnd-list-wrapper ul.column1,
	.qcpnd-list-wrapper .ca-menu.column1 {
		grid-template-columns: 1fr;
	}
}

/* General wrapper safety */
@media (max-width: 768px) {
	.qcpnd-list-wrapper {
		min-width: inherit !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
	}
}