.focofy-howto-single { container-type: inline-size; }

.focofy-howto-single__body    { display: flex; flex-direction: column; gap: var(--space-8); }

.focofy-howto-single__time    { display: inline-block; font-size: var(--font-size-xs); font-weight: var(--fw-semibold); color: var(--color-accent); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-2); }
.focofy-howto-single__title   { font-size: var(--font-size-2xl); font-weight: var(--fw-heading); color: var(--color-heading); margin-bottom: var(--space-3); line-height: var(--lh-tight); }
.focofy-howto-single__intro   { color: var(--color-text); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.focofy-howto-single__yield   { font-size: var(--font-size-base); color: var(--color-text); background: var(--color-surface-2); border-left: 3px solid var(--color-accent); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-6); }

.focofy-howto-single__media     { border-radius: var(--radius-xl); overflow: hidden; }
.focofy-howto-single__media img { width: 100%; height: auto; display: block; }

.focofy-howto-single__sub-title { font-size: var(--font-size-lg); font-weight: var(--fw-heading); color: var(--color-heading); margin-bottom: var(--space-3); }

.focofy-howto-single__tools-list,
.focofy-howto-single__supply-list { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; margin-bottom: var(--space-6); }

.focofy-howto-single__tools-list li,
.focofy-howto-single__supply-list li { background: var(--color-surface-2); border-radius: var(--radius-full); padding: var(--space-1) var(--space-4); font-size: var(--font-size-sm); color: var(--color-text); }

/* ── Steps ──────────────────────────────────────────────────────── */
.focofy-howto-single__steps-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); counter-reset: howto-step; }

.focofy-howto-single__step { display: flex; gap: var(--space-4); align-items: flex-start; }

.focofy-howto-single__step-num {
    flex-shrink: 0;
    width: 2.25rem; height: 2.25rem;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-size-sm); font-weight: var(--fw-bold);
    line-height: 1;
}

.focofy-howto-single__step-body  { flex: 1; }
.focofy-howto-single__step-name  { display: block; font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: var(--color-heading); margin-bottom: var(--space-1); }
.focofy-howto-single__step-text  { font-size: var(--font-size-base); color: var(--color-text); line-height: var(--lh-relaxed); }
.focofy-howto-single__step-img-wrap { margin-top: var(--space-4); border-radius: var(--radius-lg); overflow: hidden; }
.focofy-howto-single__step-img   { width: 100%; height: auto; display: block; }

.focofy-howto-single__cta { margin-top: var(--space-8); }

/* ── Alinhamentos / Larguras ────────────────────────────────────── */
.focofy-howto-single--align-center .focofy-howto-single__content { text-align: center; }
.focofy-howto-single--align-center .focofy-howto-single__tools-list,
.focofy-howto-single--align-center .focofy-howto-single__supply-list { justify-content: center; }
.focofy-howto-single--align-center .focofy-howto-single__cta { text-align: center; }
.focofy-howto-single--width-narrow .focofy-howto-single__body { max-width: var(--container-narrow); margin-inline: auto; }
.focofy-howto-single--width-wide   .focofy-howto-single__body { max-width: var(--container-wide); }

/* ── Split layout ───────────────────────────────────────────────── */
@container (min-width: 768px) {
    .focofy-howto-single--layout-split .focofy-howto-single__body   { flex-direction: row; align-items: flex-start; }
    .focofy-howto-single--layout-split .focofy-howto-single__media  { flex: 1 1 42%; max-width: 46%; }
    .focofy-howto-single--layout-split .focofy-howto-single__content { flex: 1 1 50%; }
    .focofy-howto-single--layout-split.is-media-right .focofy-howto-single__body { flex-direction: row-reverse; }
}

/* ── Dark mode ──────────────────────────────────────────────────── */
[data-bg="dark"] .focofy-howto-single__title      { color: var(--color-text-inverse); }
[data-bg="dark"] .focofy-howto-single__intro      { color: var(--color-text-inverse); opacity: .85; }
[data-bg="dark"] .focofy-howto-single__yield      { background: var(--color-surface-dark); color: var(--color-text-inverse); }
[data-bg="dark"] .focofy-howto-single__sub-title  { color: var(--color-text-inverse); }
[data-bg="dark"] .focofy-howto-single__step-name  { color: var(--color-text-inverse); }
[data-bg="dark"] .focofy-howto-single__step-text  { color: var(--color-text-inverse); opacity: .85; }
[data-bg="dark"] .focofy-howto-single__tools-list li,
[data-bg="dark"] .focofy-howto-single__supply-list li { background: var(--color-surface-dark); color: var(--color-text-inverse); }