/* ═══════════════════════════════════════════════════════════════
   HUB BASE — Tipografia editorial + layout grid + helpers
   Carrega depois de hub-tokens.css. Tudo escopado em .hub
   ═══════════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════════
   ║ TIPOGRAFIA — hierarquia editorial Apple/Pūrna
   ╚══════════════════════════════════════════════════════════════ */

.hub h1, .hub h2, .hub h3, .hub h4, .hub h5, .hub h6 {
  font-family: var(--hub-font-display);
  font-weight: var(--hub-fw-bold);
  color: var(--hub-ink);
  letter-spacing: var(--hub-ls-tight);
  line-height: var(--hub-lh-tight);
  margin: 0 0 var(--hub-sp-4);
}

.hub h1 { font-size: var(--hub-fs-h1); }
.hub h2 { font-size: var(--hub-fs-h2); }
.hub h3 { font-size: var(--hub-fs-h3); font-weight: var(--hub-fw-semibold); }
.hub h4 { font-size: var(--hub-fs-h4); font-weight: var(--hub-fw-semibold); }
.hub h5 { font-size: var(--hub-fs-h5); font-weight: var(--hub-fw-medium); }

.hub-display {
  font-family: var(--hub-font-display);
  font-size: var(--hub-fs-display);
  font-weight: var(--hub-fw-black);
  letter-spacing: var(--hub-ls-tighter);
  line-height: var(--hub-lh-flat);
  color: var(--hub-ink);
}

.hub-hero-title {
  font-family: var(--hub-font-display);
  font-size: var(--hub-fs-hero);
  font-weight: var(--hub-fw-bold);
  letter-spacing: var(--hub-ls-tight);
  line-height: var(--hub-lh-tight);
  color: var(--hub-ink);
}

.hub-serif {
  font-family: var(--hub-font-serif);
  font-style: italic;
  font-weight: var(--hub-fw-regular);
}

/* Parágrafos */
.hub p {
  margin: 0 0 var(--hub-sp-4);
  font-size: var(--hub-fs-body);
  line-height: var(--hub-lh-base);
  color: var(--hub-ink-soft);
}

.hub p.lead,
.hub-lead {
  font-size: var(--hub-fs-body-lg);
  line-height: var(--hub-lh-loose);
  color: var(--hub-ink-2);
  font-weight: var(--hub-fw-regular);
}

.hub-meta {
  font-size: var(--hub-fs-meta);
  color: var(--hub-ink-mute);
  letter-spacing: var(--hub-ls-wide);
  font-weight: var(--hub-fw-medium);
}

.hub-overline {
  display: inline-block;
  font-family: var(--hub-font-display);
  font-size: var(--hub-fs-overline);
  font-weight: var(--hub-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--hub-ls-overline);
  color: var(--hub-rose);
}

.hub-overline--ink { color: var(--hub-ink-mute); }
.hub-overline--earth { color: var(--hub-earth); }
.hub-overline--cream { color: var(--hub-cream); }

/* Quotes editoriais */
.hub blockquote,
.hub-quote {
  margin: var(--hub-sp-8) 0;
  padding: var(--hub-sp-6) var(--hub-sp-8);
  border-left: 3px solid var(--hub-rose);
  font-family: var(--hub-font-serif);
  font-size: var(--hub-fs-h3);
  font-style: italic;
  font-weight: var(--hub-fw-regular);
  line-height: var(--hub-lh-snug);
  color: var(--hub-ink-2);
  background: var(--hub-rose-tint);
  border-radius: 0 var(--hub-radius-md) var(--hub-radius-md) 0;
}

.hub-quote--center {
  text-align: center;
  border-left: 0;
  padding: var(--hub-sp-8) var(--hub-sp-12);
  background: transparent;
  position: relative;
}
.hub-quote--center::before,
.hub-quote--center::after {
  content: '"';
  font-family: var(--hub-font-serif);
  font-size: 4rem;
  color: var(--hub-rose);
  line-height: 0.5;
  vertical-align: -0.4em;
}
.hub-quote--center::after {
  content: '"';
  vertical-align: -0.6em;
}

/* Strong & emphasis */
.hub strong { font-weight: var(--hub-fw-semibold); color: var(--hub-ink-2); }
.hub em     { font-style: italic; }
.hub mark   { background: var(--hub-rose-tint-2); color: var(--hub-ink); padding: 0 0.2em; border-radius: 2px; }
.hub small  { font-size: var(--hub-fs-meta); color: var(--hub-ink-mute); }
.hub code   { font-family: var(--hub-font-mono); font-size: 0.9em; background: var(--hub-ivory); padding: 0.15em 0.4em; border-radius: var(--hub-radius-xs); }

/* Links inline (corpo) */
.hub a {
  color: var(--hub-rose-deep);
  text-decoration: none;
  background-image: linear-gradient(to right, var(--hub-rose-deep), var(--hub-rose-deep));
  background-position: 0 100%;
  background-size: 0% 1px;
  background-repeat: no-repeat;
  transition: background-size var(--hub-dur-base) var(--hub-ease-out),
              color var(--hub-dur-fast) var(--hub-ease-out);
  padding-bottom: 1px;
}
.hub a:hover {
  background-size: 100% 1px;
  color: var(--hub-rose);
}

/* Listas */
.hub ul, .hub ol {
  margin: 0 0 var(--hub-sp-4);
  padding-left: var(--hub-sp-6);
}
.hub li {
  margin-bottom: var(--hub-sp-2);
  line-height: var(--hub-lh-base);
  color: var(--hub-ink-soft);
}
.hub ul li::marker { color: var(--hub-rose); }
.hub ol li::marker { color: var(--hub-rose); font-weight: var(--hub-fw-semibold); }

/* Horizontal rule */
.hub hr,
.hub-divider {
  border: 0;
  height: 1px;
  background: var(--hub-border-soft);
  margin: var(--hub-sp-12) 0;
}
.hub-divider--ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  height: auto;
  position: relative;
}
.hub-divider--ornament::before,
.hub-divider--ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hub-border-soft);
}
.hub-divider--ornament::after {
  margin-left: var(--hub-sp-4);
}
.hub-divider--ornament::before {
  margin-right: var(--hub-sp-4);
}

/* ╔══════════════════════════════════════════════════════════════
   ║ LAYOUT — containers e seções
   ╚══════════════════════════════════════════════════════════════ */

.hub-container {
  width: 100%;
  max-width: var(--hub-container-base);
  margin: 0 auto;
  padding: 0 var(--hub-sp-6);
}
.hub-container--tight  { max-width: var(--hub-container-tight); }
.hub-container--narrow { max-width: var(--hub-container-narrow); }
.hub-container--wide   { max-width: var(--hub-container-wide); }
.hub-container--xwide  { max-width: var(--hub-container-xwide); }
.hub-container--bleed  { max-width: 100%; padding: 0; }

@media (min-width: 768px) {
  .hub-container { padding: 0 var(--hub-sp-10); }
}

.hub-section {
  padding: var(--hub-section-y) 0;
  position: relative;
}
.hub-section--tight   { padding: var(--hub-sp-12) 0; }
.hub-section--loose   { padding: calc(var(--hub-section-y) * 1.5) 0; }
.hub-section--cream   { background: var(--hub-cream); }
.hub-section--ivory   { background: var(--hub-ivory); }
.hub-section--sand    { background: var(--hub-sand); }
.hub-section--dark    { background: var(--hub-soil); color: var(--hub-cream); }
.hub-section--gradient { background: var(--hub-grad-warm); }

.hub-section-head {
  text-align: center;
  margin-bottom: var(--hub-sp-12);
  max-width: var(--hub-container-narrow);
  margin-left: auto;
  margin-right: auto;
}
.hub-section-head--left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.hub-section-head .hub-overline {
  margin-bottom: var(--hub-sp-3);
}
.hub-section-head h2 {
  margin-bottom: var(--hub-sp-4);
}
.hub-section-head p {
  font-size: var(--hub-fs-body-lg);
  color: var(--hub-ink-soft);
  line-height: var(--hub-lh-loose);
}

/* ╔══════════════════════════════════════════════════════════════
   ║ GRID — sistema flexível
   ╚══════════════════════════════════════════════════════════════ */

.hub-grid {
  display: grid;
  gap: var(--hub-sp-6);
}
.hub-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hub-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hub-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hub-grid--auto-280 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hub-grid--auto-320 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.hub-grid--auto-360 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.hub-grid--gap-8  { gap: var(--hub-sp-8); }
.hub-grid--gap-12 { gap: var(--hub-sp-12); }

@media (max-width: 1023px) {
  .hub-grid--3, .hub-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .hub-grid--2, .hub-grid--3, .hub-grid--4 { grid-template-columns: 1fr; }
  .hub-grid { gap: var(--hub-sp-4); }
}

/* Split layout (texto + imagem) */
.hub-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hub-sp-12);
  align-items: center;
}
.hub-split--reverse { direction: rtl; }
.hub-split--reverse > * { direction: ltr; }
@media (max-width: 767px) {
  .hub-split { grid-template-columns: 1fr; gap: var(--hub-sp-8); }
}

/* Sidebar layout (artigo) */
.hub-sidebar {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--hub-sp-12);
  align-items: start;
}
@media (max-width: 1023px) {
  .hub-sidebar { grid-template-columns: 1fr; }
}

/* ╔══════════════════════════════════════════════════════════════
   ║ FLEX HELPERS
   ╚══════════════════════════════════════════════════════════════ */

.hub-row    { display: flex; flex-wrap: wrap; gap: var(--hub-sp-4); }
.hub-row--center { justify-content: center; align-items: center; }
.hub-row--between { justify-content: space-between; align-items: center; }
.hub-row--end { justify-content: flex-end; align-items: center; }
.hub-row--start { justify-content: flex-start; align-items: center; }
.hub-row--col { flex-direction: column; }
.hub-row--gap-2 { gap: var(--hub-sp-2); }
.hub-row--gap-6 { gap: var(--hub-sp-6); }
.hub-row--gap-8 { gap: var(--hub-sp-8); }
.hub-row--nowrap { flex-wrap: nowrap; }

.hub-stack { display: flex; flex-direction: column; gap: var(--hub-sp-4); }
.hub-stack--gap-2 { gap: var(--hub-sp-2); }
.hub-stack--gap-6 { gap: var(--hub-sp-6); }
.hub-stack--gap-8 { gap: var(--hub-sp-8); }

/* ╔══════════════════════════════════════════════════════════════
   ║ UTILITIES — text / spacing / display
   ╚══════════════════════════════════════════════════════════════ */

.hub-center { text-align: center; }
.hub-left   { text-align: left; }
.hub-right  { text-align: right; }

.hub-italic { font-style: italic; }
.hub-uppercase { text-transform: uppercase; letter-spacing: var(--hub-ls-wide); }

.hub-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hub-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hub-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Color helpers */
.hub-c-rose     { color: var(--hub-rose); }
.hub-c-rose-deep { color: var(--hub-rose-deep); }
.hub-c-ink      { color: var(--hub-ink); }
.hub-c-ink-soft { color: var(--hub-ink-soft); }
.hub-c-ink-mute { color: var(--hub-ink-mute); }
.hub-c-cream    { color: var(--hub-cream); }
.hub-c-earth    { color: var(--hub-earth); }

.hub-bg-cream { background: var(--hub-cream); }
.hub-bg-ivory { background: var(--hub-ivory); }
.hub-bg-sand  { background: var(--hub-sand); }
.hub-bg-rose  { background: var(--hub-rose); color: white; }
.hub-bg-dark  { background: var(--hub-soil); color: var(--hub-cream); }

/* Display */
.hub-block { display: block; }
.hub-inline-block { display: inline-block; }
.hub-flex  { display: flex; }
.hub-grid-d { display: grid; }
.hub-hide  { display: none; }

@media (max-width: 767px) {
  .hub-hide-mobile { display: none; }
}
@media (min-width: 768px) {
  .hub-hide-desktop { display: none; }
}

/* Spacing helpers (margins) */
.hub-mt-0 { margin-top: 0; }
.hub-mt-2 { margin-top: var(--hub-sp-2); }
.hub-mt-4 { margin-top: var(--hub-sp-4); }
.hub-mt-6 { margin-top: var(--hub-sp-6); }
.hub-mt-8 { margin-top: var(--hub-sp-8); }
.hub-mt-12 { margin-top: var(--hub-sp-12); }
.hub-mb-0 { margin-bottom: 0; }
.hub-mb-2 { margin-bottom: var(--hub-sp-2); }
.hub-mb-4 { margin-bottom: var(--hub-sp-4); }
.hub-mb-6 { margin-bottom: var(--hub-sp-6); }
.hub-mb-8 { margin-bottom: var(--hub-sp-8); }
.hub-mb-12 { margin-bottom: var(--hub-sp-12); }
.hub-mx-auto { margin-left: auto; margin-right: auto; }

/* ╔══════════════════════════════════════════════════════════════
   ║ ANIMAÇÕES — reveal on scroll
   ╚══════════════════════════════════════════════════════════════ */

.hub-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--hub-dur-slow) var(--hub-ease-out),
              transform var(--hub-dur-slow) var(--hub-ease-out);
  will-change: opacity, transform;
}
.hub-reveal.hub-revealed {
  opacity: 1;
  transform: translateY(0);
}

.hub-reveal--up    { transform: translateY(40px); }
.hub-reveal--down  { transform: translateY(-24px); }
.hub-reveal--left  { transform: translateX(-40px); }
.hub-reveal--right { transform: translateX(40px); }
.hub-reveal--scale { transform: scale(0.92); }

.hub-reveal--up.hub-revealed,
.hub-reveal--down.hub-revealed { transform: translateY(0); }
.hub-reveal--left.hub-revealed,
.hub-reveal--right.hub-revealed { transform: translateX(0); }
.hub-reveal--scale.hub-revealed { transform: scale(1); }

/* Stagger delays */
.hub-reveal--d1 { transition-delay: 100ms; }
.hub-reveal--d2 { transition-delay: 200ms; }
.hub-reveal--d3 { transition-delay: 300ms; }
.hub-reveal--d4 { transition-delay: 400ms; }
.hub-reveal--d5 { transition-delay: 500ms; }

/* ╔══════════════════════════════════════════════════════════════
   ║ FADE IN no load (sem JS)
   ╚══════════════════════════════════════════════════════════════ */

@keyframes hub-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hub-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hub-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.hub-anim-fade { animation: hub-fade-in var(--hub-dur-slow) var(--hub-ease-out) both; }
.hub-anim-fade-up { animation: hub-fade-up var(--hub-dur-slow) var(--hub-ease-out) both; }

/* ╔══════════════════════════════════════════════════════════════
   ║ IMAGEM — wrappers e ratios
   ╚══════════════════════════════════════════════════════════════ */

.hub-img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--hub-ivory);
  border-radius: var(--hub-radius-md);
}
.hub-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hub-dur-glide) var(--hub-ease-out);
}
.hub-img-wrap:hover img { transform: scale(1.04); }

.hub-ratio-1-1   { aspect-ratio: 1 / 1; }
.hub-ratio-4-3   { aspect-ratio: 4 / 3; }
.hub-ratio-3-2   { aspect-ratio: 3 / 2; }
.hub-ratio-16-9  { aspect-ratio: 16 / 9; }
.hub-ratio-21-9  { aspect-ratio: 21 / 9; }
.hub-ratio-3-4   { aspect-ratio: 3 / 4; }
.hub-ratio-2-3   { aspect-ratio: 2 / 3; }

/* Placeholder cinematic */
.hub-img-placeholder {
  background: linear-gradient(
    90deg,
    var(--hub-ivory) 0%,
    var(--hub-cream) 50%,
    var(--hub-ivory) 100%
  );
  background-size: 200% 100%;
  animation: hub-shimmer 2s infinite var(--hub-ease-in-out);
}

/* ╔══════════════════════════════════════════════════════════════
   ║ A11Y — sr-only + skip link
   ╚══════════════════════════════════════════════════════════════ */

.hub-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;
}

.hub-skip-link {
  position: absolute;
  top: -100px;
  left: var(--hub-sp-4);
  background: var(--hub-rose);
  color: white;
  padding: var(--hub-sp-3) var(--hub-sp-5);
  border-radius: var(--hub-radius-sm);
  z-index: var(--hub-z-toast);
  transition: top var(--hub-dur-base) var(--hub-ease-out);
}
.hub-skip-link:focus { top: var(--hub-sp-4); }