/* ============================
   MEDIA APPEARANCES PAGE STYLES
============================ */


/* ============================
   PAGE TITLE BAR
============================ */

.vm-page-title {
  background-color: var(--vm-purple-footer);
  padding: 96px 0;
  text-align: center;
}

.vm-page-title__heading {
  margin: 0;
  font-family: var(--vm-font);
  font-weight: var(--vm-fw-500);
  line-height: 1;
  letter-spacing: var(--vm-ls--174);
}

/* ABOUT (blue) */
.vm-page-title__highlight {
  color: var(--vm-blue-accent);
  /* margin-right: 8px; */
}

/* Visa Matters (white) */
.vm-page-title__main {
  color: var(--vm-white);
}

/* ============================
   RESPONSIVE TYPOGRAPHY
============================ */

/* Desktop */
@media (min-width: 1200px) {
  .vm-page-title__heading {
    font-size: var(--vm-fs-58);
    line-height: var(--vm-lh-57);
  }
}

/* Tablet */
@media (max-width: 1199px) {
  .vm-page-title__heading {
    font-size: 48px;
    line-height: 1.1;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .vm-page-title {
    padding: 64px 0;
  }

  .vm-page-title__heading {
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: var(--vm-ls--1);
  }
}



/* ============================
   INTRO SECTION
============================ */

.vm-media-intro {
  padding: 120px 20px;
}

.vm-media-intro-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* TITLE */
.vm-media-title {
  font-family: var(--vm-font);
  font-weight: var(--vm-fw-500);
  font-size: var(--vm-fs-46);
  line-height: var(--vm-lh-52);
  letter-spacing: var(--vm-ls--138);
  color: var(--vm-heading);
  margin-bottom: 35px;
}

/* DESCRIPTION */
.vm-media-desc {
  font-family: var(--vm-font);
  font-weight: var(--vm-fw-400);
  font-size: var(--vm-fs-20);
  line-height: var(--vm-lh-26);
  letter-spacing: var(--vm-ls--04);
  color: var(--vm-text-body);
  margin-bottom: 15px;
}

.vm-media-desc-primary {
  font-weight: var(--vm-fw-500);
}

/* ============================
   MEDIA SECTION
============================ */

.vm-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* GRID */
.vm-media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 45px;
  padding-bottom: 80px;
}

/* ============================
   CARD
============================ */

.vm-media-card {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--vm-white);
}

/* IMAGE AREA */
.vm-media-image {
  position: relative;
  width: 100%;
  height: 300px;
}

.vm-media-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* DATE BOX */
.vm-date-box {
  position: absolute;
  top: 0px;
  left: 20px;
  width: 124px;
  height: 56px;
  background: var(--vm-blue-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.vm-date-day {
  font-family: var(--vm-font);
  font-weight: var(--vm-fw-700);
  font-size: var(--vm-fs-18);
  line-height: var(--vm-lh-24);
  letter-spacing: var(--vm-ls--018);
  color: var(--vm-white);
}

.vm-date-year {
  font-family: var(--vm-font);
  font-weight: var(--vm-fw-400);
  font-size: var(--vm-fs-14);
  line-height: var(--vm-lh-24);
  letter-spacing: var(--vm-ls--014);
  color: var(--vm-white);
}

/* CONTENT */
.vm-card-content {
  padding: 25px 0 0;
}

/* SUBTITLE */
.vm-subtitle {
  font-family: var(--vm-font);
  font-weight: var(--vm-fw-600);
  font-size: var(--vm-fs-16);
  line-height: var(--vm-lh-22);
  letter-spacing: var(--vm-ls--016);
  color: var(--vm-blue);
  margin-bottom: 20px;
}

/* TITLE */
.vm-title {
  font-family: var(--vm-font);
  font-weight: var(--vm-fw-600);
  font-size: var(--vm-fs-24);
  line-height: var(--vm-lh-28);
  letter-spacing: var(--vm-ls--048);
  color: var(--vm-heading);
  margin-bottom: 25px;
}

/* ============================
   RESPONSIVE
============================ */

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

  .vm-media-card {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .vm-media-intro {
    padding: 80px 20px;
  }

  .vm-media-title {
    font-size: 34px;
    line-height: 40px;
  }

  .vm-media-desc {
    font-size: var(--vm-fs-18);
    line-height: var(--vm-lh-24);
  }
}