@charset "UTF-8";
/* CSS Document */

.zg-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.zg-banner__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.zg-banner__video {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.zg-banner__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.zg-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.zg-banner__content {
  position: relative;
  z-index: 2;
}

/* example sizing hooks (you can tune later) */
.zg-banner--large { min-height: 60vh; }
.zg-banner--small { min-height: 30vh; }

/* blend mode hook */
.zg-banner--blend-multiply .zg-banner__media { mix-blend-mode: multiply; }
.zg-banner--blend-overlay .zg-banner__media { mix-blend-mode: overlay; }
.zg-banner--blend-screen  .zg-banner__media { mix-blend-mode: screen; }

/* Base banner layering */
.zg-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.zg-banner__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.zg-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.zg-banner__content {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 5vw, 72px);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Default height hooks (optional) */
.zg-banner--large { min-height: 60vh; }
.zg-banner--small { min-height: 30vh; }

/* =========================
   OVERLAY MODES (default)
   ========================= */
.zg-banner--copy-center-overlay,
.zg-banner--copy-left-overlay,
.zg-banner--copy-right-overlay {
  display: flex;
  align-items: center;
}

.zg-banner--copy-center-overlay .zg-banner__content {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.zg-banner--copy-left-overlay .zg-banner__content {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

.zg-banner--copy-right-overlay .zg-banner__content {
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

/* =========================
   ABOVE / BELOW MODES
   (media becomes a real block)
   ========================= */
.zg-banner--copy-above-banner,
.zg-banner--copy-below-banner {
  display: flex;
  flex-direction: column;
}

/* In above/below, the media must participate in layout */
.zg-banner--copy-above-banner .zg-banner__media,
.zg-banner--copy-below-banner .zg-banner__media {
  position: relative;
  inset: auto;
  min-height: clamp(220px, 35vh, 520px);
}

/* Overlay should stay on top of the media area only */
.zg-banner--copy-above-banner .zg-banner__overlay,
.zg-banner--copy-below-banner .zg-banner__overlay {
  /* keep absolute, but scoped by making banner the positioning context */
  position: absolute;
}

/* Place content above media */
.zg-banner--copy-above-banner .zg-banner__content {
  order: 0;
}

/* Place media after content */
.zg-banner--copy-above-banner .zg-banner__media {
  order: 1;
}

/* Place media first, content below */
.zg-banner--copy-below-banner .zg-banner__media {
  order: 0;
}
.zg-banner--copy-below-banner .zg-banner__content {
  order: 1;
}

/* =========================
   SIDE MODES (two columns)
   ========================= */
.zg-banner--copy-left-side,
.zg-banner--copy-right-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(320px, 50vh, 640px);
}

/* In side modes, media must not be absolute full-bleed */
.zg-banner--copy-left-side .zg-banner__media,
.zg-banner--copy-right-side .zg-banner__media {
  position: relative;
  inset: auto;
  min-height: 100%;
}

/* Make overlay cover only the media cell */
.zg-banner--copy-left-side .zg-banner__overlay,
.zg-banner--copy-right-side .zg-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Ensure each grid cell is a positioning context */
.zg-banner--copy-left-side .zg-banner__media,
.zg-banner--copy-right-side .zg-banner__media {
  overflow: hidden;
}

/* Content cell */
.zg-banner--copy-left-side .zg-banner__content,
.zg-banner--copy-right-side .zg-banner__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none; /* allow it to fill the column */
}

/* Left-side = content left, media right */
.zg-banner--copy-left-side .zg-banner__content { grid-column: 1; }
.zg-banner--copy-left-side .zg-banner__media   { grid-column: 2; }

/* Right-side = media left, content right */
.zg-banner--copy-right-side .zg-banner__media   { grid-column: 1; }
.zg-banner--copy-right-side .zg-banner__content { grid-column: 2; }


/* Breadcrumbs: */
.zg-breadcrumbs {
	margin-top: 16px;
	font-size: 0.95rem;
	position: relative;
	width: 100%;
	z-index: 9;
}

.zg-breadcrumbs__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
	max-width: 1200px;
}

.zg-breadcrumbs__item::after {
  content: "/";
  margin-left: 8px;
  opacity: 0.6;
}

.zg-breadcrumbs__item.is-current::after {
  content: "";
  margin: 0;
}

.zg-breadcrumbs__link {
  text-decoration: none;
}

.zg-breadcrumbs__link:hover {
  text-decoration: underline;
}

/* Responsive: stack side layouts on smaller screens */
@media (max-width: 900px) {
  .zg-banner--copy-left-side,
  .zg-banner--copy-right-side {
    grid-template-columns: 1fr;
  }
  .zg-banner--copy-left-side .zg-banner__content,
  .zg-banner--copy-right-side .zg-banner__content {
    grid-column: 1;
  }
  .zg-banner--copy-left-side .zg-banner__media,
  .zg-banner--copy-right-side .zg-banner__media {
    grid-column: 1;
    min-height: clamp(220px, 35vh, 520px);
  }
}

@media screen and (max-width: 767px) {
	.zg-banner--copy-right-overlay .zg-banner__content {
		margin: 0 auto;
	}
}