/* Resource Root V1 page composition. Public modules and global layout keep their owners. */
.resource-root-v1-page {
  min-width: 0;
}

.resource-root-v1 {
  min-width: 0;
  overflow: clip;
  background: var(--ui-color-surface, #fff);
  color: var(--ui-color-text, #334155);
}

.resource-root-v1 *,
.resource-root-v1 *::before,
.resource-root-v1 *::after { box-sizing: border-box; }

.resource-root-v1__breadcrumb-bar {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid var(--ui-color-border-subtle, #e2e8f0);
  background: color-mix(in srgb, var(--ui-color-surface, #fff) 92%, transparent);
  backdrop-filter: blur(12px);
}

.resource-root-v1__breadcrumb-bar .ui-breadcrumbs { margin: 0; }

.resource-root-v1__hero {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: var(--resource-root-hero-min-height, 460px);
  overflow: hidden;
  color: var(--ui-color-text, #334155);
  background: var(--resource-root-hero-background-start, #f8fafc);
}

.resource-root-v1__hero-image-layer {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: flex;
  overflow: hidden;
  opacity: .92;
  pointer-events: none;
}

.resource-root-v1__hero-image {
  display: block;
  width: 100%;
  height: auto;
  align-self: stretch;
  object-fit: cover;
  object-position: var(--resource-root-hero-image-position, 72% center);
}

.resource-root-v1__hero[data-hero-image-position="auto"] { --resource-root-hero-image-position: 72% center; }
.resource-root-v1__hero[data-hero-image-position="left"] { --resource-root-hero-image-position: left center; }
.resource-root-v1__hero[data-hero-image-position="center"] { --resource-root-hero-image-position: center; }
.resource-root-v1__hero[data-hero-image-position="right"] { --resource-root-hero-image-position: right center; }

.resource-root-v1__hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--resource-root-hero-accent, #06b6d4) 18%, transparent), transparent 34%),
    linear-gradient(118deg, color-mix(in srgb, var(--resource-root-hero-background-start, #f8fafc) 96%, transparent), color-mix(in srgb, var(--resource-root-hero-background-end, #e0f2fe) 90%, transparent));
  opacity: var(--resource-root-hero-overlay-strength, .88);
}

.resource-root-v1__hero[data-section-background="white"]::after { background: #fff; }
.resource-root-v1__hero[data-section-background="surface"]::after { background: var(--ui-color-surface-muted, #f8fafc); }
.resource-root-v1__hero[data-section-background="accent-soft"]::after {
  background: color-mix(
    in srgb,
    var(--resource-root-hero-accent, #06b6d4) 10%,
    var(--ui-color-surface, #fff)
  );
}
.resource-root-v1__hero[data-section-background="brand-gradient"]::after,
.resource-root-v1__hero[data-section-background="custom"][data-section-background-fill="gradient"]::after {
  background: linear-gradient(
    var(--resource-root-hero-background-angle, 115deg),
    var(--resource-root-hero-background-start, #0f172a),
    var(--resource-root-hero-background-end, #164e63)
  );
}
.resource-root-v1__hero[data-section-background="custom"][data-section-background-fill="solid"]::after {
  background: var(--resource-root-hero-background-start, #fff);
}

.resource-root-v1__hero[data-foreground="light"] {
  --resource-root-hero-title-inherit: var(--ui-color-on-accent, #fff);
  --resource-root-hero-description-inherit: rgba(255, 255, 255, .78);
  color: #e2e8f0;
}

.resource-root-v1__hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 780px);
  align-items: center;
  justify-content: start;
  min-height: var(--resource-root-hero-min-height, 460px);
  padding-block: clamp(56px, 7vw, 84px);
}

.resource-root-v1__hero-copy {
  min-width: 0;
  max-width: 780px;
  text-align: left;
}

.resource-root-v1__hero[data-title-align="center"] .resource-root-v1__hero-inner {
  justify-content: center;
}

.resource-root-v1__hero[data-title-align="right"] .resource-root-v1__hero-inner {
  justify-content: end;
}

.resource-root-v1__hero[data-title-align="center"] .resource-root-v1__hero-copy {
  text-align: center;
}
.resource-root-v1__hero[data-title-align="right"] .resource-root-v1__hero-copy {
  text-align: right;
}

.resource-root-v1__hero .resource-root-v1__hero-eyebrow {
  --ui-eyebrow-resolved-color: var(--resource-root-hero-eyebrow-color, var(--resource-root-hero-accent));
  --page-module-eyebrow-size: var(--resource-root-hero-eyebrow-size, 12px);
}

.resource-root-v1__hero h1 {
  max-width: 800px;
  margin: 14px 0 18px;
  color: var(--resource-root-hero-title-color, var(--resource-root-hero-title-inherit, var(--ui-color-text-strong, #0f172a)));
  font-size: min(var(--resource-root-hero-title-size, 50px), clamp(38px, 5vw, 58px));
  font-weight: var(--resource-root-hero-title-weight, 700);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.resource-root-v1__hero-lead {
  margin: 0;
  color: var(--resource-root-hero-title-color, var(--resource-root-hero-title-inherit, var(--ui-color-text-strong)));
  font-size: 20px;
  font-weight: 600;
  line-height: 1.55;
}

.resource-root-v1__hero-description {
  max-width: 660px;
  margin: 18px 0 0;
  color: var(--resource-root-hero-description-color, var(--resource-root-hero-description-inherit, var(--ui-color-text-muted, #64748b)));
  font-size: var(--resource-root-hero-description-size, 16px);
  line-height: 1.75;
}

.resource-root-v1__hero[data-title-align="center"] .resource-root-v1__hero-description {
  margin-inline: auto;
  margin-top: 18px;
}

.resource-root-v1__hero[data-title-align="right"] .resource-root-v1__hero-description {
  margin: 18px 0 0 auto;
}

.resource-root-v1__hero-actions {
  --ui-color-accent: var(--resource-root-hero-action-color, var(--theme-accent, #06b6d4));
  --ui-color-accent-deep: color-mix(
    in srgb,
    var(--resource-root-hero-action-color, var(--theme-accent, #06b6d4)) 78%,
    #0f172a
  );
  --ui-color-accent-soft: color-mix(
    in srgb,
    var(--resource-root-hero-action-color, var(--theme-accent, #06b6d4)) 12%,
    transparent
  );
  --ui-color-border-strong: color-mix(
    in srgb,
    var(--resource-root-hero-action-color, var(--theme-accent, #06b6d4)) 38%,
    var(--ui-color-border)
  );
  --ui-action-radius: var(--resource-root-hero-action-radius, var(--ui-radius-sm));
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.resource-root-v1__hero[data-title-align="center"] .resource-root-v1__hero-actions {
  justify-content: center;
}

.resource-root-v1__hero[data-title-align="right"] .resource-root-v1__hero-actions {
  justify-content: flex-end;
}

/* Category Directory: Resource Root's large knowledge-path composition.
   Public Cards still owns the grid columns, card interaction and mobile collapse. */
.resource-root-v1 .page-module--cards.is-variant-default[data-module-key="categories"] .page-module-tags {
  order: 3;
  margin-top: 16px;
  margin-bottom: 0;
}

.resource-root-v1 .page-module--cards.is-variant-default[data-module-key="categories"] .page-module-link--primary {
  order: 4;
  margin-top: 18px;
}

.resource-root-v1 .page-module--cards.is-variant-numbered[data-module-key="categories"] .page-module-tags {
  order: 3;
  margin-top: 16px;
  margin-bottom: 0;
}

.resource-root-v1 .page-module--cards.is-variant-numbered[data-module-key="categories"] .page-module-link--primary {
  order: 4;
  margin-top: 18px;
}

.resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module__grid--cards {
  gap: clamp(18px, 2.2vw, 28px);
  padding: 0;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

.resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-card--content {
  min-height: clamp(360px, 31vw, 410px);
  overflow: hidden;
  border-radius: clamp(20px, 2vw, 28px);
}

.resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-card__body {
  min-height: clamp(360px, 31vw, 410px);
  padding: clamp(30px, 3.4vw, 46px) clamp(108px, 11vw, 156px) 32px clamp(26px, 3.4vw, 46px);
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  row-gap: 8px;
  column-gap: 8px;
}

.resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-card__icon {
  position: absolute;
  top: clamp(28px, 3.2vw, 42px);
  right: clamp(20px, 2.5vw, 32px);
  width: clamp(80px, 8.5vw, 112px);
  height: clamp(80px, 8.5vw, 112px);
  margin: 0;
  color: #0e7490;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .96), transparent 28%),
    linear-gradient(145deg, rgba(6, 182, 212, .19), rgba(14, 116, 144, .08));
  border: 1px solid rgba(14, 116, 144, .18);
  border-radius: 34% 66% 58% 42% / 44% 38% 62% 56%;
  box-shadow: 0 24px 48px rgba(14, 116, 144, .14);
  font-size: clamp(32px, 3.8vw, 46px);
  transform: rotate(-4deg);
}

.resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-card--content:nth-child(even) .page-module-card__icon {
  color: #64702d;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .96), transparent 28%),
    linear-gradient(145deg, rgba(163, 177, 91, .24), rgba(100, 112, 45, .08));
  border: 1px solid rgba(100, 112, 45, .18);
  box-shadow: 0 24px 48px rgba(100, 112, 45, .14);
  transform: rotate(4deg);
}

.resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-tags {
  display: contents;
  margin: 0;
}

.resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-tags__item {
  position: relative;
  z-index: 1;
  order: 4;
  min-height: 25px;
  margin: 0 0 2px;
  padding: 4px 10px;
  color: color-mix(in srgb, var(--page-module-accent) 78%, #334155);
  background: color-mix(in srgb, var(--page-module-accent) 8%, rgba(255, 255, 255, .72));
  border: 1px solid color-mix(in srgb, var(--page-module-accent) 16%, transparent);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

.resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-card__eyebrow {
  order: 1;
  width: 100%;
  margin: 0 0 4px;
}

.resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-card__title {
  order: 2;
  width: 100%;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 0;
  line-height: 1.08;
  -webkit-line-clamp: 2;
}

.resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-card__description {
  order: 3;
  width: 100%;
  max-width: 100%;
  margin: 0 0 8px;
  font-weight: 650;
  line-height: 1.55;
  -webkit-line-clamp: 2;
}

.resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-card__secondary-description {
  display: block;
  order: 5;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  margin: 8px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--page-module-accent) 14%, var(--ui-color-border, #e2e8f0));
  line-height: 1.7;
  -webkit-line-clamp: unset;
}

.resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] a.page-module-card--content::after {
  top: auto;
  right: clamp(20px, 2.5vw, 32px);
  bottom: clamp(26px, 3vw, 34px);
}

@media (max-width: 767px) {
  .resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module__grid--cards {
    gap: 18px;
  }

  .resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-card--content {
    min-height: 370px;
  }

  .resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-card__body {
    min-height: 370px;
    padding: 28px 92px 26px 22px;
  }

  .resource-root-v1 .page-module--cards.is-variant-selection[data-module-key="categories"] .page-module-card__icon {
    top: 26px;
    right: 20px;
    width: 68px;
    height: 68px;
    border-radius: 30% 70% 60% 40% / 42% 36% 64% 58%;
    font-size: 27px;
  }

  .resource-root-v1__hero {
    min-height: var(--resource-root-hero-min-height, 460px);
  }
  .resource-root-v1__hero::before { background-position: 68% center; }
  .resource-root-v1__hero-inner {
    min-height: var(--resource-root-hero-min-height, 460px);
    padding-block: 44px 50px;
  }
  .resource-root-v1__hero[data-mobile-title-align="left"] .resource-root-v1__hero-inner {
    justify-content: start;
  }
  .resource-root-v1__hero[data-mobile-title-align="left"] .resource-root-v1__hero-copy {
    text-align: left;
  }
  .resource-root-v1__hero[data-mobile-title-align="left"] .resource-root-v1__hero-description {
    margin: 18px 0 0;
  }
  .resource-root-v1__hero[data-mobile-title-align="left"] .resource-root-v1__hero-actions {
    justify-content: flex-start;
  }
  .resource-root-v1__hero[data-mobile-title-align="center"] .resource-root-v1__hero-inner {
    justify-content: center;
  }
  .resource-root-v1__hero[data-mobile-title-align="center"] .resource-root-v1__hero-copy {
    text-align: center;
  }
  .resource-root-v1__hero[data-mobile-title-align="center"] .resource-root-v1__hero-description {
    margin-inline: auto;
    margin-top: 18px;
  }
  .resource-root-v1__hero[data-mobile-title-align="center"] .resource-root-v1__hero-actions {
    justify-content: center;
  }
  
  .resource-root-v1__hero-actions { align-items: stretch; flex-direction: column; }
  .resource-root-v1__hero-actions > a { width: 100%; }
}

@media (max-width: 420px) {
  
}

/* Mobile H1 scale: preserve smaller editor values; desktop/tablet stay unchanged. */
@media (max-width: 767px) {
  .resource-root-v1__hero h1 {
    font-size: min(var(--resource-root-hero-title-size, 50px), 26px);
    line-height: 1.4;
  }
}

@media (max-width: 360px) {
  .resource-root-v1__hero h1 {
    font-size: min(var(--resource-root-hero-title-size, 50px), 24px);
  }
}

/* Supply the public outline-button token only inside a light-foreground hero. */
.resource-root-v1__hero[data-foreground="light"] .resource-root-v1__hero-actions {
  --ui-color-text-secondary: var(--ui-color-on-accent, #f8fafc);
}