/* ========================================
   Section Accordion - bold blog/portfolio
   Native <details>/<summary> accordion with
   monotone palette, full-width border, centered
   content and sequential per-word typing reveal.
   ======================================== */

.accordions .container {
  align-items: stretch;
  max-width: none;
  padding: 0;
}

.section__accordion {
  --accent: 0, 122, 255;
  width: 100%;
  border-top: 1px solid var(--theme-border-color-strong);
  border-bottom: 1px solid var(--theme-border-color-strong);
  /* Collapse adjacent accordion borders */
  margin-bottom: -1px;
}

/* Summary (clickable header) - card-like preview, inner content capped at 1440 */
.section__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  user-select: none;
}

.section__summary::-webkit-details-marker { display: none; }
.section__summary::marker { display: none; }

/* Card-style content inside summary (icon + title + description) */
.section__summary-card {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
  min-width: 0;
}

.section__summary-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  color: var(--theme-text-primary);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.section__summary-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

.section__summary-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Title inside summary - bold, left-aligned */
.section__summary .section__title {
  text-align: left;
  margin: 0;
  max-width: none;
  font-size: var(--text-heading);
  font-weight: var(--font-black);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--theme-text-primary);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.section__summary .section__title::after {
  display: none;
}

.section__summary-description {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--theme-text-secondary);
}

/* Hover affordance */
.section__summary:hover .section__summary-icon {
  transform: translateX(4px);
}

.section__summary:hover .section__title {
  transform: translateX(4px);
}

.section__summary:focus-visible {
  outline: 2px solid var(--theme-text-primary);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

/* Chevron-down indicator */
.section__summary-indicator {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  position: relative;
  color: var(--theme-text-primary);
}

.section__summary-indicator::before {
  content: '';
  position: absolute;
  top: 38%;
  left: 50%;
  width: 2.25rem;
  height: 2.25rem;
  border-right: 4px solid currentColor;
  border-bottom: 4px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.section__accordion[open] .section__summary-indicator::before {
  transform: translate(-50%, -50%) rotate(-135deg);
}

/* Mobile: stack indicator below the summary card */
@media (max-width: 768px) {
  .section__summary {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
  }

  .section__summary-indicator {
    align-self: center;
    width: 3rem;
    height: 3rem;
  }

  .section__summary-indicator::before {
    width: 1.25rem;
    height: 1.25rem;
    border-right-width: 3px;
    border-bottom-width: 3px;
  }
}

/* Content - width-constrained wrapper, left-aligned text inside */
.section__accordion .section__content {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-10);
  min-height: 200px;
  text-align: left;
}

/* Article list - vertical bold blog flow */
.articles {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.article {
  position: relative;
  padding-left: var(--space-6);
  border-left: 2px solid var(--theme-border-color);
  transition: border-color 0.25s ease;
}

.article:hover {
  border-left-color: var(--theme-border-color-strong);
}

.article__title {
  font-size: var(--text-heading);
  font-weight: var(--font-black);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4) 0;
  color: var(--theme-text-primary);
}

.article__text {
  font-size: var(--text-body);
  line-height: 1.7;
  margin: 0;
  color: var(--theme-text-secondary);
}

.article__text strong,
.article__title strong {
  font-weight: var(--font-bold);
}

/* CTA in accordion - left-aligned */
.section__accordion .section__content .section__cta {
  margin-top: var(--space-10);
  justify-content: flex-start;
  text-align: left;
}

/* ========================================
   Per-word typing reveal on accordion open
   ======================================== */

/* Each word starts at 0.3 opacity (faded but readable) */
.section__accordion .word {
  display: inline-block;
  opacity: 0.3;
  will-change: opacity;
}

/* Sequential typing reveal - 30ms per word stagger */
.section__accordion .word--in {
  animation-name: wordReveal;
  animation-duration: 0.18s;
  animation-timing-function: ease-out;
  animation-delay: calc(var(--word-i, 0) * 30ms);
  animation-fill-mode: forwards;
}

@keyframes wordReveal {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .section__accordion .word,
  .section__accordion .word--in {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}