/**
 * Paris T’aime — Homepage
 * Block: Invisible Fraternity
 * Author: Li Yongxin
 * Description:
 *   Reusable poetic block to reveal the invisible fraternities of Paris.
 *   Can be placed on homepage, feuilleton pages, or video-detail.
 * --------------------------------------------------------------------
 */

.block-invisible-fraternity {
  background: #03001E;
  color: #fef8f0;
  padding: 56px 20px;
  text-align: center;
  font-family: "Georgia", serif;
}

.block-invisible-fraternity .bif-inner {
  max-width: 920px;
  margin: 0 auto;
}

.block-invisible-fraternity .bif-title {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  color: #fef8f0;
  margin: 0 0 1rem;
  text-align: center;
}

.block-invisible-fraternity .bif-copy p {
  margin: 0 0 12px;
  line-height: 1.65;
  color: #f5efe7;
  font-size: clamp(15px, 1.9vw, 17px);
  text-align: center;
}

.block-invisible-fraternity.a-left .bif-title,
.block-invisible-fraternity.a-left .bif-copy p {
  text-align: left;
}

.block-invisible-fraternity .bif-cta {
  margin-top: 18px;
  text-align: center;
}

.block-invisible-fraternity .bif-button {
  display: inline-block;
  background: #8B0000; /* Rouge cœur — couleur principale */
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-family: system-ui, sans-serif;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.block-invisible-fraternity .bif-button:hover {
  background: #a00000;
  transform: translateY(-2px);
}

/* ─────── Variants ─────── */

.block-invisible-fraternity.v-compact {
  padding: 28px 16px;
}

.block-invisible-fraternity.v-hero .bif-title {
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: 0.02em;
}

.block-invisible-fraternity.v-hero .bif-copy p {
  font-size: clamp(17px, 2.2vw, 20px);
}

/* ─────── Responsive ─────── */

@media (max-width: 768px) {
  .block-invisible-fraternity {
    padding: 44px 16px;
  }

  .block-invisible-fraternity .bif-title {
    font-size: 22px;
  }

  .block-invisible-fraternity .bif-copy p {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .block-invisible-fraternity {
    padding: 36px 12px;
  }

  .block-invisible-fraternity .bif-inner {
    max-width: 92%;
  }
}