/**
 * Clube de Casa — Base Components
 * F2.6
 */

.cdc-button,
.cdc-link-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--wp--custom--radius--md, 0.625rem);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    gap: var(--wp--preset--spacing--xs, 0.5rem);
    justify-content: center;
    line-height: 1.2;
    min-block-size: var(--wp--custom--touch-target, 2.75rem);
    padding: 0.7rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--wp--custom--motion--base, 180ms) ease,
        border-color var(--wp--custom--motion--base, 180ms) ease,
        color var(--wp--custom--motion--base, 180ms) ease,
        transform var(--wp--custom--motion--fast, 120ms) ease;
}

.cdc-button:hover,
.cdc-link-button:hover {
    text-decoration: none;
}

.cdc-button:active,
.cdc-link-button:active {
    transform: translateY(1px);
}

.cdc-button:disabled,
.cdc-button[aria-disabled="true"],
.cdc-link-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.58;
    pointer-events: none;
}

.cdc-button--primary,
.cdc-link-button--primary {
    background: var(--wp--preset--color--brand-main, #2f6b57);
    color: var(--wp--preset--color--surface, #fff);
}

.cdc-button--primary:hover,
.cdc-link-button--primary:hover {
    background: var(--wp--preset--color--brand-deep, #173b32);
    color: var(--wp--preset--color--surface, #fff);
}

.cdc-button--secondary,
.cdc-link-button--secondary {
    background: var(--wp--preset--color--surface, #fff);
    border-color: var(--wp--preset--color--brand-main, #2f6b57);
    color: var(--wp--preset--color--brand-deep, #173b32);
}

.cdc-button--quiet,
.cdc-link-button--quiet {
    background: transparent;
    color: var(--wp--preset--color--brand-deep, #173b32);
}

.cdc-button--sm,
.cdc-link-button--sm {
    min-block-size: 2.5rem;
    padding: 0.55rem 0.8rem;
}

.cdc-button--lg,
.cdc-link-button--lg {
    min-block-size: 3rem;
    padding: 0.85rem 1.2rem;
}

.cdc-text-link {
    align-items: baseline;
    display: inline-flex;
    gap: 0.35em;
    font-weight: 650;
}

.cdc-badge {
    align-items: center;
    background: var(--wp--preset--color--brand-soft, #ddeae4);
    border-radius: var(--wp--custom--radius--pill, 999px);
    color: var(--wp--preset--color--brand-deep, #173b32);
    display: inline-flex;
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    font-weight: 700;
    line-height: 1.2;
    min-block-size: 1.75rem;
    padding: 0.25rem 0.65rem;
}

.cdc-badge--warm {
    background: var(--wp--preset--color--accent-soft, #f3e2d9);
    color: var(--wp--preset--color--ink, #1e2623);
}

.cdc-badge--neutral {
    background: var(--wp--preset--color--canvas, #f7f5ef);
    border: 1px solid var(--wp--preset--color--line, #d7deda);
    color: var(--wp--preset--color--ink-muted, #5f6b66);
}

.cdc-card {
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--wp--preset--color--line, #d7deda);
    border-radius: var(--wp--custom--radius--lg, 1rem);
    box-shadow: var(--wp--custom--shadow--sm, 0 1px 2px rgba(23, 59, 50, 0.08));
    padding: var(--wp--preset--spacing--lg, 1.5rem);
}

.cdc-card__title {
    margin: 0;
}

.cdc-card__body {
    color: var(--wp--preset--color--ink-muted, #5f6b66);
}

.cdc-icon {
    align-items: center;
    block-size: 1em;
    display: inline-flex;
    flex: 0 0 auto;
    inline-size: 1em;
    justify-content: center;
    line-height: 1;
}

.cdc-icon > svg,
.cdc-icon > img {
    block-size: 100%;
    inline-size: 100%;
}

.cdc-field {
    display: grid;
    gap: var(--wp--preset--spacing--xs, 0.5rem);
}

.cdc-field__label {
    color: var(--wp--preset--color--ink, #1e2623);
    font-weight: 700;
}

.cdc-field__hint,
.cdc-field__error {
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    margin: 0;
}

.cdc-field__hint {
    color: var(--wp--preset--color--ink-muted, #5f6b66);
}

.cdc-field__error {
    color: #8a2f2f;
    font-weight: 650;
}

.cdc-control {
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--wp--preset--color--line, #d7deda);
    border-radius: var(--wp--custom--radius--md, 0.625rem);
    color: var(--wp--preset--color--ink, #1e2623);
    font: inherit;
    inline-size: 100%;
    min-block-size: var(--wp--custom--touch-target, 2.75rem);
    padding: 0.7rem 0.8rem;
}

textarea.cdc-control {
    min-block-size: 8rem;
    resize: vertical;
}

.cdc-control[aria-invalid="true"] {
    border-color: #8a2f2f;
}

.cdc-tabs {
    border-block-end: 1px solid var(--wp--preset--color--line, #d7deda);
    display: flex;
    gap: var(--wp--preset--spacing--xs, 0.5rem);
    max-inline-size: 100%;
    overflow-x: auto;
}

.cdc-tabs__link {
    border-block-end: 0.1875rem solid transparent;
    color: var(--wp--preset--color--ink-muted, #5f6b66);
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 700;
    min-block-size: var(--wp--custom--touch-target, 2.75rem);
    padding: 0.7rem 0.25rem 0.55rem;
    text-decoration: none;
}

.cdc-tabs__link[aria-current="page"] {
    border-block-end-color: var(--wp--preset--color--brand-main, #2f6b57);
    color: var(--wp--preset--color--brand-deep, #173b32);
}

.cdc-dialog,
.cdc-drawer {
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--wp--preset--color--line, #d7deda);
    color: var(--wp--preset--color--ink, #1e2623);
    margin: auto;
    max-inline-size: min(42rem, calc(100% - (2 * var(--cdc-page-gutter))));
    padding: var(--wp--preset--spacing--lg, 1.5rem);
}

.cdc-dialog {
    border-radius: var(--wp--custom--radius--lg, 1rem);
}

.cdc-dialog::backdrop,
.cdc-drawer::backdrop {
    background: rgb(30 38 35 / 52%);
}

.cdc-drawer {
    block-size: 100%;
    inline-size: min(24rem, 92vw);
    margin: 0 0 0 auto;
    max-block-size: 100%;
}

.cdc-toast {
    background: var(--wp--preset--color--ink, #1e2623);
    border-radius: var(--wp--custom--radius--md, 0.625rem);
    box-shadow: var(--wp--custom--shadow--md, 0 8px 24px rgba(23, 59, 50, 0.10));
    color: var(--wp--preset--color--surface, #fff);
    max-inline-size: min(28rem, calc(100vw - (2 * var(--cdc-page-gutter))));
    padding: var(--wp--preset--spacing--md, 1rem);
}

.cdc-skeleton {
    animation: cdc-skeleton-pulse 1.6s ease-in-out infinite;
    background: var(--wp--preset--color--brand-soft, #ddeae4);
    border-radius: var(--wp--custom--radius--sm, 0.375rem);
    min-block-size: 1em;
}

.cdc-skeleton[aria-hidden="true"] {
    user-select: none;
}

.cdc-state {
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--wp--preset--color--line, #d7deda);
    border-radius: var(--wp--custom--radius--lg, 1rem);
    padding: var(--wp--preset--spacing--xl, 2rem);
    text-align: center;
}

.cdc-state__title {
    margin-block: 0 var(--wp--preset--spacing--xs, 0.5rem);
}

.cdc-state__message {
    color: var(--wp--preset--color--ink-muted, #5f6b66);
    margin: 0;
}

@keyframes cdc-skeleton-pulse {
    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cdc-button,
    .cdc-link-button,
    .cdc-skeleton {
        animation: none;
        transition: none;
    }
}


/* Reusable search form — F2.12 */
.cdc-search-form {
    display: grid;
    gap: 0.5rem;
}

.cdc-search-form__label {
    font-weight: 750;
}

.cdc-search-form__controls {
    align-items: stretch;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
}

.cdc-search-form__input {
    inline-size: 100%;
}

@media (min-width: 38rem) {
    .cdc-search-form__controls {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}


/* Shared pagination — consolidated in F2.15 */
.cdc-pagination {
    border-block-start: 1px solid var(--wp--preset--color--line, #d7deda);
    margin-block-start: clamp(1.25rem, 4vw, 2rem);
    padding-block-start: clamp(1.25rem, 4vw, 2rem);
}

.cdc-pagination .nav-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cdc-pagination .page-numbers {
    align-items: center;
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--wp--preset--color--line, #d7deda);
    border-radius: var(--wp--custom--radius--sm, 0.375rem);
    color: var(--wp--preset--color--ink, #1e2623);
    display: inline-flex;
    justify-content: center;
    min-block-size: var(--wp--custom--touch-target, 2.75rem);
    min-inline-size: var(--wp--custom--touch-target, 2.75rem);
    padding-inline: 0.75rem;
    text-decoration: none;
}

.cdc-pagination a.page-numbers:hover {
    border-color: var(--wp--preset--color--brand-main, #2f6b57);
    color: var(--wp--preset--color--brand-main, #2f6b57);
    text-decoration: none;
}

.cdc-pagination .page-numbers.current {
    background: var(--wp--preset--color--brand-deep, #173b32);
    border-color: var(--wp--preset--color--brand-deep, #173b32);
    color: var(--wp--preset--color--surface, #fff);
    font-weight: 800;
}