/*
 * Projeto: MSOUZA ADVOCACIA
 * Author: Marcílio Souza
 * Secao: Apresentacao e fotos do escritorio, abaixo das perguntas frequentes.
 */

/* Texto institucional e fotografias em um layout aberto de duas colunas. */
.office-space-section { background:#fff; border-bottom:1px solid #dbe4df; }
.office-space-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:center; }
.office-space-copy,.office-gallery { min-width:0; }
.office-space-label { margin:0 0 14px; color:#8b703e; font:700 12px/1.5 Arial,sans-serif; text-transform:uppercase; }
.office-space-copy h2 { margin:0 0 26px; color:var(--green); font-size:30px; line-height:1.3; overflow-wrap:anywhere; }
.office-space-copy h2 span { display:block; color:#8b703e; }
.office-space-copy p:not(.office-space-label) { margin:0 0 16px; color:#54665d; font:15px/1.8 Arial,sans-serif; }
.office-space-copy strong { color:var(--green); }
.office-space-contact { display:inline-flex; align-items:center; gap:12px; margin-top:8px; color:var(--green); font:700 14px/1.5 Arial,sans-serif; }
.office-space-contact svg { width:18px; height:18px; }
.office-space-contact:hover { color:#8b703e; }

/* Fotos completas em proporcao fixa; controles nao alteram o tamanho da galeria. */
.office-gallery-stage { position:relative; overflow:hidden; border-radius:6px; background:#edf2ef; }
.office-gallery-slide { margin:0; }
.office-gallery-slide[hidden] { display:none; }
.office-gallery-slide img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; }
.office-gallery-slide figcaption { display:flex; align-items:center; min-height:48px; padding:12px 16px; color:var(--green); background:#edf2ef; font:14px/1.5 Arial,sans-serif; }
.office-gallery-arrow { position:absolute; top:calc((100% - 48px)/2); transform:translateY(-50%); display:grid; place-items:center; width:42px; height:44px; padding:0; border:0; background:rgba(16,61,53,.9); color:#fff; }
.office-gallery-previous { left:0; }
.office-gallery-next { right:0; }
.office-gallery-arrow svg { width:24px; height:24px; }
.office-gallery-arrow:hover { background:var(--green); color:#e1c28a; }
.office-gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; }
.office-gallery-dots { display:flex; gap:2px; }
.office-gallery-dots button { display:grid; place-items:center; width:36px; height:36px; padding:0; background:transparent; border:0; }
.office-gallery-dots button::before { content:''; width:9px; height:9px; border:1px solid #8b703e; border-radius:50%; }
.office-gallery-dots button[aria-current="true"]::before { background:var(--green); border-color:var(--green); }
.office-gallery-counter { color:#54665d; font:13px/1.5 Arial,sans-serif; font-variant-numeric:tabular-nums; }
.office-gallery-pause { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; margin-left:auto; padding:0; border:1px solid #dbe4df; border-radius:4px; color:var(--green); background:#edf2ef; }
.office-gallery-pause span { display:flex; }
.office-gallery-pause span[hidden] { display:none; }
.office-gallery-pause svg { width:18px; height:18px; }
.office-gallery-pause:hover { border-color:var(--gold); }
.office-gallery:focus-visible { outline:3px solid var(--gold); outline-offset:6px; }
.office-gallery-arrow:focus-visible { outline-offset:-4px; }

/* Empilhamento no celular, mantendo as fotos sem recorte e o texto legivel. */
@media(max-width:1000px) { .office-space-layout { gap:28px; } .office-space-copy h2 { font-size:27px; } }
@media(max-width:850px) { .office-space-layout { grid-template-columns:1fr; gap:30px; } }
@media(max-width:400px) { .office-space-copy h2 { font-size:25px; } .office-gallery-slide figcaption { font-size:13px; } }