/* ============================================================
   LOUP LASH — APRENDA COM A LOUP
   Complemento visual isolado.
   Carregar DEPOIS de css/style.css.
   ============================================================ */

#blog {
  position: relative;
  overflow: hidden;
}

#blog::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  top: -180px;
  left: -180px;
  background: rgba(201, 188, 169, .16);
  pointer-events: none;
}

#blog::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  right: -130px;
  bottom: -160px;
  background: rgba(98, 104, 76, .08);
  pointer-events: none;
}

#blog > .container {
  position: relative;
  z-index: 1;
}

.blog-section-header {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.blog-section-header .section-sub {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}


/* ── Mídia / grade normal ── */

.blog-media {
  position: relative;
  overflow: hidden;
}

.blog-video-frame {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.blog-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: transparent;
}

/* Quando existem vários conteúdos, mantém proporção de card. */
.blog-card:not(.blog-card--featured) .blog-media--video {
  overflow: hidden;
}

.blog-card:not(.blog-card--featured) .blog-video {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}


/* ============================================================
   DESTAQUE — quando existe somente um conteúdo ativo
   ============================================================ */

.blog-grid--single {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Aproximadamente 30% menor que a versão anterior (920px → 650px). */
.blog-grid--single .blog-card--featured {
  width: min(100%, 650px);
  padding: 0;
  border: 1px solid rgba(201, 188, 169, .58);
  border-radius: 24px;
  background: rgba(255, 255, 255, .88);
  box-shadow:
    0 22px 58px rgba(47, 46, 44, .08),
    0 4px 16px rgba(47, 46, 44, .04);
  overflow: hidden;
}

/* Vídeo vertical fica mais elegante e não cresce demais na altura. */
.blog-grid--single .blog-card--featured.blog-card--portrait {
  width: min(100%, 430px);
}

.blog-grid--single .blog-card--featured.blog-card--square {
  width: min(100%, 560px);
}


/* ============================================================
   VÍDEO DE DESTAQUE — SEM FUNDO / CONTORNO PRETO
   ============================================================ */

.blog-card--featured .blog-media--video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}

.blog-card--featured .blog-media--video::before {
  display: none;
}

.blog-card--featured .blog-video-frame {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* O vídeo ocupa toda a largura do card, sem moldura escura ao redor. */
.blog-card--featured .blog-video {
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  object-fit: cover;
}


/* ── Imagem única segue o mesmo acabamento limpo ── */

.blog-card--featured .blog-media:not(.blog-media--video) {
  border-radius: 0;
}

.blog-card--featured .blog-img {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  border-radius: 0;
}


/* ── Texto abaixo do conteúdo ── */

.blog-card--featured .blog-content {
  max-width: 600px;
  margin: 0 auto;
  padding: 26px 34px 30px;
  text-align: center;
}

.blog-card--featured .blog-label {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.blog-card--featured .blog-content h3 {
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(27px, 3.4vw, 38px);
  font-weight: 500;
  line-height: 1.08;
}

.blog-card--featured .blog-content p {
  max-width: 520px;
  margin: 12px auto 0;
  color: var(--ink-light, #6b675f);
  font-size: 13px;
  line-height: 1.75;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1024px) {
  .blog-grid--single .blog-card--featured {
    width: min(82vw, 620px);
  }

  .blog-grid--single .blog-card--featured.blog-card--portrait {
    width: min(62vw, 420px);
  }

  .blog-grid--single .blog-card--featured.blog-card--square {
    width: min(72vw, 540px);
  }
}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 768px) {
  #blog::before {
    width: 250px;
    height: 250px;
    top: -120px;
    left: -120px;
  }

  #blog::after {
    width: 210px;
    height: 210px;
    right: -100px;
    bottom: -100px;
  }

  .blog-section-header {
    padding-left: 8px;
    padding-right: 8px;
  }

  .blog-grid--single {
    width: 100%;
  }

  /* No celular aproveita a largura disponível, com respiro lateral. */
  .blog-grid--single .blog-card--featured,
  .blog-grid--single .blog-card--featured.blog-card--portrait,
  .blog-grid--single .blog-card--featured.blog-card--square,
  .blog-grid--single .blog-card--featured.blog-card--landscape {
    width: min(100%, calc(100vw - 32px));
    border-radius: 18px;
  }

  .blog-card--featured .blog-content {
    padding: 22px 20px 24px;
  }

  .blog-card--featured .blog-content h3 {
    font-size: clamp(26px, 8vw, 32px);
  }

  .blog-card--featured .blog-content p {
    font-size: 13px;
    line-height: 1.7;
  }
}


/* ============================================================
   CELULAR PEQUENO
   ============================================================ */

@media (max-width: 480px) {
  .blog-grid--single .blog-card--featured,
  .blog-grid--single .blog-card--featured.blog-card--portrait,
  .blog-grid--single .blog-card--featured.blog-card--square,
  .blog-grid--single .blog-card--featured.blog-card--landscape {
    width: min(100%, calc(100vw - 24px));
    border-radius: 16px;
  }

  .blog-card--featured .blog-content {
    padding: 20px 16px 22px;
  }

  .blog-card--featured .blog-label {
    font-size: 9px;
  }

  .blog-card--featured .blog-content h3 {
    font-size: 27px;
  }
}