/* ════════════════════════════════════════════════════════════════
   COLUNISTAS — cards, slider, perfil individual, author box
   ════════════════════════════════════════════════════════════════ */

/* ── Grid de colunistas (/colunistas) ───────────────────────────── */
/* Flex (não grid) de propósito: com poucos colunistas a fileira fica
   centralizada em vez de deixar colunas vazias à direita; com muitos,
   quebra em linhas e mantém a mesma largura confortável de cartão. */
.columnist-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8) var(--space-6);
}

.columnist-card {
  position: relative;
  flex: 1 1 250px;
  max-width: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg, var(--paper) 0%, var(--bone) 130%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6) var(--space-7);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.columnist-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.columnist-card__photo-link {
  position: relative;
  display: block;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: var(--space-6);
  background: var(--bone-2);
  flex-shrink: 0;
  box-shadow: 0 0 0 5px var(--paper), 0 10px 24px -10px rgba(16,16,19,0.35);
  transition: box-shadow var(--transition-base);
}
.columnist-card:hover .columnist-card__photo-link {
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 7px var(--wine-pale), 0 14px 28px -10px rgba(16,16,19,0.4);
}
.columnist-card__photo,
.columnist-card__photo-link picture,
.columnist-card__photo-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.columnist-card:hover .columnist-card__photo-link img { transform: scale(1.08); }

.columnist-card__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.columnist-card__name a { color: inherit; }

.columnist-card__rule {
  width: 28px;
  height: 2px;
  background: var(--wine);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.columnist-card__bio {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

.columnist-card__cta { margin-top: auto; }

/* ── Slider de colunistas (home) ────────────────────────────────── */
/* Carrossel de uma única fileira, sempre — independente da quantidade
   de colunistas. Evita os "buracos" que um modo de quebra de linha
   centralizada deixava quando a contagem não preenchia a fileira de
   forma exata (sobretudo no mobile). Quando os cards cabem sem precisar
   rolar, o JS detecta isso (medição real de overflow) e centraliza a
   fileira como reforço visual — nunca o contrário, então o conteúdo
   nunca fica inacessível por rolagem. */
.columnist-slider { position: relative; display: flex; align-items: stretch; gap: var(--space-4); }

.columnist-slider__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: var(--space-2) var(--space-1) var(--space-5);
  flex: 1;
  scrollbar-width: none;
}
.columnist-slider__track::-webkit-scrollbar { display: none; }

.columnist-slider--no-overflow .columnist-slider__track { justify-content: center; }

.columnist-slide {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.columnist-slide:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }

.columnist-slide__photo {
  display: block;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: var(--space-4);
  background: var(--bone-2);
  box-shadow: 0 0 0 4px var(--paper), 0 8px 18px -8px rgba(16,16,19,0.3);
}
.columnist-slide__photo picture,
.columnist-slide__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.columnist-slide:hover .columnist-slide__photo img { transform: scale(1.07); }

.columnist-slide__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}
.columnist-slide__name a { color: inherit; }

.columnist-slide__bio {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--text-2);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.columnist-slider__nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  align-self: center;
  transition: all var(--transition-fast);
}
.columnist-slider__nav:hover { background: var(--wine); border-color: var(--wine); color: #fff; }
.columnist-slider--no-overflow .columnist-slider__nav { display: none; }

/* Dica de "arraste" no mobile: setas ficam escondidas lá (toque é o gesto
   natural), então um indicador sutil substitui as setas só quando o
   carrossel realmente tem mais conteúdo para rolar. Some sozinho depois
   da primeira rolagem do usuário, sem nunca aparecer se não houver overflow. */
.columnist-slider__hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-3);
  letter-spacing: 0.02em;
  transition: opacity var(--transition-base), height var(--transition-base), margin var(--transition-base);
}
.columnist-slider__hint svg { animation: columnist-hint-swipe 1.6s ease-in-out infinite; flex-shrink: 0; }
.columnist-slider__hint.is-hidden { opacity: 0; height: 0; margin: 0; overflow: hidden; }

@keyframes columnist-hint-swipe {
  0%, 100% { transform: translateX(0); opacity: .5; }
  50% { transform: translateX(4px); opacity: 1; }
}

/* ── Página individual do colunista ─────────────────────────────── */
/* Mesmo padrão para todos os colunistas: o layout é 100% controlado
   por CSS/template, nunca por colunista — um novo cadastro herda
   automaticamente a mesma apresentação, sem ajuste manual algum. */

.columnist-hero { padding-bottom: clamp(4.5rem, 9vw, 7rem); }

/* Masthead — card "flutuante" que sobrepõe a base do hero escuro,
   efeito clássico de perfil editorial premium, sutil e contido. */
.columnist-masthead-wrap {
  position: relative;
  z-index: 2;
  margin-top: -56px;
}

.columnist-masthead {
  max-width: 640px;
  margin-inline: auto;
  background: linear-gradient(180deg, var(--paper) 0%, var(--bone) 150%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.columnist-masthead__photo {
  width: 156px;
  height: 156px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bone-2);
  flex-shrink: 0;
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 9px var(--wine-pale), 0 16px 32px -14px rgba(16,16,19,0.4);
}
.columnist-masthead__photo picture,
.columnist-masthead__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.columnist-masthead__divider { width: 1px; height: 72px; background: var(--line); flex-shrink: 0; }

.columnist-masthead__social { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.columnist-masthead__social-label {
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-3);
}
.columnist-masthead__social-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

.columnist-profile__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--ink);
  transition: all var(--transition-fast);
}
.columnist-profile__social-link:hover { background: var(--wine); border-color: var(--wine); color: #fff; transform: translateY(-2px); }

/* Seção da biografia — bloco bem definido, faixa tonalizada para
   diferenciar do masthead e da seção de artigos. */
.columnist-bio-section { padding-top: var(--space-10); }

.columnist-bio-kicker {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  margin-bottom: var(--space-6);
}
.columnist-bio-kicker__line { width: 18px; height: 3px; background: var(--wine); border-radius: 2px; flex-shrink: 0; }

/* Biografia completa — largura confortável de leitura, tipografia
   igual ao corpo dos artigos (consistência editorial). */
.columnist-profile__bio {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: var(--leading-relaxed);
  color: #26262e;
}
.columnist-profile__bio h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink); margin-top: var(--space-8); margin-bottom: var(--space-4); }
.columnist-profile__bio h4 { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); margin-top: var(--space-6); margin-bottom: var(--space-3); }
.columnist-profile__bio p { margin-bottom: var(--space-5); }
.columnist-profile__bio ul, .columnist-profile__bio ol { list-style: revert; padding-left: var(--space-6); margin-bottom: var(--space-5); }
.columnist-profile__bio li { margin-bottom: var(--space-2); }
.columnist-profile__bio a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }
.columnist-profile__bio blockquote {
  border-left: 3px solid var(--wine); padding: var(--space-2) var(--space-6); margin-block: var(--space-6);
  font-family: var(--font-display); font-style: italic; font-size: var(--text-md); color: var(--ink); line-height: var(--leading-snug);
}

/* Biografia longa: recolhida por padrão, expande com "Ver mais".
   O teto de altura é sempre aplicado via CSS (sem JS) — bios curtas
   nunca são recortadas, então nunca há diferença visual nem salto
   de layout para a maioria dos colunistas. */
.columnist-profile__bio-content {
  position: relative;
  max-height: 22rem;
  overflow: hidden;
  transition: max-height 0.45s ease;
}
.columnist-profile__bio-content.is-expanded { max-height: none; }
.columnist-profile__bio-content.is-truncated::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(to bottom, rgba(247,245,242,0), var(--bone) 85%);
  pointer-events: none;
}

.columnist-profile__bio-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-6);
  min-height: 46px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--wine);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.columnist-profile__bio-toggle.is-visible { display: flex; }
.columnist-profile__bio-toggle:hover { background: var(--wine); border-color: var(--wine); color: #fff; }
.columnist-profile__bio-toggle svg { transition: transform var(--transition-fast); }
.columnist-profile__bio-toggle.is-expanded svg { transform: rotate(180deg); }

.columnist-articles-section { padding-top: var(--space-8); }
.columnist-profile__main { min-width: 0; }
.columnist-articles-sub { font-size: var(--text-sm); color: var(--text-2); margin-top: calc(-1 * var(--space-6)); margin-bottom: var(--space-8); }

.columnist-profile__empty {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  background: var(--bone);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-xl);
}

/* ── Author box (final do artigo, quando vinculado a colunista) ──── */
.author-box {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  background: linear-gradient(180deg, var(--paper) 0%, var(--bone) 130%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-top: var(--space-8);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.author-box:hover { box-shadow: var(--shadow-md); border-color: transparent; }

.author-box__photo {
  flex-shrink: 0;
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bone-2);
  box-shadow: 0 0 0 4px var(--paper), 0 8px 18px -8px rgba(16,16,19,0.3);
}
.author-box__photo picture,
.author-box__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.author-box__body { min-width: 0; }

.author-box__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-1);
}

.author-box__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.author-box__name a { color: inherit; }

.author-box__bio {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.author-box__link { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--wine); }
.author-box__link:hover { color: var(--wine-deep); }

/* ── Responsivo ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .columnist-masthead__photo { width: 136px; height: 136px; }
  .columnist-masthead-wrap { margin-top: -44px; }
}

@media (max-width: 768px) {
  .columnist-card { flex: 1 1 200px; max-width: 230px; padding: var(--space-7) var(--space-5) var(--space-6); }
  .columnist-card__photo-link { width: 96px; height: 96px; }

  .columnist-slide { flex: 0 0 160px; padding: var(--space-5) var(--space-3) var(--space-4); }
  .columnist-slide__photo { width: 100px; height: 100px; }
  .columnist-slider__nav { width: 38px; height: 38px; }

  .author-box { flex-direction: column; text-align: center; align-items: center; }

  .columnist-hero { padding-bottom: clamp(3.5rem, 8vw, 5rem); }
  .columnist-masthead { padding: var(--space-6) var(--space-5); gap: var(--space-5); }
  .columnist-masthead__divider { display: none; }
  .columnist-bio-section { padding-top: var(--space-8); }
  .columnist-profile__bio-content { max-height: 18rem; }
}

@media (max-width: 480px) {
  .columnist-grid { gap: var(--space-5) var(--space-3); }
  .columnist-card { flex: 1 1 calc(50% - var(--space-2)); max-width: calc(50% - var(--space-2)); padding: var(--space-6) var(--space-3) var(--space-5); }
  .columnist-card__photo-link { width: 76px; height: 76px; margin-bottom: var(--space-4); }
  .columnist-card__name { font-size: var(--text-sm); }
  .columnist-card__bio { font-size: var(--text-xs); margin-bottom: var(--space-4); }
  .columnist-card__rule { margin-bottom: var(--space-3); }

  .columnist-masthead-wrap { margin-top: -32px; }
  .columnist-masthead { padding: var(--space-5) var(--space-4); }
  .columnist-masthead__photo { width: 108px; height: 108px; }
  .columnist-profile__bio-content { max-height: 15rem; }
  .columnist-profile__bio-toggle { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); }

  /* Setas escondidas no mobile: a interação principal é o toque/arraste
     no carrossel (scroll-snap nativo); as setas voltam no tablet/desktop.
     Em vez delas, uma dica textual sutil indica que dá para arrastar. */
  .columnist-slider__nav { display: none; }
  .columnist-slider:not(.columnist-slider--no-overflow) + .columnist-slider__hint { display: flex; }
  /* Fade lateral discreto: reforça visualmente que há mais colunistas para
     deslizar, sem depender só do texto de dica (que some após o 1º scroll). */
  .columnist-slider:not(.columnist-slider--no-overflow) .columnist-slider__track {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
            mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  }
  .columnist-slider__track { gap: var(--space-4); padding-inline: var(--space-1); }
  .columnist-slide { flex: 0 0 188px; padding: var(--space-5) var(--space-4) var(--space-4); }
  .columnist-slide__photo { width: 92px; height: 92px; margin-bottom: var(--space-3); }
  .columnist-slide__name { font-size: var(--text-sm); margin-bottom: var(--space-3); }
  .columnist-profile__top { gap: var(--space-4); }
}