/* ══════════════════════════════════════════════════════════════════════════
   SINGLE NEWS ARTICLE — converted from ArticleHeroScene + ArticleBriefScene
   + ArticleStoryScene + ArticleRelatedScene
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* relative overflow-hidden bg-stone-deep text-cloud */
.gans-article-hero {
  position: relative;
  overflow: hidden;
  background: var(--stone-deep);
  color: var(--cloud);
}

/* brand pattern right side */
.gans-article-hero__pattern {
  pointer-events: none;
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 68%;
  background-image: url('../images/fullpattern.svg');
  background-repeat: repeat;
  background-position: right top;
  -webkit-mask-image:
    linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 25%, rgba(0,0,0,0) 80%),
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 96%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 25%, rgba(0,0,0,0) 80%),
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 96%);
  mask-composite: intersect;
  opacity: 0.5;
  z-index: 0;
}

/* px-8 pt-32 pb-12 md:px-12 md:pt-36 md:pb-16 */
.gans-article-hero__top {
  position: relative;
  z-index: 1;
  padding: 128px 32px 48px;
}

@media (min-width: 768px) {
  .gans-article-hero__top {
    padding: 144px 48px 64px;
  }
}

/* mx-auto max-w-[1440px] */
.gans-article-hero__inner {
  max-width: 1440px;
  margin: 0 auto;
}

/* breadcrumb — flex items-center gap-3 text-cloud/70 */
.gans-article-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* font-display text-[11px] uppercase tracking-[0.22em] */
.gans-article-hero__breadcrumb-link {
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.gans-article-hero__breadcrumb-link:hover {
  color: var(--gold);
}

.gans-article-hero__breadcrumb-sep {
  color: rgba(255, 255, 255, 0.3);
}

.gans-article-hero__breadcrumb-cat {
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* h1 — mt-12 max-w-5xl font-display text-[clamp(2rem,5.4vw,4.5rem)] font-light leading-[1.02] tracking-[-0.03em] text-gold */
.gans-article-hero__title {
  margin-top: 48px;
  max-width: 64rem;
  font-size: clamp(2rem, 5.4vw, 4.5rem);
  font-weight: 300;
  line-height: 1.02;
  color: var(--gold);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .gans-article-hero__title {
    margin-top: 56px;
  }
}

/* meta — mt-14 grid max-w-3xl grid-cols-2 gap-x-10 gap-y-8 md:mt-16 md:grid-cols-4 */
.gans-article-hero__meta {
  margin-top: 56px;
  display: grid;
  max-width: 48rem;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 32px;
}

@media (min-width: 768px) {
  .gans-article-hero__meta {
    margin-top: 64px;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* text-[10.5px] uppercase tracking-[0.24em] text-cloud/50 */
.gans-article-hero__meta-label {
  font-size: 10.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* mt-2.5 text-[15px] font-light leading-[1.3] tracking-[-0.005em] text-cloud */
.gans-article-hero__meta-value {
  margin-top: 10px;
  margin-inline-start: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--cloud);
}

/* image wrapper — relative mx-auto mt-16 max-w-[1440px] px-8 pb-0 md:mt-20 md:px-12 */
.gans-article-hero__img-wrap {
  position: relative;
  z-index: 1;
  padding: 0 32px;
  margin-top: 64px;
}

@media (min-width: 768px) {
  .gans-article-hero__img-wrap {
    margin-top: 80px;
    padding: 0 48px;
  }
}

/* relative aspect-[16/8] overflow-hidden rounded-lg */
.gans-article-hero__img-frame {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border-radius: 8px;
}

.gans-article-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* bg-gradient-to-t from-stone-deep/65 via-stone-deep/15 to-transparent */
.gans-article-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(42,42,42,0.65) 0%,
    rgba(42,42,42,0.15) 40%,
    transparent 70%);
}

/* ── Brief ───────────────────────────────────────────────────────────────── */
/* relative bg-cloud px-8 py-24 md:px-12 md:py-32 */
.gans-article-brief {
  background: var(--cloud);
  padding: 96px 32px;
}

@media (min-width: 768px) {
  .gans-article-brief {
    padding: 128px 48px;
  }
}

/* mx-auto grid max-w-[1200px] grid-cols-1 gap-12 md:grid-cols-[200px_1fr] md:gap-20 */
.gans-article-brief__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 768px) {
  .gans-article-brief__inner {
    grid-template-columns: 200px 1fr;
    gap: 80px;
  }
}

/* flex items-center gap-3 md:sticky md:top-32 md:self-start */
.gans-article-brief__label-col {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .gans-article-brief__label-col {
    position: sticky;
    top: 128px;
    align-self: start;
  }
}

/* h-px w-8 bg-gold */
.gans-article-brief__line {
  display: block;
  height: 1px;
  width: 32px;
  background: var(--gold);
  flex-shrink: 0;
}

/* font-display text-[10.5px] uppercase tracking-[0.22em] text-stone */
.gans-article-brief__label {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--stone);
}

/* max-w-2xl font-display text-[clamp(1.25rem,2.1vw,1.625rem)] font-light leading-[1.45] tracking-[-0.015em] text-stone */
.gans-article-brief__lead {
  max-width: 42rem;
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--stone);
}

/* ── Story ───────────────────────────────────────────────────────────────── */
/* relative bg-cloud px-8 pb-24 md:px-12 md:pb-32 */
.gans-article-story {
  background: var(--cloud);
  padding: 0 32px 96px;
}

@media (min-width: 768px) {
  .gans-article-story {
    padding: 0 48px 128px;
  }
}

/* mx-auto max-w-[720px] */
.gans-article-story__inner {
  max-width: 720px;
  margin: 0 auto;
}

/* mb-12 flex items-center gap-3 md:mb-16 */
.gans-article-story__header {
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .gans-article-story__header {
    margin-bottom: 64px;
  }
}

.gans-article-story__line {
  display: block;
  height: 1px;
  width: 32px;
  background: var(--gold);
  flex-shrink: 0;
}

.gans-article-story__label {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--stone);
}

/* text-[17px] leading-[1.75] text-stone */
.gans-article-story__body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--stone);
  font-family: var(--font-suisse), sans-serif;
}

.gans-article-story__body p {
  margin-top: 0;
  margin-bottom: 28px;
}

.gans-article-story__body p:last-child {
  margin-bottom: 0;
}

/* drop-cap on first paragraph first letter */
.gans-article-story__body > p:first-child::first-letter,
.gans-article-content .gans-news-paragraph:first-child .gans-news-paragraph__text::first-letter,
.gans-article-content .gans-news-paragraph:first-of-type .gans-news-paragraph__text::first-letter,
.gans-article-content .wp-block-gans-news-paragraph:first-child .gans-news-paragraph__text::first-letter,
.gans-article-content .wp-block-gans-news-paragraph:first-of-type .gans-news-paragraph__text::first-letter {
  float: left;
  font-family: var(--font-suisse), sans-serif;
  font-size: clamp(4rem, 7vw, 5.5rem);
  font-weight: 300;
  line-height: 0.85;
  color: var(--gold);
  margin-right: 16px;
}

.gans-article-story__body h2,
.gans-article-story__body h3 {
  font-weight: 300;
  color: var(--stone-deep);
  margin-top: 48px;
  margin-bottom: 16px;
}

.gans-article-story__body h2 { font-size: 28px; }
.gans-article-story__body h3 { font-size: 22px; }

.gans-article-story__body a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gans-article-story__body blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 24px;
  margin: 40px 0;
  font-size: 20px;
  font-weight: 300;
  color: var(--stone-deep);
}

.gans-article-story__body img {
  max-width: 100%;
  border-radius: 6px;
  margin: 32px 0;
}

/* ── Related ─────────────────────────────────────────────────────────────── */
/* relative overflow-hidden bg-stone-deep px-8 py-24 text-cloud md:px-12 md:py-32 */
.gans-article-related {
  position: relative;
  overflow: hidden;
  background: var(--stone-deep);
  color: var(--cloud);
  padding: 96px 32px;
}

@media (min-width: 768px) {
  .gans-article-related {
    padding: 128px 48px;
  }
}

/* mx-auto max-w-[1440px] */
.gans-article-related__inner {
  max-width: 1440px;
  margin: 0 auto;
}

/* mb-12 flex items-end justify-between gap-6 md:mb-16 */
.gans-article-related__header {
  margin-bottom: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

@media (min-width: 768px) {
  .gans-article-related__header {
    margin-bottom: 64px;
  }
}

.gans-article-related__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gans-article-related__line {
  display: block;
  height: 1px;
  width: 32px;
  background: var(--gold);
  flex-shrink: 0;
}

.gans-article-related__label {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--cloud);
}

/* group flex items-center gap-3 font-display text-[11px] uppercase tracking-[0.22em] text-cloud/70 */
.gans-article-related__all {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s;
  font-family: var(--font-suisse), sans-serif;
  white-space: nowrap;
}

.gans-article-related__all:hover {
  color: var(--gold);
}

/* h-px w-6 bg-current transition-all duration-500 group-hover:w-10 */
.gans-article-related__all-bar {
  display: block;
  height: 1px;
  width: 24px;
  background: currentColor;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gans-article-related__all:hover .gans-article-related__all-bar {
  width: 40px;
}

/* grid grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-3 md:gap-x-10 */
.gans-article-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 32px;
  row-gap: 48px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .gans-article-related__grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
  }
}

/* card link */
.gans-article-related__card-link {
  display: block;
  text-decoration: none;
}

/* relative aspect-[16/10] overflow-hidden rounded-md */
.gans-article-related__card-img-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  background: #1a1a1a;
}

/* object-cover opacity-90 group-hover:scale-[1.05] group-hover:opacity-100 */
.gans-article-related__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 500ms;
}

.gans-article-related__card-link:hover .gans-article-related__card-img {
  transform: scale(1.05);
  opacity: 1;
}

.gans-article-related__card-img-placeholder {
  width: 100%;
  height: 100%;
  background: #1a1a1a;
}

/* bg-gradient-to-t from-stone-deep/55 */
.gans-article-related__card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42,42,42,0.55), transparent, transparent);
}

/* gold bar — w-0 group-hover:w-full */
.gans-article-related__card-img-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--gold);
  transition: width 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gans-article-related__card-link:hover .gans-article-related__card-img-bar {
  width: 100%;
}

/* mt-5 flex items-center gap-3 */
.gans-article-related__card-meta {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* category tag */
.gans-article-related__card-cat {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--cloud);
}

/* text-[10.5px] uppercase tracking-[0.22em] text-cloud/55 tabular-nums */
.gans-article-related__card-date {
  font-size: 10.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

/* mt-4 text-[19px] font-light leading-[1.2] tracking-[-0.02em] text-cloud group-hover:text-gold md:text-[20px] */
.gans-article-related__card-title {
  margin-top: 16px;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--cloud);
  transition: color 0.3s;
}

@media (min-width: 768px) {
  .gans-article-related__card-title {
    font-size: 20px;
  }
}

.gans-article-related__card-link:hover .gans-article-related__card-title {
  color: var(--gold);
}