/* =========================
   ARTICLE / SINGLE
========================= */

.c-single {
    margin-block: var(--space-40);
}

.c-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
}

.c-article-layout__main {
    min-width: 0;
}

.c-article-layout__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}

.c-article-layout--lead {
    align-items: start;
}

.c-article-layout--body {
    align-items: start;
}

.c-article-layout--no-sidebar {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1023px) {
    .c-article-layout__sidebar {
        display: none;
    }
}

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

.c-article-body {
    width: 100%;
    font-family: var(--article-body-font);
    font-size: var(--article-body-size);
    font-weight: var(--article-body-weight);
    font-style: var(--article-body-style);
    line-height: var(--article-body-line-height);
    letter-spacing: var(--article-body-letter-spacing);
    color: var(--article-body-color);
}

.c-article-body>* {
    margin-top: 0;
    margin-bottom: 0;
}

.c-article-body>*+* {
    margin-top: var(--article-body-paragraph-gap);
}

.c-article-body a {
    color: var(--article-link-color, var(--color-accent));
    text-decoration: none;
}

.c-article-body a:hover {
    color: var(--article-link-hover-color, var(--color-accent));
    text-decoration: none;
}

.c-article-body blockquote {
    font-family: var(--font-display);
}


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

.c-article-body :where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-family: var(--article-heading-font);
    font-weight: var(--article-heading-weight);
    font-style: var(--article-heading-style);
    line-height: var(--article-heading-line-height);
    letter-spacing: var(--article-heading-letter-spacing);
    color: var(--article-heading-color);
}

.c-article-body :where(h1) {
    font-size: var(--article-h1-size);
}

.c-article-body :where(h2) {
    font-size: var(--article-h2-size);
}

.c-article-body :where(h3) {
    font-size: var(--article-h3-size);
}

.c-article-body :where(h4) {
    font-size: var(--article-h4-size);
}

.c-article-body :where(h5) {
    font-size: var(--article-h5-size);
}

.c-article-body :where(h6) {
    font-size: var(--article-h6-size);
}

.c-article-body> :where(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--article-heading-space-before);
    margin-bottom: var(--article-heading-space-after);
}

.c-article-body> :where(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}


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

.c-article-body .wp-block-image {
    margin: var(--space-32) 0;
}

.c-article-body .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
}

.c-article-body .wp-block-image figcaption,
.c-article-body .wp-block-image .wp-element-caption,
.c-article-body .wp-caption-text {
    display: block;
    margin-top: var(--space-8);
    font-size: var(--font-size-xs);
    line-height: var(--lh-normal);
    color: var(--color-muted);
}

@media (min-width: 1024px) {
    .c-article-layout {
        grid-template-columns: minmax(0, var(--container-width)) 300px;
        align-items: start;
        justify-content: center;
    }

    .c-article-layout__sidebar {
        position: sticky;
        top: var(--header-offset, 96px);
    }

    .c-article-layout--no-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================
   ARTICLE EMBEDS / IFRAMES
========================= */

.c-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.c-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


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

.c-article-header {
    margin-bottom: var(--space-32);
}

.c-article-header__inner {
    display: grid;
    gap: var(--space-14);
    width: 100%;
}

.c-article-header__meta {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    font-size: var(--text-label);
    line-height: var(--lh-label);
    font-weight: var(--font-weight-label);
    text-transform: var(--transform-label);
    letter-spacing: var(--tracking-label);
    font-family: var(--font-display);
}

.c-article-header__category {
    color: var(--color-accent);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.c-article-header__category::before {
    content: "+ ";
    font-size: var(--font-size-sm);
}

.c-article-header__title {
    margin: 0;
    font-family: var(--article-header-title-font);
    font-size: var(--article-header-title-size);
    line-height: var(--article-header-title-line-height);
    font-weight: var(--article-header-title-weight);
    letter-spacing: var(--article-header-title-tracking);
    color: var(--article-header-title-color);
}

.c-article-header__excerpt {
    margin: 0;
    font-family: var(--font-lead);
    font-size: var(--text-lead);
    line-height: var(--lh-lead);
    font-weight: var(--font-weight-lead);
    color: var(--color-muted);
}

.c-article-header__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
}

.c-article-header__date {
    font-size: var(--font-size-md);
    line-height: var(--lh-meta);
    color: var(--color-text);
}

.c-article-hero {
    margin: var(--space-8) 0 0;
}

.c-article-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

.c-article-hero__caption {
    margin-top: var(--space-8);
    font-size: var(--font-size-14);
    line-height: var(--lh-normal);
    color: var(--color-muted);
}

.c-article-header__byline {
    font-size: var(--text-small);
    line-height: var(--lh-meta);
    color: var(--color-accent);
}

.c-article-header__author {
    color: inherit;
}

@media (max-width: 767px) {
    .c-article-header__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================
   ARTICLE BREAK AD
========================= */

.c-article-break-ad {
    margin-block: var(--space-32);
}

.c-article-break-ad .c-ad {
    margin-block: 0;
}

.c-article-break-ad--wide {
    display: block;
}

.c-article-break-ad--wide .c-ad {
    width: 100%;
}

.c-ad--article-after-intro .c-ad__inner {
    min-height: 120px;
}


/* =========================
   Ads / SINGLE
========================= */

.c-ad--article-top {
    margin-block: var(--space-16) var(--space-32);
}

.c-ad--article-after-hero {
    margin-block: var(--space-24);
}

.c-ad--article-after-intro {
    margin-block: 0;
}

.c-article-layout__sidebar .c-ad {
    margin-block: 0;
}

/* =========================
   ARTICLE SHARE
========================= */

.c-article-share {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    flex-shrink: 0;
}

.c-article-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1;
}

.c-article-share__link .c-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.c-article-share__link:hover {
    color: var(--color-accent);
}

/* =========================
   ARTICLE FOOTER
========================= */

.c-article-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
    margin-top: var(--space-48);
}

.c-article-footer__main {
    min-width: 0;
}

@media (min-width: 1024px) {
    .c-article-footer {
        grid-template-columns: minmax(0, var(--container-width)) 300px;
        align-items: start;
        justify-content: center;
    }

    .c-article-footer__main {
        grid-column: 1;
    }
}


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

.c-article-author {
    display: grid;
    gap: var(--space-12);
}

.c-article-author__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-section-title);
    line-height: var(--lh-section-title);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-section-title);
    text-transform: var(--transform-section-title);
    color: var(--color-text);
}

.c-article-author__title::before {
    content: "+ ";
    color: var(--color-accent);
}

.c-article-author__body {
    display: grid;
    gap: var(--space-8);
}

.c-article-author__name {
    width: fit-content;
    color: var(--color-accent);
    text-decoration: none;
    font-size: var(--text-small);
    line-height: var(--lh-meta);
}

.c-article-author__social {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    width: fit-content;
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-small);
    line-height: var(--lh-meta);
}

.c-article-author__social-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

.c-article-author__social-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.c-article-author__social-label {
    color: var(--color-muted);
}

.c-article-author__description {
    margin: 0;
    max-width: 60ch;
    font-size: var(--text-small);
    line-height: var(--lh-normal);
    color: var(--color-muted);
}

/* =========================
   ARTICLE TAGS
========================= */

.c-article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-32);
    font-size: var(--text-small);
    line-height: var(--lh-meta);
    color: var(--color-muted);
}

.c-article-tags__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}

.c-article-tags__icon {
    display: block;
    width: 16px;
    height: 16px;
    color: var(--color-text);
}

.c-article-tags__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-article-tags__item {
    margin: 0;
}

.c-article-tags__link {
    color: var(--color-accent);
    text-decoration: none;
    font-size: var(--font-size-md);
    font-family: var(--font-display);
}

.c-article-tags__link:hover {
    text-decoration: var(--link-decoration-hover);
    text-underline-offset: var(--link-underline-offset);
}

/* =========================
   ARTICLE / WP ALIGNMENTS
========================= */

.c-article-body :where(.alignleft, .alignright) {
    float: none;
    margin-inline: 0;
}

.c-article-body :where(.aligncenter) {
    clear: none;
    display: block;
    margin-inline: auto;
}

/* Imágenes y figuras dentro del artículo */
.c-article-body :where(img, figure).alignleft,
.c-article-body :where(img, figure).alignright,
.c-article-body :where(img, figure).aligncenter {
    max-width: 100%;
}

/* Gutenberg image block */
.c-article-body .wp-block-image.alignleft,
.c-article-body .wp-block-image.alignright {
    float: none;
    margin-inline: 0;
}

.c-article-body .wp-block-image.aligncenter {
    margin-inline: auto;
    text-align: center;
}

.c-article-body .wp-block-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* =============================
   NATIVE WORDPRESS GALLERY CSS
=============================== */

.c-article-body .wp-block-gallery.has-nested-images figure.wp-block-image {
    margin: 0;
}

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

.c-article-body .wp-block-image {
    margin: var(--space-32) 0;
}

.c-article-body .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
}

.c-article-body .wp-block-gallery.has-nested-images {
    row-gap: var(--space-24);
    margin-block: var(--space-32);
}

.c-article-body .wp-block-gallery.has-nested-images figure.wp-block-image {
    margin: 0;
}

.c-article-body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption.wp-element-caption {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    display: -webkit-box;
    width: 100%;
    block-size: 3lh;
    margin: var(--space-8) 0 0;
    padding: 0;
    overflow: hidden;
    background: none;
    color: var(--color-muted);
    font-size: var(--font-size-16);
    line-height: var(--lh-normal);
    text-align: left;
    text-shadow: none;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}