@layer modules {
  /* ========================================
     Guides Hub Page (Documentation Index)
     ======================================== */

  /* Hero Section - Cream background */
  .guides-hub__hero {
    padding-top: calc(var(--oat-space-5xl) + 80px);
    padding-bottom: var(--oat-space-4xl);
    background-color: var(--oat-bg-cream);
    text-align: center;
  }

  .guides-hub__hero h1 {
    max-width: 800px;
    margin: 0 auto var(--oat-space-lg);
  }

  .guides-hub__hero > p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.7;
  }

  /* Categories Container - White background */
  .guides-hub__categories {
    background-color: white;
    padding: var(--oat-space-4xl) 0;
  }

  /* Individual Category Section */
  .guides-hub__category {
    max-width: var(--oat-container-max);
    margin: 0 auto var(--oat-space-4xl);
    padding: 0 var(--oat-space-lg);
  }

  .guides-hub__category:last-child {
    margin-bottom: 0;
  }

  .guides-hub__category-header {
    margin-bottom: var(--oat-space-xl);
    max-width: 65ch;
    margin-inline: auto;
  }

  .guides-hub__category-title {
    font-family: var(--oat-font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--oat-text-dark);
    margin: 0;
  }

  /* Guide Card Grid */
  .guides-hub__grid {
    display: flex;
    flex-direction: column;
    gap: var(--oat-space-md);
    max-width: 65ch;
    margin-inline: auto;
  }

  /* Guide Card - List style for documentation */
  .guide-card {
    background-color: var(--oat-bg-light);
    border-radius: var(--oat-border-radius);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all var(--oat-transition-base);
  }

  .guide-card:hover {
    border-color: var(--oat-accent-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  }

  .guide-card__link {
    display: flex;
    align-items: center;
    gap: var(--oat-space-lg);
    padding: var(--oat-space-lg) var(--oat-space-xl);
    text-decoration: none;
    color: inherit;
  }

  .guide-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--oat-bg-cream);
    border-radius: var(--oat-border-radius);
    color: var(--oat-accent-dark);
  }

  .guide-card__icon .icon {
    width: 20px;
    height: 20px;
  }

  .guide-card__content {
    flex: 1;
    min-width: 0;
  }

  .guide-card__title {
    font-family: var(--oat-font-display);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--oat-text-dark);
    margin: 0 0 var(--oat-space-xs);
  }

  .guide-card__description {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--oat-text-muted);
    margin: 0;
  }

  .guide-card__arrow {
    flex-shrink: 0;
    color: var(--oat-text-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: all var(--oat-transition-fast);
  }

  .guide-card:hover .guide-card__arrow {
    opacity: 1;
    transform: translateX(0);
  }

  .guide-card__arrow .icon {
    width: 20px;
    height: 20px;
  }

  /* ========================================
     Guides Show Page (Individual Guide)
     ======================================== */

  /* Header Section - Cream background */
  .guides-show__header {
    padding-top: calc(var(--oat-space-5xl) + 80px);
    padding-bottom: var(--oat-space-3xl);
    background-color: var(--oat-bg-cream);
    text-align: center;
  }

  .guides-show__breadcrumb {
    font-size: 0.875rem;
    color: var(--oat-text-muted);
    margin-bottom: var(--oat-space-lg);
  }

  .guides-show__breadcrumb a {
    color: var(--oat-accent-dark);
    text-decoration: none;
  }

  .guides-show__breadcrumb a:hover {
    text-decoration: underline;
  }

  .guides-show__header h1 {
    margin: 0;
  }

  /* Content Section - White background */
  .guides-show__content {
    background-color: white;
    padding: var(--oat-space-4xl) 0;
  }

  .guides-show__inner {
    max-width: var(--oat-container-max);
    margin: 0 auto;
    padding: 0 var(--oat-space-lg);
  }

  /* Body Content - Prose styling */
  .guides-show__body {
    max-width: 65ch;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--oat-text-muted);
  }

  .guides-show__body > *:first-child {
    margin-top: 0;
  }

  .guides-show__body > *:last-child {
    margin-bottom: 0;
  }

  .guides-show__body h2 {
    font-family: var(--oat-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--oat-text-dark);
    margin: var(--oat-space-3xl) 0 var(--oat-space-md);
  }

  .guides-show__body h3 {
    font-family: var(--oat-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--oat-text-dark);
    margin: var(--oat-space-2xl) 0 var(--oat-space-md);
  }

  .guides-show__body h4 {
    font-family: var(--oat-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--oat-text-dark);
    margin: var(--oat-space-xl) 0 var(--oat-space-sm);
  }

  .guides-show__body p {
    margin: 0 0 var(--oat-space-lg);
  }

  .guides-show__body ul,
  .guides-show__body ol {
    margin: 0 0 var(--oat-space-lg);
    padding-left: var(--oat-space-xl);
  }

  .guides-show__body li {
    margin-bottom: var(--oat-space-sm);
    line-height: 1.7;
  }

  .guides-show__body li::marker {
    color: var(--oat-accent-dark);
  }

  .guides-show__body strong {
    color: var(--oat-text-dark);
    font-weight: 600;
  }

  .guides-show__body a {
    color: var(--oat-accent-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--oat-transition-fast);
  }

  .guides-show__body a:hover {
    color: var(--oat-text-dark);
  }

  .guides-show__body code {
    font-family: ui-monospace, monospace;
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    background-color: var(--oat-bg-cream);
    border-radius: 4px;
    color: var(--oat-text-dark);
  }

  .guides-show__body pre {
    margin: var(--oat-space-xl) 0;
    padding: var(--oat-space-lg);
    background-color: var(--oat-900, #1a1a1a);
    color: var(--oat-100, #f5f5f5);
    border-radius: var(--oat-border-radius);
    overflow-x: auto;
  }

  .guides-show__body pre code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .guides-show__body blockquote {
    margin: var(--oat-space-xl) 0;
    padding: var(--oat-space-lg) var(--oat-space-xl);
    border-left: 4px solid var(--oat-accent-light);
    background-color: var(--oat-bg-cream);
    border-radius: 0 var(--oat-border-radius) var(--oat-border-radius) 0;
    font-style: italic;
    color: var(--oat-text-dark);
  }

  .guides-show__body blockquote p:last-child {
    margin-bottom: 0;
  }

  /* Tables */
  .guides-show__body table {
    width: 100%;
    margin: var(--oat-space-xl) 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
  }

  .guides-show__body th,
  .guides-show__body td {
    padding: var(--oat-space-sm) var(--oat-space-md);
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .guides-show__body th {
    font-weight: 600;
    color: var(--oat-text-dark);
    background-color: var(--oat-bg-cream);
    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
  }

  .guides-show__body tr:last-child td {
    border-bottom: none;
  }

  .guides-show__body tbody tr:hover {
    background-color: var(--oat-bg-light);
  }

  /* Horizontal rules */
  .guides-show__body hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: var(--oat-space-3xl) 0;
  }

  /* Navigation */
  .guides-show__nav {
    display: flex;
    justify-content: space-between;
    gap: var(--oat-space-lg);
    padding-top: var(--oat-space-3xl);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    max-width: 65ch;
    margin: var(--oat-space-4xl) auto 0;
  }

  .guides-show__nav-btn {
    display: flex;
    align-items: center;
    gap: var(--oat-space-md);
    padding: var(--oat-space-lg);
    text-decoration: none;
    background-color: var(--oat-bg-light);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--oat-border-radius);
    transition: all var(--oat-transition-fast);
    flex: 1;
    max-width: 300px;
  }

  .guides-show__nav-btn:hover {
    border-color: var(--oat-accent-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  }

  .guides-show__nav-btn--prev {
    text-align: left;
  }

  .guides-show__nav-btn--next {
    text-align: right;
    margin-left: auto;
    flex-direction: row-reverse;
  }

  .guides-show__nav-btn--disabled {
    visibility: hidden;
  }

  .guides-show__nav-btn .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--oat-text-muted);
  }

  .guides-show__nav-text {
    display: flex;
    flex-direction: column;
    gap: var(--oat-space-xs);
    min-width: 0;
  }

  .guides-show__nav-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--oat-text-muted);
  }

  .guides-show__nav-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--oat-text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ========================================
     Responsive Adjustments
     ======================================== */
  @media (max-width: 640px) {
    .guides-hub__hero {
      padding-top: calc(var(--oat-space-4xl) + 60px);
      padding-bottom: var(--oat-space-2xl);
    }

    .guides-hub__categories {
      padding: var(--oat-space-2xl) 0;
    }

    .guides-hub__category {
      margin-bottom: var(--oat-space-2xl);
    }

    .guide-card__description {
      display: none;
    }

    .guides-show__header {
      padding-top: calc(var(--oat-space-4xl) + 60px);
      padding-bottom: var(--oat-space-2xl);
    }

    .guides-show__content {
      padding: var(--oat-space-2xl) 0;
    }

    .guides-show__nav {
      flex-direction: column;
    }

    .guides-show__nav-btn {
      max-width: none;
    }

    .guides-show__nav-btn--next {
      flex-direction: row;
      text-align: left;
    }
  }
}