/**
 * assets/css/portfolio.css
 *
 * Estilo específico do hub de portfolio (/portfolio). Reaproveita os
 * tokens globais (cores, espaçamento, tipografia) de style.css — este
 * arquivo só acrescenta o layout em linhas (categoria + galeria) e o tema
 * escuro desta página, sem alterar nada usado pelo resto do site.
 */

.portfolio-page main {
  background: var(--dark);
  color: #f1efe9;
}

/* The footer CTA (.section--closing) is dark on every page, but its
   .section--border top border defaults to --line (a light grey) — barely
   visible against the light pages it normally sits on, but a stray bright
   line on this page, where the content above is dark too. */
.portfolio-page .section--closing {
  border-top-color: rgba(255, 255, 255, .16);
}

/* The sidebar (and its collapsed-state top bar) is light by default,
   matching every other page; this page is the one exception that needs it
   to blend into the dark background — at every width, since the mobile
   compact header reuses the same .sidebar element (see style.css). */
.portfolio-page .sidebar {
  background: var(--dark);
  border-right-color: rgba(255, 255, 255, .16);
}

.portfolio-page .sidebar-topbar {
  background: var(--dark);
}

/* .sidebar-topbar's border-bottom is only ever meant to show once the bar
   itself is actually visible (collapsed state) — see the transparent/
   var(--line) toggle in style.css. Mirrors that same condition here with
   the dark-page color instead of overriding the color unconditionally. */
.portfolio-page.sidebar-collapsed .sidebar-topbar {
  border-bottom-color: rgba(255, 255, 255, .16);
}

.portfolio-page .sidebar-logo,
.portfolio-page .sidebar-nav a,
.portfolio-page .site-header-nav,
.portfolio-page .sidebar-rail-mark {
  color: #f1efe9;
}

.portfolio-page .sidebar-location,
.portfolio-page .sidebar-date,
.portfolio-page .sidebar-clock,
.portfolio-page .sidebar-rail-clock {
  color: rgba(241, 239, 233, .55);
}

.portfolio-page .sidebar-collapse-toggle {
  background: var(--dark);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(241, 239, 233, .65);
  box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .3);
}

.portfolio-page .sidebar-collapse-toggle:hover {
  background: #f1efe9;
  border-color: #f1efe9;
  color: var(--dark);
}

.portfolio-page .menu-toggle span {
  background: #f1efe9;
}

/* Mobile menu overlay: same content/structure as the sidebar's (About,
   Currently Working On, Last.fm), just recolored to match this page's dark
   background instead of the site's light default. */
.portfolio-page .sidebar.menu-open .mobile-menu {
  background: rgba(11, 11, 10, .97);
}

.portfolio-page .mobile-menu {
  border-bottom-color: rgba(255, 255, 255, .16);
}

.portfolio-page .mobile-menu-nav a {
  color: #f1efe9;
  border-bottom-color: rgba(255, 255, 255, .16);
}

.portfolio-page .mobile-menu-nav span,
.portfolio-page .working-head,
.portfolio-page .working-content small,
.portfolio-page .listening-head,
.portfolio-page .listening-track span,
.portfolio-page .mobile-menu-meta,
.portfolio-page .site-header-meta {
  color: rgba(241, 239, 233, .55);
}

.portfolio-page .working-module,
.portfolio-page .listening-head {
  border-top-color: rgba(255, 255, 255, .16);
}

.portfolio-page .working-content p,
.portfolio-page .working-content span {
  color: rgba(241, 239, 233, .75);
}

.portfolio-page .listening-track strong {
  color: #f1efe9;
}

.portfolio-page .working-dot,
.portfolio-page .live-dot {
  background: #f1efe9;
}

.portfolio-page .spectrogram-canvas {
  color: #f1efe9;
}

.section--portfolio-hero {
  padding-top: clamp(4rem, 10vh, 6rem);
  padding-bottom: 6vh;
}

.section--portfolio-hero .kicker {
  color: rgba(241, 239, 233, .48);
}

/* Mesmo mecanismo de .archive-intro na Home: título à esquerda, texto de
   apoio à direita, com as bases alinhadas via align-items: end. */
.portfolio-hero-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14.6875rem;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: end;
}

.portfolio-hero-title {
  margin: var(--space-3) 0 0;
  font-family: var(--display);
  font-size: clamp(2.7rem, 5.75vw, 5.85rem);
  line-height: .85;
  letter-spacing: -.075em;
  font-weight: 400;
}

/* display: block (em vez de depender do h1 ser um grid) garante a quebra de
   linha mesmo depois que o efeito de letras (data-letter-reveal, ver
   script.js) reestrutura os nós internos do título. */
.portfolio-hero-title-line {
  display: block;
  color: #f1efe9;
}

/* Mesmo tom de cinza do trecho "don't always belong to either" na Home
   (.statement-block span, --statement-muted: #8d8e88), reaproveitado aqui
   porque a página /portfolio já é escura por padrão. */
.portfolio-hero-title-muted {
  color: #8d8e88;
}

.portfolio-hero-desc {
  margin: 0;
  text-align: right;
  font-size: .6875rem;
  line-height: 1.5;
  color: rgba(241, 239, 233, .55);
}

.section--portfolio-list {
  padding-bottom: 14vh;
}

.portfolio-rows {
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.portfolio-row {
  display: grid;
  grid-template-columns: minmax(13rem, 30%) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.75rem, 4vh, 3rem) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  color: #f1efe9;
}

.portfolio-row-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
}

.portfolio-row-number {
  color: rgba(241, 239, 233, .42);
  font: var(--text-meta) var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.portfolio-row-title {
  margin: var(--space-3) 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 400;
}

.portfolio-row-desc {
  max-width: 22rem;
  margin: 0;
  color: rgba(241, 239, 233, .55);
  font-size: var(--text-body-sm);
  line-height: 1.6;
}

.portfolio-row-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(.625rem, 1.5vw, 1.125rem);
}

.portfolio-row-gallery figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dark-soft);
}

/* Leve zoom ao passar o mouse pela categoria, uma imagem de cada vez
   (stagger). */
.portfolio-row-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.portfolio-row-gallery figure:nth-child(2) img {
  transition-delay: 60ms;
}

.portfolio-row-gallery figure:nth-child(3) img {
  transition-delay: 120ms;
}

.portfolio-row:hover .portfolio-row-gallery img {
  transform: scale(1.06);
}

.portfolio-row-empty-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  color: rgba(241, 239, 233, .35);
  font: var(--text-meta) var(--mono);
  text-transform: uppercase;
  background: var(--dark-soft);
}

@media (max-width: 50rem) {
  .portfolio-hero-intro {
    display: block;
  }

  .portfolio-hero-desc {
    max-width: 16.875rem;
    margin: var(--space-4) 0 0 auto;
  }

  .portfolio-row {
    grid-template-columns: 1fr;
  }

  .portfolio-row-meta {
    gap: var(--space-4);
  }

  .portfolio-row-gallery {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/**
 * Categoria de portfolio (site/portfolio-templates/segmento.php).
 *
 * Mesmo tema escuro do hub acima; a página só acrescenta um cabeçalho de
 * segmento (título + descrição + disciplinas), a galeria em grade editorial
 * e uma faixa final para as outras categorias.
 */

.section--portfolio-detail-hero {
  padding-top: clamp(4rem, 10vh, 6rem);
  padding-bottom: 8vh;
}

.portfolio-detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(241, 239, 233, .55);
  font: var(--text-meta) var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .25s ease;
}

.portfolio-detail-back:hover {
  color: #f1efe9;
}

.section--portfolio-detail-hero .kicker {
  margin-top: var(--space-6);
  color: rgba(241, 239, 233, .48);
}

.portfolio-detail-title {
  margin: var(--space-3) 0 0;
  max-width: 20ch;
  color: #f1efe9;
  font-family: var(--display);
  /* Mesmo tamanho do título do hub /portfolio (.portfolio-hero-title) —
     o hub é a referência de escala entre as duas páginas. */
  font-size: clamp(2.7rem, 5.75vw, 5.85rem);
  line-height: .85;
  letter-spacing: -.075em;
  font-weight: 400;
}

.portfolio-detail-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18.75rem;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(3rem, 8vh, 5rem);
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.portfolio-detail-desc {
  max-width: 42rem;
  margin: 0;
  color: rgba(241, 239, 233, .78);
  font-size: clamp(1.05rem, 1.6vw, 1.375rem);
  line-height: 1.6;
}

.portfolio-disciplines {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portfolio-disciplines li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  color: #f1efe9;
  font-size: var(--text-body-sm);
}

.portfolio-disciplines li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.portfolio-disciplines-number {
  color: rgba(241, 239, 233, .42);
  font: var(--text-meta) var(--mono);
  letter-spacing: .06em;
}

/* Texto corrido opcional (categoria.content) sobre a atuação no segmento —
   fica abaixo do resumo curto + disciplinas, antes da galeria. */
.portfolio-detail-body {
  max-width: 38rem;
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(241, 239, 233, .68);
  font-size: var(--text-body-lg);
  line-height: 1.75;
}

.section--portfolio-detail-gallery {
  padding-bottom: 10vh;
}

/* Reaproveita o mosaico .editorial-grid/.piece/.piece-media da Home
   (assets/css/style.css) tal como está — mesmas colunas (2 com a sidebar
   aberta, 3 recolhida, ver body.sidebar-collapsed .editorial-grid),
   mesmas proporções originais das imagens, mesma ordem embaralhada. Só a
   cor muda aqui, para o tema escuro desta página; sem cabeçalho de galeria
   acima (diferente da Home), então o respiro de 15vh do topo não se aplica.
   */
.portfolio-page .editorial-grid {
  margin-top: 0;
}

.portfolio-page .piece-media {
  border-color: rgba(255, 255, 255, .16);
  background: var(--dark-soft);
}

.portfolio-page .piece-fields {
  color: rgba(241, 239, 233, .48);
}

.portfolio-detail-empty {
  padding: 4rem 0;
  color: rgba(241, 239, 233, .35);
  font: var(--text-meta) var(--mono);
  text-align: center;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .16);
}

.section--portfolio-detail-more {
  padding-bottom: 14vh;
}

.section--portfolio-detail-more .kicker {
  color: rgba(241, 239, 233, .48);
}

/* Mesma linguagem visual do resto da página: imagem grande sem moldura,
   título no tamanho de .portfolio-row-title (hub /portfolio), seta que se
   desloca no hover — só que em 2 colunas (a outra categoria, 2 no total
   hoje, cai uma à esquerda e outra à direita; mais de 2 quebra em pares) e
   com proporção mais baixa (4:3, não retrato) para não competir com a
   galeria da própria categoria logo acima. */
.portfolio-detail-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.portfolio-detail-more-card {
  display: block;
  color: #f1efe9;
}

.portfolio-detail-more-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dark-soft);
}

.portfolio-detail-more-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.portfolio-detail-more-card:hover .portfolio-detail-more-media img {
  transform: scale(1.06);
}

.portfolio-detail-more-media .portfolio-row-empty-gallery {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.portfolio-detail-more-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.portfolio-detail-more-title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 400;
}

/* Seta como indicação de clique — mesmo gesto de hover (nudge) usado em
   .archive-arrow/.field-note-list na Home. */
.portfolio-detail-more-arrow {
  color: rgba(241, 239, 233, .55);
  font-size: 1.125rem;
  transition: transform .3s ease, color .3s ease;
}

.portfolio-detail-more-card:hover .portfolio-detail-more-arrow {
  color: #f1efe9;
  transform: translate(.25rem, -.25rem);
}

@media (max-width: 50rem) {
  .portfolio-detail-intro {
    grid-template-columns: 1fr;
  }
}