/* =========================================================
   INSIGHT ARTICLE (shared)
   Loaded by all insight article pages. Page-level CSS may extend.
   Uses global Logoholik tokens.
   ========================================================= */

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

.article-hero {
  min-height: auto;
  justify-content: flex-start;

  padding-top: clamp(var(--space-12), 17vw, var(--space-13));
  padding-bottom: clamp(var(--space-9), 10vw, var(--space-11));
}

.article-hero-layout {
  width: 100%;
  max-width: var(--container-sm);

  margin-inline: auto;
  text-align: center;
}

.article-hero .section-title {
  max-width: 18ch;

  margin-inline: auto;

  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);

  text-wrap: balance;
}

.article-hero-image {
  margin-top: var(--space-9);

  max-width: var(--article-hero-image-max);
  width: 100%;
  aspect-ratio: 16 / 9;

  margin-inline: auto;

  border-radius: var(--radius-md);
  overflow: hidden;
}

.article-hero-image--ratio-16-10 {
  aspect-ratio: 16 / 10;
}

.article-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes article-image-expand {
  from { max-width: var(--article-hero-image-max); }
  to   { max-width: var(--container-lg); }
}

@keyframes article-figure-expand {
  from { max-width: var(--article-body-max); }
  to   { max-width: var(--article-figure-max); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .article-hero-image {
      animation: article-image-expand linear both;
      animation-timeline: scroll(root);
      animation-range: 0px var(--article-scroll-expand-end);
    }

    .article-figure {
      animation: article-figure-expand linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}

.article-hero-byline {
  max-width: var(--container-sm);

  margin-top: var(--space-6);
  margin-inline: auto;

  text-align: center;
}

.article-meta {
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);

  color: var(--text-secondary-strong);
}

.article-hero .section-lead {
  max-width: var(--article-hero-lead-max);

  margin-top: var(--space-7);
  margin-inline: auto;

  font-size: var(--text-lg-plus);
  letter-spacing: var(--tracking-lead);
  line-height: var(--leading-reading);

  color: var(--text-inverse);
  opacity: var(--article-hero-lead-opacity);
}

.article-hero .article-meta {
  color: var(--text-inverse);
  opacity: var(--article-hero-meta-opacity);
}


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

.article-body-section {
  padding-top: clamp(var(--space-7), 6vw, var(--space-9));
  padding-bottom: clamp(var(--space-9), 10vw, var(--space-11));

  overflow: clip;
}

.article-body {
  width: 100%;
  max-width: var(--article-body-max);

  margin-inline: auto;
}

.article-body h2,
.article-body h3 {
  font-family: var(--font-primary);
}

.article-body h2 {
  margin: clamp(var(--space-8), 8vw, var(--space-9)) 0 var(--space-5);

  font-size: clamp(var(--text-2md), 2.9vw, var(--article-h2-fluid-max));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);

  color: inherit;

  text-wrap: balance;
}

.article-body p,
.article-body li {
  font-family: var(--font-serif);
  font-size: var(--text-lg-plus);
  line-height: var(--leading-serif-body);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-serif-body);
  font-optical-sizing: auto;

  color: inherit;
}

.article-body p {
  margin: 0 0 var(--article-paragraph-spacing);
}

.article-body em {
  font-style: italic;
  font-weight: var(--weight-regular);
}

.article-body strong {
  font-weight: 600;
}


/* =========================================================
   PULL QUOTE
   ========================================================= */

.article-pullquote {
  margin-block: clamp(var(--space-7), 7.2vw, var(--space-8));

  margin-inline: 0;
  padding: 0;
  border: 0;

  font-family: var(--font-primary);
  font-size: var(--text-2md);
  line-height: var(--leading-snug);
  font-weight: var(--weight-regular);
  font-style: normal;
  letter-spacing: var(--tracking-lead);

  color: var(--text-secondary-strong);
}

.article-pullquote::before {
  content: '';
  display: block;
  width: var(--article-pullquote-rule-width);
  height: var(--article-pullquote-rule-height);
  background: var(--bg-signal);
  margin-bottom: var(--space-5);
}


/* =========================================================
   ARTICLE FIGURE
   ========================================================= */

.article-figure {
  margin-block: clamp(var(--space-7), 7vw, var(--space-8));

  margin-left: 50%;
  width: 100vw;
  max-width: var(--article-figure-max);
  transform: translateX(-50%);
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;

  border-radius: var(--radius-md);
  overflow: hidden;
}

.article-figure figcaption {
  margin-top: var(--space-4);
  text-align: center;

  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-body);

  color: var(--text-secondary);
}

.article-divider {
  width: var(--space-6);
  height: 1px;

  margin: clamp(var(--space-7), 7vw, var(--space-8)) 0;

  border: 0;

  background: var(--border-strong-color);
}


/* =========================================================
   STUDY GALLERY (optional markup)
   ========================================================= */

.article-gallery {
  margin-block: clamp(var(--space-7), 7vw, var(--space-8));
  margin-left: 50%;
  width: 100vw;
  max-width: var(--article-gallery-max);
  transform: translateX(-50%);
}

.article-gallery__layout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.article-gallery--duo .article-gallery__layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-gallery--duo .article-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.article-gallery__item {
  margin: 0;
}

.article-gallery__item .case-lightbox {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.article-gallery__item .case-lightbox img {
  display: block;
  width: 100%;
  max-height: var(--article-gallery-image-max-height);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: inherit;
  transition:
    transform 750ms cubic-bezier(.22, 1, .36, 1),
    filter 750ms ease;
}

.article-gallery__item .case-lightbox::after {
  content: "↗";
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: var(--pill-icon-size);
  height: var(--pill-icon-size);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 14, 0.42);
  color: #fff;
  font-size: 15px;
  line-height: var(--leading-heading);
  opacity: 0;
  transform: translateY(var(--motion-shift-link));
  transition:
    opacity 240ms ease,
    transform 240ms ease,
    background 240ms ease;
  pointer-events: none;
  backdrop-filter: blur(8px);
  z-index: 1;
}

.article-gallery__item .case-lightbox:focus-visible img {
  transform: scale(1.025);
  filter: brightness(1.04);
}

.article-gallery__item .case-lightbox:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .article-gallery__item .case-lightbox:hover img {
    transform: scale(1.025);
    filter: brightness(1.04);
  }

  .article-gallery__item .case-lightbox:hover::after {
    opacity: 1;
    transform: translateY(0);
  }
}

.article-gallery__item .case-lightbox:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: var(--motion-shift-link);
}

.article-gallery__item figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-body);
  color: var(--text-secondary);
}


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

@media (min-width: 761px) and (max-width: 1024px) {

  .article-hero .section-inner,
  .article-body-section .section-inner {
    padding-inline: var(--section-padding-x);
  }

  .article-hero .section-title {
    font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl));
  }

  .article-figure,
  .article-gallery {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-inline: auto;
    transform: none;
  }

  .article-figure--wide {
    max-width: 100%;
  }

  .article-gallery__layout {
    gap: var(--space-3);
  }

}

@media (max-width: 1024px) {

  .article-hero-image {
    aspect-ratio: 16 / 12;
  }

  .article-figure figcaption,
  .article-gallery__item figcaption {
    text-align: left;
  }

}

@media (min-width: 761px) and (max-width: 899px) {

  .article-gallery__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    row-gap: var(--space-7);
  }

}

@media (max-width: 760px) {

  .article-hero {
    padding-top: clamp(var(--space-9), 24vw, var(--space-10));
    padding-bottom: var(--space-9);
  }

  .article-hero-layout,
  .article-hero-byline {
    text-align: left;
  }

  .article-hero .section-title {
    max-width: 14ch;

    margin-inline: 0;

    font-size: clamp(var(--text-2xl), 11vw, var(--text-3xl));
  }

  .article-hero-image {
    max-width: 100%;
    aspect-ratio: 16 / 14;

    margin-top: var(--space-7);

    border-radius: var(--radius-sm);
  }

  .article-hero-byline {
    margin-top: var(--space-5);
  }

  .article-hero .section-lead {
    max-width: 32ch;

    margin-inline: 0;

    font-size: var(--text-base);
    letter-spacing: var(--tracking-lead);
  }

  .article-body h2 {
    font-size: var(--text-2xl);
  }

  .article-body p,
  .article-body li {
    font-size: var(--text-article-body-mobile);
  }

  .article-body-section {
    min-height: auto;

    padding-top: var(--space-9);
    padding-bottom: var(--space-11);
  }

  .article-figure,
  .article-gallery {
    width: 100%;
    max-width: none;
    margin-left: 0;
    transform: none;
  }

  .article-figure img,
  .article-gallery__item .case-lightbox {
    border-radius: var(--radius-sm);
  }

  .article-gallery__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-gallery__item .case-lightbox img {
    max-height: var(--article-gallery-image-max-height-mobile);
  }

}

@media (prefers-reduced-motion: reduce) {

  .article-gallery__item .case-lightbox img,
  .article-gallery__item .case-lightbox::after {
    transition: none;
  }

  .article-gallery__item .case-lightbox:focus-visible img {
    transform: none;
  }

}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .article-gallery__item .case-lightbox:hover img {
    transform: none;
  }
}


/* =========================================================
   BODY LINKS
   ========================================================= */

.article-body a {
  color: var(--obsidian-soft);
  text-decoration: underline;
  text-decoration-color: var(--border-strong-color);
  text-underline-offset: calc(0.15em + 3px);
  text-decoration-thickness: 1px;
  transition:
    color var(--transition-base),
    text-decoration-color var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .article-body a:hover {
    color: var(--text-primary);
    text-decoration-color: var(--text-secondary-strong);
  }
}

.article-body a em {
  font-style: italic;
}


/* =========================================================
   FURTHER READING (optional end-of-article block)
   ========================================================= */

.article-further-reading {
  margin-top: clamp(var(--space-8), 8vw, var(--space-9));
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-soft-color);
}

.article-further-reading h2 {
  margin-top: 0;
}

.article-further-reading > p {
  margin-bottom: var(--space-5);

  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-body);

  color: var(--text-secondary);
}

.article-further-reading ul {
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: var(--space-3);
}

.article-further-reading li {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-body);
}