/* ==========================================================================
   IEL Sergipe — estilos complementares ao Tailwind
   Tokens espelham as Variables do Figma.

   Breakpoints:
     base     → Screen/Mobile/Home  (390px)
     >= 768   → Screen/Tablet/Home  (768px)
     >= 1280  → Screen/Desktop/Home (1600px)
   ========================================================================== */

:root {
  /* Marca IEL */
  --iel-lightest: #edf9f8;
  --iel-lighter:  #d4f2f0;
  --iel-light:    #b3e3df;
  --iel-pure:     #6cc2ba;
  --iel-dark:     #549f98;
  --iel-darkest:  #003449;
  --iel-deep:     #457f7a;

  /* Corporativo */
  --corporate-pure:   #164194;
  --corporate-dark:   #1a3c6f;
  --corporate-darker: #1c3156;

  /* Neutros */
  --ink-white:    #ffffff;
  --ink-lightest: #f2f2f2;
  --ink-lighter:  #dfdfdf;
  --ink-dark:     #646464;
  --ink-darker:   #575756;
  --ink-darkest:  #262626;
  --ink-border:   #e0e0e0;

  /* Parceiros */
  --partner-fies:  #008bd2;
  --partner-sesi:  #52ae32;
  --partner-senai: #e84910;

  /* Layout */
  --shell-max: 1220px;

  /* Curva de saída usada nas animações da arte (Figma: motion) */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Container central de todas as seções (1220px na arte de 1600px) */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
}

/* Texto acessível apenas para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Hero de página interna — Figma 11763:3750
   ========================================================================== */

/* Degradê que escurece a imagem à esquerda para o texto ficar legível. */
.page-hero__scrim {
  background-image:
    linear-gradient(90deg, rgb(7, 11, 27) 5.29%, rgba(22, 65, 148, 0) 88.94%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
}

/* Faixa de 8px com as cores do Sistema FIES na base do hero. */
.page-hero__accent {
  background-image: linear-gradient(
    to right,
    #1681e7 0%,
    var(--iel-pure) 50%,
    #52ae32 100%
  );
}

/* Véu dos cards de solução: azul corporativo sobre um escurecimento neutro. */
.solution-card__scrim {
  background-color: rgba(0, 0, 0, 0.36);
  background-image: linear-gradient(
    to right,
    rgba(26, 60, 111, 0.62) 0%,
    rgba(26, 60, 111, 0.62) 100%
  );
}

/* Véu dos cards de serviço: azul sólido à esquerda que abre para a imagem. */
.service-card__scrim {
  background-image: linear-gradient(
    90deg,
    rgb(28, 49, 86) 21.02%,
    rgba(22, 65, 148, 0.5) 58.17%,
    rgba(26, 60, 111, 0.3) 76.26%,
    rgba(88, 118, 172, 0.2) 92.39%,
    rgba(22, 65, 148, 0) 101.68%
  );
}

/* ==========================================================================
   Banner interativo — Figma 11667:2394
   Um painel aberto + os demais comprimidos. No mobile a pilha é vertical
   (altura), do tablet para cima é horizontal (flex-grow).
   ========================================================================== */

.banner-track {
  /* --banner-count vem do PHP; a largura do painel aberto é o que sobra. */
  --panel-collapsed: 96px;
  --banner-gap: 16px;

  display: flex;
  flex-direction: column;
  gap: var(--banner-gap);
  width: 100%;
}

.banner-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 24px;
  min-height: 140px;
  backdrop-filter: blur(5px);
  transition: min-height 0.55s var(--ease-out-expo);
}

.banner-panel[data-active='true'] { min-height: 400px; }

.banner-panel__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-panel__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

/* Alvo de clique que cobre o painel comprimido inteiro. */
.banner-panel__trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  cursor: pointer;
  background: none;
  border: 0;
}
.banner-panel__trigger:hover + .banner-panel__scrim,
.banner-panel__trigger:focus-visible + .banner-panel__scrim { background: rgba(0, 0, 0, 0.1); }
.banner-panel[data-active='true'] .banner-panel__trigger { display: none; }

.banner-panel__label {
  position: relative;
  margin-top: auto;
  color: var(--ink-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  pointer-events: none;
}
.banner-panel[data-active='true'] .banner-panel__label { display: none; }

.banner-panel__content {
  position: relative;
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
}
.banner-panel[data-active='true'] .banner-panel__content { display: flex; }

@media (min-width: 768px) {
  .banner-track { flex-direction: row; align-items: stretch; }

  .banner-panel {
    min-height: 0;
    height: 560px;
    flex: 0 0 var(--panel-collapsed);
    transition: flex-basis 0.55s var(--ease-out-expo);
  }
  /* O painel aberto ocupa o que sobra depois dos comprimidos e dos gaps. */
  .banner-panel[data-active='true'] {
    flex-basis: calc(100% - (var(--banner-count, 4) - 1) * (var(--panel-collapsed) + var(--banner-gap)));
    min-width: 0;
  }

  /* Rótulo na vertical, lido de baixo para cima e alinhado à base */
  .banner-panel__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 20px;
    line-height: 28px;
  }
}

@media (min-width: 1280px) {
  .banner-track {
    --panel-collapsed: 176px;
    --banner-gap: 32px;
  }

  .banner-panel {
    height: 648px;
    padding: 32px;
  }
  .banner-panel__content { gap: 32px; }
}

/* Entrada dos painéis (Figma: timeline de 1,15s com stagger) */
@media (prefers-reduced-motion: no-preference) {
  /* :first-child (e não [data-active]) para que a entrada rode só no load —
     trocar de painel no clique não deve reanimar a seção inteira. */
  .banner-panel {
    animation: banner-panel-in 0.9s var(--ease-out-expo) both;
    animation-delay: calc(var(--panel-index, 0) * 110ms);
  }
  .banner-panel:first-child { animation-name: banner-panel-in-lead; }

  @keyframes banner-panel-in {
    from { opacity: 0; transform: translateX(60px) scale(0.95); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes banner-panel-in-lead {
    from { opacity: 0; transform: translateX(-50px) scale(0.96); }
    to   { opacity: 1; transform: none; }
  }

  /* Conteúdo que aparece quando um painel é aberto */
  .banner-panel[data-active='true'] .banner-panel__content > :first-child {
    animation: banner-badge-in 0.45s var(--ease-out-expo) 0.1s both;
  }
  .banner-panel[data-active='true'] .banner-panel__content > :last-child {
    animation: banner-body-in 0.5s var(--ease-out-expo) 0.16s both;
  }

  @keyframes banner-badge-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes banner-body-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   Notícias — carrossel de 1 card no mobile, grade no tablet/desktop
   ========================================================================== */

.news-track {
  display: flex;
  gap: 16px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
}
.news-track > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.news-dot {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: var(--iel-light);
  transition: background-color 0.2s ease;
}
.news-dot[aria-current='true'] { background: var(--iel-dark); }

@media (min-width: 768px) {
  .news-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .news-track > * { flex: none; }
}

@media (min-width: 1280px) {
  .news-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }
}

/* Linha de destaque sob os cards do Observatório */
.card-accent {
  background-image: linear-gradient(
    to right,
    var(--iel-pure) 0%,
    var(--iel-light) 38.94%,
    rgba(108, 194, 186, 0) 100%
  );
}

/* Trilhos horizontais sem barra de rolagem visível */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Título de card limitado a 3 linhas, como na arte */
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Acessibilidade de foco consistente com a marca */
:where(a, button):focus-visible {
  outline: 2px solid var(--iel-dark);
  outline-offset: 2px;
  border-radius: 4px;
}