/* Content Card: shared Laravel / WordPress anatomy. Default keeps the existing
   Flux Card rhythm; soft changes the surface, not Button or typography. */
.octopus-content-card[data-octopus-content-card] {
    --content-card-surface: var(--color-brand-primary-subtle);
    --content-card-ink: var(--color-text-brand);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    gap: calc(var(--space-component-xs) * 1.5);
    padding: var(--space-layout-xs);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--shape-radius-component);
    background: var(--color-white);
    color: var(--color-text-primary);
    box-shadow: var(--elevation-raised);
    font-family: var(--font-sans);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-leading);
    overflow-wrap: anywhere;
}
.dark .octopus-content-card[data-octopus-content-card] {
    background: color-mix(in srgb, var(--color-white) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-white) 10%, transparent);
}
.octopus-content-card[data-octopus-content-card] > * { margin: 0; }
.octopus-content-card[data-octopus-content-card] > * + * { margin-block-start: var(--space-component-sm); }
.octopus-content-card[data-octopus-content-card] > :is(h2,h3,h4,h5,h6),
.octopus-content-card [data-octopus-content-card-heading] > :is(h2,h3,h4,h5,h6) {
    margin: 0;
    min-width: 0;
    font-size: var(--type-body-lead-size);
    font-weight: var(--type-heading-3-weight);
    line-height: 1.375; /* Flux leading-snug, preserved in both renderers. */
    letter-spacing: var(--type-heading-1-tracking);
    color: inherit;
}
.octopus-content-card[data-content-card-multiline] :is(h2,h3,h4,h5,h6,p) { white-space: pre-line; overflow-wrap: anywhere; }
.octopus-content-card[data-octopus-content-card] > p {
    font-size: var(--type-body-secondary-size);
    font-weight: var(--type-body-secondary-weight);
    line-height: 1.625; /* Flux leading-relaxed. */
    color: var(--color-text-secondary);
}
.octopus-content-card [data-octopus-content-card-icon] {
    display: flex;
    width: var(--space-layout-lg);
    height: var(--space-layout-lg);
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--shape-radius-input);
    margin-block-end: var(--space-component-sm);
    background: var(--color-action-primary-subtle);
    color: var(--color-action-primary);
}
.octopus-content-card [data-icon-tone="brand"] { background: var(--color-brand-primary-subtle); color: var(--color-text-brand); }
.octopus-content-card [data-icon-tone="base"] { background: var(--color-bg-sunken); color: var(--color-icon-primary); }
.octopus-content-card [data-octopus-content-card-icon] svg { width: calc(var(--space-component-xs) * 3.5); height: calc(var(--space-component-xs) * 3.5); }
.octopus-content-card[data-octopus-content-card] > [data-octopus-content-card-action] {
    margin-block-start: auto;
    padding-block-start: calc(var(--space-component-xs) * 1.5);
}
.octopus-content-card[data-octopus-content-card][data-content-card-variant="soft"] {
    background: var(--content-card-surface);
    border-color: transparent;
    box-shadow: var(--elevation-none);
    color: var(--content-card-ink);
}
.octopus-content-card[data-content-card-tone="success"] { --content-card-surface: var(--color-feedback-success-surface); --content-card-ink: var(--color-feedback-success-content); }
.octopus-content-card[data-content-card-tone="info"] { --content-card-surface: var(--color-feedback-info-surface); --content-card-ink: var(--color-feedback-info-content); }
.octopus-content-card[data-content-card-tone="base"] { --content-card-surface: var(--color-bg-surface); --content-card-ink: var(--color-text-primary); }
.octopus-content-card[data-content-card-variant="soft"] > p { color: inherit; }
.octopus-content-card[data-content-card-variant="soft"] [data-octopus-content-card-icon] { background: color-mix(in srgb, var(--content-card-ink) 8%, transparent); color: inherit; }
/* Soft + Badge: one canonical top row keeps the category clear of the icon and title. */
.octopus-content-card[data-content-card-badge-position="top-right"] [data-octopus-content-card-topline] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-component-sm);
    min-width: 0;
}
.octopus-content-card[data-content-card-badge-position="top-right"] [data-octopus-content-card-topline] > [data-octopus-content-card-icon] { margin-block-end: 0; }
.octopus-content-card [data-octopus-content-card-badge] { min-width: 0; margin-inline-start: auto; }
.octopus-content-card [data-octopus-content-card-badge] .octopus-badge { max-width: 100%; }
.octopus-content-card[data-content-card-badge-position="top-right"] [data-octopus-content-card-badge] > :is(.octopus-badge,[data-octopus-badge]) {
    --octopus-badge-solid: var(--content-card-ink);
    border-color: var(--content-card-ink);
    background: var(--content-card-ink);
    color: var(--color-white);
}
/* Opt-in compact heading. The original top-icon anatomy remains unchanged. */
.octopus-content-card [data-octopus-content-card-heading] {
    display: flex;
    align-items: center;
    gap: calc(var(--space-component-xs) * 1.5);
    min-width: 0;
}
.octopus-content-card[data-content-card-icon-position="title"] [data-octopus-content-card-icon] {
    width: var(--space-layout-xs);
    height: var(--space-layout-xs);
    margin: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
}
.octopus-content-card[data-content-card-icon-position="title"] [data-octopus-content-card-icon] svg { width: 100%; height: 100%; }
/* Only native links receive a pointer; the card itself is not clickable. */
.octopus-content-card [data-octopus-content-card-action] a { cursor: pointer; max-width: 100%; }
/* Same gentle card zoom as Mentor/Gallery Card. Reveal stays on the outer wrapper. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .octopus-content-card[data-content-card-hover="zoom"] {
        transition: transform var(--motion-duration-base) var(--motion-ease-standard);
    }
    .octopus-content-card[data-content-card-hover="zoom"]:hover { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
    .octopus-content-card[data-content-card-hover="zoom"] { transition: none; transform: none; }
}