/* ====================================================
   PÁGINA — SINGLE (Oficineiro / Homenageado)
   Projeto: Abril pra Angola
   Layout: CSS Grid exclusivamente | sem Flexbox
   Unidade: rem (base 16px = 1rem)
   ==================================================== */

/* ── Wrapper principal ─────────────────────────────── */
.single-person {
    background-color: var(--color-neutral-900);
    min-height: 60vh;
    /* Sem padding-block-start aqui: o offset do header fixo é
       gerido pelo breadcrumb (primeiro filho), assim como
       o hero-banner faz nas outras páginas. O background escuro
       cobre desde y=0, eliminando qualquer espaço branco. */
}

/* ────────────────────────────────────────────────────
   BREADCRUMB
   ──────────────────────────────────────────────────── */
.single-person__breadcrumb {
    background-color: var(--color-neutral-800);
    border-block-end: var(--border-width-thin) solid rgba(255, 255, 255, 0.06);
    padding: 1rem 0;
}

.single-person__breadcrumb-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    gap: var(--spacing-2);                         /* 8px */
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;                              /* mobile scroll sem quebrar */
}

.single-person__breadcrumb-item {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);                /* 14px */
    color: var(--color-neutral-400);
    white-space: nowrap;
}

/* Separador via pseudo-elemento */
.single-person__breadcrumb-item:not(:last-child)::after {
    content: '/';
    color: var(--color-neutral-600);
    font-weight: var(--font-weight-light);
}

.single-person__breadcrumb-item a {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    gap: var(--spacing-1);                         /* 4px */
    color: var(--color-neutral-400);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.single-person__breadcrumb-item a:hover {
    color: var(--color-primary-0);
}

.single-person__breadcrumb-item a i {
    font-size: var(--font-size-xs);               /* 12px */
}

.single-person__breadcrumb-item--current {
    color: var(--color-neutral-200);
    font-weight: var(--font-weight-medium);
}

/* ────────────────────────────────────────────────────
   ARTIGO — LAYOUT PRINCIPAL
   ──────────────────────────────────────────────────── */
.single-person__article {
    padding: 0;
}

/* Grid: mobile → coluna única | ≥ 768px → sidebar + conteúdo */
.single-person__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-10);                        /* 40px */
    padding-block: var(--spacing-16);              /* 64px */
    align-items: start;
}

/* ────────────────────────────────────────────────────
   SIDEBAR
   ──────────────────────────────────────────────────── */
.single-person__aside {
    display: grid;
    gap: var(--spacing-6);                         /* 24px */
    justify-items: center;                         /* centralizado no mobile */
}

/* ── Figura ─────────────────────────────────────────── */
.single-person__figure {
    margin: 0;
}

/* Imagem: altura 200px (12.5rem), largura proporcional */
.single-person__photo {
    height: 12.5rem;                               /* 200px */
    width: auto;
    max-width: 100%;
    border-radius: var(--radius-xl);               /* 16px */
    display: block;
    object-fit: cover;
    object-position: center top;
    border: 0.1875rem solid rgba(250, 178, 6, 0.35); /* 3px primary */
    box-shadow:
        var(--shadow-xl),
        0 0 0 0.375rem rgba(250, 178, 6, 0.08);   /* halo suave */
    transition:
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.single-person__photo:hover {
    border-color: var(--color-primary-0);
    box-shadow:
        var(--shadow-2xl),
        0 0 0 0.375rem rgba(250, 178, 6, 0.18);
}

/* Placeholder quando não há imagem */
.single-person__photo-placeholder {
    display: grid;
    place-items: center;
    height: 12.5rem;                               /* 200px */
    width: 12.5rem;                               /* 200px */
    background-color: var(--color-neutral-700);
    border-radius: var(--radius-xl);
    color: var(--color-neutral-500);
    font-size: var(--font-size-4xl);               /* 48px */
    border: 0.1875rem solid rgba(255, 255, 255, 0.08);
}

/* ── Redes Sociais — ícones 24 × 24 px ───────────────── */
.single-person__social {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 2rem;                       /* 32px — touch target seguro */
    justify-content: center;
    gap: var(--spacing-3);                         /* 12px */
}

.single-person__social-link {
    display: grid;
    place-items: center;
    width: 2rem;                                   /* 32px touch target */
    height: 2rem;                                  /* 32px touch target */
    color: var(--color-neutral-500);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

/* Ícone com exatamente 24 × 24 px via font-size */
.single-person__social-link i {
    font-size: 1.5rem;                             /* 24px */
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.single-person__social-link:hover {
    color: var(--color-primary-0);
    transform: scale(1.2) translateY(-0.125rem);  /* -2px */
}

.single-person__social-link:focus-visible {
    outline: var(--border-width-base) solid var(--color-primary-0);
    outline-offset: 0.125rem;
    border-radius: var(--radius-sm);
}

/* Cores individuais por rede no hover — opcional mas elegante */
.single-person__social-link[data-network="instagram"]:hover { color: #E1306C; }
.single-person__social-link[data-network="facebook"]:hover  { color: #1877F2; }
.single-person__social-link[data-network="youtube"]:hover   { color: #FF0000; }
.single-person__social-link[data-network="whatsapp"]:hover  { color: #25D366; }
.single-person__social-link[data-network="tiktok"]:hover    { color: #69C9D0; }
.single-person__social-link[data-network="linkedin"]:hover  { color: #0A66C2; }
.single-person__social-link[data-network="spotify"]:hover   { color: #1DB954; }
.single-person__social-link[data-network="x"]:hover         { color: var(--color-neutral-100); }

/* ────────────────────────────────────────────────────
   CONTEÚDO PRINCIPAL
   ──────────────────────────────────────────────────── */
.single-person__main {
    display: grid;
    gap: var(--spacing-8);                         /* 32px */
    align-content: start;
    min-width: 0;                                  /* evita overflow em grid */
}

/* ── Cabeçalho (grupo + H1) ──────────────────────── */
.single-person__header {
    display: grid;
    gap: var(--spacing-3);                         /* 12px */
}

/* Badge do Grupo / Escola */
.single-person__group {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--spacing-2);                         /* 8px */
    margin: 0;
    font-size: var(--font-size-sm);                /* 14px */
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-0);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

.single-person__group i {
    font-size: var(--font-size-sm);
}

/* H1 — padrão do projeto */
.single-person__title {
    font-size: var(--font-size-3xl);               /* 36px */
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-0);
    line-height: var(--line-height-tight);
    margin: 0;
}

/* Linha decorativa dourada — padrão do projeto (igual ao section-speakers) */
.single-person__title::after {
    content: '';
    display: block;
    width: 3rem;                                   /* 48px */
    height: 0.25rem;                               /* 4px  */
    background-color: var(--color-primary-0);
    border-radius: var(--radius-full);
    margin-block-start: var(--spacing-4);          /* 16px */
    margin-inline: 0;
}

/* ────────────────────────────────────────────────────
   ENTRY-CONTENT — Tipografia do conteúdo
   ──────────────────────────────────────────────────── */
.single-person__content {
    display: grid;
    gap: var(--spacing-5);                         /* 20px entre blocos */
    color: var(--color-neutral-300);
    font-size: var(--font-size-md);                /* 18px */
    line-height: var(--line-height-relaxed);       /* 1.625 */
}

/* ── Parágrafos ───────────────────────────────────── */
.single-person__content p {
    margin: 0;
    color: var(--color-neutral-300);
}

/* ── Headings dentro do conteúdo ─────────────────── */
.single-person__content h2,
.single-person__content h3,
.single-person__content h4,
.single-person__content h5,
.single-person__content h6 {
    color: var(--color-neutral-0);
    margin-block-start: var(--spacing-4);
    margin-block-end: 0;
    line-height: var(--line-height-snug);
}

.single-person__content h2 { font-size: var(--font-size-2xl);  } /* 30px */
.single-person__content h3 { font-size: var(--font-size-xl);   } /* 24px */
.single-person__content h4 { font-size: var(--font-size-lg);   } /* 20px */
.single-person__content h5,
.single-person__content h6 { font-size: var(--font-size-md);   } /* 18px */

/* Linha dourada nos headings internos (sutil) */
.single-person__content h2::after {
    content: '';
    display: block;
    width: 2rem;                                   /* 32px */
    height: 0.1875rem;                             /* 3px */
    background-color: var(--color-primary-0);
    border-radius: var(--radius-full);
    margin-block-start: var(--spacing-2);
    opacity: 0.6;
}

/* ── Listas não-ordenadas ─────────────────────────── */
.single-person__content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-2);                         /* 8px */
}

.single-person__content ul > li {
    display: grid;
    grid-template-columns: 0.5rem 1fr;
    align-items: start;
    gap: var(--spacing-3);                         /* 12px */
    color: var(--color-neutral-300);
}

/* Marcador personalizado via ::before */
.single-person__content ul > li::before {
    content: '';
    display: block;
    width: 0.375rem;                               /* 6px */
    height: 0.375rem;
    background-color: var(--color-primary-0);
    border-radius: var(--radius-full);
    margin-block-start: 0.5625rem;                 /* alinha com topo da linha de texto */
}

/* ── Listas ordenadas ─────────────────────────────── */
.single-person__content ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-2);
    counter-reset: lista-ordenada;
}

.single-person__content ol > li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    align-items: start;
    gap: var(--spacing-3);
    color: var(--color-neutral-300);
    counter-increment: lista-ordenada;
}

.single-person__content ol > li::before {
    content: counter(lista-ordenada) '.';
    color: var(--color-primary-0);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* ── Links no conteúdo ────────────────────────────── */
.single-person__content a {
    color: var(--color-primary-300);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25rem;
    transition: color var(--transition-fast);
}

.single-person__content a:hover {
    color: var(--color-primary-0);
}

/* ── Strong / Em ─────────────────────────────────── */
.single-person__content strong,
.single-person__content b {
    color: var(--color-neutral-0);
    font-weight: var(--font-weight-bold);
}

.single-person__content em,
.single-person__content i:not([class]) {
    font-style: italic;
    color: var(--color-neutral-200);
}

/* ── Blockquote ──────────────────────────────────── */
.single-person__content blockquote {
    border-inline-start: 0.25rem solid var(--color-primary-0);
    padding-inline-start: var(--spacing-5);        /* 20px */
    padding-block: var(--spacing-2);
    margin: 0;
    color: var(--color-neutral-400);
    font-style: italic;
    background-color: rgba(250, 178, 6, 0.05);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.single-person__content blockquote p {
    margin: 0;
}

/* ── Imagens dentro do conteúdo ──────────────────── */
.single-person__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
    margin-inline: auto;
    box-shadow: var(--shadow-lg);
}

/* ── Figcaption ──────────────────────────────────── */
.single-person__content figcaption {
    text-align: center;
    font-size: var(--font-size-sm);                /* 14px */
    color: var(--color-neutral-500);
    margin-block-start: var(--spacing-2);
    font-style: italic;
}

/* ── Separador ──────────────────────────────────── */
.single-person__content hr {
    border: none;
    border-block-start: var(--border-width-thin) solid rgba(255, 255, 255, 0.1);
    margin-block: var(--spacing-6);
}

/* ────────────────────────────────────────────────────
   YOUTUBE / VÍDEO — EMBEDS RESPONSIVOS
   Suporta Gutenberg (wp-block-embed) e Classic Editor
   ──────────────────────────────────────────────────── */

/* Wrapper Gutenberg */
.single-person__content .wp-block-embed {
    margin: 0;
}

.single-person__content .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    padding-block-start: 56.25%;                   /* proporção 16:9 */
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-neutral-800);
}

.single-person__content .wp-block-embed__wrapper iframe,
.single-person__content .wp-block-embed__wrapper embed,
.single-person__content .wp-block-embed__wrapper object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* oEmbed / Classic Editor — div gerado pelo WordPress */
.single-person__content .wp-video,
.single-person__content .wp-has-aspect-ratio > .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    padding-block-start: 56.25%;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.single-person__content .wp-video iframe,
.single-person__content .wp-has-aspect-ratio > .wp-block-embed__wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* iframes soltos (inserção manual no classic editor) */
.single-person__content > iframe,
.single-person__content p > iframe {
    display: block;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: var(--radius-lg);
}

/* ────────────────────────────────────────────────────
   RESPONSIVO — MOBILE LANDSCAPE / TABLET ≥ 768px
   ──────────────────────────────────────────────────── */
@media (min-width: 48rem) {

    .single-person__layout {
        grid-template-columns: 11.25rem 1fr;       /* 180px sidebar + fluido */
        gap: var(--spacing-12);                    /* 48px */
    }

    .single-person__aside {
        justify-items: start;                      /* alinha à esquerda */
        position: sticky;
        top: calc(var(--header-height, 182px) + var(--spacing-8)); /* header + 32px */
    }

    .single-person__social {
        justify-content: start;
    }

    .single-person__title {
        font-size: var(--font-size-4xl);           /* 48px */
    }
}

/* ────────────────────────────────────────────────────
   RESPONSIVO — DESKTOP ≥ 1024px
   ──────────────────────────────────────────────────── */
@media (min-width: 64rem) {

    .single-person__layout {
        grid-template-columns: 15rem 1fr;          /* 240px sidebar + fluido */
        gap: var(--spacing-16);                    /* 64px */
    }

    .single-person__content {
        font-size: var(--font-size-md);            /* 18px */
    }
}

/* ────────────────────────────────────────────────────
   RESPONSIVO — WIDE DESKTOP ≥ 1280px
   ──────────────────────────────────────────────────── */
@media (min-width: 80rem) {

    .single-person__layout {
        grid-template-columns: 17rem 1fr;          /* 272px sidebar + fluido */
    }
}

/* ────────────────────────────────────────────────────
   ACESSIBILIDADE — REDUCED MOTION
   ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .single-person__photo,
    .single-person__social-link {
        transition: none;
    }

    .single-person__photo:hover {
        transform: none;
    }

    .single-person__social-link:hover {
        transform: none;
    }
}