/* UEPA Marabá — blocos específicos das páginas (home, notícias, eventos, institucional, UESSPA etc.) */

/* ===== Home ===== */

.home-hero {
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: 48px;
  padding: clamp(32px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.home-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--color-accent-600);
  right: -120px;
  bottom: -200px;
}
.home-hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}
.nowrap { white-space: nowrap; }

.home-hero h1 {
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.home-hero-copy > p {
  font-size: 18px;
  max-width: 520px;
  margin: 0;
  color: var(--color-accent-100);
  text-wrap: pretty;
}
.campus-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent-600);
  color: var(--color-bg);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  font-size: 13px;
  font-weight: 600;
}
.campus-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent-2);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

.hero-photo {
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
  aspect-ratio: 1;
}
.hero-photo-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-accent-600);
}
.hero-photo-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after {
  content: "";
  position: absolute;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent-2);
  left: -4%;
  bottom: 6%;
  z-index: 1;
}

.home-main { gap: clamp(56px, 8vw, 104px); }

.section-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.section-row .section-title { font-size: clamp(30px, 3.6vw, 42px); margin: 0 0 6px; }

.course-pill {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border-radius: 999px;
  padding: 10px 20px 10px 10px;
  color: var(--color-text);
}
.course-pill:hover { background: var(--color-accent-100); color: var(--color-accent); }
.course-num {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 17px;
}
.card .course-num { align-self: flex-start; flex: 0 0 auto; width: 48px; margin-bottom: var(--space-2); }
.course-name { flex: 1; font-family: var(--font-heading); font-size: 18px; line-height: 1.2; }
.course-pill svg { flex: 0 0 auto; color: var(--color-accent-2); }

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-accent);
}

/* ===== Notícias ===== */

.month-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }
.month-btn {
  border: 2px solid var(--color-accent-400);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 999px;
  padding: 8px 16px;
  background: transparent;
  color: var(--color-bg);
}
.month-btn:hover { background: var(--color-accent-600); color: var(--color-bg); }
a.month-btn { display: inline-block; }
.month-btn[aria-pressed="true"] {
  border-color: transparent;
  background: var(--color-bg);
  color: var(--color-accent);
}

.featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  color: var(--color-text);
}
.featured:hover { color: var(--color-text); }
.featured-media { position: relative; aspect-ratio: 4 / 3; }
.featured-media::before {
  content: "";
  position: absolute;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent-2);
  left: -3%;
  top: -5%;
  z-index: 0;
}
.featured-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.featured-img img, .news-thumb-img img { width: 100%; height: 100%; object-fit: cover; }
.featured-copy { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.featured-copy h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  margin: 0;
  color: var(--color-accent);
  text-wrap: balance;
}
.featured-copy p { margin: 0; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.featured-copy .btn { margin-top: var(--space-2); }

.more-badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  background: var(--color-bg);
  color: var(--color-accent);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.more-badge.is-small { right: 12px; bottom: 12px; padding: 4px 12px; font-size: 12px; }

.news-month { display: flex; align-items: baseline; gap: var(--space-3); }

.news-card, .event-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 10px 10px var(--space-6);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
a.news-card:hover, .event-card:hover { box-shadow: var(--shadow-md); color: var(--color-text); }
.news-thumb { position: relative; display: block; aspect-ratio: 4 / 3; }
.news-thumb-img {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-surface);
}
.news-body { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-3); }
.news-date { font-size: 13px; font-weight: 700; color: var(--color-accent-2-700); }
.news-title {
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1.18;
  color: var(--color-accent);
  text-wrap: balance;
}
.news-title:hover { color: var(--color-accent-600); }
.news-title.is-muted { color: var(--color-neutral-700); }
.news-title.is-muted:hover { color: var(--color-accent); }
.news-excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-800);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-excerpt.is-muted { color: var(--color-neutral-700); font-style: italic; }
.news-extra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 4px;
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-700);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
}
.news-extra:hover { background: var(--color-accent-2-200); color: var(--color-accent-2-700); }

/* ===== Eventos ===== */

.event-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--event-bg, var(--color-accent-100));
}
.event-media img { width: 100%; height: 100%; object-fit: cover; }
.event-media.is-logo { background: var(--event-bg, var(--color-surface)); }
.event-media.is-logo img { width: auto; height: auto; max-width: 72%; max-height: 72%; object-fit: contain; }
.event-body { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-3); }
.event-body h2 { font-size: 23px; line-height: 1.15; margin: 0; color: var(--color-accent); text-wrap: balance; }
.event-body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-neutral-800); text-wrap: pretty; }
.event-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.files-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-700);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
}
.event-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--color-accent); }

.list-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  max-width: 820px;
}

/* ===== Institucional / UESSPA ===== */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.lead-text { margin: 0; font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.stack-prose { max-width: 680px; }
.stack-prose h2 { font-size: clamp(28px, 3.2vw, 38px); color: var(--color-accent); margin: 0; text-wrap: balance; }

.panel {
  background: var(--color-accent-100);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.panel h2, .panel h3 { margin: 0; color: var(--color-accent); }
.panel h2 { font-size: 28px; }
.panel h3 { font-size: 22px; }
.panel p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-neutral-800); text-wrap: pretty; }
.panel .stamp {
  align-self: flex-start;
  border-radius: 999px;
  background: var(--color-accent-2);
  color: #fff;
  padding: 5px 14px;
  font-family: var(--font-heading);
  font-size: 15px;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.setor-card p { flex: 1; margin-bottom: var(--space-3); color: var(--color-neutral-800); }
.mini-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  background: var(--color-accent-100);
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 700;
}
.mini-link:hover { background: var(--color-accent-200); color: var(--color-accent); }

.card .dot-list { margin-top: var(--space-2); }
.card.has-list { gap: var(--space-4); }
.eixo-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 16px;
  margin-bottom: var(--space-2);
}
.callout-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.callout-bar .note { flex: 1 1 360px; background: transparent; padding: 0; max-width: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.social-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 20px 8px 8px;
  box-shadow: var(--shadow-sm);
}
.social-chip .pill-tag { padding: 6px 12px; }
.social-chip span:last-child { font-size: 15.5px; font-weight: 600; }

.font-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #fff;
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
.font-chip:hover { background: var(--color-accent-100); color: var(--color-accent); }
.font-chip span:first-child { flex: 1; font-family: var(--font-heading); font-size: 19px; line-height: 1.2; }
.font-chip .file-ext { flex: 0 0 60px; }

.link-card h3 { font-size: 24px; margin: var(--space-2) 0 0; }
.link-card p { flex: 1; font-size: 15.5px; color: var(--color-neutral-800); margin-bottom: var(--space-3); }
.link-card .btn { align-self: flex-start; font-weight: 700; font-family: var(--font-body); }
.file-ext.is-auto { flex: 0 0 auto; align-self: flex-start; padding: 0 14px; }

.video-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 10px 10px var(--space-6);
  box-shadow: var(--shadow-sm);
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-accent-700);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card h3 { font-size: 23px; line-height: 1.15; margin: 0; color: var(--color-accent); }
.video-card p { margin: 0; font-size: 15px; color: var(--color-neutral-700); font-style: italic; }

/* ===== Notícia (artigo) ===== */

.article { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }
.article-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 900px;
  padding-top: var(--space-4);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-neutral-700);
}
.crumbs a { color: var(--color-neutral-700); }
.crumbs a:hover { color: var(--color-accent); }
.crumbs [aria-current] { color: var(--color-text); font-weight: 600; }
.article h1 {
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  margin: 0;
  color: var(--color-accent);
  text-wrap: balance;
}

.gallery { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.gallery-stage { position: relative; }
.gallery-stage::before {
  content: "";
  position: absolute;
  width: clamp(80px, 12vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent-2);
  right: -2%;
  top: -6%;
  z-index: 0;
}
.gallery-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  border-radius: 48px;
  overflow: hidden;
  background: var(--color-surface);
}
.gallery-frame img { width: 100%; height: 100%; object-fit: cover; }
.gallery-nav { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 8px; z-index: 3; }
.gallery-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--color-bg);
  color: var(--color-accent);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-btn:hover { background: var(--color-accent-100); }
.gallery-counter {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  background: var(--color-bg);
  color: var(--color-accent);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.gallery-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.gallery-thumbs { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.gallery-thumb {
  width: 88px;
  height: 64px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  background: var(--color-surface);
  opacity: 0.7;
}
.gallery-thumb[aria-current="true"] { border-color: var(--color-accent); opacity: 1; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.download-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
}

.article-body { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
.article-body p { margin: 0; font-size: clamp(19px, 1.8vw, 21px); line-height: 1.65; text-wrap: pretty; }
.article-body p.is-muted { color: var(--color-neutral-700); font-style: italic; }
.article-body .btn { align-self: flex-start; margin-top: var(--space-4); }
.more-news { padding-top: var(--space-6); }

/* ===== Páginas de curso e 404 ===== */

.empty-page {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(40px, 8vw, 96px) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.empty-page .code { font-family: var(--font-heading); font-size: clamp(72px, 14vw, 140px); line-height: 1; color: var(--color-accent); }
.empty-page p { margin: 0; max-width: 480px; font-size: 18px; color: var(--color-neutral-700); }