/**
 * Layout + Foundation-free helpers for Bitly Reports.
 * Chart/block visual styles remain in reports.css and report-charts.css.
 */

.bitly-report-page,
.bitly-report-article,
body.report .bitly-report__container,
body.report .report-tabs,
body.report .report-tabcontent,
body.report .report-tabs-pager {
	box-sizing: border-box;
}

body.report .bitly-report__container,
body.report .report-tabs__container,
body.report .report-tabs-pager__container {
	width: 100%;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

@media print, screen and (min-width: 40em) {
	body.report .bitly-report__container,
	body.report .report-tabs__container,
	body.report .report-tabs-pager__container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

body.report .bitly-report__hero-grid {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media print, screen and (min-width: 64em) {
	body.report .bitly-report__hero-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		align-items: center;
	}
}

body.report .bitly-report__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body.report .bitly-report__desktop-tabs {
	display: none;
}

body.report .bitly-report__mobile-tabs {
	display: block;
}

@media print, screen and (min-width: 64em) {
	body.report .bitly-report__desktop-tabs {
		display: block;
	}

	body.report .bitly-report__mobile-tabs {
		display: none;
	}
}

body.report .report-tabcontent__panel {
	display: none;
}

body.report .report-tabcontent__panel.is-active {
	display: block;
}

body.report .report-tabs__list {
	list-style: none;
}

body.report .bitly-report__block + .bitly-report__block {
	margin-top: 0;
}

body.report ul.no-bullet {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Foundation XY-grid subset, scoped to editor-authored tab content.
 *
 * ACF tab HTML is authored with Foundation grid markup (grid-x / cell /
 * medium-4 / large-3 …) and reports.css delegates column widths to it — the
 * block rows set flex-wrap and gap but never display:flex. Values mirror
 * foundation-sites 6.4 so imported content lays out as it did on the old
 * theme.
 *
 * The :where() scope is load-bearing: it contributes no specificity, so these
 * keep Foundation's single-class weight. reports.css and the per-report
 * `report_code` CSS are authored to override plain Foundation classes, and
 * they only keep winning if this shim stays that light. Raising it to
 * `body.report .report-content .cell.large-auto` silently breaks overrides
 * like `.report-block--cards-text__card { flex-basis: 17% }`.
 * ------------------------------------------------------------------------- */

:where(body.report .report-content) .grid-x {
	display: flex;
	flex-flow: row wrap;
}

:where(body.report .report-content) .cell {
	flex: 0 0 auto;
	min-height: 0;
	min-width: 0;
	width: 100%;
}

/* grid-padding-x pads the cells and pulls the row out by the same amount. */
:where(body.report .report-content) .grid-padding-x > .cell {
	padding-left: 0.625rem;
	padding-right: 0.625rem;
}

:where(body.report .report-content) .grid-container:not(.full) > .grid-padding-x,
:where(body.report .report-content) .grid-padding-x .grid-padding-x {
	margin-left: -0.625rem;
	margin-right: -0.625rem;
}

:where(body.report .report-content) .align-middle {
	align-items: center;
}

:where(body.report .report-content) .grid-x > .small-12 {
	width: 100%;
}

@media print, screen and (min-width: 40em) {
	:where(body.report .report-content) .grid-padding-x > .cell {
		padding-left: 0.9375rem;
		padding-right: 0.9375rem;
	}

	:where(body.report .report-content) .grid-container:not(.full) > .grid-padding-x,
	:where(body.report .report-content) .grid-padding-x .grid-padding-x {
		margin-left: -0.9375rem;
		margin-right: -0.9375rem;
	}

	:where(body.report .report-content) .grid-x > .medium-4 {
		width: 33.33333%;
	}

	:where(body.report .report-content) .grid-x > .medium-6 {
		width: 50%;
	}

	:where(body.report .report-content) .grid-x > .medium-auto {
		flex: 1 1 0px;
		width: auto;
	}

	:where(body.report .report-content) .grid-x > .medium-shrink {
		flex: 0 0 auto;
		width: auto;
	}
}

@media print, screen and (min-width: 64em) {
	:where(body.report .report-content) .grid-x > .large-3 {
		width: 25%;
	}

	:where(body.report .report-content) .grid-x > .large-auto {
		flex: 1 1 0px;
		width: auto;
	}
}

/* Container gutters. The old theme supplied these from its own .grid-container
 * ladder (16 / 20 / 40px), which the new theme has no reason to replicate, so
 * the plugin owns them. max-width is left alone: reports.css clamps report
 * containers and `report_code` overrides that with !important, same as live. */
body.report .report-content .grid-container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

@media screen and (min-width: 768px) {
	body.report .report-content .grid-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media screen and (min-width: 1440px) {
	body.report .report-content .grid-container {
		padding-left: 40px;
		padding-right: 40px;
	}
}