/* ==========================================================================
   Sobre a UNISUAM — estilos específicos da página.
   Os blocos de mídia + texto vêm de components.css (.media-block).
   ========================================================================== */

/* Subtítulo de bloco dentro de uma seção ("Nossa Unidades", "Nossos Polos…") */
.sobre-sub {
  margin-bottom: var(--sp-3);
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.9rem + 0.5vw, var(--fs-h3));
  font-weight: var(--fw-regular);
}

/* ==========================================================================
   Intro
   ========================================================================== */

/* No frame o breadcrumb fica logo abaixo da busca, não a 100px dela. */
.sobre-intro {
  padding-top: var(--sp-5);
}

.sobre-intro__breadcrumb {
  margin-bottom: var(--sp-5);
  color: var(--color-text-muted);
}

.sobre-intro__grid {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}

@media (min-width: 64rem) {
  .sobre-intro__grid {
    gap: var(--sp-12);
    /* 558px de texto + 486px de imagem, como no frame */
    grid-template-columns: minmax(0, 558fr) minmax(0, 486fr);
  }
}

.sobre-intro__text .page-head {
  margin-bottom: var(--sp-6);
}

.sobre-intro__p {
  max-width: 34em;
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}

.sobre-intro__p + .sobre-intro__p {
  margin-top: var(--sp-5);
}

.sobre-intro__media {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.sobre-intro__media img {
  width: 100%;
  aspect-ratio: 486 / 364;
  object-fit: cover;
}

/* ==========================================================================
   Nossa História — linha do tempo
   ========================================================================== */

/**
 * A régua, o painel e as setas são irmãos num grid — o que muda entre os frames
 * é só onde as setas caem. No mobile elas ficam abaixo do card (a régua usa a
 * largura toda); a partir de 1024px voltam para as laterais da régua.
 */
.historia__tabs {
  display: grid;
  gap: var(--sp-3) var(--sp-3);
  align-items: center;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas:
    "regua  regua  regua"
    "painel painel painel"
    "prev   next   .";
}

@media (min-width: 64rem) {
  .historia__tabs {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "prev   regua  next"
      "painel painel painel";
  }
}

.historia__track { grid-area: regua; }
.historia__panel { grid-area: painel; }
.historia__arrow--prev { grid-area: prev; }
.historia__arrow--next { grid-area: next; }

.historia__panel {
  margin-top: var(--sp-5);
}

@media (min-width: 64rem) {
  .historia__panel {
    margin-top: var(--sp-8);
  }
}

.historia__arrow {
  flex: none;
  color: var(--gray-400);
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.historia__arrow .icon {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 1.6;
}

.historia__arrow:hover {
  color: var(--us-sky);
}

.historia__arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}

/**
 * Régua de anos: rola na horizontal e as pontas desvanecem, como no frame.
 * O mask-image dá o fade sem precisar de um degradê sobreposto.
 */
.historia__track {
  display: flex;
  flex: 1;
  gap: var(--sp-1);
  align-items: center;
  overflow-x: auto;
  padding-block: var(--sp-1);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 88%, transparent);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.historia__track::-webkit-scrollbar {
  display: none;
}

/* 40px no mobile — o frame mostra sete anos de uma vez; 62px a partir de 768px. */
.historia__ano {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  scroll-snap-align: center;
  background: var(--white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

@media (min-width: 48rem) {
  .historia__ano {
    width: 3.875rem;
    height: 3.875rem;
    font-size: var(--fs-md);
  }

  .historia__ano[aria-selected="true"] {
    font-size: var(--fs-h4);
  }
}

/* Traço ligando as bolinhas */
.historia__ano + .historia__ano {
  margin-left: var(--sp-3);
  position: relative;
}

.historia__ano + .historia__ano::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: var(--sp-3);
  height: 1px;
  background: var(--color-border-strong);
}

.historia__ano:hover {
  color: var(--us-sky);
  border-color: var(--us-sky);
}

.historia__ano[aria-selected="true"] {
  color: var(--white);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  background: var(--us-sky);
  border-color: var(--us-sky);
  transform: scale(1.1);
}

/* ---------- Card do marco ---------- */

.historia__marco {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 64rem) {
  .historia__marco {
    align-items: start;
    /* A imagem invade a coluna do card, como no frame */
    grid-template-columns: minmax(0, 582fr) minmax(0, 460fr);
  }
}

.historia__card {
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Ponteiro triangular apontando para o ano ativo */
.historia__card {
  position: relative;
  margin-top: var(--sp-2);
}

.historia__card::before {
  content: "";
  position: absolute;
  top: calc(var(--sp-2) * -1);
  left: var(--sp-8);
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--us-sky);
  border-left: 10px solid transparent;
}

/**
 * 24px fixo, como no frame — e não por acaso: branco sobre --us-sky dá 3.5:1,
 * que só passa em AA como "texto grande" (>= 24px normal). Reduzir no mobile
 * jogaria o título para o limite de 4.5:1 e reprovaria.
 */
.historia__card-titulo {
  padding: var(--sp-4) var(--sp-6);
  color: var(--white);
  font-size: var(--fs-h3);
  background: var(--us-sky);
}

.historia__card-body {
  padding: var(--sp-6);
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}

@media (min-width: 64rem) {
  .historia__card-body {
    /* Reserva espaço para a imagem que se sobrepõe à direita */
    padding-right: var(--sp-16);
  }
}

.historia__media {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

@media (min-width: 64rem) {
  .historia__media {
    margin-top: var(--sp-12);
    margin-left: calc(var(--sp-16) * -1);
  }
}

.historia__media img {
  width: 100%;
  aspect-ratio: 460 / 315;
  object-fit: cover;
}

/* ==========================================================================
   Unidades e Polos
   ========================================================================== */

.unidades__intro {
  /* No frame a primeira linha vai até "aulas e" (~540px) */
  max-width: 30em;
  margin-bottom: var(--sp-8);
}

.polos__titulo {
  margin-top: var(--sp-12);
}

.polos {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}

@media (min-width: 64rem) {
  .polos {
    gap: var(--sp-6);
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

.polos__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--us-purple);
}

.polos__texto {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

.polos__destaque {
  display: block;
  color: var(--color-text);
  font-size: var(--fs-body);
}

.polos__cta {
  --btn-color: var(--us-purple);
  justify-self: start;
}

/* ==========================================================================
   Núcleos Práticos
   ========================================================================== */

.nucleos__grid {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}

@media (min-width: 64rem) {
  .nucleos__grid {
    gap: var(--sp-10);
    grid-template-columns: minmax(0, 558fr) minmax(0, 462fr);
  }
}

.accordion--compact {
  gap: var(--sp-2);
}

.nucleo {
  /* --c vem inline em cada <details> (data/sobre.php) */
  --accordion-icon: var(--c);
}

.nucleo__trigger {
  padding: var(--sp-3) var(--sp-5);
  text-transform: none;
  letter-spacing: 0;
}

.nucleo__icon {
  width: 2rem;
  height: 2rem;
}

.nucleo__label {
  display: flex;
  flex-direction: column;
}

.nucleo__sigla {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
}

.nucleo__nome {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
}