@layer content;

/* ==========================================
   PAGE CONTENT LAYOUT
========================================== */

@layer content {
  .page-content {
    max-width: 760px;

    margin-inline: auto;
  }

  .page-content--wide {
    max-width: 920px;

    margin-inline: auto;
  }
}

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

@layer content {
  .hero--content {
    padding-top: var(--space-4);

    padding-bottom: var(--space-3);
  }

  .hero--content .hero__content {
    max-width: 44rem;
  }

  .hero--content .hero__title {
    max-width: 100%;
  }

  .hero--content .hero__description {
    max-width: 58ch;
  }
}

/* ==========================================
   OVERVIEW
========================================== */

@layer content {
  .overview {
    padding-top: var(--space-4);
  }

  .overview__grid {
    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: var(--space-6);

    align-items: start;
  }

  .overview__content {
    max-width: 760px;
  }

  .overview__meta {
    display: flex;

    flex-direction: column;

    gap: var(--space-3);

    padding-left: var(--space-4);

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

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

@layer content {
  .meta-group {
    display: flex;

    flex-direction: column;

    gap: 0.35rem;
  }

  .meta-label {
    color: var(--color-text-muted);

    font-family: var(--font-mono);

    font-size: var(--fs-caption);

    font-weight: var(--fw-medium);

    letter-spacing: var(--ls-label);

    text-transform: uppercase;
  }

  .meta-value {
    color: var(--color-text);

    font-size: var(--fs-body);

    line-height: var(--lh-body);
  }
}

/* ==========================================
   CONTENT SECTIONS
========================================== */

@layer content {
  .content-section {
    padding-top: var(--space-5);
  }

  .content-section:first-child {
    padding-top: 0;
  }

  .content-section:last-child {
    padding-bottom: 0;
  }
}

/* ==========================================
   SECTION HEADER
========================================== */

@layer content {
  .content-section__header {
    margin-bottom: var(--space-1);

    max-width: 760px;
  }

  .content-section__header h2 {
    position: relative;

    display: inline-block;

    margin-bottom: var(--space-3);

    font-size: var(--fs-h2);
  }

  .content-section__header h2::after {
    content: '';

    position: absolute;

    left: 0;

    bottom: -0.6rem;

    width: 72px;

    height: 4px;

    border-radius: 999px;

    background: var(--color-accent);
  }
}

/* ==========================================
   LONG-FORM CONTENT
========================================== */

@layer content {
  .content {
    max-width: 760px;
  }

  .content > * + * {
    margin-top: var(--space-4);
  }

  .content p {
    color: var(--color-text-soft);

    font-size: var(--fs-body-lg);

    line-height: var(--lh-body);
  }

  .content strong {
    color: var(--color-text);

    font-weight: var(--fw-semibold);
  }
}

/* ==========================================
   HEADINGS
========================================== */

@layer content {
  .content h2 {
    position: relative;

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

    margin-bottom: var(--space-4);

    font-size: var(--fs-h2);

    line-height: var(--lh-heading);
  }

  .content h2::after {
    content: '';

    position: absolute;

    left: 0;

    bottom: -0.6rem;

    width: 72px;

    height: 4px;

    border-radius: 999px;

    background: var(--color-accent);
  }

  .content h3 {
    margin-top: var(--space-5);

    margin-bottom: var(--space-3);

    font-size: var(--fs-h3);

    line-height: var(--lh-subheading);
  }
}

/* ==========================================
   LISTS
========================================== */

@layer content {
  .content ul,
  .content ol {
    margin-block: var(--space-4);

    padding-left: 1.5rem;
  }

  .content li {
    color: var(--color-text-soft);

    font-size: var(--fs-body-lg);

    line-height: var(--lh-body);
  }

  .content li + li {
    margin-top: var(--space-2);
  }
}

/* ==========================================
   BLOCKQUOTE
========================================== */

@layer content {
  .content blockquote {
    margin-block: var(--space-5);

    padding-left: var(--space-4);

    border-left: 4px solid var(--color-accent);

    color: var(--color-text);

    font-size: var(--fs-heading-sm);

    font-style: italic;

    line-height: var(--lh-body);
  }
}

/* ==========================================
   IMAGES & FIGURES
========================================== */

@layer content {
  figure {
    margin-block: var(--space-6);
  }

  figure img {
    width: 100%;

    border-radius: var(--radius-lg);

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

  figcaption {
    margin-top: var(--space-2);

    color: var(--color-text-muted);

    font-size: var(--fs-caption);

    text-align: center;
  }
}

/* ==========================================
   TABLES
========================================== */

@layer content {
  .content table {
    width: 100%;

    margin-block: var(--space-5);

    border-collapse: collapse;
  }

  .content th,
  .content td {
    padding: var(--space-2);

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

    text-align: left;
  }

  .content th {
    color: var(--color-text);

    font-weight: var(--fw-semibold);
  }

  .content td {
    color: var(--color-text-soft);
  }
}

/* ==========================================
   CODE
========================================== */

@layer content {
  .content pre {
    overflow-x: auto;

    margin-block: var(--space-5);

    padding: var(--space-4);

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

    border-radius: var(--radius-lg);

    background: var(--color-surface);
  }

  .content code {
    font-family: var(--font-mono);

    font-size: 0.95em;
  }
}

/* ==========================================
   DIVIDER
========================================== */

@layer content {
  .content hr {
    margin-block: var(--space-6);

    border: 0;

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

/* ==========================================
   HIGHLIGHTS
========================================== */

@layer content {
  .highlights {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-4);

    margin-block: var(--space-6);
  }

  .highlight {
    padding: var(--space-4);

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

    border-radius: var(--radius-lg);

    background: var(--color-surface);
  }

  .highlight__title {
    margin-bottom: var(--space-2);

    font-size: var(--fs-h3);

    font-weight: var(--fw-semibold);
  }

  .highlight__text {
    color: var(--color-text-soft);

    font-size: var(--fs-body);

    line-height: var(--lh-body);
  }
}

/* ==========================================
   CALLOUT
========================================== */

@layer content {
  .callout {
    margin-block: var(--space-6);

    padding: var(--space-4);

    border-left: 4px solid var(--color-accent);

    border-radius: var(--radius-md);

    background: var(--color-surface);
  }

  .callout__title {
    margin-bottom: var(--space-2);

    font-size: var(--fs-heading-sm);

    font-weight: var(--fw-semibold);
  }

  .callout p:last-child {
    margin-bottom: 0;
  }
}

/* ==========================================
   STATS
========================================== */

@layer content {
  .stats {
    display: grid;

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

    gap: var(--space-4);

    margin-block: var(--space-6);
  }

  .stat {
    text-align: center;

    padding: var(--space-4);

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

    border-radius: var(--radius-lg);

    background: var(--color-surface);
  }

  .stat__value {
    margin-bottom: var(--space-2);

    color: var(--color-accent);

    font-size: var(--fs-display-md);

    font-weight: var(--fw-bold);

    line-height: 1;
  }

  .stat__label {
    color: var(--color-text-muted);

    font-size: var(--fs-caption);

    text-transform: uppercase;

    letter-spacing: var(--ls-label);
  }
}

/* ==========================================
   CONTENT GRID
========================================== */

@layer content {
  .content-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-5);

    margin-block: var(--space-6);
  }
}

/* ==========================================
   GALLERY
========================================== */

@layer content {
  .gallery {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-4);

    margin-block: var(--space-6);
  }

  .gallery img {
    width: 100%;

    border-radius: var(--radius-lg);

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

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

@layer content {
  .info-card {
    padding: var(--space-4);

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

    border-radius: var(--radius-lg);

    background: var(--color-surface);
  }

  .info-card h3 {
    margin-bottom: var(--space-2);
  }
}

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

@layer content {
  .quote {
    margin-block: var(--space-7);

    text-align: center;
  }

  .quote p {
    max-width: 40rem;

    margin-inline: auto;

    font-size: var(--fs-h2);

    line-height: var(--lh-heading);

    font-style: italic;
  }

  .quote footer {
    margin-top: var(--space-3);

    color: var(--color-text-muted);

    font-size: var(--fs-caption);

    letter-spacing: var(--ls-label);

    text-transform: uppercase;
  }
}

/* ==========================================
   RELATED CONTENT
========================================== */

@layer content {
  .related-content {
    padding-top: var(--space-7);

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

  .related-content__header {
    margin-bottom: var(--space-5);
  }
}

/* ==========================================
   PAGE NAVIGATION
========================================== */

@layer content {
  .page-nav {
    display: flex;

    justify-content: space-between;

    gap: var(--space-4);

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

    padding-top: var(--space-5);

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

  .page-nav__item {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: var(--space-1);

    text-decoration: none;
  }

  .page-nav__item:last-child {
    text-align: right;
  }

  .page-nav__label {
    color: var(--color-text-muted);

    font-family: var(--font-mono);

    font-size: var(--fs-caption);

    letter-spacing: var(--ls-label);

    text-transform: uppercase;
  }

  .page-nav__title {
    color: var(--color-text);

    font-size: var(--fs-heading-sm);

    font-weight: var(--fw-semibold);

    transition: color var(--duration-fast);
  }

  .page-nav__item:hover .page-nav__title {
    color: var(--color-accent);
  }
}

/* ==========================================
   AUTHOR
========================================== */

@layer content {
  .author {
    display: flex;

    align-items: center;

    gap: var(--space-4);

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

    padding-top: var(--space-5);

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

  .author__image {
    width: 80px;

    height: 80px;

    border-radius: 50%;

    overflow: hidden;

    flex-shrink: 0;
  }

  .author__image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
  }

  .author__content h3 {
    margin-bottom: var(--space-1);
  }

  .author__content p {
    color: var(--color-text-soft);
  }
}

/* ==========================================
   CONTENT CTA
========================================== */

@layer content {
  .content-cta {
    margin-top: var(--space-8);

    padding: var(--space-5);

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

    border-radius: var(--radius-lg);

    background: var(--color-surface);

    text-align: center;
  }

  .content-cta h2 {
    margin-bottom: var(--space-3);
  }

  .content-cta p {
    max-width: 40rem;

    margin: 0 auto var(--space-4);
  }
}