/* HOME-ACCESS-ROW-FINAL-PARITY-082
   Final, tiny override loaded after the main premium styles.
   Keeps teacher and parent login/register rows on the same visual frame and size. */

html body.home-reference-page .home-reference-group--teacher .home-reference-row,
html body.home-reference-page .home-reference-group--parent .home-reference-row,
html body.home-reference-page .home-reference-group--parent .home-reference-row--exact-parent {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.home-reference-page .home-reference-group--teacher .home-reference-row::after,
html body.home-reference-page .home-reference-group--parent .home-reference-row::after,
html body.home-reference-page .home-reference-group--parent .home-reference-row--exact-parent::after {
    display: none !important;
    content: none !important;
}

html body.home-reference-page .home-reference-group--teacher .home-reference-row > .home-reference-supplied--row,
html body.home-reference-page .home-reference-group--parent .home-reference-row > .home-reference-supplied--row,
html body.home-reference-page .home-reference-group--parent .home-reference-row--exact-parent > .home-reference-supplied--row {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Teacher and parent rows now use the same aspect-ratio 1.78/1, no transform needed */

/* HOME-BUTTON-MAX-HEIGHT-083: buttons capped at 50px tall, image scales proportionally and centers. */
html body.home-reference-page .home-reference-group--teacher .home-reference-row,
html body.home-reference-page .home-reference-group--parent .home-reference-row,
html body.home-reference-page .home-reference-group--parent .home-reference-row--exact-parent {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    max-height: 50px !important;
}

html body.home-reference-page .home-reference-group--teacher .home-reference-row > .home-reference-supplied--row,
html body.home-reference-page .home-reference-group--parent .home-reference-row > .home-reference-supplied--row,
html body.home-reference-page .home-reference-group--parent .home-reference-row--exact-parent > .home-reference-supplied--row {
    height: 50px !important;
    width: auto !important;
    max-width: 100% !important;
}

/* HOME-ACCESS-CARDS-112: nove kartice za nastavnike i roditelje s klikabilnim gumbima. */
.home-access-cards {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 0 2.8cqi !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.home-access-card {
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.home-access-card__img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    clip-path: inset(2px) !important;
}

/* HOME-ACCESS-UNIFIED-132: one rendered component for both role colours.
   The opaque action panel covers the old raster buttons completely. */
.home-access-card {
    container-type: inline-size;
    --access-color: #0066e9;
    --access-light: #17c4ff;
    --access-dark: #003bab;
    --access-panel: #f4fcff;
}
.home-access-card--parent {
    --access-color: #069320;
    --access-light: #65d500;
    --access-dark: #005d22;
    --access-panel: #f6ffe9;
}
.home-access-actions {
    position: absolute;
    z-index: 2;
    top: 62.5%;
    left: 8%;
    width: 84%;
    height: 20.5%;
    padding: 1.6% 2%;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 2cqi;
    background: var(--access-panel);
    border-radius: 3cqi;
}
html body.home-reference-page .home-access-actions .home-access-btn {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 14% minmax(0, 1fr) 7%;
    align-items: center;
    gap: 2%;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    inset: auto !important;
    box-sizing: border-box;
    padding: 0 5% !important;
    border: max(2px, .5cqi) solid var(--access-color) !important;
    border-radius: 999px !important;
    color: white !important;
    background: linear-gradient(165deg, var(--access-light), var(--access-color) 45%, var(--access-dark)) !important;
    box-shadow: inset 0 2px 2px #ffffffa0, inset 0 -3px 2px #00000020, 0 3px 5px #00336635 !important;
    font-family: "Fredoka", "Trebuchet MS", sans-serif !important;
    font-size: clamp(13px, 5.2cqi, 42px) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    transform: none !important;
    transition: filter .16s ease, box-shadow .16s ease !important;
}
html body.home-reference-page .home-access-actions .home-access-btn--register {
    color: var(--access-dark) !important;
    background: linear-gradient(#fff 55%, var(--access-panel)) !important;
}
html body.home-reference-page .home-access-actions .home-access-btn::before,
html body.home-reference-page .home-access-actions .home-access-btn::after {
    content: none !important;
    display: none !important;
}
.home-access-btn svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80%;
    fill: currentColor;
    pointer-events: none;
}
html body.home-reference-page .home-access-actions .home-access-btn:hover {
    filter: brightness(1.08);
    box-shadow: inset 0 2px 2px #ffffffa0, 0 0 0 2px #fff, 0 0 12px var(--access-color) !important;
}
html body.home-reference-page .home-access-actions .home-access-btn:active {
    filter: brightness(.95);
    transform: none !important;
}
html body.home-reference-page .home-access-actions .home-access-btn:focus-visible {
    outline: 3px solid #ffbc00 !important;
    outline-offset: 3px !important;
}

/* HOME-INSTALL-HOVER-090: isti efekt kao gumb na install.php s hover/active/focus na install linku pocetnog ekrana. */
html body.home-reference-page .home-reference-install {
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

html body.home-reference-page .home-reference-install:hover {
    filter: saturate(1.08) brightness(1.025) !important;
}

html body.home-reference-page .home-reference-install:active {
    transform: translateY(max(1px, .18cqi)) !important;
    filter: saturate(1.02) brightness(.985) !important;
}

html body.home-reference-page .home-reference-install:focus-visible {
    outline: max(2px, .45cqi) solid rgba(9, 76, 205, .44) !important;
    outline-offset: max(2px, .35cqi) !important;
}

/* HOME-ROBOT-NEXT-LOGO-091: robot odmah pokraj loga Matematicke arene (desno, na istoj visini 45px). */
html body.home-reference-page .home-reference-hero > .home-reference-hero__robot {
    top: 45px !important;
    bottom: auto !important;
    right: 0 !important;
    width: 37.8% !important;
    z-index: 0 !important;
}

/* HOME-LIFT-ALL-092: sadržaj ispod heroja podignut za 20px — 20px razmaka ispod teksta dobrodošlice. */
html body.home-reference-page .home-reference-install {
    margin-top: -20px !important;
}


/* HOME-GRID-COMPACT-095: hero je grid - logo/copy/install u toku s razmakom 20px, robot ostaje apsolutan desno. Install vise ne ovisi o dnu heroja pa je kompozicija jednaka na svim ekranima. */
html body.home-reference-page .home-reference-hero {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    row-gap: 20px !important;
    padding: 45px 0 14px !important;
}

html body.home-reference-page .home-reference-hero > .home-reference-hero__logo {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    width: 58% !important;
}

html body.home-reference-page .home-reference-hero__copy {
    position: static !important;
    bottom: auto !important;
    margin: 4.2cqi auto 0 !important;
    width: 58% !important;
}

html body.home-reference-page .home-reference-install {
    width: 100% !important;
    margin: 0 !important;
}

@media (min-width: 941px) {
    html body.home-reference-page .home-reference-hero {
        padding-top: 25px !important;
        row-gap: 16px !important;
    }
    html body.home-reference-page .home-reference-hero > .home-reference-hero__robot {
        top: 25px !important;
    }
    html body.home-reference-page .home-reference-hero__copy {
        margin-top: calc(4.2cqi + 4px) !important;
    }
    html body.home-reference-page .home-reference-hero__copy strong {
        font-size: clamp(23px, 6cqi, 44px) !important;
    }
    html body.home-reference-page .home-reference-hero__copy b {
        font-size: clamp(25px, 6.6cqi, 48px) !important;
    }
    html body.home-reference-page .home-reference-hero__copy span {
        font-size: clamp(17px, 4.2cqi, 31px) !important;
    }
    html body.home-reference-page .home-reference-install {
        max-width: 889px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* HOME-INSTALL-PHYSICAL-CROP-108: nova datoteka već je fizički obrezana do bijelog ruba;
   contain prikazuje svaki njezin piksel bez ponovnog CSS rezanja. */
html body.home-reference-page .home-reference-supplied--install {
    object-fit: contain !important;
}

/* HOME-MOBILE-HERO-RESPONSIVE-109: na tabletima i mobitelima logo, robot, tekst i
   instalacijski banner imaju vlastite grid zone pa se ne mogu preklapati. */
@media (max-width: 1100px) {
    html body.home-reference-page .home-reference-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 0 !important;
        row-gap: clamp(9px, 2.4vw, 18px) !important;
        padding: clamp(20px, 5vw, 45px) clamp(8px, 2.2vw, 20px) 14px !important;
        overflow: visible !important;
    }

    html body.home-reference-page .home-reference-hero > .home-reference-hero__logo {
        position: static !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        width: min(100%, 500px) !important;
        height: auto !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    html body.home-reference-page .home-reference-hero > .home-reference-hero__robot {
        position: absolute !important;
        top: clamp(28px, 5vw, 55px) !important;
        left: calc(50% + clamp(80px, 22vw, 190px)) !important;
        width: min(27vw, 270px) !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body.home-reference-page .home-reference-hero__copy {
        position: static !important;
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: min(88%, 590px) !important;
        margin: 0 auto !important;
    }

    html body.home-reference-page .home-reference-hero__copy strong {
        font-size: clamp(19px, 4.5vw, 34px) !important;
    }

    html body.home-reference-page .home-reference-hero__copy b {
        font-size: clamp(21px, 5vw, 38px) !important;
    }

    html body.home-reference-page .home-reference-hero__copy span {
        margin-top: 3px !important;
        font-size: clamp(13px, 3.2vw, 24px) !important;
    }

    html body.home-reference-page .home-reference-install {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: min(100%, 889px) !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1478 / 486 !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    html body.home-reference-page .home-reference-supplied--install {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

@media (max-width: 480px) {
    html body.home-reference-page .home-reference-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
        row-gap: 8px !important;
        padding: 18px 7px 10px !important;
    }

    html body.home-reference-page .home-reference-hero > .home-reference-hero__logo {
        width: min(100%, 220px) !important;
    }

    html body.home-reference-page .home-reference-hero > .home-reference-hero__robot {
        top: clamp(28px, 8vw, 34px) !important;
        left: calc(50% + clamp(58px, 16vw, 82px)) !important;
        width: min(27vw, 108px) !important;
    }

    html body.home-reference-page .home-reference-hero__copy {
        width: 94% !important;
    }

    html body.home-reference-page .home-reference-hero__copy strong {
        font-size: clamp(18px, 5.1vw, 22px) !important;
    }

    html body.home-reference-page .home-reference-hero__copy b {
        font-size: clamp(20px, 5.7vw, 25px) !important;
    }

    html body.home-reference-page .home-reference-hero__copy span {
        font-size: clamp(12px, 3.5vw, 15px) !important;
    }

    html body.home-reference-page .home-reference-install {
        width: calc(100% - 4px) !important;
        border-radius: clamp(12px, 4vw, 18px) !important;
    }
}

/* HOME-INSTALL-WHITE-EDGE-GOLD-107: dvije zlatne iskre kruže izravno po bijelom
   rubu dostavljene slike; narančasti gumb u slici ostaje netaknut. */
@property --home-install-banner-gold-orbit-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes home-install-banner-gold-orbit-107 {
    0% {
        --home-install-banner-gold-orbit-angle: 0deg;
        filter:
            drop-shadow(0 0 clamp(2px, .42cqi, 4px) rgba(255, 250, 213, .92))
            drop-shadow(0 0 clamp(4px, .72cqi, 7px) rgba(255, 174, 0, .60));
    }
    50% {
        filter:
            drop-shadow(0 0 clamp(3px, .55cqi, 5px) rgba(255, 255, 238, 1))
            drop-shadow(0 0 clamp(6px, 1.05cqi, 10px) rgba(255, 179, 0, .88));
    }
    100% {
        --home-install-banner-gold-orbit-angle: 360deg;
        filter:
            drop-shadow(0 0 clamp(2px, .42cqi, 4px) rgba(255, 250, 213, .92))
            drop-shadow(0 0 clamp(4px, .72cqi, 7px) rgba(255, 174, 0, .60));
    }
}

html body.home-reference-page .home-reference-install {
    position: relative !important;
    isolation: isolate !important;
    box-shadow: none !important;
}

html body.home-reference-page .home-reference-install::before {
    content: "" !important;
    position: absolute !important;
    z-index: 3 !important;
    inset: 0 !important;
    display: block !important;
    padding: clamp(2px, .38cqi, 4px) !important;
    border-radius: inherit !important;
    background: conic-gradient(
        from var(--home-install-banner-gold-orbit-angle),
        transparent 0deg 14deg,
        rgba(255, 201, 36, .36) 25deg,
        #ffd34e 36deg,
        #fffbe2 44deg,
        #ffffff 48deg,
        #ffe071 53deg,
        #ff9d00 67deg,
        rgba(255, 183, 0, .30) 82deg,
        transparent 100deg 184deg,
        rgba(255, 201, 36, .30) 197deg,
        #ffd34e 208deg,
        #fffbe2 216deg,
        #ffffff 220deg,
        #ffe071 225deg,
        #ff9d00 239deg,
        rgba(255, 183, 0, .26) 254deg,
        transparent 272deg 360deg
    ) !important;
    mix-blend-mode: screen !important;
    will-change: filter !important;
    pointer-events: none !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
    animation: home-install-banner-gold-orbit-107 2.35s linear infinite !important;
}

html body.home-reference-page .home-reference-install::after {
    content: none !important;
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html body.home-reference-page .home-reference-install::before {
        animation-duration: 9s !important;
    }
}

/* HOME-RESPONSIVE-137: bounded artwork on tablets, laptops and TVs. */
@media (min-width: 481px) {
    html body.home-reference-page .home-reference {
        max-width: 760px !important;
    }
    html body.home-reference-page .home-reference-hero {
        width: 100% !important;
        max-width: 560px !important;
        margin: 0 auto !important;
        padding: 24px 12px 16px !important;
        row-gap: 12px !important;
    }
    html body.home-reference-page .home-reference-hero > .home-reference-hero__logo {
        width: 280px !important;
        max-width: 60% !important;
    }
    html body.home-reference-page .home-reference-hero > .home-reference-hero__robot {
        position: absolute !important;
        top: 30px !important;
        left: calc(50% + 96px) !important;
        right: auto !important;
        width: 140px !important;
        max-width: 26% !important;
        height: auto !important;
    }
    html body.home-reference-page .home-reference-hero__copy {
        width: 100% !important;
        margin: 0 auto !important;
    }
    html body.home-reference-page .home-reference-hero__copy strong { font-size: 25px !important; }
    html body.home-reference-page .home-reference-hero__copy b { font-size: 29px !important; }
    html body.home-reference-page .home-reference-hero__copy span { font-size: 18px !important; }
    html body.home-reference-page .home-reference-install {
        width: 100% !important;
        max-width: 420px !important;
        height: auto !important;
        aspect-ratio: 1478 / 486 !important;
        margin: 0 auto !important;
    }
    html body.home-reference-page .home-reference-supplied--install {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    html body.home-reference-page .home-access-card { max-width: 280px !important; }
    html body.home-reference-page .home-reference-child {
        width: calc(100% - 24px) !important;
        max-width: 420px !important;
        margin: 16px auto 0 !important;
    }
}
@media (min-width: 640px) {
    html body.home-reference-page .home-access-cards {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 20px !important;
        padding: 0 12px !important;
    }
}