/*
=====================================================================
MO PREMIUM LAYOUT EXPANSION
Hotfix 2.4.0
Ajustes globais de largura útil, hero e espaçamento visual.
=====================================================================
*/

:root{
  --mo-container:1440px;
  --mo-container-wide:1480px;
  --mo-container-narrow:1080px;
  --mo-page-gutter:56px;
  --mo-section-padding:96px;
  --mo-section-padding-lg:112px;
  --mo-hero-height:640px;
}

/* Container global mais amplo */
.container,
.mo-detail-container,
.mo-admin-public-container{
  width:min(var(--mo-container), calc(100% - var(--mo-page-gutter))) !important;
  max-width:var(--mo-container) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.mo-container-wide,
.mo-catalog-page .container,
.mo-detail-container{
  width:min(var(--mo-container-wide), calc(100% - var(--mo-page-gutter))) !important;
  max-width:var(--mo-container-wide) !important;
}

/* Header com mais folga para o menu */
.mo-topbar-inner,
.mo-header-inner{
  width:min(var(--mo-container-wide), calc(100% - var(--mo-page-gutter))) !important;
  max-width:var(--mo-container-wide) !important;
}

.mo-header-inner{
  min-height:88px;
  gap:34px;
}

.mo-brand-principal{
  max-height:70px;
  width:auto;
}

.mo-menu{
  gap:34px;
  justify-content:center;
}

.mo-menu > li > a{
  white-space:nowrap;
  letter-spacing:.02em;
}

.mo-whatsapp{
  white-space:nowrap;
  padding-left:22px;
  padding-right:22px;
}

/* Hero principal mais amplo e imponente */
.mo-hero,
.hero{
  min-height:var(--mo-hero-height) !important;
}

.mo-hero-bg,
.hero{
  background-position:center center !important;
}

.mo-hero-overlay,
.hero-overlay{
  background:linear-gradient(90deg, rgba(7,12,24,.84) 0%, rgba(10,18,32,.58) 43%, rgba(10,18,32,.14) 100%) !important;
}

.mo-hero-content,
.hero-content{
  max-width:720px !important;
}

.mo-hero h1,
.hero h1{
  max-width:720px !important;
  font-size:clamp(42px, 4.25vw, 68px) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em;
}

.mo-hero p,
.hero p{
  max-width:640px !important;
  font-size:clamp(17px, 1.25vw, 21px) !important;
  line-height:1.65 !important;
}

/* Sangria/folga entre Hero e módulo de busca */
.main-content{
  margin-top:0 !important;
}

.mo-search-section{
  position:relative;
  z-index:5;
  margin-top:-56px !important;
  margin-bottom:64px !important;
}

.mo-search-box{
  border-radius:28px !important;
  padding:34px !important;
  box-shadow:0 28px 80px rgba(15,23,42,.14) !important;
  border:1px solid rgba(226,232,240,.92) !important;
}

.mo-search-title{
  margin-bottom:26px !important;
}

.mo-search-form{
  gap:16px !important;
}

.mo-search-form input,
.mo-search-form select{
  height:56px !important;
  border-radius:16px !important;
}

.mo-search-form button{
  height:56px !important;
  border-radius:16px !important;
}

/* Seções com ritmo visual mais premium */
.mo-categories,
.mo-stats,
.mo-featured,
.featured,
.mo-why,
.benefits,
.mo-benefits,
.mo-cta,
.mo-cta-section,
.mo-catalog-benefits{
  padding-top:var(--mo-section-padding) !important;
  padding-bottom:var(--mo-section-padding) !important;
}

.mo-section-head{
  margin-bottom:44px !important;
}

.mo-section-head h2{
  font-size:clamp(30px, 2.4vw, 44px) !important;
  letter-spacing:-.035em;
}

.mo-section-head p{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

/* Categorias e cards com mais respiro */
.mo-categories-grid{
  gap:22px !important;
}

.mo-category-card,
.mo-categories-grid a,
.categories-grid a{
  min-height:112px;
  border-radius:22px !important;
}

.mo-stats{
  margin-top:0 !important;
}

.mo-stats-grid{
  gap:22px !important;
}

/* Catálogo */
.mo-catalog-page{
  padding-top:38px !important;
}

.mo-catalog-page-header{
  padding-top:38px !important;
  padding-bottom:34px !important;
}

.mo-catalog-layout{
  gap:34px !important;
  align-items:start;
}

.mo-catalog-results{
  min-width:0;
}

.mo-vehicle-grid,
.vehicle-grid{
  gap:28px !important;
}

.mo-vehicle-card,
.vehicle-card{
  border-radius:24px !important;
}

/* Página do veículo */
.mo-detail-shell{
  padding-top:36px !important;
}

.mo-detail-marketplace-layout{
  grid-template-columns:minmax(0, 1fr) 420px !important;
  gap:38px !important;
}

.mo-detail-main-column,
.mo-detail-side-column{
  min-width:0;
}

.mo-detail-gallery-main,
.mo-detail-hero-media,
.mo-detail-gallery{
  border-radius:28px !important;
}

/* Institucionais */
.mo-institutional-page .container,
.mo-page-shell .container{
  width:min(var(--mo-container), calc(100% - var(--mo-page-gutter))) !important;
  max-width:var(--mo-container) !important;
}

/* Ajustes responsivos */
@media (max-width:1280px){
  :root{
    --mo-container:1240px;
    --mo-container-wide:1280px;
    --mo-page-gutter:40px;
    --mo-hero-height:590px;
  }
  .mo-menu{gap:22px;}
  .mo-detail-marketplace-layout{grid-template-columns:minmax(0,1fr) 380px !important;}
}

@media (max-width:980px){
  :root{
    --mo-page-gutter:28px;
    --mo-section-padding:72px;
    --mo-hero-height:520px;
  }
  .mo-header-inner{min-height:78px;}
  .mo-brand-principal{max-height:58px;}
  .mo-search-section{margin-top:-34px !important;margin-bottom:48px !important;}
  .mo-search-box{padding:26px !important;border-radius:24px !important;}
  .mo-detail-marketplace-layout{grid-template-columns:1fr !important;}
}

@media (max-width:640px){
  :root{
    --mo-page-gutter:22px;
    --mo-section-padding:56px;
    --mo-hero-height:460px;
  }
  .container,
  .mo-detail-container,
  .mo-catalog-page .container{
    width:min(100% - var(--mo-page-gutter), 100%) !important;
  }
  .mo-hero h1,
  .hero h1{font-size:34px !important;}
  .mo-hero p,
  .hero p{font-size:16px !important;}
  .mo-search-section{margin-top:24px !important;}
  .mo-search-box{padding:22px !important;}
  .mo-categories,
  .mo-stats,
  .mo-featured,
  .featured,
  .mo-why,
  .benefits,
  .mo-benefits,
  .mo-cta,
  .mo-cta-section,
  .mo-catalog-benefits{
    padding-top:52px !important;
    padding-bottom:52px !important;
  }
}