/** Componentes WordPress oficiais do Octopus System. */

.octopus-badge {
  --octopus-badge-surface: var(--color-bg-surface); --octopus-badge-content: var(--color-text-secondary); --octopus-badge-border: var(--color-border-default); --octopus-badge-solid: var(--color-text-secondary);
  box-sizing: border-box; display: inline-flex; width: fit-content; max-width: 100%; min-height: 30px; align-items: center; gap: 0.375rem;
  border: 1px solid transparent; border-radius: 9999px; background: var(--octopus-badge-surface); padding: 0 var(--space-component-sm); color: var(--octopus-badge-content);
  font-family: var(--font-sans); font-size: var(--type-label-size); font-weight: var(--type-label-weight); line-height: var(--type-label-leading); letter-spacing: var(--type-label-tracking); vertical-align: middle;
}
.octopus-badge[data-size="sm"] { min-height: 26px; gap: 0.25rem; font-size: var(--type-caption-size); }
.octopus-badge[data-size="lg"] { min-height: 34px; gap: 0.5rem; padding-inline: var(--space-component-md); }
.octopus-badge__indicator { width: 0.5rem; height: 0.5rem; flex: none; border-radius: 9999px; background: currentColor; }
.octopus-badge__icon { display: inline-flex; flex: none; align-items: center; }
.octopus-badge[data-size="sm"] .octopus-icon { width: 12px; height: 12px; }
.octopus-badge[data-size="md"] .octopus-icon { width: 14px; height: 14px; }
.octopus-badge[data-size="lg"] .octopus-icon { width: 16px; height: 16px; }
.octopus-badge__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.octopus-badge[data-tone="accent"] { --octopus-badge-surface: var(--color-action-primary-subtle); --octopus-badge-content: var(--color-text-action); --octopus-badge-border: var(--color-border-action); --octopus-badge-solid: var(--color-action-primary); }
.octopus-badge[data-tone="success"] { --octopus-badge-surface: var(--color-feedback-success-surface); --octopus-badge-content: var(--color-feedback-success-content); --octopus-badge-border: var(--color-feedback-success-border); --octopus-badge-solid: var(--color-green-700); }
.octopus-badge[data-tone="warning"] { --octopus-badge-surface: var(--color-feedback-warning-surface); --octopus-badge-content: var(--color-feedback-warning-content); --octopus-badge-border: var(--color-feedback-warning-border); --octopus-badge-solid: var(--color-feedback-warning-icon); }
.octopus-badge[data-tone="danger"] { --octopus-badge-surface: var(--color-feedback-danger-surface); --octopus-badge-content: var(--color-feedback-danger-content); --octopus-badge-border: var(--color-feedback-danger-border); --octopus-badge-solid: var(--color-feedback-danger-icon); }
.octopus-badge[data-tone="premium"] { --octopus-badge-surface: var(--color-action-primary-subtle); --octopus-badge-content: var(--color-text-action); --octopus-badge-border: var(--color-border-action); --octopus-badge-solid: var(--color-action-primary); }
.octopus-badge[data-tone="action"] { --octopus-badge-surface: var(--color-action-primary-subtle); --octopus-badge-content: var(--color-action-primary); --octopus-badge-border: var(--color-action-primary); --octopus-badge-solid: var(--color-orange-400); }
.octopus-badge[data-tone="brand"] { --octopus-badge-surface: var(--color-brand-primary-subtle); --octopus-badge-content: var(--color-text-brand); --octopus-badge-border: var(--color-brand-primary); --octopus-badge-solid: var(--color-purple-500); }
.octopus-badge[data-tone="base"] { --octopus-badge-surface: var(--color-bg-surface); --octopus-badge-content: var(--color-text-secondary); --octopus-badge-border: var(--color-border-default); --octopus-badge-solid: var(--color-zinc-900); }
.octopus-badge[data-variant="outline"] { border-color: var(--octopus-badge-border); background: transparent; }
.octopus-badge[data-variant="tonal"] { border-color: var(--octopus-badge-border); }
.octopus-badge[data-variant="solid"] { border-color: var(--octopus-badge-solid); background: var(--octopus-badge-solid); color: var(--color-text-on-action); }
.octopus-badge[data-tone="success"][data-variant="solid"] { color: var(--color-text-on-success-solid); }
.octopus-badge[data-tone="action"][data-variant="solid"] { color: var(--color-zinc-900); }
.octopus-badge[data-tone="action"][data-variant="soft"] { --octopus-badge-surface: var(--color-orange-100); --octopus-badge-content: var(--color-orange-800); }
.octopus-badge:is([data-tone="brand"], [data-tone="base"])[data-variant="solid"] { color: white; }

.octopus-tag {
  --octopus-tag-surface: var(--color-bg-surface); --octopus-tag-content: var(--color-text-secondary); --octopus-tag-border: var(--color-border-default); --octopus-tag-solid: var(--color-text-secondary);
  display: inline-flex; min-width: 0; min-height: 30px; align-items: center; justify-content: center; gap: 0.375rem; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--shape-radius-tag); background: var(--octopus-tag-surface); padding: 0 var(--space-component-sm); color: var(--octopus-tag-content);
  font-family: var(--font-sans); font-size: var(--type-label-size); font-weight: var(--type-label-weight); line-height: var(--type-label-leading); letter-spacing: var(--type-label-tracking); vertical-align: middle;
}
.octopus-tag[data-size="sm"] { min-height: 26px; gap: 0.25rem; font-size: var(--type-caption-size); }
.octopus-tag[data-size="lg"] { min-height: 34px; gap: 0.5rem; padding-inline: var(--space-component-md); }
.octopus-tag[data-tone="accent"] { --octopus-tag-surface: var(--color-action-primary-subtle); --octopus-tag-content: var(--color-text-action); --octopus-tag-border: var(--color-border-action); --octopus-tag-solid: var(--color-action-primary); }
.octopus-tag[data-tone="success"] { --octopus-tag-surface: var(--color-feedback-success-surface); --octopus-tag-content: var(--color-feedback-success-content); --octopus-tag-border: var(--color-feedback-success-border); --octopus-tag-solid: var(--color-green-700); }
.octopus-tag[data-tone="warning"] { --octopus-tag-surface: var(--color-feedback-warning-surface); --octopus-tag-content: var(--color-feedback-warning-content); --octopus-tag-border: var(--color-feedback-warning-border); --octopus-tag-solid: var(--color-feedback-warning-icon); }
.octopus-tag[data-tone="danger"] { --octopus-tag-surface: var(--color-feedback-danger-surface); --octopus-tag-content: var(--color-feedback-danger-content); --octopus-tag-border: var(--color-feedback-danger-border); --octopus-tag-solid: var(--color-feedback-danger-icon); }
.octopus-tag[data-tone="premium"] { --octopus-tag-surface: var(--color-action-primary-subtle); --octopus-tag-content: var(--color-text-action); --octopus-tag-border: var(--color-border-action); --octopus-tag-solid: var(--color-action-primary); }
.octopus-tag[data-tone="action"] { --octopus-tag-surface: var(--color-action-primary-subtle); --octopus-tag-content: var(--color-action-primary); --octopus-tag-border: var(--color-action-primary); --octopus-tag-solid: var(--color-orange-400); }
.octopus-tag[data-tone="brand"] { --octopus-tag-surface: var(--color-brand-primary-subtle); --octopus-tag-content: var(--color-text-brand); --octopus-tag-border: var(--color-brand-primary); --octopus-tag-solid: var(--color-purple-500); }
.octopus-tag[data-tone="base"] { --octopus-tag-surface: var(--color-bg-surface); --octopus-tag-content: var(--color-text-secondary); --octopus-tag-border: var(--color-border-default); --octopus-tag-solid: var(--color-zinc-900); }
.octopus-tag[data-variant="outline"] { border-color: var(--octopus-tag-border); background: transparent; }
.octopus-tag[data-variant="tonal"] { border-color: var(--octopus-tag-border); }
.octopus-tag[data-variant="solid"] { border-color: var(--octopus-tag-solid); background: var(--octopus-tag-solid); color: var(--color-text-on-action); }
.octopus-tag[data-tone="success"][data-variant="solid"] { color: var(--color-text-on-success-solid); }
.octopus-tag[data-tone="action"][data-variant="solid"] { color: var(--color-zinc-900); }
.octopus-tag:is([data-tone="brand"], [data-tone="base"])[data-variant="solid"] { color: white; }
.octopus-editorial-card .octopus-tag[data-tone="neutral"][data-variant="soft"] { --octopus-tag-surface: var(--color-bg-overlay); }
.octopus-tag__icon { display: inline-flex; flex: none; align-items: center; }
.octopus-tag__icon .octopus-icon { width: 14px; height: 14px; }
.octopus-tag[data-size="sm"] .octopus-tag__icon .octopus-icon { width: 12px; height: 12px; }
.octopus-tag[data-size="lg"] .octopus-tag__icon .octopus-icon { width: 16px; height: 16px; }
.octopus-tag__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.octopus-section-header { box-sizing: border-box; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-component-xl); color: var(--color-text-primary); font-family: var(--font-sans); text-align: left; }
.octopus-section-header[data-align="center"] { align-items: center; text-align: center; }
.octopus-section-header[data-align="end"] { align-items: flex-end; text-align: right; }
.octopus-section-header__title { max-width: 24ch; margin: 0; color: var(--color-text-primary); font-size: var(--type-display-xl-size); font-weight: var(--type-display-xl-weight); line-height: 1.05; letter-spacing: -0.04em; }
.octopus-section-header[data-size="md"] .octopus-section-header__title { max-width: 22ch; font-size: var(--type-display-lg-size); }
.octopus-section-header[data-size="xl"] .octopus-section-header__title { max-width: 24ch; font-size: var(--type-display-2xl-size); }
.octopus-section-header__description { max-width: 42rem; margin: 0; color: var(--color-text-secondary); font-size: var(--type-body-lg-size); font-weight: var(--type-body-lg-weight); line-height: var(--type-body-lg-line-height); }
@media (max-width: 639px) {
  .octopus-section-header__title { font-size: var(--type-display-lg-size); }
  .octopus-section-header[data-size="md"] .octopus-section-header__title { font-size: var(--type-display-md-size); }
  .octopus-section-header[data-size="xl"] .octopus-section-header__title { font-size: var(--type-display-xl-size); }
}

.octopus-button {
  --octopus-button-height: var(--control-height-md);
  --octopus-button-padding-inline: var(--space-component-sm);
  --octopus-button-background: transparent;
  --octopus-button-border: var(--color-border-default);
  --octopus-button-content: var(--color-text-primary);

  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  min-height: var(--octopus-button-height);
  align-items: center;
  justify-content: center;
  gap: var(--space-component-xs);
  border: 1px solid var(--octopus-button-border);
  border-radius: var(--shape-radius-component);
  background: var(--octopus-button-background);
  padding: 0 var(--octopus-button-padding-inline);
  color: var(--octopus-button-content);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-action-size);
  font-weight: var(--type-action-weight);
  line-height: var(--type-action-leading);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard),
    opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.octopus-button[data-size="sm"] { --octopus-button-height: var(--control-height-sm); --octopus-button-padding-inline: var(--space-component-xs); font-size: var(--type-label-size); }
.octopus-button[data-size="lg"] { --octopus-button-height: var(--control-height-lg); --octopus-button-padding-inline: var(--space-component-md); }
.octopus-button[data-align="start"] { justify-content: flex-start; }
.octopus-button[data-align="end"] { justify-content: flex-end; }
.octopus-button--block { width: 100%; }
.octopus-button--icon-only { width: var(--octopus-button-height); padding-inline: 0; }
.octopus-button__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.octopus-icon { display: inline-block; flex: none; vertical-align: middle; }

/* Announcement Bar */
.octopus-announcement-bar { position: relative; isolation: isolate; box-sizing: border-box; display: flex; min-height: calc(var(--control-height-lg) + var(--space-component-sm)); overflow: clip; align-items: center; justify-content: center; background: var(--color-orange-400); color: var(--color-text-primary); font-family: var(--font-sans); }
.octopus-announcement-bar__inner { box-sizing: border-box; display: flex; width: 100%; max-width: 86.25rem; min-height: inherit; align-items: center; justify-content: center; gap: var(--space-component-lg); padding-inline: calc(var(--primitive-space-300) + var(--control-height-md)); text-align: center; flex-wrap: wrap; }
.octopus-announcement-bar__message { min-width: 0; max-width: 100%; white-space: pre-line; overflow-wrap: anywhere; font-size: var(--type-body-sm-size); font-weight: var(--font-weight-semibold); line-height: var(--type-body-sm-line-height); letter-spacing: var(--type-body-sm-tracking); }
.octopus-announcement-bar__action { flex: none; }
[data-octopus-announcement-bar] .octopus-button.octopus-announcement-bar__dismiss { position: absolute; top: 50%; right: var(--space-component-md); transform: translateY(-50%); --octopus-button-content: var(--color-icon-on-action); }
[data-octopus-announcement-bar] .octopus-button.octopus-announcement-bar__dismiss:hover:not(:disabled):not([aria-disabled="true"]) { --octopus-button-background: color-mix(in srgb, var(--color-icon-on-action) 12%, transparent); }
[data-octopus-announcement-bar] .octopus-button.octopus-announcement-bar__dismiss:active:not(:disabled):not([aria-disabled="true"]) { --octopus-button-background: color-mix(in srgb, var(--color-icon-on-action) 20%, transparent); }
.octopus-announcement-bar[data-state="dismissing"] { pointer-events: none; animation: octopus-announcement-bar-dismiss var(--motion-duration-fast) var(--motion-ease-standard) both; }
@keyframes octopus-announcement-bar-dismiss { to { opacity: 0; transform: translateY(-100%); } }
@media (max-width: 53.75rem) { .octopus-announcement-bar { min-height: calc(var(--control-height-lg) + var(--space-component-xs)); } .octopus-announcement-bar__inner { padding-block: var(--space-component-xs); padding-inline: calc(var(--control-height-md) + var(--space-component-xs)); gap: var(--space-component-xs); } }
@media (max-width: 39.9375rem) { .octopus-announcement-bar__inner { flex-direction: column; flex-wrap: nowrap; } .octopus-announcement-bar__message { max-width: 32ch; } .octopus-announcement-bar__dismiss, [data-octopus-announcement-bar] .octopus-button.octopus-announcement-bar__dismiss { right: var(--space-component-xs); } }
@media (prefers-reduced-motion: reduce) { .octopus-announcement-bar[data-state="dismissing"] { animation: none; } }

.octopus-button[data-variant="primary"] {
  --octopus-button-background: var(--color-action-primary);
  --octopus-button-border: var(--color-action-primary);
  --octopus-button-content: var(--color-text-on-action);
}
.octopus-button[data-variant="primary"]:hover:not(:disabled):not([aria-disabled="true"]) {
  --octopus-button-background: var(--color-action-primary-hover);
  --octopus-button-border: var(--color-action-primary-hover);
}
.octopus-button[data-variant="primary"]:active:not(:disabled):not([aria-disabled="true"]) {
  --octopus-button-background: var(--color-action-primary-pressed);
  --octopus-button-border: var(--color-action-primary-pressed);
}

.octopus-button[data-variant="outline"] { --octopus-button-border: var(--color-border-action); --octopus-button-content: var(--color-text-action); }
.octopus-button[data-variant="outline"]:hover:not(:disabled):not([aria-disabled="true"]),
.octopus-button[data-variant="subtle"] { --octopus-button-background: var(--color-action-primary-subtle); --octopus-button-border: transparent; --octopus-button-content: var(--color-text-action); }
.octopus-button[data-variant="filled"] { --octopus-button-background: var(--color-bg-surface); --octopus-button-border: transparent; }
.octopus-button[data-variant="ghost"] { --octopus-button-border: transparent; --octopus-button-content: var(--color-text-action); }
.octopus-button[data-variant="filled"]:hover:not(:disabled),
.octopus-button[data-variant="ghost"]:hover:not(:disabled),
.octopus-button[data-variant="subtle"]:hover:not(:disabled) { --octopus-button-background: var(--color-bg-sunken); }
.octopus-button[data-variant="danger"] { --octopus-button-background: var(--color-feedback-danger-icon); --octopus-button-border: var(--color-feedback-danger-border); --octopus-button-content: var(--color-text-on-action); }
.octopus-button[data-variant="danger"]:hover:not(:disabled) { --octopus-button-background: var(--color-text-danger); --octopus-button-border: var(--color-text-danger); }

.octopus-button:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.octopus-button:disabled,
.octopus-button[aria-disabled="true"] { --octopus-button-background: var(--color-action-primary-disabled-surface); --octopus-button-border: var(--color-action-primary-disabled-surface); --octopus-button-content: var(--color-action-primary-disabled-content); cursor: not-allowed; pointer-events: none; }
.octopus-button__spinner { width: 1em; height: 1em; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: octopus-button-spin var(--motion-duration-base) linear infinite; }
@keyframes octopus-button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .octopus-button { transition-duration: 0ms; } .octopus-button__spinner { animation-duration: 1s; } }

.octopus-field { display: grid; gap: var(--space-component-xs); min-width: 0; color: var(--color-text-primary); font-family: var(--font-sans); }
.octopus-field__label { font-size: var(--type-label-size); font-weight: var(--type-label-weight); line-height: var(--type-label-leading); }
.octopus-field__required, .octopus-field__error { color: var(--color-text-danger); }
.octopus-field__description, .octopus-field__error { margin: 0; font-size: var(--type-caption-size); line-height: var(--type-caption-leading); }
.octopus-field__description { color: var(--color-text-secondary); }
.octopus-input-wrap { position: relative; display: block; min-width: 0; }
.octopus-input {
  appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: var(--control-height-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--shape-radius-component);
  background: var(--color-bg-surface);
  padding: 0 var(--space-component-sm);
  color: var(--color-text-primary);
  font: inherit;
  line-height: var(--type-body-leading);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard), box-shadow var(--motion-duration-fast) var(--motion-ease-standard), background-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard);
}
.octopus-input[data-size="sm"] { height: var(--control-height-sm); font-size: var(--type-label-size); }
.octopus-input[data-size="lg"] { height: var(--control-height-lg); font-size: var(--type-body-size); }
.octopus-input[data-variant="filled"] { border-color: transparent; background: var(--color-bg-sunken); }
.octopus-input::placeholder { color: var(--color-text-tertiary); opacity: 1; }
.octopus-field:is(:hover, :focus-within) .octopus-input:not(:disabled):not([data-invalid]) { border-color: var(--color-input-active); }
.octopus-input:is(:focus, :focus-visible):not(:disabled):not([data-invalid]) {
  border-color: var(--color-input-active);
  outline: 0;
  box-shadow: 0 0 0 0.1875rem var(--color-input-active-ring);
}
.octopus-input[data-invalid] { border-color: var(--color-feedback-danger-border); }
.octopus-input[data-invalid]:is(:focus, :focus-visible):not(:disabled) {
  outline: 0;
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-feedback-danger-border) 24%, transparent);
}
.octopus-input:disabled { border-color: var(--color-action-primary-disabled-surface); background: var(--color-action-primary-disabled-surface); color: var(--color-action-primary-disabled-content); }
.octopus-input:read-only:not(:disabled) { background: var(--color-bg-sunken); }
.octopus-input--with-leading { padding-inline-start: calc(var(--space-component-sm) + 16px + var(--space-component-xs)); }
.octopus-input--with-trailing { padding-inline-end: calc(var(--space-component-sm) + 16px + var(--space-component-xs)); }
.octopus-input__icon { position: absolute; inset-block: 0; z-index: 1; display: inline-flex; align-items: center; color: var(--color-icon-secondary); pointer-events: none; }
.octopus-input__icon--leading { inset-inline-start: var(--space-component-sm); }
.octopus-input__icon--trailing { inset-inline-end: var(--space-component-sm); }
@media (prefers-reduced-motion: reduce) { .octopus-input { transition-duration: 0ms; } }

.octopus-editorial-card { display: block; min-width: 0; height: 100%; font-family: var(--font-sans); }
.octopus-editorial-card__title, .octopus-editorial-card__description { white-space: pre-line; overflow-wrap: anywhere; }
.octopus-editorial-card__link {
  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; height: 100%; min-width: 0; min-height: 28rem; overflow: hidden;
  border: 1px solid transparent; border-radius: 16px; background: var(--color-bg-surface); color: var(--color-text-primary); text-decoration: none;
}
.octopus-editorial-card__link:focus { outline: none; }
/* Static profile presentation — parity with Octopus app.css. */
[data-octopus-editorial-card][data-action="none"][data-layout="vertical"] .octopus-editorial-card__link { min-height: 0; }
[data-octopus-editorial-card][data-action="none"][data-layout="vertical"] .octopus-editorial-card__media { aspect-ratio: 1 / 1; }
[data-octopus-editorial-card][data-action="none"] .octopus-editorial-card__body { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .octopus-editorial-card__link:hover { transform: scale(1.02); }
}
.octopus-editorial-card__link:focus-visible .octopus-editorial-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.octopus-editorial-card__media { position: relative; display: block; flex: none; aspect-ratio: 4 / 3; margin: .625rem .625rem 0; border-radius: 8px; overflow: hidden; background: var(--color-bg-sunken); }
.octopus-editorial-card__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center 55%; transition: transform var(--motion-duration-base) var(--motion-ease-standard); }
.octopus-editorial-card:is(:hover, :focus-within) .octopus-editorial-card__image {
  transform: scale(1.12);
}
.octopus-editorial-card__fallback { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--color-icon-secondary); }
.octopus-editorial-card__body { position: relative; box-sizing: border-box; display: flex; min-width: 0; flex: 1; flex-direction: column; justify-content: flex-start; gap: calc((var(--space-component-xs) + var(--space-component-sm)) / 2); padding: var(--primitive-space-300); }
.octopus-editorial-card__meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-component-xs); }
.octopus-editorial-card__title { margin: 0; color: var(--color-text-primary); font-size: var(--type-body-lg-size); font-weight: 600; line-height: 1.375; letter-spacing: -0.01em; }
.octopus-editorial-card__date { flex: none; color: var(--color-zinc-300); font-size: var(--type-body-xs-size); font-weight: 600; font-variant-numeric: tabular-nums; line-height: var(--type-body-xs-line-height); opacity: 1; }
.octopus-editorial-card__footer { display: flex; min-width: 0; margin-top: auto; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: calc((var(--space-component-xs) + var(--space-component-sm)) / 2); padding-top: calc((var(--space-component-xs) + var(--space-component-sm)) / 2); padding-right: var(--control-height-md); }
.octopus-editorial-card { --octopus-editorial-card-accent: var(--color-text-secondary); }
.octopus-editorial-card[data-badge-tone="accent"], .octopus-editorial-card[data-badge-tone="premium"] { --octopus-editorial-card-accent: var(--color-text-action); }
.octopus-editorial-card[data-badge-tone="success"] { --octopus-editorial-card-accent: var(--color-feedback-success-content); }
.octopus-editorial-card[data-badge-tone="warning"] { --octopus-editorial-card-accent: var(--color-feedback-warning-content); }
.octopus-editorial-card[data-badge-tone="danger"] { --octopus-editorial-card-accent: var(--color-feedback-danger-content); }
.octopus-editorial-card[data-badge-tone="action"] { --octopus-editorial-card-accent: var(--color-action-primary); }
.octopus-editorial-card[data-badge-tone="brand"] { --octopus-editorial-card-accent: var(--color-text-brand); }
.octopus-editorial-card__hover-icon { position: absolute; right: var(--primitive-space-300); bottom: var(--primitive-space-300); display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; color: var(--color-text-secondary); opacity: 0; pointer-events: none; transform: translate(-0.25rem, 0.25rem); transition: opacity var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard); }
.octopus-editorial-card__link:hover .octopus-editorial-card__hover-icon, .octopus-editorial-card__link:focus-visible .octopus-editorial-card__hover-icon { opacity: 1; transform: translate(0, 0); }
.octopus-editorial-card__action-wrap { display: flex; min-width: 0; margin-top: auto; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: calc((var(--space-component-xs) + var(--space-component-sm)) / 2); padding-top: calc((var(--space-component-xs) + var(--space-component-sm)) / 2); }
.octopus-editorial-card__action { display: inline-flex; width: fit-content; align-items: center; gap: var(--space-component-xs); color: var(--color-text-action); font-size: var(--type-body-sm-size); font-weight: 600; line-height: var(--type-body-sm-line-height); }
.octopus-editorial-card__action--button { min-height: var(--control-height-md); justify-content: center; border: 1px solid var(--color-action-primary); border-radius: var(--shape-radius-component); background: var(--color-action-primary); padding-inline: var(--space-component-sm); color: var(--color-text-on-action); }
[data-octopus-editorial-card][data-type="article"][data-action="button"][data-variant="cinf-gradient"][data-gradient-tone="brand"] [data-octopus-editorial-card-button-footer] { --color-action-primary: var(--color-orange-400); --color-text-on-action: var(--color-zinc-900); }
[data-octopus-editorial-card][data-action-size="lg"] [data-octopus-editorial-card-button-footer] > span:first-child { box-sizing: border-box; min-height: var(--control-height-lg); padding-inline: var(--space-component-md); font-size: var(--type-action-size); line-height: var(--type-action-leading); }
.octopus-editorial-card__action-icon { display: inline-flex; transform: translate(0, 0); }
@keyframes octopus-editorial-card-action-icon-hop { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(0.1875rem, -0.1875rem); } }
.octopus-editorial-card[data-action="button"]:is(:hover, :focus-within) .octopus-editorial-card__action-icon { animation: octopus-editorial-card-action-icon-hop var(--motion-duration-base) var(--motion-ease-standard) 1; }
.octopus-editorial-card__description { color: var(--color-text-secondary); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); }
[data-octopus-editorial-card][data-variant="cinf-gradient"] {
  --octopus-editorial-card-gradient: var(--color-zinc-900);
  --octopus-editorial-card-gradient-content: var(--color-zinc-50);
  --octopus-editorial-card-gradient-muted: var(--color-zinc-300);
}

/* Editorial context owns contrast; standalone Badge and neutral Soft cards stay unchanged.
   Utilities layer is required to override canonical Badge's important tone utilities. */
@layer utilities {
  [data-octopus-editorial-card][data-variant="cinf-gradient"]:not([data-gradient-tone="soft-neutral"]):not([data-gradient-tone="soft-base"]) .octopus-editorial-card__body :is([data-octopus-badge], .octopus-badge) {
    background-color: var(--color-white) !important;
    color: var(--color-zinc-900) !important;
  }
}

/* Solid Soft surfaces: same tone contract as Octopus Badge. */
[data-octopus-editorial-card][data-variant="cinf-gradient"][data-gradient-tone="soft-neutral"] {
  --octopus-editorial-card-gradient: var(--color-bg-surface);
  --octopus-editorial-card-gradient-content: var(--color-text-secondary);
  --octopus-editorial-card-gradient-muted: var(--color-text-secondary);
}
[data-octopus-editorial-card][data-variant="cinf-gradient"][data-gradient-tone="soft-accent"] {
  --octopus-editorial-card-gradient: var(--color-action-primary-subtle);
  --octopus-editorial-card-gradient-content: var(--color-text-action);
  --octopus-editorial-card-gradient-muted: var(--color-text-action);
}
[data-octopus-editorial-card][data-variant="cinf-gradient"][data-gradient-tone="soft-action"] {
  --octopus-editorial-card-gradient: var(--color-orange-100);
  --octopus-editorial-card-gradient-content: var(--color-orange-800);
  --octopus-editorial-card-gradient-muted: var(--color-orange-800);
}
[data-octopus-editorial-card][data-variant="cinf-gradient"][data-gradient-tone="soft-brand"] {
  --octopus-editorial-card-gradient: var(--color-brand-primary-subtle);
  --octopus-editorial-card-gradient-content: var(--color-text-brand);
  --octopus-editorial-card-gradient-muted: var(--color-text-brand);
}
[data-octopus-editorial-card][data-variant="cinf-gradient"][data-gradient-tone="soft-base"] {
  --octopus-editorial-card-gradient: var(--color-bg-surface);
  --octopus-editorial-card-gradient-content: var(--color-text-secondary);
  --octopus-editorial-card-gradient-muted: var(--color-text-secondary);
}
[data-octopus-editorial-card][data-variant="cinf-gradient"][data-gradient-tone="soft-success"] {
  --octopus-editorial-card-gradient: var(--color-feedback-success-surface);
  --octopus-editorial-card-gradient-content: var(--color-feedback-success-content);
  --octopus-editorial-card-gradient-muted: var(--color-feedback-success-content);
}
[data-octopus-editorial-card][data-variant="cinf-gradient"][data-gradient-tone="soft-warning"] {
  --octopus-editorial-card-gradient: var(--color-feedback-warning-surface);
  --octopus-editorial-card-gradient-content: var(--color-feedback-warning-content);
  --octopus-editorial-card-gradient-muted: var(--color-feedback-warning-content);
}
[data-octopus-editorial-card][data-variant="cinf-gradient"][data-gradient-tone="soft-danger"] {
  --octopus-editorial-card-gradient: var(--color-feedback-danger-surface);
  --octopus-editorial-card-gradient-content: var(--color-feedback-danger-content);
  --octopus-editorial-card-gradient-muted: var(--color-feedback-danger-content);
}
[data-octopus-editorial-card][data-variant="cinf-gradient"][data-gradient-tone="soft-premium"] {
  --octopus-editorial-card-gradient: var(--color-action-primary-subtle);
  --octopus-editorial-card-gradient-content: var(--color-text-action);
  --octopus-editorial-card-gradient-muted: var(--color-text-action);
}
[data-octopus-editorial-card][data-variant="cinf-gradient"][data-gradient-tone="brand"] {
  --octopus-editorial-card-gradient: var(--color-purple-600);
  --octopus-editorial-card-gradient-content: var(--color-zinc-50);
  --octopus-editorial-card-gradient-muted: var(--color-purple-100);
}
[data-octopus-editorial-card][data-variant="cinf-gradient"][data-gradient-tone="action"] {
  --octopus-editorial-card-gradient: var(--color-orange-400);
  --octopus-editorial-card-gradient-content: var(--color-zinc-900);
  --octopus-editorial-card-gradient-muted: var(--color-zinc-700);
}
[data-octopus-editorial-card][data-variant="cinf-gradient"] .octopus-editorial-card__link {
  background: var(--octopus-editorial-card-gradient);
  color: var(--octopus-editorial-card-gradient-content);
}
[data-octopus-editorial-card][data-variant="cinf-gradient"] .octopus-editorial-card__title,
[data-octopus-editorial-card][data-variant="cinf-gradient"] .octopus-editorial-card__hover-icon { color: var(--octopus-editorial-card-gradient-content); }
[data-octopus-editorial-card][data-variant="cinf-gradient"] .octopus-editorial-card__description { color: var(--octopus-editorial-card-gradient-muted); }
[data-octopus-icon][data-octopus-icon-weight="medium"] [stroke] { stroke-width: 2.5px; }
[data-octopus-icon][data-octopus-icon-weight="bold"] [stroke] { stroke-width: 3px; }
.octopus-editorial-card[data-layout="horizontal"] .octopus-editorial-card__link { min-height: 16rem; }
.octopus-editorial-card[data-layout="horizontal"] .octopus-editorial-card__image { object-position: center 60%; }
.octopus-editorial-card__footer--horizontal { margin-top: auto; }
.octopus-editorial-card__details { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-component-xs); }
@media (min-width: 40rem) {
  .octopus-editorial-card[data-layout="horizontal"] .octopus-editorial-card__link { flex-direction: row; }
  .octopus-editorial-card[data-layout="horizontal"] .octopus-editorial-card__media { width: calc(42% - .625rem); aspect-ratio: auto; margin: .625rem 0 .625rem .625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .octopus-editorial-card[data-action="button"]:is(:hover, :focus-within) .octopus-editorial-card__action-icon { animation: none; }
  .octopus-editorial-card__link, .octopus-editorial-card__image, .octopus-editorial-card__hover-icon { transition-duration: 0ms; }
  .octopus-editorial-card__link:hover { transform: none; }
  .octopus-editorial-card:is(:hover, :focus-within) .octopus-editorial-card__image { animation: none; transform: none; will-change: auto; }
}

.octopus-announcement-bar .octopus-announcement-bar__action { min-width: 0; max-width: 100%; height: auto; min-height: var(--control-height-md); padding-block: var(--space-component-xs); white-space: normal; overflow-wrap: anywhere; }

.octopus-announcement-bar__action .octopus-button__label { min-width: 0; white-space: normal; overflow-wrap: anywhere; }