/* =========================================================
   OPG Kostešić — Hero
   Inspirirano bee/index.html dizajnom (Open Sans + Signika Negative)
   ========================================================= */

:root {
    --opg-brand:        #f7bd00;
    --opg-brand-dark:   #eb6d2f;
    --opg-ink:          #5a3733;
    --opg-ink-soft:     #8b6a63;
    --opg-cream:        #f9f4f0;
    --opg-white:        #ffffff;

    --opg-font-heading: 'Signika Negative', system-ui, -apple-system, sans-serif;
    --opg-font-body:    'Open Sans', system-ui, -apple-system, sans-serif;

    --opg-radius-pill:  999px;
    --opg-shadow-sm:    0 2px 8px rgba(90, 55, 51, 0.08);
    --opg-shadow-md:    0 6px 20px rgba(90, 55, 51, 0.15);

    --opg-bg-desktop:   none;
    --opg-bg-mobile:    none;
}

/* Globalni rule — svi heading tagovi (h1-h6) koriste Signika Negative.
   Ovo je defense-in-depth iznad pojedinačnih CSS klasa po sekcijama:
   bilo koji heading koji nije eksplicitno stiliziran će svejedno dobiti
   pravu typo iz brand sustava. Variable font 300-700 omogućava precizniju
   kontrolu (light za suptilne stvari, bold za naglašene). */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--opg-font-heading);
    font-optical-sizing: auto;
    font-style: normal;
}

/* Hero shell — popunjava cijeli display.
   - 100dvh = dynamic viewport; ispravno na iOS/Android s URL barom
   - 100vh fallback za browsere bez dvh podrške
   - overflow:hidden drži pčelice/dekoracije unutar hero okvira */
.opg-hero {
    position: relative;
    overflow: hidden;
    background: var(--opg-cream);
    font-family: var(--opg-font-body);
    color: var(--opg-ink);
    padding-block: 32px;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
}

/* WP admin bar kompenzacija — kad si ulogiran kao admin, WP doda 32px
   (ili 46px na mobilu) traku gore. Bez ovog hero "izlazi" ispod ekrana. */
.admin-bar .opg-hero {
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
    .admin-bar .opg-hero {
        min-height: calc(100vh - 46px);
        min-height: calc(100dvh - 46px);
    }
}

.opg-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--opg-bg-mobile);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Suptilan heksagon (saće) pattern preko cream pozadine.
   - SVG inline (no extra HTTP request)
   - opacity 0.35 baked in SVG-u, dodatno opacity 0.55 na pseudo-element-u
   - Iza .opg-hero__bg (user bg slika ga prekriva ako je postavljena) */
.opg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104' width='120' height='104'><g fill='none' stroke='%23f7bd00' stroke-width='1.5' opacity='0.35'><polygon points='30,5 55,20 55,50 30,65 5,50 5,20'/><polygon points='90,5 115,20 115,50 90,65 65,50 65,20'/><polygon points='60,55 85,70 85,100 60,115 35,100 35,70'/></g></svg>");
    background-size: 120px 104px;
    background-repeat: repeat;
    opacity: 0.55;
    pointer-events: none;
}

@media (min-width: 768px) {
    .opg-hero__bg {
        background-image: var(--opg-bg-desktop);
    }
}

.opg-hero__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 32px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

/* Content */
.opg-hero__content {
    max-width: 640px;
    text-align: center;
}

.opg-hero__eyebrow {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--opg-brand-dark);
    margin: 0 0 16px;
}

.opg-hero__title {
    font-family: var(--opg-font-heading);
    font-weight: 700;
    line-height: 1.0;
    text-transform: uppercase;
    color: var(--opg-ink);
    margin: 0 0 20px;
    font-size: clamp(40px, 11vw, 96px);
    letter-spacing: -0.01em;
}

.opg-hero__lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--opg-ink);
    margin: 0 0 28px;
}
.opg-hero__lead p { margin: 0 0 12px; }
.opg-hero__lead p:last-child { margin-bottom: 0; }

.opg-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Buttons */
.opg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--opg-radius-pill);
    font-family: var(--opg-font-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
    white-space: nowrap;
}
.opg-btn--primary {
    background: var(--opg-brand-dark);
    color: var(--opg-white);
    box-shadow: var(--opg-shadow-sm);
}
.opg-btn--primary:hover,
.opg-btn--primary:focus-visible {
    background: var(--opg-ink);
    color: var(--opg-white);
    transform: translateY(-1px);
    box-shadow: var(--opg-shadow-md);
}

/* Media (placeholder image) */
.opg-hero__media {
    justify-self: center;
    width: 100%;
    max-width: 320px;
}
.opg-hero__media img,
.opg-hero__media picture {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Desktop / Mobile content swap (only used if user provided different mobile text) */
.opg-hero__eyebrow.is-desktop,
.opg-hero__title.is-desktop,
.opg-hero__lead.is-desktop,
.opg-btn.is-desktop { display: none; }

.opg-hero__eyebrow.is-mobile,
.opg-hero__title.is-mobile,
.opg-hero__lead.is-mobile,
.opg-btn.is-mobile { display: block; }

@media (min-width: 768px) {
    .opg-hero__eyebrow.is-desktop,
    .opg-hero__title.is-desktop,
    .opg-hero__lead.is-desktop { display: block; }
    .opg-btn.is-desktop { display: inline-flex; }

    .opg-hero__eyebrow.is-mobile,
    .opg-hero__title.is-mobile,
    .opg-hero__lead.is-mobile,
    .opg-btn.is-mobile { display: none; }
}

/* Layout: tablet+ → two columns, text left, image right */
@media (min-width: 768px) {
    .opg-hero { padding-block: 56px; }

    .opg-hero__container {
        grid-template-columns: 1.05fr 1fr;
        gap: 40px;
    }
    .opg-hero__content {
        text-align: left;
    }
    .opg-hero__actions {
        justify-content: flex-start;
    }
    .opg-hero__media {
        justify-self: end;
        max-width: 440px;
    }
}

@media (min-width: 1024px) {
    .opg-hero { padding-block: 72px; }

    .opg-hero__container {
        grid-template-columns: 1.1fr 1fr;
        gap: 64px;
        margin-top: -50px; /* lagani shift gore — kompenzira optički centar uz sticky header */
    }
    .opg-hero__media {
        max-width: 520px;
    }
}

/* =========================================================
   Decorativna grančica na lijevom rubu (samo desktop ≥1024px)
   - Pozicionirana dolje-lijevo, blago izvan ruba
   - Fiksna veličina (ne raste s viewport-om)
   ========================================================= */
.opg-hero__deco-left {
    display: none;
}
@media (min-width: 1024px) {
    .opg-hero__deco-left {
        display: block;
        position: absolute;
        left: -40px;
        bottom: 6%;
        width: 200px;
        height: auto;
        z-index: 1;
        pointer-events: none;
        user-select: none;
    }
}
@media (min-width: 1280px) {
    .opg-hero__deco-left {
        left: -20px;
    }
}

/* Decorativna grančica na desnom rubu, vertikalno centrirana (≥1024px) */
.opg-hero__deco-right {
    display: none;
}
@media (min-width: 1024px) {
    .opg-hero__deco-right {
        display: block;
        position: absolute;
        right: -30px;
        top: 50%;
        transform: translateY(-50%);
        width: 180px;
        height: auto;
        z-index: 1;
        pointer-events: none;
        user-select: none;
    }
}
@media (min-width: 1280px) {
    .opg-hero__deco-right {
        right: -10px;
    }
}

/* =========================================================
   Lebdeće pčelice (decorative)
   - 6 pcelica, slotovi tl/tr/ml/mr/bl/br, ankerane na top hero-a
   - Container je 100dvh (visine viewport-a) → pčelice uvijek u vidljivom dijelu
     ekrana, čak i ako bi hero ikad porastao iznad 100vh (dug content)
   - Animacija 12s ciklus, active ~28% (3.5s float, 8.5s idle)
   - Staggered delay (0, 2, 4, 6, 8, 10) → max 2 pčelice lebde istovremeno
   ========================================================= */
.opg-hero__bees {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100%;
    z-index: 2;
    pointer-events: none;
}
.opg-hero__bee {
    --opg-bee-flip: 1;
    position: absolute;
    width: 46px;
    height: auto;
    user-select: none;
    will-change: transform;
    transform-origin: center;
    animation: opg-bee-float 12s ease-in-out infinite;
}

/* Slot pozicije — namjerno asimetrične (svaka na drugačijem top%, bez
   ogledalskih parova lijevo/desno), veličine variraju 42–50px da uklone
   "placed" osjećaj. Slot kratice (tl/tr/...) su zadržane samo zbog
   kompatibilnosti s PHP konfiguracijom — pozicije su pomaknute. */
.opg-hero__bee--tl { top:  9%;    left:  18%;  width: 44px; --opg-bee-rot: -8deg; }
.opg-hero__bee--tr { top:  4%;    right: 26%;  width: 50px; --opg-bee-rot:  6deg; }
.opg-hero__bee--ml { top:  36%;   left:  5%;   width: 42px; --opg-bee-rot: -4deg; }
.opg-hero__bee--mr { top:  62%;   right: 9%;   width: 48px; --opg-bee-rot:  3deg; }
.opg-hero__bee--bl { bottom: 26%; left:  38%;  width: 46px; --opg-bee-rot: -6deg; }
.opg-hero__bee--br { bottom: 8%;  right: 30%;  width: 44px; --opg-bee-rot:  4deg; }

/* Mobile — sve pčelice ostaju vidljive ali pomjerene/skalirane.
   Različiti top% i side% sprječavaju "u svakom kutu jedna" izgled. */
@media (max-width: 767px) {
    .opg-hero__bee--tl { top:  5%;    left:  8%;   width: 32px; }
    .opg-hero__bee--tr { top:  14%;   right: 10%;  width: 36px; }
    .opg-hero__bee--ml { top:  34%;   left:  3%;   width: 30px; }
    .opg-hero__bee--mr { top:  56%;   right: 5%;   width: 34px; }
    .opg-hero__bee--bl { bottom: 22%; left:  18%;  width: 32px; }
    .opg-hero__bee--br { bottom: 6%;  right: 28%;  width: 36px; }
}

/* Animacija: 3s float (~25%), 9s idle (~75%). Vrlo suptilno (max 8px translate). */
@keyframes opg-bee-float {
    0%   { transform: scaleX(var(--opg-bee-flip, 1)) rotate(var(--opg-bee-rot, 0deg)) translateY(0); }
    7%   { transform: scaleX(var(--opg-bee-flip, 1)) rotate(var(--opg-bee-rot, 0deg)) translateY(-7px); }
    14%  { transform: scaleX(var(--opg-bee-flip, 1)) rotate(var(--opg-bee-rot, 0deg)) translateY(-2px); }
    21%  { transform: scaleX(var(--opg-bee-flip, 1)) rotate(var(--opg-bee-rot, 0deg)) translateY(-5px); }
    28%  { transform: scaleX(var(--opg-bee-flip, 1)) rotate(var(--opg-bee-rot, 0deg)) translateY(0); }
    100% { transform: scaleX(var(--opg-bee-flip, 1)) rotate(var(--opg-bee-rot, 0deg)) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .opg-btn { transition: none; }
    .opg-hero__bee { animation: none; }
}