/* GC Staff Reviews — employee testimonial carousel. Reuses gc-rc__* structural/
   arrow/dot CSS from gc-review-carousel.css; this file overrides the --rc-*
   contract and adds the new header + avatar/role/department card content. */

@keyframes gc-sr-reveal { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

.gc-sr {
  --rc-card-radius: 20px;
  --rc-gap: 24px;
  --rc-head-gap: 48px;
  /* Text-weight blue for the attribution. The carousel's --rc-* colours are
     Elementor controls and come back as the global primary (#6EC1E4, 2.02:1 on
     the white card); this is the same hue at a lightness that reads, 4.94:1.
     Named outside the --rc-* family so nothing can bake over it. */
  --sr-blue-ink: #36769F;
  padding: 64px 48px;
  box-sizing: border-box;
}

.gc-sr [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  animation: gc-sr-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .gc-sr [data-reveal] { opacity: 1; translate: none; animation: none; }
}

/* Full width, matching every other widget built this session — gc-rc__wrap's
   shared default (max-width: 1312px, centred) is what GC Review Carousel's
   own "inner max width" control is built around, so it's overridden here
   rather than changed in the shared file. */
.gc-sr .gc-rc__wrap { max-width: none; margin: 0; }

/* ---- Header — this session's eyebrow/heading-with-highlight pattern,
   rather than gc-review-carousel's own italic-eyebrow/two-line heading. ---- */
.gc-sr-header { margin: 0 0 var(--rc-head-gap); max-width: 640px; }

.gc-sr-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rc-heading);
  margin: 0 0 14px;
}

.gc-sr-eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: .28;
}

.gc-sr-title {
  font-family: var(--gc-font-heading, 'Manrope', system-ui, sans-serif);
  font-weight: 700;
  color: var(--rc-name);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0 0 16px;
}

.gc-sr-title em {
  font-style: normal;
  color: var(--rc-heading);
}

.gc-sr-lead {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--rc-date);
  margin: 0;
}

/* ---- Card content ---- */
.gc-sr-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.gc-sr-quote-mark {
  width: 34px;
  height: 26px;
  color: var(--rc-card-border);
  margin: 0 0 16px;
}

.gc-sr-quote {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--rc-text);
  margin: 0 0 28px;
  flex: 1;
}

.gc-sr-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

.gc-sr-avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gc-blue-light, #EAF3FA);
}

.gc-sr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gc-sr-person-text { display: flex; flex-direction: column; gap: 2px; }

.gc-sr-name {
  font-family: var(--gc-font-heading, 'Manrope', system-ui, sans-serif);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--rc-name);
}

.gc-sr-role {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-size: 13.5px;
  color: var(--rc-date);
}

.gc-sr-dept {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-heading);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .gc-sr { padding: 52px 32px; }
}

@media (max-width: 640px) {
  .gc-sr {
    --rc-gap: 14px;
    --rc-head-gap: 28px;
    --rc-card-radius: 16px;
    padding: 42px 20px;
  }
  .gc-sr-header { margin-bottom: 28px; }
  .gc-sr-eyebrow { font-size: 10.5px; gap: 10px; letter-spacing: 0.16em; margin-bottom: 10px; }
  .gc-sr-title { font-size: 1.6rem; margin-bottom: 12px; }
  .gc-sr-lead { font-size: 15px; line-height: 1.5; }
  .gc-sr .gc-rc__card { padding: 18px 18px 20px; }
  .gc-sr-quote-mark { width: 24px; height: 18px; margin-bottom: 10px; }
  .gc-sr-quote { font-size: 15px; line-height: 1.55; margin-bottom: 18px; }
  .gc-sr-person { gap: 10px; }
  .gc-sr-avatar { width: 36px; height: 36px; }
  .gc-sr-name { font-size: 13px; }
  .gc-sr-role { font-size: 12.5px; }
  .gc-sr-dept { font-size: 10.5px; letter-spacing: 0.04em; }
  .gc-sr .gc-rc__controls { margin-top: 18px; gap: 16px; }
  .gc-sr .gc-rc__arrow { width: 38px; height: 38px; }
  .gc-sr .gc-rc__arrow svg { width: 18px; height: 18px; }
}

@media (max-width: 480px) {
  .gc-sr { padding: 36px 16px; }
  .gc-sr-title { font-size: 1.45rem; }
  .gc-sr .gc-rc__card { padding: 16px; }
}

.gc-sr-header {
  max-width: 940px;
  margin: 0 auto var(--rc-head-gap);
  text-align: center;
}

.gc-sr-header .gc-sr-lead { margin-inline: auto; }

.gc-sr .gc-rc__card {
  display: flex;
  flex-direction: column;
  background: var(--gc-white, #fff);
  border: 1px solid var(--gc-line, #E1E9EE);
  border-radius: var(--gc-radius-md, 16px);
  box-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20, 33, 43, 0.12));
  padding: clamp(24px, 2.2vw, 32px);
  transition: box-shadow .35s ease, border-color .35s ease;
}

.gc-sr .gc-rc__card:hover {
  border-color: color-mix(in srgb, var(--rc-ctrl) 55%, transparent);
  box-shadow: var(--gc-shadow-card-hover, 0 18px 40px -10px rgba(20, 33, 43, 0.22));
}

.gc-sr .gc-sr-quote-mark {
  display: block;
  width: 26px;
  height: auto;
  margin: 0 0 16px;
  color: color-mix(in srgb, var(--rc-ctrl) 45%, transparent);
}

/* The quote grows to fill the card (flex: 1) and .gc-sr-person is pushed to
   the foot with margin-top: auto, which overrode the 24px top margin the
   person block used to carry -- leaving the divider sitting flush on the
   quote's box. A quote long enough to fill its box then put its last line's
   descenders straight through the rule ("every day.", "no two weeks are the
   same."). The gap belongs on the quote, where auto margins cannot eat it. */
.gc-sr .gc-sr-quote {
  flex: 1;
  margin: 0 0 24px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--gc-muted, #5A6B75);
}

.gc-sr .gc-sr-person {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--gc-line, #E1E9EE);
}

.gc-sr .gc-sr-avatar {
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--rc-ctrl) 60%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--rc-ctrl) 30%, transparent);
}


@media (max-width: 640px) {
  .gc-sr-header { text-align: left; margin-inline: 0; }
  .gc-sr-header .gc-sr-lead { margin-inline: 0; }
}

/* Name and department, again and deeper. Both colours are Elementor controls,
   and Elementor writes the saved value as
   `.elementor-N .elementor-element.elementor-element-XXX .gc-sr-name` --
   0,4,0, in a stylesheet loaded after this one, so the plain rules above never
   reach the page and the attribution renders at 2.02:1. Five classes is the
   only way to put a floor under the control without !important. */
.gc-sr .gc-rc__card .gc-sr-person .gc-sr-person-text .gc-sr-name,
.gc-sr .gc-rc__card .gc-sr-person .gc-sr-person-text .gc-sr-dept {
  color: var(--sr-blue-ink);
}

.gc-sr .gc-rc__eyebrow { font-style: normal; }

.gc-sr .gc-rc__slide { display: flex; }
.gc-sr .gc-rc__card { height: 100%; }
.gc-sr .gc-sr-person { margin-top: auto; }


/* Self-contained design tokens. Everything this widget needs is declared on
   its own root, so it styles itself wherever it is dropped: no page class, no
   body class, no shared stylesheet. The accent follows the widget's own
   Elementor colour control. */
.gc-sr {
	--gcab-accent: var(--rc-ctrl, #5BA7DB);
	--gcab-glow: var(--rc-ctrl, #5BA7DB);
	--gcab-line: var(--gc-line, #E1E9EE);
	--gcab-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20, 33, 43, 0.12));
	--gcab-radius: var(--gc-radius-md, 16px);
	--gcab-pad-y: 64px;
	--gcab-gutter: 48px;
	--gcab-eyebrow-size: 11.5px;
	--gcab-eyebrow-gap: 14px;
	--gcab-eyebrow-mb: 14px;
	--gcab-h1: clamp(2rem, 1.55rem + 2.1vw, 3rem);
	--gcab-h2: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
	--gcab-lead: 16px;
	--gcab-media-h: 420px;
	--gcab-tile-h: 236px;
	--gcab-staff-h: 230px;
	--gcab-glow-edge: 1px solid color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 70%, transparent);
	--gcab-glow-ring:
		0 0 0 1px color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 22%, transparent),
		0 0 34px color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 48%, transparent),
		0 0 82px color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 19%, transparent);
	--gcab-glow-ring-hover:
		0 0 0 1px color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 34%, transparent),
		0 0 46px color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 48%, transparent),
		0 0 102px color-mix(in srgb, var(--rc-ctrl, #5BA7DB) 24%, transparent);
}

@media (max-width: 640px) {
	.gc-sr {
		--gcab-pad-y: 42px;
		--gcab-gutter: 20px;
		--gcab-eyebrow-size: 10.5px;
		--gcab-eyebrow-gap: 10px;
		--gcab-eyebrow-mb: 12px;
		--gcab-h1: clamp(1.75rem, 7vw, 2.1rem);
		--gcab-h2: 1.6rem;
		--gcab-lead: 15px;
		--gcab-radius: 14px;
		--gcab-media-h: 240px;
		--gcab-tile-h: 200px;
		--gcab-staff-h: 190px;
	}
}

/* Eyebrow: one spec across every Gencore widget. Inter 11.5/600/.16em,
   uppercase, no trailing rule. */
.gc-sr-eyebrow {
	display: block;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 14px;
}

.gc-sr-eyebrow::before,
.gc-sr-eyebrow::after { display: none; }

@media (max-width: 640px) {
	.gc-sr-eyebrow { font-size: 10.5px; margin-bottom: 12px; }
}