/**
 * Case Accordion Widget Styles v4
 *
 * Mobile-first. Gap uniforme entre blocos via --ca-gap-vertical em
 * .case-accordion__media e .case-accordion__bottom (não no container).
 * Desktop: duas colunas — info (esquerda, flex ajustável) e media (direita, 50% fixo).
 * Controle "Recuo Lateral Direito" zerado via CSS no desktop.
 * Controle "Largura da Área do Título" ignorado em .case-accordion__info no tablet/mobile.
 */

/* ==========================================
   VARIÁVEIS PADRÃO
   ========================================== */

:root {
    --ca-card-active:         74%;
    --ca-card-inactive:       16%;
    --ca-card-gap:            8px;
    --ca-transition-duration: 700ms;
    --ca-transition-timing:   cubic-bezier(0.4, 0, 0.2, 1);
    --ca-viewport-height:     522px;
    --ca-viewport-height-mob: 240px;
    --ca-gap-vertical:        0px;
    --ca-mobile-pr:           0px;
}

/* ==========================================
   RESET INTERNO
   ========================================== */

.case-accordion *,
.case-accordion *::before,
.case-accordion *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================
   CONTAINER — MOBILE FIRST
   Sem gap no container: o espaço entre info e media
   é controlado por info_min_height / padding.
   ========================================== */

.case-accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ==========================================
   INFO (título + número)

   Tablet/Mobile: row com justify-content: space-between.
   Título à esquerda (flex: 1; max-width via controle).
   Número à direita (flex: 0 0 --ca-card-inactive).
   O CSS anula qualquer injeção do Elementor em .case-accordion__info
   para garantir que a container fique sempre 100% wide.
   ========================================== */

.case-accordion__info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* Tablet/Mobile: neutraliza a injeção do controle header_width
   em .case-accordion__info — o max-width do título é tratado
   via .case-accordion__title-wrap separadamente. */
@media (max-width: 1024px) {
    .case-accordion__info {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0;
    }
}

.case-accordion__title-wrap {
    flex: 1 1 auto;
    min-width: 0;
    /* max-width injetada pelo controle header_width via Elementor */
}

.case-accordion__title {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    font-weight: 400;
    line-height: 1.15;
    text-transform: uppercase;
    animation: ca-fade-in-up 0.4s ease forwards;
}

/* Número: ocupa a largura do card inativo (alinha borda com card inativo no viewport) */
.case-accordion__index-display {
    flex: 0 0 var(--ca-card-inactive);
    text-align: left;
    font-family: inherit; /* fallback — sem !important para que o controle de tipografia do Elementor possa sobrescrever */
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 400;
    line-height: 1;
    font-optical-sizing: auto;
    font-variation-settings: 'opsz' 36;
    animation: ca-fade-in-up 0.4s ease 0.1s forwards;
    opacity: 0;
}

/* ==========================================
   COLUNA DE MÍDIA

   Gap entre viewport e .case-accordion__bottom
   via gap: var(--ca-gap-vertical).
   No tablet/mobile: gap também separa setas de resumo
   dentro de .case-accordion__bottom (flex-column).
   ========================================== */

.case-accordion__media {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ==========================================
   VIEWPORT + TRACK
   ========================================== */

.case-accordion__viewport {
    position: relative;
    width: 100%;
    height: var(--ca-viewport-height-mob);
    overflow: hidden;
    background: #f4f4f4;
}

.case-accordion__track {
    display: flex;
    gap: var(--ca-card-gap);
    height: 100%;
    transition: transform var(--ca-transition-duration) var(--ca-transition-timing);
    will-change: transform;
}

.case-accordion__item {
    position: relative;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    width: var(--ca-card-inactive);
    transition:
        width var(--ca-transition-duration) var(--ca-transition-timing),
        box-shadow 0.3s ease;
    will-change: width;
}

.case-accordion__item.is-active {
    width: var(--ca-card-active);
    z-index: 5;
}

.case-accordion__item:focus {
    outline: 3px solid currentColor;
    outline-offset: 2px;
    z-index: 10;
}

.case-accordion__link-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.case-accordion__image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #f4f4f4;
}

.case-accordion__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.case-accordion__item:hover .case-accordion__image img {
    transform: scale(1.03);
}

/* ==========================================
   BLOCO INFERIOR (setas + resumo)

   margin-top: espaço entre viewport e bloco inferior (desktop e mobile).
   gap: espaço entre setas e resumo (mobile/coluna; zero em desktop/row).
   ========================================== */

.case-accordion__bottom {
    display: flex;
    flex-direction: column;
    margin-top: var(--ca-gap-vertical);
    gap: var(--ca-gap-vertical);
    width: 100%;
}

/* Tablet/Mobile: setas com recuo direito */
.case-accordion__arrows {
    order: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-right: var(--ca-mobile-pr);
}

.case-accordion__arrow {
    width: 75px;
    height: 14px;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer;
    opacity: 1;
    color: #1a1a1a;
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.case-accordion__arrow:hover {
    opacity: 0.5;
}

.case-accordion__arrow svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.case-accordion__arrow svg polygon,
.case-accordion__arrow svg path {
    fill: inherit;
}

.case-accordion__arrow:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Tablet/Mobile: resumo com recuo direito, abaixo das setas */
.case-accordion__summary-box {
    order: 2;
    padding-right: var(--ca-mobile-pr);
}

.case-accordion__summary {
    font-size: clamp(0.8rem, 3.5vw, 0.9rem);
    line-height: 1.65;
    animation: ca-fade-in-up 0.4s ease 0.2s forwards;
    opacity: 0;
}

/* ==========================================
   ANIMAÇÕES
   ========================================== */

@keyframes ca-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   DESKTOP (≥ 1025px)

   Duas colunas com justify-content: space-between.
   Info (esquerda): flex ajustável via controle (fallback 45%).
   Media (direita): 50% fixo, independente de header_width.
   --ca-mobile-pr forçado a 0 (Recuo Lateral Direito inativo).
   info_min_height sobrescrito por height: var(--ca-viewport-height).
   ========================================== */

@media (min-width: 1025px) {

    /* Neutraliza --ca-mobile-pr no desktop (D) */
    .case-accordion {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        --ca-mobile-pr: 0px !important;
    }

    /* Coluna esquerda: altura sincronizada via --ca-viewport-computed-height (JS).
       Garante alinhamento vertical correto em qualquer breakpoint ≥1025px.
       Largura via controle Elementor (fallback 45%). min-height ignorado. */
    .case-accordion__info {
        flex: 0 0 45%;
        max-width: 45%;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        height: var(--ca-viewport-computed-height, 522px) !important;
        min-height: 0 !important;
    }

    .case-accordion__title {
        font-size: clamp(1.5rem, 3vw, 2.5rem);
    }

    /* Desktop: número sem flex-basis de card-inativo */
    .case-accordion__index-display {
        flex: 0 0 auto;
        text-align: left;
        font-family: inherit; /* fallback desktop — sobrescrito pelo controle de tipografia */
        font-size: clamp(3rem, 6vw, 5rem);
        font-variation-settings: 'opsz' 48;
        align-self: flex-start;
        margin-bottom: -4px;
    }

    /* Coluna direita: 50% fixo.
       Espaço viewport→bloco inferior via margin-top em .case-accordion__bottom. */
    .case-accordion__media {
        flex: 0 0 50%;
        width: 50%;
    }

    /* Viewport: width travada em no máximo 864px (referência) e nunca ultrapassa
       100% da coluna de mídia. aspect-ratio 864/522 determina a altura
       proporcionalmente em cada breakpoint — sem max-height para não quebrar
       a largura. height: auto sobrescreve o valor mobile fixo. */
    .case-accordion__viewport {
        width: min(100%, 864px);
        aspect-ratio: 864 / 522;
        height: auto;
    }

    /* Gap entre imagens: 8px no desktop */
    .case-accordion__track {
        gap: 8px;
    }

    /* Bloco inferior: row no desktop.
       margin-top: distância viewport→bloco (via --ca-gap-vertical).
       gap: 0 !important — sobrescreve qualquer gap injetado diretamente
       pelo controle gap_vertical no desktop. */
    .case-accordion__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0 !important;
    }

    /* Resumo: largura via --ca-summary-width (controle Elementor).
       Fallback = var(--ca-card-active). Não encolhe nem cresce. */
    .case-accordion__summary-box {
        order: 1;
        flex: 0 0 var(--ca-summary-width, var(--ca-card-active));
        width: var(--ca-summary-width, var(--ca-card-active));
        max-width: var(--ca-summary-width, var(--ca-card-active));
        padding-right: 0;
    }

    /* Bloco de navegação: 19,5% fixo à direita do bloco inferior.
       overflow: hidden garante que setas não extrapolem o container.
       justify-content: space-between → seta prev à esquerda, next à direita.
       Controle bottom_navigation_width sobrescreve flex com valor explícito. */
    .case-accordion__arrows {
        order: 2;
        flex: 0 0 19.5%;
        max-width: 19.5%;
        overflow: hidden;
        padding-right: 0;
        justify-content: space-between;
        gap: 0;
        padding-top: 2px;
    }

    /* Cada seta: base 75px, pode encolher (flex-shrink:1) quando o bloco de
       navegação tiver menos espaço. aspect-ratio preserva proporções do SVG.
       max-width: 45% impede que qualquer seta exceda metade do container,
       independentemente do valor definido pelo controle Tamanho das Setas.
       width: auto libera o width:75px da regra mobile base. */
    .case-accordion__arrow {
        width: auto;
        height: auto;
        flex: 0 1 75px;
        min-width: 16px;
        max-width: 45%;
        aspect-ratio: 75 / 14;
    }

    .case-accordion__summary {
        font-size: clamp(0.875rem, 1.4vw, 1rem);
    }
}

/* ==========================================
   GAP TABLET/MOBILE — card-gap menor
   + reset do controle bottom_navigation_width
   + proporção do viewport tablet/mobile
   ========================================== */

@media (max-width: 1024px) {
    :root {
        --ca-card-gap: 4px;
    }

    /* Anula qualquer flex ou width injetado pelo controle responsivo
       bottom_navigation_width que cascade do desktop.
       Elementor gera seletor com 3 classes = (0,3,0).
       Seletor abaixo usa 4 classes = (0,4,0), vence independente
       da ordem de carregamento. .elementor-widget está sempre presente
       no wrapper junto com .elementor-element e .elementor-widget-{name}. */
    .elementor-element.elementor-widget.elementor-widget-case_accordion .case-accordion__arrows {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Viewport: proporção 319.5×261 para tablet, mobile_extra e mobile.
       height: auto libera a altura fixa --ca-viewport-height-mob e deixa
       o aspect-ratio calcular a altura a partir da largura do container,
       comportamento idêntico ao desktop com 864/522.
       O controle Largura Card Ativo (%) e o Espaçamento Vertical Interno
       não são afetados — atuam em --ca-card-active e --ca-gap-vertical
       respectivamente, propriedades distintas do viewport. */
    .case-accordion__viewport {
        height: auto;
        aspect-ratio: 319.5 / 226;
    }
}

/* ==========================================
   ESTADOS
   ========================================== */

.case-accordion.is-initialized {
    opacity: 1;
}

.case-accordion__item.is-loading {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .case-accordion__item,
    .case-accordion__track,
    .case-accordion__image img,
    .case-accordion__arrow {
        transition-duration: 0.1ms !important;
        animation-duration:  0.1ms !important;
    }
}