/*
 * KPT Production — Gutenberg Core Block Styling
 * Applies inside .kpt-article-content only. Keeps native WordPress
 * blocks (no page builder — spec §16-17) visually consistent with the
 * KPT design tokens, fully responsive, no horizontal overflow.
 */

/* ============================================================
   RESPONSIVE EMBEDS (YouTube/Bunny/Vimeo/etc — spec §22, §107)
   ============================================================ */
.kpt-article-content .wp-block-embed,
.kpt-article-content .wp-block-video {
    margin-block: var(--kpt-space-lg);
}
.kpt-article-content .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
}
.kpt-article-content .wp-block-embed.is-type-video .wp-block-embed__wrapper,
.kpt-article-content .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
    aspect-ratio: 16 / 9;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    border-radius: var(--kpt-radius-md);
}
.kpt-article-content .wp-block-embed iframe,
.kpt-article-content .wp-block-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--kpt-radius-md);
}
.kpt-article-content .wp-block-video video {
    position: static;
    max-width: 100%;
    border-radius: var(--kpt-radius-md);
}

/* ============================================================
   IMAGES & GALLERIES (spec §9, §21, §79, §109)
   ============================================================ */
.kpt-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--kpt-radius-md);
}
.kpt-article-content .wp-block-image {
    margin-block: var(--kpt-space-lg);
}
.kpt-article-content .wp-block-image figcaption {
    font-size: var(--kpt-text-xs);
    color: var(--kpt-text-muted);
    text-align: center;
    margin-top: var(--kpt-space-xs);
}
.kpt-article-content .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kpt-space-sm);
    margin-block: var(--kpt-space-lg);
}
@media (min-width: 640px) {
    .kpt-article-content .wp-block-gallery { grid-template-columns: repeat(3, 1fr); }
}
.kpt-article-content .wp-block-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* ============================================================
   QUOTES
   ============================================================ */
.kpt-article-content blockquote,
.kpt-article-content .wp-block-quote {
    border-left: 3px solid var(--kpt-gold);
    padding-left: var(--kpt-space-md);
    margin-block: var(--kpt-space-lg);
    margin-inline: 0;
    font-style: italic;
    color: var(--kpt-text-secondary);
}
.kpt-article-content .wp-block-quote cite {
    display: block;
    margin-top: var(--kpt-space-xs);
    font-size: var(--kpt-text-sm);
    font-style: normal;
    color: var(--kpt-text-muted);
}
.kpt-article-content .wp-block-pullquote {
    border-top: 1px solid var(--kpt-border-mid);
    border-bottom: 1px solid var(--kpt-border-mid);
    padding-block: var(--kpt-space-lg);
    text-align: center;
    margin-block: var(--kpt-space-xl);
}
.kpt-article-content .wp-block-pullquote p {
    font-size: var(--kpt-text-lg);
    font-family: var(--kpt-font-display);
    color: var(--kpt-text-primary);
}

/* ============================================================
   BUTTONS (Gutenberg core/buttons block)
   ============================================================ */
.kpt-article-content .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px var(--kpt-space-lg);
    background: var(--kpt-gold-gradient);
    color: var(--kpt-bg-primary);
    border-radius: var(--kpt-radius-sm);
    font-weight: var(--kpt-weight-semibold);
    font-size: var(--kpt-text-sm);
    text-decoration: none;
    transition: filter var(--kpt-transition-fast);
}
.kpt-article-content .wp-block-button__link:hover { filter: brightness(1.1); color: var(--kpt-bg-primary); }
.kpt-article-content .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 1px solid var(--kpt-border-mid);
    color: var(--kpt-text-primary);
}

/* ============================================================
   TABLES (spec §106 — horizontally scrollable, never break layout)
   ============================================================ */
.kpt-article-content .wp-block-table {
    overflow-x: auto;
    margin-block: var(--kpt-space-lg);
    -webkit-overflow-scrolling: touch;
}
.kpt-article-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--kpt-text-sm);
    min-width: 480px; /* forces horizontal scroll instead of squeezing/breaking on mobile */
}
.kpt-article-content table th,
.kpt-article-content table td {
    padding: var(--kpt-space-xs) var(--kpt-space-sm);
    border: 1px solid var(--kpt-border-subtle);
    text-align: left;
}
.kpt-article-content table th {
    background: var(--kpt-surface);
    font-weight: var(--kpt-weight-semibold);
    color: var(--kpt-text-primary);
}
.kpt-article-content table td { color: var(--kpt-text-secondary); }

/* ============================================================
   LISTS
   ============================================================ */
.kpt-article-content ul,
.kpt-article-content ol {
    margin-bottom: var(--kpt-space-md);
    padding-left: var(--kpt-space-lg);
}
.kpt-article-content li { margin-bottom: var(--kpt-space-2xs); }

/* ============================================================
   CODE
   ============================================================ */
.kpt-article-content code {
    background: var(--kpt-surface);
    padding: 2px 6px;
    border-radius: var(--kpt-radius-xs);
    font-family: var(--kpt-font-mono);
    font-size: 0.9em;
}
.kpt-article-content pre {
    background: var(--kpt-surface);
    padding: var(--kpt-space-md);
    border-radius: var(--kpt-radius-sm);
    overflow-x: auto;
    margin-block: var(--kpt-space-lg);
}
.kpt-article-content pre code { background: none; padding: 0; }

/* ============================================================
   HORIZONTAL RULE / SEPARATOR
   ============================================================ */
.kpt-article-content hr,
.kpt-article-content .wp-block-separator {
    border: none;
    border-top: 1px solid var(--kpt-border-subtle);
    margin-block: var(--kpt-space-xl);
}