/* ==========================================================================
   Lohabour — Article.css
   Reusable journal-article template.
   Assumes base.css is already loaded.
   ========================================================================== */


/* ==========================================================================
   DISPLAY / TYPOGRAPHY
   ========================================================================== */

.display--sm {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 10px 0 18px;
}


/* ==========================================================================
   ARTICLE MAIN
   ========================================================================== */

.art-main {
  background: var(--bg);
}


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

.art-hero {
  padding: 190px 0 0;
}

/*
 * Wider hero content so long article titles do not feel compressed.
 */
.art-hero__inner {
  width: min(100% - 40px, 1100px);
  margin: 0 auto;
  text-align: center;
}

.art-hero__back {
  display: inline-block;
  margin-bottom: 40px;
  color: var(--text-secondary);
  transition: color 0.25s var(--ease);
}

.art-hero__back:hover {
  color: var(--accent);
}

.art-hero__category {
  justify-content: center;
  color: var(--accent);
  margin-bottom: 18px;
}

/*
 * Wider title.
 * Prevents long titles from becoming too narrow.
 */
.art-hero__title {
  max-width: 1050px;
  margin: 0 auto 24px;
  text-align: center;
}

.art-hero__intro {
  max-width: 72ch;
  margin: 0 auto 22px;
}

.art-hero__meta {
  justify-content: center;
  color: var(--text-secondary);
  margin-bottom: 60px;
}


/*
 * Hero image
 *
 * No forced aspect ratio.
 * Image keeps its natural proportions.
 * Full image is visible.
 */
.art-hero__media {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 2px;
  text-align: center;
}

.art-hero__media img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}


/* ==========================================================================
   HERO — MOBILE
   ========================================================================== */

@media (max-width: 700px) {

  .art-hero {
    padding: 130px 0 0;
  }

  .art-hero__inner {
    width: min(100% - 32px, 1100px);
  }

  .art-hero__back {
    margin-bottom: 28px;
  }

  .art-hero__title {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .art-hero__intro {
    max-width: 100%;
  }

  .art-hero__meta {
    margin-bottom: 40px;
  }

  .art-hero__media {
    width: 100%;
  }

  .art-hero__media img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}


/* ==========================================================================
   ARTICLE LAYOUT
   Share rail + article body
   ========================================================================== */

.art-layout {
  padding: 90px 0 120px;
}

.art-layout__grid {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 56px;

  /*
   * Wider than before.
   * Approximately the same overall width as the hero image.
   */
  width: min(100% - 40px, 1100px);
  margin: 0 auto;
}


/* ==========================================================================
   SHARE BUTTONS
   ========================================================================== */

.art-share__label {
  display: block;
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.art-share__buttons {
  display: flex;
  gap: 8px;
}

.art-share--rail {
  position: sticky;
  top: 120px;
  align-self: start;

  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 16px;
}

.art-share--rail .art-share__buttons {
  flex-direction: column;
}

.art-share--rail .art-share__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 0;
  margin-top: 4px;
  white-space: nowrap;
}

.art-share__btn {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);

  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition:
    border-color 0.25s var(--ease),
    color 0.25s var(--ease);

  flex: 0 0 auto;
}

.art-share__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.art-share--inline {
  display: none;
  align-items: center;
  gap: 16px;

  padding: 32px 0;
  margin: 48px 0;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.art-share--inline .art-share__label {
  margin-bottom: 0;
}


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

.art-body {
  /*
   * Wider reading column.
   */
  max-width: 980px;
}

.art-body p,
.art-intro p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-secondary);
  margin: 0 0 24px;
}

.art-intro {
  margin-bottom: 72px;
}

.art-inline-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.5;
  color: var(--text);

  margin: 38px 0 !important;
  padding-left: 24px;

  border-left: 2px solid var(--accent);
}


/* ==========================================================================
   MAIN ARTICLE SECTIONS
   ========================================================================== */

.art-section {
  padding: 72px 0;
  border-top: 1px solid var(--border);
}

.art-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.art-section__num {
  color: var(--accent);
}

.art-section__eyebrow {
  color: var(--text-secondary);
}

.art-section h2 {
  margin-bottom: 30px;
}


/*
 * IMPORTANT:
 *
 * Images are now ABOVE the text.
 *
 * No two-column layout.
 * No aspect-ratio.
 * No cropping.
 */
.art-section__grid,
.art-section__grid--reverse {
  display: flex;
  flex-direction: column;
  gap: 42px;

  width: 100%;
  direction: ltr;
}


/* ==========================================================================
   ARTICLE SECTION IMAGES
   ========================================================================== */

.art-section__media {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;

  overflow: hidden;
  text-align: center;
}

.art-section__media img {
  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;

  object-fit: contain;

  margin: 0 auto;
}


/* ==========================================================================
   ARTICLE SECTION TEXT
   ========================================================================== */

.art-section__content {
  width: 100%;
  max-width: 900px;
}

.art-section__content p {
  margin-bottom: 24px;
}


/* ==========================================================================
   SCENARIOS
   ========================================================================== */

.art-scenarios {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 1px;

  background: var(--border);

  margin-top: 42px;
}

.art-scenario {
  background: var(--bg);
  padding: 28px 26px;
}

.art-scenario__label {
  display: block;
  color: var(--accent);
  margin-bottom: 12px;
}

.art-scenario h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;

  color: var(--text);

  margin: 0 0 12px;
}

.art-scenario p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}


/* ==========================================================================
   CHECKLIST BLOCKS
   ========================================================================== */

.art-checklist {
  padding: 46px;

  margin: 56px 0;

  background: var(--bg-secondary);

  border: 1px solid var(--border);
}

.art-checklist>.mono-label {
  color: var(--accent);
}

.art-checklist h3 {
  margin: 10px 0 30px;
}


/*
 * Checklist with image.
 *
 * The image and text are deliberately separated.
 */
.art-checklist__grid {
  display: flex;
  flex-direction: column;

  /*
   * THIS IS THE IMPORTANT GAP.
   *
   * It creates clear separation between
   * the image and the text.
   */
  gap: 52px;

  width: 100%;
}


/* Checklist text */

.art-checklist__content {
  width: 100%;
  max-width: 900px;
}

.art-checklist__content>p {
  font-size: 15px;
  line-height: 1.85;

  color: var(--text-secondary);

  margin: 0 0 26px;
}


/* Checklist image */

.art-checklist__media {
  width: 100%;
  max-width: 100%;

  margin: 0 auto;

  text-align: center;
  overflow: hidden;
}

.art-checklist__media img {
  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;

  object-fit: contain;

  margin: 0 auto;
}


/* Checklist without image */

.art-checklist>p {
  font-size: 15px;
  line-height: 1.85;

  color: var(--text-secondary);

  margin: 0 0 26px;
}


/* Checklist list */

.art-checklist__list {
  list-style: none;

  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;

  gap: 14px;
}

.art-checklist__list li {
  position: relative;

  padding-left: 30px;

  font-size: 15px;
  line-height: 1.7;

  color: var(--text);
}

.art-checklist__list li::before {
  content: '';

  position: absolute;

  left: 0;
  top: 10px;

  width: 12px;
  height: 1px;

  background: var(--accent);
}


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

.art-pullquote {
  margin: 72px 0;

  padding: 48px 20px;

  font-family: var(--font-display);
  font-weight: 300;

  font-size: clamp(24px, 3vw, 34px);

  line-height: 1.4;

  letter-spacing: -0.01em;

  color: var(--text);

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

  text-align: center;
}


/* ==========================================================================
   FINAL THOUGHTS
   ========================================================================== */

.art-final-thoughts {
  margin-top: 64px;
  padding: 56px 0;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.art-final-thoughts>.mono-label {
  color: var(--accent);

  display: block;

  margin-bottom: 12px;
}

.art-final-thoughts p {
  max-width: 900px;

  font-size: 16px;
  line-height: 1.9;

  color: var(--text-secondary);

  margin: 0 0 24px;
}

.art-final-thoughts p:last-child {
  margin-bottom: 0;
}

.art-final-thoughts__grid {
  display: flex;
  flex-direction: column;

  /* Space between the text and the image */
  gap: 52px;

  width: 100%;
}

.art-final-thoughts__text {
  width: 100%;
  max-width: 900px;
}

.art-final-thoughts__media {
  width: 100%;
  max-width: 100%;

  margin: 0 auto;

  overflow: hidden;
  text-align: center;
}

.art-final-thoughts__media img {
  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;

  object-fit: contain;

  margin: 0 auto;
}


/* ==========================================================================
   FAQ
   ========================================================================== */

.art-faq {
  padding: 64px 0 0;

  border-top: 1px solid var(--border);
}

.art-faq>.mono-label {
  color: var(--accent);

  display: block;

  margin-bottom: 26px;
}

.art-faq__list {
  display: flex;
  flex-direction: column;

  gap: 1px;

  background: var(--border);
}

.art-faq__item {
  background: var(--bg);
}

.art-faq__question {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 22px 4px;

  background: none;
  border: none;

  color: var(--text);

  font-family: var(--font-display);
  font-size: 15px;

  text-align: left;

  cursor: pointer;
}

.art-faq__toggle {
  flex-shrink: 0;

  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border);
  border-radius: 50%;

  color: var(--accent);

  font-size: 14px;

  transition: transform 0.3s var(--ease);
}

.art-faq__item.is-open .art-faq__toggle {
  transform: rotate(45deg);
}

.art-faq__answer {
  max-height: 0;

  overflow: hidden;

  transition: max-height 0.35s ease;
}

.art-faq__answer p {
  padding: 0 4px 22px;

  font-size: 14px;
  line-height: 1.8;

  color: var(--text-secondary);

  margin: 0;
}


/* ==========================================================================
   ARTICLE CTA
   ========================================================================== */

.art-cta {
  margin-top: 64px;

  padding: 48px;

  background: var(--bg-secondary);

  border: 1px solid var(--border);

  text-align: center;
}

.art-cta h3 {
  margin: 0 0 16px;
}

.art-cta p {
  max-width: 64ch;

  margin: 0 auto 28px;
}


/* ==========================================================================
   RELATED ARTICLES
   ========================================================================== */

.art-related-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

  margin-top: 36px;
}

.art-related-card {
  display: block;
}

.art-related-card__media {
  /*
   * No forced ratio.
   */
  width: 100%;

  overflow: hidden;

  margin-bottom: 16px;

  text-align: center;
}

.art-related-card__media img {
  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;

  object-fit: contain;

  margin: 0 auto;

  transition: transform 0.7s var(--ease-soft);
}

.art-related-card:hover .art-related-card__media img {
  transform: scale(1.03);
}

.art-related-card>.mono-label {
  color: var(--accent);

  margin-bottom: 8px;
}

.art-related-card h4 {
  font-size: 16px;

  font-weight: 500;

  line-height: 1.4;

  margin: 0 0 10px;

  transition: color 0.3s var(--ease);
}

.art-related-card:hover h4 {
  color: var(--accent);
}

.art-related-card__date {
  color: var(--text-secondary);
}


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

@media (max-width: 900px) {

  .art-layout {
    padding-top: 70px;
  }

  .art-layout__grid {
    grid-template-columns: 1fr;

    width: min(100% - 40px, 900px);

    gap: 0;
  }

  .art-body {
    max-width: 100%;
  }

  .art-share--rail {
    display: none;
  }

  .art-share--inline {
    display: flex;
  }

  .art-related-grid {
    grid-template-columns: 1fr 1fr;
  }
}


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

@media (max-width: 700px) {

  .art-layout {
    padding: 56px 0 80px;
  }

  .art-layout__grid {
    width: min(100% - 32px, 900px);
  }


  /* Article body */

  .art-body p,
  .art-intro p {
    font-size: 15.5px;
    line-height: 1.85;
  }

  .art-intro {
    margin-bottom: 56px;
  }


  /* Sections */

  .art-section {
    padding: 54px 0;
  }

  .art-section__grid,
  .art-section__grid--reverse {
    gap: 34px;
  }


  /* Section images */

  .art-section__media {
    width: 100%;
    max-width: 100%;
  }

  .art-section__media img {
    width: 100%;
    height: auto;

    object-fit: contain;
  }


  /* Scenarios */

  .art-scenarios {
    grid-template-columns: 1fr;

    margin-top: 34px;
  }


  /* Checklist */

  .art-checklist {
    padding: 30px 24px;

    margin: 44px 0;
  }

  .art-checklist h3 {
    margin-bottom: 26px;
  }

  /*
   * Still a generous separation on mobile.
   */
  .art-checklist__grid {
    gap: 40px;
  }

  .art-checklist__media {
    width: 100%;
  }

  .art-checklist__media img {
    width: 100%;
    height: auto;

    object-fit: contain;
  }


  /* Pull quote */

  .art-pullquote {
    margin: 56px 0;

    padding: 38px 10px;

    font-size: 25px;
  }


  /* Final thoughts */

  .art-final-thoughts {
    margin-top: 50px;

    padding: 46px 0;
  }

  .art-final-thoughts__grid {
    gap: 40px;
  }

  .art-final-thoughts__media {
    width: 100%;
  }

  .art-final-thoughts__media img {
    width: 100%;
    height: auto;
  }


  /* CTA */

  .art-cta {
    padding: 32px 24px;
  }
}


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

@media (max-width: 480px) {

  .art-hero__inner {
    width: calc(100% - 28px);
  }

  .art-layout__grid {
    width: calc(100% - 28px);
  }


  .art-share--inline {
    flex-direction: column;

    align-items: flex-start;

    gap: 14px;
  }


  .art-checklist {
    padding: 26px 20px;
  }

  .art-checklist__grid {
    /*
     * Enough visual separation even on narrow screens.
     */
    gap: 36px;
  }


  .art-checklist__list {
    gap: 12px;
  }


  .art-checklist__list li {
    font-size: 14px;
  }


  .art-final-thoughts p {
    font-size: 15px;
  }


  .art-related-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   IMPORTANT IMAGE SAFETY OVERRIDES
   ========================================================================== */

/*
 * These rules intentionally override old ratio/cropping rules if another
 * stylesheet or an earlier Article.css version is still loaded.
 *
 * All article images:
 * - keep their natural proportions
 * - remain centered
 * - are never cropped
 * - have no forced height
 */

.art-hero__media img,
.art-section__media img,
.art-checklist__media img,
.art-related-card__media img {
  height: auto !important;
  max-height: none !important;

  object-fit: contain !important;

  display: block;
  margin-left: auto;
  margin-right: auto;
}


/*
 * Remove any forced aspect ratios from the article image containers.
 */

.art-hero__media,
.art-section__media,
.art-checklist__media,
.art-related-card__media {
  aspect-ratio: auto !important;
}