/**
 * Academic pages stylesheet, for CEP, Extensão, Monitorias and Pesquisa.
 *
 * Enqueued by unexmed_estilo_paginas_academicas() in inc/functions-paginas-academicas.php, on
 * wp_enqueue_scripts and only for pages on template-pagina-academica.php. It is never loaded on any
 * other route, which is what keeps these generically named selectors (.grid-cards, .card-membro,
 * .abas-lista) from reaching markup they were not written for.
 *
 * This is a hand-written stylesheet, like css/login.css. css/style.css is a pre-built minified
 * bundle produced by the external IWWA build project and must not be edited here, which is why the
 * rules below exist at all: the bundle carries no tab rules, no photo-card grid and no globally
 * scoped .title-page. They use the bundle's own colour tokens (#0F264F, #244E99, #8FC73E, #F4F6F9)
 * so the two read as one design system. Folding them into IWWA's SCSS is logged as section I5 of
 * PENDING-ITEMS.md.
 *
 * Image URLs are relative to this file, so ../img/ resolves as themes/unexmed/img/, the same way
 * login.css and the bundle reference their assets.
 *
 * This theme has no heading reset, so every heading rule below declares its own margin.
 *
 * Rules are kept one per line.
 *
 * TABLE OF CONTENTS
 * 1. Opening hero
 * 2. Campus tabs
 * 3. Card grid (CEP members, research groups)
 * 4. Text blocks: rows and boxes
 * 5. Filtered documents section heading
 * 6. Fixed document columns
 */

/* 1. Opening hero
   ------------------------------------------------------------------------- */
.sessao-academico-hero{ padding:40px 0; }
.sessao-academico-hero .container{ display:flex; flex-direction:column; gap:20px; }
.sessao-academico-hero .title{ color:#0F264F; font-size:2.25rem; font-weight:700; line-height:1.15em; margin:0; }
.sessao-academico-hero .box-content{ flex:1; }
@media (min-width:992px){
    .sessao-academico-hero{ padding:90px 0; }
    .sessao-academico-hero .container{ flex-direction:row; gap:0 120px; align-items:flex-start; }
    .sessao-academico-hero .box-title{ width:45%; flex-shrink:0; }
    .sessao-academico-hero .title{ font-size:3.5rem; }
}

/* 2. Campus tabs
   ------------------------------------------------------------------------- */
.abas-lista{ display:flex; flex-wrap:wrap; gap:20px; border-bottom:2px solid #EDEDED; margin:0 0 30px 0; }
.abas-lista button{ background:none; color:#A0A0A0; cursor:pointer; font-size:1.125rem; padding:10px 0; border-bottom:3px solid transparent; margin-bottom:-2px; transition:color 300ms, border-color 300ms; }
.abas-lista button:hover{ color:#8FC73E; }
.abas-lista button[aria-selected="true"]{ color:#0F264F; border-bottom-color:#8FC73E; font-weight:700; }

/* 3. Card grid
   ------------------------------------------------------------------------- */
.sessao-academico-cards{ padding:0 0 40px 0; }
.sessao-academico-cards .box-title{ margin:0 0 25px 0; }
.sessao-academico-cards .title{ color:#0F264F; font-size:1.75rem; font-weight:700; line-height:1.2em; margin:0; }
.grid-cards{ display:flex; flex-wrap:wrap; gap:20px; }
.grid-cards > *{ width:100%; }
.card-membro{ background:#F4F6F9; border:1px solid transparent; border-radius:15px; display:flex; gap:15px; padding:20px; transition:box-shadow 300ms, border-color 300ms; }
.card-membro:hover{ border-color:#8FC73E; box-shadow:0 5px 20px rgba(0,0,0,.08); }
/* Photos standardised to 4:5. The source images range from 0.451 to 1.160 in ratio, so
   leaving the height automatic gives every card a different height. The ratio lives on the
   box and the <img> fills it, rather than depending on the image's intrinsic ratio.
   object-position sits above centre because most photos are portraits with the face high
   in the frame; 20% rather than top avoids showing only background in the ones with room
   above the head.

   align-self:flex-start is required, not decoration. .foto is a flex item and
   .card-membro's align-items defaults to stretch, so the box is stretched to the text's
   height whenever the text is taller than the photo, and the per-card height variation
   comes straight back, driven by the length of the name. It is invisible on desktop, where
   the photo is the tallest element, and shows at narrow widths.

   4:5 (0.8) is close to the natural ratio of the source photos, whose median is 0.751, so
   the crop is minimal: a 3:4 photo keeps 94% of its height. The 20% object-position keeps
   what little is cropped away from the face.

   The width is min(200px,45%) rather than a flat 200px because the card is a flex row: the
   text column will not compress below its 124px min-content width, and below that the card
   overflows. At two columns a fixed 200px overflows at both 768px and 375px. With the
   min() the photo is exactly 200px on any card wider than about 484px of content, which is
   from roughly 1160px of viewport, and shrinks by itself below that with no per-breakpoint
   step. */
.card-membro .foto{ flex-shrink:0; width:min(200px,45%); aspect-ratio:4/5; align-self:flex-start; }
.card-membro .foto img{ border-radius:10px; display:block; width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.card-membro .name{ color:#0F264F; font-size:1.25rem; font-weight:700; line-height:1.3em; margin:0 0 5px 0; }
.card-membro .cargo{ color:#244E99; display:block; font-size:.875rem; font-weight:500; }
.card-membro .descricao{ color:#A0A0A0; display:block; font-size:.875rem; margin:5px 0 0 0; }

/* Research group cards: no photo column, so no flex row, which exists only to seat one.
   Their description is rich text, so it gets breathing room of its own. */
.card-grupo{ display:block; }
.card-grupo .descricao{ color:#5A5A5A; font-size:1rem; line-height:1.6em; margin:10px 0 0 0; }

/* The diagonal arrow comes from the same icon .documentos-colunas rotates by -90deg to
   get a horizontal one. */
.card-membro .link{ color:#0F264F; display:inline-flex; align-items:center; gap:6px; font-size:1rem; margin:15px 0 0 0; transition:color 300ms; }
.card-membro .link::after{ content:""; background:url("../img/icons/icon-arrow-menu.svg") center no-repeat; background-size:contain; flex-shrink:0; width:13px; height:13px; transform:rotate(-135deg); transition:transform 350ms; }
.card-membro .link:hover{ color:#8FC73E; }
.card-membro .link:hover::after{ transform:rotate(-135deg) translateY(3px); }
@media (min-width:768px){
    .grid-cards[data-colunas="2"] > *{ width:calc(50% - 10px); }
    .grid-cards[data-colunas="3"] > *{ width:calc(33.333% - 14px); }
}
@media (min-width:992px){
    .sessao-academico-cards{ padding:0 0 90px 0; }
    .sessao-academico-cards .title{ font-size:2.25rem; }
}

/* 4. Text blocks: rows and boxes
   ------------------------------------------------------------------------- */
.sessao-academico-blocos{ padding:0 0 40px 0; }
.sessao-academico-blocos .box-title{ margin:0 0 15px 0; }
.sessao-academico-blocos .title{ color:#0F264F; font-size:1.75rem; font-weight:700; line-height:1.2em; margin:0; }
.sessao-academico-blocos .resume{ color:#5A5A5A; font-size:1rem; line-height:1.6em; margin:0 0 25px 0; max-width:820px; }
.bloco-linha{ background:#F4F6F9; border-radius:15px; display:flex; flex-direction:column; gap:10px; padding:20px; margin:0 0 15px 0; }
.bloco-linha .bloco-titulo h2,
.bloco-linha .bloco-titulo h3,
.bloco-linha .bloco-titulo h4{ color:#0F264F; font-size:1.125rem; font-weight:700; line-height:1.3em; margin:0; }
.grid-caixas{ display:flex; flex-wrap:wrap; gap:20px; }
.grid-caixas > *{ width:100%; }
.bloco-caixa{ background:#F4F6F9; border-radius:15px; padding:20px; }
@media (min-width:768px){
    .bloco-linha{ flex-direction:row; gap:0 40px; padding:25px 30px; }
    .bloco-linha .bloco-titulo{ width:38%; flex-shrink:0; }
    .grid-caixas > *{ width:calc(50% - 10px); }
}
@media (min-width:992px){
    .sessao-academico-blocos{ padding:0 0 90px 0; }
    .sessao-academico-blocos .title{ font-size:2.25rem; }
}

/* 5. Filtered documents section heading
   -------------------------------------------------------------------------
   A class of its own rather than .box-title: inside this section .box-title is
   already the sidebar's label ("Campus", "Tipos de documentos"), and reusing it
   would drag these sizes over there. */
.sessao-content-documentos .box-title-academico .title{ color:#0F264F; font-size:1.75rem; font-weight:700; line-height:1.2em; margin:0; }
@media (min-width:992px){
    .sessao-content-documentos .box-title-academico .title{ font-size:2.25rem; }
}

/* 6. Fixed document columns
   ------------------------------------------------------------------------- */
.sessao-academico-documentos-colunas{ padding:0 0 40px 0; }
.sessao-academico-documentos-colunas .box-title{ margin:0 0 25px 0; }
.sessao-academico-documentos-colunas .title{ color:#0F264F; font-size:1.75rem; font-weight:700; line-height:1.2em; margin:0; }
.documentos-colunas{ display:flex; flex-wrap:wrap; gap:30px; }
.documentos-colunas .coluna{ width:100%; display:flex; flex-direction:column; gap:15px; }
.documentos-colunas .coluna-titulo{ color:#0F264F; font-size:1.5rem; font-weight:700; line-height:1.2em; margin:0; }
.documentos-colunas .item{ background:#fff; border:1px solid #E3E3E3; border-radius:15px; display:flex; align-items:flex-start; gap:15px; padding:20px; transition:box-shadow 300ms, border-color 300ms; }
.documentos-colunas .item:hover{ border-color:#8FC73E; box-shadow:0 5px 20px rgba(0,0,0,.08); }
.documentos-colunas .item .text{ display:flex; flex-direction:column; gap:5px; }
.documentos-colunas .item .date{ color:#A0A0A0; font-size:1rem; line-height:1.4em; }
.documentos-colunas .item .name{ color:#244E99; font-size:1rem; font-weight:500; line-height:1.3em; transition:color 300ms; }
.documentos-colunas .item:hover .name{ color:#8FC73E; }
.documentos-colunas .item .icon{ background:url("../img/icons/icon-arrow-menu.svg") center no-repeat; background-size:contain; flex-shrink:0; width:18px; height:18px; margin:auto 0 auto auto; transform:rotate(-90deg); transition:transform 350ms; }
.documentos-colunas .item:hover .icon{ transform:translateX(5px) rotate(-90deg); }
@media (min-width:768px){
    .documentos-colunas .coluna{ width:calc(50% - 15px); }
}
@media (min-width:992px){
    .sessao-academico-documentos-colunas{ padding:0 0 90px 0; }
    .sessao-academico-documentos-colunas .title{ font-size:2.25rem; }
}