/* ==========================================================================
   VSHS NEWS ARTICLE
   Editorial article system — shared across all article pages. Nothing in
   this file references a specific article's title, date, or image; every
   rule targets structure and class names only, so it applies identically
   to any page that follows the same markup pattern.
   ========================================================================== */


/* ==========================================================================
   ARTICLE HERO
   ========================================================================== */

.article-hero {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #101820;
}

.article-hero-media {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(560px, 67vh, 700px);
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  background: #17202b;
}

.article-hero-media > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 27%;
}


.article-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(7, 18, 31, 0.04) 0%,
      rgba(7, 18, 31, 0.02) 34%,
      rgba(7, 18, 31, 0.16) 55%,
      rgba(7, 18, 31, 0.82) 100%
    );
}

.article-hero-header {
  position: absolute;
  top: 24px;
  left: 40px;
  z-index: 3;
}
.article-hero-logo {
  display: block;
}
.article-hero-logo img {
  height: 48px;
  width: auto;
  display: block;
}

.article-hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: 0 40px clamp(48px, 7vw, 78px);
  color: #fff;
  pointer-events: auto;
}

.article-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.article-kicker .kicker-line {
  display: block;
  width: 30px;
  height: 1px;
  background: rgba(255, 255, 255, 0.65);
}

.article-hero h1 {
  width: min(940px, 100%);
  margin: 0 0 22px;
  color: #fff;
  font-family: var(--serif, "Source Serif 4", Georgia, serif);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 1.1;
}

.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 500;
}
.article-meta .meta-dot { color: rgba(255, 255, 255, 0.48); }

@media (max-width: 768px) {
  .article-hero-header { top: 18px; left: 22px; }
  .article-hero-content { padding: 0 22px 34px; }
}

/* ==========================================================================
   HERO INNER GRID

   The content uses a controlled page grid instead of being positioned
   randomly inside the photograph. The left edge is intentionally shared
   with the site's overall content system.
   ========================================================================== */

.article-hero-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}


/* ==========================================================================
   HERO CONTENT
   ========================================================================== */

.article-hero-content {
  width: 100%;
  margin: 0;
  padding:
    0
    40px
    clamp(48px, 7vw, 78px);
  color: #fff;
  pointer-events: auto;
}

/* Syncs with the header's own mobile breakpoint (768px), which is a
   different threshold than this hero's other mobile-specific rules
   below (640px) — without this, there's a gap between 641-768px where
   the header has already gone narrow but the hero content hasn't. */
@media (max-width: 768px) {
  .article-hero-content { padding-left: 22px; padding-right: 22px; }
}


/* ==========================================================================
   BREADCRUMB

   Sits above the kicker inside the hero content. Applies to any article
   page's breadcrumb trail, whatever the trail's actual text is.
   ========================================================================== */

.article-hero-content .breadcrumb {
  display: block;
  font-family: var(--font, "Inter", sans-serif);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
}

.article-hero-content .breadcrumb a {
  color: rgba(255, 255, 255, 0.8);
}

.article-hero-content .breadcrumb a:hover {
  color: #fff;
}


/* ==========================================================================
   KICKER
   ========================================================================== */

.article-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.article-kicker .kicker-line {
  display: block;
  width: 30px;
  height: 1px;
  background: rgba(255, 255, 255, 0.65);
}


/* ==========================================================================
   HERO TITLE

   Controlled width prevents a huge single-line title from becoming
   visually cheap or overwhelming.
   ========================================================================== */

.article-hero h1 {
  width: min(940px, 100%);
  margin: 0 0 22px;
  color: #fff;
  font-family: var(--serif, "Source Serif 4", Georgia, serif);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 0.99;
  letter-spacing: -0.045em;
  text-wrap: balance;
}


/* ==========================================================================
   META
   ========================================================================== */

.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.article-meta .meta-dot {
  color: rgba(255, 255, 255, 0.48);
}


/* ==========================================================================
   ARTICLE BODY
   ========================================================================== */

.page-section {
  padding: 78px 0 110px;
  background: var(--paper, #fff);
}

.article-body {
  width: min(720px, calc(100% - 40px));
  margin: 0 auto;
}


/* ==========================================================================
   ARTICLE COPY
   ========================================================================== */

.article-body p {
  margin: 0 0 25px;
  color: var(--ink);
  font-family: var(--font, "Inter", sans-serif);
  font-size: 17px;
  line-height: 1.82;
}

.article-body p.lede {
  margin-bottom: 34px;
  color: var(--ink);
  font-family: var(--serif, "Source Serif 4", Georgia, serif);
  font-size: 23px;
  line-height: 1.55;
  letter-spacing: -0.012em;
}


/* ==========================================================================
   INLINE ARTICLE IMAGE

   This is deliberately smaller than the hero.
   It should read as part of the article, not as a second hero.
   ========================================================================== */

.article-inline-photo {
  width: min(760px, 100%);
  margin: 52px auto 56px;
  overflow: hidden;
}

.article-inline-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 3px;
  transition: transform 500ms cubic-bezier(.2, .7, .2, 1);
}

.article-inline-photo:hover img {
  transform: scale(1.012);
}

.article-inline-photo figcaption {
  margin-top: 11px;
  padding-left: 2px;
  color: var(--slate);
  font-family: var(--font, "Inter", sans-serif);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}


/* ==========================================================================
   KEEP READING

   Each link's two children (a text span and a .related-arrow span) are
   what let justify-content: space-between and the hover-slide animation
   below actually work — every article page's related links need both.
   ========================================================================== */

.article-related {
  margin-top: 68px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.article-related h3 {
  margin: 0 0 10px;
  color: var(--royal);
  font-family: var(--font, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-related-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--serif, "Source Serif 4", Georgia, serif);
  font-size: 19px;
  line-height: 1.35;
  text-decoration: none;
  transition:
    color 180ms ease,
    padding-left 180ms ease;
}

.article-related-link:last-child {
  border-bottom: none;
}

.article-related-link:hover {
  padding-left: 7px;
  color: var(--royal);
}

.related-arrow {
  flex: 0 0 auto;
  color: var(--slate);
  font-family: var(--font, "Inter", sans-serif);
  font-size: 15px;
  transition:
    transform 180ms ease,
    color 180ms ease;
}

.article-related-link:hover .related-arrow {
  color: var(--royal);
  transform: translate(3px, -2px);
}


/* ==========================================================================
   LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1400px) {
  .article-hero-media { height: 650px; }
  .article-hero-media > img { object-position: center 25%; }
  .article-hero h1 { max-width: 920px; font-size: 50px; }
}


/* ==========================================================================
   DESKTOP / LAPTOP
   ========================================================================== */

@media (min-width: 901px) and (max-width: 1199px) {
  .article-hero-media { height: 620px; min-height: 0; }
  .article-hero h1 { max-width: 850px; font-size: clamp(32px, 4vw, 46px); }
}


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

@media (max-width: 900px) {
  .article-hero-media { height: 620px; min-height: 0; }
  .article-hero-media > img { object-position: center 24%; }
  .article-hero h1 { width: min(760px, 100%); font-size: clamp(30px, 4.5vw, 42px); }
  .article-body { width: min(720px, calc(100% - 48px)); }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {
  .article-hero-media { height: 610px; min-height: 0; }

  /*
     On mobile, move the focal point slightly upward.
     This gives the people in the photograph more breathing room.
  */
  .article-hero-media > img { object-position: center 19%; }

  .article-hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(7, 18, 30, 0.02) 0%,
        rgba(7, 18, 30, 0.08) 34%,
        rgba(5, 14, 25, 0.90) 100%
      );
  }

  .article-hero-content { padding: 0 22px 34px; }

  .article-kicker { gap: 8px; margin-bottom: 14px; font-size: 9px; letter-spacing: 0.12em; }
  .article-kicker .kicker-line { width: 20px; }

  .article-hero h1 {
    width: 100%;
    margin-bottom: 18px;
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.04em;
  }

  .article-meta { font-size: 10px; }

  .page-section { padding: 50px 0 74px; }
  .article-body { width: calc(100% - 34px); }

  .article-body p { font-size: 16px; line-height: 1.78; margin-bottom: 22px; }
  .article-body p.lede { font-size: 20px; line-height: 1.55; margin-bottom: 29px; }

  .article-inline-photo { width: 100%; margin: 40px 0 40px; }
  .article-inline-photo img { aspect-ratio: 16 / 10; border-radius: 2px; }
  .article-inline-photo figcaption { padding-left: 0; font-size: 10px; }

  .article-related { margin-top: 50px; }
  .article-related-link { font-size: 17px; padding: 16px 0; }
}


/* ==========================================================================
   VERY SMALL PHONES
   ========================================================================== */

@media (max-width: 380px) {
  .article-hero-media { height: 570px; }
  .article-hero-media > img { object-position: center 17%; }
  .article-hero h1 { font-size: 24px; }
  .article-body { width: calc(100% - 28px); }
}