/* =============================================================================
   blog.css — Blog archive and single post page styles
   Sections: #hero, #blog-section, #pagination,
             #post-section, #related (single)
   ============================================================================= */

/* ── HERO ───────────────────────────────────────────────────────────────────── */
#hero {
  position: relative;
  height: 100vh; min-height: 600px; max-height: 800px;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  will-change: transform;
}
.hero-bg picture,
.hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-bg img { object-fit: cover; object-position: center; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.65) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  padding-bottom: 64px;
  padding-left: var(--pp); padding-right: var(--pp);
  max-width: 1920px; margin: 0 auto; width: 100%;
}
.hero-h1 {
  font-size: clamp(28px, 3vw, 48px); font-weight: 700; color: white;
  line-height: 1.15; max-width: 700px; margin-bottom: 16px;
}
.hero-sub {
  font-size: 16px; font-weight: 400; color: rgba(255,255,255,.8);
  max-width: 700px; line-height: 1.6; margin-bottom: 28px;
}
.hero-leia {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: white;
  text-transform: uppercase; letter-spacing: .06em;
  transition: gap var(--t);
}
.hero-leia:hover { gap: 10px; }
.hero-leia svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--v); transition: transform var(--t); }
.hero-leia:hover svg { transform: translateX(3px); }

.hero-bg--blog { background-image: url('https://www.figma.com/api/mcp/asset/f4ee6c98-f2d1-4d2d-bd69-12bc64698c14'); }
.hero-bg--post { background-image: url('https://www.figma.com/api/mcp/asset/cc6c15e5-5be4-4b91-b7fb-3d32f7ccbde6'); }
.post-video-img--default { background-image: url('https://www.figma.com/api/mcp/asset/cc6c15e5-5be4-4b91-b7fb-3d32f7ccbde6'); }

/* ── BLOG HERO (single post — taller) ──────────────────────────────────────── */
#hero.hero--single { height: 800px; }

.hero-back {
  position: absolute;
  top: 152px; left: var(--pp);
  display: flex; align-items: center; gap: 8px;
  z-index: 2; cursor: pointer; text-decoration: none;
}
.hero-back-btn {
  width: 32px; height: 32px; border-radius: var(--r);
  border: 1px solid var(--g03);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), border-color var(--t);
}
.hero-back:hover .hero-back-btn {
  background: rgba(255,255,255,.15);
  border-color: white;
}
.hero-back-btn svg { width: 14px; height: 14px; color: white; }
.hero-back-lbl {
  font-size: 14px; font-weight: 300; color: white;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ── BLOG GRID ──────────────────────────────────────────────────────────────── */
#blog-section { padding: 72px 0 var(--sv); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
.blog-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.blog-card:hover .blog-card__img-wrap img { transform: scale(1.04); }
.blog-card__img-wrap {
  width: 100%; aspect-ratio: 16/10;
  overflow: hidden; border-radius: 8px;
  margin-bottom: 20px; background: var(--g02);
}
.blog-card__img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.blog-card__body { display: flex; flex-direction: column; flex: 1; }
.blog-card__cat {
  font-size: 11px; font-weight: 700; color: var(--v);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 10px;
}
.blog-card__title {
  font-size: 18px; font-weight: 700; color: var(--preto);
  line-height: 1.3; margin-bottom: 12px;
  transition: color var(--t);
}
.blog-card:hover .blog-card__title { color: var(--ve); }
.blog-card__excerpt {
  font-size: 14px; font-weight: 400; color: var(--g08);
  line-height: 1.65; flex: 1; margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__read-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--preto);
  text-transform: uppercase; letter-spacing: .06em;
  transition: gap var(--t);
}
.blog-card:hover .blog-card__read-more { gap: 10px; }
.blog-card__read-more svg {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--v);
  transition: transform var(--t);
}
.blog-card:hover .blog-card__read-more svg { transform: translateX(3px); }

/* ── PAGINATION ─────────────────────────────────────────────────────────────── */
#pagination { padding: 8px 0 var(--sv); }

/* ── POST CONTENT ───────────────────────────────────────────────────────────── */
#post-section { padding: 72px 0; }

.post-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding-left: var(--pp);
  padding-right: var(--pp);
}
.post-lead {
  font-size: 20px; font-weight: 500; color: var(--g08);
  line-height: 1.6; margin-bottom: 32px;
}
.post-body { font-size: 16px; font-weight: 400; color: var(--g08); line-height: 1.7; }
.post-body p { margin-bottom: 20px; }
.post-body p:last-child { margin-bottom: 0; }
.post-body h2 {
  font-size: 20px; font-weight: 600; color: var(--preto);
  line-height: 1.3; margin: 32px 0 16px;
}
.post-body ul { margin: 0 0 20px 24px; }
.post-body ul li {
  font-size: 16px; line-height: 1.7; color: var(--g08);
  margin-bottom: 6px;
}

/* Post video embed */
.post-video {
  position: relative;
  width: 100%; aspect-ratio: 848/471;
  border-radius: 12px; overflow: hidden;
  margin: 40px 0; cursor: pointer;
}
.post-video-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .5s var(--t);
}
.post-video:hover .post-video-img { transform: scale(1.03); }
.post-video-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.2); }
.post-video-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 80px; height: 80px; border-radius: var(--r);
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: background var(--t), transform var(--t);
}
.post-video:hover .post-video-play {
  background: rgba(255,255,255,.8);
  transform: translate(-50%,-50%) scale(1.06);
}
.post-video-play img { width: 48px; height: 48px; object-fit: contain; }

/* Share bar */
.post-share {
  display: flex; align-items: center; gap: 16px;
  padding-top: 32px; margin-top: 32px;
  border-top: 1px solid var(--g02);
}
.post-share-lbl { font-size: 14px; color: var(--g08); font-weight: 400; flex-shrink: 0; }
.share-icons { display: flex; gap: 8px; }
.share-ico {
  width: 40px; height: 40px; border-radius: var(--r);
  background: var(--ve);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), transform var(--t);
  overflow: hidden;
}
.share-ico:first-child { background: transparent; border: 1px solid var(--g03); }
.share-ico:hover { background: #700000; transform: translateY(-2px); }
.share-ico:first-child:hover { background: var(--g02); border-color: var(--preto); }
.share-ico img { width: 20px; height: 20px; object-fit: contain; }

/* ── RELATED ARTICLES ───────────────────────────────────────────────────────── */
#related { background: var(--g01); padding: 72px 0; }

.rel-stag {
  font-size: 16px; font-weight: 700; color: var(--ve);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px;
}
.rel-title {
  font-size: 40px; font-weight: 700; color: var(--preto);
  line-height: 1.2; margin-bottom: 48px;
}
.rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.rel-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.rel-card:hover .rel-card__img img { transform: scale(1.04); }
.rel-card__img {
  width: 100%; height: 220px;
  border-radius: 12px; overflow: hidden;
  margin-bottom: 24px; background: var(--g02);
  flex-shrink: 0;
}
.rel-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--t);
}
.rel-card__body { display: flex; flex-direction: column; flex: 1; }
.rel-card__title {
  font-size: 22px; font-weight: 700; color: var(--preto);
  line-height: 1.25; margin-bottom: 12px;
  transition: color var(--t);
}
.rel-card:hover .rel-card__title { color: var(--ve); }
.rel-card__excerpt {
  font-size: 16px; font-weight: 400; color: var(--g08);
  line-height: 1.6; flex: 1; margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rel-card__read-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--preto);
  text-transform: uppercase; letter-spacing: .05em;
  transition: gap var(--t);
}
.rel-card:hover .rel-card__read-more { gap: 12px; }
.rel-card__read-more img {
  width: 20px; height: 20px; object-fit: contain;
  transition: transform var(--t);
}
.rel-card:hover .rel-card__read-more img { transform: translateX(3px); }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  #hero       { height: 460px; }
  .hero-back  { top: 100px; }
  .rel-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #hero               { height: 380px; }
  #hero.hero--single  { height: 440px; }
  .hero-h1            { font-size: 26px; }
  .hero-sub           { font-size: 14px; }
  .blog-grid          { grid-template-columns: 1fr; }
  .rel-grid           { grid-template-columns: 1fr; }
  .post-share         { flex-wrap: wrap; }
}