/* ================================================================
   ACORDEAO HORIZONTAL - alojamentos
   Estrutura Uncode: row .qb-acc > inner rows .qb-panel,
   com .qb-title (heading) e .qb-text (text block) la dentro.

   Fechado : barra de cor com o titulo na vertical
   Aberto  : foto a esquerda + titulo NA HORIZONTAL + texto por baixo

   A fonte Space Mono e carregada pelo plugin (handle qb-acc-font).
   ================================================================ */

/* Row principal */
.qb-acc{
  --clay:#C77B54;

  /* altura total do acordeao
     O JS mede o espaco livre no ecra (descontando a bottombar) e
     escreve --qb-h-fit; o acordeao fica exatamente do tamanho do ecra
     e o texto que nao couber faz scroll dentro do painel.
     --qb-h / --qb-reserve : usados so se o JS nao correr
     --qb-h-min            : altura minima absoluta */
  --qb-h:50vh;
  --qb-reserve:130px;
  --qb-h-min:420px;
  --qb-h-total: 500px;   /* altura total do acordeao */

  /* geometria do painel aberto */
  --qb-photo:45%;   /* largura da foto revelada */
  --qb-open:46%;    /* inicio da area de conteudo */
  --qb-pad:30px;    /* margem interior da area de conteudo */
  --qb-top:34px;    /* distancia do conteudo ao topo */

  background:var(--clay);
  padding:14px; border-radius:4px;
}

/* o wrapper que contem diretamente os paineis vira o contentor flex */
.qb-acc :where(*):has(> .qb-panel){
  display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important;
  gap:8px !important;
  height:var( --qb-h-total, max( var(--qb-h-min), var( --qb-h-fit, calc(var(--qb-h) - var(--qb-reserve) - 28px) ) ) ) !important;
}

/* Painel = inner row */
.qb-acc .qb-panel.qb-panel{
  position:relative !important;
  flex:0 0 60px !important;
  width:auto !important; max-width:none !important; height:100% !important;
  margin:0 !important; padding:0 !important;
  overflow:hidden !important; border-radius:8px !important; cursor:pointer !important;
  background-color:var(--bar); background-size:cover !important; background-position:center !important;
  color:var(--ink);
  transition:flex-basis .55s cubic-bezier(.6,.05,.2,1);
}
.qb-acc .qb-panel.qb-panel.is-active{ flex:1 1 auto !important; cursor:default !important; }

/* cores da marca (repetem a cada 3) */
.qb-acc .qb-panel:nth-child(3n+1){ --bar:#EEA300; --ink:#EFE8D6; }
.qb-acc .qb-panel:nth-child(3n+2){ --bar:#4B70C2; --ink:#EFE8D6; }
.qb-acc .qb-panel:nth-child(3n){   --bar:#EFE8D6; --ink:#3F63B4; }

/* neutraliza os wrappers internos do inner row, para o titulo/texto
   ancorarem no painel */
.qb-acc .qb-panel :where(.row,.row-inner,.row-child,.col-no-gutter,.vc_row-inner,.wpb_row,.wpb_column,.column_parent,.vc_column_container,.vc_column-inner,.pos-top,.pos-center,.pos-bottom,.uncol,.uncoltable,.uncell,.uncont,.wpb_wrapper){
  position:static !important;
  margin:0 !important; padding:0 !important; width:auto !important; max-width:none !important;
}

/* barra de cor: cobre tudo, desliza para revelar a foto */
.qb-acc .qb-panel::before{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important;
  background:var(--bar); transition:left .55s cubic-bezier(.6,.05,.2,1);
}
.qb-acc .qb-panel.is-active::before{ left:var(--qb-photo) !important; }

/* ---------------------------------------------------------------
   Titulo FECHADO - vertical, centrado na largura, alinhado a base
   --------------------------------------------------------------- */
.qb-acc .qb-panel .qb-title{
  position:absolute !important; inset:0 !important; z-index:2 !important;
  box-sizing:border-box !important; padding:26px 0 !important;
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  writing-mode:vertical-rl !important; transform:rotate(180deg) !important; white-space:nowrap !important;
  transition:font-size .35s ease !important;
}
.qb-acc .qb-panel .qb-title,
.qb-acc .qb-panel .qb-title :is(h1,h2,h3,h4,.heading-text,.h2){
  color:inherit !important; font-family:inherit !important; font-weight:700 !important;
  line-height:1.05 !important; font-size:clamp(20px,3vh,30px) !important; margin:0 !important;
}

/* ---------------------------------------------------------------
   Painel ABERTO - titulo e texto numa coluna unica
   O wrapper que contem os dois (.uncont do Uncode) passa a ser a
   area de conteudo: assim o titulo pode ocupar as linhas que
   precisar sem nunca se sobrepor ao texto.
   --------------------------------------------------------------- */
.qb-acc .qb-panel.is-active :where(*):has(> .qb-title){
  position:absolute !important; z-index:2 !important;
  inset:var(--qb-top) var(--qb-pad) var(--qb-pad) calc(var(--qb-open) + var(--qb-pad)) !important;
  display:flex !important; flex-direction:column !important; gap:14px !important;
  overflow:hidden !important;
}

/* Titulo ABERTO - horizontal, no topo da coluna */
.qb-acc .qb-panel.is-active .qb-title{
  position:static !important; inset:auto !important;
  writing-mode:horizontal-tb !important;
  transform:none !important;
  white-space:normal !important;
  padding:0 !important;
  display:block !important;
  flex:0 0 auto !important;
}
.qb-acc .qb-panel.is-active .qb-title,
.qb-acc .qb-panel.is-active .qb-title :is(h1,h2,h3,h4,.heading-text,.h2){
  font-size:clamp(24px,2.8vw,44px) !important; line-height:1.1 !important;
  white-space:normal !important; text-align:left !important;
}

/* ---------------------------------------------------------------
   Descricao (so no painel ativo) - por baixo do titulo
   Para dois textos, usa UM Text Block com dois paragrafos.
   --------------------------------------------------------------- */
.qb-acc .qb-panel .qb-text{
  position:absolute !important; z-index:2 !important;
  inset:auto var(--qb-pad) var(--qb-pad) calc(var(--qb-open) + var(--qb-pad)) !important;
  display:none !important; flex-direction:column !important; justify-content:flex-start !important;
  text-align:justify !important;
}

/* no painel aberto o texto ocupa o resto da coluna e, se ainda assim
   nao couber (ecras baixos), ganha scroll proprio em vez de cortar */
.qb-acc .qb-panel.is-active .qb-text{
  position:static !important; inset:auto !important;
  flex:1 1 auto !important; min-height:0 !important;
  overflow-y:auto !important; overscroll-behavior:contain !important;
  scrollbar-width:thin !important; padding-right:8px !important;
}
.qb-acc .qb-panel .qb-text,
.qb-acc .qb-panel .qb-text *{ color:inherit !important; font-family:inherit !important; }
.qb-acc .qb-panel .qb-text p{ margin:0 !important; font-size:14px !important; line-height:1.6 !important; text-align:justify !important; }
.qb-acc .qb-panel .qb-text p + p{ margin-top:.7em !important; }
.qb-acc .qb-panel.is-active .qb-text{ display:flex !important; }

/* ---------------------------------------------------------------
   Ecras estreitos (portateis pequenos): mais espaco para o texto -
   foto mais estreita, margens e tipos menores.
   --------------------------------------------------------------- */
@media (min-width:861px) and (max-width:1280px){
  .qb-acc{ --qb-photo:30%; --qb-open:31%; --qb-pad:22px; }
  .qb-acc .qb-panel.is-active .qb-title,
  .qb-acc .qb-panel.is-active .qb-title :is(h1,h2,h3,h4,.heading-text,.h2){
    font-size:clamp(22px,2.4vw,32px) !important;
  }
  .qb-acc .qb-panel .qb-text p{ font-size:13px !important; line-height:1.55 !important; }
}

/* foco por teclado */
.qb-acc .qb-panel:focus-visible{ outline:2px solid #fff !important; outline-offset:-4px !important; }

/* ---------------------------------------------------------------
   Mobile: acordeao VERTICAL - barras finas fechadas, abre ao clicar
   --------------------------------------------------------------- */
@media (max-width:860px){
  .qb-acc.qb-acc :where(.row,.row-parent,.row-child,.col-no-gutter,.wpb_row,.row-inner,.wpb_column,.column_parent,.vc_column_container,.vc_column-inner,.pos-top,.pos-center,.pos-bottom,.uncol,.uncoltable,.uncell,.uncont){
    display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; flex:1 1 100% !important;
  }
  .qb-acc.qb-acc :where(*):has(> .qb-panel){ display:flex !important; flex-direction:column !important; align-items:stretch !important; height:auto !important; width:100% !important; }
  .qb-acc.qb-acc .qb-panel.qb-panel{ flex:0 0 auto !important; width:100% !important; height:auto !important; min-height:54px !important; display:block !important; }
  .qb-acc .qb-panel::before{ display:none !important; }
  .qb-acc .qb-panel .background-inner{ display:none !important; }
  .qb-acc .qb-panel.is-active .background-inner{ display:block !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important; width:100% !important; height:clamp(150px,42vw,220px) !important; z-index:1 !important; }
  .qb-acc .qb-panel.is-active{ padding-top:clamp(150px,42vw,220px) !important; }
  .qb-acc .qb-panel .qb-title{ position:relative !important; z-index:2 !important; inset:auto !important; margin:0 !important; padding:15px 18px !important; writing-mode:horizontal-tb !important; transform:none !important; white-space:normal !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; }
  .qb-acc .qb-panel .qb-title,
  .qb-acc .qb-panel .qb-title :is(h1,h2,h3,h4,.heading-text,.h2){ font-size:20px !important; line-height:1.15 !important; white-space:normal !important; }
  .qb-acc .qb-panel.is-active .qb-title{ inset:auto !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; margin-top:0 !important; padding:15px 18px !important; display:flex !important; }
  .qb-acc .qb-panel.is-active .qb-title,
  .qb-acc .qb-panel.is-active .qb-title :is(h1,h2,h3,h4,.heading-text,.h2){ font-size:22px !important; }
  .qb-acc .qb-panel.is-active :where(*):has(> .qb-title){ position:static !important; inset:auto !important; display:block !important; overflow:visible !important; }
  .qb-acc .qb-panel.is-active .qb-text{ position:relative !important; inset:auto !important; flex:none !important; overflow:visible !important; padding-right:0 !important; }
  .qb-acc .qb-panel .qb-text{ position:relative !important; z-index:2 !important; inset:auto !important; display:none !important; width:100% !important; padding:0 18px 18px !important; text-align:left !important; }
  .qb-acc .qb-panel.is-active .qb-text{ display:block !important; }
  .qb-acc .qb-panel .qb-text p{ text-align:left !important; font-size:14px !important; }
  .qb-acc .qb-panel.is-active .icon-box{ padding:0 18px !important; box-sizing:border-box !important; width:100% !important; }
  .qb-acc .qb-panel.is-active .qb-text{ padding:0 18px 18px !important; }
}