/*
 * NS Gray CTS — pixel-matched to NS Support Figma
 *   Desktop node:            7560-8217
 *   Mobile (multi-link):     7614-13533
 *   Mobile (single link):    8290-38122
 *
 * === DESKTOP (Resource Link 7560:8217) ===
 *   Root: display:flex; flex-direction:row; padding:16px 30px;
 *         justify-content:space-between; align-items:center;
 *         align-self:stretch; fill = Grey Gradient
 *   Frame 7560:8218 (left): flex row; align-items:center; gap:16px; flex:1
 *     Icon (7560:8219): 36×36; border-radius:200px; fill Navy #00406D;
 *                       centered Font Awesome glyph 16/24 White
 *     Title (7560:8221): Desktop/Heading/H4 → Source Sans Pro 600 21px/24px #000
 *   Frame 8260:23718 (right): flex row; gap:30px
 *     Link (8260:23719 / 23720): flex row; align-items:center; gap:6px
 *       Icon frame: 14×24 box holding a 12×24 Navy glyph
 *       Label frame: border-bottom 1px #002454 (underline sits on text only)
 *       Label text: Button Label → Source Sans Pro 600 18px/24px Navy #00406D
 *       Second link's "(Español)" run is tinted Navy (ts1 → #00406D)
 *
 * === MOBILE, MULTI-LINK (Resource Link 7614:13533) ===
 *   Root: flex row; padding:20px; gap:10px; align-self:stretch
 *     Icon (7614:13534): 36×36 circle, Navy, glyph 16/24 White
 *     Frame 7614:13536: flex column; gap:16px
 *       Title (7614:13537): Mobile/Heading/H4 → 600 18px/21px #000 (228px wide)
 *       Frame 8290:38137 (links): flex column; gap:10px
 *         Link: flex row; align-items:center; gap:4px
 *           Icon frame 14×24 holding an 11×24 Navy glyph (FA Solid 14/24)
 *           Label: Source Sans Pro 600 16px/20px Navy, border-bottom 1px #002454
 *
 * === MOBILE, SINGLE LINK (Resource Link 8290:38122) ===
 *   Root: flex column; padding:20px; gap:6px; align-self:stretch
 *     Frame 8290:38123: flex row; gap:10px
 *       Icon (8290:38124): 36×36 circle, Navy (padding-bottom 1px on glyph box)
 *       Frame 8290:38126: flex column; justify-content:center; gap:4px
 *         Title (8290:38127): Mobile/Heading/H4 → 600 18px/21px #000
 *         Link: same 16/20 Navy treatment, gap:4px
 *   → Same box model as the multi-link variant; the tighter 4px title→link gap
 *     is what a single stacked link produces, so both are served by one rule
 *     set with the link column gap dropping to 10px only when 2+ links exist.
 */

/* ==========================================================================
 * Row container — Desktop
 * ========================================================================== */
.wp-block-ns-custom-gray-cts.nscb-gray-cts {
  /* ---------------------------------------------------------------------- *
	 * Defaults for the block. The editor may override any of these via inline
	 * `style="--nscb-gray-cts-*: ..."` on the wrapper (see getWrapperStyle in
	 * index.js). Kept here so the front end has a canonical baseline even when
	 * no editor overrides are emitted.
	 * ---------------------------------------------------------------------- */
  --nscb-gray-cts-icon-bg: #00406d; /* Navy */
  --nscb-gray-cts-icon-color: #ffffff;
  --nscb-gray-cts-accent: #00406d; /* Figma ts1 tint on "(Español)" */
  --nscb-gray-cts-link-color: #00406d; /* Navy */
  --nscb-gray-cts-link-hover: #00adee; /* Light Blue */
  --nscb-gray-cts-title-color: #000000;
  --nscb-gray-cts-underline: #002454;
  --nscb-gray-cts-bg: var(
    --Grey-Gradient,
    linear-gradient(270deg, rgba(234, 236, 238, 0.2) 0%, #eaecee 100%)
  );

  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 30px;
  gap: 30px;
  background: var(--nscb-gray-cts-bg);
  color: var(--nscb-gray-cts-title-color);
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
}

.nscb-gray-cts *,
.nscb-gray-cts *::before,
.nscb-gray-cts *::after {
  box-sizing: border-box;
}

/* ==========================================================================
 * Left group (icon + title) — Figma Frame 7560:8218
 * ========================================================================== */
.nscb-gray-cts__main {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 16px;
  margin: 0;
  padding: 0;
}

/* Icon — 36×36 Navy circle, glyph centered (Figma 7560:8219) */
.nscb-gray-cts__icon {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 200px;
  background: var(--nscb-gray-cts-icon-bg, #00406d);
  color: var(--nscb-gray-cts-icon-color, #ffffff);
  overflow: hidden;
}

/* Uploaded artwork fills the circle; the preset glyph reads at 16px like the
 * Font Awesome Solid 16/24 mark in the design. */
.nscb-gray-cts__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nscb-gray-cts__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.nscb-gray-cts__icon svg path,
.nscb-gray-cts__icon svg circle,
.nscb-gray-cts__icon svg rect {
  fill: currentColor;
}

.nscb-gray-cts__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Title — Desktop/Heading/H4 (Figma 7560:8221) */
.nscb-gray-cts__title {
  margin: 0;
  padding: 0;
  color: var(--nscb-gray-cts-title-color);
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
  font-size: 21px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 114.286% */
}

/* ==========================================================================
 * Links group — Figma Frame 8260:23718 (desktop) / 8290:38137 (mobile)
 * ========================================================================== */
.nscb-gray-cts__links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nscb-gray-cts__link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  color: var(--nscb-gray-cts-link-color) !important;
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 133.333% */
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease-in-out;
}

/* Figma puts the 1px #002454 rule on the label frame only, never under the
 * icon — so the underline lives on the text span. */
.nscb-gray-cts__link-text {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.nscb-gray-cts__link:hover,
.nscb-gray-cts__link:focus-visible {
  /* color: var(--nscb-gray-cts-link-hover) !important; */
}

.nscb-gray-cts__link:focus-visible {
  outline: 2px solid var(--nscb-gray-cts-link-hover);
  outline-offset: 3px;
}

/* Link glyph — inline SVG so no Font Awesome dependency is required.
 * Figma reserves a 14×24 box for the mark; the artwork itself is 12×24. */
.nscb-gray-cts__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: currentColor;
}

.nscb-gray-cts__link-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nscb-gray-cts__link-icon svg path {
  fill: currentColor;
}

/* Per-icon size tweaks — some glyphs read better slightly larger. */
.nscb-gray-cts__link-icon--download {
  /* Native artwork is 12×14 (see LINK_ICONS.download in index.js). */
  width: 12px;
  height: 14px;
}

.nscb-gray-cts__link-icon--pdf,
.nscb-gray-cts__link-icon--file-lines,
.nscb-gray-cts__link-icon--arrow-right,
.nscb-gray-cts__link-icon--chevron-right {
  width: 14px;
  height: 14px;
}
.nscb-gray-cts__link-icon--arrow-right{
  width: 15px;
  height: 24px;
}
/* Leading-icon variant — Figma places the download mark before the label. */
.nscb-gray-cts__link--icon-before {
  gap: 6px;
}

/* Accent span inside a link label — e.g. "Download PDF (Español)".
 * Wrap the accent portion in <span class="nscb-gray-cts__accent">…</span>.
 * Color is driven by the block-level --nscb-gray-cts-accent CSS variable
 * (Figma ts1 → Navy #00406D, declared on the block root above). */
.nscb-gray-cts__accent {
  color: var(--nscb-gray-cts-accent);
  font-weight: inherit;
}

/* Keep the accent color on hover — do not switch to the link-hover color. */
.nscb-gray-cts__link:hover .nscb-gray-cts__accent,
.nscb-gray-cts__link:focus-visible .nscb-gray-cts__accent {
  color: var(--nscb-gray-cts-accent);
}
.nscb-gray-cts__link:hover .nscb-gray-cts__link-icon,
.nscb-gray-cts__link:focus-visible .nscb-gray-cts__link-icon {
  color: var(--nscb-gray-cts-link-hover);
}
.nscb-gray-cts__link:hover .nscb-gray-cts__link-text, 
.nscb-gray-cts__link:focus-visible .nscb-gray-cts__link-text {
  text-decoration-color: var(--nscb-gray-cts-link-hover) !important;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
  transition: text-decoration-color 0.3s ease, text-decoration-thickness 0.3s ease, text-underline-offset 0.3s ease;
}

.nscb-gray-cts__link:hover .nscb-card-gray__link-icon, 
.nscb-gray-cts__link:focus-visible .nscb-card-gray__link-icon {
  color: var(--nscb-card-gray-link-hover) !important;
}
/* ==========================================================================
 * Full / wide alignment
 * ========================================================================== */
.wp-block-ns-custom-gray-cts.alignwide,
.wp-block-ns-custom-gray-cts.alignfull {
  max-width: none;
}

.wp-block-ns-custom-gray-cts.alignfull {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ==========================================================================
 * Mobile — Figma 7614-13533 (multi-link) and 8290-38122 (single link)
 *
 * Both variants are one shape: a 36px icon beside a column holding the title
 * and the stacked links. In the DOM the links are a sibling of the icon+title
 * group, so mobile switches the root to a 2-column grid — icon in column 1,
 * title and links both in column 2 — which reproduces the Figma nesting
 * without duplicating markup. The icon pins to the top of a wrapped two-line
 * title, as in 7614:13537.
 * ========================================================================== */
@media (max-width: 768px) {
  .wp-block-ns-custom-gray-cts.nscb-gray-cts {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    justify-content: start;
    padding: 20px;
    /* row-gap = title→links (16px, Figma 7614:13536); column-gap = 10px. */
    row-gap: 16px;
    row-gap: 4px;
    column-gap: 10px;
  }

  /* Icon + title occupy the first grid row across both columns. */
  .nscb-gray-cts__main {
    display: contents;
  }

  .nscb-gray-cts__icon {
    grid-column: 1;
    grid-row: 1;
  }

  /* Title column — vertically centered against the 36px icon, matching the
	 * single-line case in 8290:38127; taller wrapped titles simply grow down. */
  .nscb-gray-cts__copy {
    grid-column: 2;
    grid-row: 1;
    min-height: 25px;
  }

  /* Title — Mobile/Heading/H4 (18/21). */
  .nscb-gray-cts__title {
    font-size: 18px;
    line-height: 21px; /* 116.667% */
  }

  /* Links stack under the title, still in column 2 (Figma 8290:38137). */
  .nscb-gray-cts__links {
    grid-column: 2;
    grid-row: 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
  }

  /* Single-link variant tightens the title→link gap to 4px (8290:38126).
	 * Driven from the links element (negative margin against the 16px row-gap)
	 * rather than a :has() parent selector, so it degrades safely everywhere. */
  .nscb-gray-cts__links[data-count="1"] {
    margin-top: -12px; /* 16px row-gap → effective 4px */
  }
.nscb-gray-cts__links[data-count="2"] {
    margin-top: 14px;
    gap: 15px;
}
  /* Link label — Source Sans Pro 600 16/20 Navy (mobile). */
  .nscb-gray-cts__link {
    font-size: 16px;
    line-height: 20px; /* 125% */
    gap: 4px;
    white-space: normal;
  }

  .nscb-gray-cts__link--icon-before {
    gap: 4px;
  }
  .nscb-gray-cts__link-text {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
}

@media screen and (min-width: 768.5px)  and (max-width: 1080px) {
.nscb-gray-cts__links[data-count="2"] {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  display: flex;
  gap: 10px;
}
}

@media (max-width: 340px) {
  .nscb-gray-cts__links[data-count="1"] {
    margin-top: 0px;
  }
}