/*=========================
	IMAGE COPY BLOCK
=========================*/

.block-image-copy .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.block-image-copy .container.container.switchSides {
  grid-template-columns: 1fr 1fr;
}
.block-image-copy .container.switchSides .image {
  grid-column: 1;
}
.block-image-copy .container.switchSides .content {
  grid-column: 2;
  position: relative;
}
.block-image-copy .background-image {
  z-index: 0;
}
/* SQUARE slot, but the crop must never cut a face (James, 2026-07-14: "make it a square but make
   sure no heads are cut off"). A portrait photo cropped into a square loses whatever the crop point
   pushes out, and object-position defaulted to dead centre — which sliced Stella's head off on
   /hero2021/. The template now emits a focal point per image (skelly_focal_style_auto): anything
   taller than the slot is pulled up to 25% from the top, where faces sit; landscape photos, which
   are only cropped horizontally, stay centred. The rule below is just the fallback. */
.block-image-copy .image {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
}
.block-image-copy .image img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  display: block;
}
.block-image-copy .image.image-align-top {
  align-self: start;
}
.block-image-copy .image.image-align-top img {
  object-position: top;
}
.block-image-copy .image.image-align-center {
  align-self: center;
}
.block-image-copy .image.has-graphic {
  aspect-ratio: unset;
  height: 100%;
}
.block-image-copy .graphic {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.block-image-copy .graphic svg {
  width: 100%;
  height: 100%;
}
/* Per-graphic max-heights — image-copy specific overrides */
.block-image-copy .graphic--triangle { max-height: 400px; }
.block-image-copy .image.has-graphic.graphic--triangle { max-height: 400px; }
.block-image-copy .graphic--chevron-right-double { max-height: 270px; }
.block-image-copy .graphic--zig-zag-double { max-height: 300px; }
.block-image-copy .image.has-graphic.graphic--zig-zag-double { max-height: 535px; }
.block-image-copy .graphic--triple-circle-vertical { max-height: 620px; }
.block-image-copy .image.has-graphic.graphic--triple-circle-vertical { max-height: 870px; }
.block-image-copy .graphic--triangle-right-double-horizontal { max-height: 280px; }
.block-image-copy .graphic--2-and-a-half-circles { max-height: 220px; }
.block-image-copy .graphic--stairs-down-left { max-height: 560px; }
/* half-circle (live c-blockquote__icon): capped at 215px in this block */
.block-image-copy .graphic--half-circle { max-height: 215px; }
.block-image-copy .image.has-graphic.graphic--half-circle { max-height: 215px; }
.block-image-copy .content {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: var(--space-7);
  height: 100%;
  position: relative;
}
.block-image-copy .container.content-align-top .content {
  justify-content: flex-start;
}
/* Graphic selected: no padding between graphic and content */
.block-image-copy .container:has(.has-graphic) .content {
  padding-right: 0;
}
.block-image-copy .container.switchSides:has(.has-graphic) .content {
  padding-left: 0;
}
.block-image-copy .container.content-card.switchSides:has(.has-graphic) .content {
  padding: 50px;
}
/* Switched layout: image on left, content on right → flip to left padding */
.block-image-copy .container.switchSides .content {
  padding-right: 0;
  padding-left: var(--space-6);
}
/* Testimonial + switched: wider left padding */
.block-image-copy .container.switchSides.is-testimonial .content {
  padding-left: var(--space-8);
}
/* ---------- "Content on white card" toggle (mirrors live c-feature-graphic-and-text) ----------
   Controlled by the ACF field `content_card` → `.content-card` on the container.
   The text content sits in a white card on the coloured band; when a graphic is
   used it overhangs the card in the adjacent column. */
.block-image-copy .container.content-card .content {
  background: var(--color-n-white, #fff);
  padding: 50px;
  align-self: center;
  height: auto;
  position: relative;
  z-index: 1;
}
/* Card takes 65% of the 2-col grid, graphic column the remaining 35%.
   Default = graphic right (content is col 1); switched = graphic left (content col 2). */
.block-image-copy .container.content-card.container {
  align-items: center;
  grid-template-columns: 55% 45%;
}
.block-image-copy .container.content-card.container.switchSides {
  grid-template-columns: 45% 55%;
}
/* Pull the card slightly toward the graphic so the graphic overhangs its edge */
.block-image-copy .container.content-card .image.has-graphic {
  /* margin-left: calc(var(--space-6) * -1); */
  align-self: flex-start;
}
.block-image-copy .container.content-card.switchSides .image.has-graphic {
  margin-left: 0;
  margin-right: calc(var(--space-6) * -1);
}
@media (max-width: 991.98px) {
  .block-image-copy .container.content-card .content {
    padding: var(--space-6) var(--space-5);
  }
  /* Hide the decorative graphic on tablet + mobile for the content-card variant. */
  .block-image-copy .container.content-card .image.has-graphic {
    display: none;
  }
}
/* Testimonial layout: center the image vertically + remove fixed min-height */
.block-image-copy .container.is-testimonial .image {
  align-self: center;
}
.block-image-copy .container.is-testimonial {
  min-height: 0;
}
/* Testimonial split (James, 2026-07-16): content 60% / image-or-graphic 40%,
   and the content loses its padding on the media side —
   image RIGHT (default) ⇒ no right padding; image LEFT (switched) ⇒ no left padding.
   (Mobile keeps its own single-column rules further down.) */
.block-image-copy .container.is-testimonial {
  grid-template-columns: 60% 40%;
}
.block-image-copy .container.container.is-testimonial.switchSides {
  grid-template-columns: 40% 60%;
}
.block-image-copy .container.is-testimonial .content {
  padding-right: 0;
  padding-left: var(--space-6);
}
.block-image-copy .container.is-testimonial.switchSides .content {
  padding-left: var(--space-6);
  padding-right: 0;
}
/* Testimonial + graphic = pull-quote CARD (James, 2026-07-16, IGDD-2026): the template moves
   the bg token onto the container (.quote-card bg-color-*), so the colour spans exactly the
   container width on a white band — live's c-blockquote look. Inner padding keeps the quote
   off the card edges. */
.block-image-copy .container.quote-card {
  padding: var(--space-6);
}
/* Below md (≤ 991.98px): drop the switched-layout content's left padding so it sits
   flush against the container edge */
@media (max-width: 991.98px) {
  .block-image-copy .container.switchSides .content {
    padding-left: 0;
  }
}
/* ---------- Plain GRAPHIC image-copy — tablet + mobile, per live (James, 2026-07-16,
   EY Sweeny "Technology"). Live's c-feature-graphic-and-text graphic column is
   col-sm-5 (≈30%, top-aligned BESIDE the copy from 768) and u-none u-block-sm
   (hidden entirely <768 — no mobile copy exists for this component). Testimonial
   quote-cards and content-cards keep their own rules. ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .block-image-copy .container.container:has(.image.has-graphic):not(.content-card):not(.is-testimonial) {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-5);
  }
  .block-image-copy .container.container:has(.image.has-graphic):not(.content-card):not(.is-testimonial) .image.has-graphic {
    display: block;   /* the ≤991 stacked-view hide is mobile-only per live (u-block-sm ⇒ visible ≥768) */
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0;
    width: 100%;
    height: auto;
    align-self: start;
  }
  /* the .graphic/svg height:100% chain collapses to 0 once the cell is height:auto —
     let the svg's own ratio drive the height at tablet */
  .block-image-copy .container.container:has(.image.has-graphic):not(.content-card):not(.is-testimonial) .image.has-graphic .graphic {
    height: auto;
    padding: 0 16px;   /* live col gutters: svg 206px inside a 238px column */
  }
  .block-image-copy .container.container:has(.image.has-graphic):not(.content-card):not(.is-testimonial) .image.has-graphic svg {
    width: 100%;
    height: auto;
  }
  .block-image-copy .container.container.switchSides:has(.image.has-graphic):not(.content-card):not(.is-testimonial) {
    grid-template-columns: 1fr 2fr;
  }
  .block-image-copy .container.container.switchSides:has(.image.has-graphic):not(.content-card):not(.is-testimonial) .image.has-graphic {
    grid-column: 1 !important;
  }
  .block-image-copy .container.container.switchSides:has(.image.has-graphic):not(.content-card):not(.is-testimonial) .content {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}
@media (max-width: 767.98px) {
  .block-image-copy .container:not(.is-testimonial) .image.has-graphic {
    display: none;
  }
}
/* Tablet (992-1199.98px): adjust content-to-image gap */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .block-image-copy .content {
    padding-right: var(--space-8);
  }
  .block-image-copy .container.switchSides .content {
    padding-right: 0;
    padding-left: var(--space-8);
  }
}



.block-image-copy .content .top-title {
  font-size: 20px;
}
.block-image-copy .content .title {
  margin-bottom: var(--space-4);
}

.block-image-copy .content .copy {
  margin-bottom: var(--space-4);
  font-size: 20px !important;
  font-weight: 100 !important;
}
.block-image-copy .content .copy p {
  margin-bottom: var(--space-4);
}
.block-image-copy .content .copy p:last-child {
  margin-bottom: 0;
}
.block-image-copy .content .copy a {
  color: var(--color-n-black, #282829);
  text-decoration: underline;
}
.block-image-copy .content .copy a:hover,
.block-image-copy .content .copy a:focus {
  background: rgba(255, 110, 51, .25) !important;
  box-shadow: 0 0 0 3px rgba(255, 110, 51, .25) !important;
  color: #282829;
  text-decoration: none;
}

.block-image-copy .content .c-btn {
  align-self: flex-start;
}

/* ---------- Testimonial layout ---------- */
/* Small accent line under the top title in testimonial mode */
.block-image-copy .container.is-testimonial .content .top-title {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  width: 100%;
}

/* Blockquote with decorative curly opening and closing quotes */
.block-image-copy .testimonial-figure {
  margin: 0;
}
.block-image-copy .testimonial-quote {
  margin: 0 0 var(--space-4);
  padding: 0;
  position: relative;
  quotes: "\201C" "\201D" "\2018" "\2019";
}
.block-image-copy .testimonial-quote:last-child {
  margin-bottom: 0;
}
.block-image-copy .testimonial-quote::before {
  content: none;
}
.block-image-copy .testimonial-quote::after {
  content: none;
}
.block-image-copy .testimonial-quote p {
  display: inline;
}
.block-image-copy .testimonial-quote p:not(:last-child)::after {
  content: "";
  display: block;
  margin-bottom: var(--space-3);
}
/* Author block: circular avatar + name & company stacked */
.block-image-copy .testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
}
.block-image-copy .testimonial-author__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 20px;
}
.block-image-copy .testimonial-author__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
}
.block-image-copy .testimonial-author__name {
  font-weight: 500;
  font-style: normal;
  font-size: 2rem;
}
.block-image-copy .testimonial-author__company {
  font-size: 2rem;
  color: var(--color-n-black, #282829);
}

.block-image-copy .content .c-btn--primary {
  --c-btn-bg-hover: transparent;
}

.block-image-copy .link-standard:hover,
.block-image-copy .link-standard:focus,
.block-image-copy a:not([class]):hover,
.block-image-copy a:not([class]):focus {
  background: none !important;
  box-shadow: none !important;
}

@media only screen and (max-width: 991.98px) {
  .block-image-copy .container,
  .block-image-copy .container.container.switchSides {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .block-image-copy .image {
    grid-column: 1 !important;
    grid-row: 2 !important;
    /* Default (not switched): image breaks out to the viewport's RIGHT edge,
       with 10vw of blank space on the LEFT. */
    margin-left: 10vw;
    margin-right: calc(var(--container-px) * -1);
    width: auto;
    max-width: none;
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
  }
  /* Switched: image breaks out to the viewport's LEFT edge, 10vw on the RIGHT */
  .block-image-copy .container.switchSides .image {
    margin-left: calc(var(--container-px) * -1);
    margin-right: 10vw;
  }
  /* Testimonial layout: image stays INSIDE the container, fixed 600px square */
  .block-image-copy .container.is-testimonial .image,
  .block-image-copy .container.is-testimonial.switchSides .image {
    margin-left: 0;
    margin-right: 0;
    width: 600px;
    max-width: 100%;
  }
  .block-image-copy .content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0 30px 0 0;
  }
  /* Hide the decorative graphic on the stacked (mobile/tablet) view. Scoped to
     the standard layout — content-card and quote-card manage their own graphic. */
  .block-image-copy .container:not(.content-card):not(.quote-card) .image.has-graphic {
    display: none;
  }
  .block-image-copy .content .copy {
    margin-bottom: var(--space-3);
  }
  .block-image-copy .content .title {
    font-size: 28px !important;
  }
}

/* ---------- Testimonial pull-quote CARD (.quote-card) — tablet + mobile, per live c-blockquote ----------
   Live: the icon column stays BESIDE the quote on tablet (u-flex row, icon min/max-width 33%),
   content padding drops from 96px (≥75em) to 32px below; under sm (<768) the icon is HIDDEN
   (c-blockquote__icon is u-none u-block-sm) and the coloured card keeps just the padded quote. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .block-image-copy .container.quote-card,
  .block-image-copy .container.container.quote-card.switchSides {
    grid-template-columns: 40% 60%;
    gap: 0;
    padding: var(--space-5) 32px;
  }
  .block-image-copy .container.quote-card .image.has-graphic {
    grid-row: 1 !important;
    margin: 0;
    width: 100%;
    align-self: center;
  }
  .block-image-copy .container.quote-card.switchSides .image.has-graphic { grid-column: 1 !important; }
  .block-image-copy .container.quote-card.switchSides .content { grid-column: 2 !important; grid-row: 1 !important; }
  .block-image-copy .container.quote-card:not(.switchSides) .image.has-graphic { grid-column: 2 !important; }
  .block-image-copy .container.quote-card:not(.switchSides) .content { grid-column: 1 !important; grid-row: 1 !important; }
  .block-image-copy .container.quote-card .content { padding: 0 0 0 32px; }
  .block-image-copy .container.quote-card:not(.switchSides) .content { padding: 0 32px 0 0; }
}
@media only screen and (max-width: 991.98px) {
  /* content-card's 55/45 grid (4-class selector) outranks the generic 1fr mobile collapse —
     the white card squeezed its copy to ~105px on phones (2026-07-16 sweep, OT page). */
  .block-image-copy .container.content-card.container,
  .block-image-copy .container.content-card.container.switchSides {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 767.98px) {
  /* the base 60/40 testimonial grid outranks the old 1fr mobile collapse — re-collapse here */
  .block-image-copy .container.container.is-testimonial,
  .block-image-copy .container.container.is-testimonial.switchSides {
    grid-template-columns: 1fr;
  }
  .block-image-copy .container.quote-card .image.has-graphic { display: none; }
  .block-image-copy .container.quote-card {
    gap: 0;
    padding: 32px;
  }
  .block-image-copy .container.quote-card .content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0;
  }
}

/* Tablet (992-1199): cap the zig-zag-double graphic at 320px (James, 2026-07-16;
   base cap is 535px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.block-image-copy .image.has-graphic.graphic--zig-zag-double {
		max-height: 320px;
	}
}

/* ── Tablet (992-1199.98px): zig-zag-double graphic matches live (8037519) ──
   Live renders the icon aspect-preserved at ~70% of the graphic column
   (310x386 at 1024px viewport). The desktop max-heights above otherwise
   squash it to 300px and let the box stretch wide. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.block-image-copy .image.has-graphic.graphic--zig-zag-double {
		height: auto;
		align-self: center;
		max-height: none;
	}
	.block-image-copy .image.has-graphic.graphic--zig-zag-double .graphic {
		height: auto;
		max-height: none;
	}
	.block-image-copy .image.has-graphic.graphic--zig-zag-double .graphic svg {
		width: 70%;
		height: auto;
	}
}

/* ---------- Logo-caption variant (live c-feature-graphic-and-text) ----------
   Natural-ratio logo + 66% pink divider + small caption (e.g. State Trustees). */
.block-image-copy .image.has-logo {
	aspect-ratio: unset;
	height: auto;
	align-self: center;
}
.block-image-copy .image.has-logo .logo-image {
	width: 100%;
	height: auto;
	object-fit: contain;
}
.block-image-copy .image.has-logo .logo-divider {
	width: 66%;
	border-top: 5px solid var(--accent-pink, #fcbbe0);
	margin: 24px 0;
}
.block-image-copy .image.has-logo .logo-caption {
	font-size: 22px !important;
	font-weight: 600 !important;
	margin: 0;
}