/**
 * Magazine teaser: CMS block "kruzik-magazin" (DE + EN), shown on the homepage and the magazine page.
 *
 * Page Builder: contained row with CSS class "kz-magazine"; two columns, cover image (5/12) and
 * text (7/12, CSS class "kz-magazine__text") with heading, text and button.
 * Phones: the columns stack, the cover runs edge to edge, the text keeps the page gutter.
 */
.kz-magazine figure {
    margin: 0;
}

.kz-magazine figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* button: outlined pill like the Instagram button on the homepage (kz-home.css, `kz-social-btn`) */
.kz-magazine .pagebuilder-button-primary {
    display: inline-block;
    padding: 0.875rem 3.5rem;
    border: 2px solid #6b6b66;
    border-radius: 9999px;
    background: #fff;
    box-shadow: none;
    color: #6b6b6b;
    font-size: clamp(1rem, 1.6vw, 1.375rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}

.kz-magazine .pagebuilder-button-primary:hover,
.kz-magazine .pagebuilder-button-primary:focus-visible {
    border-color: #222;
    color: #222;
}

@media (max-width: 47.999rem) {
    /* phones: text and button centred, like the page title above */
    .kz-magazine__text {
        text-align: center;
    }

    .kz-magazine__text [data-content-type="button-item"] {
        margin-inline: 0;
    }

    /* same specificity as Hyvä's contained-row padding, which this file (loaded later) overrides */
    .kz-magazine[data-content-type="row"] {
        padding-inline: 0;
    }

    .kz-magazine__text {
        padding: 2rem 1.5rem 0;
    }

    /* magazine page: text and button first, right below the page title; the cover follows */
    .cms-the-luxury-magazine .kz-magazine__text {
        order: -1;
        padding: 0 1.5rem 2rem;
    }
}

@media (min-width: 48rem) {
    .kz-magazine__text {
        padding-inline-start: 3rem;
    }
}

/**
 * Magazine page: larger screens show the PDF itself in the browser's PDF viewer (row with CSS class
 * "kz-magazine-viewer", HTML Code element with the iframe); phones show the block instead (row with
 * CSS class "kz-magazine-phone"), as mobile browsers don't display PDFs inside a page reliably.
 */
.kz-magazine-viewer[data-content-type="row"] {
    display: none;
}

@media (min-width: 48rem) {
    /* !important: Page Builder writes "display: flex" inline on full-bleed rows */
    .kz-magazine-phone[data-content-type="row"] {
        display: none !important;
    }

    .kz-magazine-viewer[data-content-type="row"] {
        display: block;
    }

    .kz-magazine-viewer__pdf {
        display: block;
        width: 100%;
        height: min(88vh, 70rem);
        border: 0;
        background: #f4f4f4;
    }
}