/*
	Theme Name:   Marketing Labs Bricks
	Theme URI:    https://www.marketinglabs.co.uk/
	Description:  Use this child theme to extend Bricks.
	Author:       Marketing Labs
	Author URI:   https://www.marketinglabs.co.uk/
	Template:     bricks
	Version:      2.0
*/

/* No Select */
.noselect {	user-select: none; }

/* Pointer */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Hidden */
.hidden { display: none !important; }

@media (max-width: 767px) {
	.hidden-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hidden-tablet { display: none !important; }
}

@media (min-width: 1024px) {
	.hidden-desktop { display: none !important; }
}

/* Disclaimers */
.disclaimer{
	font-size:0.618em;
	font-style: italic;
}

/* list item data-ico */
li.icon {
	list-style: none;
	padding-left: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
}

li.icon::before {
	content: attr(data-icon);
	display: block;
	width: 2em;
	text-align: center;
}

/* Steps list */
ol.steps,
ul.steps{
	margin-top:2em;
}
ol.steps > li,
ul.steps > li{
	padding-bottom: 1em;
	padding-left:2em;
}
ol.steps li > *,
ul.steps li > *{
	margin-top:-1em;
	margin-bottom:1em;
}
ol.steps li > h1,
ol.steps li > h2,
ol.steps li > h3,
ol.steps li > h4,
ol.steps li > h5,
ol.steps li > h6{
	text-indent:2em;
	margin-top:calc(1em * -1);
	font-size:1em;
	line-height:1em;
}

/* Custom Grid */
.grid {
	--grid-columns: 12;
	--grid-gap: 4rem;
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	gap: var(--grid-gap);
}

/* Base column */
.grid > *,
[class^="col-"],
[class*=" col-"] {
grid-column: span 12;	
}

/* Base grid columns (mobile-first) */
.grid > .col-1  { grid-column: span 1; }
.grid > .col-2  { grid-column: span 2; }
.grid > .col-3  { grid-column: span 3; }
.grid > .col-4  { grid-column: span 4; }
.grid > .col-5  { grid-column: span 5; }
.grid > .col-6  { grid-column: span 6; }
.grid > .col-7  { grid-column: span 7; }
.grid > .col-8  { grid-column: span 8; }
.grid > .col-9  { grid-column: span 9; }
.grid > .col-10 { grid-column: span 10; }
.grid > .col-11 { grid-column: span 11; }
.grid > .col-12 { grid-column: span 12; }

/* Mobile breakpoint (min-width: 768px) */
@media (min-width: 768px) {
	.grid > .col-mobile-1  { grid-column: span 1; }
	.grid > .col-mobile-2  { grid-column: span 2; }
	.grid > .col-mobile-3  { grid-column: span 3; }
	.grid > .col-mobile-4  { grid-column: span 4; }
	.grid > .col-mobile-5  { grid-column: span 5; }
	.grid > .col-mobile-6  { grid-column: span 6; }
	.grid > .col-mobile-7  { grid-column: span 7; }
	.grid > .col-mobile-8  { grid-column: span 8; }
	.grid > .col-mobile-9  { grid-column: span 9; }
	.grid > .col-mobile-10 { grid-column: span 10; }
	.grid > .col-mobile-11 { grid-column: span 11; }
	.grid > .col-mobile-12 { grid-column: span 12; }
}

/* Tablet breakpoint (min-width: 1024px) */
@media (min-width: 1024px) {
	.grid > .col-tablet-1  { grid-column: span 1; }
	.grid > .col-tablet-2  { grid-column: span 2; }
	.grid > .col-tablet-3  { grid-column: span 3; }
	.grid > .col-tablet-4  { grid-column: span 4; }
	.grid > .col-tablet-5  { grid-column: span 5; }
	.grid > .col-tablet-6  { grid-column: span 6; }
	.grid > .col-tablet-7  { grid-column: span 7; }
	.grid > .col-tablet-8  { grid-column: span 8; }
	.grid > .col-tablet-9  { grid-column: span 9; }
	.grid > .col-tablet-10 { grid-column: span 10; }
	.grid > .col-tablet-11 { grid-column: span 11; }
	.grid > .col-tablet-12 { grid-column: span 12; }
}

/* Desktop breakpoint (min-width: 1440px) */
@media (min-width: 1440px) {
	.grid > .col-desktop-1  { grid-column: span 1; }
	.grid > .col-desktop-2  { grid-column: span 2; }
	.grid > .col-desktop-3  { grid-column: span 3; }
	.grid > .col-desktop-4  { grid-column: span 4; }
	.grid > .col-desktop-5  { grid-column: span 5; }
	.grid > .col-desktop-6  { grid-column: span 6; }
	.grid > .col-desktop-7  { grid-column: span 7; }
	.grid > .col-desktop-8  { grid-column: span 8; }
	.grid > .col-desktop-9  { grid-column: span 9; }
	.grid > .col-desktop-10 { grid-column: span 10; }
	.grid > .col-desktop-11 { grid-column: span 11; }
	.grid > .col-desktop-12 { grid-column: span 12; }
}

/* list columns */
ul[class*="col-"],
ol[class*="col-"] {
	width: 100%;
	padding-left: 0;
	list-style-position: inside;
	column-gap: var(--grid-gap, 4rem);
	box-sizing: border-box;
	break-inside: avoid-column;
}

/* Base list columns (mobile-first) */
ul.col-1, ol.col-1 { columns: 1; }
ul.col-2, ol.col-2 { columns: 2; }
ul.col-3, ol.col-3 { columns: 3; }
ul.col-4, ol.col-4 { columns: 4; }
ul.col-5, ol.col-5 { columns: 5; }
ul.col-6, ol.col-6 { columns: 6; }

/* Mobile breakpoint (min-width: 768px) */
@media (min-width: 768px) {
	ul.col-mobile-1, ol.col-mobile-1 { columns: 1; }
	ul.col-mobile-2, ol.col-mobile-2 { columns: 2; }
	ul.col-mobile-3, ol.col-mobile-3 { columns: 3; }
	ul.col-mobile-4, ol.col-mobile-4 { columns: 4; }
	ul.col-mobile-5, ol.col-mobile-5 { columns: 5; }
	ul.col-mobile-6, ol.col-mobile-6 { columns: 6; }
}

/* Tablet breakpoint (min-width: 1024px) */
@media (min-width: 1024px) {
	ul.col-tablet-1, ol.col-tablet-1 { columns: 1; }
	ul.col-tablet-2, ol.col-tablet-2 { columns: 2; }
	ul.col-tablet-3, ol.col-tablet-3 { columns: 3; }
	ul.col-tablet-4, ol.col-tablet-4 { columns: 4; }
	ul.col-tablet-5, ol.col-tablet-5 { columns: 5; }
	ul.col-tablet-6, ol.col-tablet-6 { columns: 6; }
}

/* Desktop breakpoint (min-width: 1440px for example) */
@media (min-width: 1440px) {
	ul.col-desktop-1, ol.col-desktop-1 { columns: 1; }
	ul.col-desktop-2, ol.col-desktop-2 { columns: 2; }
	ul.col-desktop-3, ol.col-desktop-3 { columns: 3; }
	ul.col-desktop-4, ol.col-desktop-4 { columns: 4; }
	ul.col-desktop-5, ol.col-desktop-5 { columns: 5; }
	ul.col-desktop-6, ol.col-desktop-6 { columns: 6; }
}