/* Taylor Geospatial animated graphics. Layout: an optional heading line (the label on the left, "↻ Replay" on the
   right), the graphic, then the caption (with Replay at its right end when there's no heading line). The heading and
   Replay type is Gintronic (the theme's Adobe Fonts kit). */
.tg-graphic { margin: 0; display: flex; flex-direction: column; gap: 22px; box-sizing: border-box; }
.tg-graphic .tg-anim { width: 100%; }
.tg-graphic .tg-anim-svg svg { width: 100%; height: auto; display: block; }

/* "Card" block style: the white panel */
.tg-graphic.is-style-card { background: #FFFFFF; padding: 32px; }
/* "Before / after (both panels)": the two panels side by side straight on the page background (no card, so they read
   as part of the page, Max 2026-10-29), aligned with the text column; one under the other on narrow screens */
.tg-graphic-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; box-sizing: border-box; }
@media (max-width: 900px) { .tg-graphic-pair { grid-template-columns: minmax(0, 1fr); } }
/* How the two panels read as two states (TG 2026-11-10: "There is a risk that the reader will think that is all one
   graphic"). outline: a hairline round each panel (the default). tint: the "after" panel on Ivory, the "before" panel
   padded the same so both line up. none: straight on the page, as before. */
.tg-graphic-pair.is-frame-outline, .tg-graphic-pair.is-frame-tint { gap: 24px 32px; }
.tg-graphic-pair.is-frame-outline > .tg-graphic, .tg-graphic-pair.is-frame-tint > .tg-graphic { padding: 28px 32px 32px; }
.tg-graphic-pair.is-frame-outline > .tg-graphic { border: 1px solid rgba(59, 30, 28, 0.18); }
.tg-graphic-pair.is-frame-tint > .tg-graphic:last-child { background: #F4F4EB; }
@media (max-width: 600px) {
	.tg-graphic-pair.is-frame-outline > .tg-graphic, .tg-graphic-pair.is-frame-tint > .tg-graphic { padding: 20px; }
}
/* Spacing round the pair belongs to the pair, not its panels: the taylor theme gives every .tg-graphic a vertical margin
   (body .wysiwyg .tg-graphic, clamp(32px, 5vw, 72px)), which inside the pair pushed the Replay line 70 px down. The pair
   takes that margin instead; the theme zeroes its blocks' margins, so this carries an id in :not() to win (the block's own
   spacing setting, an inline style, still overrides it). */
.tg-graphic-pair > .tg-graphic:not(#tg-none) { margin-top: 0; margin-bottom: 0; }
.tg-graphic-pair:not(#tg-none) { margin-top: clamp(32px, 5vw, 72px); margin-bottom: clamp(32px, 5vw, 72px); }
/* the pair's Replay: its own line under both panels, at the right edge, outside the frames (it replays both) */
.tg-graphic-pair__foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: -10px; }
.tg-graphic-pair.is-frame-none > .tg-graphic-pair__foot { margin-top: -34px; }

/* side by side in Columns, cards are as tall as the tallest one */
.wp-block-column > .tg-graphic.is-style-card:only-child { height: 100%; }
@media (max-width: 600px) { .tg-graphic.is-style-card { padding: 20px; } }

/* the label over a graphic ("The challenge" / "Taylor Geospatial vision"), with Replay at its right end */
.tg-graphic__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin: 0 0 -6px; }
.tg-graphic__heading {
	font-family: "gintronic", ui-monospace, monospace; font-size: 12px; font-weight: 700; line-height: 1.3;
	letter-spacing: 0.12em; text-transform: uppercase; color: #3B1E1C;
}
.tg-graphic__caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin: 0; }
.tg-graphic__text { flex: 1 1 16em; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.tg-graphic__text:empty { display: none; }
.tg-graphic__replay { flex: 0 0 auto; margin-left: auto; }
/* Replay. Themes style every <button> (Twenty Twenty-One paints it as a dark filled box, with rules like
   "button:not(:hover):not(:active)…"), so these rules carry an id in :not() to outrank any class-based theme rule,
   and reset everything a theme may set on a button. #tg-none matches nothing. */
.tg-replay:not(#tg-none) {
	font-family: "gintronic", ui-monospace, monospace; font-size: 11px; font-weight: 400; font-style: normal; line-height: 1;
	letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; text-shadow: none; white-space: nowrap;
	-webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none;
	margin: 0; padding: 4px 0; width: auto; height: auto; min-width: 0; min-height: 0;
	color: #5E5E57; cursor: pointer; display: inline-block; opacity: 1; visibility: visible;
	transition: opacity 0.4s ease-out;
}
/* while the graphic plays the button is hidden but keeps its space, so the caption never re-wraps; it fades in at the end */
.tg-replay:not(#tg-none)[hidden] { display: inline-block; opacity: 0; visibility: hidden; transition: none; }
/* on the heading line, neither the wrapper's inherited line-height (a flex box has no text strut) nor the button's padding
   (its click target) may make the line taller than the other panel's, or the two headings stop lining up */
.tg-graphic__head .tg-graphic__replay { display: flex; }
.tg-graphic__head .tg-replay:not(#tg-none) { margin: -4px 0; }
.tg-replay:not(#tg-none):hover, .tg-replay:not(#tg-none):active, .tg-replay:not(#tg-none):focus { color: #3B1E1C; background: none; border: 0; box-shadow: none; text-decoration: none; }
.tg-replay:not(#tg-none):focus { outline: none; }
.tg-replay:not(#tg-none):focus-visible { outline: 2px solid #80A0D8; outline-offset: 3px; }


/* The homepage hero globe (slug homepage-globe) has its own stylesheet, assets/tg-hero-globe.css, loaded only where it is. */