/* ═══════════════════════════════════════════════════════════════
   JORNAL — bloco "Últimas do universo tech" da home (#hn-section)
   Extraído do <style> inline da view em jul/2026.
═══════════════════════════════════════════════════════════════ */

.hn-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.hn-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.hn-head-left { display: flex; align-items: center; gap: 12px; }
.hn-live-ring {
  width: 10px; height: 10px; border-radius: 50%; background: #4ADE80; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(74,222,128,.5);
  animation: hnPulse 2s ease-in-out infinite;
}
@keyframes hnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.5) }
  70%  { box-shadow: 0 0 0 9px rgba(74,222,128,0) }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0) }
}
.hn-head-txt h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.3rem,2.2vw,1.8rem); font-weight: 600; color: #0f172a; margin: 0 0 2px; }
.hn-head-txt span { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: .12em; color: #94a3b8; text-transform: uppercase; }
#hnLiveLabel { color: #4ADE80; }

.hn-see-all {
  font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #6E7536; text-decoration: none; display: flex; align-items: center; gap: 5px;
  border: 1px solid #DCC8BD; padding: 7px 14px; border-radius: 100px;
  transition: background .15s, color .15s; white-space: nowrap;
}
.hn-see-all:hover { background: #6E7536; color: #fff; border-color: #6E7536; }

/* grid de cards */
.hn-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.hn-card {
  background: #fff; border: 1px solid #E6D5CC; border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .15s; cursor: pointer;
}
.hn-card:hover { box-shadow: 0 6px 24px rgba(110,117,54,.14); transform: translateY(-3px); border-color: #C9A35E; }

/* card destaque (primeiro) */
.hn-card.hn-feat { grid-column: 1/3; flex-direction: row; }
.hn-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.hn-card.hn-feat .hn-card-img { width: 220px; min-width: 220px; height: 100%; aspect-ratio: unset; }
.hn-card-ph {
  width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 300; color: rgba(255,255,255,.75);
}
.hn-card.hn-feat .hn-card-ph { width: 220px; min-width: 220px; height: 100%; aspect-ratio: unset; }
.hn-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hn-meta { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; }
.hn-src { font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; background: #ECE0CF; color: #6E7536; white-space: nowrap; }
.hn-cat { font-family: 'Space Mono', monospace; font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; border: 1px solid #E6D5CC; color: #94a3b8; white-space: nowrap; }
.hn-title { font-family: 'Cormorant Garamond', serif; font-size: .98rem; font-weight: 600; color: #0f172a; line-height: 1.38; margin-bottom: 6px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hn-card.hn-feat .hn-title { font-size: 1.15rem; -webkit-line-clamp: 4; }
.hn-summary { font-size: 11.5px; color: #475569; line-height: 1.55; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hn-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; border-top: 1px solid #F1E7DD; }
.hn-ago { font-family: 'Space Mono', monospace; font-size: 8.5px; color: #94a3b8; }
.hn-link { font-family: 'Space Mono', monospace; font-size: 8.5px; font-weight: 700; color: #6E7536; text-decoration: none; display: flex; align-items: center; gap: 4px; }
.hn-link:hover { color: #525829; }

/* skeleton */
.hn-skel { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.hn-skel-card { background: #fff; border: 1px solid #E6D5CC; border-radius: 10px; overflow: hidden; }
.hn-skel-img { width: 100%; aspect-ratio: 16/9; background: linear-gradient(90deg,#F3ECE1 25%,#ECE2D4 50%,#F3ECE1 75%); background-size: 200%; animation: hnShimmer 1.4s infinite; }
.hn-skel-body { padding: 12px 14px; }
.hn-skel-ln { height: 9px; border-radius: 4px; background: linear-gradient(90deg,#F3ECE1 25%,#ECE2D4 50%,#F3ECE1 75%); background-size: 200%; animation: hnShimmer 1.4s infinite; margin-bottom: 7px; }
@keyframes hnShimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* responsive */
@media (max-width: 1024px) {
  .hn-grid, .hn-skel { grid-template-columns: 1fr 1fr; }
  .hn-card.hn-feat { grid-column: 1/-1; }
}
@media (max-width: 600px) {
  .hn-grid, .hn-skel { grid-template-columns: 1fr; }
  .hn-card.hn-feat { flex-direction: column; }
  .hn-card.hn-feat .hn-card-img,
  .hn-card.hn-feat .hn-card-ph { width: 100%; min-width: 0; aspect-ratio: 16/9; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hn-live-ring, .hn-skel-img, .hn-skel-ln { animation: none; }
  .hn-card:hover { transform: none; }
}