/* ── Base ─────────────────────────────────────────────── */
.acx-section {
  padding: 4rem 0;
  margin: 0 auto;
}

.site-main > .acx-section {
  margin-bottom: 0;
}

.acx-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.acx-section__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

/* ── Modificadores de fondo ────────────────────────────── */
.acx-section--subtle {
  background: var(--color-bg-light);
}

.acx-section--brand {
  background: var(--color-bg-brand);
  color: var(--color-text-inverse);
}

.acx-section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}


/* ── Artículos de loop ────────────────────────────── */
.acx-article h3 {
    font-size: var(--font-size-md);
    line-height: var(--line-height-snug);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-dark);
}

.acx-article p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.acx-article a {
  color: inherit;
  text-decoration: none;
}

.acx-article a:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.acx-metas a,
.acx-metas a:visited {
  text-decoration: none;
}

/* ── Category tag ────────────────────────────── */
.acx-cat {
    align-self: flex-start;
    display: inline-block;
    background: var(--color-bg-subtle);
    color: var(--color-brand-mid);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    padding: .22rem .75rem;
    border-radius: 999px;
    letter-spacing: .02em;
}

/* ── Metas ────────────────────────────── */
.acx-metas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-mid);
    margin-bottom: .5rem;
}

.acx-metas-hori {
    font-size: var(--font-size-xs);
    color: var(--color-gray-mid);
    margin-bottom: .2rem;
}

.acx-cat-hori {
    align-self: flex-start;
    display: inline-block;
    color: var(--color-brand-mid);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.post-meta-separator {
  color: var(--color-gray-mid);
  user-select: none;
}


/* ── Dark mode ────────────────────────────── */
html[data-theme="dark"] .acx-section--subtle {
  background: var(--color-bg-subtle);
}

html[data-theme="dark"] .acx-section--brand {
  background: var(--color-bg-brand);
}

html[data-theme="dark"] .acx-cat {
  background: rgba(160, 177, 238, 0.15);
  color: var(--color-brand);
}

html[data-theme="dark"] .acx-article h3 {
  color: var(--color-text);
}


/* ── High contrast ────────────────────────────── */
html[data-contrast="high"] .acx-section--subtle {
  background: #000000;
  border: 1px solid #ffffff;
}

html[data-contrast="high"] .acx-section--brand {
  background: #000000;
  border: 2px solid #ffffff;
}

html[data-contrast="high"] .acx-cat {
  background: #000000;
  color: #ffd400;
  border: 1px solid #ffd400;
}

html[data-contrast="high"] .acx-article h3 {
  color: #ffffff !important;
}