/* ================================================================
   Template MOSAICO — criativo, em grelha ("bento")
   Mosaicos arredondados, cabeçalho em cápsula, blocos de cor, rodapé em cartão.
   ================================================================ */
.tpl-mosaico { --tile: var(--color-card); --gap: clamp(12px, 1.6vw, 20px); }
.tpl-mosaico main { padding-bottom: var(--gap); }

/* Apresentação em mosaico: texto num cartão grande, contactos num cartão de cor */
.tpl-mosaico .intro { padding-top: var(--gap); }
.tpl-mosaico .intro-grid { gap: var(--gap); }
.tpl-mosaico .intro-copy {
    background: var(--tile); border-radius: var(--radius); padding: clamp(2rem, 5vw, 4.5rem);
    position: relative; overflow: hidden;
}
.tpl-mosaico .intro-copy::after {
    content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 70%); pointer-events: none;
}
.tpl-mosaico .contact-block { border-radius: var(--radius); clip-path: none; box-shadow: none; padding: clamp(2rem, 4vw, 3rem) !important; }
@media (min-width: 900px) { .tpl-mosaico .intro-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* Secções em cartões com grelha bento */
.tpl-mosaico .home-section { background: var(--tile); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 3rem); margin-top: var(--gap); }
.tpl-mosaico .home-section + .home-section { margin-top: var(--gap); }
.tpl-mosaico .item-grid { gap: var(--gap); }
@media (min-width: 900px) {
    .tpl-mosaico .home-section .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tpl-mosaico .home-section .item-grid > .item-card:first-child { grid-column: span 2; grid-row: span 2; }
    .tpl-mosaico .home-section .item-grid > .item-card:first-child > img { aspect-ratio: auto; flex: 1; min-height: 320px; }
    .tpl-mosaico .home-section .item-grid > .item-card:first-child .item-title { font-size: calc(var(--h3-size) * 1.4); }
    .tpl-mosaico .gallery-grid { grid-template-columns: repeat(4, 1fr); }
    .tpl-mosaico .gallery-grid li:first-child { grid-column: span 2; grid-row: span 2; }
    .tpl-mosaico .gallery-grid li:first-child img { aspect-ratio: auto; height: 100%; }
}
.tpl-mosaico .item-card { border: 0; background: var(--color-surface); border-radius: calc(var(--radius) - 8px); transition: transform 0.2s; }
.tpl-mosaico .item-card:hover { transform: rotate(-0.4deg) translateY(-3px); }
.tpl-mosaico .item-card > img { border-radius: calc(var(--radius) - 12px) calc(var(--radius) - 12px) 0 0; }
.tpl-mosaico .gallery-grid a { border-radius: calc(var(--radius) - 8px); }
.tpl-mosaico .info-card { border: 0; border-radius: calc(var(--radius) - 8px); background: var(--tile); }
.tpl-mosaico .info-card:nth-child(2) { background: var(--color-heading); color: var(--color-bg); }
.tpl-mosaico .info-card:nth-child(2) h3, .tpl-mosaico .info-card:nth-child(2) p, .tpl-mosaico .info-card:nth-child(2) a { color: var(--color-bg); }
.tpl-mosaico .info-card:nth-child(3) { background: var(--color-accent); color: var(--color-on-accent); }
.tpl-mosaico .info-card:nth-child(3) h3, .tpl-mosaico .info-card:nth-child(3) p, .tpl-mosaico .info-card:nth-child(3) a { color: var(--color-on-accent); }

/* Etiqueta antes dos títulos de secção */
.tpl-mosaico .section-head a { background: var(--color-surface); border-radius: 999px; padding: 6px 16px; text-decoration: none; font-size: 0.875rem; }
.tpl-mosaico .section-head a:hover { background: var(--color-heading); color: var(--color-bg); }

/* Cabeçalhos de página e slider em mosaico */
.tpl-mosaico .page-header { background: var(--tile); border: 0; border-radius: var(--radius); margin: var(--gap) var(--gap) 0; }
.tpl-mosaico .slider--hero, .tpl-mosaico .slider--promo, .tpl-mosaico .slider--split { margin: var(--gap) var(--gap) 0; border-radius: var(--radius); }
.tpl-mosaico .slider--cards { margin: var(--gap) 0 0; }
.tpl-mosaico .slider-btn { border-radius: 14px; }
.tpl-mosaico .split { border-radius: var(--radius); overflow: hidden; }

/* Chamada à ação em mosaico de cor */
.tpl-mosaico .cta-band { background: transparent; padding-block: var(--gap) 0; }
.tpl-mosaico .cta-inner { background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius); padding: clamp(2rem, 5vw, 4rem); }
.tpl-mosaico .cta-band h2 { color: var(--color-on-accent); }
.tpl-mosaico .cta-band .btn { background: var(--color-heading); border-color: var(--color-heading); color: #fff; }
.tpl-mosaico .home-reviews, .tpl-mosaico .home-social { background: var(--tile); border-radius: var(--radius); margin-top: var(--gap); padding: clamp(1.5rem, 4vw, 3rem); }
.tpl-mosaico .reviews-card--home { border: 0; max-width: none; background: transparent; padding: 0; }

/* Botões e campos arredondados */
.tpl-mosaico .category-nav a { border-radius: 999px; background: var(--tile); border-color: transparent; }
.tpl-mosaico .form-field input:not([type="checkbox"]):not([type="radio"]), .tpl-mosaico .form-field select, .tpl-mosaico .form-field textarea, .tpl-mosaico .qty-input, .tpl-mosaico .search-form input { border-radius: 16px; }
.tpl-mosaico .cart-summary, .tpl-mosaico .detail-aside, .tpl-mosaico .pdf-viewer, .tpl-mosaico .video-facade, .tpl-mosaico .block-banner, .tpl-mosaico .detail-image, .tpl-mosaico .block-image img { border-radius: var(--radius); }
.tpl-mosaico .contacts-grid .contact-block, .tpl-mosaico .detail-aside { background-color: var(--tile); }
.tpl-mosaico .contacts-grid .contact-block { background: var(--color-accent); }
.tpl-mosaico .page-body, .tpl-mosaico .contacts-grid, .tpl-mosaico .detail-grid, .tpl-mosaico .product-grid, .tpl-mosaico .checkout-grid { background: var(--tile); border-radius: var(--radius); margin-top: var(--gap); padding-inline: clamp(1.25rem, 4vw, 3rem); }
.tpl-mosaico .back-to-top { border-radius: 16px; }