/* Native Gutenberg Block Style Variants
   Registered via register_block_style() — selectable in block toolbar.
   Naming: .is-style-thch-<name> */

/* ==========================================================================
   Default Gutenberg Button → match THCH CI button
   ========================================================================== */
.wp-block-button__link {
    background: var(--thch-color-primary, #1D245D);
    color: var(--thch-color-neutral, #EAECF0);
    border: none;
    border-radius: 1.875rem;
    padding: 0.5rem 1.25rem;
    font-family: var(--thch-font-heading, 'Aptos', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    transition: background 0.2s, color 0.2s;
}
.wp-block-button__link:hover {
    background: #161B37;
    color: var(--thch-color-neutral, #EAECF0);
}

/* ==========================================================================
   Group Variants
   ========================================================================== */

/* "THCH Section" — Full-width section with standard vertical padding + gutters */
.is-style-thch-section {
    padding: 6rem var(--thch-gutter, 2rem);
}

/* "THCH Container" — Constrained width with auto margins + gutters */
.is-style-thch-container {
    max-width: var(--thch-container-width);
    margin-inline: auto;
    padding-inline: var(--thch-gutter);
    width: 100%;
}

/* "THCH Narrow Center" — Centered narrow column (Figma: 704px)
   Figma spacing: subtitle→title 0, title→body 24px, body→buttons 48px */
.is-style-thch-narrow-center {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Subtitle → title: 0 gap (both in same visual group) */
.is-style-thch-narrow-center .is-style-thch-subtitle {
    margin-bottom: 0;
}

/* Title → body: 24px */
.is-style-thch-narrow-center .is-style-thch-body {
    margin-top: 1.5rem;
}

/* Body → buttons: 48px */
.is-style-thch-narrow-center .wp-block-buttons {
    margin-top: 3rem;
}

/* ==========================================================================
   Heading Variants
   ========================================================================== */

/* "THCH Subtitle" on heading — uppercase overline / eyebrow label (e.g. h2 as landmark)
   Figma: Paragraphs/Base/Regular, Typography/Black/Low Emphasis */
h1.is-style-thch-subtitle,
h2.is-style-thch-subtitle,
h3.is-style-thch-subtitle,
h4.is-style-thch-subtitle {
    font-family: var(--thch-font-body, 'Aptos', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(23, 27, 55, 0.7); /* E3: 0.4 ergab 2,42:1 auf #EAECF0, 0.7 ergibt 5,75:1 */
    margin: 0;
}

/* "THCH Heading" — Figma: Heading/H2 (4xl)/Bold
   color: #1D245D, font-size: 2.25rem, line-height: 2.5rem, weight: 700 */
.is-style-thch-heading {
    font-family: var(--thch-font-heading, 'Aptos', system-ui, sans-serif);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.5rem;
    color: var(--thch-color-primary, #1D245D);
    margin: 0;
}

/* ==========================================================================
   Paragraph Variants
   ========================================================================== */

/* "THCH Subtitle" on paragraph — same as heading variant */
p.is-style-thch-subtitle {
    font-family: var(--thch-font-body, 'Aptos', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(23, 27, 55, 0.7); /* E3: 0.4 ergab 2,42:1 auf #EAECF0, 0.7 ergibt 5,75:1 */
    margin: 0;
}

/* "THCH Body" — Figma: Paragraphs/Large (lg)/Regular
   font-size: 18px, line-height: 28px, Typography/Black/Medium Emphasis */
.is-style-thch-body {
    font-family: var(--thch-font-body, 'Aptos', system-ui, sans-serif);
    font-size: var(--thch-text-base, 1.125rem);
    line-height: 1.75rem;
    color: rgba(23, 27, 55, 0.8);
}

/* ==========================================================================
   Button Variants
   ========================================================================== */

/* "THCH Arrow" — primary button with arrow icon appended */
.wp-block-button.is-style-thch-arrow .wp-block-button__link::after {
    content: '';
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    margin-left: 0.25em;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* "THCH Secondary" — light bg, dark text */
.wp-block-button.is-style-thch-secondary .wp-block-button__link {
    background: var(--thch-color-neutral, #EAECF0);
    color: var(--thch-color-primary, #1D245D);
}

/* "THCH Outline" — transparent bg, primary border */
.wp-block-button.is-style-thch-outline .wp-block-button__link {
    background: transparent;
    color: var(--thch-color-primary, #1D245D);
    border: 2px solid var(--thch-color-primary, #1D245D);
}

/* ==========================================================================
   Image Variants
   ========================================================================== */

/* "THCH Banner" — Full-width image banner with rounded corners */
.is-style-thch-banner img {
    width: 100%;
    height: 31.25rem;
    object-fit: cover;
    border-radius: 1.25rem;
    display: block;
}

/* "THCH Rounded" — Standard rounded corners */
.is-style-thch-rounded img {
    border-radius: 1.25rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 48rem) {
    .is-style-thch-section {
        padding: 4rem var(--thch-gutter, 1.25rem);
    }
    .is-style-thch-narrow-center .is-style-thch-body {
        margin-top: 1rem;
    }
    .is-style-thch-narrow-center .wp-block-buttons {
        margin-top: 2rem;
    }
    .is-style-thch-banner img {
        height: 16rem;
        border-radius: 1rem;
    }
}

/* ==========================================================================
   THCH brand color palette — backgrounds & text
   Slugs match theme.json color.palette. WordPress auto-applies these classes
   when the user picks a swatch in the Group/Row block color panel.
   ========================================================================== */

/* Backgrounds */
.has-primary-background-color      { background-color: #1D245D !important; }
.has-primary-dark-background-color { background-color: #0C0F27 !important; }
.has-secondary-background-color    { background-color: #161B37 !important; }
.has-accent-background-color       { background-color: #0066FF !important; }
.has-tertiary-background-color     { background-color: #ADA791 !important; }
.has-neutral-background-color      { background-color: #EAECF0 !important; }
.has-white-background-color        { background-color: #FFFFFF !important; }
.has-black-background-color        { background-color: #171B37 !important; }

/* Text colors */
.has-primary-color      { color: #1D245D !important; }
.has-primary-dark-color { color: #0C0F27 !important; }
.has-secondary-color    { color: #161B37 !important; }
.has-accent-color       { color: #0066FF !important; }
.has-tertiary-color     { color: #ADA791 !important; }
.has-neutral-color      { color: #EAECF0 !important; }
.has-white-color        { color: #FFFFFF !important; }
.has-black-color        { color: #171B37 !important; }