/**
 * Quinta do Videira — personalizações do site
 *
 * O que é:
 *   O ÚNICO ficheiro CSS onde se escrevem estilos novos ou correções.
 *   É carregado em todas as páginas DEPOIS de style.css e responsive.css,
 *   por isso as regras daqui sobrepõem-se às do template sem precisar de !important.
 *
 * Regras de uso (ver DESIGN.md e CLAUDE.md):
 *   1. Nunca editar style.css, shortcodes.css, responsive.css, animation.css nem main.js.
 *      Qualquer ajuste ao template faz-se aqui.
 *   2. Cores e fontes só através dos tokens abaixo: var(--cor-...) e var(--fonte-...).
 *      Não escrever valores hexadecimais nem famílias de fontes fora deste bloco :root.
 *   3. Antes de criar uma classe nova, procurar no catálogo de componentes do DESIGN.md
 *      se já existe um equivalente no template. Classes novas levam o prefixo "vd-".
 *   4. Sem inline styles no HTML/PHP: o estilo vem sempre daqui.
 *   5. Cada bloco de regras leva um comentário a dizer onde é usado e porquê.
 *   6. Depois de qualquer alteração: bash scripts/verificar.sh + node scripts/screenshots.js
 *      e rever as capturas (workflow completo no CLAUDE.md).
 *
 * Os tokens reproduzem os valores escritos à mão no CSS original do template;
 * por isso, definir estas variáveis não altera nada no aspeto atual das páginas.
 */

:root {
    /* Cores */
    --cor-dourado: #C3A27C;      /* destaque: etiquetas de secção (.heading-section .sub), botões, preços, ícones, links ativos/hover */
    --cor-escuro: #171412;       /* castanho quase preto: fundos escuros (header, footer, secções), títulos sobre claro */
    --cor-castanho: #2D2723;     /* castanho escuro: fundos de secção/caixas escuras, contornos sobre escuro */
    --cor-creme: #FAF1E3;        /* creme claro: círculo do logótipo no header, fundo da coluna central de wg-coffee-time */
    --cor-creme-2: #F6E7D0;      /* creme médio: sub-título manuscrito dos banners/hero, ícones dos cartões de serviço */
    --cor-texto: #666666;        /* texto corrido sobre fundos claros */
    --cor-texto-claro: #969391;  /* cinzento quente: pontos de paginação e setas do Swiper (texto sobre escuro é branco/#dedede) */
    --cor-branco: #FFFFFF;       /* texto e títulos sobre fundos escuros e imagens */

    /* Tipografia */
    --fonte-titulo: 'Oswald', sans-serif;               /* h1–h6, menus, botões (maiúsculas) */
    --fonte-texto: 'DM Sans', sans-serif;               /* corpo de texto */
    --fonte-manuscrita: 'Sue Ellen Francisco', cursive; /* só o sub-título manuscrito dos banners/hero (.page-title .sub-title, .banner-page .text) */
}

/* ------------------------------------------------------------------
 * Compatibilidade do grid Bootstrap 5.3.3 com o alpha.6 do template
 * (Tarefa 3; ver docs/ATUALIZACOES.md). Usado em todas as páginas.
 * ------------------------------------------------------------------ */

/* Gutter: o alpha.6 usa 30 px (15 px de cada lado); o 5.3.3 usa 1.5rem,
   que com o html a 62.5 % do template dá só 15 px. */
.row {
    --bs-gutter-x: 30px;
}

/* As colunas do alpha.6 são position: relative (os elementos absolutos do
   template, p.ex. as setas dos sliders, posicionam-se em relação à coluna)
   e têm min-height: 1px; o 5.3.3 não tem nenhuma das duas. */
.row > * {
    position: relative;
    min-height: 1px;
}

/* ------------------------------------------------------------------
 * Mapa: o #map passou de <div> (Mapbox) a <iframe> do Google Maps (Tarefa 4).
 * O #map do shortcodes.css é absolute com top/bottom 0, mas num iframe isso não
 * estica a altura; e o iframe traz contorno por omissão.
 * Usado em index.php e sobre-nos.php (.wg-coffee-time .right) e contactos.php (.wg-map).
 * ------------------------------------------------------------------ */
iframe#map {
    height: 100%;
    border: 0;
}

/* ------------------------------------------------------------------
 * Header com 8 itens de menu (4 + 4) e o botão Reservar (Tarefa 4).
 * Usado em inc/header.php (todas as páginas). O template tinha 3 + 3 itens,
 * o painel .canvas à esquerda e pesquisa/carrinho à direita.
 * - As duas metades do menu ficam ancoradas ao centro (à volta do #site-logo,
 *   147 px), para o logótipo ficar sempre entre elas. A metade direita fica mais
 *   afastada porque o item ativo desenha a chávena 25 px à esquerda do texto.
 * - O Reservar (.header-right) passa para o início da cápsula no desktop,
 *   onde estava o .canvas, para equilibrar as metades.
 * - A ≤1200 px os 8 itens não cabem: passa ao botão hambúrguer (o template
 *   fazia-o só a ≤991 px) e o Reservar volta à direita.
 * ------------------------------------------------------------------ */
.header-inner-wrap {
    padding-left: 40px;
    padding-right: 40px;
    justify-content: flex-start;
}

.header-right {
    order: -1;
}

/* linha vertical entre a pesquisa e o carrinho do original */
.header-right::after {
    display: none;
}

.header-right .vd-reservar {
    padding: 0 24px;
}

.main-nav.left,
.main-nav.right {
    position: absolute;
    top: 0;
    padding-left: 0;
}

.main-nav.left {
    right: calc(50% + 92px);
}

.main-nav.right {
    left: calc(50% + 110px);
}

.menu-primary-menu {
    gap: 34px;
}

.menu-primary-menu > li > a {
    letter-spacing: 1.5px;
    white-space: nowrap;
}

/* barra superior: o link "Ver contactos"/telefone herda a cor do texto */
.wg-information .content p a {
    color: inherit;
}

/* footer (inc/footer.php): links de contacto e navegação com a cor do texto do footer
   (sem isto ficariam com o azul-marinho por omissão dos <a> do template) */
.footer .text a {
    color: inherit;
}

.footer .text a:hover {
    color: var(--cor-dourado);
}

/* footer (inc/footer.php), barra de baixo: ponto entre o copyright e o "Livro de Reclamações"
   (o .footer .text span do template pinta os span de dourado; este fica com a cor do texto) */
.footer .footer-bottom .text .vd-separador {
    color: inherit;
    margin: 0 4px;
}

/* footer (inc/footer.php): faixa "Versão de demonstração", só com $site['demo'] (inc/config.php).
   Fica por baixo da barra do copyright, em letra pequena, discreta. */
.vd-demo-aviso {
    background-color: var(--cor-escuro);
    color: var(--cor-texto-claro);
    font-family: var(--fonte-texto);
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.3px;
    text-align: center;
    padding: 10px 0;
}

/* 404.php: o original não tinha header; o .wg-404 (100vh) passa a deixar espaço
   para o header absoluto e a crescer com o conteúdo */
.wg-404 {
    height: auto;
    min-height: 100vh;
    padding-top: 140px;
    padding-bottom: 100px;
}

/* menu mobile: botão Reservar por baixo dos itens */
.vd-reservar-mobile {
    margin-top: 30px;
}

@media (max-width: 1440px) {
    .menu-primary-menu {
        gap: 32px;
    }

    .header-right .vd-reservar {
        padding: 0 16px;
    }

    /* a 1201 px a chávena do item ativo (Início) ficava a ~5 px do Reservar */
    .header-inner-wrap {
        padding-left: 28px;
    }

    .menu-primary-menu > li > a {
        letter-spacing: 1px;
    }
}

@media (max-width: 1200px) {
    .main-nav {
        display: none;
    }

    .mobile-button {
        display: block;
    }

    .header-inner-wrap {
        justify-content: flex-end;
    }

    .header-right {
        order: 0;
    }
}

@media (max-width: 700px) {
    .wg-404 {
        padding-top: 60px;
    }

    .header-inner-wrap {
        padding-right: 15px;
    }

    .header-right .vd-reservar {
        height: 40px;
        padding: 0 14px;
        font-size: 13px;
        letter-spacing: 1px;
    }
}

/* ------------------------------------------------------------------
 * Logótipo (Tarefa 7). Usado em inc/header.php e inc/footer.php.
 * Os PNG (logo-castanho.png 4× de 96×94; logo-creme.png 4× de 121×117) têm a
 * proporção que o retinaLogos do main.js força nos atributos width/height,
 * por isso o tamanho visível define-se aqui (o CSS sobrepõe-se aos atributos).
 * Header: versão castanha dentro do círculo creme #site-logo (147 px);
 * no header fixo e a ≤700 px o círculo passa a 82 px com 10 px de padding.
 * ------------------------------------------------------------------ */
#site-logo img {
    display: block;
    width: 108px;
    height: auto;
}

.header.is-fixed #site-logo img {
    width: 62px;
}

@media (max-width: 700px) {
    .header #site-logo img {
        width: 62px;
    }
}

.inner-mobile-nav .main-logo img {
    width: 121px;
    height: auto;
}

.logo-footer img {
    width: 150px;
    height: auto;
}

/* ------------------------------------------------------------------
 * Página inicial (index.php) — fotografias de fundo e ajustes (Tarefa 7).
 * As fotografias estão registadas em docs/IMAGENS.md.
 * ------------------------------------------------------------------ */

/* hero: as classes .slide-1/.slide-2 do template apontam para placeholders */
.page-title-home .vd-hero-mesa {
    background-image: url(../images/videira/inicio-hero-mesa.jpg);
}

.page-title-home .vd-hero-brasa {
    background-image: url(../images/videira/inicio-hero-brasa.jpg);
}

/* testemunhos: fundo novo (o original é um placeholder cinzento) */
.customer-testimonial.vd-testemunhos {
    background-image: url(../images/videira/inicio-testemunhos-fundo.jpg);
}

/* caixa de horários (.wg-about .hour-opening): dias e horas em maiúsculas,
   como no original (o template tinha-os escritos em maiúsculas no HTML) */
.wg-about .hour-opening .day,
.wg-about .hour-opening .time {
    text-transform: uppercase;
}

/* cartões de serviço (.wg-service): ícone SVG de traço (talheres, travessa)
   com o mesmo tamanho e cor dos ícones icomoon (.service-item .content > i) */
.service-item .content > i.vd-icone {
    display: inline-block;
    line-height: 1;
}

.service-item .content > i.vd-icone svg {
    display: block;
    width: 1em;
    height: 1em;
    margin: 0 auto;
}

/* "Como chegar" (.wg-coffee-time): sem a chávena decorativa do template e
   com a linha do telemóvel por baixo do telefone principal */
.wg-coffee-time .center::after {
    display: none;
}

.wg-coffee-time .center p.vd-telemovel {
    margin-top: -14px;
    margin-bottom: 24px;
}

.wg-coffee-time .center p a {
    color: inherit;
}

.wg-coffee-time .center p a:hover {
    color: var(--cor-dourado);
}

/* .special-menu-item.new/.season: o CSS original escreve "New / trending" e
   "Trending / season" com content; aqui em pt-PT (DESIGN.md §4.7) */
.special-menu-item.new::after {
    content: 'Novidade';
}

.special-menu-item.season::after {
    content: 'Da época';
}

/* caixa de horários: "Quarta a Domingo" e "09:00–00:00" numa só linha */
.wg-about .hour-opening ul li .day,
.wg-about .hour-opening ul li .time {
    white-space: nowrap;
}

/* sem a imagem decorativa do template à direita do .wg-about (placeholder) */
.wg-about {
    background-image: none;
}

/* pratos (.special-menu-item): com nomes longos o .content passava para baixo da
   fotografia (flex-wrap do original); assim ocupa sempre o espaço ao lado */
.special-menu-item .content {
    flex: 1 1 0;
    min-width: 0;
}

/* "Porquê nós" (.choose-us): as imagens decorativas ::before/::after do template
   são placeholders cinzentos */
.choose-us::before,
.choose-us::after {
    display: none;
}

/* "Como chegar": a fotografia acompanha a altura da coluna central */
.wg-coffee-time .left {
    overflow: hidden;
}

/* o .center do template não tem padding em baixo: o botão ficava encostado ao
   fim da secção quando a fotografia passou a acompanhar a altura da coluna */
.wg-coffee-time .center {
    padding-bottom: 100px;
}

.wg-coffee-time .left img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 75%;
}

@media (max-width: 768px) {
    .wg-coffee-time .left img {
        height: auto;
    }
}

/* Fotografias com o dobro da resolução (retina, DESIGN.md §6): o template
   dependia do tamanho natural dos placeholders; aqui fixa-se o tamanho visível.
   Usado em index.php (e nas páginas que reutilizem estes componentes). */
.wg-about .image img {
    display: block;
    width: 100%;
    height: auto;
}

.special-menu-item .image img {
    display: block;
    width: 100%;
    height: 100%;
}

.private-event .image .img-1 {
    width: 396px;
}

.private-event .image .img-2 {
    width: 299px;
}

/* hero (index.php) em ecrãs pequenos: o template não reduz o título de 60 px
   na página inicial (DESIGN.md §2.2) e o texto encostava às margens */
@media (max-width: 700px) {
    .page-title-home .page-title {
        padding-left: 16px;
        padding-right: 16px;
    }

    .page-title-home .page-title .sub-title {
        font-size: 30px;
        line-height: 44px;
    }

    .page-title-home .page-title .title {
        font-size: 40px;
        line-height: 52px;
    }
}

/* pratos (.special-menu-item): o preço nunca parte ("18,00" / "€") */
.special-menu-item .content .price {
    white-space: nowrap;
}

@media (max-width: 700px) {
    .special-menu-item {
        padding: 0;
        gap: 16px;
    }

    .special-menu-item .content .name,
    .special-menu-item .content .price {
        font-size: 18px;
        line-height: 26px;
    }
}

/* preloader (inc/header.php, todas as páginas): o template mostrava o logótipo
   "Basilico Coffee House" (preload.png) sobre preto; passa a ser o logótipo creme
   sobre o castanho do site. 103 × 100 px = proporção de logo-creme.png (121:117). */
.preload-container {
    background-color: var(--cor-castanho);
}

.preload-container .middle {
    content: url(../images/logo/logo-creme.png);
    width: 103px;
    margin-left: -52px;
}

/* ------------------------------------------------------------------
 * Páginas de serviços (Tarefa 8): sobre-nos.php, restaurante.php, buffet.php,
 * cafe-pastelaria.php. Fotografias registadas em docs/IMAGENS.md.
 * ------------------------------------------------------------------ */

/* banners (.banner-page): fotografia própria de cada página; a classe do template
   (about-page/menu-page) mantém-se por causa do padding */
.banner-page.vd-banner-sobre {
    background-image: url(../images/videira/sobre-banner-videira.jpg);
}

.banner-page.vd-banner-restaurante {
    background-image: url(../images/videira/restaurante-banner-sala.jpg);
}

.banner-page.vd-banner-buffet {
    background-image: url(../images/videira/buffet-banner-travessas.jpg);
}

.banner-page.vd-banner-cafe {
    background-image: url(../images/videira/cafe-banner-cafe.jpg);
}

/* choose-us.style-1 type-1/type-2 (sobre-nos.php, cafe-pastelaria.php): a imagem
   pequena é absoluta e o template dependia do tamanho natural do placeholder;
   as fotografias têm o dobro da resolução, por isso fixa-se a largura visível */
.choose-us.style-1.type-1 .image-2 {
    width: 349px;
}

.choose-us.style-1.type-2 .image-2 {
    width: 296px;
}

.choose-us.style-1 .img-left img,
.choose-us.style-1 .img-right img {
    display: block;
}

/* a ≤700 px o template empilha as duas imagens a toda a largura; a segunda
   (vertical) só alongava a página, por isso fica só a principal */
@media (max-width: 700px) {
    .choose-us.style-1.type-1 .image-2,
    .choose-us.style-1.type-2 .image-2 {
        display: none;
    }
}

/* nomes de pratos/produtos sem ligação (a ementa está na própria página):
   a cor vinha do <a> do template */
.special-menu-item .content .name,
.cake-bakery-item .title {
    color: var(--cor-escuro);
}

/* wg-menu (buffet.php, cafe-pastelaria.php): título sem <a> fica branco como no
   original; fotografias redondas fornecidas a 426 px, mostradas a 213 px */
.wg-menu-item .title {
    color: var(--cor-branco);
}

.wg-menu-item .image img {
    width: 213px;
    height: 213px;
}

/* wg-portfolio (galerias curtas de sobre-nos.php e buffet.php): as fotografias
   enchem a célula da grelha (sem a linha de base do <img> inline) */
.wg-portfolio .coffee-post-item .image img {
    display: block;
    height: 100%;
    object-fit: cover;
}

.wg-portfolio .coffee-post-item,
.wg-portfolio .coffee-post-item .image {
    height: 100%;
}

/* acordeão (.flat-accordion, restaurante.php): ligação tel: dentro do texto com a cor
   dos títulos, em vez do azul-marinho por omissão dos <a> do template */
.flat-accordion .toggle-content p a {
    color: var(--cor-escuro);
    font-weight: 500;
}

.flat-accordion .toggle-content p a:hover {
    color: var(--cor-dourado);
}

/* banners: o sub-título manuscrito (.banner-page .text) era "capitalize" no template,
   o que em pt-PT dá "Sirva-Se À Vontade"; fica como está escrito, igual ao hero */
.banner-page .text {
    text-transform: none;
}

/* wg-menu (fundo escuro): o parágrafo usava o cinzento #666 sobre castanho
   (contraste fraco); passa ao cinzento quente dos elementos sobre escuro */
.wg-menu-item p {
    color: var(--cor-texto-claro);
}

/* banners e títulos de categoria em ecrãs pequenos: o template mantém 60 px no título
   do banner, 40 px no manuscrito e 45 px nas etiquetas grandes (.sub.style-big);
   a 390 px "Café & Pastelaria" e "Do pequeno-almoço ao lanche" partiam mal */
@media (max-width: 700px) {
    .banner-page .themesflat-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .banner-page .text {
        font-size: 30px;
        line-height: 44px;
    }

    .banner-page .heading {
        font-size: 40px;
        line-height: 52px;
    }

    .heading-section .sub.style-big {
        font-size: 32px;
        line-height: 42px;
    }

    .heading-section .sub.style-big::before,
    .heading-section .sub.style-big::after {
        top: 12px;
    }
}

/* wg-menu com Swiper (buffet.php, cafe-pastelaria.php): pontos de paginação por baixo
   dos cartões, para se perceber que há mais (as setas do template somem a ≤991 px) */
.wg-menu .swiper-container {
    padding-bottom: 50px;
}

.wg-menu .swiper-container .vd-menu-pagination {
    bottom: 0;
}

.wg-menu .swiper-container .vd-menu-pagination .swiper-pagination-bullet {
    background-color: var(--cor-texto-claro);
}

.wg-menu .swiper-container .vd-menu-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--cor-dourado);
}

/* o responsive.css esconde .swiper-pagination a ≤991 px com !important; só aqui se
   repõe (exceção à regra do !important: sobrepõe uma regra que já o tem) */
@media (max-width: 991px) {
    .wg-menu .swiper-container .swiper-pagination.vd-menu-pagination {
        display: block !important;
    }
}

/* ------------------------------------------------------------------
 * Eventos, Galeria, Contactos e 404 (Tarefa 9): eventos.php, galeria.php,
 * contactos.php, 404.php. Fotografias registadas em docs/IMAGENS.md.
 * ------------------------------------------------------------------ */

/* banners: fotografia própria; event-page/portfolio-page/contact-page dão o padding */
.banner-page.vd-banner-eventos {
    background-image: url(../images/videira/eventos-banner-mesa.jpg);
}

.banner-page.vd-banner-galeria {
    background-image: url(../images/videira/galeria-banner-sala.jpg);
}

.banner-page.vd-banner-contactos {
    background-image: url(../images/videira/contactos-banner-mesa.jpg);
}

/* eventos.php: o botão "Pedir orçamento" salta para o formulário; o header fixo
   (82 px + margem) não o deve tapar */
#orcamento {
    scroll-margin-top: 110px;
}

/* tipos de evento (.grid-private, eventos.php): uma fotografia por tipo, sem Swiper;
   o título deixa de ser <a> e fica com a cor dos títulos */
.private-item .content .title {
    color: var(--cor-escuro);
}

/* o responsive.css reduz o padding do texto a 20 px a ≤1440 px com !important (a 1440 px o
   texto ficava encostado à margem); só aqui se repõe (exceção à regra do !important:
   sobrepõe uma regra que já o tem) */
@media (max-width: 1440px) {
    .private-item .content {
        padding: 60px 80px 60px 90px !important;
    }
}

@media (max-width: 1200px) {
    .private-item .content {
        padding: 50px 40px !important;
    }
}

@media (max-width: 700px) {
    .private-item .content {
        padding: 40px 16px !important;
    }

    .private-item .right img {
        height: 260px;
    }
}

/* formulário de orçamento (.book-table, eventos.php): fotografias com o dobro da
   resolução (DESIGN.md §6) mostradas a 385 px; a ≤1200 px o template punha-as lado a lado
   por cima do formulário (muito altas): ficam escondidas e o formulário centrado */
.book-table .wrap > .image {
    flex: 0 1 385px;
}

.book-table .image .bg-img {
    display: block;
}

.book-table .content > .vd-form-intro {
    color: var(--cor-texto-claro);
    text-align: center;
    margin-bottom: 35px;
}

.book-table input[type="date"] {
    color-scheme: dark;
}

@media (max-width: 1200px) {
    .book-table .wrap > .image {
        display: none;
    }

    .book-table .wrap > .content {
        max-width: 760px;
        margin: 0 auto;
    }
}

/* formulários da demo (form.vd-form em eventos.php e contactos.php, DESIGN.md §4.13):
   etiquetas visíveis por cima de cada campo (o template só tinha placeholders) e a
   mensagem de confirmação (.vd-form-estado, role="status") escrita pelo videira.js */
.vd-form .vd-form-label {
    display: block;
    font-family: var(--fonte-texto);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    color: var(--cor-escuro);
}

.book-table .vd-form .vd-form-label {
    color: var(--cor-creme-2);
}

.vd-form .vd-form-estado {
    margin-top: 24px;
    font-family: var(--fonte-texto);
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    color: var(--cor-escuro);
}

.vd-form .vd-form-estado:empty {
    margin: 0;
}

.book-table .vd-form .vd-form-estado {
    text-align: center;
    color: var(--cor-creme-2);
}

@media (max-width: 700px) {
    /* a 390 px dois campos lado a lado ficavam com ~160 px (a data não cabia) */
    .vd-form .columns {
        flex-direction: column;
        gap: 0;
    }
}

/* contactos.php (.grid-contact-item): títulos sem <a> com a cor dos títulos; horário
   gerado de $empresa['horarios'] */
.contact-item .title {
    color: var(--cor-escuro);
}

.contact-item .vd-linha {
    display: block;
}

.contact-item .vd-horario li {
    font-family: var(--fonte-texto);
    font-size: 15px;
    line-height: 25px;
    color: var(--cor-texto);
}

.contact-item .vd-horario li span {
    color: var(--cor-escuro);
    font-weight: 500;
}

/* contactos.php: ícone SVG do cartão "Horário" (relogio.svg) com o tamanho dos ícones icomoon */
.contact-item .icon i.vd-icone {
    display: inline-block;
    line-height: 1;
}

.contact-item .icon i.vd-icone svg {
    display: block;
    width: 1em;
    height: 1em;
}

/* contactos.php: em ecrãs < 992 px (uma coluna), morada, telefones e horário (.vd-contactos-info)
   aparecem antes do formulário, que é longo */
@media (max-width: 991px) {
    .wg-contact-us .vd-contactos-info {
        order: -1;
    }

    .wg-contact-us .vd-contactos-info .grid-contact-item {
        margin-top: 0;
        margin-bottom: 60px;
    }
}

/* mapa de contactos.php: espaço antes da secção seguinte em ecrãs pequenos */
@media (max-width: 700px) {
    .wg-map {
        padding-top: 50px;
    }

    .wg-map .wrap {
        height: 400px;
    }
}

/* galeria.php: botões de filtro (.vd-filtros, DESIGN.md §4.12). Aspeto do button-style-1
   (ativo, aria-pressed="true") e do button-style-2 active com contorno dourado (inativo) */
.vd-filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 45px;
}

.vd-filtros .vd-filtro {
    height: 44px;
    padding: 0 24px;
    border: 1px solid var(--cor-dourado);
    border-radius: 5px;
    background-color: var(--cor-branco);
    color: var(--cor-castanho);
    font-family: var(--fonte-titulo);
    font-size: 15px;
    font-weight: 500;
    line-height: 42px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.vd-filtros .vd-filtro:focus,
.vd-filtros .vd-filtro:hover,
.vd-filtros .vd-filtro:focus-visible {
    border: 1px solid var(--cor-dourado);
    color: var(--cor-dourado);
}

.vd-filtros .vd-filtro:focus-visible {
    outline: 2px solid var(--cor-castanho);
    outline-offset: 2px;
}

.vd-filtros .vd-filtro[aria-pressed="true"] {
    background-color: var(--cor-dourado);
    color: var(--cor-branco);
}

/* galeria filtrada (.vd-galeria.vd-filtrado): os blocos .wrap de 7 lugares deixam de
   contar e os cartões visíveis formam uma grelha uniforme, centrada (3 colunas; 2 a ≤700 px) */
.vd-galeria .coffee-post-item.vd-oculto {
    display: none;
}

.vd-galeria.vd-filtrado {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 30px;
}

.vd-galeria.vd-filtrado .wrap {
    display: contents;
}

.vd-galeria.vd-filtrado .coffee-post-item {
    width: calc((100% - 60px) / 3);
    height: auto;
    aspect-ratio: 4 / 5;
}

@media (max-width: 700px) {
    .vd-galeria.vd-filtrado {
        gap: 15px;
    }

    .vd-galeria.vd-filtrado .coffee-post-item {
        width: calc((100% - 15px) / 2);
    }

    .vd-filtros .vd-filtro {
        padding: 0 16px;
        font-size: 14px;
        letter-spacing: 1.5px;
    }
}

/* galerias com lightbox (.vd-lightbox, videira.js): o cartão inteiro abre a fotografia */
.coffee-post-item:has(.vd-lightbox) {
    cursor: pointer;
}

/* lightbox (Magnific Popup, classe vd-mfp): fundo castanho do site e título em DM Sans */
.vd-mfp.mfp-bg {
    background-color: var(--cor-escuro);
    opacity: 0.92;
}

.vd-mfp .mfp-title,
.vd-mfp .mfp-counter {
    font-family: var(--fonte-texto);
    font-size: 14px;
    line-height: 20px;
    color: var(--cor-creme-2);
}

/* 404.php: o "0" do 404 era a chávena do template (placeholder); passa a um prato,
   recortado em círculo. Fornecido a 748 px (retina), mostrado a 374 px (200 a ≤700 px) */
.wg-404 .title img {
    width: 374px;
    border-radius: 50%;
}

/* o prato (mais alto do que a chávena original) tocava na cápsula do header */
.wg-404 {
    padding-top: 200px;
}

.wg-404 .text {
    font-family: var(--fonte-titulo);
}

@media (max-width: 700px) {
    .wg-404 {
        padding-top: 120px;
    }

    /* a 200 px (valor do template) o prato tapava parte dos dois "4" */
    .wg-404 .title img {
        width: 160px;
    }

    .wg-404 .content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .wg-404 .text {
        font-size: 30px;
        line-height: 40px;
    }
}

/* 404.php: a barra superior do header (morada e telefone, texto claro) fica sobre o fundo
   creme da 404 (as outras páginas abrem com fotografia escurecida); aqui passa a escura */
.vd-pagina-404 .wg-information .content .title {
    color: var(--cor-escuro);
}

.vd-pagina-404 .wg-information .content p {
    color: var(--cor-texto);
}

/* galerias com lightbox (.wg-portfolio: galeria.php, sobre-nos.php, buffet.php): o template
   esconde o nome do cartão com visibility: hidden fora do hover, o que tira o link
   .vd-lightbox da ordem do Tab. Fica visível para o teclado (mas transparente, opacity 0,
   como no original) e o cartão abre como em hover quando o link tem o foco */
.wg-portfolio .coffee-post-item .content {
    visibility: visible;
    pointer-events: none; /* transparente: os cliques passam ao cartão, como no original */
}

.wg-portfolio .coffee-post-item .content a {
    pointer-events: auto;
}

.wg-portfolio .coffee-post-item:focus-within .content {
    top: 50%;
    opacity: 1;
}

.wg-portfolio .coffee-post-item:focus-within::before {
    top: 0;
    opacity: 1;
    visibility: visible;
}

.wg-portfolio .coffee-post-item .content a.vd-lightbox:focus-visible {
    outline: 2px solid var(--cor-creme-2);
    outline-offset: 4px;
}

/* contagem anunciada pelos filtros (galeria.php): só para leitores de ecrã */
.vd-filtros-estado {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}