/* =========================================================
   ARTIDAS BRAND LOCKUP
   Preserves the original logo asset. The embedded subtitle
   "TJELESNA PSIHOTERAPIJA" is clipped only on the right side,
   while the lotus/reflection remains untouched. Ida's name is
   rendered as real HTML text so it stays crisp and editable.
========================================================== */


/* Shared crop geometry for the original 2048 × 712 PNG.
   The embedded subtitle begins at approximately x 46.3%, y 76.5%.
   We preserve the full left side (lotus + reflection) and clip only
   the lower-right subtitle area. */

.site-logo__image,
.site-footer__logo-image {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 74%,
        46% 74%,
        46% 100%,
        0 100%
    );
}


/* =========================================================
   HEADER LOGO
========================================================== */

.site-logo {
    position: relative;
    display: inline-block;

    width: 220px;
    flex: 0 0 220px;

    line-height: 0;
}


.site-logo__image {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;
    max-height: none;
}


.site-logo__name {
    position: absolute;

    left: 47%;
    top: 76.2%;

    display: block;

    color: var(--color-primary);

    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    letter-spacing: 0.075em;

    white-space: nowrap;
}


/* =========================================================
   FOOTER LOGO
========================================================== */

.site-footer__logo {
    position: relative;
    display: inline-block;

    width: 285px;

    margin-bottom: var(--space-4);

    padding: 9px 14px 8px;

    border-radius: var(--radius-md);

    background-color: var(--color-background);

    line-height: 0;
}


.site-footer__logo-image {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;
    max-height: none;
}


.site-footer__logo-name {
    position: absolute;

    left: calc(14px + 47%);
    top: calc(9px + 76.2%);

    display: block;

    color: var(--color-primary);

    font-family: var(--font-body);
    font-size: 0.63rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    letter-spacing: 0.075em;

    white-space: nowrap;
}


/* =========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

    .site-logo {
        width: 195px;
        flex-basis: 195px;
    }


    .site-logo__name {
        font-size: 0.57rem;
        letter-spacing: 0.06em;
    }


    .site-footer__logo {
        width: 260px;
    }


    .site-footer__logo-name {
        left: calc(14px + 47%);

        font-size: 0.58rem;
        letter-spacing: 0.06em;
    }
}


/* =========================================================
   MOBILE
========================================================== */

@media (max-width: 640px) {

    .site-logo {
        width: 168px;
        flex-basis: 168px;
    }


    .site-logo__name {
        font-size: 0.5rem;
        letter-spacing: 0.045em;
    }


    .site-footer__logo {
        width: 230px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .site-footer__logo-name {
        left: calc(12px + 47%);

        font-size: 0.55rem;
        letter-spacing: 0.055em;
    }
}