/* elements_components.css */

/* focus: component metadata only */

[data-focus-id] {
  --focus-size-adjust: 0em;
}

/* shared focus content source */

.com_focuscontent {
  min-width: 0;
}

/* intro title root: single opening title block */

.com_introtitleroot {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_introtitleroot-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_introtitleroot[data-focus-id] {
  --focus-size-adjust: 0.2em;
}

/* intro title chapter: chapter opening block with badge, title and lead */

.com_introtitlechapter {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_introtitlechapter-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_introtitlechapter[data-focus-id] {
  --focus-size-adjust: 0.2em;
}

/* manifesto hero: large standalone statement block */

.com_manifestohero {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_manifestohero-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_manifestohero[data-focus-id] {
  --focus-size-adjust: 0.2em;
}

/* text band: simple label-plus-text block */

.com_textband {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_textband-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_textband[data-focus-id] {
  --focus-size-adjust: 0.2em;
}

/* viewpoint: compact explanatory viewpoint block */

.com_viewpoint {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_viewpoint-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_viewpoint[data-focus-id] {
  --focus-size-adjust: 0.2em;
}

/* reflective arc: grouped reflection sequence */

.com_reflectivearc {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_reflectivearc-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_reflectivearc[data-focus-id] {
  --focus-size-adjust: 0.1em;
}

/* reflective arc core: main reflective text block */

.com_reflectivearc-core {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_reflectivearc-core-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_reflectivearc-core[data-focus-id] {
  --focus-size-adjust: -0.15em;
}

/* reflective arc note: smaller supporting note block */

.com_reflectivearc-note {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_reflectivearc-note-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_reflectivearc-note[data-focus-id] {
  --focus-size-adjust: -0.15em;
}

/* reflective arc outcome: conclusion of a reflective sequence */

.com_reflectivearc-outcome {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_reflectivearc-outcome-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_reflectivearc-outcome[data-focus-id] {
  --focus-size-adjust: -0.15em;
}

/* core question: emphasized central question block */

.com_corequestion {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_corequestion-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_corequestion[data-focus-id] {
  --focus-size-adjust: 0.2em;
}

/* key point: emphasized standalone content moment */

.com_keypoint {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_keypoint-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_keypoint[data-focus-id] {
  --focus-size-adjust: 0.2em;
}

/* next step: transition or bridge block */

.com_nextstep {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_nextstep-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_nextstep[data-focus-id] {
  --focus-size-adjust: 0.2em;
}

/* compare: two-sided contrast block */

.com_compare {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-width: 0;
}

.com_compare-item {
  display: grid;
  align-content: start;
  height: 100%;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_compare-item-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_compare-item:first-child {
  padding-right: calc(var(--child-padding-x) + 2em);
}

.com_compare-item:last-child {
  padding-left: calc(var(--child-padding-x) + 2em);
}

.com_compare-item[data-focus-id] {
  --focus-size-adjust: -0.3em;
}

.com_compare-divider {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3.25em;
  aspect-ratio: 1;
  border-radius: var(--radius-round);
  transform: translate(-50%, -50%);
}

.com_compare-divider::before,
.com_compare-divider::after {
  content: "";
  grid-area: 1 / 1;
}

.com_compare-divider::before {
  width: 1.15em;
  height: 0.1em;
  border-radius: var(--radius-round);
}

.com_compare-divider::after {
  width: 0.52em;
  height: 0.52em;
  border-top-width: 0.1em;
  border-top-style: solid;
  border-right-width: 0.1em;
  border-right-style: solid;
  transform: translateX(0.34em) rotate(45deg);
}

html.is-portrait .com_compare {
  grid-template-columns: 1fr;
}

html.is-portrait .com_compare-divider {
  position: relative;
  top: auto;
  left: auto;
  justify-self: start;
  margin-block: -1.625em;
  margin-left: calc(var(--child-padding-x) + 0.35em);
  transform: none;
}

html.is-portrait .com_compare-divider::before {
  width: 0.1em;
  height: 1.15em;
}

html.is-portrait .com_compare-divider::after {
  transform: translateY(0.34em) rotate(135deg);
}

html.is-portrait .com_compare-item:first-child {
  padding-right: var(--child-padding-x);
  padding-bottom: calc(var(--child-padding-y) + 2em);
}

html.is-portrait .com_compare-item:last-child {
  padding-left: var(--child-padding-x);
  padding-top: calc(var(--child-padding-y) + 2em);
}

/* feature tiles: two-column collection of card-like items */

.com_featuretiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_featuretiles-item {
  display: grid;
  align-content: start;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_featuretiles-item-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_featuretiles-item[data-focus-id] {
  --focus-size-adjust: -0.3em;
}

html.is-portrait .com_featuretiles {
  grid-template-columns: 1fr;
}

/* framework grid: structured matrix of conceptual blocks */

.com_frameworkgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_frameworkgrid-item {
  display: grid;
  align-content: start;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_frameworkgrid-item-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_frameworkgrid-item[data-focus-id] {
  --focus-size-adjust: -0.3em;
}

html.is-portrait .com_frameworkgrid {
  grid-template-columns: 1fr;
}

/* journey strip: horizontal or stacked sequence of steps */

.com_journeystrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  align-items: stretch;
}

.com_journeystrip-item {
  display: grid;
  align-content: start;
  height: 100%;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_journeystrip-item-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_journeystrip-item[data-focus-id] {
  --focus-size-adjust: -0.3em;
}

html.is-portrait .com_journeystrip {
  grid-template-columns: 1fr;
}

/* detail grid: two-column detail layout */

.com_detailgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

html.is-portrait .com_detailgrid {
  grid-template-columns: 1fr;
}

/* detail block: compact label-and-detail information block */

.com_detailblock {
  display: grid;
  align-content: start;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_detailblock-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_detailblock[data-focus-id] {
  --focus-size-adjust: -0.15em;
}

/* point list: list of compact explanatory points */

.com_pointlist {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  max-width: var(--width-max);
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_pointlist-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_pointlist[data-focus-id] {
  --focus-size-adjust: -0.15em;
}

.com_pointlist-item {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_pointlist-item-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_pointlist-item[data-focus-id] {
  --focus-size-adjust: -0.3em;
}

/* statement list: list of emphasized statement rows */

.com_statementlist {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_statementlist-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_statementlist[data-focus-id] {
  --focus-size-adjust: -0.15em;
}

.com_statementlist-item {
  position: relative;
  padding-left: calc(var(--padding-md) + 0.1em);
  font-size: var(--fontsize-lg);
  line-height: var(--lineheight-loose);
  letter-spacing: var(--letterspacing-none);
}

.com_statementlist-item::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--radius-round);
}

/* center field: centered hero field with optional supporting items */

.com_centerfield {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  justify-items: center;
  text-align: center;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_centerfield-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_centerfield[data-focus-id] {
  --focus-size-adjust: 0.1em;
}

.com_centerfield-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

/* top bar: header-like row */

.com_topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_topbar-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_topbar[data-focus-id] {
  --focus-size-adjust: -0.25em;
}

html.is-portrait .com_topbar {
  grid-template-columns: 1fr;
}

/* bottom bar: centered footer-like row */

.com_bottombar {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_bottombar-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_bottombar[data-focus-id] {
  --focus-size-adjust: -0.25em;
}

html.is-portrait .com_bottombar {
  justify-content: center;
}

/* link row: horizontal navigation link set */

.com_linkrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_linkrow-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_linkrow[data-focus-id] {
  --focus-size-adjust: -0.25em;
}

html.is-portrait .com_linkrow {
  justify-content: center;
}

.com_linkrow-link {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-size: var(--fontsize-sm);
  line-height: var(--lineheight-link);
  letter-spacing: var(--letterspacing-caps);
  text-transform: uppercase;
  text-decoration: none;
}

.com_linkrow-separator {
  display: inline-block;
  font-size: var(--fontsize-sm);
  line-height: var(--lineheight-link);
  letter-spacing: var(--letterspacing-none);
}

/* related links: compact linked references block */

.com_relatedlinks {
  display: grid;
  align-content: start;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
  padding: var(--child-padding-y) var(--child-padding-x);
}

.com_relatedlinks-content {
  display: grid;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.com_relatedlinks[data-focus-id] {
  --focus-size-adjust: -0.15em;
}

.com_relatedlinks-link {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-size: var(--fontsize-base);
  line-height: var(--lineheight-link);
}

.com_relatedlinks-link::before {
  content: "→ ";
}

/* language menu: compact language switcher */

.com_languagemenu {
  position: relative;
  min-width: 0;
}

.com_languagemenu-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  min-width: 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fontsize-sm);
  line-height: var(--lineheight-base);
  letter-spacing: var(--letterspacing-caps);
}

html.is-portrait .com_languagemenu-summary {
  justify-content: flex-start;
}

.com_languagemenu-summary::-webkit-details-marker {
  display: none;
}

.com_languagemenu-list {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  display: grid;
  gap: var(--space-xs);
  min-width: 100%;
  padding: var(--padding-xs);
  border-radius: var(--radius-sm);
}

.com_languagemenu-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding:
    calc(var(--padding-xs) - 0.15em)
    calc(var(--padding-sm) - 0.08em);
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  line-height: var(--lineheight-base);
}

.com_languagemenu-flag {
  display: block;
  width: var(--size-flag-sm);
  height: auto;
  border-radius: var(--radius-xs);
}

/* typography components */

.com_label {
  font-size: var(--fontsize-md);
  line-height: var(--lineheight-base);
  letter-spacing: var(--letterspacing-caps);
  font-weight: var(--fontweight-bold);
  text-transform: uppercase;
}

.com_badge {
  display: inline-block;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding:
    calc(var(--padding-xs) - 0.04em)
    var(--padding-sm)
    var(--padding-xs);
  border-radius: var(--radius-round);
  font-size: var(--fontsize-xs);
  line-height: var(--lineheight-short);
  letter-spacing: var(--letterspacing-caps);
}

.com_display {
  max-width: var(--width-md);
  font-size: clamp(3.8em, 10vw, 8.2em);
  line-height: var(--lineheight-2xs);
  letter-spacing: var(--letterspacing-tighter);
  text-wrap: balance;
}

.com_hero {
  max-width: var(--width-xs);
  font-size: var(--fontsize-fluid-hero);
  line-height: var(--lineheight-tight);
  letter-spacing: var(--letterspacing-tightest);
  text-wrap: balance;
}

.com_statement {
  max-width: var(--width-xl);
  font-size: var(--fontsize-fluid-md);
  line-height: var(--lineheight-medium);
  letter-spacing: var(--letterspacing-medium);
}

.com_lead {
  max-width: var(--width-lg);
  font-size: var(--fontsize-fluid-lg);
  line-height: var(--lineheight-relaxed);
  letter-spacing: var(--letterspacing-medium);
}

.com_title {
  font-size: var(--fontsize-3xl);
  line-height: var(--lineheight-loose);
  letter-spacing: var(--letterspacing-none);
}

.com_text {
  font-size: var(--fontsize-md);
  line-height: var(--lineheight-detail);
  letter-spacing: var(--letterspacing-none);
}

.com_body {
  max-width: var(--width-xxl);
  font-size: var(--fontsize-base);
  line-height: var(--lineheight-body);
  letter-spacing: var(--letterspacing-none);
}

.com_step {
  font-size: var(--fontsize-fluid-sm);
  line-height: var(--lineheight-tight);
  letter-spacing: var(--letterspacing-tight);
}

.com_brandmark {
  display: block;
  max-width: var(--width-lg);
  font-family: var(--fontfamily-traditional);
  font-weight: var(--fontweight-regular);
  font-size: var(--fontsize-fluid-md);
  line-height: var(--lineheight-snug);
  letter-spacing: var(--letterspacing-none);
  margin: 0;
}

.com_brandmark-link {
  text-decoration: none;
}

html.is-portrait .add_width-sm,
html.is-portrait .add_width-lg,
html.is-portrait .com_display,
html.is-portrait .com_hero,
html.is-portrait .com_statement,
html.is-portrait .com_lead,
html.is-portrait .com_body,
html.is-portrait .com_brandmark {
  max-width: 100%;
}

html.is-portrait .com_display {
  line-height: var(--lineheight-xs);
  letter-spacing: var(--letterspacing-tightest);
}

html.is-portrait .com_lead {
  line-height: var(--lineheight-relaxed);
}