/* Styzen r26 — refinamento mobile final para Blog e Vagas. */

/* Bloco editorial do Blog: um único card, sem mensagens duplicadas. */
.blog-about-r26,
.styzen-blog-mission-static.blog-about-r26{
  width:min(calc(100% - 40px),1120px)!important;
  margin:34px auto 46px!important;
  padding:26px 28px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:26px!important;
  border:1px solid rgba(126,166,218,.24)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,rgba(15,45,83,.72),rgba(7,26,51,.86))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.14)!important;
}
.blog-about-r26__copy{min-width:0;max-width:820px}
.blog-about-r26__eyebrow{
  display:block;margin:0 0 7px;color:var(--accent);font-size:.7rem;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase
}
.blog-about-r26 h2{margin:0 0 10px!important;font-size:clamp(1.45rem,2.4vw,2rem)!important;line-height:1.12!important}
.blog-about-r26 p{margin:0!important;color:var(--muted)!important;line-height:1.7!important;font-size:.94rem!important}
.blog-about-r26__quality{margin-top:8px!important}
.blog-about-r26__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.blog-about-r26__actions a{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 15px;
  border-radius:10px;font-size:.8rem;font-weight:900;text-decoration:none!important;white-space:nowrap
}
.blog-about-r26__actions a:first-child{color:#fff;background:var(--accent-strong);border:1px solid var(--accent-strong)}
.blog-about-r26__actions a:last-child{color:var(--accent);background:transparent;border:1px solid var(--accent)}
.styzen-blog-mission-r25{display:none!important}

@media(max-width:720px){
  /* Cabeçalho compacto: logo maior à esquerda e menu alinhado à direita. */
  .top{position:sticky!important;top:0!important}
  .top-main{
    width:100%!important;max-width:none!important;min-height:74px!important;
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;
    gap:8px!important;padding:0 14px!important;margin:0!important
  }
  .top-main .brand,
  .brand{
    width:118px!important;min-width:118px!important;height:70px!important;flex:0 0 118px!important;
    margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;
    overflow:hidden!important
  }
  .top-main .brand img,
  .brand img{
    display:block!important;width:108px!important;min-width:108px!important;height:82px!important;
    max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important;
    transform:translate(-7px,-1px) scale(2.55)!important;transform-origin:50% 46%!important;
    filter:saturate(1.5) contrast(1.18) brightness(1.14) drop-shadow(0 4px 9px rgba(0,0,0,.18))!important
  }
  html[data-theme="light"] .top-main .brand img,
  html[data-theme="light"] .brand img{
    filter:saturate(1.3) contrast(1.1) brightness(.98) drop-shadow(0 3px 8px rgba(8,40,79,.11))!important
  }
  .menu-toggle{
    position:static!important;display:inline-flex!important;flex:0 0 46px!important;width:46px!important;height:46px!important;
    margin:0!important;padding:10px!important;align-items:center!important;justify-content:center!important;
    border-radius:12px!important;background:var(--surface-2)!important;border:1px solid var(--line-strong)!important;
    box-shadow:0 8px 18px rgba(0,0,0,.12)!important
  }
  .menu-toggle span{width:24px!important;height:2px!important;margin:3px auto!important}
  .top-navigation{
    order:3!important;width:100%!important;flex:0 0 100%!important;margin:0!important;
    padding:8px 0 14px!important;border-top:1px solid var(--line)!important
  }
  .top-navigation:not(.is-open){display:none!important}
  .top-navigation.is-open{display:flex!important;flex-direction:column!important}

  /* Cards ocupam melhor a tela e as imagens deixam de parecer miniaturas perdidas. */
  .story,
  .job-row{
    grid-template-columns:1fr!important;gap:13px!important;padding:19px 0!important;align-items:start!important
  }
  .story-thumb,
  .job-thumb{
    width:100%!important;height:190px!important;aspect-ratio:auto!important;display:block!important;
    overflow:hidden!important;border-radius:12px!important;border:1px solid var(--line)!important;
    background:linear-gradient(145deg,var(--surface),var(--surface-2))!important
  }
  .story-thumb img{
    width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;object-position:center!important;
    padding:0!important;transform:none!important
  }
  .job-thumb img{
    width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;object-position:center!important;
    padding:8px!important;transform:scale(1.12)!important;transform-origin:center!important
  }
  .job-row>a:not(.job-thumb){grid-column:1!important;justify-self:start!important;margin-top:2px!important}
  .story h3,.job-row h3{font-size:1.2rem!important;line-height:1.18!important}

  .job-feature-media,
  .editorial-feature .job-feature-media,
  .story-card>a:first-child{
    width:100%!important;height:188px!important;aspect-ratio:auto!important;overflow:hidden!important;
    background:linear-gradient(145deg,var(--surface),var(--surface-2))!important
  }
  .job-feature-media img{
    width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;
    padding:7px!important;transform:scale(1.1)!important
  }
  .editorial-feature .job-feature-media img,
  .story-card>a:first-child img{
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;
    padding:0!important;transform:none!important
  }
  .story-card{overflow:hidden!important}
  .story-card>div{padding-top:12px!important}

  .article{width:min(calc(100% - 28px),900px)!important;padding-top:28px!important}
  .article figure{margin-left:0!important;margin-right:0!important}
  .article figure img,.article .media img{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}

  /* Bloco Sobre o Blog vira um card compacto e fácil de ler no celular. */
  .blog-about-r26,
  .styzen-blog-mission-static.blog-about-r26{
    width:calc(100% - 28px)!important;margin:24px auto 34px!important;padding:18px!important;
    grid-template-columns:1fr!important;gap:16px!important;border-radius:15px!important
  }
  .blog-about-r26 h2{font-size:1.35rem!important}
  .blog-about-r26 p{font-size:.88rem!important;line-height:1.65!important}
  .blog-about-r26__actions{justify-content:stretch!important;display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .blog-about-r26__actions a{width:100%!important;min-height:44px!important}
}

@media(max-width:420px){
  .top-main{padding-inline:12px!important}
  .top-main .brand,.brand{width:108px!important;min-width:108px!important;flex-basis:108px!important}
  .top-main .brand img,.brand img{width:100px!important;min-width:100px!important;height:78px!important;transform:translate(-7px,-1px) scale(2.45)!important}
  .story-thumb,.job-thumb,.job-feature-media,.editorial-feature .job-feature-media,.story-card>a:first-child{height:172px!important}
}