/*------------------------------------------------------------------*\
    4. COMPONENTS - Button
\*------------------------------------------------------------------*/

/*
 * Naming convention — ITCSS + BEM (project-wide, reusable):
 *
 * ITCSS layers (specificity grows top → bottom):
 *   1. Settings   → CSS custom properties (helpers/vars.css). No output.
 *   2. Tools      → mixins / helpers. No output.
 *   3. Generic    → reset, normalize, box-sizing.
 *   4. Elements   → bare HTML element styles (typography.css).
 *   5. Objects    → layout patterns, no cosmetics.       prefix: .o-
 *   6. Components → cosmetic UI pieces.                  prefix: .c-
 *   7. Utilities  → single-purpose overrides, !important. prefix: .u-
 *
 * Class anatomy:
 *   .{layer}-{component}                 → base
 *     e.g. .c-button, .o-container, .u-hidden
 *
 *   .{layer}-{component}--{variant}      → modifier (BEM)
 *     e.g. .c-button--portfolio, .c-button--ghost
 *
 *   .{layer}-{component}__{element}      → child element (BEM)
 *     e.g. .c-button__icon, .c-button__label
 *
 *   .is-{state} / .has-{trait}           → JS-toggled state
 *     e.g. .is-active, .is-open, .has-icon
 *
 *   .js-{hook}                           → JS-only hook (never styled)
 *     e.g. .js-toggle, .js-filter
 *
 * Rules:
 *   - Layer prefix is mandatory (.c-, .o-, .u-) — tells you the role.
 *   - Prefer classes over IDs.
 *   - Lowercase, kebab-case only.
 */

/*------------------------------------------------------------------*\
    Base — simple button (default for this project)

    Selectors are doubled with `.c-button.elementor-button` to win
    specificity against Elementor's own `.elementor-button` defaults,
    while keeping `.c-button` on its own so plain (non-Elementor)
    markup still receives the styles.
\*------------------------------------------------------------------*/

.c-button,
.c-button .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--input-radius);
    font-family: var(--font-primary);
    font-size: var(--fluid-primary-button); /* 8px @390 → 10px @1920 → 12.51px @3840 */
    font-weight: var(--font-medium);       /* 500 */
    line-height: var(--line-height-200);   /* 2 → 20px on a 10px font */
    letter-spacing: 0.14em;                /* 1.4px on a 10px font */
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-base);
    border-radius: 10px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.06),       /* soft outer drop */
}

/*------------------------------------------------------------------*\
    Secondary button — glassmorphism

    Translucent white surface with a vertical gradient, blurred
    backdrop, soft outer shadow + inner top highlight to mimic a
    glass plate. Best when placed over a coloured / image background;
    over a flat white background the effect is intentionally subtle.

    Note on backdrop-filter: requires a non-opaque ancestor and is not
    supported in Firefox without a flag. Falls back gracefully to the
    gradient + border + shadow.
\*------------------------------------------------------------------*/


.c-secondary-button .elementor-button {
    /* layout + typography — mirrors .c-button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 96px;
    font-family: var(--font-primary);
    font-size: var(--fluid-primary-button); /* 8px → 10px → 12.51px */
    font-weight: var(--font-medium);
    line-height: var(--line-height-200);
    letter-spacing: 0.14em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-base);

    /* glass surface */
    color: var(--color-text-soft);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.35) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 10px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.06),       /* soft outer drop */
        inset 0 1px 0 rgba(255, 255, 255, 0.6); /* inner top highlight */
}

/* ── Hover de presença (sem cor) — mesma linguagem do .c-button ── */
.c-secondary-button:hover,
.c-secondary-button .elementor-button:hover {
    transform: translateY(-1px);
}
.c-secondary-button:active,
.c-secondary-button .elementor-button:active {
    transform: translateY(0);
}
.c-secondary-button:focus-visible,
.c-secondary-button .elementor-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .c-secondary-button:hover,
    .c-secondary-button:active,
    .c-secondary-button .elementor-button:hover,
    .c-secondary-button .elementor-button:active {
        transform: none;
    }
}

/*------------------------------------------------------------------*\
    Modifier: secondary — ghost (no background)

    Keeps the FULL glass effect of .c-secondary-button (blurred
    backdrop, rim border, outer drop + inner highlight) — the only
    difference is that the translucent fill is removed. Designed to
    sit over photos / video heroes (e.g. a "ver vídeo" trigger).

    Usage: <a class="c-secondary-button c-secondary-button--ghost">…</a>
    (the base class must stay — it carries layout, typography, the
    backdrop-filter and the glass shadow this modifier relies on.)
\*------------------------------------------------------------------*/

.c-secondary-button--ghost,
.c-secondary-button--ghost .elementor-button {
    background: none;
    /* Figma Glass — the effect lives on the BORDER: an even luminous
       rim all around + a soft inner top highlight (Light -45°/80%) and
       a faint bottom depth (Splay 0 → tight, low blur). The actual
       refraction / dispersion happens in the rim band via the SVG
       displacement applied at runtime by liquid-glass.js (the body
       stays clear — pure CSS cannot do the lensing). */
}

.c-secondary-button--ghost:hover,
.c-secondary-button--ghost:focus-visible,
.c-secondary-button--ghost .elementor-button:hover,
.c-secondary-button--ghost .elementor-button:focus-visible {
    /* keep the glass, no fill on hover either */
    background: none;
}

/* ── Hover de presença (sem cor) ──
   Modern "lift + soft shadow + slight scale" feedback that says
   "clicavel" without changing background/text colour. Active state
   snaps back, focus-visible adds a subtle outline for keyboards. */
.c-button:hover,
.c-button .elementor-button:hover {
    transform: translateY(-1px);
}
.c-button:active,
.c-button .elementor-button:active {
    transform: translateY(0);
}
.c-button:focus-visible,
.c-button .elementor-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .c-button:hover,
    .c-button:active,
    .c-button .elementor-button:hover,
    .c-button .elementor-button:active {
        transform: none;
    }
}

.c-button:disabled,
.c-button.is-disabled,
.c-button .elementor-button:disabled,
.c-button .elementor-button.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ── Modifier: outline ── */
.c-button--outline,
.c-button--outline .elementor-button {
    background-color: transparent;
    border-color: currentColor;
    color: var(--color-title);
}

.c-button--outline:hover,
.c-button--outline:focus-visible,
.c-button--outline .elementor-button:hover,
.c-button--outline .elementor-button:focus-visible {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

/*------------------------------------------------------------------*\
    Legacy variants — circle backdrop (kept from previous projects)

    Usage: <a class="c-button c-button--circle">…</a>
           <a class="c-button c-button--portfolio">…</a>

    These variants override the base layout to render text + icon on
    top of an offset circular pseudo-element. Originally shipped as
    `#miv-button` and `#miv-portfolio-button` (Elementor widget IDs).
\*------------------------------------------------------------------*/

:is(.c-button--circle, .c-button--portfolio) {
    position: relative;
    padding: 0;
    background-color: transparent;
    border: none;
}

:is(.c-button--circle, .c-button--portfolio)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    border-radius: 50%;
    background-color: var(--color-accent);
    opacity: 1;
    z-index: 0;
}

:is(.c-button--circle, .c-button--portfolio) .elementor-button-text {
    z-index: 2;
}

/* ── Variant: circle (small) ── */
.c-button--circle::before {
    transform: translate(14%, -50%);
    width: 46px;
    height: 46px;
}

/* ── Variant: portfolio (larger circle, bigger text) ── */
.c-button--portfolio::before {
    transform: translate(40%, -50%);
    width: 60px;
    height: 60px;
}

.c-button--portfolio .elementor-button-text {
    font-size: 18px;
}

.c-button--portfolio .elementor-button-icon {
    margin-left: 8px;
    margin-right: 0;
}

/* ---- Mobile ≤768px ---- */
@media (max-width: 768px) {

    .c-button--portfolio .elementor-button-text {
        font-size: 12px;
    }

    .c-button--portfolio::before {
        width: 36px;
        height: 36px;
    }

    .c-button--portfolio .elementor-button-icon svg,
    .c-button--portfolio .elementor-button-icon img,
    .c-button--portfolio .elementor-button-icon i {
        width: 12px;
    }

}