/*
 * AW Custom page template styles.
 *
 * Every rule is scoped to .page-template-template-aw-custom so nothing here can
 * reach the rest of the site. Values are ported from the Adobe XD source
 * (BBIO_I270-Landing-Page, artboard 1440 x 6131).
 *
 * Enqueued only on this template - see banebio_aw_custom_styles() in functions.php.
 */

.page-template-template-aw-custom {
	--i270-navy:    #124A91;
	--i270-body:    #575757;
	--i270-green:   #8BC540;
	--i270-blue:    #0074AD;
	--i270-teal:    #107176;
	--i270-btn-blue: #0088CC;
	--i270-panel-a: #F4F4F4;
	--i270-panel-b: #FFFFFF;
	--i270-content: 1060px;
}

/* ---------------------------------------------------------------- utilities
 * The theme ships a partial Bootstrap-alike grid but not these two.
 */
.page-template-template-aw-custom .row.align-items-center {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.page-template-template-aw-custom .content-section .content-inner {
	max-width: 100%;
}

/* ---------------------------------------------------------------- typography */
.page-template-template-aw-custom .content-section {
	color: var(--i270-body);
}

.page-template-template-aw-custom .content-title {
	color: var(--i270-navy);
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 0.75rem;
}

.page-template-template-aw-custom .content-title.text-light,
.page-template-template-aw-custom .text-light .content-title {
	color: #fff;
}

.page-template-template-aw-custom .content-title.h1 { font-size: 3.4375rem; } /* 55px */
.page-template-template-aw-custom .content-title.h2 { font-size: 2.375rem; }  /* 38px */
.page-template-template-aw-custom .content-title.h3 { font-size: 2rem; }      /* 32px */
.page-template-template-aw-custom .content-title.h4 { font-size: 1.75rem; }   /* 28px */

.page-template-template-aw-custom .content-section p {
	font-size: 1rem;
	line-height: 1.6;
}

.page-template-template-aw-custom .text-light,
.page-template-template-aw-custom .text-light p,
.page-template-template-aw-custom .text-light li {
	color: #fff;
}

/* Green rule under a section heading. Applied per-section via section_class. */
.page-template-template-aw-custom .i270-underline .layout_single-column .content-title::after,
.page-template-template-aw-custom .i270-underline .layout_media-text .content-title::after {
	content: "";
	display: block;
	width: 175px;
	max-width: 100%;
	height: 1px;
	background-color: var(--i270-green);
	margin-top: 1.125rem;
	margin-bottom: 0.5rem;
}

.page-template-template-aw-custom .i270-underline .layout_single-column .content-title.text-center::after {
	margin-left: auto;
	margin-right: auto;
}

/* Green bullet markers, matching the design's green glyphs beside grey copy. */
.page-template-template-aw-custom .content-section ul {
	list-style-position: outside;
	margin-left: 1.25rem;
	padding-left: 0;
}

.page-template-template-aw-custom .content-section ul li {
	margin-bottom: 0.35rem;
}

.page-template-template-aw-custom .content-section ul li::marker {
	color: var(--i270-green);
	font-weight: 700;
}

/* ---------------------------------------------------------------- buttons
 * Page-scoped only. The site-wide flat green .btn-primary is untouched.
 */
.page-template-template-aw-custom #page .btn.btn-primary,
.page-template-template-aw-custom #page .btn.btn-secondary,
.page-template-template-aw-custom #page .btn.btn-outline-primary,
.page-template-template-aw-custom #page .btn.btn-outline-light {
	display: inline-flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.5rem 1.75rem;
	border-radius: 8px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.01em;
	line-height: 1.2;
}

.page-template-template-aw-custom #page .btn.btn-primary {
	background: -webkit-linear-gradient(top, #FFFFFF 0%, var(--i270-green) 100%);
	background: linear-gradient(to bottom, #FFFFFF 0%, var(--i270-green) 100%);
	background-color: #FFFFFF;
	color: var(--i270-blue);
	font-size: 1.1875rem; /* 19px */
	border: 0;
}

.page-template-template-aw-custom #page .btn.btn-primary:hover,
.page-template-template-aw-custom #page .btn.btn-primary:focus {
	background: -webkit-linear-gradient(top, #FFFFFF 0%, #75AE2C 100%);
	background: linear-gradient(to bottom, #FFFFFF 0%, #75AE2C 100%);
	color: var(--i270-blue);
}

.page-template-template-aw-custom #page .btn.btn-outline-light {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
	font-size: 1rem; /* 16px */
}

/* Solid blue secondary CTA. The XD source specifies #0088CC, which is a shade off
   the site-wide .btn-secondary (#007dbb); this override is scoped to this template
   so the rest of the site keeps its own value. */
.page-template-template-aw-custom #page .btn.btn-secondary {
	background-color: var(--i270-btn-blue);
	color: #fff;
	font-size: 1rem; /* 16px */
	border: 0;
}

.page-template-template-aw-custom #page .btn.btn-secondary:hover,
.page-template-template-aw-custom #page .btn.btn-secondary:focus {
	background-color: #006fa8;
	color: #fff;
}

/* Secondary CTA on a light band. */
.page-template-template-aw-custom #page .btn.btn-outline-primary {
	background: transparent;
	color: var(--i270-navy);
	border: 2px solid var(--i270-navy);
	font-size: 1rem; /* 16px */
}

.page-template-template-aw-custom #page .btn.btn-outline-primary:hover,
.page-template-template-aw-custom #page .btn.btn-outline-primary:focus {
	background: var(--i270-navy);
	color: #fff;
}

.page-template-template-aw-custom #page .btn.btn-outline-light:hover,
.page-template-template-aw-custom #page .btn.btn-outline-light:focus {
	background: #fff;
	color: var(--i270-teal);
}

.page-template-template-aw-custom .button-wrapper {
	margin: 0;
}

/* ---------------------------------------------------------------- hero */
.page-template-template-aw-custom .content-section.i270-hero {
	/* No overlay of any kind. The supplied hero asset already carries the teal
	   treatment baked in (mean RGB 11,87,97), so white copy measures 5.8:1 at its
	   worst against it. Adding a tint here would darken an already-tinted image. */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.page-template-template-aw-custom .i270-hero .content-row {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.page-template-template-aw-custom .i270-hero .hero-badge {
	text-align: center;
}

.page-template-template-aw-custom .i270-hero .hero-badge-img {
	width: 100%;
	max-width: 340px;
	height: auto;
	display: inline-block;
}

.page-template-template-aw-custom .i270-hero .content-title {
	color: #fff;
	margin-bottom: 0.5rem;
}

.page-template-template-aw-custom .i270-hero .hero-subheading {
	font-size: 2.375rem; /* 38px */
	font-weight: 300;
	line-height: 1.2;
	color: #fff;
	margin-bottom: 1.25rem;
}

.page-template-template-aw-custom .i270-hero .hero-content p {
	font-size: 1.25rem; /* 20px */
	line-height: 1.45;
	color: #fff;
	margin-bottom: 1.75rem;
}

.page-template-template-aw-custom .i270-hero .hero-actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ---------------------------------------------------------------- media w/ text */
.page-template-template-aw-custom .layout_media-text .media-text-content .content-title {
	margin-bottom: 1rem;
}

.page-template-template-aw-custom .layout_media-text .media-text-content p {
	font-size: 1.5rem; /* 24px */
	font-weight: 300;
	line-height: 1.4;
	color: var(--i270-navy);
}

.page-template-template-aw-custom .layout_media-text .media-text-image figure.image-wrapper {
	margin: 0;
	overflow: hidden;
}

.page-template-template-aw-custom .layout_media-text .media-text-image img {
	display: block;
	width: 100%;
	height: auto;
}

.page-template-template-aw-custom .layout_media-text.image-left .media-text-image {
	-webkit-box-ordinal-group: 0;
	-ms-flex-order: -1;
	order: -1;
}

/* ---------------------------------------------------------------- inset panels
 * "What's available / Who it's for" and "Flexible Space Options".
 * Gradient is on the row, padding on the inner, per the .row gutter rule.
 */
/* The gradient sits on the section's inner wrapper, which encloses every row -
   so a section heading above the two columns is inside the panel too. */
.page-template-template-aw-custom .i270-panel .content-inner > .col-inner {
	background: -webkit-linear-gradient(top, var(--i270-panel-a) 0%, var(--i270-panel-b) 100%);
	background: linear-gradient(to bottom, var(--i270-panel-a) 0%, var(--i270-panel-b) 100%);
	padding: 2.5rem 2rem;
}

.page-template-template-aw-custom .i270-panel .content-row.two-column > * > .col-inner {
	padding: 0 1rem;
}

.page-template-template-aw-custom .i270-panel .content-row.two-column .content-title {
	font-size: 1.75rem; /* 28px */
	margin-bottom: 1rem;
}

/* ---------------------------------------------------------------- columns variants */

/* Left-aligned icon columns ("What You Get"). The theme centres layout_columns
   globally, so this restores the design's left alignment for this page only. */
.page-template-template-aw-custom .i270-cols-left .content-row.layout_columns {
	text-align: left;
}

.page-template-template-aw-custom .i270-cols-left .content-row.layout_columns .content-title {
	font-size: 2rem; /* 32px */
	margin-bottom: 1rem;
}

.page-template-template-aw-custom .i270-cols-left .content-row.layout_columns span.icon {
	margin-bottom: 0.75rem;
}

/* Two equal icon columns ("Lease Flexibility" / "The Perfect Location"). */
.page-template-template-aw-custom .i270-duo .content-row.layout_columns {
	text-align: left;
}

.page-template-template-aw-custom .i270-duo .content-row.layout_columns .content-title {
	font-size: 2rem; /* 32px */
	margin-bottom: 0.75rem;
}

/* Six centred columns, three per row ("Host Your Next Event"). */
.page-template-template-aw-custom .i270-events .content-row.layout_columns .content-title {
	font-size: 1.75rem; /* 28px */
}

/* Space the intro line off the heading rule above and the icon columns below. */
.page-template-template-aw-custom .i270-events .layout_single-column .col-inner > p {
	margin-top: 1.75rem;
	margin-bottom: 2.5rem;
}

.page-template-template-aw-custom .i270-events .content-row.layout_columns > * {
	margin-bottom: 2.5rem;
}

/* Inset dark panel with five columns ("Why I-270 Tech Labs").
   max-width on the section itself makes the background an inset panel rather
   than a full-bleed band, which is what the XD source shows. */
.page-template-template-aw-custom .content-section.i270-why {
	max-width: calc(var(--i270-content) + 30px);
	margin-left: auto;
	margin-right: auto;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Interior padding: without it the outer columns' text sits ~15px off the panel
   edge. This band runs its content full width (outer_content_width 12) so the
   five columns keep their room, and the padding here supplies the inset - which
   lands the first label ~50px off the panel edge, as the XD source does. */
.page-template-template-aw-custom .i270-why > .container {
	padding-left: 3rem;
	padding-right: 3rem;
}

/* Separate the heading and its green rule from the icon columns. */
.page-template-template-aw-custom .i270-why .content-row.layout_single-column {
	margin-bottom: 2.25rem;
}

.page-template-template-aw-custom .i270-why .content-row.layout_columns .content-title {
	font-size: 1.75rem; /* 28px */
	color: #fff;
}

.page-template-template-aw-custom .i270-why .content-row.layout_columns span.icon {
	margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------- equipment advantage
 * Full-bleed split: dark photographic band, copy left, product photo right.
 * The inner max-width + auto left margin lands the copy's left edge on the
 * site content width without hard-coding a viewport calculation.
 */
.page-template-template-aw-custom .i270-equipment .content-col > .col-inner {
	max-width: 530px;
	margin-left: auto;
	padding: 4.5rem 3rem 4.5rem 1rem;
}

.page-template-template-aw-custom .i270-equipment .content-title {
	margin-bottom: 1rem;
}

.page-template-template-aw-custom .i270-equipment .col-inner h3,
.page-template-template-aw-custom .i270-equipment .col-inner h4 {
	color: #fff;
	font-size: 1.5rem; /* 24px */
	margin-bottom: 0.5rem;
}

.page-template-template-aw-custom .i270-equipment ul li {
	font-size: 1.125rem; /* 18px */
}

/* ---------------------------------------------------------------- responsive */
@media screen and (max-width: 1199px) {
	.page-template-template-aw-custom .content-title.h1 { font-size: 2.75rem; }
	.page-template-template-aw-custom .i270-hero .hero-subheading { font-size: 2rem; }
}

@media screen and (max-width: 991px) {
	.page-template-template-aw-custom .content-title.h1 { font-size: 2.25rem; }
	.page-template-template-aw-custom .content-title.h2 { font-size: 1.875rem; }
	.page-template-template-aw-custom .content-title.h3 { font-size: 1.625rem; }
	.page-template-template-aw-custom .content-title.h4 { font-size: 1.5rem; }

	.page-template-template-aw-custom .i270-hero .hero-subheading { font-size: 1.5rem; }
	.page-template-template-aw-custom .i270-hero .hero-content p { font-size: 1.0625rem; }

	.page-template-template-aw-custom .i270-hero .hero-badge {
		margin-bottom: 2rem;
	}

	.page-template-template-aw-custom .i270-hero .hero-badge-img {
		max-width: 260px;
	}

	.page-template-template-aw-custom .layout_media-text .media-text-content p {
		font-size: 1.1875rem;
	}

	/* Stacked, so the image becomes a normal block with a stable aspect ratio
	   instead of the desktop absolute-positioned half. */
	.page-template-template-aw-custom .i270-equipment .layout_image-with-content .col-image > figure.image-wrapper {
		position: relative;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.page-template-template-aw-custom .i270-equipment .layout_image-with-content .col-image > figure.image-wrapper > img {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		min-width: 100%;
		min-height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.page-template-template-aw-custom .i270-equipment .content-col > .col-inner {
		max-width: 100%;
		margin-left: 0;
		padding: 3rem 1rem;
	}

	.page-template-template-aw-custom .layout_media-text.image-left .media-text-image,
	.page-template-template-aw-custom .layout_media-text .media-text-image {
		-webkit-box-ordinal-group: 0;
		-ms-flex-order: -1;
		order: -1;
		margin-bottom: 1.5rem;
	}

	.page-template-template-aw-custom .i270-events .content-row.layout_columns > * {
		margin-bottom: 2rem;
	}
}

@media screen and (max-width: 767px) {
	.page-template-template-aw-custom .content-title.h1 { font-size: 1.875rem; }
	.page-template-template-aw-custom .i270-hero .hero-subheading { font-size: 1.3125rem; }

	.page-template-template-aw-custom .i270-hero .hero-actions .btn {
		width: 100%;
	}

	.page-template-template-aw-custom .i270-panel .content-row.two-column > * > .col-inner {
		padding: 1.75rem 1.25rem;
	}

	.page-template-template-aw-custom .content-section.i270-why {
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------- grid gutters
 * The theme only applies the compensating negative row margin on the AW Homepage
 * template, so without this the nested rows inset by 15px per level. Excluded
 * for container-fluid and .g-0 rows, where a negative margin would overflow the
 * viewport and produce a horizontal scrollbar.
 */
.page-template-template-aw-custom #content .container > .row,
.page-template-template-aw-custom #content .col-inner > .row:not(.g-0) {
	margin-left: -15px;
	margin-right: -15px;
}

/* ---------------------------------------------------------------- column counts
 * row-columns.php hardcodes col-lg-4 (three per row), which is right for the
 * three- and six-item sections. These two sections need two and five.
 */
@media screen and (min-width: 992px) {
	/* The theme declares its column widths as "#page .col-lg-4", so these
	   overrides must carry the #page id too - an id outweighs any number of
	   classes, and without it row-columns.php's three-up wins. */
	.page-template-template-aw-custom #page .i270-duo .content-row.layout_columns > * {
		-webkit-flex: 0 0 50%;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	.page-template-template-aw-custom #page .i270-why .content-row.layout_columns > * {
		-webkit-flex: 0 0 20%;
		-ms-flex: 0 0 20%;
		flex: 0 0 20%;
		max-width: 20%;
	}
}

/* Centred intro/callout sections. */
.page-template-template-aw-custom .i270-center .layout_single-column .col-inner {
	text-align: center;
}

.page-template-template-aw-custom .i270-center .layout_single-column .col-inner ul {
	display: inline-block;
	text-align: left;
}

.page-template-template-aw-custom .i270-center .layout_single-column .button-wrapper {
	margin-top: 1.5rem;
}

/* The five "Why" columns sit tighter than a normal three-up. */
.page-template-template-aw-custom .i270-why .content-row.layout_columns > * {
	margin-bottom: 1rem;
}

.page-template-template-aw-custom .i270-why .content-row.layout_columns span.icon {
	font-size: 2.5rem;
}

/* ---------------------------------------------------------------- layout reset
 * Storefront gives the body a "right-sidebar" class, which floats #primary to
 * 73.9% and caps #content > .col-full at ~1064px. This template renders
 * full-bleed sections and no sidebar, so both constraints are released - the
 * same reset the Selling Equipment and AW Event templates already apply.
 */
.page-template-template-aw-custom div#content > .col-full {
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.page-template-template-aw-custom div#primary.content-area {
	float: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.page-template-template-aw-custom main#main {
	margin: 0;
}

/* The site header keeps its own width; only the article content is released. */
.page-template-template-aw-custom .storefront-breadcrumb > .col-full {
	max-width: 1340px;
}

/* ---------------------------------------------------------------- smush lazyload
 * WP Smush lazy-loads CSS background images: it swaps the inline background for
 * "inherit" + a data-bg-image attribute, adds .lazyload, and applies
 *
 *     width:        var(--smush-image-width, var(--smush-placeholder-width))  !important
 *     aspect-ratio: var(--smush-image-aspect-ratio, var(--smush-placeholder-aspect-ratio)) !important
 *     opacity:      0
 *
 * On an <img> that is a sensible placeholder. On a full-width section it collapses
 * the band to the 100px placeholder width at a 1:1 ratio and hides it, so every
 * below-the-fold bg-image section renders broken until it scrolls into view.
 *
 * Rather than fight the !important, define the custom properties its own var()
 * fallbacks read, which resolves both declarations to the value a block-level
 * section should have. Scoped to this template only.
 */
.page-template-template-aw-custom .content-section {
	--smush-image-width: auto;
	--smush-image-aspect-ratio: auto;
}

.page-template-template-aw-custom .content-section.lazyload,
.page-template-template-aw-custom .content-section.lazyloading {
	opacity: 1;
}

/* ---------------------------------------------------------------- hero split
 * The XD source runs the badge from the content's left edge to x=505 and starts
 * the copy at x=717, so the columns are even and the headline wraps to three
 * lines. row-hero_banner.php ships a 5/7 split, which is right for a hero with
 * a wider copy block; this page wants 6/6.
 */
@media screen and (min-width: 992px) {
	.page-template-template-aw-custom #page .i270-hero .hero-badge {
		-webkit-flex: 0 0 38%;
		-ms-flex: 0 0 38%;
		flex: 0 0 38%;
		max-width: 38%;
		/* Centred in its column so the badge sits closer to the copy. */
		text-align: center;
	}

	.page-template-template-aw-custom #page .i270-hero .hero-copy {
		-webkit-flex: 0 0 46%;
		-ms-flex: 0 0 46%;
		flex: 0 0 46%;
		max-width: 46%;
	}

	/* Narrower than the full content width, so the pair reads as a unit. */
	.page-template-template-aw-custom .i270-hero .content-row {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}

/* Five columns sit on one line at desktop, so the per-column bottom margin only
   adds dead space under the band. */
@media screen and (min-width: 992px) {
	.page-template-template-aw-custom .i270-why .content-row.layout_columns > * {
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------------- text measure
 * Narrows the copy inside content-bearing columns so lines wrap sooner and the
 * columns read as distinct blocks rather than filling their full grid width.
 * Applied to the inner wrapper, never to the .row - see section-patterns.md.
 */
/* The theme defines #page .col-lg-3 through .col-lg-9 but NOT .col-lg-10, so the
   sections' outer_content_width of 10 silently fell back to .row > * (100%) and
   every band rendered at the full 1310px container instead of the design's 1060px.
   Defining it here makes that ACF value mean what it says and brings the whole
   page to the design's measure. */
@media screen and (min-width: 992px) {
	.page-template-template-aw-custom #page .col-lg-10 {
		-webkit-flex: 0 0 83.3333333333%;
		-ms-flex: 0 0 83.3333333333%;
		flex: 0 0 83.3333333333%;
		max-width: 83.3333333333%;
	}
}

/* ---------------------------------------------------------------- contact row
 * Mascot | space reserved for the Gravity Form | address block, matching the
 * 1/4 - 1/2 - 1/4 split the existing Contact page uses.
 */
@media screen and (min-width: 992px) {
	.page-template-template-aw-custom #page .i270-contact .content-row.layout_columns > *:nth-child(1),
	.page-template-template-aw-custom #page .i270-contact .content-row.layout_columns > *:nth-child(3) {
		-webkit-flex: 0 0 25%;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	.page-template-template-aw-custom #page .i270-contact .content-row.layout_columns > *:nth-child(2) {
		-webkit-flex: 0 0 50%;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
}

.page-template-template-aw-custom .i270-contact .content-row.layout_columns {
	text-align: left;
}

/* No icons in this row; row-columns.php always emits the wrapper. */
.page-template-template-aw-custom .i270-contact span.icon:empty {
	display: none;
}

.page-template-template-aw-custom .i270-contact .media-mascot img,
.page-template-template-aw-custom .i270-contact img {
	max-width: 100%;
	height: auto;
}

.page-template-template-aw-custom .i270-contact .content-row.layout_columns p {
	margin-bottom: 1rem;
}

/* Reserve the form column's height so the section does not collapse before the
   shortcode is added. Desktop only - stacked, an empty reserved block would just
   read as a gap. Harmless once the form is in place. */
@media screen and (min-width: 992px) {
	.page-template-template-aw-custom .i270-contact .content-row.layout_columns > *:nth-child(2) > .col-inner {
		min-height: 120px;
	}
}

/* Mobile: the panel and the Why band need less interior padding than desktop. */
@media screen and (max-width: 767px) {
	.page-template-template-aw-custom .i270-panel .content-inner > .col-inner {
		padding: 1.75rem 1.25rem;
	}

	.page-template-template-aw-custom .i270-why > .container {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}