/* Case LIBERÔ: Figma 609:120, 507:205, 507:208 e 610:136.
   Regras exclusivas do Case; a Home não carrega este arquivo. */
:root {
    --case-color-text: #000;
    --case-color-muted: #595856;
    --case-page-gutter: 16px;
}

html { scroll-behavior: smooth; }

body {
    background: var(--color-clear-white);
    color: var(--case-color-text);
    font-family: var(--font-helvetica);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.case-sr-only,
.case-skip:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.case-skip:focus {
    position: fixed;
    inset: 16px auto auto 16px;
    z-index: 2;
    padding: 12px;
    background: var(--color-clear-white);
    color: var(--color-link-on-light);
}

a:focus-visible,
video:focus-visible {
    outline: 2px solid var(--color-vivid-red);
    outline-offset: 4px;
}

.case-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 32px;
    min-height: 144px;
    padding: 32px var(--case-page-gutter);
}

.case-header__brand,
.case-header__brand img {
    display: block;
    width: 48px;
    height: 48px;
}

.case-header__links {
    display: flex;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.case-header__links a,
.case-back {
    color: var(--color-link-on-light);
    font-family: var(--font-operetta);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: underline solid 4%;
    text-underline-position: from-font;
}

@media (hover: hover) and (pointer: fine) {
    .case-header__links a,
    .case-back { transition: color 200ms ease; }

    .case-header__links a:hover,
    .case-back:hover { color: var(--color-link-hover); }
}

/* Hero: 507:340 (desktop) e 507:184 (mobile). Conteúdo desktop em todas as telas. */
.case-hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 1200px;
    margin: 126px var(--case-page-gutter) 0;
}

.case-hero__content,
.case-hero__text,
.case-hero__detail {
    display: flex;
    flex-direction: column;
}

.case-hero__content { gap: 40px; }
.case-hero__text { gap: 16px; max-width: 1134px; }
.case-hero h1,
.case-hero p,
.case-hero dd { margin: 0; }

.case-hero h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 35.2px;
}

.case-hero__description {
    font-size: 24px;
    line-height: 26.4px;
}

.case-hero__image,
.case-hero__image img {
    display: block;
    width: 100%;
}

.case-hero__image img { height: auto; }

.case-hero__details {
    display: grid;
    gap: 81px;
    margin: 0;
    padding: 0;
    line-height: normal;
}

.case-hero__detail { min-width: 0; gap: 16px; }
.case-hero__detail--date { width: 105px; }
.case-hero__detail--role { width: 129px; }
.case-hero__detail--tools { width: min(272px, 100%); }
.case-hero dt { color: var(--case-color-muted); font-weight: 700; }
.case-hero__detail--tools dd,
.case-hero__detail--scope dd { font-size: 14px; }
.case-hero__detail--scope p + p { margin-top: 6px; }

/* Sem referência de tablet: dois grupos por linha, sem estreitar o Escopo.
   A partir de 80rem cabem as quatro colunas e os intervalos desktop de 81px. */
@media (min-width: 48rem) {
    .case-hero { min-height: 0; }
    .case-hero__details { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}

@media (min-width: 80rem) {
    .case-hero { min-height: 1060px; }
    .case-hero__details { grid-template-columns: 105px 129px 272px minmax(0, 1fr); }
}

.case-layout {
    margin: 240px var(--case-page-gutter) 80px;
}

.case-sidebar { display: none; }
.case-content { min-width: 0; }
.case-section { scroll-margin-top: 32px; }

.case-section,
.case-text-group,
.case-context,
.case-question {
    display: flex;
    flex-direction: column;
}

.case-section { gap: 48px; }
.case-text-group,
.case-context { gap: 16px; }

.case-content h2,
.case-content p { margin: 0; }

.case-content h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
}

.case-content strong { font-weight: 700; }

.case-context__baggage {
    aspect-ratio: 380 / 178;
    overflow: hidden;
}

.case-context__baggage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-context__culture {
    position: relative;
    aspect-ratio: 380 / 100;
    overflow: hidden;
}

.case-context__culture img {
    position: absolute;
    top: -47.75%;
    left: 1.2%;
    width: 100%;
    max-width: none;
    height: 214.53%;
}

.case-question { gap: 32px; }

.case-question > p:first-child { line-height: normal; }

.case-question__statement {
    font-size: 32px;
    font-weight: 300;
    line-height: normal;
}

/* Diagnóstico e Conflito: 507:361/472 (desktop), 507:219/222 (mobile).
   Alturas de texto naturais preservam a leitura sem recortes em telas menores. */
.case-diagnosis { margin-top: 48px; }

.case-diagnosis__copy,
.case-conflict,
.case-conflict__body {
    display: flex;
    flex-direction: column;
}

.case-diagnosis__copy,
.case-conflict__body { gap: 24px; }
.case-conflict { gap: 16px; }

.case-conflict h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
}

.case-conflict__quote {
    margin: 0;
    font-size: 24px;
    font-weight: 300;
    line-height: normal;
}

.case-conflict__insight { line-height: normal; }
.case-conflict__period { font-size: 24px; }

.case-conflict__image {
    position: relative;
    aspect-ratio: 380 / 240;
    overflow: hidden;
}

.case-conflict__image img {
    position: absolute;
    top: 0;
    left: -13.83%;
    width: 112.09%;
    max-width: none;
    height: 100%;
}

@media (min-width: 64rem) {
    .case-diagnosis {
        margin-top: 51px;
        gap: 51px;
    }

    .case-conflict__image { aspect-ratio: 824 / 517; }
}

/* 48rem mantém as margens desktop do projeto. Sem menu em tablets.
   Textos crescem com o conteúdo, evitando as caixas fixas do protótipo. */
@media (min-width: 48rem) {
    :root { --case-page-gutter: 100px; }
}

/* 64rem permite menu e leitura lado a lado. Em 1440: menu x=100,
   conteúdo x=520/largura 824. A coluna encolhe nas larguras intermediárias.
   Após a Hero, 160px até o menu e mais 80px até o Contexto. */
@media (min-width: 64rem) {
    .case-layout {
        display: grid;
        grid-template-columns: minmax(138px, 1fr) minmax(0, 824px);
        column-gap: clamp(48px, 19.583333vw, 282px);
        align-items: start;
        margin-top: 160px;
        margin-right: 96px;
    }

    .case-sidebar {
        position: sticky;
        top: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        width: 138px;
        /* O texto pode ultrapassar a caixa de linha sem criar um scrollport.
           Barras internas reduziriam os 138px e cortariam o nav centralizado. */
    }

    .case-back {
        display: flex;
        align-items: center;
        gap: 4px;
        text-decoration: none;
    }

    .case-back__icon {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        background-color: currentColor;
        mask: url("../icons/libero-voltar.svg") center / 5px 10px no-repeat;
    }

    /* O SVG original mantém sua geometria e acompanha a cor do link. */
    .case-back__icon img { visibility: hidden; }

    .case-back__label {
        padding: 10px 10px 10px 0;
        text-decoration: underline solid 4%;
    }

    .case-menu {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 138px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .case-menu a {
        display: block;
        color: var(--case-color-muted);
        font-size: 24px;
        font-weight: 700;
        line-height: 24px;
        text-decoration: none;
    }

    .case-menu a[aria-current="location"] { color: var(--color-vivid-red); }
    .case-menu a[aria-disabled="true"] { cursor: default; }
    .case-content { padding-top: 80px; }
    .case-context__baggage { aspect-ratio: 824 / 384; }
    .case-context__culture { aspect-ratio: 824 / 215; }
}

/* Os 420px do menu mais as margens de 32px precisam caber na viewport.
   Abaixo disso, todos os itens seguem acessíveis pela rolagem da página. */
@media (min-width: 64rem) and (max-height: 483px) {
    .case-sidebar { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .case-header__links a,
    .case-back { transition: none; }
}

/* Decisão: 609:121 (desktop), 507:230/237 (composição mobile).
   Texto desktop único; caixas de texto crescem naturalmente. */
.case-decision { margin-top: 48px; }

.case-decision__body,
.case-decision__tradeoffs,
.case-decision__tradeoff {
    display: flex;
    flex-direction: column;
}

.case-decision__body { gap: 32px; }
.case-decision__reframing > p:first-child { line-height: 24px; }

.case-decision__criteria h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
}

.case-decision__tradeoffs {
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.case-decision__tradeoff { gap: 8px; }

.case-decision__tradeoff h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
}

@media (min-width: 64rem) {
    .case-decision { margin-top: 51px; }
    .case-decision__reframing > p:first-child { line-height: normal; }
}

/* Solução: 609:122 (desktop), 507:252/257/267/280 (composição mobile).
   Intervalos de Auto Layout preservados; textos sem limites de altura. */
.case-solution { margin-top: 48px; }

.case-solution__copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.case-solution h2 { line-height: normal; }

.case-solution h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
}

.case-solution__platform { aspect-ratio: 380 / 209; }

.case-solution__platform img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vídeos originais: slots FILL do Figma, com recorte central proporcional. */
.case-solution__video {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 380 / 255;
    object-fit: cover;
}

.case-solution__video--sets { aspect-ratio: 380 / 249; }
.case-solution__video--reservation { width: calc(100% - 1px); aspect-ratio: 379 / 247; }

.case-solution__options {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 6px 5px;
    aspect-ratio: 380 / 636;
}

.case-solution__options .case-solution__video {
    min-height: 0;
    height: 100%;
    aspect-ratio: auto;
}

.case-solution__video--details { grid-column: 1 / -1; }

@media (min-width: 64rem) {
    .case-solution { margin-top: 51px; }
    .case-solution__platform { aspect-ratio: 824 / 450; }
    .case-solution__video { aspect-ratio: 824 / 550; }
    .case-solution__video--first { aspect-ratio: 824 / 551; }
    .case-solution__video--sets,
    .case-solution__video--reservation { aspect-ratio: 824 / 536; }
    .case-solution__video--reservation { width: 100%; }
    .case-solution__options { aspect-ratio: 824 / 1369; }
}

/* Estratégia e estrutura do serviço: 507:419/422 (desktop), 507:285/288 (mobile).
   Textos desktop únicos, com alturas naturais e os intervalos do Auto Layout. */
.case-strategy { margin-top: 48px; }

.case-strategy__copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.case-strategy h2,
.case-strategy h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
}

@media (min-width: 64rem) {
    .case-strategy { margin-top: 51px; gap: 51px; }
}

/* Wireframes: 507:425 (desktop), 507:291 (composição mobile).
   Composições originais estáticas; o texto segue a referência desktop. */
.case-wireframes { margin-top: 48px; }
.case-wireframes h2 { line-height: normal; }

.case-wireframes__exploration,
.case-wireframes__rationale,
.case-wireframes__copy {
    display: flex;
    flex-direction: column;
}

.case-wireframes__exploration,
.case-wireframes__rationale { gap: 32px; }
.case-wireframes__copy { gap: 24px; }

.case-wireframes__image {
    min-height: 0;
    aspect-ratio: 380 / 221;
}

.case-wireframes__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 64rem) {
    .case-wireframes { margin-top: 51px; }
    .case-wireframes__image--comparison { aspect-ratio: 824 / 475; }
    .case-wireframes__image--motives { aspect-ratio: 824 / 476; }
}

/* Direção de marca: bloco independente 507:435/301, sem item no menu. */
.case-brand { margin-top: 48px; }
.case-brand h2 { line-height: normal; }

.case-brand__image {
    min-height: 0;
    aspect-ratio: 380 / 213;
}

.case-brand__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-brand__insight {
    align-self: center;
    width: 100%;
    max-width: 817px;
}

@media (min-width: 64rem) {
    .case-brand { margin-top: 51px; }
    .case-brand__image { aspect-ratio: 824 / 460; }
}

/* Resultados 507:443/309 e bloco independente Limitações 507:446/312.
   Preserva a redação acadêmica desktop e as alturas naturais dos textos. */
.case-results,
.case-limitations {
    gap: 16px;
    margin-top: 48px;
}

.case-results h2,
.case-limitations h2 { line-height: normal; }

@media (min-width: 64rem) {
    .case-results,
    .case-limitations { margin-top: 51px; }
}

/* Futuro: 609:123 (desktop), 507:315/318 (composição mobile).
   Hipóteses e impacto esperado, com redação desktop e alturas naturais. */
.case-future { margin-top: 48px; }

.case-future h2,
.case-future h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
}

.case-future__steps h2 { max-width: 819px; }

@media (min-width: 64rem) {
    .case-future { margin-top: 51px; }
}

/* Conclusão: 507:455 (desktop) e 507:321 (composição mobile).
   Textos e destaques desktop, sem limitar a altura dos parágrafos. */
.case-conclusion {
    gap: 16px;
    margin-top: 48px;
}

.case-conclusion h2 { line-height: normal; }

@media (min-width: 64rem) {
    .case-conclusion { margin-top: 51px; }
}

/* Footer independente: 507:480/324. Intervalo após o conteúdo, sem
   compensar as diferenças naturais de altura dos textos anteriores. */
.case-layout { margin-bottom: 488px; }
.case-footer {
    min-height: 415px;
    padding-bottom: 27px;
}

@media (min-width: 64rem) {
    .case-layout { margin-bottom: 475px; }
    .case-footer {
        min-height: 204px;
        padding-bottom: 32px;
    }
}