/* ========================================
   CONTENT PROZON
   Generic single-area content
   Scoped + editor-theme friendly
======================================== */

.pz-content {
    

    width: 100%;
    margin: 0;
    /* Let this Prozon respond to the width of the zone it actually occupies,
       not only to the browser viewport. This keeps mixed media layouts usable
       when the site container is wider or the Prozon is placed in a narrow zone. */
    container-type: inline-size;
    color: var(--color-text);
    font-family: var(--font-body, inherit);
    font-size: var(--size-body, 1rem);
}

.pz-content,
.pz-content * {
    box-sizing: border-box;
}

.pz-content__area {
    width: 100%;
    min-width: 0;
    color: var(--color-text);
}

.pz-content__area--panel-card {
    overflow: hidden;
    padding: calc(var(--spacing) * 1.5);
    border: 0;
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-card);
}

.pz-content__area--panel-none {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Border is independent from the card background. */
.pz-content__area--border-border {
    border: 2px solid var(--color-card-border);
    border-radius: var(--radius-card);
}

.pz-content__area--border-none {
    border: 0;
}

/* Keep a useful radius when either card background or border is enabled. */
.pz-content__area--panel-card.pz-content__area--border-none,
.pz-content__area--border-border {
    border-radius: var(--radius-card);
}

/* Selectable panel roles use the shared site palette; no Content-specific color aliases. */
.pz-content__area--panel-card.pz-content__area--role-background { background: var(--color-page-bg); }
.pz-content__area--panel-card.pz-content__area--role-surface { background: var(--color-card-bg); }
.pz-content__area--panel-card.pz-content__area--role-primary { background: var(--color-title); }
.pz-content__area--panel-card.pz-content__area--role-secondary { background: var(--color-subtitle); }
.pz-content__area--panel-card.pz-content__area--role-accent { background: var(--color-accent); }

.pz-content__primary {
    display: grid;
    gap: calc(var(--spacing) * 1.5);
    align-items: center;
    min-width: 0;
    grid-template-columns: 1fr;
}

/* Text to the left/right of media uses two equal columns. */
.pz-content__area--text-left .pz-content__primary,
.pz-content__area--text-right .pz-content__primary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Above, below, none, and text-only are single-column layouts. */
.pz-content__area--text-above .pz-content__primary,
.pz-content__area--text-below .pz-content__primary,
.pz-content__area--text-none .pz-content__primary,
.pz-content__area--text-text-only .pz-content__primary {
    grid-template-columns: 1fr;
}

.pz-content__media,
.pz-content__copy {
    min-width: 0;
    width: 100%;
}

.pz-content__copy--align-left { text-align: left; }
.pz-content__copy--align-center { text-align: center; }
.pz-content__copy--align-right { text-align: right; }

.pz-content__copy--align-center .pz-content__actions { justify-content: center; }
.pz-content__copy--align-right .pz-content__actions { justify-content: flex-end; }

/* When text and media share a row, choose where the text sits vertically. */
.pz-content__copy--valign-top { align-self: start; }
.pz-content__copy--valign-center { align-self: center; }
.pz-content__copy--valign-bottom { align-self: end; }


/* Hero-style Content: horizontal Text alignment plus Vertical alignment creates
   a 3x3 placement grid when text is over the media. */
.pz-content__area--text-overlay .pz-content__primary {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
}
.pz-content__area--text-overlay .pz-content__media {
    grid-area: 1 / 1;
    align-self: stretch;
}
.pz-content__area--text-overlay .pz-content__copy {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    width: min(92%, 760px);
    margin: var(--spacing);
    padding: var(--spacing);
}
.pz-content__area--text-overlay .pz-content__copy--align-left { justify-self: start; }
.pz-content__area--text-overlay .pz-content__copy--align-center { justify-self: center; }
.pz-content__area--text-overlay .pz-content__copy--align-right { justify-self: end; }
.pz-content__area--text-overlay .pz-content__copy--valign-top { align-self: start; }
.pz-content__area--text-overlay .pz-content__copy--valign-center { align-self: center; }
.pz-content__area--text-overlay .pz-content__copy--valign-bottom { align-self: end; }

.pz-content__copy--text-panel {
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--color-card-bg) var(--prozon-content-overlay-opacity, 70%), transparent);
}

/* Overlay media is hero-like, so it fills the available Content width. */
.pz-content__area--text-overlay .pz-content__image,
.pz-content__area--text-overlay .pz-content__video {
    width: 100% !important;
    margin-inline: 0 !important;
}

/* Defensive fallback: if one side is absent, the remaining item spans the row. */
.pz-content__primary > :only-child {
    grid-column: 1 / -1;
}

.pz-content__image,
.pz-content__video {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: var(--radius-card);
    background: #000;
}

.pz-content__image {
    height: auto;
    object-fit: cover;
}

.pz-content__video {
    aspect-ratio: 16 / 9;
}

.pz-content__video--embed {
    min-height: 240px;
}

.pz-content__eyebrow {
    margin: 0 0 calc(var(--spacing) * .45);
    color: var(--color-eyebrow);
    font-size: var(--size-eyebrow);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;

    font-family: var(--font-eyebrow);}

.pz-content__title {
    margin: 0;
    color: var(--color-title);
    font-family: var(--font-title, var(--font-body, inherit));
    font-size: var(--size-title, 2rem);
    line-height: 1.15;
}

.pz-content__subtitle {
    margin: calc(var(--spacing) * .55) 0 0;
    color: var(--color-subtitle);
    line-height: 1.45;

    font-family: var(--font-subtitle);
    font-size: var(--size-subtitle);}

.pz-content__text {
    margin-top: var(--spacing);
}

.pz-content__body-subtitle {
    margin: calc(var(--spacing) * 1.35) 0 calc(var(--spacing) * .55);
    color: var(--color-subtitle);
    font-family: var(--font-subtitle, var(--font-title, var(--font-body, inherit)));
    font-size: var(--size-subtitle, 1.2rem);
    line-height: 1.25;
}

.pz-content__body-subtitle:first-child {
    margin-top: 0;
}

.pz-content__text p {
    margin: 0 0 var(--spacing);
    line-height: 1.65;
}

.pz-content__text p:last-child {
    margin-bottom: 0;
}


.pz-content__message {
    margin: 0;
    color: var(--color-text);
}


/* Component-level responsive behavior. A Content Prozon can be narrow even on
   a wide desktop canvas, so stack mixed media based on the Prozon itself. */
@container (max-width: 520px) {
    .pz-content__area--text-left .pz-content__primary,
    .pz-content__area--text-right .pz-content__primary {
        grid-template-columns: 1fr;
    }

    .pz-content__area--panel-card {
        padding: var(--spacing);
    }

    .pz-content__title {
        font-size: calc(var(--size-title, 2rem) * .88);
    }
}

@media (max-width: 520px) {
    .pz-content__area--text-left .pz-content__primary,
    .pz-content__area--text-right .pz-content__primary {
        grid-template-columns: 1fr;
    }

    .pz-content__area--panel-card {
        padding: var(--spacing);
    }

    .pz-content__title {
        font-size: calc(var(--size-title, 2rem) * .88);
    }
}


/* Reusable Content Prozon CTA support. Button label and destination are stored
   explicitly as buttonText and buttonLink. */
.pz-content__actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * .7);
    margin-top: calc(var(--spacing) * 1.15);
}

.pz-content__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .7rem 1.15rem;
    border: 1px solid var(--color-cta-border, var(--color-cta-bg, #173F63));
    border-radius: var(--radius-cta-small, 999px);
    background: var(--color-cta-bg, #173F63);
    color: var(--color-cta-text, #ffffff);
    font-family: var(--font-cta, var(--font-body, inherit));
    font-size: var(--size-cta-small, 1rem);
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.pz-content__button:hover,
.pz-content__button:focus-visible {
    background: var(--color-cta-hover-bg, #0F2F4C);
    border-color: var(--color-cta-hover-bg, #0F2F4C);
    color: var(--color-cta-hover-text, var(--color-cta-text, #ffffff));
    transform: translateY(-1px);
}

/* Compact cards are achieved naturally when a Content Prozon occupies a
   narrow editor zone; keep their copy comfortable and uncluttered. */
.pz-content__area--text-text-only .pz-content__title {
    text-wrap: balance;
}

/* Site Editor setup UI. These rules style only the editor controls; the
   rendered Content preview below continues to use the site's global CSS vars. */
.pz-content__editor { padding: 1rem; border: 1px solid var(--color-card-border); border-radius: var(--radius-card); background: var(--color-card-bg); }
.pz-content__editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.pz-content__editor-kicker { margin:0 0 .25rem; font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text); }
.pz-content__editor-title { margin:0; font-size:1.2rem; color:var(--color-title); }
.pz-content__editor-status { margin:0; padding:.45rem .65rem; border:1px solid var(--color-card-border); border-radius:.55rem; font-size:.85rem; }
.pz-content__editor-status--error { font-weight:700; }
.pz-content__editor-status.is-empty { display:none; }
.pz-content__editor-status:not(.is-empty) { background:color-mix(in srgb, var(--color-accent) 15%, var(--color-card-bg)); color:var(--color-text); }
.pz-content__editor-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.pz-content__editor-field { display:grid; gap:.3rem; min-width:0; }
.pz-content__editor-field--wide { grid-column:1 / -1; }
.pz-content__editor-field > span, .pz-content__editor-media-block > strong { font-size:.82rem; font-weight:800; }
.pz-content__editor input[type="text"], .pz-content__editor input[type="url"], .pz-content__editor input:not([type]), .pz-content__editor textarea, .pz-content__editor select { width:100%; min-width:0; padding:.6rem .65rem; border:1px solid var(--color-input-border); border-radius:.55rem; background:var(--color-input-bg); color:var(--color-input-text); font:inherit; }
.pz-content__editor textarea { resize:vertical; }
.pz-content__editor-media { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.pz-content__editor-media-block { display:grid; gap:.55rem; padding:.8rem; border:1px solid var(--color-card-border); border-radius:.7rem; }
.pz-content__editor-current { margin:0; font-size:.78rem; overflow-wrap:anywhere; color:var(--color-text); }
.pz-content__editor-check { display:flex; align-items:center; gap:.4rem; font-size:.82rem; }
.pz-content__editor-actions { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.pz-content__editor-actions button { min-height:42px; padding:.65rem 1rem; border:1px solid var(--color-cta-border,var(--color-cta-bg,#173F63)); border-radius:var(--radius-cta-small,999px); background:var(--color-cta-bg,#173F63); color:var(--color-cta-text,#fff); font:inherit; font-weight:800; cursor:pointer; }
.pz-content__editor-actions p { margin:0; font-size:.82rem; color:var(--color-text); }
.pz-content__editor-preview { margin:0 0 1rem; padding:0 0 1rem; border-bottom:1px solid var(--color-card-border); }
@container (max-width: 620px) { .pz-content__editor-form, .pz-content__editor-media { grid-template-columns:1fr; } }


/* Content editor image preview: editor-only, bounded, and intentionally
   independent from the live site's typography/color design system. */
.pz-content__editor-image-preview {
    display:grid;
    gap:.65rem;
    padding:.75rem;
    border:1px solid var(--color-card-border);
    border-radius:.7rem;
    background:var(--color-input-bg);
}
.pz-content__editor-image-preview.is-empty { display:none; }
.pz-content__editor-image-stage {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:110px;
    max-height:240px;
    overflow:hidden;
    border-radius:.55rem;
    background:color-mix(in srgb, var(--color-card-border) 28%, transparent);
}
.pz-content__editor-image-stage img {
    display:block;
    width:var(--prozon-content-editor-image-width,100%);
    max-width:100%;
    max-height:220px;
    height:auto;
    object-fit:contain;
}
.pz-content__editor-image-size { display:grid; gap:.35rem; }
.pz-content__editor-image-size > span { display:flex; justify-content:space-between; gap:1rem; font-size:.82rem; font-weight:800; }
.pz-content__editor-image-size input[type="range"] { width:100%; }


/* Optional Content share utility. It deliberately stays visually quieter than
   the CTA and shares the CTA's normal-flow action row, immediately to its right
   when a CTA exists. No separate placement setting is needed. */
.pz-content__share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35em;
    min-height: 34px;
    padding: .35rem .55rem;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--color-link);
    font-family: var(--font-button, var(--font-body, inherit));
    font-size: var(--size-text-small, .9rem);
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color var(--animation-duration, .2s) ease,
                border-color var(--animation-duration, .2s) ease,
                color var(--animation-duration, .2s) ease;
}

.pz-content__share-icon {
    font-size: 1.05em;
    line-height: 1;
}

.pz-content__share:hover {
    background: color-mix(in srgb, var(--color-card-bg) 55%, transparent);
    border-color: color-mix(in srgb, var(--color-card-border) 55%, transparent);
    color: var(--color-link-hover);
}

.pz-content__share:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}