/* Report hub (/report, /en/report).
   Reuses blog.css (.blog-card for the report list, .deal-cta for the banner)
   and style.css (.button.button-outline for the insights CTA); this file
   styles the hero, the report-list cards, and the "최신 M&A 인사이트" grid. */

:root {
  --report-gray: #f3f3f4;
}

/* 1. Hero — title, full-bleed banner, subtitle, divider ---------------------- */
.report-hero {
  background-color: var(--report-gray);
  padding: 72px 0 0;
}

.report-hero-heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 64px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--dark);
}

/* Full-width banner band under the title, fixed 320px tall. */
.report-hero-media {
  margin: 40px 0 0;
  width: 100%;
  height: 320px;
  overflow: hidden;
}

.report-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.report-hero-intro {
  margin: 40px 0 0;
  font-size: 20px;
  line-height: 1.65;
  color: var(--body-color);
  max-width: 46em;
}

.report-hero-divider {
  margin: 40px 0 0;
  border: 0;
  border-top: 1px solid var(--line-light);
}

/* 2. Report list — card format on a light-gray band -------------------------- */
.report-list-section {
  background-color: var(--report-gray);
  padding: 56px 0 72px;
}

.report-card-grid {
  margin-top: 0;
}

/* White card on the gray band. Per the brand system: border-radius 0 and no
   shadows — depth comes from the tone step (gray band -> white card) plus a
   ghost border that darkens on hover. */
.report-card {
  background-color: var(--white);
  border: 1px solid #efefef;
  border-radius: 0;
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.report-card:hover {
  border-color: #c8c8c8;
}

.report-card-media {
  display: block;
  overflow: hidden;
}

.report-card-media .blog-card-image {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.report-card:hover .report-card-media .blog-card-image {
  transform: scale(1.04);
}

/* Card content sits flush inside the card (drop blog.css top border). */
.report-card .blog-card-content {
  border-top: 0;
  padding: 22px;
}

/* Title: clamp to 1 line, ellipsis (…) beyond. */
.report-card .blog-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.report-card-summary {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 3. Latest M&A insights — white band ---------------------------------------- */
.rinsight-section {
  background-color: var(--white);
  padding: 80px 0;
}

.rinsight-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

/* Serif Light headline (The Monument), 44px — matches the brand headline system. */
.rinsight-heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.rinsight-sub {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

.rinsight-count {
  margin: 32px 0 20px;
  font-size: 14px;
  color: var(--muted);
}

.rinsight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 28px;
}

.rinsight-card {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
  border-top: 2px solid var(--primary);
  text-decoration: none;
}

.rinsight-card-cat {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

.rinsight-card-date {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

.rinsight-card-title {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--dark);
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rinsight-card:hover .rinsight-card-title {
  color: var(--primary);
}

.rinsight-card-desc {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rinsight-actions {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* CTA reuses .button.button-outline (same as the home M&A Advisory section);
   only the trailing arrow needs the shared inline-flex gap, which .button
   already provides. */

/* Responsive ----------------------------------------------------------------- */
@media (max-width: 991px) {
  .report-hero-heading {
    font-size: 52px;
  }

  .rinsight-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .report-hero {
    padding: 48px 0 0;
  }

  .report-hero-heading {
    font-size: 38px;
  }

  .report-hero-media {
    margin-top: 28px;
    height: 200px;
  }

  .report-hero-intro {
    margin-top: 28px;
    font-size: 17px;
  }

  .rinsight-section {
    padding: 56px 0;
  }

  .rinsight-header {
    flex-direction: column;
  }

  .rinsight-heading {
    font-size: 26px;
  }
}

@media (max-width: 560px) {
  .rinsight-grid {
    grid-template-columns: 1fr;
  }
}