/* =====================================================================
   Infinity Rise — Industries page
   Reuses home.css for shared components (How We Work, Insights, headings);
   this file styles the banner, intro and Product & Service Highlights grid.
   Uses the shared design tokens (--color-*, --fs-*, --sec-* spacing).
   ===================================================================== */

.ind-section { padding: var(--sec-pt) var(--sec-pr) var(--sec-pb) var(--sec-pl); }

/* ---------- BANNER ---------- */
.ind-banner { position: relative; background-size: cover; background-position: center; color: var(--color-white);
	display: flex; align-items: center; min-height: var(--bnr-h);
	padding: var(--bnr-pt) var(--bnr-pr) var(--bnr-pb) var(--bnr-pl); }
.ind-banner__overlay { position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 42%, rgba(0,0,0,0) 72%); }
.ind-banner__inner { position: relative; z-index: 1; }
.ind-banner__title { color: var(--color-white); font-size: var(--fs-h1); font-weight: 600; line-height: 1.08; margin: 0;
	max-width: 640px; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
@media (min-width: 1025px) { .ind-banner { padding-top: 60px; padding-bottom: 60px; } }
@media (min-width: 1537px) { .ind-banner { min-height: 600px; } }
@media (min-width: 1281px) and (max-width: 1536px) { .ind-banner { min-height: 480px; } }
@media (min-width: 1025px) and (max-width: 1280px) { .ind-banner { min-height: 400px; } }
/* Mobile: nudge the banner title a little closer to the left edge. */
@media (max-width: 600px) { .ind-banner { padding-left: 16px; } }

/* ---------- INTRO ---------- */
.ind-intro { background: var(--color-bg-2); }
section.ind-section.ind-intro { padding-bottom: 0px; }
.ind-intro__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.ind-intro__heading { font-size: var(--fs-h2); font-weight: 500; line-height: 1.18; margin: 0; color: var(--color-black); }
.ind-intro__body p { color: #4a4a4a; font-size: var(--fs-p); line-height: 1.7; margin: 0 0 22px; }
.ind-intro__link { display: inline-block; color: var(--color-secondary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ind-intro__link:hover, .ind-intro__link:focus { color: var(--color-primary); }

/* ---------- PRODUCT & SERVICE HIGHLIGHTS ---------- */
.ind-high { background: var(--color-bg-2); }
section.ind-section.ind-high.bg-2 { padding-bottom: 0; }
.ind-high__heading { font-size: var(--fs-h2); font-weight: 500; line-height: 1.15; margin: 0 0 40px; color: var(--color-black); }
.ind-high__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 30px; }
.ind-card { display: block; text-decoration: none; color: inherit; }
.ind-card.is-hidden { display: none; }
.ind-card__media { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; background: #dcd7cd center / cover no-repeat; border-radius: 2px; overflow: hidden; }
/* Hover overlay: description text appears over the image. */
.ind-card__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 26px 24px; color: var(--color-white); font-size: 16px; line-height: 1.5; background: linear-gradient(180deg, rgba(18,18,18,.12) 0%, rgba(18,18,18,.72) 100%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.ind-card:hover .ind-card__overlay, .ind-card:focus-within .ind-card__overlay { opacity: 1; }
.ind-card__label { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.ind-card__arrow { flex: 0 0 auto; display: inline-flex; color: var(--color-secondary); }
.ind-card__arrow svg { display: block; }
.ind-card__arrow svg circle { transition: fill .2s ease; }
.ind-card__arrow svg path { transition: stroke .2s ease; }
.ind-card__name { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--color-black); transition: color .2s ease; }
.ind-card:hover .ind-card__name, .ind-card:focus .ind-card__name { color: var(--color-secondary); }
.ind-card:hover .ind-card__arrow svg circle, .ind-card:focus .ind-card__arrow svg circle { fill: var(--color-secondary); }
.ind-card:hover .ind-card__arrow svg path, .ind-card:focus .ind-card__arrow svg path { stroke: #fff; }
/* 1920: taller (portrait) highlight card image to match the design. */
@media (min-width: 1900px) { .ind-card__media { aspect-ratio: 3 / 4; } .ind-card__name { font-size: 28px; } .ind-high__grid { row-gap: 80px; } }
/* 1536 & 1440 screens: portrait card shape + roomier gap between rows (matches the design). */
@media (min-width: 1281px) and (max-width: 1536px) { .ind-card__media { aspect-ratio: 3 / 4; } .ind-high__grid { row-gap: 76px; } }
/* 1536 screen: highlights section gets 90px top/bottom padding (like the sustainability sections at this size). */
@media (min-width: 1441px) and (max-width: 1536px) { .ind-high { padding-top: 90px; } section.ind-section.ind-high.bg-2 { padding-bottom: 0; } }

.ind-high__more { text-align: center; margin-top: 52px; }
.ind-high__more-btn { background: transparent; color: var(--color-primary, #06402a); border: 1px solid var(--color-secondary, #a97f2d); border-radius: 0; padding: 12px 34px; font-size: 15px; font-weight: 500; cursor: pointer; }
.ind-high__more-btn:hover, .ind-high__more-btn:focus { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

/* ---------- CTA (page-specific) ---------- */
/* Reuses the shared .lp-cta layout (main.css) for the card, background and
   responsive scaling; only the primary button is re-skinned to gold to match
   the Industries design (the shared CTA keeps its green button). */
.ind-cta .lp-cta__actions a.btn-primary { background-color: var(--color-ancient); border-color: var(--color-ancient); color: var(--color-primary); }
.ind-cta .lp-cta__actions a.btn-primary:hover, .ind-cta .lp-cta__actions a.btn-primary:focus { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1280px) {
	.ind-high__grid { grid-template-columns: repeat(3, 1fr); }
}
/* 1280 screen: keep 4 portrait highlight cards in a row (like the 1536/1920
   design), not 3 landscape cards. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.ind-high__grid { grid-template-columns: repeat(4, 1fr); row-gap: 60px; }
	.ind-card__media { aspect-ratio: 3 / 4; }
}
@media (max-width: 1024px) {
	.ind-intro__inner { grid-template-columns: 1fr; gap: 24px; }
	.ind-card__name { font-size: 16px; }
}
@media (max-width: 768px) {
	.ind-high__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
}
@media (max-width: 520px) {
	.ind-high__grid { grid-template-columns: 1fr; }
	.ind-high__more { margin-top: 36px; }
}
/* Mobile: turn the highlights grid into a smooth, swipeable slider
   (native CSS scroll-snap — no JS). Desktop grid is untouched. */
@media (max-width: 600px) {
	.ind-high__grid {
		display: flex;
		grid-template-columns: none;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
		scrollbar-width: none;            /* Firefox */
	}
	.ind-high__grid::-webkit-scrollbar { display: none; } /* WebKit */
	.ind-high__grid > .ind-card {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
	/* All cards live in the slider; no "Load More" on mobile. */
	.ind-high__grid > .ind-card.is-hidden { display: block; }
	.ind-high__more { display: none; }
}

/* Mobile: normalize the Intro section to the site's 24px rhythm, and align the
   banner title + section headings to the site scale (banner 26, headings 22). */
@media (max-width: 600px) {
	.ind-intro.ind-section { padding-top: 24px !important; padding-bottom: 24px !important; }
	.ind-banner__title { font-size: 26px; }
	.ind-intro__heading,
	.ind-high__heading { font-size: 22px; }
}
/* Mobile: uniform 24px top & bottom on every Industries content section (beats
   the bespoke padding-bottom:0 rules so the rhythm matches the rest of the site). */
@media (max-width: 768px) {
	.ind-section { padding-top: 24px !important; padding-bottom: 24px !important; }
}