/* Academia Saraki - managed visual assets runtime */

/* ---------------------------------------------------------
   Shared transform model.
   At scale 1 the complete source image is visible (contain).
   The editor may then move or zoom the source as desired.
   --------------------------------------------------------- */
.academia-visuals-managed-image {
    --av-current-x: var(--av-desktop-x, 0%);
    --av-current-y: var(--av-desktop-y, 0%);
    --av-current-scale: var(--av-desktop-scale, 1);

    transform:
        translate(var(--av-current-x), var(--av-current-y))
        scale(var(--av-current-scale)) !important;
    transform-origin: center center !important;
}

/* ---------------------------------------------------------
   Hero superior.
   We do not change the hero container height: only framing.
   --------------------------------------------------------- */
body.pagelayout-frontpage
.academia-hero.academia-visuals-hero-active
.academia-hero__image {
    overflow: hidden !important;
}

body.pagelayout-frontpage
.academia-visuals-managed-hero {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: var(--av-fit, contain) !important;
    object-position: center center !important;
}

/* ---------------------------------------------------------
   Banner inferior.
   Supports both the newer image-only markup and the previous
   text + visual-column markup.
   --------------------------------------------------------- */
body.pagelayout-frontpage
.academia-bottom-banner.academia-visuals-bottom-active {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;

    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.pagelayout-frontpage
.academia-bottom-banner.academia-visuals-bottom-active
.academia-bottom-banner__text {
    display: none !important;
}

body.pagelayout-frontpage
.academia-bottom-banner.academia-visuals-bottom-active
.academia-bottom-banner__visual {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

body.pagelayout-frontpage
.academia-visuals-managed-bottom {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: var(--av-fit, contain) !important;
    object-position: center center !important;
}

/* ---------------------------------------------------------
   Public route cards.
   The source is selected by the theme's <picture>; this runtime only applies
   the administrator's framing/zoom and fit settings.
   --------------------------------------------------------- */
body.academia-login-page
.academia-public-route__image {
    overflow: hidden !important;
}

body.academia-login-page
.academia-visuals-managed-route {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: var(--av-fit, cover) !important;
    object-position: center center !important;
}

/* ---------------------------------------------------------
   Public/login background.
   An actual fixed image layer is used instead of
   background-attachment so dragging/zoom can be identical to
   hero/banner behaviour and remain stable on mobile browsers.
   --------------------------------------------------------- */
body.academia-login-page.academia-visuals-public-background-active::before {
    content: none !important;
    display: none !important;
}

body.academia-login-page.academia-visuals-public-background-active,
body.academia-login-page.academia-visuals-public-background-active
.academia-public-login {
    background: transparent !important;
}

.academia-visuals-public-background {
    position: fixed;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    pointer-events: none;
}

.academia-visuals-managed-background {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: var(--av-fit, cover) !important;
    object-position: center center !important;
}

body.academia-login-page.academia-visuals-public-background-active
.academia-public-login,
body.academia-login-page.academia-visuals-public-background-active
.academia-public-header,
body.academia-login-page.academia-visuals-public-background-active
.academia-public-main {
    position: relative;
}

body.academia-login-page.academia-visuals-public-background-active
.academia-public-login,
body.academia-login-page.academia-visuals-public-background-active
.academia-public-main {
    z-index: 1;
}

body.academia-login-page.academia-visuals-public-background-active
.academia-public-header {
    z-index: 20;
}

/* Tablet transform. */
@media (max-width: 991.98px) {
    .academia-visuals-managed-image {
        --av-current-x: var(--av-tablet-x, 0%);
        --av-current-y: var(--av-tablet-y, 0%);
        --av-current-scale: var(--av-tablet-scale, 1);
    }
}

/* Mobile transform. */
@media (max-width: 575.98px) {
    .academia-visuals-managed-image {
        --av-current-x: var(--av-mobile-x, 0%);
        --av-current-y: var(--av-mobile-y, 0%);
        --av-current-scale: var(--av-mobile-scale, 1);
    }
}

/* =========================================================
   ACADEMIA SARAKI 0.2.0 - CONTENT EXTENSION ZONES
   Functional blocks are intentionally not targeted here.
   ========================================================= */

.academia-managed-blocks {
    width: min(1320px, calc(100% - 3rem));
    margin: 1.75rem auto 2.25rem;
}

body.academia-login-page .academia-managed-blocks {
    width: min(1180px, calc(100% - 3rem));
}

.academia-managed-block {
    margin: 0 0 1rem;
}

.academia-managed-block:last-child {
    margin-bottom: 0;
}

.academia-managed-block__surface {
    padding: 1.4rem 1.5rem;
    border: 1px solid #DDE3E8;
    border-radius: 18px;
    background: #FFFFFF;
    color: #243746;
}

.academia-managed-block__title {
    margin: 0 0 .6rem;
    color: #243746;
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    font-weight: 750;
    line-height: 1.2;
}

.academia-managed-block__content {
    color: #647484;
    line-height: 1.55;
}

.academia-managed-block__content > :last-child {
    margin-bottom: 0;
}

.academia-managed-block--notice .academia-managed-block__surface {
    border-left: 5px solid #F28C00;
    background: #FFF9F0;
}

.academia-managed-block__button {
    display: inline-flex;
    min-height: 44px;
    margin-top: 1rem;
    padding: .7rem 1.2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #0070BA;
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
}

.academia-managed-block__button:hover,
.academia-managed-block__button:focus {
    background: #005A96;
    color: #FFFFFF;
    text-decoration: none;
}

.academia-managed-links {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .8rem;
}

.academia-managed-link {
    display: inline-flex;
    min-height: 44px;
    padding: .65rem 1rem;
    align-items: center;
    border: 1px solid #DDE3E8;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0070BA;
    font-weight: 650;
    text-decoration: none;
}

.academia-managed-link:hover,
.academia-managed-link:focus {
    border-color: #0070BA;
    color: #005A96;
    text-decoration: none;
}

.academia-managed-cards {
    display: grid;
    grid-template-columns: repeat(var(--academia-managed-columns, 3), minmax(0, 1fr));
    gap: 1rem;
    margin-top: .9rem;
}

.academia-managed-card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #DDE3E8;
    border-radius: 14px;
    background: #FFFFFF;
}

.academia-managed-card h4 {
    margin: 0 0 .45rem;
    color: #243746;
    font-size: 1.05rem;
    font-weight: 750;
}

.academia-managed-card p {
    margin: 0;
    color: #647484;
    line-height: 1.45;
}

.academia-managed-card a {
    display: inline-block;
    margin-top: .7rem;
    color: #0070BA;
    font-weight: 700;
    text-decoration: none;
}

.academia-managed-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border: 0;
    border-radius: 16px;
}

.academia-managed-image-link {
    display: block;
    text-decoration: none;
}

.academia-managed-device--desktop,
.academia-managed-device--tablet,
.academia-managed-device--mobile {
    display: block;
}

@media (max-width: 991.98px) {
    .academia-managed-blocks {
        width: min(100% - 2rem, 960px);
    }

    .academia-managed-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .academia-managed-device--desktop.academia-managed-hidden-tablet {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .academia-managed-hidden-desktop {
        display: none !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .academia-managed-hidden-tablet {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .academia-managed-blocks,
    body.academia-login-page .academia-managed-blocks {
        width: calc(100% - 1.25rem);
        margin-top: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .academia-managed-block__surface {
        padding: 1.1rem;
        border-radius: 14px;
    }

    .academia-managed-cards {
        grid-template-columns: 1fr;
    }

    .academia-managed-links {
        flex-direction: column;
    }

    .academia-managed-link,
    .academia-managed-block__button {
        width: 100%;
    }

    .academia-managed-hidden-mobile {
        display: none !important;
    }
}

/* =========================================================
   HERO LOGUEADO - CORRECCIÓN MÓVIL
   En móvil, el hero debe ser una única superficie visual y la
   fotografía debe cubrir siempre todo el alto/ancho del bloque.

   Esta regla se aplica sobre la imagen gestionada por
   local_academiavisuals, que utiliza !important y por eso podía
   prevalecer sobre el object-fit: cover definido en el tema.
   ========================================================= */
@media (max-width: 575.98px) {
    body.pagelayout-frontpage
    .academia-hero.academia-visuals-hero-active
    .academia-hero__image
    .academia-visuals-managed-hero {
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* =========================================================
   0.4.0 - PICTURE RESPONSIVE
   ========================================================= */
body.pagelayout-frontpage .academia-hero__image picture,
body.pagelayout-frontpage .academia-bottom-banner__picture,
.academia-visuals-public-background picture {
    display: block;
    width: 100%;
    height: 100%;
}

body.pagelayout-frontpage .academia-bottom-banner__picture {
    position: absolute;
    inset: 0;
}