/* Packages Grid - structural / interaction styles only, visual styling to follow */

.packages-container {
	width: 100%;
}

.packages-heading {
	width: 100%;
	margin-bottom: 40px;
}

.packages-heading .heading ~ .heading  {
	margin-bottom: 16px;
}

.packages-heading .heading {
	margin-bottom: 24px;
}

.packages-heading > .content-text ~ .content-text {
	margin-bottom: 40px !important;
}

.packages-heading .content-text {
	margin-bottom: 120px !important;
}

.packages-heading .packages-description-text,
.packages-heading .packages-subheading-description-text {
	max-width: 600px;
	margin: 0 auto;
}

.packages-subheading-description-text {
	margin-left: 0 !important;
}


/* Tab inputs are hidden - the <label> elements act as the visible tabs */
.packages-tabs-wrap input[type="radio"].packages-tab-input {
	display: none;
}

/* Tab bar - hidden on desktop, only used for the mobile tier switcher */
.packages-tabs {
	display: none;
}

.packages-tabs .packages-tab {
	cursor: pointer;
}

/* Columns - desktop shows the features column plus every visible tier column side by side.
   Row tracks are defined here (header + one per feature) so every column can subgrid onto them
   and feature rows line up across columns regardless of how much each cell's content wraps. */
.packages-columns {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) repeat(var(--packages-tier-count, 1), minmax(0, 1fr));
	grid-template-rows: auto repeat(var(--packages-feature-count, 0), auto);
	column-gap: 24px;
}

/* Each column subgrids onto the parent's row tracks - this is what keeps a feature's row the
   same height in the features column and every tier column, however tall its tallest cell is. */
.packages-column {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: 1 / -1;
	background-color: var(--enigmaDarkGrey);
	/* padding: 16px; */
	border-radius: 20px;
}

.packages-tier-column {
	text-decoration: none;
}

.packages-tier-column:hover {
	outline: 1px solid var(--enigmaYellow);
}


.packages-column-header {
	display: flex;
	flex-direction: column;
	color: var(--enigmaWhite);
	font-size: 32px;
	font-family: var(--mangoGrotesqueMedium);
	text-transform: uppercase;
	text-align: center;
	border-bottom: 1px solid var(--enigmaYellow);
	padding-bottom: 16px;
	margin: 16px 16px 0 16px;
}

.packages-column-header .packages-tier-name {
	font-size: 32px;
	font-family: var(--mangoGrotesqueMedium);
	margin-bottom: 0;
}

.packages-feature-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 18px 0;
	color: var(--enigmaWhite);
	font-size: 14px;
	font-family: var(--switzerBold);
	border-bottom: 1px solid var(--enigmaLightGrey80);
	margin: 0 16px;
}

.packages-feature-row.packages-feature-included {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

/* Icon hooks for included / not included rows without detail text - background image/svg added via CSS */
.packages-feature-icon {
	display: inline-block;
}

.packages-feature-icon-yes {
	display: inline-flex;
	color: var(--enigmaYellow);
}

.packages-feature-icon-yes::before {
	content: '';
	display: inline-block;
	background-image: url('../../assets/icons/icon-tier-included.svg');
	background-size: contain;
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	align-items: center;
}

.packages-feature-icon-no {
	display: inline-flex;
	color: var(--enigmaLightGrey80);
}

.packages-feature-icon-no::before {
	content: '';
	display: inline-block;
	background-image: url('../../assets/icons/icon-tier-not-included.svg');
	background-size: contain;
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	align-items: center;
}

.packages-feature-icon-no::before {
	content: '';
	display: inline-block;
	background-image: url('../../assets/icons/icon-tier-not-included.svg');
	background-size: contain;
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	align-items: center;
}

.packages-feature-detail {
	margin-top: 8px;
	font-size: 14px;
	color: var(--enigmaWhite);
	padding-left: 24px;
	margin-bottom: 0;

}

/* Bottom row - "Total" label in the features column, tier price in each tier column */
.packages-total-row {
	border-bottom: none;
	font-size: 21px;
	text-align: center;
	margin: 0 auto;
}

.packages-features-column .packages-total-row {
	color: var(--enigmaYellow);
	text-align: center;
	padding: 0 auto;
}

.packages-tier-column .packages-total-row {
	background-color: var(--enigmaYellow);
	width: 100%;
	border-radius: 0 0 8px 8px;
	display: flex;
    justify-content: center;
	align-items: center;
	font-size: 21px;

}

.packages-tier-column .packages-total-row .packages-tier-price {
	font-size: 21px;
	font-family: var(--enigmaFontFamily);
	color: var(--enigmaBlack);
}


.packages-cta {
	width: 100%;
}

/* Mobile - features column fixed at 40%, one tier panel at a time at 60%, switched via the tabs above */
@media only screen and (max-width: 767px) {

	.packages-tabs {
		display: flex;
		flex-direction: row;
        justify-content: space-around;
		margin-bottom: 32px;
	}

	.packages-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.packages-tab-name {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 32px;
		font-family: var(--mangoGrotesqueMedium);
		color: var(--enigmaWhite);
	}

	/* Eye icon above the tab name - closed by default, swapped to open on the currently showing tab below */
	.packages-tab-icon {
		display: block;
		width: 24px;
		height: 24px;
		margin-bottom: 8px;
		background-image: url('../../assets/icons/icon-eye-closed.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	.packages-columns {
		/* 40% + 60% already fills the container, so the column-gap must come out of one
		   track here rather than being added on top - otherwise the visible tier column
		   overflows past the small-container's padding by exactly the gap width. */
		grid-template-columns: 40% calc(60% - 24px);
	}

	.packages-tier-column {
		display: none;
	}

	/* Show the tier column that matches the checked tab, by position rather than id so this works
	   for any number of tiers. display: grid (not block) so the column keeps subgridding its rows. */
	.packages-tab-input:nth-of-type(1):checked ~ .packages-columns .packages-column:nth-of-type(2) {
		display: grid;
	}
	.packages-tab-input:nth-of-type(2):checked ~ .packages-columns .packages-column:nth-of-type(3) {
		display: grid;
	}
	.packages-tab-input:nth-of-type(3):checked ~ .packages-columns .packages-column:nth-of-type(4) {
		display: grid;
	}
	.packages-tab-input:nth-of-type(4):checked ~ .packages-columns .packages-column:nth-of-type(5) {
		display: grid;
	}

	/* Highlight the active tab to match the visible panel - CSS-only equivalent of an "active" class,
	   since these tabs are driven by :checked radios rather than JS. Position-matched like the panel
	   switch above, so it works for any number of tiers without needing per-instance selectors. */
	.packages-tab-input:nth-of-type(1):checked ~ .packages-tabs .packages-tab:nth-of-type(1),
	.packages-tab-input:nth-of-type(2):checked ~ .packages-tabs .packages-tab:nth-of-type(2),
	.packages-tab-input:nth-of-type(3):checked ~ .packages-tabs .packages-tab:nth-of-type(3),
	.packages-tab-input:nth-of-type(4):checked ~ .packages-tabs .packages-tab:nth-of-type(4) {
		border-bottom: 2px solid var(--enigmaYellow);
	}

	.packages-tab-input:nth-of-type(1):checked ~ .packages-tabs .packages-tab:nth-of-type(1) .packages-tab-name,
	.packages-tab-input:nth-of-type(2):checked ~ .packages-tabs .packages-tab:nth-of-type(2) .packages-tab-name,
	.packages-tab-input:nth-of-type(3):checked ~ .packages-tabs .packages-tab:nth-of-type(3) .packages-tab-name,
	.packages-tab-input:nth-of-type(4):checked ~ .packages-tabs .packages-tab:nth-of-type(4) .packages-tab-name {
		color: var(--enigmaYellow);
	}

	.packages-tab-input:nth-of-type(1):checked ~ .packages-tabs .packages-tab:nth-of-type(1) .packages-tab-icon,
	.packages-tab-input:nth-of-type(2):checked ~ .packages-tabs .packages-tab:nth-of-type(2) .packages-tab-icon,
	.packages-tab-input:nth-of-type(3):checked ~ .packages-tabs .packages-tab:nth-of-type(3) .packages-tab-icon,
	.packages-tab-input:nth-of-type(4):checked ~ .packages-tabs .packages-tab:nth-of-type(4) .packages-tab-icon {
		background-image: url('../../assets/icons/icon-eye-open.svg');
	}
}