/* Hexagon look. The Bricksnstone logo is a hexagon, so photos, videos, cards and buttons share that shape.
   Everything here is scoped to body.bns-hex: turn the look off in inc/hex.php and the site returns to square corners. */

body.bns-hex {
	--bns-cut: min(11%, 3rem); /* how far the pointed sides of a plate stick out (percentages are of the plate's width) */
	--bns-hex-shadow: drop-shadow(0 16px 18px rgba(12, 31, 51, 0.17)) drop-shadow(0 3px 5px rgba(12, 31, 51, 0.1));
}

/* ---- Project photos: a regular hexagon with its point up, like the logo ---- */
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card {
	position: relative; display: block; aspect-ratio: 0.866 / 1; padding: 0; overflow: visible;
	background: transparent; border: 0; box-shadow: none;
	filter: var(--bns-hex-shadow);
	transition: transform 0.35s ease;
}
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card:hover { transform: translateY(-6px); box-shadow: none; }
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card__media {
	position: absolute; inset: 0; display: block; aspect-ratio: auto; overflow: hidden;
	background: var(--bns-color-mist);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(12, 31, 51, 0) 46%, rgba(12, 31, 51, 0.86) 100%);
}
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card__body {
	position: absolute; left: 15%; right: 15%; bottom: 21%; z-index: 2;
	display: grid; justify-items: center; gap: 0.25rem; padding: 0; text-align: center; pointer-events: none;
}
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card__body a { pointer-events: auto; }
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card__body p:not(.bns-card__index) { display: none; }
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card__body .bns-card__index { color: rgba(255, 255, 255, 0.85); }
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card h3 { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card h3 a { color: #fff; }
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card h3 a:hover,
body.bns-hex:is(.home, .post-type-archive-project, .tax-project_type) .bns-card h3 a:focus-visible { color: var(--bns-color-blue-tint); }
/* Room for the shadows inside the sliding rows. */
body.bns-hex .bns-portfolio__grid, body.bns-hex .bns-vband .bns-vt-grid { margin-block: -1.25rem -2rem; padding-block: 1.25rem 3rem; }

/* ---- Video posters (testimonials and featured videos) ---- */
body.bns-hex .bns-vt { overflow: visible; background: transparent; filter: var(--bns-hex-shadow); transition: transform 0.35s ease; }
body.bns-hex .bns-vt:hover, body.bns-hex .bns-vt:focus-visible { transform: translateY(-5px); }
body.bns-hex .bns-vt__poster { clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%); box-shadow: inset 0 -130px 90px -70px rgba(12, 31, 51, 0.9); }
body.bns-hex .bns-vt:hover .bns-vt__poster, body.bns-hex .bns-vt:focus-visible .bns-vt__poster { transform: none; }
body.bns-hex .bns-vt__cap { left: 12%; right: 12%; bottom: 8%; padding: 0; text-align: center; background: none; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }

/* ---- Text cards and panels: a hexagon with pointed sides ---- */
body.bns-hex :is(.bns-gr, .bns-panel, .bns-pillar, .bns-svc__card, .bns-svc__panel, .bns-about__card, .bns-step) {
	clip-path: polygon(var(--bns-cut) 0, calc(100% - var(--bns-cut)) 0, 100% 50%, calc(100% - var(--bns-cut)) 100%, var(--bns-cut) 100%, 0 50%);
	padding: 2.5rem 2.9rem; background: var(--bns-color-white); border: 0; box-shadow: none;
}
body.bns-hex .bns-step { --bns-cut: 1.1rem; padding: 2rem 1.75rem; }
/* The shadow sits on the container, because a clipped shape cannot cast its own. */
body.bns-hex :is(.bns-gr-grid, .bns-pathways, .bns-why__grid, .bns-steps, .bns-svc__grid, .bns-svc__duo, .bns-about__mv) { filter: var(--bns-hex-shadow); }

/* ---- Photos beside text (About page) ---- */
body.bns-hex .bns-split__media { filter: var(--bns-hex-shadow); }
body.bns-hex .bns-split__media img { clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); }

/* ---- Buttons: hexagon ends ---- */
body.bns-hex .bns-button {
	padding-inline: 2.4rem; border: 0;
	clip-path: polygon(0.85rem 0, calc(100% - 0.85rem) 0, 100% 50%, calc(100% - 0.85rem) 100%, 0.85rem 100%, 0 50%);
}
body.bns-hex .bns-button--ghost { background: var(--bns-color-mist); }
body.bns-hex .bns-button--ghost:hover, body.bns-hex .bns-button--ghost:focus-visible { background: var(--bns-color-blue); color: var(--bns-color-white); }
body.bns-hex .bns-button--ghost-light, body.bns-hex .bns-result .bns-button--ghost { background: rgba(255, 255, 255, 0.16); color: var(--bns-color-white); }
body.bns-hex .bns-button--ghost-light:hover, body.bns-hex .bns-button--ghost-light:focus-visible,
body.bns-hex .bns-result .bns-button--ghost:hover, body.bns-hex .bns-result .bns-button--ghost:focus-visible { background: var(--bns-color-white); color: var(--bns-color-blue-deep); }
/* A clipped button cannot draw an outline outside itself, so keyboard focus is shown as a ring inside it. */
body.bns-hex .bns-button:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px var(--bns-color-white), inset 0 0 0 5px var(--bns-color-ink); }

@media (max-width: 39.99rem) {
	body.bns-hex { --bns-cut: min(9%, 2.2rem); }
	body.bns-hex :is(.bns-gr, .bns-panel, .bns-pillar, .bns-svc__card, .bns-svc__panel, .bns-about__card) { padding: 2.25rem 2.4rem; }
}