/**
 * SBP Galeria Single — Gutenberg Block Styles
 * Uses CSS custom properties set inline on the wrapper for dynamic colors.
 */

@import url('https://fonts.googleapis.com/css2?family=Livvic:wght@300;400;600;700&display=swap');

/* ── Wrapper ── */
.sbp-galeria-single-wrap {
    font-family: "Livvic", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --_cor-texto: var(--sbp-gs-cor-texto, #010066);
    --_cor-linha: var(--sbp-gs-cor-linha, #010066);
    --_cor-icon: var(--sbp-gs-cor-icon, #7A7A7A);
    --_cor-icon-hover: var(--sbp-gs-cor-icon-hover, #010066);
    --_thumbs: var(--sbp-gs-thumbs, 7);
}

/* ── Top section ── */
.sbp-galeria-single-wrap .sbp-gs-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.sbp-galeria-single-wrap .sbp-gs-title {
    color: var(--_cor-texto);
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.sbp-galeria-single-wrap .sbp-gs-line {
    height: 2px;
    width: 100%;
    background: var(--_cor-linha);
    opacity: .85;
}

.sbp-galeria-single-wrap .sbp-gs-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.sbp-galeria-single-wrap .sbp-gs-date {
    color: #4B4B4B;
    font-size: 16px;
    font-weight: 400;
}

/* ── Share icons ── */
.sbp-galeria-single-wrap .sbp-gs-share {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sbp-galeria-single-wrap .sbp-gs-share a,
.sbp-galeria-single-wrap .sbp-gs-share button {
    border: 0;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    color: var(--_cor-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: transform .15s ease, color .15s ease, background .15s ease;
    text-decoration: none;
}

.sbp-galeria-single-wrap .sbp-gs-share a:hover,
.sbp-galeria-single-wrap .sbp-gs-share button:hover {
    color: var(--_cor-icon-hover);
    background: rgba(1, 0, 102, 0.06);
    transform: translateY(-1px);
}

/* ── Icons via CSS mask-image (avoids wp_kses SVG stripping) ── */
.sbp-gs-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
    flex-shrink: 0;
}

.sbp-gs-icon--whatsapp {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a9.5 9.5 0 0 0-8.2 14.2L3 22l5.9-1.5A9.5 9.5 0 1 0 12 2zm0 17.2a7.7 7.7 0 0 1-3.9-1l-.3-.2-3.5.9.9-3.4-.2-.3A7.7 7.7 0 1 1 12 19.2zm4.4-4.2c-.2-.1-1.3-.7-1.5-.8-.2-.1-.4-.1-.6.1l-.5.6c-.2.2-.3.2-.6.1a6.3 6.3 0 0 1-1.8-1.1 6.7 6.7 0 0 1-1.2-1.5c-.1-.2 0-.4.1-.5l.4-.5c.1-.2.2-.4.1-.6l-.6-1.6c-.1-.2-.2-.4-.5-.4h-.4c-.2 0-.5.1-.7.3-.2.2-.9.9-.9 2.2 0 1.3.9 2.5 1 2.7.1.2 1.9 3 4.7 4.1.7.3 1.2.5 1.6.6.7.2 1.4.2 1.9.1.6-.1 1.3-.5 1.5-1 .2-.5.2-1 .2-1.1 0-.1-.2-.2-.4-.3z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a9.5 9.5 0 0 0-8.2 14.2L3 22l5.9-1.5A9.5 9.5 0 1 0 12 2zm0 17.2a7.7 7.7 0 0 1-3.9-1l-.3-.2-3.5.9.9-3.4-.2-.3A7.7 7.7 0 1 1 12 19.2zm4.4-4.2c-.2-.1-1.3-.7-1.5-.8-.2-.1-.4-.1-.6.1l-.5.6c-.2.2-.3.2-.6.1a6.3 6.3 0 0 1-1.8-1.1 6.7 6.7 0 0 1-1.2-1.5c-.1-.2 0-.4.1-.5l.4-.5c.1-.2.2-.4.1-.6l-.6-1.6c-.1-.2-.2-.4-.5-.4h-.4c-.2 0-.5.1-.7.3-.2.2-.9.9-.9 2.2 0 1.3.9 2.5 1 2.7.1.2 1.9 3 4.7 4.1.7.3 1.2.5 1.6.6.7.2 1.4.2 1.9.1.6-.1 1.3-.5 1.5-1 .2-.5.2-1 .2-1.1 0-.1-.2-.2-.4-.3z' fill='%23000'/%3E%3C/svg%3E");
}

.sbp-gs-icon--facebook {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8.5V7.2c0-.6.4-1 1-1h1V4h-2c-1.7 0-3 1.3-3 3v1.5H9v2.5h2V20h3v-9h2.2l.3-2.5H14z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8.5V7.2c0-.6.4-1 1-1h1V4h-2c-1.7 0-3 1.3-3 3v1.5H9v2.5h2V20h3v-9h2.2l.3-2.5H14z' fill='%23000'/%3E%3C/svg%3E");
}

.sbp-gs-icon--instagram {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 4.2A3.8 3.8 0 1 1 8.2 12 3.8 3.8 0 0 1 12 8.2zm0 2A1.8 1.8 0 1 0 13.8 12 1.8 1.8 0 0 0 12 10.2zM17.8 6.6a.8.8 0 1 1-.8-.8.8.8 0 0 1 .8.8z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 4.2A3.8 3.8 0 1 1 8.2 12 3.8 3.8 0 0 1 12 8.2zm0 2A1.8 1.8 0 1 0 13.8 12 1.8 1.8 0 0 0 12 10.2zM17.8 6.6a.8.8 0 1 1-.8-.8.8.8 0 0 1 .8.8z' fill='%23000'/%3E%3C/svg%3E");
}

.sbp-gs-icon--link {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 13.4a1 1 0 0 1 0-1.4l2.4-2.4a3 3 0 0 1 4.2 4.2l-2.1 2.1a3 3 0 0 1-4.2 0 1 1 0 1 1 1.4-1.4 1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0-1.4-1.4l-2.4 2.4a3 3 0 0 1-4.2-4.2l2.1-2.1a3 3 0 0 1 4.2 0 1 1 0 1 1-1.4 1.4 1 1 0 0 0-1.4 0L8.2 9.6a1 1 0 0 0 1.4 1.4z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 13.4a1 1 0 0 1 0-1.4l2.4-2.4a3 3 0 0 1 4.2 4.2l-2.1 2.1a3 3 0 0 1-4.2 0 1 1 0 1 1 1.4-1.4 1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0-1.4-1.4l-2.4 2.4a3 3 0 0 1-4.2-4.2l2.1-2.1a3 3 0 0 1 4.2 0 1 1 0 1 1-1.4 1.4 1 1 0 0 0-1.4 0L8.2 9.6a1 1 0 0 0 1.4 1.4z' fill='%23000'/%3E%3C/svg%3E");
}

.sbp-gs-icon--arrow_left {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 18l-6-6 6-6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 18l-6-6 6-6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sbp-gs-icon--arrow_right {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Stage (main image area) ── */
.sbp-galeria-single-wrap .sbp-gs-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F4F4F4;
    border-radius: 6px;
    padding: 18px;
}

.sbp-galeria-single-wrap .sbp-gs-main {
    width: min(720px, 100%);
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sbp-galeria-single-wrap .sbp-gs-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── Navigation arrows ── */
.sbp-galeria-single-wrap .sbp-gs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #fff;
    opacity: .9;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 2;
}

.sbp-galeria-single-wrap .sbp-gs-arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.02);
}

.sbp-galeria-single-wrap .sbp-gs-arrow:active {
    transform: translateY(-50%) scale(0.98);
}

.sbp-galeria-single-wrap .sbp-gs-arrow.left  { left: 14px; }
.sbp-galeria-single-wrap .sbp-gs-arrow.right { right: 14px; }

/* ── Thumbnails ── */
.sbp-galeria-single-wrap .sbp-gs-thumbs {
    margin-top: 14px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
    align-items: stretch;
}

.sbp-galeria-single-wrap .sbp-gs-thumb {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.sbp-galeria-single-wrap .sbp-gs-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sbp-galeria-single-wrap .sbp-gs-thumb:hover {
    transform: translateY(-1px);
    border-color: rgba(1, 0, 102, 0.35);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.sbp-galeria-single-wrap .sbp-gs-thumb.active {
    border-color: var(--_cor-linha);
    box-shadow: 0 10px 22px rgba(1, 0, 102, 0.10);
}

/* ── Toast ── */
.sbp-galeria-single-wrap .sbp-gs-toast {
    position: fixed;
    left: 18px;
    bottom: 18px;
    background: #111;
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 99999;
}

.sbp-galeria-single-wrap .sbp-gs-toast.show {
    opacity: .95;
    transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .sbp-galeria-single-wrap .sbp-gs-title { font-size: 30px; }
    .sbp-galeria-single-wrap .sbp-gs-arrow { width: 50px; height: 50px; }
    .sbp-galeria-single-wrap .sbp-gs-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .sbp-galeria-single-wrap .sbp-gs-title { font-size: 26px; }
    .sbp-galeria-single-wrap .sbp-gs-stage { padding: 12px; }
    .sbp-galeria-single-wrap .sbp-gs-arrow { width: 46px; height: 46px; }
    .sbp-galeria-single-wrap .sbp-gs-arrow.left  { left: 10px; }
    .sbp-galeria-single-wrap .sbp-gs-arrow.right { right: 10px; }
    .sbp-galeria-single-wrap .sbp-gs-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Editor placeholder ── */
.sbp-gs-editor-placeholder {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    color: #999;
    font-family: "Livvic", system-ui, sans-serif;
}

.sbp-gs-editor-placeholder svg {
    display: block;
    margin: 0 auto 10px;
    opacity: .4;
}