/* ========================================================= */
/* Components: Cards                                         */
/* ========================================================= */

.sg-card {
  --layout-card-segment-padding-top: var(--card-segment-padding-vertical);
  --layout-card-segment-padding-right: var(--card-segment-padding-horizontal);
  --layout-card-segment-padding-bottom: var(--card-segment-padding-vertical);
  --layout-card-segment-padding-left: var(--card-segment-padding-horizontal);
  --layout-card-body-padding-top: var(--layout-card-segment-padding-top);
  --layout-card-body-padding-right: var(--layout-card-segment-padding-right);
  --layout-card-body-padding-bottom: var(--layout-card-segment-padding-bottom);
  --layout-card-body-padding-left: var(--layout-card-segment-padding-left);
  --layout-card-body-text-margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  border: var(--border-none);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-none);
  background: var(--surface-card);
}

.sg-card.sg-card--overlay-host {
  overflow: visible;
}

.sg-card > .sg-card-segment:first-child {
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}

.sg-card > .sg-card-segment:last-child {
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
}

@media (max-width: 48rem) {
  :root {
    --card-segment-padding-horizontal: var(--card-segment-padding-horizontal-mobile);
  }
}

.sg-card-segment {
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  padding:
    var(--layout-card-segment-padding-top)
    var(--layout-card-segment-padding-right)
    var(--layout-card-segment-padding-bottom)
    var(--layout-card-segment-padding-left);
  gap: var(--layout-card-segment-content-gap);
}

.sg-card-segment--header {
  color: var(--text-card-header);
}

.sg-card-segment--body {
  justify-content: var(--layout-card-body-content-justify);
  padding:
    var(--layout-card-body-padding-top)
    var(--layout-card-body-padding-right)
    var(--layout-card-body-padding-bottom)
    var(--layout-card-body-padding-left);
  color: var(--text-card-body);
  background: var(--surface-card-body);
}

.sg-card-segment--body > .sg-body {
  margin: var(--layout-card-body-text-margin, 0);
}

.sg-card-segment--body.sg-object-card__content > .sg-body.sg-company-card__summary {
  margin: var(--layout-company-card-analysis-gap-after-moat) 0 0 0;
}

.sg-card-segment--darkblue {
  background: var(--surface-card-header-primary);
}

.sg-card-segment--darkgreen {
  background: var(--surface-card-header-alternative);
}

.sg-card-segment--darkbrown {
  background: var(--surface-card-header-muted);
}

.sg-card-segment--signal-red {
  background: var(--color-signal-red);
  color: var(--text-card-header);
}

.sg-card-segment--signal-green {
  background: var(--color-signal-green);
  color: var(--text-card-header);
}

.sg-card-segment--gray {
  background: var(--surface-card-segment-neutral);
}

.sg-card-segment--white {
  background: var(--surface-object-card-lower-segment);
}

.sg-card.sg-card--notification-white {
  --text-card-header: var(--text-card-body);
}

.sg-card--content-card {
  --surface-card-header-primary: var(--surface-content-block-card-title);
  --surface-card-body: var(--surface-content-block-card-content);
  --text-card-header: var(--text-content-block-card-title);
  --text-card-body: var(--text-content-block-card-content);
}

.sg-card-segment + .sg-card-segment {
  box-shadow: inset 0 1px 0 var(--divider-card-segment);
}

.sg-card-segment--darkbrown + .sg-card-segment--body {
  box-shadow: none;
}

.sg-card-segment.sg-object-card__header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.sg-card-segment--body.sg-object-card__content {
  background: var(--surface-object-card-lower-segment);
}

.sg-card-segment--body.sg-object-card__actions-segment {
  background: var(--surface-object-card-lower-segment);
}

.sg-card-segment.sg-vsf-drawer-card__actions-segment {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-large);
}

.sg-group-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-small);
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-small);
  border-radius: var(--radius-card);
  background: var(--surface-card-group);
}

.sg-group-card > .sg-card {
  flex: 1 1 calc(50% - var(--spacing-small));
  width: calc(50% - var(--spacing-small));
}

.sg-group-card--margin-after-large {
  margin-bottom: var(--spacing-large);
}

.sg-group-card__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-small);
  width: 100%;
  margin-bottom: var(--spacing-small);
}

.sg-group-card__heading {
  flex: 0 0 100%;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--spacing-small);
  margin-left: var(--card-segment-padding-horizontal);
}

.sg-group-card__header-row .sg-group-card__heading {
  flex: 1 1 auto;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: var(--card-segment-padding-horizontal);
}

.sg-group-card__header-row .sg-sandwich-menu-wrap {
  margin-right: var(--card-segment-padding-horizontal);
}

.sg-page-cards .sg-preview-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sg-page-cards .sg-preview-area > .sg-card,
.sg-page-cards .sg-preview-area > .sg-transparent-card {
  width: 100%;
  max-width: none;
}

.sg-page-cards .sg-group-card > .sg-card {
  flex: 0 0 100%;
  width: 100%;
}

.sg-transparent-card {
  color: var(--text-card-transparent);
  background: var(--surface-card-transparent);
  padding:
    var(--card-segment-padding-vertical)
    var(--card-segment-padding-horizontal)
    var(--card-segment-padding-vertical)
    var(--card-segment-padding-horizontal);
}

.sg-transparent-card p {
  margin: 0;
  color: var(--text-card-transparent);
}