/*
 * Front-end layer for Potolki.pro Divi 5 Child.
 * Keep reusable utilities and safe global adjustments here.
 */

body {
    background-color: var(--pp-color-surface);
}

.pp-container,
.pp-content-width {
    width: min(calc(100% - 32px), var(--pp-content-width));
    margin-inline: auto;
}

.pp-container--narrow,
.pp-content-width--narrow {
    width: min(calc(100% - 32px), var(--pp-content-width-narrow));
    margin-inline: auto;
}

.pp-surface {
    background: var(--pp-color-surface);
    border: 1px solid var(--pp-color-border);
    border-radius: var(--pp-radius-md);
    box-shadow: var(--pp-shadow-card);
}

.pp-surface--soft {
    background: linear-gradient(180deg, #ffffff 0%, var(--pp-color-surface-alt) 100%);
}

.pp-grid-auto {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pp-stack > * + * {
    margin-top: 16px;
}

.pp-prose {
    color: var(--pp-color-text);
    line-height: 1.7;
}

.pp-prose > * + * {
    margin-top: 1em;
}

.pp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--pp-color-primary-2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(32, 183, 255, 0.1);
    color: var(--pp-color-primary);
    font-size: 14px;
    font-weight: 600;
}

.pp-shadow-soft {
    box-shadow: var(--pp-shadow-soft);
}

.pp-hidden-mobile {
    display: initial;
}

.pp-hidden-desktop {
    display: none;
}

.et_pb_button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    transition:
        transform var(--pp-transition),
        box-shadow var(--pp-transition),
        border-color var(--pp-transition),
        background-color var(--pp-transition),
        color var(--pp-transition);
}

.et_pb_button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
}

.et_pb_image img,
.et_pb_module img,
.wp-block-image img {
    height: auto;
}

iframe {
    max-width: 100%;
}

@media (max-width: 980px) {
    .pp-hidden-mobile {
        display: none;
    }

    .pp-hidden-desktop {
        display: initial;
    }
}