/*
 * Custom field output: the Post field and Field group blocks, the
 * [sepo_field] and [sepo_fields] shortcodes, and the Elementor widgets.
 *
 * Colours come from SepoDesk tokens when the theme has them, and are mixed
 * from the text colour otherwise, so the output follows any theme's light
 * and dark modes. Change any --sepo-fields-* value to restyle it.
 */
.sepo-fields {
  --sepo-fields-line: var(--sd-border, color-mix(in srgb, currentColor 14%, transparent));
  --sepo-fields-soft: var(--sd-surface-2, color-mix(in srgb, currentColor 4%, transparent));
  --sepo-fields-label: var(--sd-muted, color-mix(in srgb, currentColor 62%, transparent));
  --sepo-fields-value: var(--sd-heading, inherit);
  --sepo-fields-radius: var(--sd-radius-sm, 12px);
  --sepo-fields-gap: 12px;
  margin: 1.5em 0;
}
.sepo-fields__title {
  margin: 0 0 0.6em;
  color: var(--sepo-fields-value);
  font-size: 1.1em;
  line-height: 1.3;
}
.sepo-fields__list {
  margin: 0;
  padding: 0;
}
.sepo-fields__label,
.sepo-fields__value {
  margin: 0;
  padding: 0;
}
.sepo-fields__label {
  color: var(--sepo-fields-label);
  font-weight: 600;
}
.sepo-fields__value {
  color: var(--sepo-fields-value);
  overflow-wrap: anywhere;
}
.sepo-fields__value a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sepo-fields__empty {
  color: var(--sepo-fields-label);
}

/* Table: label and value side by side, one row per field. */
.sepo-fields--table .sepo-fields__list {
  border: 1px solid var(--sepo-fields-line);
  border-radius: var(--sepo-fields-radius);
  overflow: hidden;
}
.sepo-fields--table .sepo-fields__row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
}
.sepo-fields--table .sepo-fields__row + .sepo-fields__row {
  border-top: 1px solid var(--sepo-fields-line);
}
.sepo-fields--table .sepo-fields__label {
  padding: 12px 16px;
  background: var(--sepo-fields-soft);
  font-size: 0.92em;
}
.sepo-fields--table .sepo-fields__value {
  padding: 12px 16px;
}

/* Grid: small tinted tiles, label above value. */
.sepo-fields--grid .sepo-fields__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sepo-fields-gap);
}
.sepo-fields--grid .sepo-fields__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--sepo-fields-radius);
  background: var(--sepo-fields-soft);
  border: 1px solid var(--sepo-fields-line);
}
.sepo-fields--grid .sepo-fields__label {
  font-size: 0.78em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sepo-fields--grid .sepo-fields__value {
  font-weight: 600;
}

/* Inline: "Label: value" lines, for a sidebar or under a title. */
.sepo-fields--inline .sepo-fields__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.sepo-fields--inline .sepo-fields__row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.sepo-fields--inline .sepo-fields__label::after {
  content: ":";
}

/* One field (Post field block, [sepo_field], Elementor Post field). */
.sepo-field-label {
  font-weight: 600;
  margin-right: var(--sepo-field-gap, 0.3em);
}
.sepo-field-layout-block .sepo-field-label {
  display: block;
  margin: 0 0 var(--sepo-field-gap, 4px);
}

/* Shown only in the Elementor editor, where a widget has nothing to show for the post being edited. */
.sepo-field--placeholder,
.sepo-fields--placeholder {
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 8px;
  opacity: 0.7;
  font-size: 0.9em;
}

@media (max-width: 560px) {
  .sepo-fields--table .sepo-fields__row {
    grid-template-columns: 1fr;
  }
  .sepo-fields--table .sepo-fields__label {
    padding-bottom: 6px;
  }
  .sepo-fields--table .sepo-fields__value {
    padding-top: 6px;
  }
}