/* ============================================================
   YALE INDIA FORUM — NEWS & INSIGHTS PAGE
   All classes are prefixed "yifn-" (unique to this page) so
   nothing here collides with or overrides existing site styles.
   Reuses only the existing design tokens (colors, fonts) defined
   in :root inside style.css — no existing class names are reused.
   ============================================================ */

/* --------------------------------------------------------------
   HERO
   -------------------------------------------------------------- */
.yifn-hero {
  position: relative;
  padding: 150px 24px 40px;
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5,18,46,0.6) 0%, rgba(5,18,46,0.72) 55%, rgba(5,18,46,0.92) 100%),
    url('../images/yale-hero-bg-2.png') center 20% / cover no-repeat fixed;
}

.yifn-hero::before {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,177,131,0.16) 0%, transparent 70%);
  top: -160px;
  right: -140px;
  pointer-events: none;
}

.yifn-hero::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  /*background: radial-gradient(circle, rgba(19,49,92,0.55) 0%, transparent 70%);*/
  bottom: -160px;
  left: -120px;
  pointer-events: none;
}

.yifn-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
}

.yifn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'georgia', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright, #e0b183);
  border: 1px solid rgba(204, 148, 90, 0.45);
  border-radius: 100px;
  padding: 7px 18px;
  margin-bottom: 26px;
}

.yifn-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-bright, #e0b183);
  box-shadow: 0 0 8px 2px rgba(224, 177, 131, 0.7);
}

.yifn-heading {
  font-family: 'georgia', sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: clamp(2.6rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  margin: 0;
}

.yifn-heading em {
  font-style: normal;
  color: var(--gold-bright, #e0b183);
}

.yifn-tagline {
  font-family: 'georgia', sans-serif;
  font-size: 1.02rem;
  color: rgba(220,228,245,0.78);
  margin: 20px 0 0;
}

/* --------------------------------------------------------------
   SHARED SECTION WRAPPER
   -------------------------------------------------------------- */
.yifn-section {
  position: relative;
  background:
    linear-gradient(180deg, rgba(5,18,46,0.92) 0%, var(--navy) 22%, var(--navy) 100%),
    url('assets/images/yale-hero-bg-2.png') center 20% / cover no-repeat fixed;
  padding: 70px 0 120px;
}

.yifn-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.yifn-section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
}

.yifn-section-label span {
  font-family: 'georgia', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright, #e0b183);
  white-space: nowrap;
}

.yifn-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), transparent);
}

/* --------------------------------------------------------------
   FEATURED STORY (top pick)
   -------------------------------------------------------------- */
.yifn-featured {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius, 20px);
  overflow: hidden;
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 1px 0 rgba(255,255,255,0.08) inset;
  margin-bottom: 90px;
}

.yifn-featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,177,131,0.55), transparent);
  z-index: 1;
}

.yifn-featured-media {
  position: relative;
  min-height: 340px;
  background: linear-gradient(150deg, #d9b98c 0%, #b98f5c 55%, #8a6a44 100%);
}

.yifn-featured-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yifn-featured-body {
  position: relative;
  padding: 52px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.yifn-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-family: 'georgia', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy, #05122e);
  background: linear-gradient(135deg, var(--gold, #cc945a), var(--gold-bright, #e0b183));
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 20px;
}

.yifn-featured-title {
  font-family: 'georgia', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: #fff;
  line-height: 1.25;
  margin: 0 0 16px;
}

.yifn-featured-desc {
  font-family: 'georgia', sans-serif;
  font-size: 0.98rem;
  color: rgba(220,228,245,0.78);
  line-height: 1.7;
  margin: 0 0 26px;
}

.yifn-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'georgia', sans-serif;
  font-size: 0.8rem;
  color: rgba(220,228,245,0.55);
  margin-bottom: 30px;
}

.yifn-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.yifn-meta i { color: var(--gold-bright, #e0b183); font-size: 0.78rem; }

/* --------------------------------------------------------------
   READ MORE BUTTON (external link)
   -------------------------------------------------------------- */
.yifn-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  background: linear-gradient(135deg, var(--gold, #cc945a), var(--gold-bright, #e0b183));
  color: var(--navy, #05122e);
  font-family: 'georgia', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  border-radius: 100px;
  padding: 0.85rem 1.7rem;
  overflow: hidden;
  box-shadow: 0 10px 22px -6px rgba(224,177,131,0.5), 0 1px 0 rgba(255,255,255,0.4) inset;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.yifn-btn i {
  font-size: 0.78rem;
  transition: transform 0.25s ease;
}

.yifn-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(224,177,131,0.6), 0 1px 0 rgba(255,255,255,0.4) inset;
}

.yifn-btn:hover i { transform: translate(3px, -2px); }

/* Secondary, lighter "read more" link used on grid cards */
.yifn-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'georgia', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--gold-bright, #e0b183);
  border-bottom: 1px solid rgba(224,177,131,0.35);
  padding-bottom: 3px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.yifn-link i {
  font-size: 0.72rem;
  transition: transform 0.25s ease;
}

.yifn-link:hover {
  color: var(--gold, #cc945a);
  border-color: var(--gold, #cc945a);
}

.yifn-link:hover i { transform: translate(4px, -3px); }

/* --------------------------------------------------------------
   NEWS GRID
   -------------------------------------------------------------- */
.yifn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.yifn-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border-radius: var(--radius-sm, 12px);
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.yifn-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 64px rgba(0,0,0,0.4);
  border-color: rgba(224,177,131,0.35);
}

.yifn-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #ffffff;
  overflow: hidden;
}

.yifn-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.yifn-card:hover .yifn-card-media img {
  transform: scale(1.06);
}

.yifn-card-media .yifn-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  margin: 0;
}

.yifn-card-body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.yifn-card-date {
  font-family: 'georgia', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(220,228,245,0.55);
  margin-bottom: 10px;
}

.yifn-card-title {
  font-family: 'georgia', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: #fff;
  line-height: 1.35;
  margin: 0 0 12px;
}

.yifn-card-desc {
  font-family: 'georgia', sans-serif;
  font-size: 0.9rem;
  color: rgba(220,228,245,0.72);
  line-height: 1.65;
  margin: 0 0 20px;
  flex: 1;

  /* clamp to 3 lines so cards stay level */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yifn-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.yifn-card-source {
  font-family: 'georgia', sans-serif;
  font-size: 0.78rem;
  color: rgba(220,228,245,0.6);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.yifn-card-source i { color: var(--gold, #cc945a); }

/* --------------------------------------------------------------
   REVEAL-ON-SCROLL (self-contained; unique class so it can't
   clash with any existing global reveal script)
   -------------------------------------------------------------- */
.yifn-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}

.yifn-reveal.yifn-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------- */
@media (max-width: 1080px) {
  .yifn-grid { grid-template-columns: repeat(2, 1fr); }
  .yifn-featured { grid-template-columns: 1fr; }
  .yifn-featured-media { min-height: 260px; }
  .yifn-featured-body { padding: 40px 36px; }
}

@media (max-width: 640px) {
  .yifn-hero { padding: 140px 20px 70px; background-attachment: scroll; }
  .yifn-section { background-attachment: scroll; }
  .yifn-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .yifn-section { padding: 50px 0 80px; }
  .yifn-featured-body { padding: 34px 24px; }
}

/* ================================================================
   YALE INDIA FORUM — MEDIA HUB SLIDER CARDS, v2
   Namespace: "yifmh-" (Media Hub) — brand new, additive classes.
   Does NOT edit or redeclare any ".yifmc-*" selector, so the
   original image-overlay card (still used as-is for Articles, and
   anywhere else on the site that currently uses .yifmc-card) is
   completely untouched and cannot be overridden by this file.

   Reuses the existing .yifmc-section / .yifmc-container /
   .yifmc-track-wrap / .yifmc-track / .yifmc-arrow-* slider shell
   as-is (pure layout mechanics, no visual redeclaration here).

   Used by: News, Reports, Publications (.yifmh-card)
            Videos (.yifmh-video-card)
   ================================================================ */

/* ---------- Section head with a "View All" pill (News / Videos /
   Reports / Publications). Articles keeps the original .yifmc-head
   untouched. ---------- */
.yifmh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.yifmh-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 11px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: 'georgia', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: var(--transition-fast, all 0.2s ease);
}

.yifmh-viewall i {
  font-size: 0.72rem;
  transition: transform 0.25s ease;
}

.yifmh-viewall:hover {
  background: linear-gradient(135deg, var(--gold, #cc945a), var(--gold-bright, #e0b183));
  color: var(--navy, #05122e);
  border-color: transparent;
}

.yifmh-viewall:hover i { transform: translateX(3px); }

@media (max-width: 600px) {
  .yifmh-head { margin-bottom: 26px; }
  .yifmh-viewall { padding: 9px 16px; font-size: 0.76rem; }
}

/* ----------------------------------------------------------------
   NEWS / REPORTS / PUBLICATIONS — image-top white card
   (matches the "Reports" / "Publications" reference layout: photo
   with pill badges on top, plain white body with date + title
   underneath, so the photo and the outlet logo both stay fully
   visible instead of sitting under a dark scrim).
   ---------------------------------------------------------------- */
.yifmh-card {
  position: relative;
  flex: 0 0 auto;
  width: 400px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm, 16px);
  overflow: hidden;
  background: var(--bg-card, #ffffff);
  box-shadow: var(--shadow-lg, 0 24px 64px rgba(5,18,46,0.14));
  border: 1px solid rgba(5, 18, 46, 0.06);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

.yifmh-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl, 0 40px 100px rgba(5,18,46,0.18));
}

.yifmh-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy, #05122e);
}

.yifmh-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
}

.yifmh-card:hover .yifmh-card-media img { transform: scale(1.06); }

/* top-left badge cluster: year pill + category pill */
.yifmh-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  flex-wrap: wrap;
}

.yifmh-badge-year,
.yifmh-badge-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'georgia', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(5, 18, 46, 0.35);
}

.yifmh-badge-year { background: var(--navy, #05122e); color: #ffffff; }

.yifmh-badge-tag {
  background: linear-gradient(135deg, var(--gold, #cc945a), var(--gold-bright, #e0b183));
  color: var(--navy, #05122e);
}

/* outlet / source logo, kept on its own white plate so it reads
   clearly against any photo */
.yifmh-logo-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  width: 150px;
  height: 56px;
  border-radius: 14px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-shadow: 0 6px 16px rgba(5, 18, 46, 0.35);
  transition: transform 0.3s ease;
}

.yifmh-card:hover .yifmh-logo-badge { transform: scale(1.08); }

.yifmh-logo-badge img {
  max-width: 100%;
  max-height: 100%;
  width: 150px;
  /*height: auto;
  object-fit: contain;*/
  border-radius: 15%;
}

.yifmh-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.yifmh-card-date {
  font-family: 'georgia', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary, #4A5568);
}

.yifmh-card-title {
  font-family: 'georgia', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.42;
  color: var(--text-primary, #05122e);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .yifmh-card { width: 300px; }
  .yifmh-card-title { font-size: 1.02rem; }
}

@media (max-width: 600px) {
  .yifmh-card { width: 260px; border-radius: 14px; }
  .yifmh-card-body { padding: 18px 18px 20px; }
  .yifmh-logo-badge { width: 46px; height: 46px; bottom: 10px; right: 10px; }
  .yifmh-badge-year, .yifmh-badge-tag { font-size: 0.64rem; padding: 5px 11px; }
}

/* ----------------------------------------------------------------
   VIDEOS — the background image fills the ENTIRE card (no separate
   text panel below it). Year, title, and the play button all sit
   directly on top of the photo, legible via a bottom gradient scrim
   — matches the reference "Videos" strip exactly.
   ---------------------------------------------------------------- */
.yifmh-video-card {
  position: relative;
  flex: 0 0 auto;
  width: 400px;
  aspect-ratio: 5 / 4;
  display: block;
  border-radius: var(--radius-sm, 16px);
  overflow: hidden;
  background: var(--navy, #05122e);
  box-shadow: var(--shadow-lg, 0 24px 64px rgba(5,18,46,0.14));
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

.yifmh-video-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl, 0 40px 100px rgba(5,18,46,0.2));
}

.yifmh-video-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
}

.yifmh-video-card:hover img { transform: scale(1.06); }

/* bottom gradient so the year + title stay legible over any photo */
.yifmh-video-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(5, 18, 46, 0) 45%,
    rgba(5, 18, 46, 0.55) 68%,
    rgba(5, 18, 46, 0.92) 100%);
  pointer-events: none;
}

.yifmh-video-logo {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 125px;
  height: 56px;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  box-shadow: 0 6px 16px rgba(5, 18, 46, 0.35);
}

.yifmh-video-logo img {
  position: static;
  max-width: 100%;
  max-height: 100%;
  width: 125px;
  /*height: auto;*/
  object-fit: contain;
  transition: none;
}

.yifmh-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-size: 1.1rem;
  box-shadow: 0 10px 26px rgba(5, 18, 46, 0.5);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

/* nudge the FA play triangle so it looks optically centered in the circle */
.yifmh-play-btn i { margin-left: 3px; }

.yifmh-video-card:hover .yifmh-play-btn {
  background: linear-gradient(135deg, var(--gold, #cc945a), var(--gold-bright, #e0b183));
  color: var(--navy, #05122e);
  transform: translate(-50%, -50%) scale(1.08);
}

.yifmh-video-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 22px 22px;
}

.yifmh-video-date {
  display: block;
  font-family: 'georgia', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
}

.yifmh-video-title {
  font-family: 'georgia', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.4;
  color: #ffffff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .yifmh-video-card { width: 300px; }
  .yifmh-video-title { font-size: 1.02rem; }
}

@media (max-width: 600px) {
  .yifmh-video-card { width: 260px; }
  .yifmh-video-body { padding: 0 16px 16px; }
  .yifmh-play-btn { width: 52px; height: 52px; font-size: 0.92rem; }
  .yifmh-video-logo { width: 36px; height: 36px; top: 10px; right: 10px; }
}
.yifmc-logo-badge img {border-radius:15%;}












/* ============================================================
   YALE INDIA FORUM — MEDIA COVERAGE BOXES ("yifmc-" namespace)
   Matches the PDF layout: logo header, divider, headline,
   description, Read Story link, divider, plain-text source URL.
   Does not reuse or override any "yifg-" or "yifn-" class.
   ============================================================ */
.yifmc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.yifmc-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(224,177,131,0.4);
  border-radius: 10px;
  padding: 28px 30px 30px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.yifmc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0,0,0,0.35);
  border-color: rgba(224,177,131,0.75);
}

.yifmc-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.yifmc-logo {
  flex-shrink: 0;
  /*width: 56px;*/
  height: 70px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
}

.yifmc-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.yifmc-source-name {
  font-family: 'georgia', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

.yifmc-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(224,177,131,0.5), rgba(224,177,131,0));
  margin: 6px 0 18px;
}

.yifmc-title {
  font-family: 'georgia', sans-serif;
  font-weight: 600;
  font-size: 1.14rem;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 12px;
}

.yifmc-desc {
  font-family: 'georgia', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(220,228,245,0.72);
  margin: 0 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yifmc-readstory {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: 'georgia', sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--gold-bright, #e0b183);
  text-decoration: none;
  transition: color 0.25s ease, gap 0.25s ease;
}

.yifmc-readstory i { font-size: 0.75rem; transition: transform 0.25s ease; }
.yifmc-readstory:hover { color: var(--gold, #cc945a); }
.yifmc-readstory:hover i { transform: translateX(4px); }

.yifmc-url {
  font-family: 'georgia', sans-serif;
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(220,228,245,0.42);
  margin: 18px 0 0;
  word-break: break-all;
}

@media (max-width: 1080px) {
  .yifmc-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
}















/* ============================================================
   MEDIA COVERAGE — image-first card carousel
   Namespace: "yifmc-". Fully separate from .yifn-* so the
   existing News section is completely unaffected. Uses only
   the brand tokens already defined in :root — --navy / --gold /
   --gold-bright — and the 'georgia', sans-serif font stack.

   This is a refined version of your existing .yifmc-* rules:
   deeper scrim for legibility over real photography, a crisper
   card border, subtle photo desaturation-on-hover polish, and
   tighter type rhythm. Replace your current .yifmc-* block in
   style.css with everything below.
   ============================================================ */

.yifmc-section {
  padding: 40px 24px 40px;
  background: var(--navy);
}

.yifmc-container {
  max-width: 1280px;
  margin: 0 auto;
}

.yifmc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.yifmc-title {
  font-family: 'georgia', sans-serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #ffffff;
  letter-spacing: 0.01em;
  position: relative;
  padding-left: 18px;
}

.yifmc-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 60%;
  border-radius: 4px;
  background: var(--gold);
}

/* ---------- Track / carousel shell ---------- */
.yifmc-track-wrap {
  position: relative;
}

.yifmc-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px 12px;
  cursor: grab;
}
.yifmc-track::-webkit-scrollbar { display: none; }
.yifmc-track.yifmc-dragging { cursor: grabbing; scroll-behavior: auto; }

.yifmc-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
  z-index: 5;
  cursor: pointer;
}
.yifmc-arrow:hover { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--navy); border-color: transparent; }
.yifmc-arrow.yifmc-disabled { opacity: 0.35; pointer-events: none; }
.yifmc-arrow-left { left: -60px; }
.yifmc-arrow-right { right: -60px; }

@media (max-width: 1200px) {
  .yifmc-arrow-left { left: 0; }
  .yifmc-arrow-right { right: 0; }
}

/* ---------- Card ---------- */
.yifmc-card {
  position: relative;
  flex: 0 0 auto;
  width: 380px;
  height: 460px;
  border-radius: 22px;
  overflow: hidden;
  display: block;
  background: var(--navy);
  border: 1px solid rgba(204, 148, 90, 0.18);
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease, border-color 0.4s ease;
}

.yifmc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(224, 177, 131, 0.55);
}

.yifmc-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: saturate(1.02);
}

.yifmc-card:hover .yifmc-card-bg {
  transform: scale(1.06);
}

/* bottom gradient scrim for text legibility over real photography */
.yifmc-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 18, 46, 0.05) 0%,
    rgba(5, 18, 46, 0.05) 32%,
    rgba(5, 18, 46, 0.55) 65%,
    rgba(5, 18, 46, 0.95) 100%
  );
  pointer-events: none;
}

/* top-left pill tag */
.yifmc-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-family: 'georgia', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(5, 18, 46, 0.3);
}

/* bottom-right circular badge — replaces a play icon with the outlet logo */
.yifmc-logo-badge {
  position: absolute;
  /*bottom: 22px;*/
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 125px;
  /*height: 58px;*/
  border-radius: 15%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /*padding: 9px;*/
  box-shadow: 0 6px 18px rgba(5, 18, 46, 0.4);
  transition: transform 0.3s ease;
}

.yifmc-card:hover .yifmc-logo-badge {
  transform: scale(1.08);
}

.yifmc-logo-badge img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* text block */
.yifmc-card-body {
  position: absolute;
  left: 0;
  right: 96px; /* keep clear of the logo badge */
  bottom: 24px;
  z-index: 2;
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yifmc-card-date {
  font-family: 'georgia', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gold-bright);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.yifmc-card-heading {
  font-family: 'georgia', sans-serif;
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.32;
  color: #ffffff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .yifmc-card { width: 300px; height: 400px; }
  .yifmc-card-heading { font-size: 1.08rem; }
  .yifmc-arrow { display: none; }
}

@media (max-width: 600px) {
  .yifmc-section { padding: 20px 16px 20px; }
  .yifmc-head { margin-bottom: 26px; }
  .yifmc-card { width: 260px; height: 360px; border-radius: 18px; }
  .yifmc-logo-badge { width: 48px; height: 48px; bottom: 16px; right: 16px; }
  .yifmc-card-body { right: 78px; bottom: 18px; padding: 0 18px; }
  .yifmc-card-heading { font-size: 1rem; }
  .yifmc-arrow { width: 40px; height: 40px; font-size: 13px; }
}